/* Phone-only shell. The page stays one column, with a fixed bottom bar. */
html.phone { -webkit-text-size-adjust: 100%; }
html.phone body { background: #ffe4ec; }
html.phone #app {
  width: min(430px, 100%);
  margin: 0 auto;
  min-height: 100dvh;
  background:
    radial-gradient(420px 240px at 10% -4%, rgba(255, 107, 129, 0.35), transparent 60%),
    radial-gradient(360px 220px at 100% 0%, rgba(255, 165, 2, 0.28), transparent 55%),
    #fff5f8;
  box-shadow: 0 0 0 1px rgba(255, 107, 129, 0.18);
}
html.phone .floater { display: none; }
html.phone .nav,
html.phone .desk-login,
html.phone .burger,
html.phone .actions .btn-primary { display: none !important; }
html.phone .topbar-wrap { padding: 8px 8px 0; }
html.phone .topbar { border-radius: 22px; padding: 6px 8px; }
html.phone .brand small { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
html.phone .wrap { width: calc(100% - 20px); }
html.phone .block { padding: 36px 0; scroll-margin-top: 76px; }
html.phone h1 { font-size: 1.72rem; }
html.phone h2 { font-size: 1.45rem; }
html.phone .hero { grid-template-columns: minmax(0, 1fr) !important; }
html.phone .hero > *,
html.phone .stage,
html.phone h1,
html.phone #orbit { min-width: 0; max-width: 100%; }
html.phone #orbit { width: 100%; }
html.phone .passport-grid,
html.phone .safety-grid,
html.phone .stats,
html.phone .story-grid,
html.phone .foot,
html.phone .grid-2,
html.phone .people,
html.phone .zone-grid,
html.phone .plan-grid { grid-template-columns: minmax(0, 1fr) !important; }
html.phone .stage { min-height: 0; }
html.phone .halo { position: relative; left: auto; top: auto; transform: none; margin: 8px auto 12px; }
html.phone #orbit { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
html.phone #orbit .ocard { position: relative; inset: auto; flex: 0 0 168px; width: 168px; height: 220px; scroll-snap-align: start; }
html.phone .logo-tile { width: 58px; height: 58px; border-radius: 18px; }
html.phone .logo-tile svg { width: 34px; height: 34px; }
html.phone .deck { height: min(62dvh, 520px); }
html.phone .circle { width: 64px; height: 64px; }
html.phone .btn, html.phone .field, html.phone select.field { min-height: 44px; }
html.phone input, html.phone select, html.phone textarea { font-size: 16px; }
html.phone .subnav { padding-top: 10px; }
html.phone .subnav button { min-height: 40px; }
html.phone .filters .lbl { min-width: 0; width: 100%; }
html.phone .foot { display: grid; gap: 18px; padding-bottom: 12px; }
html.phone #view-home, html.phone #view-sub { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
html.phone .drawer {
  display: none;
  position: fixed;
  z-index: 55;
  left: 50%;
  bottom: calc(64px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(430px, 100%);
  max-height: min(68dvh, 520px);
  overflow: auto;
  margin: 0;
  border-radius: 24px 24px 0 0;
  padding: 12px;
  gap: 4px;
}
html.phone .drawer.open { display: grid !important; }
html.phone .drawer .navlink, html.phone .drawer .btn { min-height: 44px; text-align: start; }
html.phone .lang-pop {
  left: 50%;
  right: auto;
  inset-inline-end: auto;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 24px));
  top: 64px;
}
html.phone .tabbar {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 240, 245, 0.96);
  border-top: 1px solid rgba(255, 107, 129, 0.28);
  box-shadow: 0 -10px 28px rgba(255, 71, 87, 0.12);
}
html.phone .tabbar button {
  border: 0;
  background: transparent;
  color: var(--dusk);
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 52px;
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
html.phone .tabbar svg { width: 22px; height: 22px; }
html.phone .tabbar button.is-on { color: var(--rose); }
html.phone .tabbar .tab-main {
  color: white;
  background: linear-gradient(135deg, #ff6b81, #ff4757);
  border-radius: 18px;
  margin-top: -16px;
  box-shadow: 0 10px 18px rgba(255, 71, 87, 0.28);
}
html.phone .tabbar .tab-main.is-on { color: white; }
html.phone .cookie {
  left: 50%;
  right: auto;
  width: min(400px, calc(100% - 16px));
  transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom));
  flex-direction: column;
  align-items: stretch;
}
html.phone #pluginDock {
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: min(400px, calc(100% - 16px));
}
html.phone #toasts {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom));
  width: min(320px, calc(100% - 24px));
}
html.phone .modal-back,
html.phone .match {
  left: 50%;
  right: auto;
  width: min(430px, 100%);
  transform: translateX(-50%);
}
html.phone .modal, html.phone .match-card, html.phone .sub { width: min(360px, calc(100% - 20px)); }
html.phone #admirer { z-index: 90; }
html.phone .table-wrap { margin-inline: -2px; }
@media (max-width: 430px) {
  html.phone #app { box-shadow: none; }
}