/* 7PK — Lively High-Roller theme (mockup v1) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&family=Cinzel:wght@500;600;700;800&display=swap');
:root{--felt:#0d4d35;--felt-light:#1f6e4f;--ivory:#fbf3df;--ivory-dim:#d6cdb1;--gold:#f0c64a;--gold-soft:#ffe49a;--gold-deep:#b08220;--champagne:#ffe9a8;--ruby:#e0173a;--ruby-glow:#ff4d6a;--ruby-deep:#7a0f1c;--emerald:#5fd49b;--azure:#5fbcff;--magenta:#d95cb8}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:var(--ivory);height:100%;overflow:hidden;font-family:"Outfit","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"lnum" 1}
.hidden{display:none !important}
/* v1.118.62 — scroll/pan container: when the min-legible scale makes the stage
   bigger than the viewport (small phones in landscape), the player can pan
   ("pulling effect") to reach every control instead of everything shrinking to
   an illegible size. `display:flex` + child `margin:auto` centers when it fits
   AND stays fully scrollable to the edges when it overflows. */
.stage-wrap{position:fixed;inset:0;display:flex;overflow:auto;background:#000;-webkit-overflow-scrolling:touch}
#stage-sizer{position:relative;flex:0 0 auto;margin:auto}
/* v1.118.62 — portrait rotate guard (forced landscape on every device) */
#rotate-guard{display:none;position:fixed;inset:0;z-index:100000;background:radial-gradient(120% 90% at 50% 30%,#5e3aae 0%,#361f7d 40%,#0e0735 100%);color:var(--ivory);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;gap:14px}
#rotate-guard .rg-icon{font-size:64px;line-height:1;animation:rg-rock 1.6s ease-in-out infinite alternate}
#rotate-guard .rg-title{font-family:"Cinzel",serif;font-size:24px;font-weight:700;color:var(--gold-soft)}
#rotate-guard .rg-sub{color:var(--ivory-dim);max-width:340px;line-height:1.5;font-size:15px}
@keyframes rg-rock{0%{transform:rotate(-12deg)}100%{transform:rotate(78deg)}}
@media (orientation:portrait){#rotate-guard{display:flex}}
.stage{position:absolute;top:0;left:0;transform-origin:0 0;width:1920px;height:1080px;background:radial-gradient(120% 90% at 50% 30%,#5e3aae 0%,#361f7d 35%,#1a0f55 70%,#0e0735 100%),#150a3c;overflow:hidden;color:var(--ivory)}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(380px 300px at 12% 10%,rgba(217,92,184,.18),transparent 60%),radial-gradient(420px 320px at 88% 18%,rgba(95,188,255,.16),transparent 60%),radial-gradient(520px 360px at 50% 95%,rgba(95,212,155,.18),transparent 60%);pointer-events:none}
.frame{position:absolute;inset:14px;border-radius:16px;border:2px solid rgba(240,198,74,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 80px rgba(0,0,0,.45),0 0 60px rgba(0,0,0,.55);pointer-events:none}
.frame::after{content:"";position:absolute;inset:6px;border-radius:12px;border:1px solid rgba(240,198,74,.18)}
.marquee{position:absolute;top:30px;left:80px;right:80px;height:56px;overflow:hidden;border-radius:30px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.3)),linear-gradient(180deg,#1a0c4a 0%,#0a0530 100%);border:1px solid rgba(240,198,74,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 4px 12px rgba(0,0,0,.5),0 0 24px rgba(240,198,74,.18);display:flex;align-items:center}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#0a0530 0%,transparent 100%)}
.marquee::after{right:0;background:linear-gradient(-90deg,#0a0530 0%,transparent 100%)}
/* v1.102.0 mobile-readability pass: the stage renders at ~0.36 scale on a
   phone, so design-canvas type below ~24px lands under 9px on screen.
   Sizes up + letter-spacing down across the HUD/paytable/marquee (the wide
   tracking was burning width the tight layout doesn't have). */
.marquee-track{display:flex;gap:80px;white-space:nowrap;padding-left:60px;animation:scroll-left 64s linear infinite;font-family:"Cinzel","Playfair Display",serif;font-weight:600;font-size:30px;letter-spacing:.08em;text-transform:uppercase}
.marquee-track .it{display:inline-flex;align-items:center;gap:18px;color:var(--ivory)}
.marquee-track .star{color:var(--gold);font-size:22px}
.marquee-track .hot{color:var(--ruby-glow)}
.marquee-track .win{color:var(--gold-soft)}
.marquee-track .em{color:var(--emerald)}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.status{position:absolute;top:130px;left:220px;width:720px;height:540px;font-family:"Outfit",sans-serif;font-weight:500;letter-spacing:.04em;font-size:28px;line-height:1}
.status .cell{position:absolute}
.status .lbl{left:0;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:26px;color:var(--emerald)}
.status .val{right:120px;text-align:right;min-width:200px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--champagne)}
/* v1.27.0 Phase 1 used a single .colA (green) + .colB (yellow).
   v1.28.0 Phase 2 splits the green column into two side-by-side
   columns: colA1 (Full Bet Bonus) + colA2 (Big4 Bonus / pool MAX).
   .colA is retained as an alias for colA1 so any legacy HTML still
   renders. .colB stays where it was, just slightly shifted right
   to make room for the second green column. */
.status .colA,
/* v1.116.0 — single value column like the original machine: [value | round-bet
   ladder]. colA1 moves into colA2's old slot so it sits beside the yellow
   ladder; colA2 (the per-rank BIG4 pool MAX ceiling, a v1.28 addition the
   original never shows) is hidden. game.js still writes the #big4-bonus-* ids
   (hidden no-ops). Its rows are now: RF flat, 5K flat, LIVE table pool, LIVE
   full pool, then the red FH row (pot × 10). */
.status .colA1{right:400px;text-align:right;min-width:140px;font-variant-numeric:tabular-nums;font-weight:600}
.status .colA2{display:none}
/* v1.107.0 — the bet-row group pill (250C/100C/…) shares the colA1 column with
   the Full-Bet-Bonus values, but its right-edge alignment put its left edge on
   top of the green "Bet" row label. Decouple just the bet row: anchor the pill
   to the left, clear of the label, instead of the bonus right edge. */
.status .colA1.r2{right:auto;left:180px;min-width:0;text-align:left}
.status .colB{right:200px;text-align:right;min-width:170px;font-variant-numeric:tabular-nums;font-weight:600}
.status .colC{right:20px;text-align:center;min-width:160px}
/* v1.113.0 — the STEP pill (#step-hint) overlapped the paytable's Straight/
   3-of-a-Kind/2-Pair rows (the status panel's right edge sits over the
   paytable's left edge, and at the 640px breakpoint the columns compress onto
   the round-bet cells). Move it OUT of the data-row band entirely — into the
   clear area BELOW the bonus/round-bet rows — so it's clear at every viewport. */
.status #step-hint{top:300px;left:470px;right:auto;min-width:0;text-align:center;z-index:30}
.status #step-hint .step-pill{padding:6px 14px;font-size:19px;letter-spacing:.12em}
.status #step-hint .step-pill .num{font-size:25px}
/* v1.33.1 (review fix HIGH #3): the .stage is a fixed 1920×1080
   canvas scaled by transform — phone layouts shrink the whole
   thing rather than reflowing — but very narrow stage-wraps
   (< 640px effective width AFTER scaling) can still squeeze the
   3 data columns. Tighten the right-offsets at that breakpoint
   so colA1 / colA2 / colB don't overlap. */
@media (max-width:640px){
  .status .colA,
  .status .colA1{right:280px;min-width:110px;font-size:24px}   /* v1.116.0: into colA2's old slot */
  .status .colA2{display:none}
  .status .colB{right:130px;min-width:130px;font-size:24px}
  .status .colC{right:10px;min-width:120px}
  /* v1.109.0 — the STEP pill (colC) was wider than its 120px column at this
     breakpoint and bled left onto the round-bet column (colB). Shrink it so it
     fits within colC. Caught by scripts/qa-ui-sweep.js at the 640px viewport. */
  .status .colC .step-pill{padding:4px 10px;font-size:16px;letter-spacing:.1em}
  .status .colC .step-pill .num{font-size:20px}
}
.emerald{color:var(--emerald)}
.ruby{color:var(--ruby-glow)}
.champagne{color:var(--champagne)}
.r1{top:0}.r2{top:56px}.r3{top:110px}.r4{top:154px}.r5{top:198px}.r6{top:242px}.r7{top:286px}.r8{top:330px}.r9{top:374px}.r10{top:418px}
.x-pill{display:inline-block;padding:6px 16px;border-radius:6px;border:1.5px solid var(--ruby-glow);background:linear-gradient(180deg,rgba(224,23,58,.22),rgba(224,23,58,.06));color:var(--ruby-glow);font-weight:800;letter-spacing:.08em;box-shadow:inset 0 0 12px rgba(255,77,106,.3),0 0 14px rgba(255,77,106,.15);font-size:25px}
.x-pill .pill-sep{opacity:.5;margin:0 5px;font-weight:600}
.step-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 22px;border:2px solid var(--gold);border-radius:8px;background:radial-gradient(120% 100% at 50% 0%,rgba(255,228,154,.25) 0%,transparent 50%),linear-gradient(180deg,rgba(240,198,74,.18),rgba(240,198,74,.04));color:var(--champagne);font-family:"Cinzel",serif;font-size:24px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;box-shadow:inset 0 0 14px rgba(240,198,74,.2),0 0 18px rgba(240,198,74,.15)}
.step-pill .num{font-family:"Playfair Display",serif;font-size:32px;font-weight:900;line-height:1;color:var(--gold-soft)}
#step2-row{margin-left:18px}
.divider-h{position:absolute;left:80px;right:80px;top:700px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(240,198,74,.35) 20%,rgba(240,198,74,.55) 50%,rgba(240,198,74,.35) 80%,transparent 100%)}
/* v1.59.8 (item #1) — cap paytable height so the bottom rows
   (Ace Pair, High Card) don't bleed below where the felt begins
   at top:480px. 11 rows × ~28px + title was overflowing on some
   render scales. row-gap pulled from 2px to 0, font-size down 1px. */
.pay-wrap{position:absolute;top:110px;left:850px;width:760px;max-height:360px;overflow:hidden}
.pay-title{font-family:"Cinzel",serif;font-weight:700;font-size:24px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:18px;text-shadow:0 0 14px rgba(240,198,74,.25)}
.pay-title::before,.pay-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(240,198,74,.6),transparent)}
.pay{display:grid;grid-template-columns:46px 1fr 200px;row-gap:0;column-gap:12px;font-family:"Outfit",sans-serif;font-size:25px;line-height:1.12;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.pay .pt-row{display:contents}
.pay .pt-tag{text-align:right;padding-right:4px;font-weight:700}
/* v1.118.50 — the BIG4 row tags spell "NJX2"; hide them once a joker is in the
   hand, since NJX2 (natural-only) is then impossible. visibility keeps the layout. */
body.has-joker .pay .pt-tag{visibility:hidden}
.pay .pt-name{position:relative}
.pay .pt-mult{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em}
.pay .pt-name::after{content:"";position:absolute;left:0;right:0;bottom:8px;border-bottom:1px dotted rgba(255,255,255,.08);z-index:-1}
.pay .pt-row.tier-1>*{color:var(--ruby-glow);text-shadow:0 0 14px rgba(255,77,106,.35)}
.pay .pt-row.tier-2>*{color:var(--champagne);text-shadow:0 0 12px rgba(255,233,168,.28)}
.pay .pt-row.tier-3>*{color:var(--ivory)}
.pay .pt-row.tier-3.dim>*{color:var(--ivory-dim)}
.pay .pt-row.active>*{color:var(--gold-soft) !important;text-shadow:0 0 22px rgba(255,228,154,.85),0 0 8px rgba(255,228,154,.6);filter:brightness(1.4);animation:pt-blink .4s ease-in-out infinite alternate}
.pay .pt-row.scanning>*{color:var(--gold) !important;text-shadow:0 0 16px rgba(240,198,74,.6);filter:brightness(1.2)}
@keyframes pt-blink{from{filter:brightness(1.1)}to{filter:brightness(1.6)}}
.actions{position:absolute;top:130px;right:60px;width:180px;display:flex;flex-direction:column;gap:18px;z-index:5}
.actions-left{position:absolute;top:130px;left:60px;width:130px;display:flex;flex-direction:column;gap:18px;z-index:5}
.actions-left .btn{height:88px}
.actions-left .ful-btn{flex-direction:column;gap:2px}
.actions-left .ful-btn .ful-cap{font-family:"Cinzel",serif;font-size:14px;letter-spacing:.42em;color:var(--gold);opacity:.85;text-transform:uppercase}
.actions-left .ful-btn .ful-letter{font-family:"Playfair Display",serif;font-weight:800;font-size:44px;color:var(--gold-soft);text-shadow:0 0 14px rgba(255,228,154,.4);line-height:1}
.btn{height:95px;border-radius:12px;background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 50%),linear-gradient(180deg,#4a1140 0%,#2c0a30 55%,#1a0520 100%);border:1.5px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.4),inset 0 0 24px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.55),0 0 22px rgba(240,198,74,.22);display:flex;align-items:center;justify-content:center;color:var(--gold-soft);font-family:"Cinzel",serif;font-weight:700;letter-spacing:.22em;text-transform:uppercase;user-select:none;cursor:pointer;position:relative;transition:transform .08s ease,box-shadow .12s ease,opacity .15s ease}
.btn::before{content:"";position:absolute;inset:4px;border-radius:8px;border:1px solid rgba(240,198,74,.4);pointer-events:none}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.4),inset 0 0 24px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.65),0 0 30px rgba(240,198,74,.4)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.btn .glyph{font-size:56px;line-height:.7;font-family:"Playfair Display",serif;font-weight:800;color:var(--gold-soft);text-shadow:0 0 12px rgba(255,228,154,.35)}
.btn .lbl{font-size:28px;color:var(--gold-soft);text-shadow:0 0 12px rgba(255,228,154,.35)}
.btn.bet .lbl{font-size:30px;font-weight:800}
.felt{position:absolute;left:60px;right:60px;top:480px;height:425px;border-radius:16px;background:radial-gradient(120% 80% at 50% 50%,var(--felt-light) 0%,var(--felt) 65%,#052819 100%);border:2px solid rgba(240,198,74,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 80px rgba(0,0,0,.55),0 0 30px rgba(0,0,0,.6)}
.felt::before{content:"";position:absolute;inset:8px;border-radius:12px;border:1px dashed rgba(255,255,255,.08)}
.cards-base{position:absolute;left:60px;right:60px;top:520px;height:380px;display:flex;justify-content:center;align-items:flex-start;gap:0;padding:0 80px;perspective:1400px;transition:opacity .5s ease}
/* v1.22.0: layout offset moves from .card to .slot wrapper so the
   card itself is free to translate/rotate without disturbing the
   fan layout. Legacy `.card`-direct selectors are kept as a
   fallback for any code path that still expects them. */
.cards-base .slot{position:relative;width:250px;height:355px;flex:0 0 auto}
.cards-base .slot+.slot,.cards-base .card+.card{margin-left:-72px}
.cards-base .slot:nth-child(odd){transform:translateY(-22px)}
.cards-base .slot:nth-child(1){z-index:7}.cards-base .slot:nth-child(2){z-index:6}.cards-base .slot:nth-child(3){z-index:5}.cards-base .slot:nth-child(4){z-index:4}.cards-base .slot:nth-child(5){z-index:3}.cards-base .slot:nth-child(6){z-index:2}.cards-base .slot:nth-child(7){z-index:1}
.cards-base .slot .card{position:absolute;inset:0;width:250px;height:355px}
/* Legacy fallback for hands rendered without slot wrapping. */
.cards-base>.card:nth-child(odd){transform:translateY(-22px)}
.cards-base>.card:nth-child(1){z-index:7}.cards-base>.card:nth-child(2){z-index:6}.cards-base>.card:nth-child(3){z-index:5}.cards-base>.card:nth-child(4){z-index:4}.cards-base>.card:nth-child(5){z-index:3}.cards-base>.card:nth-child(6){z-index:2}.cards-base>.card:nth-child(7){z-index:1}
/* ghost placeholder for un-dealt slots — drawn as dashed inset. */
.cards-base .slot.empty .card{
  background:radial-gradient(120% 80% at 50% 50%,rgba(255,255,255,.04),rgba(0,0,0,.30));
  border:2px dashed rgba(240,198,74,.20);
  /* v1.59.8 (item #6) — ready-state empty card slots no longer
     carry the inset shadow / 1px ring. The dashed gold border is
     enough to communicate the empty slot. */
  box-shadow:none;
  overflow:hidden
}
.cards-base .slot.empty .card>*{display:none !important}
.cards-base .slot.empty .card::before{content:"";position:absolute;inset:35%;border:1px dashed rgba(240,198,74,.22);border-radius:50%}
/* v1.22.0 demo loop: idle-state pulse on each empty slot in order. */
.cards-base .slot.empty .card.demo-pulse{
  border-color:rgba(240,198,74,.6);
  box-shadow:inset 0 0 28px rgba(0,0,0,.55),0 0 0 1px rgba(240,198,74,.55),0 0 24px rgba(240,198,74,.35);
  transition:border-color .35s ease,box-shadow .35s ease
}
/* deal-in fly-in for newly dealt cards. Timing divides by --anim-speed
   so the menu speed slider can scale the whole feel. */
:root{--anim-speed:1}
.cards-base .slot .card.dealing{
  animation:deal-in calc(.34s / var(--anim-speed)) cubic-bezier(.4,0,.2,1) forwards;
  z-index:999
}
@keyframes deal-in{
  0%{transform:translate(-900px,700px) rotate(8deg);opacity:0}
  100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
}
/* flip animation — pure 0→180 sweep with brightness dip mid-flip
   while content swaps. scaleX(-1) after the swap counters the
   rotation so the new face reads correctly. */
.cards-base .slot .card.flipping{animation:card-flip var(--flip-dur,.16s) linear;will-change:transform,filter}  /* v1.116.0: .6s→.16s, matches game.js flipCard base */
@keyframes card-flip{
  0%  {transform:rotateY(0deg)   scaleX(1); filter:brightness(1)}
  49% {transform:rotateY(88deg)  scaleX(1); filter:brightness(.55)}
  50% {transform:rotateY(92deg)  scaleX(-1);filter:brightness(.55)}
  100%{transform:rotateY(180deg) scaleX(-1);filter:brightness(1)}
}
/* v1.118.5 — 2D reveal pop for the showdown cards (see game.js apiSettle). No
   rotateY, so overlapping/fanned cards can't render their back face mid-rotation
   the way the 3D flip did on GPU-composited real Chrome. */
.cards-base .slot .card.reveal-pop{animation:reveal-pop .26s cubic-bezier(.2,.8,.3,1);will-change:transform,opacity}
@keyframes reveal-pop{
  0%  {transform:scale(.86); opacity:.15; filter:brightness(1.35)}
  55% {transform:scale(1.05); opacity:1}
  100%{transform:scale(1);    opacity:1;  filter:brightness(1)}
}
.card{width:250px;height:355px;border-radius:12px;box-shadow:0 22px 32px rgba(0,0,0,.6),0 4px 0 rgba(0,0,0,.35);position:relative;overflow:hidden;color:#1a1208;font-family:"Playfair Display","Times New Roman",serif;transition:opacity .25s ease,filter .25s ease}
.card.win-glow{box-shadow:0 22px 32px rgba(0,0,0,.6),0 4px 0 rgba(0,0,0,.35),0 0 36px rgba(255,228,154,.85);filter:brightness(1.12)}
/* v1.115.0 — non-winning cards DARKEN instead of fading: opacity:.45 made the
   two losing cards see-through to the felt ("the card background is gone").
   Solid card, desaturated + dimmed — still clearly de-emphasised next to the
   .winglow winners, but it stays a card. */
.card.dim{filter:grayscale(.55) brightness(.55)}
.card.up{background:radial-gradient(120% 80% at 30% 0%,#fffcef 0%,var(--ivory) 70%)}
.card.up::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.02) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.015) 0 1px,transparent 1px 3px);pointer-events:none}
.card.up::after{content:"";position:absolute;inset:6px;border-radius:8px;border:1px solid rgba(0,0,0,.07);pointer-events:none}
.corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.9;z-index:2;font-family:"Playfair Display",serif}
.corner .crnk{font-weight:800;font-size:56px;letter-spacing:-.02em}
.corner .crnk.crnk-10{font-size:44px;letter-spacing:-.08em}
.corner .csu{font-size:40px;margin-top:4px;line-height:1;font-family:"Outfit",sans-serif}
.corner.tl{top:14px;left:18px}
.corner.br{bottom:14px;right:18px;transform:rotate(180deg)}
.corner.red{color:#c1142a}
.corner.black{color:#14110a}
.pips{position:absolute;inset:78px 56px;display:grid}
.pips span{display:flex;align-items:center;justify-content:center;font-size:50px;line-height:1;font-family:"Outfit",sans-serif}
.pips.red span{color:#c1142a}
.pips.black span{color:#14110a}
.pips span.flip{transform:rotate(180deg)}
/* v1.25.3: per-rank grid templates (was inline style="…" — see game.js setFace). */
.pips-ace{grid-template-rows:1fr;grid-template-columns:1fr}
.pips-ace>span{font-size:120px}
.pips-r2{grid-template-rows:1fr 1fr;grid-template-columns:1fr}
.pips-r3{grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr}
.pips-r4{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}
.pips-r5,.pips-r6{grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr}
.pips-r7,.pips-r8{grid-template-rows:1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr}
.pips-r9,.pips-r10{grid-template-rows:1fr 1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr}
.pips>.pip-span{grid-column:1 / -1}
/* v1.90.4 (#2): shrink pip glyphs for the dense 4–5 row grids (7,8,9,10)
   so they don't clip against the card's overflow:hidden bounds. */
.pips-r7 span,.pips-r8 span{font-size:42px}
.pips-r9 span,.pips-r10 span{font-size:34px}
.face{position:absolute;inset:28px;border-radius:4px;background:linear-gradient(180deg,#f6e7c7 0%,#e7cf94 100%);border:1px solid #b3162b;overflow:hidden;display:flex;align-items:center;justify-content:center}
.face.black{border-color:#14110a}
.face::before{content:"";position:absolute;inset:6px;border:1px solid rgba(179,22,43,.4);border-radius:2px;background:repeating-linear-gradient(45deg,rgba(179,22,43,.06) 0 6px,transparent 6px 12px)}
.face.black::before{border-color:rgba(20,17,10,.4);background:repeating-linear-gradient(45deg,rgba(20,17,10,.06) 0 6px,transparent 6px 12px)}
.face .crest{position:relative;width:72%;height:84%;border:1px solid rgba(179,22,43,.6);border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(247,232,196,1) 50%,rgba(207,160,72,.3) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#b3162b;font-family:"Playfair Display",serif;box-shadow:inset 0 0 24px rgba(179,22,43,.15)}
.face.black .crest{border-color:rgba(20,17,10,.6);color:#14110a;box-shadow:inset 0 0 24px rgba(20,17,10,.15)}
.face .crest .mono{font-size:100px;font-weight:800;letter-spacing:-.04em;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.face .crest .heart{font-family:"Outfit",sans-serif;font-size:32px;margin-top:-4px}
.face.joker{background:linear-gradient(180deg,#1a0a3a 0%,#4a1140 60%,#1a0a3a 100%);border-color:var(--gold)}
.face.joker .crest{background:radial-gradient(120% 100% at 50% 0%,var(--gold-soft) 0%,var(--gold) 60%,var(--gold-deep) 100%);border-color:var(--gold-deep);color:#3a0a14;box-shadow:inset 0 0 24px rgba(58,10,20,.2)}
.face.joker .crest .mono{font-size:64px}
/* v1.118.57/59 — HD card art (PNG). The art is a COMPLETE card (cream face, its
   own rounded corners + soft shadow) on a TRANSPARENT background, so: contain (no
   crop), no bg fill, and in HD mode strip the CSS card frame/border/shadow so only
   the PNG shows — matching the reference (white cards floating on the felt). */
.face-hd{position:absolute;inset:0;background-size:contain;background-position:center;background-repeat:no-repeat}
body.hd-cards .card{background:transparent!important;border:none!important;box-shadow:none!important;overflow:visible!important}
/* strip the CSS card's inner-border / frame pseudo-elements in HD — the PNG is the
   whole card, so these would draw a thin rectangle around the (narrower) art. */
body.hd-cards .card::before,
body.hd-cards .card::after,
body.hd-cards .card.up::after,
body.hd-cards .card.back .back-frame,
body.hd-cards .card.back .back-frame::before{display:none!important}
.face.joker .crest .heart{font-size:24px}
/* v1.104.0 — red vs black joker: tint the JOKER text + star so the two
   are distinguishable (ready-state RJ/BJ, and any dealt joker). */
.face.joker.jk-red   .crest .mono,.face.joker.jk-red   .crest .heart{color:#a30d22}
.face.joker.jk-black .crest .mono,.face.joker.jk-black .crest .heart{color:#14110a}
.card.back{background:radial-gradient(120% 80% at 50% 35%,#8b1428 0%,#5b0d1a 60%,#2c0510 100%);color:var(--gold-soft);display:flex;align-items:center;justify-content:center}
.card.back .back-frame{position:absolute;inset:10px;border-radius:8px;border:2px solid rgba(240,198,74,.55);box-shadow:inset 0 0 0 1px rgba(255,228,154,.18)}
.card.back .back-frame::before{content:"";position:absolute;inset:6px;border-radius:6px;border:1px solid rgba(240,198,74,.25)}
.card.back .pattern{position:absolute;inset:18px;border-radius:5px;background:repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 8px,rgba(255,255,255,.04) 8px 16px),repeating-linear-gradient(135deg,rgba(255,228,154,.06) 0 12px,transparent 12px 24px)}
.card.back .compass{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);width:110px;height:110px}
.card.back .compass svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 14px rgba(240,198,74,.55))}
.card.back .hint{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-family:"Cinzel",serif;color:var(--gold-soft);text-shadow:0 0 10px rgba(240,198,74,.35),0 1px 0 rgba(0,0,0,.5)}
.card.back .hint .h{font-size:16px;letter-spacing:.42em;opacity:.8;margin-bottom:6px;font-weight:600}
.card.back .hint .v{font-size:22px;letter-spacing:.18em;font-weight:800}
.card.up .back-frame,.card.up .pattern,.card.up .compass,.card.up .hint{display:none}
.card.back .corner,.card.back .pips,.card.back .face{display:none}
/* Legacy: in-card badge (kept for hands not yet using slot-wrapped layout) */
.card-badge{position:absolute;top:-30px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;background:rgba(0,0,0,.85);color:var(--gold-soft);border:1px solid var(--gold);border-radius:8px;padding:5px 12px;font-family:"Outfit",sans-serif;font-weight:700;font-size:18px;letter-spacing:.08em;box-shadow:0 0 14px rgba(240,198,74,.35);opacity:0;transition:opacity .2s ease;white-space:nowrap}
.card-badge.show{opacity:1}
/* v1.22.0 hint overlay — sits ABOVE the card so the prediction
   stays visible during the flip. Hidden by default; shown when the
   slot is in hint-shadow (predicted-only) or hint-live (round 3) state. */
/* v1.115.0 — confine the hint to the card's ALWAYS-VISIBLE region. Cards are
   dealt with an ascending inline z-index (game.js dealAnim: 990+dealOrder), so
   every RIGHT neighbour paints on top and hid the hint's right 72px — the fan
   overlap (.slot+.slot{margin-left:-72px}; keep the two in sync). right:72px
   keeps the whole plate left of that edge, centred on what the player can
   actually see. The last slot has no neighbour, so it keeps full width. */
.cards-base .slot .hint-overlay{position:absolute;left:0;right:72px;bottom:30px;text-align:center;z-index:6;pointer-events:none;font-family:"Cinzel",serif;display:none;padding:6px 8px}
.cards-base .slot:last-child .hint-overlay{right:0}
.cards-base .slot.hint-shadow .hint-overlay,
.cards-base .slot.hint-live   .hint-overlay{display:block}
.cards-base .slot.hint-shadow .hint-overlay{color:rgba(240,198,74,.7);text-shadow:0 0 10px rgba(0,0,0,.95),0 0 14px rgba(240,198,74,.35)}
.cards-base .slot.hint-live   .hint-overlay{color:var(--gold-soft);text-shadow:0 0 10px rgba(0,0,0,.95),0 0 16px rgba(240,198,74,.7);animation:hint-pulse 1.6s ease-in-out infinite alternate}
.cards-base .slot:has(.card.up) .hint-overlay{display:none !important}
@keyframes hint-pulse{from{filter:brightness(.85)}to{filter:brightness(1.25)}}
/* v1.103.0 — bigger hint text + a dark plate so the step-rule prediction
   reads over a face-down card at phone render scale (~0.36). */
.cards-base .slot .hint-overlay{background:radial-gradient(120% 120% at 50% 60%,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 55%,transparent 80%)}
.cards-base .slot .hint-overlay .h{font-size:18px;letter-spacing:.30em;opacity:.85;margin-bottom:4px;font-weight:600}
.cards-base .slot .hint-overlay .v{font-size:24px;letter-spacing:0;font-weight:800;line-height:1.25;white-space:normal}
/* v1.112.0 — candidate CARDS (rank + suit each, since the suit can differ per
   candidate via the high-card flip). Once the step is known (r3) the unreachable
   ones are struck out (.elim) — the hint narrows by ELIMINATION. Red suits .rd. */
.cards-base .slot .hint-overlay .v .cd{display:inline-block;padding:1px 5px;margin:1.5px;border-radius:5px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(240,198,74,.25)}
.cards-base .slot .hint-overlay .v .cd i{font-style:normal;font-size:.74em;margin-left:.04em;vertical-align:.06em}
.cards-base .slot .hint-overlay .v .cd.rd{color:#ff8a9b}
.cards-base .slot .hint-overlay .v .cd.elim{opacity:.3;text-decoration:line-through;text-decoration-thickness:.08em;box-shadow:none}
/* WIN highlight on a card (animated golden glow + brightness pulse). */
.cards-base .card.winglow{
  box-shadow:inset 0 0 0 3px rgba(255,228,154,.85),0 0 30px rgba(240,198,74,.7),0 0 60px rgba(240,198,74,.4);
  animation:win-pulse 1s ease-in-out infinite alternate
}
@keyframes win-pulse{from{filter:brightness(1)}to{filter:brightness(1.18)}}
/* paytable: dim non-winning rows on a win, dim ALL rows on a lose. */
.pay .pt-row.dimrow>*{opacity:.28;filter:grayscale(.6);transition:opacity .4s ease,filter .4s ease}
.pay .pt-row.winrow>*{background:linear-gradient(90deg,rgba(240,198,74,0),rgba(240,198,74,.18) 50%,rgba(240,198,74,0));animation:row-flash .5s ease-in-out infinite alternate}
.pay .pt-row.winrow>.pt-tag{border-top:1px solid rgba(240,198,74,.55);border-bottom:1px solid rgba(240,198,74,.55);border-left:1px solid rgba(240,198,74,.55);border-radius:4px 0 0 4px}
.pay .pt-row.winrow>.pt-mult{border-top:1px solid rgba(240,198,74,.55);border-bottom:1px solid rgba(240,198,74,.55);border-right:1px solid rgba(240,198,74,.55);border-radius:0 4px 4px 0}
@keyframes row-flash{from{filter:brightness(1)}to{filter:brightness(1.25)}}
/* Ready-state center logo (idle phase only). */
.ready-logo{position:absolute;left:50%;top:calc(480px + 425px / 2);width:300px;height:300px;transform:translate(-50%,-50%);pointer-events:none;z-index:8;opacity:0;transition:opacity .5s ease}
.ready-logo.show{opacity:1;animation:logo-float 4s ease-in-out infinite}
@keyframes logo-float{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(0)}50%{transform:translate(-50%,-50%) translateY(-14px) rotate(2deg)}}
.ready-logo .ring{position:absolute;inset:0;animation:logo-spin 18s linear infinite}
@keyframes logo-spin{to{transform:rotate(360deg)}}
.ready-logo .core{position:absolute;inset:50px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--gold-soft);font-family:"Playfair Display",serif;text-shadow:0 0 24px rgba(240,198,74,.7)}
.ready-logo .core .num{font-size:88px;font-weight:900;line-height:1;background:linear-gradient(180deg,#fff2c4,#f0c64a 50%,#b9892a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(240,198,74,.55))}
.ready-logo .core .lbl{font-size:22px;letter-spacing:.42em;font-weight:700;margin-top:-2px;color:var(--gold-soft)}
.ready-logo .core .sub{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.42em;font-weight:600;color:rgba(255,228,154,.7);margin-top:8px}
/* v1.22.1 WIN BANNER — decorative top layer above the felt. */
.win-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.7);z-index:30;pointer-events:none;opacity:0;transition:opacity .35s ease,transform .55s cubic-bezier(.2,1.4,.3,1);text-align:center;font-family:"Playfair Display",serif}
.win-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* v1.118.6 — dark radial scrim behind the WIN wording so it reads over the felt/cards. */
.win-banner::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:160%;height:240%;background:radial-gradient(ellipse at center,rgba(6,3,18,.82) 0%,rgba(6,3,18,.55) 42%,rgba(6,3,18,.22) 66%,transparent 82%);border-radius:28px;z-index:-1;pointer-events:none}
.win-banner .label{font-size:96px;font-weight:900;letter-spacing:.14em;background:linear-gradient(180deg,#fff2c4,#f0c64a 50%,#b9892a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(240,198,74,.7))}
.win-banner .amt{font-family:"Outfit",sans-serif;font-size:56px;font-weight:800;letter-spacing:.08em;color:var(--ivory);text-shadow:0 0 16px rgba(240,198,74,.55);margin-top:4px}
.win-banner.big .label{font-size:128px;animation:big-pulse .9s ease-in-out infinite alternate}
@keyframes big-pulse{from{transform:scale(1);filter:drop-shadow(0 0 22px rgba(240,198,74,.7))}to{transform:scale(1.06);filter:drop-shadow(0 0 38px rgba(255,228,154,1))}}
/* Conic-gradient sun rays — sweep behind BIG4 wins only. */
.win-rays{position:absolute;left:50%;top:50%;width:2400px;height:2400px;transform:translate(-50%,-50%);pointer-events:none;z-index:9;opacity:0;background:conic-gradient(from 0deg,rgba(240,198,74,0) 0deg,rgba(240,198,74,.22) 8deg,rgba(240,198,74,0) 16deg,rgba(240,198,74,0) 30deg,rgba(240,198,74,.22) 38deg,rgba(240,198,74,0) 46deg,rgba(240,198,74,0) 60deg,rgba(240,198,74,.22) 68deg,rgba(240,198,74,0) 76deg,rgba(240,198,74,0) 360deg);mix-blend-mode:screen}
.win-rays.show{opacity:1;animation:rays-spin 6s linear infinite}
@keyframes rays-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.win-overlay{position:absolute;top:480px;left:60px;right:60px;height:425px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:38px;pointer-events:none;z-index:30;opacity:0;transition:opacity .3s ease}
.win-overlay.show{opacity:1}
.win-overlay.hidden{display:none}
.win-overlay .stamp{font-family:"Cinzel",serif;font-weight:800;font-size:60px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 28px rgba(255,228,154,.55),0 0 12px rgba(255,228,154,.4)}
.win-overlay .stamp.tier-1{color:var(--ruby-glow);text-shadow:0 0 28px rgba(255,77,106,.6),0 0 12px rgba(255,77,106,.45)}
.win-overlay .stamp.tier-2{color:var(--champagne)}
.win-overlay .stamp.tier-3{color:var(--gold-soft)}
.win-overlay .amount{margin-top:12px;font-family:"Playfair Display",serif;font-weight:900;font-size:72px;color:var(--gold-soft);text-shadow:0 0 30px rgba(255,228,154,.6);font-variant-numeric:tabular-nums}
.win-overlay .du-row{margin-top:20px;display:flex;gap:24px;pointer-events:auto}
.win-overlay.hidden .du-row{display:none}
/* v1.102.0 — the Collect / Double Up pills had NO styling of their own
   (the .modal-foot .pill rules don't reach here). Finger-sized at phone
   render scales (~0.36): 36px type on the 1920 canvas ≈ 13px on screen. */
.win-overlay .du-row .pill{
  padding:18px 56px;border:2px solid var(--gold);border-radius:12px;
  background:linear-gradient(180deg,#4a1140,#2c0a30);color:var(--gold-soft);
  font-family:"Cinzel",serif;font-size:36px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;user-select:none;
  box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 0 14px rgba(240,198,74,.12);
  transition:transform .08s ease,box-shadow .15s ease
}
.win-overlay .du-row .pill:hover{box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 22px rgba(240,198,74,.45)}
.win-overlay .du-row .pill:active{transform:scale(.96)}
.win-overlay .du-row .pill.primary{
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#3a0a14;
  box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 26px rgba(240,198,74,.5)
}
#hand-text{display:none}
.bottom{position:absolute;left:0;right:0;bottom:0;height:140px;display:flex;align-items:center;justify-content:space-between;padding:0 80px 30px 80px}
.power{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7a2030,#3a0a14 70%);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(240,198,74,.18);cursor:pointer;user-select:none}
.power svg{width:34px;height:34px;fill:none;stroke:var(--ruby-glow);stroke-width:2.4;stroke-linecap:round}
.stats{display:flex;flex-direction:column;gap:4px;align-items:center;flex:1;color:var(--ivory-dim);font-family:"Outfit",sans-serif;font-weight:500;font-size:24px;letter-spacing:.12em;text-transform:uppercase}
.stats-row{display:flex;align-items:center;justify-content:center;gap:64px;width:100%}
.stats-row.line1{font-size:26px}
.stats-row.line2{text-align:center}
.stats-row.line2 .copyright{color:var(--ivory-dim);opacity:.75;font-weight:500;font-size:16px;letter-spacing:.22em;text-transform:uppercase}
.stats .item{display:flex;align-items:baseline;gap:12px}
.stats .k{font-size:21px;color:var(--gold);letter-spacing:.12em}
.stats .v{color:var(--ivory);font-variant-numeric:tabular-nums;font-weight:700;font-size:30px}
.bottom-right{display:flex;align-items:center;gap:18px}
.icon-btn{width:90px;height:72px;border-radius:10px;background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 50%),linear-gradient(180deg,#4a1140 0%,#2c0a30 55%,#1a0520 100%);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),0 0 20px rgba(240,198,74,.22);transition:transform .08s ease;position:relative;color:var(--gold-soft)}
.icon-btn::before{content:"";position:absolute;inset:4px;border-radius:6px;border:1px solid rgba(240,198,74,.4);pointer-events:none}
.icon-btn:active{transform:translateY(1px)}
.icon-btn svg{width:38px;height:38px;filter:drop-shadow(0 0 6px rgba(255,228,154,.35))}
/* v1.93.0: HUD music quick-toggle. The diagonal slash shows only when
   music is off, and the whole button dims so the state reads at a glance. */
.icon-btn .music-slash{display:none}
.icon-btn.music-off .music-slash{display:block;stroke:#ff6b6b}
.icon-btn.music-off{opacity:.55}
/* v1.118.58 — no backdrop-filter: blur() inside the transform-scaled .stage
   produced a doubled/mirrored felt in Chromium. A heavier dark overlay gives the
   same "dim the game" effect without the GPU-compositing artifact. */
.modal-bg{position:absolute;inset:0;background:rgba(8,4,28,.9);display:none;align-items:center;justify-content:center;z-index:100}
.modal-bg.show{display:flex}
.modal-bg.hidden{display:none !important}
.modal{width:1300px;max-height:880px;background:radial-gradient(120% 80% at 50% 0%,#2a1a6a 0%,#1a0f55 60%,#0e0735 100%);border:2px solid var(--gold);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(240,198,74,.18);padding:28px 32px 24px;position:relative;color:var(--ivory);font-family:"Outfit",sans-serif}
.modal-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid rgba(240,198,74,.3);padding-bottom:14px;margin-bottom:16px}
.modal-head h2{margin:0;font-family:"Cinzel",serif;font-size:28px;font-weight:700;letter-spacing:.32em;color:var(--gold);text-transform:uppercase}
.modal-head .sub{color:var(--ivory-dim);font-size:18px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.modal-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);background:rgba(0,0,0,.4);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;line-height:1}
.modal-foot{margin-top:18px;padding-top:14px;border-top:1px solid rgba(240,198,74,.3);display:flex;justify-content:flex-end;gap:14px}
.modal-foot .pill{padding:10px 26px;border:1.5px solid var(--gold);border-radius:8px;background:linear-gradient(180deg,#4a1140,#2c0a30);color:var(--gold-soft);font-family:"Cinzel",serif;font-size:18px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-weight:700}
.modal-foot .pill.primary{box-shadow:0 0 18px rgba(240,198,74,.3)}
.modal-foot .pill.danger{background:linear-gradient(180deg,#6a0e1c,#340610);border-color:#e85a6c;color:#ffd6db;box-shadow:0 0 18px rgba(255,90,108,.35)}
.modal-sm{width:640px !important;max-height:none !important;padding:32px 36px !important}
.modal-md{width:760px !important;max-height:760px !important;padding:32px 36px !important}
.modal-body{color:var(--ivory-dim);font-size:20px;letter-spacing:.04em;line-height:1.55;padding:22px 4px 18px}
.modal-body.center{text-align:center}
.modal-body p{margin:0 0 12px}
.du-grid{display:flex;gap:32px;align-items:center;justify-content:center;padding:18px 0 6px}
#du-card{width:140px;height:200px;border-radius:10px}
.du-buttons{display:flex;flex-direction:column;gap:14px}
.du-buttons .pill{min-width:180px;text-align:center;font-size:20px}
#du-result{text-align:center;min-height:1.5em;margin-top:14px;font-family:"Cinzel",serif;font-size:24px;letter-spacing:.18em;color:var(--gold-soft)}
.fh-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:14px 0 4px}
.fh-rank{width:64px;height:80px;border-radius:8px;border:1.5px solid var(--gold);background:linear-gradient(180deg,#4a1140,#2c0a30);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-size:32px;font-weight:800;cursor:pointer;user-select:none;transition:transform .08s ease,box-shadow .15s ease}
.fh-rank:hover{box-shadow:0 0 18px rgba(240,198,74,.45)}
.fh-rank.selected{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#3a0a14}
#fh-result{text-align:center;min-height:1.5em;font-family:"Cinzel",serif;font-size:22px;letter-spacing:.18em;margin-top:12px;color:var(--gold-soft)}
.chip-strip{position:absolute;left:-9999px;top:-9999px}
/* v1.102.0 — #coll-btn/#dbl-btn removed from this banish list: they are the
   LIVE Collect / Double Up pills inside the win overlay (the ID selectors
   were overriding .du-row layout and pushing both buttons to -9999px, so
   the double-up offer rendered as an empty row — invisible + untappable). */
#deal-btn,#cont-btn,#fold-btn{position:absolute;left:-9999px;top:-9999px}
#msg{position:absolute;left:60px;right:60px;top:916px;height:34px;text-align:center;font-family:"Outfit",sans-serif;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-dim);pointer-events:none}
#fx{position:absolute;inset:0;pointer-events:none;z-index:25}
/* Bump animation for credit/win value updates */
@keyframes bump-scale{ 0%{transform:scale(1)} 50%{transform:scale(1.18)} 100%{transform:scale(1)} }
.bump{ animation: bump-scale 280ms ease; }
/* Hand text overlay (small status under cards in win state — used by setMsg fallback) */
#hand-text{ display:none; }
/* BIG4 win zoom: stamp pops and glows */
@keyframes big4-zoom{ 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.12)} 80%{transform:scale(.97)} 100%{transform:scale(1);opacity:1} }
.win-overlay .stamp.big4-anim{ animation: big4-zoom 480ms cubic-bezier(.22,1,.36,1) both }
/* Win amount larger for BIG4 */
.win-overlay.big4 .stamp{ font-size:80px }
.win-overlay.big4 .amount{ font-size:96px }
/* JP / NJX2 badge on win overlay */
.win-badge{ display:inline-block;padding:4px 18px;border-radius:6px;font-family:"Cinzel",serif;font-size:22px;font-weight:800;letter-spacing:.22em;margin-bottom:8px;text-transform:uppercase }
.win-badge.jp{ background:rgba(255,228,154,.18);border:1.5px solid var(--gold);color:var(--gold-soft) }
.win-badge.njx2{ background:rgba(95,188,255,.15);border:1.5px solid var(--azure);color:var(--azure) }
/* Double-up history strip */
.du-history{ display:flex;gap:10px;justify-content:center;align-items:center;padding:14px 0 4px }
.du-hist-card{ width:48px;height:68px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-weight:800;font-size:20px;border:1.5px solid rgba(240,198,74,.45);position:relative }
.du-hist-card.win{ background:linear-gradient(180deg,#1a4d28,#0d2e17);color:var(--emerald);border-color:var(--emerald) }
.du-hist-card.lose{ background:linear-gradient(180deg,#4d1a1a,#2e0d0d);color:var(--ruby-glow);border-color:var(--ruby-glow) }
.du-hist-card.latest{ box-shadow:0 0 14px rgba(255,228,154,.55) }
/* v1.22.2 — menu modal accordion */
/* v1.118.64 — scroll the accordion list within the modal so expanded sections
   (e.g. Card Style, the last one) don't spill outside the modal box. */
.modal .acc{display:flex;flex-direction:column;gap:10px;margin-top:6px;max-height:600px;overflow-y:auto;overflow-x:hidden;padding-right:6px}
.modal .acc::-webkit-scrollbar{width:8px}
.modal .acc::-webkit-scrollbar-thumb{background:rgba(240,198,74,.35);border-radius:4px}
/* v1.118.64 — Auto Play steppers (no keyboard): ‹ value › */
.modal .stepper{display:flex;align-items:center;gap:8px;background:rgba(18,8,38,.7);border:1px solid rgba(240,198,74,.35);border-radius:10px;padding:4px}
.modal .stepper button{width:46px;height:40px;flex:0 0 auto;border:none;background:rgba(240,198,74,.14);color:var(--gold-soft);font-size:26px;font-weight:700;line-height:1;border-radius:8px;cursor:pointer;touch-action:manipulation}
.modal .stepper button:active{background:rgba(240,198,74,.32)}
.modal .stepper .st-val{flex:1;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;color:var(--ivory)}
.modal .acc-item{border:1px solid rgba(240,198,74,.3);border-radius:10px;overflow:hidden;background:rgba(20,10,50,.4)}
.modal .acc-head{display:grid;grid-template-columns:46px 1fr 24px;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .15s}
.modal .acc-head:hover{background:rgba(240,198,74,.08)}
.modal .acc-ico{width:46px;height:46px;border-radius:8px;border:1px solid rgba(240,198,74,.4);background:linear-gradient(180deg,#4a1140,#2c0a30);display:flex;align-items:center;justify-content:center;color:var(--gold-soft)}
.modal .acc-ico svg{width:24px;height:24px}
.modal .acc-title{font-family:"Cinzel",serif;font-size:20px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.modal .acc-chev{width:14px;height:14px;border-right:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft);transform:rotate(45deg);transition:transform .2s;justify-self:end;margin-top:-4px}
.modal .acc-item.open .acc-chev{transform:rotate(-135deg);margin-top:4px}
.modal .acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease,padding .2s ease;padding:0 18px;color:var(--ivory-dim);font-size:18px}
.modal .acc-item.open .acc-body{max-height:300px;padding:6px 18px 16px}
.modal .row-fld{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:14px;padding:10px 0;font-size:18px}
.modal .row-fld>span:first-child{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);font-size:15px}
.modal .row-fld .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ivory);font-weight:700}
.modal .row-fld input[type=range]{accent-color:var(--gold);width:100%}
/* v1.118.58 — dark number inputs (Auto Play) so they don't render as white boxes */
.modal .row-fld input[type=number]{background:rgba(18,8,38,.7);border:1px solid rgba(240,198,74,.35);color:var(--ivory);border-radius:8px;padding:8px 12px;font-size:16px;font-variant-numeric:tabular-nums;width:100%;font-family:inherit}
.modal .row-fld input[type=number]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,198,74,.18)}
/* v1.118.58 — in-game Card Style segmented toggle */
.modal .cardstyle-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal .cs-btn{flex:1;padding:9px 10px;border-radius:8px;border:1px solid rgba(240,198,74,.35);background:rgba(18,8,38,.7);color:var(--ivory-dim);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.modal .cs-btn.active{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#241002;border-color:var(--gold)}
.modal .row-fld .hint-small{font-size:13px;color:var(--ivory-dim);opacity:.7}
.modal .row-fld.toggle{grid-template-columns:120px 1fr auto}
.modal .sw{position:relative;display:inline-block;width:48px;height:26px}
.modal .sw input{opacity:0;width:0;height:0}
.modal .sw span{position:absolute;inset:0;border-radius:13px;background:rgba(0,0,0,.5);border:1px solid var(--gold);transition:background .15s;cursor:pointer}
.modal .sw span::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--gold-soft);transition:transform .15s}
.modal .sw input:checked+span{background:rgba(240,198,74,.35)}
.modal .sw input:checked+span::before{transform:translateX(22px)}
.modal .acc-body p{margin:6px 0;line-height:1.5}
.modal .acc-body p.muted{color:var(--ivory-dim);opacity:.6;font-size:14px}
/* v1.22.4 — in-game table picker list */
.modal .table-list{display:grid;gap:10px;max-height:480px;overflow-y:auto;padding:6px;font-size:18px;
  /* v1.59.6 — custom scrollbar so the dark casino theme isn't broken by the browser default light gutter. */
  scrollbar-width:thin;scrollbar-color:rgba(240,198,74,.45) rgba(20,10,50,.3)}
.modal .table-list::-webkit-scrollbar{width:8px}
.modal .table-list::-webkit-scrollbar-track{background:rgba(20,10,50,.3);border-radius:8px}
.modal .table-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(240,198,74,.5),rgba(240,198,74,.25));border-radius:8px;border:1px solid rgba(240,198,74,.2)}
.modal .table-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(240,198,74,.75),rgba(240,198,74,.45))}
.modal .table-loading{color:var(--ivory-dim);padding:18px;text-align:center}
.modal .table-row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:12px 16px;border:1px solid rgba(240,198,74,.3);border-radius:8px;background:rgba(20,10,50,.4);cursor:pointer;transition:border-color .15s,background .15s}
.modal .table-row:hover{border-color:var(--gold)}
.modal .table-row.selected{border-color:var(--gold);background:rgba(240,198,74,.1);box-shadow:0 0 0 1px rgba(240,198,74,.4)}
.modal .table-row.current{border-color:var(--emerald);box-shadow:inset 0 0 0 1px rgba(95,212,155,.4)}
/* v1.118.11 — right-click table-history panel (spans the row's full width) */
.modal .table-row .row-history-detail{grid-column:1 / -1;margin-top:8px;padding:8px 10px 4px;border-top:1px solid rgba(240,198,74,.25);font-size:14px;color:var(--champagne)}
.modal .row-history-detail .rhd-title{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px}
.modal .row-history-detail .rhd-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:2px 0;font-variant-numeric:tabular-nums}
.modal .row-history-detail .rhd-row span:nth-child(2){text-align:right;color:var(--gold-soft)}
.modal .row-history-detail .rhd-row span:nth-child(3){text-align:right;opacity:.65;font-size:12px}
.modal .row-history-detail .rhd-empty{opacity:.6}
/* v1.118.12 — BIG4 history CODE chips (doc 05: J{Ry|5K|S|4k}{1|2|3|f}) */
.modal .row-history-detail .rhd-legend{font-size:11px;opacity:.55;margin-bottom:7px}
.modal .row-history-detail .rhd-codes{display:flex;flex-wrap:wrap;gap:6px}
.modal .row-history-detail .rhd-code{display:inline-block;padding:3px 8px;border-radius:5px;border:1px solid rgba(240,198,74,.35);background:rgba(240,198,74,.08);font-family:"Cinzel",serif;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gold-soft);font-variant-numeric:tabular-nums}
.modal .row-history-detail .rhd-code.jp{border-color:rgba(255,80,80,.6);background:rgba(255,80,80,.14);color:#ffd9d9}
/* v1.118.14 — DETAILED BIG4 rows (decoded per doc 05) */
.modal .row-history-detail .rhd-list{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.modal .row-history-detail .rhd-drow{display:flex;flex-direction:column;gap:5px;padding:6px;border-radius:6px;background:rgba(255,255,255,.03);font-size:13px}
.modal .row-history-detail .rhd-main{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px}
.modal .row-history-detail .rhd-cards{display:flex;gap:3px;flex-wrap:wrap}
.modal .row-history-detail .rhd-card{display:inline-flex;align-items:center;gap:1px;font-family:"Outfit",sans-serif;font-size:12px;font-weight:700;padding:1px 5px;border-radius:4px;background:#fbf5e6;border:1px solid rgba(0,0,0,.18);line-height:1.4}
.modal .row-history-detail .rhd-card.red{color:#b71c2c}
.modal .row-history-detail .rhd-card.blk{color:#1a1a1a}
.modal .row-history-detail .rhd-drow .rhd-name{font-weight:600;color:var(--ivory)}
.modal .row-history-detail .rhd-drow .rhd-meta{display:flex;align-items:center;gap:6px;justify-self:start}
.modal .row-history-detail .rhd-badge{font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:4px}
.modal .row-history-detail .rhd-badge.jp{background:rgba(255,80,80,.2);color:#ffd9d9;border:1px solid rgba(255,80,80,.5)}
.modal .row-history-detail .rhd-badge.nj{background:rgba(240,198,74,.18);color:var(--gold-soft);border:1px solid rgba(240,198,74,.45)}
.modal .row-history-detail .rhd-round{font-size:11px;opacity:.6}
.modal .row-history-detail .rhd-drow .rhd-win{color:var(--gold-soft);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.modal .row-history-detail .rhd-drow .rhd-when{opacity:.6;font-size:12px;text-align:right;white-space:nowrap}
/* v1.59.6 — CURRENT is now an inline chip next to the table name
   (was absolute-positioned ::after at top-right that overlapped the
   pool-values column). Inline placement is also screen-reader-friendly. */
.modal .table-row .cur-chip{display:inline-block;padding:1px 8px;border-radius:10px;border:1px solid rgba(95,212,155,.55);background:rgba(95,212,155,.12);color:var(--emerald);font-family:"Cinzel",serif;font-size:10px;letter-spacing:.28em;font-weight:700;text-transform:uppercase}
.modal .table-row .name-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.modal .table-row .name{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.14em;color:var(--gold-soft);font-size:18px}
.modal .table-row .row-players{display:inline-flex;flex-wrap:wrap;gap:4px}
.modal .table-row .player-chip{display:inline-block;padding:1px 7px;border-radius:10px;background:rgba(95,212,155,.12);color:#a8e6c8;font-size:11px;font-family:"Outfit",sans-serif;letter-spacing:.04em;font-weight:600;text-transform:none}
.modal .table-row .live-dot{align-self:center;width:7px;height:7px;border-radius:50%;background:#5fd49b;box-shadow:0 0 5px rgba(95,212,155,.9);animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
.modal .table-row .row-big4{margin-top:4px;font-family:"Outfit",sans-serif;font-size:11px;letter-spacing:.12em;color:var(--ivory-dim);text-transform:uppercase;min-height:13px}
.modal .table-row .row-big4.rb-empty{opacity:.45;font-style:italic;text-transform:none;letter-spacing:.04em}
.modal .table-row .pools{text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.modal .table-row .pool-line{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;font-size:12px;color:var(--gold)}
.modal .table-row .pool-line .lbl{color:var(--ivory-dim);opacity:.75;font-size:10px;letter-spacing:.16em;min-width:22px;text-align:left}
.modal .table-row .pool-line .val{min-width:56px;text-align:right;font-weight:700}
#rotate-hint{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);flex-direction:column;gap:18px;font-family:"Cinzel",serif;color:var(--gold-soft);font-size:28px;letter-spacing:.18em;text-align:center;pointer-events:none}

/* ============================================================
   v1_3 PHASE 2 — visible-shell additions (hidden by default;
   Phase 4 wires the #minigame logic, Phase 5 polishes #btnDouble
   pulse, NJX2 visibility is gated by body.no-jokers).
   ============================================================ */
.njx-pill{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;box-sizing:border-box;border:2px solid var(--ruby,#c8324a);border-radius:8px;background:radial-gradient(120% 100% at 50% 0%,rgba(255,120,140,.28) 0%,transparent 55%),linear-gradient(180deg,rgba(220,60,80,.22),rgba(220,60,80,.06));color:var(--ruby-glow,#ff4d6a);font-family:"Playfair Display",serif;font-size:36px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase;box-shadow:inset 0 0 14px rgba(255,77,106,.22),0 0 18px rgba(255,77,106,.18);white-space:nowrap;visibility:hidden}
body.no-jokers .njx-pill{visibility:visible}

.actions .play-btn{height:56px;background:linear-gradient(180deg,#1a223b 0%,#2a3a64 50%,#121830 100%)}
.actions .play-btn .lbl{font-family:"Cinzel",serif;font-size:18px;letter-spacing:.18em;display:inline-flex;align-items:center;gap:8px}
.actions .play-btn .play-tri{color:#6ad1ff;font-size:16px}
.actions .play-btn.active{background:linear-gradient(180deg,#2c5a3b 0%,#3f8a5d 50%,#1d3e29 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.4),0 0 22px rgba(106,255,170,.55)}
.actions .play-btn.active .play-tri{color:#fff}

.actions .double-btn{height:44px;background:linear-gradient(180deg,#2a1422 0%,#4a1830 50%,#2a0e1c 100%)}
.actions .double-btn .lbl{font-family:"Cinzel",serif;font-size:22px;letter-spacing:.18em;color:var(--gold-soft);text-shadow:0 0 14px rgba(240,198,74,.55);font-weight:700}
.actions .double-btn.pulse{animation:dbl-pulse .75s ease-in-out infinite alternate;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 2px rgba(240,198,74,.9),0 0 40px rgba(240,198,74,1),0 0 90px rgba(240,198,74,.85),0 0 160px rgba(255,138,60,.5)}
.actions .double-btn.pulse .lbl{animation:dbl-text-pulse .75s ease-in-out infinite alternate}
@keyframes dbl-pulse{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 2px rgba(240,198,74,.7),0 0 24px rgba(240,198,74,.7),0 0 60px rgba(240,198,74,.45),0 0 120px rgba(255,138,60,.25);transform:scale(1)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 3px rgba(255,228,154,1),0 0 60px rgba(255,228,154,1),0 0 140px rgba(240,198,74,.95),0 0 220px rgba(255,138,60,.7);transform:scale(1.06)}}
@keyframes dbl-text-pulse{from{text-shadow:0 0 14px rgba(255,228,154,.7);color:var(--gold-soft)}to{text-shadow:0 0 22px rgba(255,255,255,.95),0 0 38px rgba(255,228,154,.95);color:#fff7d6}}

/* v1.118.15 — vertical layout fits inside the felt so the STAKE bar and the
   WIN/LOSE tag no longer spill UP into the HUD/paytable. Content is top-aligned
   in the 380px felt band; the draw card is shrunk to leave room for the stake
   (above) and the win/lose tag (below), and the group is centered with the
   recent-draws strip. */
.minigame{position:absolute;left:200px;right:260px;top:460px;height:380px;display:flex;align-items:flex-start;justify-content:center;gap:80px;z-index:8;padding:0 40px;pointer-events:none}
.mg-decision{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;padding-top:46px}
.mg-slot{width:200px;height:280px;perspective:1200px}
.mg-card{width:100%;height:100%;border-radius:14px;position:relative;transform-style:preserve-3d;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 2px rgba(240,198,74,.18);overflow:hidden}
.mg-tag{font-family:"Cinzel",serif;font-size:30px;letter-spacing:.16em;color:var(--gold-soft);text-shadow:0 0 18px rgba(240,198,74,.7);min-height:34px;text-align:center}
.mg-tag.big{color:#ff8a3c;text-shadow:0 0 22px rgba(255,138,60,.75)}
.mg-tag.small{color:#6ad1ff;text-shadow:0 0 22px rgba(106,209,255,.75)}
/* v1.118.12 — clear win/lose readout in the double-up mini-game */
.mg-tag.win{color:#48f08a;text-shadow:0 0 24px rgba(72,240,138,.8)}
.mg-tag.lose{color:#ff5b5b;text-shadow:0 0 24px rgba(255,91,91,.8)}
.mg-tag.info{color:var(--gold-soft)}
/* v1.118.14 — double-up DRAW HISTORY: back to the larger, readable fanned cards
   (the owner: "the historical is too small, the one before is better") but now with a
   green(won)/red(lost) edge so the strip reads as a win/lose record, not a hand,
   and jokers render as ★ (not "??"). */
.mg-history{display:flex;align-items:flex-start;padding-top:46px}
.mg-history .mg-hcard{width:172px;height:250px;flex:0 0 auto;border-radius:11px;background:linear-gradient(180deg,#fff9ef 0%,#f3e6c8 100%);box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 2px rgba(240,198,74,.30);position:relative;overflow:hidden;margin-left:-70px}
.mg-history .mg-hcard:first-child{margin-left:0}
.mg-history .mg-hcard.won{box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 3px rgba(72,240,138,.9)}
.mg-history .mg-hcard.lost{box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 3px rgba(255,91,91,.8)}
.mg-history .mg-hcard.newest{transform:translateY(-6px)}
.mg-history .mg-hcard.won.newest{box-shadow:0 16px 36px rgba(0,0,0,.7),0 0 0 4px rgba(72,240,138,1)}
.mg-history .mg-hcard.lost.newest{box-shadow:0 16px 36px rgba(0,0,0,.7),0 0 0 4px rgba(255,91,91,.95)}
.mg-history .mg-hcard .mini-corner .r{font-size:22px}
.mg-history .mg-hcard .mini-corner .s{font-size:18px}
.mg-history .mg-hcard .mini-big{font-size:88px}
/* v1.118.6 — double-up stake readout + Take-Winnings (collect) exit. */
.mg-stake{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:"Outfit",sans-serif;font-size:24px;letter-spacing:.03em;color:var(--champagne);text-shadow:0 2px 12px rgba(0,0,0,.75);pointer-events:none;background:rgba(8,4,20,.6);padding:6px 22px;border-radius:12px;border:1px solid rgba(240,198,74,.35)}
.mg-stake b{color:var(--gold-soft);font-weight:800}
/* v1.118.7 — sits directly BELOW the Big/Small rail (the relabelled OPEN/BET at
   .actions top:130/right:60/width:180), not centred over the felt. */
.mg-collect{position:absolute;top:-92px;right:-200px;width:180px;box-sizing:border-box;text-align:center;pointer-events:auto;cursor:pointer;user-select:none;font-family:"Cinzel",serif;font-size:22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory);background:linear-gradient(180deg,rgba(46,28,78,.96),rgba(22,11,44,.96));border:2px solid var(--gold);border-radius:12px;padding:14px 10px;box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 0 12px rgba(240,198,74,.15);transition:transform .12s ease,box-shadow .2s ease;z-index:9}
.mg-collect:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 20px rgba(240,198,74,.45)}
.mg-collect:active{transform:translateY(0)}
/* v1.118.6 — dim the card area while a win banner is up so the WIN wording reads
   clearly instead of fighting the card faces underneath ("bad layered" report). */
.cards-base.win-dim{filter:brightness(.4) saturate(.85);transition:filter .3s ease}
.mg-history .mg-hcard.faded{filter:brightness(.85)}
.mini-face{position:absolute;inset:0;background:linear-gradient(180deg,#fff9ef 0%,#f3e6c8 100%);border-radius:inherit;display:grid;grid-template-rows:auto 1fr auto;padding:8px 10px;font-family:"Playfair Display",serif}
.mini-face.red{color:#b71c2c}
.mini-face.black{color:#1a1a1a}
.mini-face .mini-corner{display:flex;flex-direction:column;align-items:flex-start;line-height:1;font-weight:800}
.mini-face .mini-corner.br{align-items:flex-end;justify-self:end;transform:rotate(180deg)}
.mini-face .mini-corner .r{font-size:26px}
.mini-face .mini-corner .s{font-size:22px;margin-top:2px}
.mini-face .mini-big{align-self:center;justify-self:center;font-size:110px;line-height:1;font-weight:800}
.mg-card.back{background:repeating-linear-gradient(45deg,#6e1322 0 8px,#5a0e1a 8px 16px),#5a0e1a}
.mg-card.back::before{content:"";position:absolute;inset:10px;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(240,198,74,.55)}
.mg-card.back::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(240,198,74,.95) 0 8%,rgba(240,198,74,0) 9%),radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(240,198,74,.45) 18.5% 19%,transparent 19.5%)}
.mg-card.flip-in{animation:mg-flip .55s ease forwards}
@keyframes mg-flip{0%{transform:rotateY(0deg)}50%{transform:rotateY(90deg);filter:brightness(.5)}51%{filter:brightness(.5)}100%{transform:rotateY(0deg);filter:brightness(1)}}
.mg-card.deal-in{animation:mg-deal-in .35s ease-out both}
@keyframes mg-deal-in{from{transform:translateY(-80px) scale(.85);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

/* ============================================================
   v1.27.0 Phase 1 — per-round-bet "lights up one-by-one" cells.
   The 4 yellow cells in r3..r6 colB start blank+dimmed; each
   round commit calls setRoundBet() which removes .dim and adds
   .lit. Folding zeroes remaining cells (still gets .lit so the
   "0" reads as committed-but-forfeit, not unplayed).
   ============================================================ */
.status .cell.dim{opacity:.18;text-shadow:none}
.status .cell.lit{opacity:1;text-shadow:0 0 14px rgba(255,233,168,.5),0 0 4px rgba(255,233,168,.7);animation:round-bet-pop .35s ease-out}
@keyframes round-bet-pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}

/* ============================================================
   v1.28.0 — table-picker grouped layout. The in-game #tableModal
   now renders tables by group (250c / 100c / 50c / 20c / 10c)
   with a color-coded header and the group's advertised bonus
   values. .group-block sets a custom prop --group-color which
   .group-dot picks up to render the color marker.
   ============================================================ */
/* v1.59.3 — group accordion. Group blocks collapse by default;
   .open reveals the .group-tables grid. The group head is also
   the click target. */
.modal .group-block{margin:14px 0;padding:0;border:1px solid rgba(240,198,74,.18);border-radius:10px;background:rgba(10,5,30,.45)}
.modal .group-block .group-head{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .15s}
.modal .group-block .group-head:hover{background:rgba(240,198,74,.04)}
.modal .group-block .group-dot{width:14px;height:14px;border-radius:50%;background:var(--group-color,#888);box-shadow:0 0 8px var(--group-color,#888);flex-shrink:0}
.modal .group-block .group-label{font-family:"Cinzel",serif;font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);font-weight:700}
.modal .group-block .group-bonus{margin-left:auto;font-size:12px;color:var(--ivory-dim);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.modal .group-block .group-caret{flex-shrink:0;color:var(--ivory-dim);font-size:13px;transition:transform .2s}
.modal .group-block.open .group-caret{transform:rotate(180deg);color:var(--gold)}
.modal .group-block .group-tables{display:none;padding:0 10px 12px;gap:8px;flex-direction:column}
.modal .group-block.open .group-tables{display:flex}

/* Stacked modal head — title on top, tagline below in smaller font. */
.modal .modal-head-stack{flex-direction:column;align-items:flex-start;gap:4px}
.modal .modal-head .sub-small{font-size:13px;letter-spacing:.04em;color:var(--ivory-dim);opacity:.85;text-transform:none}

/* ===== v1.118.68 — MOBILE layout (body.mobile) ============================
   Rearranges within the 1920×1080 canvas so the felt + side-docked controls
   dominate (bigger when fit-to-screen), with the paytable (top) and menu/HUD
   (bottom) collapsed into obvious, fluidly-animated toggle bands. Desktop is
   untouched (all rules gated on body.mobile). */
.m-topbar, .m-bottoggle { display:none; }          /* hidden on desktop */
body.mobile .divider-h { display:none; }
/* v1.118.69 — keep the marquee (thin, at the very top) */
body.mobile .marquee { top:8px; left:60px; right:60px; height:44px; }

/* Felt + cards: wide rectangle centred; cards scaled up to fill it (no empty space) */
body.mobile .felt      { top:150px; bottom:120px; left:230px; right:230px; height:auto; }
body.mobile .cards-base{ top:150px; bottom:120px; left:230px; right:230px; height:auto; padding:0 20px;
  align-items:center; justify-content:center; transform:scale(1.22); transform-origin:center center; }

/* Controls docked beside the felt, vertically centred */
body.mobile .actions-left { top:50%; left:22px;  transform:translateY(-50%); width:150px; gap:28px; z-index:20; }
body.mobile .actions      { top:50%; right:22px; transform:translateY(-50%); width:190px; gap:28px; z-index:20; }

/* Always-visible top bar: compact credit/bet + the PAY TABLE toggle */
body.mobile .m-topbar { display:flex; position:absolute; top:60px; left:250px; right:250px; height:62px;
  align-items:center; justify-content:space-between; gap:12px; padding:0 22px; z-index:30;
  background:linear-gradient(180deg,rgba(26,12,74,.9),rgba(10,5,48,.72)); border:1px solid rgba(240,198,74,.4); border-radius:14px; }
body.mobile .m-hud { display:flex; align-items:center; gap:10px; font-family:"Outfit",sans-serif; }
body.mobile .m-hud .m-k { font-family:"Cinzel",serif; font-size:18px; letter-spacing:.12em; color:var(--gold-soft); }
body.mobile .m-hud b { color:var(--ivory); font-variant-numeric:tabular-nums; font-size:30px; font-weight:700; }

/* Toggle buttons — obvious, gold, tappable */
body.mobile .m-toggle { align-items:center; gap:8px; background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#241002; font-family:"Cinzel",serif; font-weight:700; font-size:22px; letter-spacing:.06em;
  border:2px solid rgba(255,240,190,.7); border-radius:12px; padding:12px 24px; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.45); white-space:nowrap; }
body.mobile .m-toggle .m-chev { display:inline-block; transition:transform .3s ease; font-size:18px; }
body.mobile .m-bottoggle { display:inline-flex; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:30; }

/* Collapsible TOP band (credit/bet/pools + paytable) — overlays the felt top; slides up when collapsed */
body.mobile .status, body.mobile .pay-wrap {
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease; z-index:25;
  background:rgba(12,6,46,.95); border:1px solid rgba(240,198,74,.3); border-radius:14px; }
/* v1.118.71 — top-open band = bonus/pools/step (.status, LEFT) + paytable
   (.pay-wrap, RIGHT), side by side. .status keeps its base grid (intact); this
   restores the pools + step info that hiding it had removed. */
body.mobile .status   { top:126px; left:70px; padding:16px 20px; }
body.mobile .pay-wrap { top:126px; left:860px; right:70px; width:auto; max-height:none; bottom:150px;
  padding:16px 26px; overflow:auto; }
body.mobile .pay-wrap .pay-title { text-align:center; margin-bottom:14px; font-size:34px; }
body.mobile .pay { font-size:30px; grid-template-columns:56px 1fr 220px; row-gap:12px; }
body.mobile:not(.top-open) .status,
body.mobile:not(.top-open) .pay-wrap { transform:translateY(-135%); opacity:0; pointer-events:none; }
body.mobile.top-open .m-topbar .m-chev { transform:rotate(180deg); }

/* Collapsible BOTTOM band (username/table/menu icons) — slides down when collapsed */
body.mobile .bottom { transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease; z-index:25;
  background:linear-gradient(0deg,rgba(12,6,46,.96),rgba(12,6,46,.7)); }
body.mobile:not(.bottom-open) .bottom { transform:translateY(135%); opacity:0; pointer-events:none; }
body.mobile.bottom-open .m-bottoggle .m-chev { transform:rotate(180deg); }

/* v1.118.71 — table picker: everything ~2.3× bigger (the stage scales down ~0.43×
   on a phone, so stage-px must be large to be readable). Wide modal, big rows,
   big foot buttons; the CLOSE/SWITCH row is centred and roomy. */
body.mobile .modal-md { width:1760px !important; max-height:1000px !important; padding:34px 44px 26px !important; }
body.mobile .modal-head h2 { font-size:46px; }
body.mobile .modal-head .sub { font-size:26px; }
body.mobile .modal-close { width:66px; height:66px; font-size:34px; top:24px; right:30px; }
body.mobile .table-list { max-height:640px; gap:18px; padding:8px; }
body.mobile .table-row { padding:24px 30px; gap:26px; }
body.mobile .table-row .name { font-size:38px; }
body.mobile .table-row .pool-line { font-size:26px; }
body.mobile .table-row .pool-line .lbl { font-size:22px; min-width:40px; }
body.mobile .table-row .pool-line .val { min-width:120px; }
body.mobile .table-row .row-history-detail { font-size:24px; }
body.mobile .table-row .row-history-detail .rhd-code { font-size:24px; padding:6px 14px; }
body.mobile .modal-foot { justify-content:center; gap:28px; margin-top:22px; padding-top:20px; }
body.mobile .modal-foot .pill { font-size:32px; padding:20px 52px; }

/* v1.118.71 — double-up mini-game overlays the MOBILE felt (was pinned to the
   desktop felt position top:460 → misaligned on mobile). */
body.mobile .minigame { left:230px; right:230px; top:150px; bottom:120px; height:auto; padding:0 30px; align-items:center; }

/* ===== v1.118.72 — mobile polish: felt hugs the cards, panel padding, readable
   table-history + in-game-menu fonts, theme-aware mini-game =============== */

/* Felt hugs the card row (was a tall empty rectangle). Centred band, height ≈
   the scaled card row + a slim margin — "just slightly bigger than the cards",
   like the tablet/desktop layout. */
body.mobile .felt       { top:50%; bottom:auto; height:520px; left:190px; right:190px; transform:translateY(-50%); }
body.mobile .cards-base { top:130px; bottom:130px; }   /* centre 540 == felt centre */

/* .status (CREDIT/BET/pools/step) — real padding so text isn't on the edge. */
body.mobile .status { padding:30px 40px; }

/* Table-history detail — every sub-label was 10–14px (≈5px on the ~0.43× phone
   scale). Bump the whole cluster so it's actually readable. */
body.mobile .modal .table-row .row-history-detail        { font-size:30px; }
body.mobile .modal .row-history-detail .rhd-title        { font-size:26px; margin-bottom:12px; }
body.mobile .modal .row-history-detail .rhd-legend       { font-size:24px; margin-bottom:14px; }
body.mobile .modal .row-history-detail .rhd-row          { gap:20px; padding:5px 0; }
body.mobile .modal .row-history-detail .rhd-row span:nth-child(3) { font-size:24px; }
body.mobile .modal .row-history-detail .rhd-code         { font-size:28px; padding:8px 16px; }
body.mobile .modal .row-history-detail .rhd-drow         { font-size:28px; padding:12px; gap:10px; }
body.mobile .modal .row-history-detail .rhd-card         { font-size:26px; padding:3px 10px; }
body.mobile .modal .row-history-detail .rhd-drow .rhd-name { font-size:28px; }
body.mobile .modal .row-history-detail .rhd-badge        { font-size:22px; padding:3px 12px; }
body.mobile .modal .row-history-detail .rhd-main         { gap:18px; }

/* In-game MENU (settings accordion) — everything was 15–20px; bump ~2×. */
body.mobile .modal .acc-head   { grid-template-columns:80px 1fr 34px; padding:22px 26px; gap:20px; }
body.mobile .modal .acc-ico    { width:80px; height:80px; border-radius:12px; }
body.mobile .modal .acc-ico svg{ width:42px; height:42px; }
body.mobile .modal .acc-title  { font-size:38px; letter-spacing:.14em; }
body.mobile .modal .acc-chev   { width:22px; height:22px; }
body.mobile .modal .acc-body   { font-size:32px; padding:0 30px; }
body.mobile .modal .acc-item.open .acc-body { max-height:1600px; padding:14px 30px 26px; }
body.mobile .modal .row-fld    { grid-template-columns:220px 1fr 96px; gap:22px; padding:16px 0; font-size:32px; }
body.mobile .modal .row-fld>span:first-child { font-size:28px; }
body.mobile .modal .row-fld.toggle { grid-template-columns:220px 1fr auto; }
body.mobile .modal .row-fld input[type=number] { font-size:30px; padding:12px 18px; }
body.mobile .modal .row-fld .hint-small { font-size:24px; }
body.mobile .modal .acc-body p        { font-size:30px; }
body.mobile .modal .acc-body p.muted  { font-size:26px; }
body.mobile .modal .stepper           { padding:8px; gap:14px; }
body.mobile .modal .stepper button    { width:80px; height:70px; font-size:44px; border-radius:12px; }
body.mobile .modal .stepper .st-val   { font-size:34px; }
body.mobile .modal .cs-btn            { font-size:28px; padding:16px 14px; }

/* Mini-game: honour the active card theme (image faces set inline by
   _miniFaceHTML). Swap the cream CSS-card mat for a dark one so a contained
   card image doesn't sit on a beige letterbox. */
body.hd-cards .mg-card,
body.hd-cards .mg-history .mg-hcard { background:#160a1e !important; }

/* ===== v1.118.73 — real-device fixes (phone stage renders ~0.33x, so fonts
   need ~3x stage-px; controls were overlapping the felt; the gold .frame,
   marquee, menu button & Take-Winnings collided on full-bleed) =========== */

/* (item 4) Controls vs felt: shrink the card row so it fits BETWEEN the
   side-docked controls, and pull the felt in to clear them (no overlap). */
body.mobile .cards-base { transform:scale(1.10); }
body.mobile .felt       { left:230px; right:230px; }   /* clears actions at left/right:22 */
body.mobile .minigame   { left:230px; right:230px; top:200px; bottom:180px; }

/* (item 4) Take Winnings — was offset top:-118 right:-200 (landed over the
   marquee); dock it to the felt's top-right, below the top bar. */
body.mobile .mg-collect { top:10px; right:10px; left:auto; bottom:auto; width:220px;
  font-size:28px; padding:18px 12px; }

/* (v1.118.74 item 0) Keep the gold frame (the owner: "it's a nice beautifier") —
   just make the PERSISTENT HUD sit inside it. The frame is inset:14 + 2px
   border, so clear ~26px on every edge. The collapsible bands / modals may
   overflow it (they flow full-width from the top/bottom). */
body.mobile .frame       { border-width:7px; border-color:rgba(240,198,74,.6); border-radius:22px; }
body.mobile .marquee     { top:30px; left:74px; right:74px; }
body.mobile .m-topbar    { top:86px; }                 /* below the marquee, inside the frame */
body.mobile .m-bottoggle { bottom:30px; }
body.mobile .actions-left{ left:34px; }                /* inside the frame's left border */
body.mobile .actions     { right:34px; }               /* inside the frame's right border */

/* (item 3) .status (credit/bet/pools) — the cells are position:absolute, so
   container PADDING doesn't inset them (they anchor to the padding box). A thick
   transparent BORDER shrinks that box and the panel background shows through it,
   giving real inset; a thin outline redraws the gold edge. */
body.mobile .status {
  padding:0;
  border-style:solid; border-color:transparent; border-width:48px 58px 34px 58px;
  outline:2px solid rgba(240,198,74,.3); outline-offset:-2px;
  background-clip:border-box;
}

/* (items 1 & 2) Table picker — bump ~3x (was still ~8px on the phone scale). */
body.mobile .modal-head .sub                          { font-size:40px; }
body.mobile .modal .group-block .group-head           { padding:20px 26px; gap:18px; }
body.mobile .modal .group-block .group-label          { font-size:50px; font-weight:700; letter-spacing:.1em; color:var(--gold-soft); }
body.mobile .modal .group-block .group-bonus          { font-size:32px; }
body.mobile .modal .group-block .group-dot            { width:28px; height:28px; }
body.mobile .modal .group-block .group-caret          { font-size:34px; }
body.mobile .modal .table-list                        { max-height:760px; }
body.mobile .modal .table-row                         { padding:28px 34px; gap:30px; }
body.mobile .modal .table-row .name                   { font-size:52px; }
body.mobile .modal .table-row .row-big4               { font-size:34px; min-height:auto; }
body.mobile .modal .table-row .cur-chip               { font-size:26px; padding:4px 16px; }
body.mobile .modal .table-row .pool-line              { font-size:40px; gap:16px; }
body.mobile .modal .table-row .pool-line .lbl         { font-size:34px; min-width:70px; }
body.mobile .modal .table-row .pool-line .val         { font-size:40px; min-width:190px; }

/* (item 7) In-game MENU — keep the (OK) font sizes but slim the header chrome
   and give the accordion a real scroll region so items aren't crammed. */
body.mobile .modal-md                       { max-height:1040px !important; }
body.mobile .modal .acc                     { max-height:860px; }
body.mobile .modal .acc-head                { grid-template-columns:64px 1fr 30px; padding:16px 24px; gap:18px; }
body.mobile .modal .acc-ico                 { width:64px; height:64px; }
body.mobile .modal .acc-ico svg             { width:34px; height:34px; }

/* (item 6a) Mini-game BACK: for image themes drop the CSS red-diamond pattern
   + gold ring so the theme's back image (set inline) shows cleanly. */
body.hd-cards .mg-card.back { background:#160a1e !important; }
body.hd-cards .mg-card.back::before,
body.hd-cards .mg-card.back::after { display:none !important; }

/* ===== v1.118.74 — real-device round 2 =================================== */

/* (item 1) picker fonts a touch bigger. */
body.mobile .modal .table-row .name           { font-size:58px; }
body.mobile .modal .group-block .group-label  { font-size:56px; }
body.mobile .modal .table-row .row-big4        { font-size:40px; }

/* (item 2) TABLE HISTORY — BIG4 detail: legend + draw rows were ~8px on screen
   (unreadable). Bump the whole cluster ~3x. */
body.mobile .modal .row-history-detail                    { font-size:40px; }
body.mobile .modal .row-history-detail .rhd-title         { font-size:38px; margin-bottom:16px; }
body.mobile .modal .row-history-detail .rhd-legend        { font-size:34px; margin-bottom:18px; }
body.mobile .modal .row-history-detail .rhd-drow          { font-size:40px; padding:16px; gap:14px; }
body.mobile .modal .row-history-detail .rhd-drow .rhd-name{ font-size:40px; }
body.mobile .modal .row-history-detail .rhd-main          { gap:22px; }
body.mobile .modal .row-history-detail .rhd-code          { font-size:36px; padding:8px 18px; }
body.mobile .modal .row-history-detail .rhd-card          { font-size:34px; padding:4px 12px; }
body.mobile .modal .row-history-detail .rhd-badge         { font-size:30px; padding:4px 14px; }
body.mobile .modal .row-history-detail .rhd-row span:nth-child(3) { font-size:30px; }

/* (item 3) modal-md as a flex column so the head + foot are pinned and only the
   body scrolls — the CLOSE / SWITCH TABLE row was pushed off-screen. */
body.mobile .modal-md             { display:flex; flex-direction:column; max-height:1000px !important; }
body.mobile .modal-md .modal-head { flex:0 0 auto; }
body.mobile .modal-md .modal-foot { flex:0 0 auto; }
body.mobile .modal-md .table-list,
body.mobile .modal-md .acc        { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; }

/* (items 4 & 5) a lone hint/description in a 3-column .row-fld was crammed into
   the 220px first column (tall narrow text overlapping the items above). Make
   any hint span the full row width. */
.modal .row-fld > .hint-small { grid-column:1 / -1; }

/* (item 6) mini-game image cards used `contain` on a dark mat → the letterbox
   read as a "black border". Cover fills the slot with the card art. */
body.hd-cards .mg-card .face-hd,
body.hd-cards .mg-history .mg-hcard .face-hd { background-size:cover; }

/* ===== v1.118.76 — real-device round 3 ================================== */

/* (items 1 & 2) NORMALISE picker fonts — .74 made some huge while the meta
   (bet-round / time-ago) stayed ~4px. One consistent 24–44 hierarchy. */
body.mobile .modal .group-block .group-label        { font-size:44px; }
body.mobile .modal .group-block .group-bonus         { font-size:28px; }
body.mobile .modal .table-row .name                  { font-size:42px; }
body.mobile .modal .table-row .row-big4              { font-size:32px; }
body.mobile .modal .table-row .pool-line             { font-size:34px; }
body.mobile .modal .table-row .pool-line .lbl        { font-size:30px; }
body.mobile .modal .table-row .pool-line .val        { font-size:34px; min-width:170px; }
body.mobile .modal .row-history-detail               { font-size:30px; }
body.mobile .modal .row-history-detail .rhd-title    { font-size:32px; }
body.mobile .modal .row-history-detail .rhd-legend   { font-size:28px; }
body.mobile .modal .row-history-detail .rhd-drow     { font-size:30px; }
body.mobile .modal .row-history-detail .rhd-drow .rhd-name { font-size:32px; }
body.mobile .modal .row-history-detail .rhd-code     { font-size:30px; }
body.mobile .modal .row-history-detail .rhd-card     { font-size:28px; }
body.mobile .modal .row-history-detail .rhd-badge    { font-size:24px; }
body.mobile .modal .row-history-detail .rhd-round    { font-size:26px; }   /* was ~4px */
body.mobile .modal .row-history-detail .rhd-when     { font-size:24px; }   /* was ~4px */
body.mobile .modal .row-history-detail .rhd-win      { font-size:30px; }
body.mobile .modal .row-history-detail .rhd-meta     { font-size:26px; }

/* (item 3) flex wouldn't clamp the display:grid list (its intrinsic height
   resisted shrinking, so the foot got pushed off-screen). Drop flex and cap the
   scroll region with an explicit max-height instead — head + list + foot then
   fit inside the modal and CLOSE / SWITCH TABLE stay on screen. */
body.mobile .modal-md              { display:block !important; max-height:1000px !important; overflow:hidden; }
body.mobile .modal-md .table-list  { flex:none !important; max-height:680px !important; overflow-y:auto; }
body.mobile .modal-md .acc         { flex:none !important; max-height:700px !important; overflow-y:auto; }

/* (item 4) ready logo — centre it on the mobile felt band (was pinned to the
   desktop felt centre, so it sat low). */
body.mobile .ready-logo { top:50%; }

/* (item 5) symmetric felt↔control gaps: the right control column is wider, so
   equal edge insets left an uneven gap. Offset the felt+cards so both gaps ≈40. */
body.mobile .felt       { left:224px; right:264px; }
body.mobile .cards-base { left:210px; right:250px; }
body.mobile .minigame   { left:224px; right:264px; }

/* (item 6) top bar: group pill (dynamically tinted via inline style) + STEP. */
body.mobile .m-topbar { left:150px; right:150px; }
body.mobile .m-hud .m-grp { font-family:"Cinzel",serif; font-weight:700; font-size:26px; letter-spacing:.08em;
  padding:3px 16px; border:2px solid var(--gold-soft); border-radius:10px; color:var(--gold-soft); }
body.mobile .m-hud #m-step { color:var(--emerald); }

/* (items 7 & 8) mini-game image cards: transparent mat + CONTAIN. `cover`
   zoomed the tall Original deck; the dark mat made a black-border letterbox.
   Contain shows the whole card; transparent removes the black frame. Keep the
   won/lost rings on history cards, drop the default gold ring. */
body.hd-cards .mg-card,
body.hd-cards .mg-card.back,
body.hd-cards .mg-history .mg-hcard { background:transparent !important; }
body.hd-cards .mg-card { box-shadow:0 18px 40px rgba(0,0,0,.5) !important; }
body.hd-cards .mg-history .mg-hcard:not(.won):not(.lost) { box-shadow:none !important; }
body.hd-cards .mg-card .face-hd,
body.hd-cards .mg-history .mg-hcard .face-hd { background-size:contain !important; }

/* ===== v1.118.78 — real-device round 4 ================================== */

/* (item 1) picker foot was STILL cut on a tall (expanded) group — the capped
   list + head + foot + padding exceeded the modal. Shrink the list cap so the
   CLOSE / SWITCH TABLE foot always fits. */
body.mobile .modal-md .table-list { max-height:520px !important; }

/* (item 4) menu: give the accordion room so the open Card Style body (incl. its
   description) plus the other items all show — the description was cut at the
   scroll fold. */
body.mobile .modal-md .acc                  { max-height:820px !important; }
body.mobile .modal .acc-item.open .acc-body { max-height:2000px; }

/* (item 2) mini-game history: reduce the overlap so each card's rank is visible
   (was -120px → only a sliver showed). */
body.mobile .mg-history .mg-hcard             { margin-left:-56px; }
body.mobile .mg-history .mg-hcard:first-child { margin-left:0; }

/* (item 1 of images 2/3) drop the coloured win/lose ring on image-theme cards —
   it can't hug a `contain` image cleanly; keep just a soft drop shadow. */
body.hd-cards .mg-history .mg-hcard { box-shadow:0 8px 20px rgba(0,0,0,.45) !important; }

/* (item 3) Take Winnings — move it up beside the BIG / SMALL rail (was floating
   at the felt's top-right). .mg-collect is anchored to .minigame (the felt), so
   negative right places it over the control column, above BIG. */
body.mobile .mg-collect { top:70px; right:-230px; left:auto; bottom:auto; width:220px; font-size:26px; padding:16px 12px; }

/* ===== v1.118.82 — static bottom bar (the owner: there's always empty space below
   the fixed felt band, so dock the "pulled" menu and drop the pull button). ===== */
body.mobile .bottom {
  top:812px; bottom:30px; left:44px; right:44px; height:auto;  /* inside the gold frame */
  transform:none !important; opacity:1 !important;             /* always visible (no collapse) */
  padding:0 24px;
  background:none !important; box-shadow:none !important;       /* v1.118.84 — no shadow/gradient */
}
body.mobile .m-bottoggle { display:none !important; }   /* no more pull button */

/* v1.118.84 — Take Winnings sized to match the BIG / SMALL rail (was oversized). */
body.mobile .mg-collect { top:64px; right:-230px; width:190px; font-size:20px; padding:12px 10px; line-height:1.15; }

/* ===== v1.118.85 — mini-game shadow/spacing + mobile notice overlap ===== */

/* Lighter card shadows on image-theme mini-game cards (were "over-shadowy"). */
body.hd-cards .mg-card              { box-shadow:0 6px 14px rgba(0,0,0,.35) !important; }
body.hd-cards .mg-history .mg-hcard { box-shadow:0 4px 10px rgba(0,0,0,.30) !important; }

/* Keep the first history card flush; the rest use the (now looser) -70 overlap. */
.mg-history .mg-hcard:first-child { margin-left:0; }
body.mobile .mg-history .mg-hcard             { margin-left:-42px; }
body.mobile .mg-history .mg-hcard:first-child { margin-left:0; }

/* (image 2) the #msg notice (base top:916) overlapped the now-static bottom bar.
   On mobile move it just above the bar, on the felt's lower edge, and enlarge it. */
body.mobile #msg { top:756px; left:230px; right:230px; height:auto; font-size:34px; z-index:26; }

/* ===== v1.118.86 — notice BELOW the felt on mobile too (consistent w/ desktop);
   keep the mini-game clear of the docked bottom bar ===== */
body.mobile .felt     { height:460px; }             /* centred band 310..770 */
body.mobile .minigame { top:200px; bottom:310px; }  /* 200..770 — matches felt, never over the bar */
body.mobile #msg      { top:780px; }                /* in the strip just BELOW the felt */
body.mobile .bottom   { top:832px; }                /* below the notice */

/* ===== v1.118.88 — brand logo image on the ready state + a loading overlay ===== */

/* Ready-state brand logo (replaces the old text badge; the ring SVG is gone). */
.ready-logo .core   { position:static; inset:auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ready-logo .bt2-logo { display:block; width:520px; max-width:64vw; height:auto;
  filter:drop-shadow(0 6px 22px rgba(240,198,74,.4)); }
body.mobile .ready-logo .bt2-logo { width:560px; max-width:none; }

/* Loading overlay — shown during slow deal/continue/settle round-trips so the
   cards don't visibly "jump" (no backdrop-filter: it glitches in the scaled stage). */
.loading-overlay{position:absolute;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;
  background:rgba(10,5,40,.55);opacity:0;pointer-events:none;transition:opacity .2s ease}
.loading-overlay.show{opacity:1}
.loading-overlay.hidden{display:none}
.loading-overlay .loading-box{display:flex;flex-direction:column;align-items:center;gap:20px}
.loading-overlay .loading-spinner{width:70px;height:70px;border:6px solid rgba(240,198,74,.25);border-top-color:var(--gold);border-radius:50%;animation:ldspin .8s linear infinite}
.loading-overlay .loading-text{font-family:"Cinzel",serif;font-size:36px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
@keyframes ldspin{to{transform:rotate(360deg)}}

/* v1.118.89 — debug latency readout (?debug=1 only; hidden by default). */
#debug-ms{position:absolute;top:16px;left:16px;z-index:60;display:none;white-space:pre;
  font-family:"SFMono-Regular",ui-monospace,Menlo,monospace;font-size:22px;line-height:1.35;
  color:#8affc0;background:rgba(6,3,24,.82);border:1px solid rgba(138,255,192,.35);
  border-radius:8px;padding:10px 14px;pointer-events:none;text-transform:none;letter-spacing:0}
#debug-ms.show{display:block}

/* ===== v1.118.90 — the felt-tap element (#cards-base, top:130 bottom:130) spanned
   nearly the whole viewport and covered the docked bottom bar, so taps on the
   table/menu/power icons hit cards-base (= bet) instead. Shrink it to the felt
   band; lift the bottom bar above it. ===== */
body.mobile .cards-base { top:310px; bottom:310px; }   /* 310..770 = the felt band */
body.mobile .bottom     { z-index:40; }                 /* above cards-base/felt */

/* v1.118.90b — the static bottom bar kept pointer-events:none from the old
   collapse rule (body.mobile:not(.bottom-open) .bottom), so every tap on the
   table/menu/power icons fell through to the felt (= bet). Re-enable clicks. */
body.mobile .bottom { pointer-events:auto !important; }

/* v1.118.92 — Take Winnings docked INTO the BIG/SMALL rail during a double-up:
   flows as a normal flex child (rail gap evenly spaces all three, identical on
   desktop + mobile). Overrides the old absolute positioning + mobile offsets. */
.mg-collect.mg-collect--rail {
  position:static !important; top:auto !important; right:auto !important;
  left:auto !important; bottom:auto !important; width:100% !important; margin:0 !important;
}