/* Standalone embedded-game page — this is what bx loads in its iframe. The page contains ONLY the game
   (bet panel + board); the host (bx) gets balance + results over postMessage, so no header/chrome is shown.
   The shared component look (panels, chips, board, modal) comes from styles.css as a design-system; none of
   the lobby chrome exists here, so the lobby's layout rules never apply. */
html, body { height: 100%; margin: 0; }
body.embed { background: var(--bg-deep); overflow: hidden; position: fixed; inset: 0; display: block; }

/* Aspect-aware fixed design (size in --design-w/h set by app.js: landscape 1366x768 or portrait 468x880),
   uniformly scaled to fit any iframe/screen (--embed-scale set by app.js), and CENTRED with
   translate(-50%,-50%) — grid place-items:center does NOT centre a transform:scale'd box (its layout size
   stays the design size), which left the game clipped to the top-left when scaled down. */
body.embed #app { position: absolute; top: 50%; left: 50%;
  width: var(--design-w, 1366px); height: var(--design-h, 768px); flex: none;
  overflow: hidden; display: flex; flex-direction: column;
  transform: translate(-50%, -50%) scale(var(--embed-scale, 1)); transform-origin: center center; }

/* landscape: bet panel (left) | board (right) */
.eb-game { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 16px;
  padding: 16px 18px; }
.eb-game .board { min-height: 0; }

/* The bet panel is a flex column: a SCROLLABLE body (all the controls) + a PINNED Bet footer that never
   scrolls away. This guarantees the Bet / Start-autobet button is always visible & easy to tap on every
   game and every screen size (mobile portrait especially, where a tall control stack used to push it off
   the bottom). Same structure in both orientations. */
body.embed .betpanel { overflow: hidden; padding: 0; gap: 0; }
.betpanel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  gap: 14px; padding: 16px; }
.bet-action { flex: none; margin: 0; padding: 12px 16px 16px;
  background: var(--panel-2); border-top: 1px solid var(--glass-line); }

/* Chip-bet games (baccarat) place bets by picking a chip value + tapping the felt, so the shared
   Bet-amount stepper is unused — hide it just for those games (add more #app[data-game="…"] as needed). */
#app[data-game="baccarat"] #bet-amount-field,
#app[data-game="roulette"] #bet-amount-field { display: none; }

/* Pay Table triggers (shared) — board-corner (A) + toolbar (B). app.js toggles [hidden] per game.
   NB: `.tbtn`/`.pt-board` set `display`, which overrides the `hidden` attribute, so the [hidden]
   rules below (higher specificity) are required to actually hide them. */
#board-panel { position: relative; }
.pt-board { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center;
  gap: 6px; padding: 7px 11px; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; color: var(--text); background: rgba(8, 14, 20, .72); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .12s, border-color .12s; }
.pt-board:hover { background: rgba(8, 14, 20, .9); border-color: rgba(255, 255, 255, .28); }
.pt-board svg { display: block; }
.pt-board[hidden], #pt-tool[hidden] { display: none; }
#app.replaying .pt-board { display: none; }   /* stay clear of the replay transport at the board bottom */

/* portrait (mobile): the CONTROLS panel is sized to its CONTENT, capped at 58% — `fit-content(58%)` ==
   min(content-height, 58%). So a control-light game (crossroad, dice…) shrinks the panel to just what it
   needs and the board (1fr) grows into the freed space; a control-heavy game hits the 58% cap and its body
   scrolls exactly as before (58% ≈ the old fixed 1.35fr share, so full-panel games are unchanged). This is
   the auto-shrink: only games that actually have LEFTOVER panel space get a bigger board — games whose
   panel already fills, and the per-game ratios overridden below (bars/cases/mines/roulette…), stay put.
   Full-width, no side letterbox. The Bet action is pinned to the bottom of the panel (sticky), so it's
   always in reach even when the controls overflow. */
#app.portrait .eb-game { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) fit-content(58%);
  gap: 10px; padding: 10px 10px 6px; }
#app.portrait .board { order: 1; min-height: 0; padding: 12px 12px 10px; }
/* the panel now takes the larger share; the controls scroll in the panel BODY while the Bet action stays
   pinned as a footer below (always visible/tappable). `safe center` on the stage centres the game when it
   fits but falls back to top-align when a tall grid board would otherwise clip its top row / HUD. */
#app.portrait .betpanel { order: 2; }
#app.portrait .betpanel-body { padding: 12px; gap: 8px; }
/* content is scaled to fit by app.js (fitBoardContent) so the game shows 100%; hide overflow so a
   clamped-min game can't spawn a scrollbar over the board (the CONTROLS scroll, never the board). */
#app.portrait .board-stage { min-height: 0; overflow: hidden; padding: 4px 0; align-items: safe center; }
/* compact panel chrome on mobile so more of the controls sit in the first view (denser, reference-like) */
#app.portrait .mode-seg { margin-bottom: 4px; }
#app.portrait .betpanel .demo-balance { margin-bottom: 6px; padding: 6px 12px; }
#app.portrait .betpanel .demo-balance .dm-amt { font-size: 15px; }
#app.portrait .bet-action { gap: 6px; padding: 8px 12px 10px; }
#app.portrait .bet-action .betbtn { padding: 12px; font-size: 15px; }
/* Mobile: Manual/Auto is rarely changed (defaults to Manual) → move it to the BOTTOM of the scrolling
   controls so the frequently-used game controls sit up top, reachable without scrolling. Portrait only;
   desktop keeps Manual/Auto on top. */
#app.portrait #mode-seg { order: 4; margin: 4px 0 0; }
#app.portrait #default-bet { order: 5; }   /* auto strategy / odds render BELOW the Manual/Auto toggle */
/* Shorter bottom toolbar on mobile (it sits below the grid, so its height eats into the game) */
#app.portrait .game-bar { margin: 0 12px 8px; padding: 6px 12px; }
#app.portrait .game-bar .tbtn { height: 30px; min-width: 30px; }
#app.portrait .game-bar .tbtn svg { width: 17px; height: 17px; }
#app.portrait .game-bar .tbtn.fair { padding: 0 11px; }
/* Total-profit line: one compact row (label left, value right) instead of a tall stacked box — frees
   vertical space in the pinned footer so the game controls (e.g. Heads/Tails) aren't pushed off-view */
#app.portrait .profit-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; }
#app.portrait .profit-line .k { margin: 0; }
#app.portrait .profit-line .v { margin-top: 0; font-size: 14px; }
/* "Fill" games (a single reel/grid that should occupy the whole board, not float small): stretch their
   game-root to the board's full height so the game's own flex:1 rules resolve, and centre the content
   inside it. Scoped per-game so the default `safe center` (which just centres compact art) is unaffected
   elsewhere. */
#app.portrait[data-game="slots"] .board-stage,
#app.portrait[data-game="cases"] .board-stage { align-items: stretch; }
#app.portrait[data-game="slots"] .board-stage > .game-root,
#app.portrait[data-game="cases"] .board-stage > .game-root { justify-content: center; }
/* slots: the reel grid was filling to the very top edge, clipping the board's top border on mobile.
   A little top breathing room brings the frame's top edge back into view. */
#app.portrait[data-game="slots"] .board-stage { padding-top: 10px; }
/* customFlow grid/table games have NO shared footer (their own button lives in the controls) and short
   control stacks, so they can afford a TALLER board — enough to fit their whole grid/table big and
   unclipped without starving the controls. (One-shot games keep the default split so their controls +
   pinned Bet footer stay fully usable — their content is capped to fit instead.) */
#app.portrait[data-game="mines"] .eb-game,
#app.portrait[data-game="blackjack"] .eb-game,
#app.portrait[data-game="moles"] .eb-game,
#app.portrait[data-game="snakes"] .eb-game { grid-template-rows: minmax(320px, 1.3fr) minmax(0, 1fr); }
/* Roulette has a long control stack (chips + total + undo/clear + Spin) AND a tall board (wheel + bet
   table), so it takes a MIDDLE board share: enough to show the wheel + the number-bet rows while keeping
   Spin in reach (the rest of the bet layout scrolls within the board). */
#app.portrait[data-game="roulette"] .eb-game { grid-template-rows: minmax(300px, 1.15fr) minmax(0, 1fr); }
/* Cases: board:panel 1.2:1 on mobile — a bigger board for the case-opening strip; its short controls
   (bet amount + difficulty) and the pinned Bet footer still fit the smaller panel. */
#app.portrait[data-game="cases"] .eb-game { grid-template-rows: minmax(300px, 1fr) minmax(0, 1fr); }
/* Bars: the multiplier legend sits BESIDE the grid (bars.js .br-wrap), not below it. Board:panel = 1:1.2
   on mobile — a bit more board than the default (grid taps comfortably) while the panel still shows its
   controls. Grid capped narrower so the grid + the side legend column both fit the board width. */
#app.portrait[data-game="bars"] .eb-game { grid-template-rows: minmax(300px, 1fr) minmax(0, 1.1fr); }
/* Dragon Tower: the 9-row tower really needs the height, so give it board:panel = 1.4:1 (board ~58%). If
   the short panel can't fit every control at once the balance/bet/difficulty/mode controls scroll within
   the panel body while the pinned Bet footer stays in reach. (Its live readout was already removed, so
   nothing grows the panel after Bet.) */
#app.portrait[data-game="dragon"] .eb-game { grid-template-rows: minmax(300px, 1.4fr) minmax(0, 1fr); }
/* Cross the Road: fixed board:panel = 1:1. Unlike Dragon Tower it has a SEPARATE Cash-out button that
   appears after the first cross; on the auto-shrink default that button grew the panel and shifted the
   board mid-play. A fixed panel has the room to absorb the Cash-out button without growing → board stays put. */
#app.portrait[data-game="crossroad"] .eb-game { grid-template-rows: minmax(300px, 1fr) minmax(0, 1fr); }
/* Pump: fixed board:panel = 1:1, same rationale as Cross the Road — it has a SEPARATE Cash-out button that
   appears after the first pump; on the auto-shrink default that button grew the panel and shifted the board
   mid-play. A fixed panel absorbs the Cash-out button without growing → board stays put. */
#app.portrait[data-game="pump"] .eb-game { grid-template-rows: minmax(300px, 1fr) minmax(0, 1fr); }
/* Hilo: fixed board:panel = 1:1. The card + the two guess buttons live ON the board, so it wants a stable,
   generous board half; a fixed 1:1 stops the panel from auto-shrinking away the room the guess pair needs. */
#app.portrait[data-game="hilo"] .eb-game { grid-template-rows: minmax(300px, 1fr) minmax(0, 1fr); }
/* RPS: fixed board:panel = 1:1.2 (panel a touch taller than the board) — hands + VS + streak ladder up top,
   the bet/manual controls get the slightly larger lower half. */
#app.portrait[data-game="rps"] .eb-game { grid-template-rows: minmax(300px, 1fr) minmax(0, 1.2fr); }
#app.portrait #board-panel[data-game="bars"] .br-grid { max-width: 240px; gap: 6px; padding: 8px; }
/* Mines: cap the 5×5 grid so all 5 rows + the mines/found HUD fit inside the (now taller) board with the
   tiles still large; keeps the whole grid visible (no clipped bottom row). */
#app.portrait #board-panel[data-game="mines"] .mn-grid { max-width: 420px; gap: 8px; padding: 8px; }
#app.portrait #board-panel[data-game="mines"] .mn-wrap { gap: 10px; }

/* Bet-amount quick-adjust row: − / + / ½ / 2× share the width evenly (click, don't type). */
.bet-mods { margin-top: 8px; }
.bet-mods .chip { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; }

/* .bet-action is the pinned footer (flex:none; background/border set above in the panel-layout block);
   here we just lay out its own contents (Bet button, profit line, error) in a column. */
.bet-action { display: flex; flex-direction: column; gap: 12px; }
.bet-action .err:empty { min-height: 0; }
/* customFlow games render their OWN Bet/Deal/Cash-out button into the pinned footer via #cta-slot, so it
   locks to the bottom (with the profit line) just like the shared #bet-btn one-shot games use. */
#cta-slot { display: flex; flex-direction: column; gap: 8px; }
#cta-slot:empty { display: none; }
#cta-slot .betbtn { margin-top: 0; }
/* one-shot games use #bet-btn; customFlow games use #cta-slot, so hide the shared #bet-btn when the game
   has populated its own CTA (belt-and-braces alongside app.js's elBetBtn.style.display for customFlow). */
#app.cf-game:not(.mode-auto) #bet-btn { display: none; }

/* Multi-option segments in the bet panel (e.g. Snakes' 5 difficulties easy/medium/hard/expert/master).
   Base: allow wrapping + a 30% min so a 6+ option seg still degrades gracefully. Board/modal segs are
   untouched. */
.betpanel .seg { flex-wrap: wrap; }
.betpanel .seg button { flex: 1 1 30%; min-width: 0; }
/* 4–5 option segments (Difficulty across bars/cases/crossroad/darts/dragon/keno/plinko/pump/roulette/
   snakes): keep them on ONE row — equal-width buttons that shrink the font/padding to fit, instead of
   stacking onto a 2nd row. Scoped to 4–5 buttons (6+ keeps the wrap above so it never overflows). */
.betpanel .seg:has(> button:nth-child(4)):not(:has(> button:nth-child(6))) { flex-wrap: nowrap; }
.betpanel .seg:has(> button:nth-child(4)):not(:has(> button:nth-child(6))) button {
  flex: 1 1 0; font-size: 12px; padding: 8px 4px; white-space: nowrap; }

/* ============================ Provably-fair REPLAY — DVR playback ============================
   A past round re-watched as a recording: a title bar with a live REC light + timecode, a cinema
   frame over the board (letterbox, corner brackets, scanlines, watermark), and a transport scrubber
   below. All hidden unless the round is actually being replayed. */
.replay-hud { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  padding: 7px 12px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, rgba(8,14,20,.92), rgba(8,14,20,.7));
  border: 1px solid rgba(255,255,255,.10); border-bottom: 2px solid rgba(255,90,90,.5); }
.replay-hud[hidden], .replay-transport[hidden] { display: none; }
.rh-rec { display: inline-flex; align-items: center; gap: 7px; font-weight: 900; font-size: 12px;
  letter-spacing: 2.5px; color: #ff6a6a; text-transform: uppercase; }
.rh-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d;
  box-shadow: 0 0 10px rgba(255,60,60,.9); animation: rh-blink 1.15s steps(1) infinite; }
@keyframes rh-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: .18; } }
.rh-info { color: var(--text); font-size: 13px; font-weight: 700; flex: 1; min-width: 90px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-time { color: #ff8a8a; font-size: 12px; font-weight: 800; letter-spacing: 1px; opacity: .95;
  padding: 1px 7px; border-radius: 6px; background: rgba(255,60,60,.12); border: 1px solid rgba(255,90,90,.3); }

/* cinema frame — absolute over the whole board (below the transport/HUD z-layer), pure decoration. */
.replay-cinema { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none;
  border-radius: inherit; overflow: hidden; }
#app.replaying .replay-cinema { display: block; }
.replay-cinema::before {   /* letterbox bars top+bottom + a soft vignette that says "playback" */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 12%, transparent 88%, rgba(0,0,0,.55)),
    radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(0,0,0,.42)); }
.replay-cinema::after {    /* faint horizontal scanlines — the "recorded footage" texture */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: .5; }
/* corner brackets (framed viewfinder) drawn on the frame element */
#app.replaying .replay-cinema { box-shadow:
  inset 0 0 0 2px rgba(255,255,255,.06),
  inset 22px 22px 0 -20px rgba(255,255,255,.55), inset -22px 22px 0 -20px rgba(255,255,255,.55),
  inset 22px -22px 0 -20px rgba(255,255,255,.55), inset -22px -22px 0 -20px rgba(255,255,255,.55); }
.rc-watermark { position: absolute; top: 10px; right: 14px; font-weight: 900; font-size: 12px;
  letter-spacing: 3px; color: rgba(255,255,255,.16); text-transform: uppercase; }

/* transport / scrubber — bottom of the board, interactive */
.replay-transport { flex: none; position: relative; z-index: 3; display: flex; align-items: center; gap: 10px;
  margin: 8px 0 0; padding: 8px 10px; border-radius: 4px 4px 10px 10px;
  background: linear-gradient(0deg, rgba(8,14,20,.94), rgba(8,14,20,.72)); border: 1px solid rgba(255,255,255,.10); }
.rt-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  font-size: 17px; color: #06210f; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #8affca, #1ff7ac 62%, #12c589);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35); transition: transform .12s, box-shadow .15s; }
.rt-play:hover { transform: translateY(-1px); }
#app.replaying.rp-ended .rt-play { animation: rt-invite 1.6s ease-in-out infinite; }
@keyframes rt-invite { 0%,100% { box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.35); }
  50% { box-shadow: 0 0 0 4px rgba(31,247,172,.35), 0 3px 12px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.4); } }
.rt-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; min-width: 40px; }
.rt-fill { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #1ff7ac, #5ad1ff); box-shadow: 0 0 10px rgba(31,247,172,.5); }
.rt-chip { flex: none; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); display: inline-flex; align-items: center; }
.rt-chip:hover { border-color: rgba(255,255,255,.28); }
.rt-exit { color: var(--muted); }
/* proof popover — floats up over the board bottom, above the transport (the board clips overflow, so it
   must be an in-board overlay, not appended below). Toggled by "Prove fair". */
.rh-proof { position: absolute; left: 12px; right: 12px; bottom: 62px; z-index: 4;
  max-height: 46%; overflow: auto; padding: 11px 13px; border-radius: 10px;
  background: rgba(6,11,16,.95); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 -8px 26px rgba(0,0,0,.45); font-size: 12.5px; line-height: 1.55; color: var(--muted);
  animation: rh-proof-in .22s ease; }
@keyframes rh-proof-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rh-proof[hidden] { display: none; }
.rh-proof code { color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
.rh-proof .ok { color: var(--accent); } .rh-proof .bad { color: var(--red); }
/* in replay the game's own bet controls are inert (you're watching a past round, not betting) */
#app.replaying #game-controls, #app.replaying .bet-action { opacity: .4; pointer-events: none; filter: grayscale(.4); }
/* portrait: tighten the transport so it doesn't steal board height on a phone */
#app.portrait .replay-hud { margin-bottom: 6px; padding: 6px 10px; }
#app.portrait .replay-transport { margin-top: 6px; padding: 7px 8px; gap: 8px; }
#app.portrait .rt-chip { padding: 0 9px; }

/* Auto mode: each customFlow game renders its OWN Deal/Play/Bet button on the board or in its controls;
   the shared "Start autobet" button drives auto, so hide the game's own one to kill the duplicate
   (playtest: "Bet button is duplicated on the Auto Bet page"). */
#app.mode-auto #game-controls .betbtn,
#app.mode-auto #cta-slot .betbtn,
#app.mode-auto .board-stage .betbtn { display: none !important; }
/* Auto mode: also hide the interactive climb games' live in-round readout — the per-round Multiplier +
   Cash out stat box each interactive game renders into the left panel. It's a MANUAL readout (meaningless
   while autobet drives rounds headlessly — the autobet loop, not a manual cash-out, decides the exit).
   Every such box carries the shared `.live-readout` marker (mines/dragon/moles/crossroad use `.odds
   .live-readout`; hilo uses `.hl-live .live-readout`) so this ONE rule covers them all and a new
   interactive game only needs the marker to be handled — a per-class list silently missed hilo before.
   (The generic odds panel is #manual-extras, outside #game-controls, so it is unaffected.) */
#app.mode-auto #game-controls .live-readout { display: none !important; }

/* ============================ Auto-bet: popup + running badge ============================
   The Manual/Auto → Auto toggle opens #auto-modal (a settings popup) instead of revealing a tall inline
   control stack, so autobet is configured without scrolling. While a run is live the Auto toggle shows a
   pulsing dot + remaining-bets count (∞ = unlimited), and tapping it again stops the run. */
#btn-auto { position: relative; }
#btn-auto.running { color: var(--accent); }
.auto-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; padding: 1px 7px;
  border-radius: 999px; background: rgba(31,247,172,.14); border: 1px solid rgba(31,247,172,.4);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.auto-badge[hidden] { display: none; }
.ab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(31,247,172,.9); animation: ab-pulse 1.1s ease-in-out infinite; }
@keyframes ab-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
/* the popup's "Start autobet" CTA fills the dialog width, sitting under the moved controls */
.auto-modal #auto-start { width: 100%; margin-top: 8px; }
.auto-modal #auto-controls > .field:first-child { margin-top: 0; }