/* ════════════════════════════════════════════════════════════════════════
   styles-v54.css — v0.5.4 SLOT-MACHINE FIXED-VIEWPORT LAYOUT
   ────────────────────────────────────────────────────────────────────────
   Loads LAST (after the inline <style>, styles-v4.css, styles-v5.css) so it
   wins the cascade. Turns the homepage into a stationary slot-cabinet screen:

     • body is a fixed 100vh viewport, NO vertical scroll, EVER.
     • CSS Grid named areas pin every region. Nothing reflows between spins.
     • Right rail = jackpot ticker → stats line → ROLL AGAIN → Your Bets,
       in that fixed vertical order. Roll Again lives in the same spot forever.
     • Result card has a fixed min-height; never collapses. Neutral "Ready to
       roll" / "Awaiting result…" between/while-spinning states.
     • State pills are always visible in a fixed strip.
     • Your Bets scrolls INTERNALLY (overflow-y:auto) — the panel never resizes.
     • Lower-priority chrome (sound, math&proofs, footer) is relegated; math &
       proofs is a scrollable inner region, footer is shrunk into the nav.
     • Sizing uses clamp() + vh/vw so 1366×768, 1920×1080 and 2560×1440 all
       show the whole machine with no clip and no scroll.

   Priority order if a viewport is too short (1366×768):
     (1) lucky#/result/Roll Again  (2) tier selector  (3) jackpot+Your Bets
     (4) stats strip  (5) math&proofs (collapses into its own scroll region).
   ════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Fixed viewport: kill page scroll entirely -------------------- */
html, body {
  height: 100%;
  overflow: hidden;           /* NO vertical scroll, ever */
}
body {
  min-height: 0;              /* override inline `min-height:100vh` */
  padding-bottom: 0;         /* override inline 40px */
  display: flex;
  flex-direction: column;
}

/* The splash overlay & modals are position:fixed → unaffected. */

/* ---- 2. Nav: fixed, compact (~46px) ---------------------------------- */
.nav {
  position: relative;        /* no longer sticky — it's the grid's top row */
  flex: 0 0 auto;
  padding: 6px 16px;
  gap: 12px;
  min-height: 0;
}
.nav-logo .name { font-size: 0.9rem; }
.mode-badge { padding: 2px 7px; }

/* ---- 3. Jackpot ticker bar: keep, but trim height -------------------- */
.progressive-bar { flex: 0 0 auto; }
.progressive-bar .pj-inner { padding: 6px 20px 4px; gap: 0; }
.progressive-bar .pj-amount { font-size: clamp(1.5rem, 3.4vh, 2.4rem); }
.progressive-bar .pj-head { gap: 12px; }
/* hide the marquee hit-history strip in slot mode — saves a row, low value */
#pj-hit-strip { display: none; }

/* Hide the standalone full-width progressive bar on wide screens: the rail
   carries the House Pool number. Keep it on narrow/stacked screens where the
   rail drops below. (Toggled in the media query at the bottom.) */

/* ---- 4. Main stage: the fixed slot grid ------------------------------ */
.wrap {
  flex: 1 1 auto;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 16px 8px;
  min-height: 0;             /* allow children to shrink inside flex */
  display: flex;
  overflow: hidden;
}
.grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  grid-template-rows: 1fr;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

/* ---- 5. LEFT column: the reels / dice / tier picker ------------------ */
.col-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.col-main > .card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  overflow: hidden;          /* internal regions manage their own space */
}

/* Tighten the stacked sub-blocks inside the left card. */
.col-main .card .v3-seed-controls { margin: 0 0 8px; padding: 7px 10px; }
.col-main .card .v3-rollown-row { margin-top: 2px; }
.lucky-display { margin-bottom: 6px; }
.lucky-label { margin-bottom: 1px; }
.lucky-number { font-size: clamp(2rem, 5.2vh, 3.2rem); }
.lucky-range { margin-top: 2px; }
.threshold-bar-wrap { margin: 4px 0 8px; }
.section-label { margin-bottom: 6px; }

/* Tier grid: shorter tiles, fixed and legible. */
.tiers-grid { gap: 7px; margin-bottom: 8px; }
.tiers-grid .tier-card { padding: 6px 6px; }
.tiers-grid .tier-card .tier-name { font-size: 0.7rem; margin-bottom: 1px; }
.tiers-grid .tier-card .tier-mult { margin-top: 1px; }

/* Stats strip: compact cells. */
.stats-strip { gap: 5px; margin-bottom: 4px; }
.stats-strip .stat-cell { padding: 5px 4px; }
.stats-strip .stat-val { font-size: 0.92rem; }
.stats-strip .stat-lbl { margin-top: 2px; }

/* Faucet + balance line: tight. */
.faucet-pill { margin: 6px 0 2px; padding: 8px 12px; }
.balance-line { margin-top: 4px; }

/* Roll button (left, primary first-roll CTA) — slightly shorter. */
.col-main .roll-btn { margin-top: 8px; padding: 13px; font-size: 1.05rem; }
.live-roll-info { margin-top: 5px; min-height: 14px; }

/* The bet panel (status pills + result card + funding + math) becomes a
   flex column. The status pills + result card stay pinned; the funding block
   and Math & Proofs share a scroll region so they can never push the layout. */
#bet-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
/* status pills strip — always visible, fixed */
#status-track { flex: 0 0 auto; margin: 6px 0 4px; }
#status-msg { flex: 0 0 auto; margin-top: 2px; min-height: 14px; }

/* Result card: fixed min-height, never collapses. Neutral states. */
#result-banner.result-flash {
  flex: 0 0 auto;
  min-height: 76px;
  margin-top: 8px;
}
#result-banner.result-flash.ready,
#result-banner.result-flash.pending {
  border-color: rgba(73,234,203,0.22);
  background: rgba(73,234,203,0.03);
  color: var(--muted);
  font-size: 0.95rem;
  text-shadow: none;
  animation: none;
}
#result-banner.result-flash.pending { animation: tn-pulse 1.6s ease-in-out infinite; }

/* Everything below the result card inside bet-panel (funding QR, share,
   progressive cell, Math & Proofs) lives in ONE internal scroll region so it
   can grow without ever pushing the fixed regions or the page. */
#verify-line { flex: 0 0 auto; }
#addr-block,
#v5-progressive-cell,
#v5-share-btn,
#math-proofs {
  flex: 0 0 auto;
}
/* Math & Proofs: collapsed by default; when open it scrolls inside itself. */
.math-proofs-accordion { margin-top: 8px; }
.math-proofs-accordion[open] .mp-body {
  max-height: 26vh;
  overflow-y: auto;
}
/* Give the funding block its own cap when shown (manual funding path). */
#addr-block { max-height: 30vh; overflow-y: auto; }

/* ---- 6. RIGHT rail: jackpot → stats → ROLL AGAIN → Your Bets --------- */
.col-side {
  position: static;          /* override v5 sticky — it's a fixed grid cell */
  align-self: stretch;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
/* House Pool (the "+865.852 TKAS" jackpot ticker + stats line) — fixed top. */
.col-side .house-pool {
  flex: 0 0 auto;
  padding: 12px 14px;
}
.col-side .house-pool .hp-total { font-size: clamp(1.5rem, 4vh, 2.3rem); margin: 2px 0; }
.col-side .house-pool .hp-line,
.col-side .house-pool .hp-edge,
.col-side .house-pool .hp-since { margin-top: 3px; }

/* ROLL AGAIN — the slot-cabinet spin button. Full rail width, fixed slot
   directly under the jackpot/stats, above Your Bets. Same chunky cyan-glow
   visual as the original. Border-radius / chrome matches the rail cards. */
.rail-again-btn {
  flex: 0 0 auto;
  margin: 0 !important;      /* override .again-btn margin-top */
  width: 100%;
  border-radius: 14px;
  padding: 16px;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  /* chunky filled cyan glow (same family as the primary roll button) */
  background: linear-gradient(135deg, rgba(73,234,203,0.16), rgba(0,180,216,0.12));
  border: 1px solid var(--teal);
  color: var(--teal);
  box-shadow: 0 0 22px rgba(73,234,203,0.30);
  text-shadow: 0 0 10px rgba(73,234,203,0.45);
  animation: rollPulse 2.4s ease-in-out infinite;
  transition: all 0.18s;
}
.rail-again-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(73,234,203,0.28), rgba(0,180,216,0.20));
  box-shadow: 0 0 36px rgba(73,234,203,0.55);
  transform: translateY(-1px);
}
.rail-again-btn:active:not(:disabled) { transform: translateY(1px); }
.rail-again-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}

/* Your Bets panel: fixed; the list scrolls INTERNALLY. Panel never resizes. */
.col-side > .card:last-child {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  overflow: hidden;
}
.col-side > .card:last-child .section-label { flex: 0 0 auto; margin-bottom: 8px; }
.col-side > .card:last-child .feed-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;          /* override the inline 300px cap; fill the rail */
  overflow-y: auto;
}

/* ---- 7. Footer: relegate. Hidden in fixed slot mode (wide). ---------- */
.footer { display: none; }

/* ---- 8. Responsive: stack below 1024px → restore page scroll -------- */
@media (max-width: 1024px) {
  html, body { overflow: auto; height: auto; }
  body { display: block; min-height: 100vh; }
  .wrap { display: block; overflow: visible; height: auto; }
  .grid { display: block; height: auto; }
  .col-main, .col-side { display: block; height: auto; overflow: visible; }
  .col-main > .card { display: block; overflow: visible; }
  /* In the stacked flow the rail drops below the left content; Roll Again
     naturally sits between the jackpot ticker and Your Bets — exactly the
     spec'd mobile order. */
  .col-side { gap: 14px; margin-top: 14px; }
  .col-side > .card:last-child .feed-list { max-height: 320px; }
  .math-proofs-accordion[open] .mp-body { max-height: none; }
  #addr-block { max-height: none; }
  .footer { display: block; }
  #pj-hit-strip { display: block; }
}

/* ---- 9. Tall-viewport breathing room (1440p / 4K) -------------------- */
@media (min-width: 1025px) and (min-height: 1000px) {
  .col-main > .card { padding: 18px 20px; }
  .lucky-number { font-size: clamp(2.6rem, 5vh, 3.6rem); }
  #result-banner.result-flash { min-height: 92px; }
  .tiers-grid .tier-card { padding: 9px 8px; }
  .col-side { gap: 14px; }
}

/* ---- 10. Short-viewport survival (1366×768 and shorter) -------------- */
@media (min-width: 1025px) and (max-height: 820px) {
  .progressive-bar .pj-inner { padding: 4px 20px 3px; }
  .progressive-bar .pj-odds { display: none; }
  .nav { padding: 4px 16px; }
  .col-main > .card { padding: 9px 12px; }
  .lucky-number { font-size: clamp(1.7rem, 4.4vh, 2.5rem); }
  .tiers-grid .tier-card { padding: 5px 5px; }
  .tiers-grid .tier-card .tier-name { font-size: 0.66rem; }
  .stats-strip .stat-cell { padding: 4px 3px; }
  .stats-strip .stat-val { font-size: 0.82rem; }
  #result-banner.result-flash { min-height: 60px; margin-top: 6px; }
  .col-main .roll-btn { padding: 11px; font-size: 1rem; margin-top: 6px; }
  .rail-again-btn { padding: 13px; font-size: 1.02rem; }
  .col-side .house-pool { padding: 9px 12px; }
  /* lowest priority: hide the v3 seed controls behind nothing extra — keep,
     but tighten. Math & proofs already collapsed. */
  .col-main .card .v3-seed-controls { margin-bottom: 6px; padding: 6px 9px; }
}