/* ============================================================
   TG Mini App · iOS foundation
   Palette from iOS dark + Telegram; every color falls back to a
   --tg-theme-* var so it adopts the user's Telegram theme inside TG.
   ============================================================ */
:root {
  --bg:            var(--tg-theme-bg-color, #000000);
  --section-bg:    var(--tg-theme-section-bg-color, #1c1c1e);
  --section-elev:  #2c2c2e;

  --label:         var(--tg-theme-text-color, #ffffff);
  --label-2:       var(--tg-theme-subtitle-text-color, rgba(235,235,245,0.60));
  --label-3:       rgba(235,235,245,0.30);
  --section-head:  var(--tg-theme-section-header-text-color, rgba(235,235,245,0.60));

  --accent:        var(--tg-theme-button-color, #2990ff);
  --accent-text:   var(--tg-theme-button-text-color, #ffffff);
  --link:          var(--tg-theme-link-color, #2990ff);
  --green:         #34c759;
  --destructive:   var(--tg-theme-destructive-text-color, #ff453a);
  --separator:     var(--tg-theme-section-separator-color, rgba(84,84,88,0.55));

  /* icon tile tints (iOS Settings) */
  --t-red:#ff453a; --t-orange:#ff9f0a; --t-yellow:#ffd60a; --t-green:#30d158;
  --t-teal:#40c8e0; --t-blue:#0a84ff; --t-indigo:#5e5ce6; --t-purple:#bf5af2;
  --t-pink:#ff375f; --t-gray:#8e8e93;

  --r-group: 20px; --r-btn: 14px;
  --pad: 16px;
  /* fullscreen: device notch + Telegram's own top controls (close/⋯) stack up.
     The ideal top inset per Telegram = safe-area + content-safe-area summed. */
  --safe-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px))
                 + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bot: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))
                 + var(--tg-content-safe-area-inset-bottom, 0px));

  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-tap: 0.12s;
}

@font-face {
  font-family: "SF Pro Local";
  src: local("SF Pro Display"), local("SF Pro Text"), local(".SFNS-Regular");
  font-weight: 100 900; font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%; background: var(--bg); color: var(--label);
  font-family: "SF Pro Local", -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; line-height: 1.29; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-synthesis: none;
}
/* kill page-level scroll & rubber-band stretch — only .scroll scrolls */
html, body { overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; }
body, .screen, .btn, .row, .seg-i { user-select: none; -webkit-user-select: none; }
textarea { user-select: text; -webkit-user-select: text; }

/* ---------- app shell + screen stack ---------- */
.app { position: relative; height: 100dvh; max-width: 480px; margin: 0 auto;
       background: var(--bg); overflow: hidden; isolation: isolate; }
#stack { position: absolute; inset: 0; }

/* class-driven transitions — robust, no stuck WAAPI fill state.
   default = parked off-screen right; .active = resting; .behind = parked left */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  will-change: transform;
  transition: transform 0.42s var(--ease-ios), opacity 0.42s var(--ease-ios);
}
.screen.active { transform: none; }
.screen.behind { transform: translateX(-22%); opacity: 0.5; }

/* per-screen scroll: momentum, no overscroll leak, no bar */
.scroll {
  flex: 1 1 auto;
  min-height: 0;                 /* let the flex child shrink so it actually scrolls */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--safe-top) + 14px) 0 24px;
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }
.scroll.center { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---------- large title ---------- */
.lt { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; padding: 4px var(--pad) 2px; }
.lt-sub { font-size: 15px; color: var(--label-2); padding: 0 var(--pad) 10px; line-height: 1.34; }
.center-t { text-align: center; }
.scroll.center .lt, .scroll.center .lt-sub { max-width: 32ch; }

/* ---------- hero (animated tgs) ---------- */
.hero { text-align: center; padding: 10px 0 2px; }
.hero.sm { padding: 4px 0 0; }
.hero-art { width: 68px; height: 68px; margin: 0 auto; will-change: transform;
            animation: hero-in 0.55s var(--ease-ios) both; }
.hero.sm .hero-art { width: 54px; height: 54px; }
@keyframes hero-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

/* ---------- footer primary button (only on some screens) ---------- */
.footer { flex: 0 0 auto; padding: 10px var(--pad) calc(12px + var(--safe-bot));
          background: linear-gradient(to top, var(--bg) 68%, transparent); }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;
       border: none; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-text);
       font: 600 17px/1 inherit; letter-spacing: -0.01em;
       transition: transform var(--dur-tap) var(--ease-ios), filter var(--dur-tap); }
.btn:active { transform: scale(0.98); filter: brightness(0.9); }
.btn.danger { background: color-mix(in srgb, var(--destructive) 18%, var(--section-bg)); color: var(--destructive); }
.hidden { display: none !important; }

/* ---------- confetti / effect overlay ---------- */
.fx { position: absolute; inset: 0; z-index: 60; pointer-events: none; display: none; }
.fx.on { display: block; }
.fx > div { position: absolute; inset: 0; }

/* ---------- Apple emoji images (forced everywhere) ---------- */
.ae { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; object-fit: contain; }
.ic .ae, .cell-emoji .ae { width: 1em; height: 1em; vertical-align: -0.16em; }
.ic.flag .ae { border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation-duration: .001s !important; transition-duration: .001s !important; }
}