/* ══════════════════════════════════════════════════════════════════
   SCRATCH FEVER
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0b0713;
  --bg2:#150c22;
  --ink:#f6f1ff;
  --dim:#a397bd;
  --gold:#f5c542;
  --gold-2:#b8860b;
  --neon:#00e5ff;
  --hot:#ff2d78;
  --green:#37e39a;
  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.055);
  --r:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --display:"Arial Black","Arial Bold",Impact,"Haettenschweiler",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:radial-gradient(120% 80% at 50% -10%,#241338 0%,var(--bg2) 45%,var(--bg) 100%);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}

/* ── ambient aurora ─────────────────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(60px);opacity:.5}
.aurora i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite}
.aurora i:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,#6b21a8,transparent 65%)}
.aurora i:nth-child(2){width:50vmax;height:50vmax;right:-18vmax;top:10vmax;background:radial-gradient(circle,#0e7490,transparent 65%);animation-delay:-7s}
.aurora i:nth-child(3){width:55vmax;height:55vmax;left:10vmax;bottom:-30vmax;background:radial-gradient(circle,#9d174d,transparent 65%);animation-delay:-14s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6vmax,-4vmax,0) scale(1.12)}66%{transform:translate3d(-5vmax,5vmax,0) scale(.94)}}

.app{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 8px) 12px calc(var(--safe-b) + 8px);max-width:560px;margin:0 auto}

/* ── top bar ────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:14px;padding:8px 10px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -14px #000}
.bal{display:flex;flex-direction:column;min-width:96px}
.bal .lbl{font-size:9px;letter-spacing:.18em;color:var(--dim);font-weight:700}
.bal .amt{font-family:var(--display);font-size:22px;line-height:1.05;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff8dc,var(--gold) 55%,#a97b0a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 22px rgba(245,197,66,.25);transition:transform .16s}
.bal .amt.bump{transform:scale(1.14)}
.bal .amt.down{background:linear-gradient(180deg,#ffd9e4,#ff6f9a 55%,#a41240);-webkit-background-clip:text;background-clip:text}

.lvl{flex:1;min-width:0}
.lvl-row{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.12em;
  color:var(--dim);font-weight:700;margin-bottom:4px}
#lvlNum{color:var(--neon)}
.xpbar{height:6px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.xpbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--neon),#7c3aed 70%,var(--hot));
  box-shadow:0 0 12px rgba(0,229,255,.6);transition:width .5s cubic-bezier(.2,.9,.2,1)}

.tools{display:flex;gap:6px}
.icon-btn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);
  background:var(--glass);color:var(--ink);font-size:15px;cursor:pointer;
  display:grid;place-items:center;transition:transform .12s,background .2s}
.icon-btn:active{transform:scale(.9);background:rgba(255,255,255,.14)}
.icon-btn.off{opacity:.4}

/* ── screens ────────────────────────────────────────────────────── */
.screen{flex:1;min-height:0;display:flex;flex-direction:column;animation:fadein .35s both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[hidden]{display:none !important}

/* ── wordmark ───────────────────────────────────────────────────── */
.wordmark{font-family:var(--display);text-align:center;margin:14px 0 2px;
  font-size:clamp(26px,8.5vw,40px);line-height:.92;letter-spacing:-.03em}
.wordmark span{display:block;color:#fff;text-shadow:0 0 24px rgba(255,255,255,.25)}
.wordmark em{display:block;font-style:normal;
  background:linear-gradient(92deg,var(--hot),var(--gold) 45%,var(--neon));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,45,120,.35))}
.sub{text-align:center;color:var(--dim);font-size:12px;margin:6px 0 12px;padding:0 12px}

/* ── card rack ──────────────────────────────────────────────────── */
.rack{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;gap:11px;
  grid-auto-rows:max-content;align-content:safe center;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.rack::-webkit-scrollbar{width:0}

.rackcard{position:relative;border-radius:var(--r);padding:13px 14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);cursor:pointer;isolation:isolate;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  box-shadow:0 14px 34px -18px #000,inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .14s cubic-bezier(.2,.9,.2,1),filter .2s}
.rackcard::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--tint)}
.rackcard::after{content:"";position:absolute;inset:-40% -10%;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 48%,transparent 58%);
  transform:translateX(-70%);animation:sweep 5.5s ease-in-out infinite}
@keyframes sweep{0%,62%{transform:translateX(-80%)}88%,100%{transform:translateX(80%)}}
.rackcard:active{transform:scale(.975)}
.rackcard .rc-name{font-family:var(--display);font-size:19px;letter-spacing:-.02em;line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.45)}
.rackcard .rc-tag{font-size:10px;letter-spacing:.14em;font-weight:700;opacity:.85;margin-top:5px}
.rackcard .rc-top{font-size:11px;font-weight:700;margin-top:7px;opacity:.95}
.rackcard .rc-top b{font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.rc-stake{display:grid;place-items:center;min-width:62px;height:62px;border-radius:14px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.28);
  font-family:var(--display);font-size:23px;letter-spacing:-.03em;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.4)}
.rc-stake small{display:block;font-family:var(--body);font-size:8px;letter-spacing:.16em;opacity:.7;font-weight:700}
.rackcard.locked{filter:grayscale(.85) brightness(.55);cursor:not-allowed}
.rackcard.locked::after{animation:none}
.rackcard .lockbadge{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;letter-spacing:.1em;background:rgba(6,3,12,.55);backdrop-filter:blur(1px)}
.rackcard.poor{opacity:.45;cursor:not-allowed}

/* card tints */
.t-ruby   {--tint:linear-gradient(135deg,#ff2d78,#7a0b3a 65%,#2b0417)}
.t-sky    {--tint:linear-gradient(135deg,#00e5ff,#0b5b8f 60%,#04182b)}
.t-gold   {--tint:linear-gradient(135deg,#ffd75e,#c07f05 55%,#3a2101)}
.t-void   {--tint:linear-gradient(135deg,#a855f7,#3b0f6b 58%,#0d0320)}
.t-emerald{--tint:linear-gradient(135deg,#37e39a,#0a6b4a 58%,#03231a)}
.t-ink    {--tint:linear-gradient(135deg,#7c8bff,#26307a 58%,#0a0d24)}
.t-flame  {--tint:linear-gradient(135deg,#ff8a3d,#c2321a 55%,#3d0b06)}
.t-teal   {--tint:linear-gradient(135deg,#22d3ee,#0f5f7a 58%,#04202b)}
.t-royal  {--tint:linear-gradient(135deg,#c084fc,#5b21b6 55%,#1a0533)}
.t-crimson{--tint:linear-gradient(135deg,#ff3b5c,#8b0d2a 52%,#2a0209)}

.mtag{display:inline-block;margin-top:6px;font-size:8.5px;font-weight:800;letter-spacing:.11em;
  padding:3px 7px;border-radius:99px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.3)}
.mtag.always{background:linear-gradient(90deg,#ff2d78,#f5c542);color:#2a1200;border:none}

/* gold needs dark ink to stay legible */
.rackcard.t-gold,.scard.t-gold .sc-head{color:#3a2100}
.rackcard.t-gold .rc-name,.scard.t-gold .sc-title{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.rackcard.t-gold .rc-stake{background:rgba(58,33,0,.72);color:#ffeab4;border-color:rgba(255,255,255,.35)}

.broke{text-align:center;padding:10px 0 4px}
.broke p{color:var(--dim);font-size:12px;margin:0 0 8px}

.ticker{height:20px;overflow:hidden;text-align:center;font-size:10.5px;color:var(--dim);
  letter-spacing:.06em;flex:0 0 auto}
.ticker b{color:var(--gold)}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{font-family:var(--display);letter-spacing:.02em;font-size:13px;padding:11px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;
  transition:transform .12s,filter .2s;backdrop-filter:blur(8px)}
.btn:active{transform:scale(.95)}
.btn-gold{border:none;color:#2a1a00;
  background:linear-gradient(180deg,#fff0b0,var(--gold) 45%,#c68f0d);
  box-shadow:0 8px 22px -8px rgba(245,197,66,.75),inset 0 1px 0 rgba(255,255,255,.7)}
.btn-ghost{color:var(--dim)}
.btn.big{font-size:17px;padding:15px 34px;border-radius:14px}
.btn.danger{color:#ff7597}
.btn[disabled]{opacity:.35;pointer-events:none}

/* ── table / card stage ─────────────────────────────────────────── */
.table{justify-content:center;gap:12px;padding-bottom:4px}
.card-stage{display:grid;place-items:center;flex:1;min-height:0;perspective:1000px}
.hint{text-align:center;font-size:11px;letter-spacing:.14em;color:var(--dim);font-weight:700;height:14px}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ── THE SCRATCHCARD ────────────────────────────────────────────── */
.scard{position:relative;width:min(93vw,380px);border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 60px -26px #000,0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);
  animation:dealin .5s cubic-bezier(.2,.9,.25,1) both;transform-style:preserve-3d}
@keyframes dealin{from{opacity:0;transform:translateY(40px) rotateX(24deg) scale(.9)}to{opacity:1;transform:none}}
.scard::before{content:"";position:absolute;inset:0;background:var(--tint);z-index:0}
.scard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 7px),
    radial-gradient(80% 55% at 50% 0%,rgba(255,255,255,.18),transparent 70%)}
.scard.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.sc-head{position:relative;z-index:2;padding:11px 13px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sc-title{font-family:var(--display);font-size:20px;line-height:.95;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.sc-rule{font-size:9px;letter-spacing:.13em;font-weight:800;opacity:.88;margin-top:5px}
.sc-price{flex:0 0 auto;text-align:right}
.sc-price b{font-family:var(--display);font-size:17px;display:block;line-height:1}
.sc-price small{font-size:8px;letter-spacing:.13em;opacity:.75;font-weight:700}

.sc-topline{position:relative;z-index:2;margin:0 11px 8px;padding:6px 10px;border-radius:9px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;font-size:9.5px;letter-spacing:.1em;font-weight:800}
.sc-topline b{font-family:var(--display);font-size:14px;letter-spacing:-.01em;color:var(--gold)}

/* scratch zone */
.sc-zone{position:relative;z-index:2;margin:0 11px 11px;border-radius:13px;overflow:hidden;
  background:linear-gradient(160deg,#12101c,#0a0812);
  border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 3px 16px rgba(0,0,0,.75)}
.sc-face{padding:10px;display:grid;gap:7px}
.sc-canvas{position:absolute;inset:0;z-index:3;touch-action:none;cursor:crosshair;
  transition:opacity .55s ease}
.sc-canvas.gone{opacity:0;pointer-events:none}

/* grids per game */
.g-3x3{grid-template-columns:repeat(3,1fr)}
.g-3x2{grid-template-columns:repeat(3,1fr)}
.g-4x3{grid-template-columns:repeat(4,1fr);gap:6px}
.g-5{grid-template-columns:repeat(5,1fr);gap:6px}
.g-5x3{grid-template-columns:repeat(5,1fr);gap:5px}
.g-6{grid-template-columns:repeat(6,1fr);gap:5px}
.g-5x3 .cell .cash{font-size:clamp(10px,3.1vw,13px)}
.g-4x3 .cell .cash{font-size:clamp(11px,3.6vw,15px)}

/* printed (un-scratched) section of a card */
.sc-printed{position:relative;z-index:2;margin:0 11px 8px;padding:8px 9px;border-radius:11px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14)}

/* cashword */
.cw-grid{display:grid;gap:3px}
.cw-row{display:flex;gap:3px;justify-content:center;padding:1px 0;border-radius:6px;transition:background .3s}
.cw-t{flex:0 0 auto;width:clamp(17px,5vw,24px);height:clamp(17px,5vw,24px);border-radius:4px;
  display:grid;place-items:center;font-size:clamp(9px,2.8vw,12px);font-weight:800;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.28);
  transition:background .2s,color .2s,border-color .2s,transform .25s}
.cw-t.lit{background:rgba(255,255,255,.92);color:#160d24;border-color:#fff;transform:scale(1.04)}
.cw-row.done{background:rgba(245,197,66,.16)}
.cw-row.done .cw-t{background:linear-gradient(180deg,#fff0b0,var(--gold));color:#2a1a00;
  border-color:var(--gold);box-shadow:0 0 10px rgba(245,197,66,.55)}
.cw-count{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.1);font-size:8.5px;letter-spacing:.16em;font-weight:800;color:var(--dim)}
.cw-count b{font-family:var(--display);font-size:16px;color:var(--gold)}
.cell.letter{aspect-ratio:1}
.cell.letter .num{font-size:clamp(14px,4.6vw,20px)}

/* lucky dip */
.legend{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.lg-h{grid-column:1/-1;font-size:8.5px;letter-spacing:.16em;font-weight:800;color:var(--dim);margin-bottom:1px}
.lg-r{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px;border-radius:7px;
  background:rgba(0,0,0,.3);font-size:8.5px;font-weight:800;color:var(--dim);letter-spacing:.04em}
.lg-r span::after{content:" ●"}
.lg-r b{color:var(--gold);font-family:var(--display);font-size:11px;letter-spacing:-.02em}
.balls{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;
  padding:7px 6px;border-radius:10px;background:rgba(0,0,0,.35);border:1px dashed rgba(255,255,255,.16)}
.balls .cell.ball{aspect-ratio:1;padding:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff,#c9cfdb 46%,#79808f);
  border-color:rgba(255,255,255,.55)}
.balls .cell.ball .num{color:#161022;text-shadow:none;font-size:clamp(11px,3.5vw,16px)}
.balls .cell.ball.hit{background:radial-gradient(circle at 34% 28%,#fffdf2,#ffd75e 46%,#a97b0a);
  box-shadow:0 0 0 2px var(--gold),0 0 20px rgba(245,197,66,.6)}
.balls .cell.ball.hit .num{color:#2a1a00}

/* high roller target */
.target-box{grid-column:1/-1;display:grid;place-items:center;padding:2px}
.target-box .cell{width:100%;background:linear-gradient(165deg,#3a1030,#180618);border-color:rgba(255,45,120,.45)}
.cell.big-target .num{font-size:clamp(28px,10vw,44px);
  background:linear-gradient(180deg,#fff,#ff8ab0 60%,#ff2d78);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── the bonus multiplier spot ───────────────────────────────────── */
.mult-panel{grid-column:1/-1;position:relative;display:grid;place-items:center;padding:10px 8px;
  border-radius:12px;overflow:hidden;opacity:.35;transform:scale(.94);
  background:linear-gradient(135deg,#3d0a2a,#1a0518);border:1px dashed rgba(255,45,120,.55);
  transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.mult-panel::after{content:"";position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,transparent,rgba(255,45,120,.35),transparent 40%);
  animation:spin 4s linear infinite;opacity:0}
.mult-panel.on{opacity:1;transform:none;border-style:solid;
  box-shadow:0 0 0 1px rgba(255,45,120,.6),0 0 26px rgba(255,45,120,.45)}
.mult-panel.on::after{opacity:1}
.mult-panel>*{position:relative;z-index:1}
.mp-l{font-size:8.5px;letter-spacing:.2em;font-weight:800;color:#ffa3c4}
.mp-v{font-family:var(--display);font-size:clamp(30px,11vw,46px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,#ffd75e 45%,#ff2d78);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 14px rgba(255,45,120,.6))}
.mp-s{font-size:8px;letter-spacing:.16em;font-weight:800;color:#ffa3c4;opacity:.8}
.scard.flash{animation:cardflash .7s}
@keyframes cardflash{0%{filter:brightness(1)}12%{filter:brightness(2.1) saturate(1.4)}100%{filter:brightness(1)}}
.sc-result em{font-style:normal;color:#a4132d}
.sc-result.win em{color:#7a0b24}

.sec-lbl{grid-column:1/-1;font-size:8.5px;letter-spacing:.18em;font-weight:800;color:var(--dim);
  margin:2px 0 -2px;display:flex;align-items:center;gap:7px}
.sec-lbl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* cells */
.cell{position:relative;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(165deg,#241d33,#151021);border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);opacity:.35;transform:scale(.9);
  transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.cell.on{opacity:1;transform:none}
.cell .glyph{font-size:clamp(18px,6.4vw,27px);line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.cell .val{position:absolute;bottom:3px;font-size:8.5px;font-weight:800;color:var(--dim);letter-spacing:.02em}
.cell .num{font-family:var(--display);font-size:clamp(17px,5.6vw,23px);letter-spacing:-.02em}
.cell.wide{aspect-ratio:auto;padding:11px 3px 18px}
.cell.plain{padding:14px 4px;background:linear-gradient(165deg,#33264a,#1c1430)}
.cell.plain .num{font-size:clamp(20px,6.5vw,26px)}
.cell.hit{border-color:var(--gold);background:linear-gradient(165deg,#4a3a08,#2a1f02);
  box-shadow:0 0 0 1px var(--gold),0 0 22px rgba(245,197,66,.55),inset 0 1px 0 rgba(255,255,255,.2);
  animation:pop .5s cubic-bezier(.3,1.7,.5,1)}
.cell.hit .num,.cell.hit .val{color:var(--gold)}
@keyframes pop{0%{transform:scale(.75)}55%{transform:scale(1.13)}100%{transform:scale(1)}}
.cell.dud{filter:saturate(.35) brightness(.8)}
.cell.gem{background:linear-gradient(165deg,#0b3b4a,#06202b);border-color:rgba(0,229,255,.35)}

.cash{font-family:var(--display);font-size:clamp(13px,4.4vw,18px);letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff6d0,var(--gold) 60%,#a97b0a);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* banker strip */
.banker{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:7px;
  padding:7px;border-radius:10px;background:rgba(0,0,0,.35);border:1px dashed rgba(255,255,255,.16)}
.banker .cell{aspect-ratio:auto;padding:11px 4px}

/* vault panel */
.vault{grid-column:1/-1;display:grid;place-items:center;padding:11px 8px;border-radius:11px;
  background:linear-gradient(165deg,#2c1157,#12061f);border:1px solid rgba(168,85,247,.4);opacity:.35;
  transform:scale(.94);transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.vault.on{opacity:1;transform:none}
.vault .vl{font-size:8.5px;letter-spacing:.2em;font-weight:800;color:#c4a3ff}
.vault .vv{font-family:var(--display);font-size:clamp(22px,8vw,34px);letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff6d0,var(--gold) 60%,#a97b0a);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* diamond counter */
.dcount{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--dim)}
.dcount i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);
  background:rgba(255,255,255,.13);transition:background .3s,box-shadow .3s}
.dcount i.lit{background:var(--neon);box-shadow:0 0 10px var(--neon)}

/* result banner */
.sc-result{position:relative;z-index:2;margin:0 11px 11px;padding:9px;border-radius:11px;text-align:center;
  font-family:var(--display);font-size:15px;letter-spacing:.02em;
  background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--dim);
  animation:pop .4s cubic-bezier(.3,1.7,.5,1)}
.sc-result.win{color:#2a1a00;border:none;
  background:linear-gradient(180deg,#fff0b0,var(--gold) 45%,#c68f0d);
  box-shadow:0 0 30px rgba(245,197,66,.5)}

/* ── fx canvas ──────────────────────────────────────────────────── */
#fx{position:fixed;inset:0;z-index:75;pointer-events:none}

/* ── win overlay ────────────────────────────────────────────────── */
.winlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(60,20,0,.72),rgba(4,2,8,.94));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fadein .3s both}
.rays{position:absolute;width:150vmax;height:150vmax;opacity:.34;
  background:repeating-conic-gradient(from 0deg,rgba(245,197,66,.85) 0deg 7deg,transparent 7deg 20deg);
  animation:spin 26s linear infinite;
  mask-image:radial-gradient(circle,#000 4%,rgba(0,0,0,.55) 18%,transparent 34%);
  -webkit-mask-image:radial-gradient(circle,#000 4%,rgba(0,0,0,.55) 18%,transparent 34%)}
@keyframes spin{to{transform:rotate(360deg)}}
.win-inner{position:relative;text-align:center;padding:24px}
.win-kicker{font-family:var(--display);font-size:15px;letter-spacing:.32em;color:var(--gold);
  animation:pop .5s both}
.win-amt{font-family:var(--display);font-size:clamp(50px,19vw,96px);line-height:1;letter-spacing:-.04em;margin:6px 0 4px;
  background:linear-gradient(180deg,#fffbe8,#ffd75e 40%,#c68f0d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(245,197,66,.6));animation:thump .6s cubic-bezier(.3,1.7,.5,1) both}
@keyframes thump{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.win-sub{color:#e8dcff;font-size:12px;letter-spacing:.14em;font-weight:700;margin-bottom:20px;min-height:16px}

/* ── modal ──────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;
  background:rgba(4,2,8,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadein .25s both}
.sheet{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1c1230,#100a1c);border:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:12px 12px calc(var(--safe-b) + 12px);
  animation:up .32s cubic-bezier(.2,.9,.25,1) both}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font-weight:800;font-size:11px;letter-spacing:.1em;cursor:pointer}
.tab.is-on{background:var(--glass);color:var(--ink);border-color:rgba(255,255,255,.24)}
.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:12.5px}
.sheet-body::-webkit-scrollbar{width:0}
.sheet-foot{display:flex;gap:8px;justify-content:space-between;padding-top:10px}

.srow{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.srow span{color:var(--dim)}
.srow b{font-family:var(--display);letter-spacing:-.01em;font-size:14px}
.sh{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--gold);margin:14px 0 6px}
.otable{width:100%;border-collapse:collapse;font-size:11.5px}
.otable th{text-align:left;color:var(--dim);font-size:9px;letter-spacing:.13em;padding:5px 4px;font-weight:800}
.otable td{padding:5px 4px;border-top:1px solid rgba(255,255,255,.06)}
.otable td:last-child,.otable th:last-child{text-align:right;color:var(--dim)}
.otable td:first-child{font-weight:800;color:var(--gold)}
.note{color:var(--dim);font-size:11px;line-height:1.55;padding:6px 4px}
.otable.mult td:first-child{color:var(--hot)}
.ladder{display:grid;gap:5px;padding:4px 0}
.lrow{display:grid;grid-template-columns:30px 1fr 20px;align-items:center;gap:9px;
  padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);opacity:.5}
.lrow.got{opacity:1;border-color:rgba(245,197,66,.28)}
.lrow.now{border-color:var(--neon);box-shadow:0 0 18px -6px var(--neon);opacity:1}
.lnum{font-family:var(--display);font-size:17px;text-align:center;color:var(--dim);letter-spacing:-.02em}
.lrow.got .lnum{color:var(--gold)}
.lrow.now .lnum{color:var(--neon)}
.lrew{font-size:11.5px;font-weight:700}
.lrew small{opacity:.6;font-weight:700}
.lxp{font-size:9px;letter-spacing:.1em;color:var(--dim);font-weight:700;margin-top:2px}
.ltick{text-align:center;color:var(--green);font-weight:900}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:4px}
.badge{border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;background:var(--glass);opacity:.32}
.badge.got{opacity:1;border-color:rgba(245,197,66,.5);box-shadow:0 0 18px -6px rgba(245,197,66,.6)}
.badge .bi{font-size:22px}
.badge .bn{font-size:9px;font-weight:800;letter-spacing:.06em;margin-top:5px}
.badge .bd{font-size:8.5px;color:var(--dim);margin-top:3px;line-height:1.35}

/* ── toasts ─────────────────────────────────────────────────────── */
.toasts{position:fixed;left:0;right:0;bottom:calc(var(--safe-b) + 108px);z-index:90;
  display:flex;flex-direction:column-reverse;align-items:center;gap:6px;pointer-events:none}
.toast{background:linear-gradient(180deg,rgba(40,26,66,.97),rgba(22,14,38,.97));
  border:1px solid rgba(245,197,66,.45);border-radius:12px;padding:8px 14px;font-size:11.5px;font-weight:700;
  box-shadow:0 14px 34px -14px #000;animation:toast 3.4s cubic-bezier(.2,.9,.2,1) both;max-width:88vw;text-align:center}
.toast b{color:var(--gold)}
@keyframes toast{0%{opacity:0;transform:translateY(16px) scale(.9)}8%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.06s !important}
}
@media (max-height:660px){
  .wordmark{font-size:26px;margin:6px 0 0}
  .sub{margin:4px 0 8px}
  .rackcard{padding:10px 12px}
  .rc-stake{min-width:54px;height:54px;font-size:19px}
}