/* ===== Cheese Rush — v3 hybrid layout (3D head + DOM control bar) ===== */
:root { --purple:#a855f7; --cyan:#22d3ee; --gold:#fbbf24; --pink:#f472b6; --muted:#a5a0c8; --fd:'Orbitron',sans-serif; --fu:'Rajdhani',sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  /* portrait bands (fractions of viewport height) */
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:#050410; color:#f5f3ff; font-family:var(--fu); overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
button { font-family:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
.hidden { display:none !important; }
svg { width:1em; height:1em; fill:currentColor; }

/* ---------- scene background (DOM, cross-fades per feature) ---------- */
#scene-bg { position:fixed; inset:0; z-index:0; background:#050410; }
#scene-bg .bg { position:absolute; inset:0; background:center/cover no-repeat; opacity:0; transition:opacity 1.1s ease; transform:scale(1.04); }
#scene-bg .bg[data-bg=base] { background-image:url(/static/bg/base.webp); opacity:1; }
#scene-bg .bg[data-bg=fs] { background-image:url(/static/bg/fs.webp); }
#scene-bg .bg[data-bg=hw] { background-image:url(/static/bg/hw.webp); }
body.feature-fs #scene-bg .bg[data-bg=base], body.feature-hw #scene-bg .bg[data-bg=base] { opacity:0; }
body.feature-fs #scene-bg .bg[data-bg=fs] { opacity:1; }
body.feature-hw #scene-bg .bg[data-bg=hw] { opacity:1; }
#scene-bg .vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 38%, rgba(0,0,0,0) 35%, rgba(3,2,10,.72) 100%); }

/* ---------- 3D layer ---------- */
/* Full-screen in both stages. The DOM only overlays HUD / cards / sheets; the deck, lever and buttons are 3D. */
#machine-host { position:fixed; inset:0; z-index:1; }
#machine-host canvas { display:block; width:100%; height:100%; }
/* ---------- top HUD ---------- */
#hud-top { position:fixed; top:calc(var(--sat) + 8px); left:10px; right:10px; z-index:20; display:flex; align-items:center; gap:8px; }
.hud-btn { width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 50% 30%, #3b2a6e, #16102e 65%, #0b0820); border:1.5px solid rgba(240,180,60,.5); color:#f3e8ff; font-size:18px; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 6px rgba(0,0,0,.5); transition:transform .12s; }
.hud-btn:active { transform:scale(.9); } .hud-btn.off .wave { opacity:.25; } .hud-btn b { font-family:var(--fd); font-size:11px; letter-spacing:1px; } .hud-btn img { width:30px; height:30px; object-fit:contain; }
.hud-right { margin-left:auto; display:flex; gap:8px; }
#live-ticker { flex:1; min-width:0; height:30px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:999px; background:rgba(10,8,24,.62); border:1px solid rgba(168,85,247,.35); backdrop-filter:blur(8px); font-size:12.5px; font-weight:600; letter-spacing:.2px; color:#d9d4ff; overflow:hidden; opacity:0; transition:opacity .4s; }
#live-ticker.show { opacity:1; } #live-ticker .dot { width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e; flex:none; animation:blink 1.4s infinite; }
#live-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #live-text b { color:var(--gold); font-family:var(--fd); font-size:12px; }
body[data-stage=attract] #live-ticker { opacity:0 !important; }

#feature-hud { position:fixed; top:calc(var(--sat) + 60px); left:10px; display:flex; flex-direction:column; gap:6px; z-index:20; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-family:var(--fd); font-size:10.5px; letter-spacing:1px; background:rgba(124,58,237,.42); border:1px solid var(--purple); box-shadow:0 0 18px rgba(168,85,247,.5); backdrop-filter:blur(10px); }
.chip b { font-size:14px; color:#fff; } .chip.gold { background:rgba(245,158,11,.3); border-color:var(--gold); box-shadow:0 0 18px rgba(251,191,36,.55); } .chip.gold b { color:var(--gold); text-shadow:0 0 10px rgba(251,191,36,.9); }
.chip.pulse { animation:pulse .5s ease-out; } @keyframes pulse { 40% { transform:scale(1.18);} }
#combo-hud { position:fixed; right:12px; top:calc(var(--sat) + 60px); z-index:20; display:flex; flex-direction:column; align-items:center; padding:8px 14px; border-radius:16px; background:linear-gradient(180deg,rgba(217,70,239,.35),rgba(109,40,217,.35)); border:1px solid #e879f9; box-shadow:0 0 24px rgba(217,70,239,.6); backdrop-filter:blur(10px); pointer-events:none; }
#combo-hud .combo-label { font-family:var(--fd); font-size:10px; letter-spacing:2px; color:#f5d0fe; } #combo-hud b { font-family:var(--fd); font-size:30px; line-height:1; color:#fff; text-shadow:0 0 14px #e879f9, 0 0 30px #a855f7; }
#combo-hud.pop b { animation:comboPop .45s cubic-bezier(.2,1.6,.4,1); } @keyframes comboPop { 0%{transform:scale(.4) rotate(-10deg)} 100%{transform:scale(1) rotate(0)} }

/* ---------- mascot ---------- */
#mascot { position:fixed; z-index:6; pointer-events:none; left:2vw; top:auto; bottom:calc(var(--sab) + 6px); width:clamp(70px, 19vw, 110px); transition:all .9s cubic-bezier(.65,0,.35,1); filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
#mascot img { transform:none; }
#mascot img { width:100%; display:block; animation:breathe 3.2s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes breathe { 50% { transform:translateY(-3px) scaleY(1.015); } }
#mascot.cheer img { animation:cheer .55s cubic-bezier(.2,1.5,.4,1) 2; } @keyframes cheer { 40% { transform:translateY(-14px) scale(1.06); } }
#mascot.ecstatic img { animation:ecst .5s cubic-bezier(.2,1.6,.4,1) infinite alternate; } @keyframes ecst { to { transform:translateY(-18px) rotate(-4deg) scale(1.08); } }
#mascot.point img { animation:pointA .6s ease-out; } @keyframes pointA { 30% { transform:translateX(10px) rotate(3deg); } }
#mascot-bubble { position:absolute; left:80%; bottom:70%; border-radius:14px 14px 14px 4px; max-width:170px; padding:7px 11px; border-radius:14px 14px 4px 14px; background:#fff; color:#241a4a; font-weight:700; font-size:13px; line-height:1.25; opacity:0; transform:scale(.6); transition:all .25s cubic-bezier(.2,1.4,.4,1); white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.4); }
#mascot-bubble.show { opacity:1; transform:scale(1); }
body[data-stage=attract][data-form=portrait] #mascot { left:2vw; bottom:calc(var(--sab) + 96px); width:clamp(78px, 22vw, 120px); z-index:14; }  /* peeks from the left of the base, under the CTA layer */  /* stands beside the base, not on the console */
body[data-stage=attract][data-form=wide] #mascot { bottom:calc(var(--sab) + 60px); width:clamp(140px, 42vw, 240px); }
body[data-form=landscape] #mascot { right:auto; left:6px; bottom:calc(var(--sab) + 4px); width:clamp(72px, 12vw, 104px); }
body[data-form=landscape][data-stage=attract] #mascot { left:calc(var(--win-left, 30vw) * 0.5 - 50px); width:clamp(100px, 16vw, 140px); bottom:calc(var(--sab) + 40px); }

/* ---------- ATTRACT overlay ---------- */
#attract { position:fixed; inset:0; z-index:15; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:calc(var(--sab) + 26px); pointer-events:none; transition:opacity .5s; }
body[data-stage=play] #attract { opacity:0; pointer-events:none; }
.attract-top { position:absolute; top:calc(var(--sat) + 8px); left:0; right:0; display:flex; justify-content:center; }  /* sits in the HUD row between the logo and the EN/sound buttons */
.win-badge { display:flex; flex-direction:row; align-items:baseline; gap:8px; padding:6px 16px; border-radius:14px; background:linear-gradient(180deg,rgba(60,35,110,.75),rgba(20,12,44,.85)); border:1px solid rgba(251,191,36,.6); box-shadow:0 0 24px rgba(251,191,36,.3), inset 0 1px 0 rgba(255,255,255,.15); backdrop-filter:blur(8px); font-family:var(--fd); }
.win-badge span { font-size:9px; letter-spacing:3px; color:#e9d5ff; } .win-badge b { font-size:20px; line-height:1; background:linear-gradient(180deg,#fff7d6,var(--gold) 50%,#b45309); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
#btn-play { pointer-events:auto; position:relative; padding:16px 48px; white-space:nowrap; border-radius:999px; font-family:var(--fd); font-weight:900; font-size:clamp(18px, 5.4vw, 24px); letter-spacing:4px; color:#1a1200; background:linear-gradient(180deg,#fff2c2 0%,#fbbf24 40%,#f59e0b 70%,#fde68a 100%); box-shadow:0 0 0 3px rgba(251,191,36,.35), 0 0 40px rgba(251,191,36,.55), 0 14px 30px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.7), inset 0 -4px 8px rgba(120,53,15,.5); animation:ctaPulse 1.6s ease-in-out infinite; }
#btn-play i { position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(251,191,36,.6); animation:ring 1.6s ease-out infinite; pointer-events:none; }
@keyframes ctaPulse { 50% { transform:scale(1.045); } } @keyframes ring { to { transform:scale(1.25); opacity:0; } }
#btn-play:active { transform:scale(.95); }
.attract-foot { margin:14px 0 0; font-size:11px; letter-spacing:1.5px; color:var(--muted); }

/* ---------- wide (pad / desktop, attract): the cabinet is height-limited so both flanks are free — the CTA column lives LEFT of the
   machine above the mascot, leaving the deck buttons fully visible; toast moves top-right. ---------- */
body[data-form=wide] #attract { left:0; right:auto; width:calc(var(--win-left, 32vw) - 8px); align-items:center; justify-content:center; padding-bottom:0; }
body[data-form=wide] #attract .attract-top { position:static; margin-bottom:22px; }
body[data-form=wide] #attract .win-badge { padding:10px 26px; } body[data-form=wide] #attract .win-badge b { font-size:34px; } body[data-form=wide] #attract .win-badge span { font-size:11px; }
body[data-form=wide] #btn-play { padding:20px 48px; font-size:22px; }
body[data-form=wide] .attract-foot { font-size:12px; margin-top:16px; text-align:center; max-width:260px; white-space:normal; line-height:1.5; }
body[data-form=wide][data-stage=attract] #mascot { left:auto; right:calc(100vw - var(--win-left, 32vw) + 40px); bottom:calc(var(--sab) + 10px); width:clamp(120px, 12vw, 170px); }
body[data-form=wide][data-stage=attract] #attract { padding-bottom:clamp(120px, 12vw, 170px); }

/* ---------- Screen-UI cards (play stage) ---------- */
/* Docked at --cards-y (set by JS from the 3D projection of the frame's bottom lip) so they sit exactly between window and deck. */
#controls { position:fixed; left:0; right:0; top:var(--cards-y, 62%); z-index:10; padding:0 10px; transform:translateY(-50%); opacity:0; pointer-events:none; transition:opacity .5s .5s; }
body[data-stage=play] #controls { opacity:1; pointer-events:auto; }
body.locked .pill { pointer-events:none; filter:saturate(.6) brightness(.8); } body.locked #ctl-turbo { pointer-events:auto; filter:none; }
.feature-row { display:grid; grid-template-columns:1fr 1fr 44px; gap:6px; }
.pill { position:relative; height:var(--cards-h, 52px); border-radius:16px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:5px 12px; text-align:left; background:url(/static/ui/btn/pill_purple.webp) center/100% 100% no-repeat; transition:transform .1s, filter .2s; overflow:hidden; }
.pill::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); opacity:0; }
.pill:active { transform:scale(.96); } .pill:active::after { animation:sheen .5s ease-out; } @keyframes sheen { 0% { left:-60%; opacity:1 } 100% { left:120%; opacity:0 } }
.pill-title { font-family:var(--fd); font-size:9.5px; white-space:nowrap; letter-spacing:1.2px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.6); grid-row:1; }
.pill small { grid-row:2; grid-column:1 / span 2; font-size:9.5px; color:rgba(255,255,255,.72); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill.gold { background-image:url(/static/ui/btn/pill_gold.webp); } .pill.gold .pill-title, .pill.gold small { color:#2a1600; text-shadow:0 1px 0 rgba(255,240,200,.5); }
.pill.gold b { grid-row:1; grid-column:2; font-family:var(--fd); font-size:13px; color:#2a1600; }
.pill.toggle .sw { grid-row:1; grid-column:2; width:36px; height:19px; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); position:relative; transition:background .2s; } .pill.toggle .sw i { position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#c4b5fd; transition:all .2s; }
.pill.toggle.on { background-image:url(/static/ui/btn/pill_cyan.webp); } .pill.toggle.on .pill-title, .pill.toggle.on small { color:#04262b; text-shadow:none; } .pill.toggle.on .sw { background:#0e7490; } .pill.toggle.on .sw i { left:19px; background:#fff; box-shadow:0 0 8px #fff; }
.pill.sq { grid-template-columns:1fr; grid-template-rows:auto auto; justify-items:center; padding:4px 0; border-radius:50%; width:52px; background-image:url(/static/ui/btn/cap_purple.webp); color:#e9e4ff; font-size:20px; text-align:center; }
.pill.sq small { grid-column:1; font-family:var(--fd); font-size:6.5px; letter-spacing:.8px; color:rgba(255,255,255,.85); } .pill.sq.on { background-image:url(/static/ui/btn/cap_magenta.webp); color:#2a0a30; } .pill.sq.on small { color:#2a0a30; }
body.turbo #ctl-turbo { background-image:url(/static/ui/btn/cap_magenta.webp); color:#2a0a30; } body.turbo #ctl-turbo small { color:#2a0a30; }

/* ---------- landscape phone (play): window left, side console right. Cards fill the column between the window and the lever, above the console. ---------- */
@media (orientation: landscape) and (min-aspect-ratio: 1.15/1) {
  body[data-form=landscape] #controls { left:calc(var(--win-right, 52vw) + 10px); right:calc(100vw - var(--lever-x, 86vw) + 6px); top:auto; bottom:calc(100vh - var(--deck-top, 52vh) + 10px); transform:none; padding:0; }
  body[data-form=landscape] .feature-row { grid-template-columns:1fr 44px; grid-auto-rows:44px; gap:6px; }
  body[data-form=landscape] #ctl-buy { grid-column:1 / span 2; }
  body[data-form=landscape] .pill { height:44px; }
  body[data-form=landscape] .pill.sq { width:44px; height:44px; font-size:16px; }
  body[data-form=landscape] #mascot-bubble { left:60%; bottom:88%; max-width:150px; font-size:12px; }
  #feature-hud { top:calc(var(--sat) + 56px); } #combo-hud { right:auto; left:12px; top:calc(var(--sat) + 140px); }
  body[data-form=landscape][data-stage=play] #live-ticker { position:fixed; left:calc(var(--win-left, 10vw) + 6px); right:auto; width:calc(var(--win-right, 50vw) - var(--win-left, 10vw) - 12px); max-width:none; top:auto; bottom:calc(var(--sab) + 6px); height:26px; font-size:11px; }
}
/* ---------- wide (pad / desktop, play): cards stack in a column LEFT of the window, bottom-aligned to the window's lower lip; mascot below them; key hints bottom-right under the lever ---------- */
body[data-form=wide][data-stage=play] #controls { left:auto; right:calc(100vw - var(--win-left, 30vw) + 22px); width:min(270px, calc(var(--win-left, 30vw) - 44px)); top:auto; bottom:calc(100vh - var(--win-bottom, 74vh) + 4px); transform:none; padding:0; }
body[data-form=wide] .feature-row { grid-template-columns:1fr; grid-auto-rows:54px; gap:8px; }
body[data-form=wide] #ctl-buy { grid-column:1; }
body[data-form=wide] .pill { height:54px; padding:5px 14px; } body[data-form=wide] .pill-title { font-size:11px; } body[data-form=wide] .pill small { font-size:10.5px; } body[data-form=wide] .pill.gold b { font-size:15px; }
body[data-form=wide] .pill.sq { width:auto; border-radius:16px; grid-template-columns:auto 1fr; grid-template-rows:auto; justify-items:start; column-gap:10px; padding:5px 14px; background-image:url(/static/ui/btn/pill_purple.webp); font-size:18px; }
body[data-form=wide] .pill.sq small { grid-column:2; font-size:11px; letter-spacing:1.2px; }
body[data-form=wide] .pill.sq.on, body.turbo[data-form=wide] #ctl-turbo { background-image:url(/static/ui/btn/pill_cyan.webp); color:#04262b; } body[data-form=wide] .pill.sq.on small, body.turbo[data-form=wide] #ctl-turbo small { color:#04262b; }
body[data-form=wide] #key-hint { display:flex; position:fixed; right:16px; bottom:calc(var(--sab) + 14px); margin:0; justify-content:flex-end; }
#key-hint { display:none; margin-top:12px; gap:5px; justify-content:flex-start; flex-wrap:wrap; align-items:center; font-family:var(--fd); font-size:9px; letter-spacing:1.5px; color:rgba(233,213,255,.6); white-space:nowrap; }
#key-hint kbd { font:inherit; padding:2px 6px; border-radius:5px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; }
body[data-form=wide][data-stage=play] #mascot { left:2vw; bottom:calc(var(--sab) + 8px); width:clamp(100px, 11vw, 160px); }
body[data-form=wide][data-stage=play] #mascot-bubble { font-size:14px; max-width:220px; }
body[data-form=wide] #toast { left:auto; right:110px; top:calc(var(--sat) + 14px); transform:translateY(-10px); max-width:420px; } body[data-form=wide] #toast.show { transform:translateY(0); }
body[data-form=wide][data-stage=play] #toast { top:calc(var(--sat) + 14px); bottom:auto; }
body[data-form=wide][data-stage=play] #live-ticker { position:fixed; left:auto; right:16px; bottom:calc(var(--sab) + 40px); top:auto; width:min(380px, calc(100vw - var(--win-right, 70vw) - 32px)); max-width:none; height:28px; font-size:11.5px; }


/* ---------- play footer (portrait): marketing line in the leftover band under the console ---------- */
#play-foot { position:fixed; left:0; right:0; bottom:calc(var(--sab) + 12px); z-index:6; display:flex; justify-content:center; align-items:center; gap:8px; font-family:var(--fd); font-size:9px; letter-spacing:1.5px; white-space:nowrap; color:rgba(233,213,255,.75); pointer-events:none; opacity:0; transition:opacity .5s .6s; padding-left:clamp(70px, 19vw, 110px); }
#play-foot .wb b { color:var(--gold); } #play-foot .sep { opacity:.4; }
body[data-stage=play][data-form=portrait] #play-foot { opacity:1; }
body[data-form=portrait][data-stage=play] #live-ticker { position:fixed; left:clamp(70px, 19vw, 110px); right:12px; top:auto; bottom:calc(var(--sab) + 36px); }

/* ---------- overlays ---------- */
.overlay { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(4,3,12,.72); backdrop-filter:blur(6px); animation:fadeIn .25s; perspective:900px; }
@keyframes fadeIn { from { opacity:0; } }
.rays { position:absolute; inset:-50%; background:repeating-conic-gradient(from 0deg, rgba(251,191,36,.18) 0 6deg, transparent 6deg 14deg); animation:rot 18s linear infinite; -webkit-mask:radial-gradient(circle,#000 20%,transparent 70%); mask:radial-gradient(circle,#000 20%,transparent 70%); pointer-events:none; }
.rays.purple { background:repeating-conic-gradient(from 0deg, rgba(168,85,247,.22) 0 6deg, transparent 6deg 14deg); } @keyframes rot { to { transform:rotate(360deg); } }
.coin-rain { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.coin-rain i { position:absolute; top:-12%; width:34px; height:34px; background:url(/static/symbols/coin.png) center/contain no-repeat; animation:fall linear infinite; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
@keyframes fall { to { transform:translateY(125vh) rotate(720deg); } }
.win-card,.feature-card { position:relative; text-align:center; padding:20px; width:min(90vw,400px); aspect-ratio:3/4; max-height:84dvh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:7%; border-radius:26px; overflow:hidden; background:center/cover no-repeat; animation:popIn .55s cubic-bezier(.2,1.5,.4,1); transform-style:preserve-3d; will-change:transform; }
@keyframes popIn { 0% { transform:scale(.3) rotateX(20deg); opacity:0; } 70% { transform:scale(1.06) rotateX(0); } 100% { transform:scale(1); } }
.win-card { background-image:url(/static/ui/kv_big.webp); box-shadow:0 0 0 2px rgba(251,191,36,.55), 0 0 70px rgba(251,191,36,.45), 0 30px 80px rgba(0,0,0,.8); }
.overlay[data-tier=mega] .win-card { background-image:url(/static/ui/kv_mega.webp); box-shadow:0 0 0 2px rgba(244,114,182,.6), 0 0 80px rgba(244,114,182,.5), 0 30px 80px rgba(0,0,0,.8); }
.overlay[data-tier=epic] .win-card { background-image:url(/static/ui/kv_epic.webp); box-shadow:0 0 0 2px rgba(168,85,247,.65), 0 0 90px rgba(168,85,247,.55), 0 30px 80px rgba(0,0,0,.8); }
.overlay[data-tier=legendary] .win-card { background-image:url(/static/ui/kv_legendary.webp); box-shadow:0 0 0 2px rgba(34,211,238,.7), 0 0 100px rgba(34,211,238,.55), 0 30px 80px rgba(0,0,0,.8); }
.overlay[data-tier=max] .win-card { background-image:url(/static/ui/kv_max.webp); box-shadow:0 0 0 3px #fff, 0 0 120px rgba(251,191,36,.8), 0 30px 80px rgba(0,0,0,.8); }
.win-card::before, .feature-card::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.8) 100%); pointer-events:none; }
.win-card > *, .feature-card > * { position:relative; }
.win-title { font-family:var(--fd); font-size:clamp(30px,8.6vw,58px); font-weight:900; letter-spacing:3px; line-height:1; background:linear-gradient(180deg,#fff7d6,var(--gold) 45%,#b45309 75%,#fde68a); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(251,191,36,.9)) drop-shadow(0 5px 0 rgba(120,53,15,.95)); animation:tp 1.2s ease-in-out infinite; }
@keyframes tp { 50% { transform:scale(1.05); } }
.win-amount { margin-top:8px; font-family:var(--fd); font-size:clamp(32px,9.2vw,56px); font-weight:900; color:#fff; text-shadow:0 0 30px rgba(255,255,255,.7),0 0 60px rgba(251,191,36,.6), 0 4px 0 rgba(0,0,0,.7); font-variant-numeric:tabular-nums; }
.win-mult { margin-top:4px; font-family:var(--fd); font-size:20px; color:var(--cyan); font-weight:700; text-shadow:0 0 16px rgba(34,211,238,.9); }
.hint { margin-top:16px; color:rgba(255,255,255,.75); font-size:11px; letter-spacing:2.5px; font-family:var(--fd); animation:blink 1.4s ease-in-out infinite; } @keyframes blink { 50% { opacity:.3; } }
.overlay[data-tier=mega] .win-title { background:linear-gradient(180deg,#fbcfe8,var(--pink) 45%,#9d174d 75%,#fbcfe8); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 24px rgba(244,114,182,.9)) drop-shadow(0 5px 0 rgba(131,24,67,.95)); }
.overlay[data-tier=epic] .win-title { background:linear-gradient(180deg,#ddd6fe,var(--purple) 45%,#5b21b6 75%,#ddd6fe); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 24px rgba(168,85,247,.95)) drop-shadow(0 5px 0 rgba(76,29,149,.95)); }
.overlay[data-tier=legendary] .win-title,.overlay[data-tier=max] .win-title { background:linear-gradient(180deg,#cffafe,var(--cyan) 40%,var(--purple) 70%,var(--gold)); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 30px rgba(34,211,238,1)) drop-shadow(0 5px 0 rgba(14,116,144,.95)); }
.overlay[data-tier=max] .win-title { font-size:clamp(36px,10vw,66px); animation:tp .7s ease-in-out infinite; }
.feature-card { background-image:url(/static/ui/kv_fs.webp); box-shadow:0 0 0 2px rgba(168,85,247,.6), 0 0 70px rgba(168,85,247,.5), 0 30px 80px rgba(0,0,0,.8); }
.feature-card[data-kind=hw] { background-image:url(/static/ui/kv_hw.webp); box-shadow:0 0 0 2px rgba(251,191,36,.6), 0 0 70px rgba(251,191,36,.5), 0 30px 80px rgba(0,0,0,.8); }
.feature-title { font-family:var(--fd); font-size:clamp(28px,7.6vw,50px); font-weight:900; letter-spacing:3px; line-height:1.05; background:linear-gradient(180deg,#fff,var(--purple) 50%,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 20px rgba(168,85,247,.8)) drop-shadow(0 4px 0 rgba(0,0,0,.8)); }
.feature-card[data-kind=hw] .feature-title { background:linear-gradient(180deg,#fff7d6,var(--gold) 50%,#b45309); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 20px rgba(251,191,36,.8)) drop-shadow(0 4px 0 rgba(0,0,0,.8)); }
.feature-sub { margin-top:8px; font-size:16px; font-weight:600; text-shadow:0 2px 6px rgba(0,0,0,.8); }
.neon-btn { margin-top:18px; padding:14px 44px; border-radius:999px; font-family:var(--fd); font-weight:900; letter-spacing:3px; font-size:15px; color:#fff; background:linear-gradient(90deg,#7c3aed,var(--cyan)); box-shadow:0 0 30px rgba(168,85,247,.7),0 0 60px rgba(34,211,238,.3),inset 0 1px 0 rgba(255,255,255,.4); transition:transform .12s; }
.neon-btn.wide { width:100%; margin-top:14px; } .neon-btn:active { transform:scale(.95); }

/* ---------- modal / sheets ---------- */
.modal { position:relative; width:min(94vw,520px); max-height:84dvh; overflow-y:auto; padding:22px 20px; background:rgba(18,16,38,.9); border:1px solid rgba(168,85,247,.4); border-radius:18px; backdrop-filter:blur(18px); animation:popIn .35s cubic-bezier(.2,1.2,.4,1); }
.modal-close { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-size:16px; }
.modal h2 { font-family:var(--fd); font-size:18px; margin:0 0 12px; color:var(--gold); letter-spacing:2px; } .modal h3 { font-family:var(--fd); font-size:12px; margin:18px 0 8px; color:var(--cyan); letter-spacing:2px; }
.modal p { color:var(--muted); font-size:14px; line-height:1.6; margin:6px 0; }
.pay-grid { display:grid; grid-template-columns:56px 1fr 1fr 1fr; gap:6px; align-items:center; font-size:13px; } .pay-grid img { width:48px; height:48px; } .pay-grid .hd { color:var(--muted); font-size:11px; letter-spacing:1px; text-align:center; } .pay-grid .v { text-align:center; font-family:var(--fd); font-weight:700; color:var(--gold); }
.lb-row { display:grid; grid-template-columns:28px 1fr auto; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.3); margin-bottom:6px; font-size:14px; align-items:center; }
.lb-row .rank { font-family:var(--fd); color:var(--muted); font-weight:700; } .lb-row .rank.top { color:var(--gold); } .lb-row .val { font-family:var(--fd); color:var(--cyan); font-weight:700; }
.tabs { display:flex; gap:6px; margin-bottom:12px; } .tab { padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:1px; background:rgba(0,0,0,.3); color:var(--muted); border:1px solid transparent; } .tab.on { color:#fff; border-color:var(--purple); background:rgba(168,85,247,.25); }
#toast { position:fixed; left:50%; top:calc(var(--sat) + 62px); --tb:auto; transform:translateX(-50%) translateY(-10px); z-index:60; padding:9px 18px; border-radius:14px; background:linear-gradient(180deg,rgba(40,28,78,.94),rgba(18,12,40,.96)); border:1px solid rgba(240,180,60,.5); color:#fff; font-weight:600; font-size:13.5px; opacity:0; pointer-events:none; transition:all .25s; box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 18px rgba(168,85,247,.35); backdrop-filter:blur(8px); max-width:92vw; text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
body[data-stage=attract][data-form=portrait] #toast { top:calc(var(--sat) + 60px); bottom:auto; max-width:86vw; font-size:12.5px; padding:7px 14px; }  /* under the HUD row, above the crown */  /* above the CTA, never on the crown */
body[data-stage=play] #toast { top:auto; bottom:calc(100vh - var(--cards-y, 62%) + 34px); }  /* just above the BUY/ANTE cards, never on the mascot */
#loader { position:fixed; inset:0; z-index:100; background:#050410 url(/static/bg/base.webp) center/cover no-repeat; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .5s; }
#loader::before { content:''; position:absolute; inset:0; background:rgba(3,2,10,.6); } #loader > * { position:relative; }
#loader img { width:min(66vw,300px); filter:drop-shadow(0 0 30px rgba(168,85,247,.6)); animation:tp 2s ease-in-out infinite; }
#loader .bar { width:min(60vw,260px); height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; } #loader .bar span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--purple),var(--cyan),var(--gold)); transition:width .3s; }
#loader .txt { color:var(--muted); font-size:12px; letter-spacing:2px; } #loader.done { opacity:0; pointer-events:none; }

.sheet { position:fixed; inset:0; z-index:40; } .sheet-bg { position:absolute; inset:0; background:rgba(3,2,12,.55); backdrop-filter:blur(6px); }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; max-height:84dvh; overflow:auto; padding:10px 16px calc(var(--sab) + 18px); border-radius:26px 26px 0 0; background:linear-gradient(180deg,#171235,#0a0818); border-top:1px solid rgba(168,85,247,.6); box-shadow:0 -10px 60px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.08); animation:sheetUp .38s cubic-bezier(.2,1.2,.3,1); }
.sheet.closing .sheet-panel { animation:sheetDown .25s ease-in forwards; } @keyframes sheetUp { from { transform:translateY(100%) } to { transform:translateY(0) } } @keyframes sheetDown { to { transform:translateY(100%) } }
.sheet-grip { width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:4px auto 12px; }
.sheet-h { font-family:var(--fd); font-size:11px; letter-spacing:3px; color:#a78bfa; margin:12px 4px 8px; }
.mode-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mode-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 6px 10px; border-radius:18px; border:1px solid rgba(168,85,247,.35); background:linear-gradient(180deg,rgba(60,40,120,.45),rgba(20,14,44,.7)); color:#fff; font-family:var(--fd); overflow:hidden; }
.mode-card img { width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.6); transition:transform .25s; }
.mode-card b { display:block; font-size:12px; letter-spacing:1px; } .mode-card span { display:block; font-family:var(--fu); font-size:10.5px; opacity:.7; margin-top:2px; }
.mode-card.on { border-color:var(--gold); background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(120,70,10,.35)); box-shadow:0 0 26px rgba(251,191,36,.45); } .mode-card.on img { transform:scale(1.03); }
.mode-card.on::after { content:'●'; position:absolute; top:10px; right:10px; font-size:10px; color:var(--gold); text-shadow:0 0 8px var(--gold); } .mode-card.soon { opacity:.5; filter:saturate(.4); } .mode-card:active { transform:scale(.96); }
.opt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opt { display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 6px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#fff; font-family:var(--fd); }
.opt b { font-size:10.5px; letter-spacing:1px; } .opt span { font-family:var(--fu); font-size:11px; opacity:.65; } .opt.on { border-color:var(--cyan); background:rgba(34,211,238,.14); } .opt:active { transform:scale(.95); }
.sheet-panel.small { padding-bottom:calc(var(--sab) + 22px); }
#bet-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
#bet-grid button { height:48px; border-radius:12px; font-family:var(--fd); font-weight:700; font-size:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; } #bet-grid button.on { background:rgba(168,85,247,.35); border-color:var(--purple); box-shadow:0 0 16px rgba(168,85,247,.5); } #bet-grid button.max { grid-column:span 5; background:linear-gradient(90deg,rgba(251,191,36,.25),rgba(245,158,11,.15)); border-color:rgba(251,191,36,.5); color:var(--gold); }
.lbl { margin:10px 4px 6px; font-size:12px; color:var(--muted); letter-spacing:1px; font-weight:700; }
.seg { display:flex; gap:6px; } .seg button { flex:1; height:42px; border-radius:10px; font-family:var(--fd); font-weight:700; font-size:13px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; } .seg button.on { background:rgba(34,211,238,.18); border-color:var(--cyan); }
.chk { display:flex; align-items:center; gap:10px; margin:12px 4px 0; font-size:14px; font-weight:600; } .chk input { width:20px; height:20px; accent-color:var(--cyan); }
@media (orientation: landscape) and (min-aspect-ratio: 1.15/1) { .sheet-panel { left:auto; right:0; top:0; bottom:0; width:min(440px,60vw); max-height:none; border-radius:26px 0 0 26px; animation:sheetRight .38s cubic-bezier(.2,1.2,.3,1); } @keyframes sheetRight { from { transform:translateX(100%) } to { transform:translateX(0) } } .sheet.closing .sheet-panel { animation:sheetOut .25s ease-in forwards } @keyframes sheetOut { to { transform:translateX(100%) } } }

/* ---------- classic 3x3 mode: no Ante / Bonus Buy — a mode chip takes their slot so the band under the window stays dressed ---------- */
#mode-chip { display:none; background-image:url(/static/ui/btn/pill_gold.webp); grid-template-columns:1fr; pointer-events:none; }
#mode-chip .pill-title, #mode-chip small { color:#2a1600; text-shadow:0 1px 0 rgba(255,240,200,.5); }
body.mode-classic #ctl-buy, body.mode-classic #ctl-ante { display:none; }
body.mode-classic #mode-chip { display:grid; }
body.mode-classic .feature-row { grid-template-columns:1fr 44px; }
body.mode-classic[data-form=wide] .feature-row { grid-template-columns:1fr; }
body.mode-classic[data-form=landscape] .feature-row { grid-template-columns:1fr 44px; }