/* ──────────────────────────────────────────────────────────────
   FYM game chrome — shared immersive shell for EVERY game screen
   Companion to FYM.GameChrome in js/platform-game.js.

   Le Cercle Privé (mp-poker-table) shipped this pattern first, in
   mp-poker.css §18A. This file generalises it to the other 19 game
   screens WITHOUT touching the poker rules — `mp-poker-table` is
   deliberately absent from every selector list below so the two
   implementations never fight.

   Mechanism (no JS timing risk): app.js's navigate() stamps
   `body[data-screen="<screen>"]` BEFORE the screen mounts, so the
   chrome is already gone on the first paint. The `.ov` variant of
   every rule exists because obsidian-vault.css loads with a
   `body.ov #header { display: flex }` / `body.ov .bottom-nav`
   pair that would otherwise win the tie; this file is also linked
   AFTER obsidian-vault.css so even the plain variant outranks it.

   Cascade note: the bar sits at z-index 60 — above game content
   (z ≤ 30) and below every full-screen game overlay (roulette
   wheel 9000, sheets 90+, bottom-nav 10000), which is intentional:
   a ceremony overlay should cover the chrome.
   ────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   1 · IMMERSIVE MODE — app header + bottom nav leave the screen
   ══════════════════════════════════════════════════════════════ */

body:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) #header,
body.ov:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) #header,
body:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) #bottom-nav,
body.ov:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) #bottom-nav {
  display: none !important;
}

/* Layout budget. Zeroing --header-height / --nav-height fixes every
   downstream `calc(var(--nav-height) …)` in one stroke (platform.css
   reward toast, overlays.css sheets, theme.css .screen min-height)
   instead of chasing them one file at a time. */
body:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
),
body.ov:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) {
  --header-height: 0px;
  --nav-height: 0px;
  --fym-gc-h: 40px;

  /* --fym-safe-top, NOT env(). Telegram's fullscreen mode paints a
     "✕ Close" pill top-left and a "⌄ ⋯" pill top-right OVER the
     webview — client-side chrome we cannot hide or move (Bot API 8.0
     documents no such method). Offsetting by env() alone put this
     bar's two controls in exactly that band, so on iPhone the back
     button and the balance chip were painted underneath Telegram's
     own and were simply not there. --fym-safe-top (tokens.css, fed by
     js/safe-area.js) is safeAreaInset + contentSafeAreaInset, i.e.
     device notch PLUS the room Telegram's pills need. It collapses to
     the plain notch outside fullscreen and to env() outside Telegram,
     so the bar rides at the top of the screen everywhere else. */
  --fym-gc-top: calc(var(--fym-gc-h) + var(--fym-safe-top, env(safe-area-inset-top, 0px)));
  padding-top: var(--fym-gc-top);
  padding-bottom: var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px));

  /* games-compact.css builds --gc-viewport-h — the height budget seven
     game screens size themselves from — as
       100dvh − 52px topbar − 72px bottom-nav − safe areas.
     Neither the topbar nor the nav is on screen here: this file sets
     both to display:none. So 124 px were subtracted from a viewport
     that never lost them and those screens rendered 84 px shorter than
     the room they had — which matters more now that the Telegram pill
     band costs another 105 px at the top.

     Restated in terms of the chrome that IS present: this bar, and the
     home-indicator inset at the bottom. It has to be --gc-viewport-h
     itself that is redefined, not its inputs: a custom property's
     var()s are substituted on the element that DECLARES it, so
     --gc-viewport-h had already baked in :root's 52px + 72px and
     overriding --gc-header-h down here would change nothing. */
  --gc-viewport-h: calc(var(--fym-gc-vh, 100dvh)
                        - var(--fym-gc-h) - var(--fym-safe-top, env(safe-area-inset-top, 0px))
                        - var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

/* theme.css sets `.screen { min-height: calc(100vh - header - nav) }`.
   With both budgets at 0 that becomes a flat 100vh, which — stacked on
   the 40 px bar padding — manufactures 40 px of vertical scroll on
   screens that used to fit. Re-anchor it to the MEASURED viewport
   (--fym-gc-vh, written by FYM.GameChrome) minus the bar. */
body:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) .screen.active,
body.ov:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"],
  [data-screen="mp-poker-lobby"]
) .screen.active {
  /* Subtract the bottom inset too. body already pads by it, so a child
     asked for viewport-minus-bar is 34 px taller than the box it sits
     in on any device with a home indicator, and every one of these
     screens gained a phantom 34 px of scroll the moment Telegram
     started reporting a real bottom inset. */
  min-height: calc(var(--fym-gc-vh, 100vh) - var(--fym-gc-top, 40px)
                   - var(--fym-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ══════════════════════════════════════════════════════════════
   2 · THE BAR — back button (left) + live balance chip (right)
   Injected once into <body> by FYM.GameChrome; hidden by default
   so it never bleeds onto home/games/profile.
   ══════════════════════════════════════════════════════════════ */

#fym-game-chrome {
  display: none;
}

#fym-game-chrome.is-on {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--fym-gc-top, 40px);
  /* the reserved band is padding, so the two controls sit in the
     bottom --fym-gc-h of the bar — below Telegram's pills, never
     behind them */
  padding: var(--fym-safe-top, env(safe-area-inset-top, 0px)) 12px 0;
  box-sizing: border-box;
  /* A SCRIM, not a bar. The opaque slab plus a hairline underneath was
     what made a genuinely fullscreen game read as "not fullscreen": it
     drew a lid across the top ~145 px and put a visible line where the
     app supposedly began. Nothing needs that lid — the back button and
     the balance chip carry their own 85 %-opaque pill backgrounds (the
     same trick Telegram's own ✕/⋯ controls use), so they stay legible
     over anything. What remains is a soft vignette that keeps the iOS
     status bar readable over a bright game and then disappears, so the
     screen's ambience (#ambient-particles is fixed inset:0, and most
     game screens are transparent over the body colour) runs unbroken
     from the very top of the phone. */
  background: linear-gradient(180deg,
              oklch(0.09 0.005 80 / 0.66) 0%,
              oklch(0.09 0.005 80 / 0.30) 52%,
              transparent 100%);
  font-family: var(--font-body, 'Manrope', system-ui, sans-serif);
  /* the bar itself never eats taps — only its two controls do, so a
     game canvas that reaches the top edge stays fully interactive */
  pointer-events: none;
}

#fym-game-chrome > * {
  pointer-events: auto;
}

/* ── back ──
   The #id prefix is load-bearing: obsidian-vault.css ships a global
   `body.ov button { min-height: 44px }` a11y floor that outranks a
   bare class and blew the control 4 px past the 40 px bar. The tap
   target is restored by the ::before below, which reaches the full
   bar height without affecting layout. */
#fym-game-chrome .fym-gc-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  min-width: 44px;
  padding: 0 10px 0 6px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent, #d4a841) 16%, transparent);
  border-radius: 999px;
  background: oklch(0.17 0.010 80 / 0.85);
  color: var(--muted, #9b917f);
  font: 700 10px/1 var(--font-body, 'Manrope', system-ui, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-micro, 180ms) var(--easing, ease),
              border-color var(--motion-micro, 180ms) var(--easing, ease);
}

/* invisible 44 px tap target — WCAG size without WCAG-sized pixels */
#fym-game-chrome .fym-gc-back::before {
  content: '';
  position: absolute;
  inset: -6px -8px;
}

#fym-game-chrome .fym-gc-back svg {
  display: block;
  flex: 0 0 auto;
}

#fym-game-chrome .fym-gc-back:active {
  color: var(--accent-hi, #e8c86a);
  border-color: color-mix(in srgb, var(--accent, #d4a841) 45%, transparent);
}

/* ── balance chip ── */
#fym-game-chrome .fym-gc-bal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--accent, #d4a841) 20%, transparent);
  border-radius: 999px;
  background: oklch(0.17 0.010 80 / 0.85);
  line-height: 1;
  white-space: nowrap;
  transition: border-color var(--motion-small, 240ms) var(--easing, ease),
              box-shadow var(--motion-small, 240ms) var(--easing, ease);
}

#fym-game-chrome .fym-gc-bal__amt {
  font-family: var(--font-numeric, 'Manrope', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text, #efe8da);
  transition: color var(--motion-small, 240ms) var(--easing, ease);
}

#fym-game-chrome .fym-gc-bal__unit {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint, #8b8271);
}

/* settle flashes — brief, never louder than the game */
#fym-game-chrome .fym-gc-bal.is-up {
  border-color: color-mix(in srgb, var(--win, #4fbf8b) 55%, transparent);
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--win, #4fbf8b) 60%, transparent);
}
#fym-game-chrome .fym-gc-bal.is-up .fym-gc-bal__amt { color: var(--win, #4fbf8b); }

#fym-game-chrome .fym-gc-bal.is-down {
  border-color: color-mix(in srgb, var(--loss, #d4553f) 45%, transparent);
}
#fym-game-chrome .fym-gc-bal.is-down .fym-gc-bal__amt { color: var(--loss, #d4553f); }

/* ══════════════════════════════════════════════════════════════
   3 · PER-SCREEN FIT-UPS
   The old per-game back links duplicate the bar's back button —
   hide them rather than delete markup that game JS still queries.
   Titles stay: they name the game, the bar doesn't.
   ══════════════════════════════════════════════════════════════ */

body:is(
  [data-screen="slots"],
  [data-screen="blackjack"],
  [data-screen="roulette"],
  [data-screen="crash"],
  [data-screen="lottery"],
  [data-screen="plinko"],
  [data-screen="mines"],
  [data-screen="leveraged-market"],
  [data-screen="black-vault"],
  [data-screen="high-roller"],
  [data-screen="liquidation"],
  [data-screen="coinflip"],
  [data-screen="dice"],
  [data-screen="hilo"],
  [data-screen="craps"],
  [data-screen="mp-bj-lobby"],
  [data-screen="mp-bj-table"],
  [data-screen="mp-roulette-lobby"],
  [data-screen="mp-roulette-table"]
) .screen.active :is(
  .back-link,          /* blackjack, black-vault, liquidation, crash,
                          leveraged-market, lottery(#lot-back),
                          mp-bj-lobby, mp-roulette-lobby */
  .lodge-back,         /* roulette */
  .sl-nav,             /* slots  (JS-built .sl-head)  */
  .pk-nav,             /* plinko (JS-built .pk-head)  */
  .mn-nav,             /* mines  (JS-built .mn-head)  */
  .mg-back,            /* coinflip / dice / hilo      */
  .hr-nav-back,        /* high-roller floating nav    */
  .mpr-back,           /* mp-roulette-table           */
  .mpbj-header-btn[onclick*="leaveMpBjTable"]   /* mp-bj-table — the
                          class is shared with the mute button, so
                          target the exit one only */
) {
  /* visibility, NOT display. Roulette's .lodge-game-header is a
     `grid-template-columns: 36px 1fr 36px` — collapsing the back cell
     out of flow slid the title into column 1 and the info button on
     top of it. Reserving the cell keeps every one of these headers
     (grid AND flex) laid out exactly as it was before, so no game
     needed a bespoke re-centring rule. The button stays clickable
     from script, which is how the bar delegates each screen's own
     teardown. */
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Duplicate balance readouts. A sweep of all 19 screens found exactly
   two games printing the live balance in their own chrome — crash's
   "Balance: 150 000 $FYM" strip and plinko's .pk-bal figure. Both now
   say the same thing as the bar chip two centimetres above them, and
   on crash the strip is what pushed the CTA past the fold at 620 px.
   Hidden, not deleted: crash.js:1466 and plinko.js:1486 keep writing
   into these nodes, and a missing node would throw. */
body[data-screen="crash"] #crash-screen.active .crash-balance-pill,
body[data-screen="plinko"] #plinko-screen.active .pk-bal {
  display: none !important;
}

/* Belt-and-braces against a stray horizontal scrollbar: the bar is
   fixed and 100 % wide, so any child that overshoots would push the
   document. Nothing inside it may. */
#fym-game-chrome.is-on > * {
  max-width: 48%;
  overflow: hidden;
}

/* Short webviews (Telegram non-fullscreen ≈ 620 px) — shave the bar
   so the extra 6 px goes to the game. */
@media (max-height: 660px) {
  body:is(
    [data-screen="slots"],
    [data-screen="blackjack"],
    [data-screen="roulette"],
    [data-screen="crash"],
    [data-screen="lottery"],
    [data-screen="plinko"],
    [data-screen="mines"],
    [data-screen="leveraged-market"],
    [data-screen="black-vault"],
    [data-screen="high-roller"],
    [data-screen="liquidation"],
    [data-screen="coinflip"],
    [data-screen="dice"],
    [data-screen="hilo"],
    [data-screen="craps"],
    [data-screen="mp-bj-lobby"],
    [data-screen="mp-bj-table"],
    [data-screen="mp-roulette-lobby"],
    [data-screen="mp-roulette-table"],
    [data-screen="mp-poker-lobby"]
  ),
  body.ov:is(
    [data-screen="slots"],
    [data-screen="blackjack"],
    [data-screen="roulette"],
    [data-screen="crash"],
    [data-screen="lottery"],
    [data-screen="plinko"],
    [data-screen="mines"],
    [data-screen="leveraged-market"],
    [data-screen="black-vault"],
    [data-screen="high-roller"],
    [data-screen="liquidation"],
    [data-screen="coinflip"],
    [data-screen="dice"],
    [data-screen="hilo"],
    [data-screen="craps"],
    [data-screen="mp-bj-lobby"],
    [data-screen="mp-bj-table"],
    [data-screen="mp-roulette-lobby"],
    [data-screen="mp-roulette-table"],
    [data-screen="mp-poker-lobby"]
  ) {
    --fym-gc-h: 34px;
  }
  #fym-game-chrome .fym-gc-back { height: 26px; min-height: 26px; }
  #fym-game-chrome .fym-gc-bal { height: 26px; }
  #fym-game-chrome .fym-gc-bal__amt { font-size: 12px; }
}