/* iPhone Safari: keep page titles and result actions clear of fixed chrome. */
html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.app {
  padding-bottom: calc(210px + env(safe-area-inset-bottom));
}

.topbar {
  position: relative;
  top: auto;
  background: transparent;
  backdrop-filter: none;
}

.bottom-nav {
  height: 68px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  border-radius: 25px;
  padding: 6px;
}

.bottom-nav button {
  border-radius: 20px;
}

.bottom-nav button.active {
  transform: none;
}

.page {
  padding-bottom: 14px;
}

.draw-kind-switch button {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 64px;
  align-content: center;
}

.draw-kind-switch button b { font-size: 16px; }
.draw-kind-switch button small { color: #9b838e; font-size: 10px; font-weight: 700; }
.draw-kind-switch button.active small { color: #c96785; }
.draw-kind-switch button em {
  position: absolute; top: -7px; right: 7px; padding: 3px 7px;
  border-radius: 999px; background: #7f63c2; color: #fff;
  font-size: 9px; font-style: normal; font-weight: 900;
}

.complex-guide {
  width: 100%; display: flex; align-items: center; gap: 10px;
  margin: 10px 0 4px; padding: 12px 13px; border: 1px solid #dfd3f4;
  border-radius: 17px; background: linear-gradient(135deg, #f5f0ff, #fff); text-align: left;
}
.complex-guide > span {
  width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 12px; background: #e8ddff;
}
.complex-guide > div { min-width: 0; flex: 1; }
.complex-guide b, .complex-guide small { display: block; }
.complex-guide b { color: #684d9d; font-size: 13px; }
.complex-guide small { margin-top: 3px; color: #9a8290; font-size: 10px; }
.complex-guide i { color: #7b5bb4; font-size: 11px; font-style: normal; font-weight: 900; white-space: nowrap; }

@media (max-width: 480px) {
  .app {
    padding-bottom: calc(220px + env(safe-area-inset-bottom));
  }

  .topbar {
    height: 72px;
  }

  .topbar strong {
    font-size: 18px;
  }

  .coin-pill,
  .icon-btn {
    height: 44px;
  }

  .icon-btn {
    width: 44px;
    font-size: 18px;
  }

  .coin-pill b {
    font-size: 19px;
  }

  .segmented button {
    padding: 10px;
  }

  .mode-card {
    padding: 12px 9px;
  }

  .reel {
    height: 178px;
  }

  .reel #reelText {
    font-size: 26px;
  }

  .primary,
  .secondary,
  .quiet,
  .danger {
    min-height: 47px;
  }

  .result-tip {
    padding: 13px 15px;
    font-size: 12px;
  }

  .bottom-nav {
    width: calc(100% - 24px);
    height: 66px;
    bottom: calc(7px + env(safe-area-inset-bottom));
  }

  .bottom-nav button i {
    font-size: 20px;
  }

  .bottom-nav button span {
    font-size: 10px;
  }
}