/* ════════════════════════════════════════════════════════════════════════
   EYES DOWN — a bingo hall at midnight: plum velvet, brass and neon.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#150726;
  --bg2:#260f43;
  --ink:#f6f0ff;
  --dim:#a893c4;
  --gold:#ffd166;
  --gold2:#ffb020;
  --pink:#ff3d81;
  --cyan:#2ee6d6;
  --green:#4ade80;
  --red:#ff4d5e;
  --line:rgba(255,255,255,.10);
  --panel:rgba(255,255,255,.055);
  --shake:1;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #3d1660 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, #4a0f3d 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  overflow:hidden;
  overscroll-behavior:none;
  font-variant-numeric:tabular-nums;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
b,strong{font-weight:800}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--cyan)}

/* ── screens ───────────────────────────────────────────────────────────── */
.screen{
  position:fixed;inset:0;
  display:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.on{display:flex;flex-direction:column}

/* ══ THEATRE LAYERS ══════════════════════════════════════════════════════ */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60}
#flash{position:fixed;inset:0;pointer-events:none;z-index:55;opacity:0;background:transparent;mix-blend-mode:screen}
#floaters,#toasts{position:fixed;inset:0;pointer-events:none;z-index:70}

.floater{
  position:absolute;transform:translate(-50%,-50%);
  font-weight:900;font-size:1.05rem;letter-spacing:.04em;white-space:nowrap;
  animation:rise 1.3s cubic-bezier(.2,.8,.3,1) forwards;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.floater.snap{color:var(--gold);font-size:1.35rem;text-shadow:0 0 18px var(--gold2)}
.floater.combo{color:var(--cyan)}
@keyframes rise{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  18%{opacity:1;transform:translate(-50%,-70%) scale(1.25)}
  40%{transform:translate(-50%,-95%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(.92)}
}

#toasts{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:26vh;gap:.4rem}
.toast{
  background:rgba(10,4,18,.92);border:1px solid var(--line);
  padding:.55rem 1rem;border-radius:999px;
  font-weight:800;font-size:.82rem;letter-spacing:.08em;
  animation:toast 1.7s ease forwards;backdrop-filter:blur(8px);
}
@keyframes toast{0%{opacity:0;transform:translateY(10px) scale(.9)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}

body.shaking{animation:shk .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shk{
  10%,90%{transform:translate3d(calc(var(--shake) * -2px),0,0)}
  20%,80%{transform:translate3d(calc(var(--shake) * 4px),0,0)}
  30%,50%,70%{transform:translate3d(calc(var(--shake) * -7px),0,0)}
  40%,60%{transform:translate3d(calc(var(--shake) * 7px),0,0)}
}

/* ══ LOBBY ═══════════════════════════════════════════════════════════════ */
#lobby{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#lobby>*{flex:none}

.lobbyhead{padding:1.6rem 1.1rem .4rem;text-align:center}
.logo{
  margin:0;font-size:clamp(2.6rem,13vw,3.6rem);line-height:.86;
  font-weight:900;letter-spacing:-.03em;
}
.logo i{
  display:block;font-style:normal;font-size:.42em;letter-spacing:.44em;
  color:var(--gold);text-indent:.44em;font-weight:800;
  text-shadow:0 0 22px rgba(255,209,102,.55);
}
.logo b{
  display:block;
  background:linear-gradient(180deg,#fff 10%,var(--gold) 48%,var(--gold2) 74%,#b76b00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 18px rgba(255,176,32,.4));
}
.tagline{margin:.55rem 0 1.1rem;color:var(--dim);font-size:.8rem;letter-spacing:.02em}

.bankrow{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.bank,.jp{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:.7rem .5rem;display:flex;flex-direction:column;gap:.15rem;
}
.bank span,.jp span{font-size:.56rem;letter-spacing:.14em;color:var(--dim);font-weight:800}
.bank b{font-size:1.7rem;font-weight:900;color:var(--green)}
.jp{border-color:rgba(255,209,102,.3);background:linear-gradient(180deg,rgba(255,209,102,.14),rgba(255,209,102,.03))}
.jp b{font-size:1.7rem;font-weight:900;color:var(--gold);animation:jpglow 2.4s ease-in-out infinite}
@keyframes jpglow{50%{text-shadow:0 0 22px rgba(255,209,102,.85)}}

.sect{
  margin:1.5rem 1.1rem .6rem;font-size:.62rem;letter-spacing:.2em;
  color:var(--dim);font-weight:800;
}

.resume{
  display:none;margin:.9rem 1.1rem 0;padding:.85rem 1rem;width:calc(100% - 2.2rem);
  background:linear-gradient(100deg,rgba(46,230,214,.2),rgba(46,230,214,.06));
  border:1px solid rgba(46,230,214,.45);border-radius:14px;text-align:left;
  animation:pulseSoft 2s ease-in-out infinite;
}
.resume.on{display:block}
.rtitle{display:block;font-weight:900;font-size:.9rem;letter-spacing:.04em;color:var(--cyan)}
.rsub{display:block;font-size:.74rem;color:var(--dim);margin-top:.15rem}
@keyframes pulseSoft{50%{box-shadow:0 0 0 6px rgba(46,230,214,.07)}}

.broke{display:none;margin:.9rem 1.1rem 0;padding:1rem;background:rgba(255,77,94,.1);
  border:1px solid rgba(255,77,94,.4);border-radius:14px;text-align:center}
.broke.on{display:block}
.broke p{margin:0 0 .7rem;font-size:.85rem;color:#ffc9ce}
#topup{background:var(--red);padding:.7rem 1.2rem;border-radius:999px;font-weight:900;letter-spacing:.06em;font-size:.82rem}

.modes{display:flex;flex-direction:column;gap:.55rem;padding:0 1.1rem}
.mode{
  text-align:left;padding:.85rem .95rem;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;
  transition:transform .12s,border-color .18s,background .18s;
}
.mode:active{transform:scale(.985)}
.mode.sel{
  border-color:var(--gold);
  background:linear-gradient(100deg,rgba(255,209,102,.18),rgba(255,209,102,.04));
  box-shadow:0 0 0 1px rgba(255,209,102,.35),0 8px 30px -12px rgba(255,176,32,.6);
}
.mname{font-weight:900;font-size:1.15rem;letter-spacing:-.01em}
.mtag{
  grid-column:2;grid-row:1;align-self:center;
  font-size:.55rem;letter-spacing:.16em;font-weight:900;color:var(--bg);
  background:var(--gold);padding:.22rem .5rem;border-radius:999px;
}
.mode:not(.sel) .mtag{background:rgba(255,255,255,.15);color:var(--dim)}
.mblurb{grid-column:1/-1;font-size:.75rem;color:var(--dim);line-height:1.35}
.mgrid{grid-column:1/-1;font-size:.62rem;letter-spacing:.1em;color:rgba(255,255,255,.35);font-weight:700;margin-top:.2rem}

.botrow{display:flex;align-items:center;gap:.7rem;padding:0 1.1rem;flex-wrap:wrap}
.botrow label{font-size:.6rem;letter-spacing:.16em;color:var(--dim);font-weight:800}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{
  width:38px;height:38px;border-radius:12px;font-weight:900;font-size:1rem;
  background:var(--panel);border:1px solid var(--line);
}
.chip.sel{background:var(--pink);border-color:var(--pink);box-shadow:0 6px 22px -8px var(--pink)}
.hintline{margin:.6rem 1.1rem 0;font-size:.72rem;color:var(--dim)}

.toggles{display:flex;flex-direction:column;gap:.4rem;padding:0 1.1rem}
.tg{
  display:grid;grid-template-columns:1fr 46px;align-items:center;gap:0 .8rem;
  padding:.7rem .9rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-align:left;
}
.tg b{font-size:.88rem;font-weight:700}
.tg span{grid-column:1;font-size:.7rem;color:var(--dim);line-height:1.3}
.tg i{
  grid-column:2;grid-row:1/3;width:46px;height:27px;border-radius:999px;
  background:rgba(255,255,255,.13);position:relative;transition:background .2s;
}
.tg i::after{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .2s cubic-bezier(.3,1.5,.5,1);
}
.tg.on i{background:var(--green)}
.tg.on i::after{transform:translateX(19px)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:0 1.1rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.55rem .3rem;text-align:center}
.stat span{display:block;font-size:.48rem;letter-spacing:.1em;color:var(--dim);font-weight:800;margin-bottom:.2rem}
.stat b{font-size:.95rem;font-weight:900}

.ledger{margin:.7rem 1.1rem 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ledrow{display:flex;justify-content:space-between;padding:.45rem .7rem;font-size:.76rem;border-bottom:1px solid rgba(255,255,255,.05)}
.ledrow:last-child{border-bottom:0}
.ledn{color:var(--dim)}
.ledrow.in .leda{color:var(--green);font-weight:800}
.ledrow.out .leda{color:#ff8f9b;font-weight:800}
.ledempty{padding:.7rem;font-size:.76rem;color:var(--dim);text-align:center}

.ghost{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:.75rem 1.2rem;font-weight:800;letter-spacing:.08em;font-size:.75rem}
.ghost.wide{display:block;margin:1.2rem 1.1rem 0;width:calc(100% - 2.2rem)}
.smallprint{margin:1rem 1.1rem 1rem;font-size:.66rem;line-height:1.5;color:rgba(255,255,255,.34)}

.playbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(12,3,22,.85) 40%,rgba(12,3,22,.97));
}
.play{
  width:100%;height:62px;border-radius:18px;
  background:linear-gradient(180deg,#ffe08a,var(--gold2) 55%,#e07d00);
  color:#2c1400;font-weight:900;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  box-shadow:0 10px 34px -10px rgba(255,176,32,.85),inset 0 -3px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .1s;
}
.play:active{transform:translateY(2px) scale(.99)}
.play:disabled{filter:grayscale(.85) brightness(.6);box-shadow:none}
.pmain{font-size:1.15rem;letter-spacing:.06em}
.pcost{background:rgba(0,0,0,.25);padding:.2rem .6rem;border-radius:999px;font-size:.95rem}

/* ══ TABLE ═══════════════════════════════════════════════════════════════ */
#table{gap:0;overflow:hidden}

.thead{
  display:flex;align-items:center;gap:.6rem;padding:.35rem .6rem;
  border-bottom:1px solid var(--line);flex:none;
}
.icon{width:38px;height:38px;font-size:1.6rem;line-height:1;font-weight:300;opacity:.75}
.tmid{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.tmid b{font-size:.78rem;letter-spacing:.14em;font-weight:900}
.tmid span{font-size:.62rem;color:var(--dim);font-weight:700}
.tbal{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;min-width:58px}
.tbal span{font-size:.48rem;letter-spacing:.1em;color:var(--dim);font-weight:800}
.tbal b{font-size:.95rem;color:var(--green);font-weight:900}

.stagewrap{position:relative;flex:0 0 auto;height:21dvh;min-height:126px;max-height:27dvh}
.stagewrap.churning{animation:churn .09s linear infinite}
@keyframes churn{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(1px,1px)}}
#stage{width:100%;height:100%;display:block}
/* The countdown lives in the corner, not on the ball — white digits on a white
   number disc are no countdown at all. */
.clock{
  position:absolute;right:.5rem;top:.4rem;min-width:2.1rem;text-align:center;
  font-size:1rem;font-weight:900;color:var(--gold);
  background:rgba(10,4,20,.55);border:1px solid var(--line);border-radius:999px;
  padding:.1rem .4rem;pointer-events:none;
}
.clock:empty{opacity:0}
.clock.urgent{color:#fff;background:var(--red);border-color:var(--red);animation:tickPulse .5s ease-in-out infinite}
@keyframes tickPulse{50%{transform:scale(1.3)}}

.patternbox{
  display:none;position:absolute;left:.55rem;bottom:.3rem;
  align-items:center;gap:.4rem;
  background:rgba(10,4,20,.6);border:1px solid var(--line);border-radius:10px;padding:.3rem .45rem;
}
.patternbox.on{display:flex}
.plabel{font-size:.44rem;letter-spacing:.1em;color:var(--dim);font-weight:800;line-height:1.5}
.plabel b{font-size:.6rem;color:var(--gold);letter-spacing:.04em}
.pmini{display:grid;grid-template-columns:repeat(5,6px);gap:1px}
.pmini i{width:6px;height:6px;border-radius:1px;background:rgba(255,255,255,.12)}
.pmini i.p1{background:var(--gold);box-shadow:0 0 4px rgba(255,209,102,.8)}

.callbox{flex:none;text-align:center;padding:.1rem .6rem 0;min-height:1.9rem;opacity:0;transition:opacity .25s}
.callbox.on{opacity:1}
#callnick{
  font-size:clamp(.9rem,4.4vw,1.15rem);font-weight:900;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--gold),#fff 50%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:swipe 1.4s ease-out;
}
@keyframes swipe{from{opacity:0;transform:scale(.8) translateY(6px)}to{opacity:1;transform:none}}

.hint{flex:none;text-align:center;height:1.1rem;font-size:.6rem;letter-spacing:.16em;font-weight:900}
.hint.hot{color:var(--gold);animation:blink .7s steps(2,end) infinite}
.hint.cold{color:rgba(255,255,255,.28)}
@keyframes blink{50%{opacity:.35}}

.callsrow{flex:none;display:flex;align-items:center;gap:.4rem;padding:.25rem .6rem}
.calls{flex:1;display:flex;gap:.28rem;justify-content:flex-end;overflow:hidden}
.callchip{
  width:26px;height:26px;flex:none;border-radius:8px;
  display:grid;place-items:center;font-size:.72rem;font-weight:900;
  background:hsla(var(--h),75%,45%,.85);color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35);
}
.callchip.fresh{animation:chipIn .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes chipIn{from{transform:scale(0) rotate(-90deg);opacity:0}}
.left{font-size:.52rem;letter-spacing:.1em;color:var(--dim);font-weight:800;flex:none}

.stagebar{flex:none;padding:.25rem .6rem;display:flex;flex-direction:column;gap:.15rem}
.sb1,.sb2{display:flex;justify-content:space-between;align-items:baseline;gap:.45rem}
#t-stage{font-size:.72rem;font-weight:900;letter-spacing:.1em;color:var(--gold)}
#t-togo{font-style:normal;font-size:.66rem;font-weight:900;letter-spacing:.08em;color:var(--dim)}
.prz{font-size:.62rem;letter-spacing:.1em;color:var(--dim);font-weight:800}
.prz b{font-size:1rem;color:var(--green);margin-left:.25rem}
.house{flex:1;font-size:.6rem;letter-spacing:.08em;color:var(--gold);font-weight:800;opacity:.8}
.combo{
  font-size:.95rem;font-weight:900;color:var(--dim);
  padding:.05rem .45rem;border-radius:999px;border:1px solid var(--line);
}
.combo.hot{color:var(--cyan);border-color:rgba(46,230,214,.5);background:rgba(46,230,214,.12)}
.combo.max{color:#2c1400;background:var(--gold);border-color:var(--gold);animation:jpglow 1s ease-in-out infinite}
.combo.bump{animation:bump .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.4)}}

.jpbar{
  flex:none;display:none;margin:.15rem .6rem;padding:.22rem .5rem;border-radius:8px;
  font-size:.55rem;letter-spacing:.12em;font-weight:900;text-align:center;color:#2c1400;
  background:linear-gradient(90deg,var(--gold2),var(--gold),var(--gold2));
  background-size:200% 100%;animation:slide 2s linear infinite;
}
.jpbar.on{display:block}
@keyframes slide{to{background-position:200% 0}}

.bots{flex:none;display:flex;gap:.3rem;padding:.25rem .6rem;overflow-x:auto;scrollbar-width:none}
.bots::-webkit-scrollbar{display:none}
.bot{
  flex:1 1 0;min-width:0;max-width:96px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.28rem .3rem;display:grid;grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;gap:0 .25rem;align-items:center;
  transition:border-color .2s,background .2s;
}
.bface{grid-row:1/3;grid-column:1;font-size:1.15rem;line-height:1}
.bname{grid-row:1;grid-column:2;font-size:.5rem;font-weight:900;letter-spacing:.06em;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.bnum{grid-row:1;grid-column:3;font-size:.78rem;font-weight:900;color:var(--ink)}
.btogo{grid-column:2/4;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.btogo i{display:block;height:100%;background:var(--cyan);transition:width .4s ease}
.bot.near{border-color:var(--red);background:rgba(255,77,94,.16);animation:nearPulse .8s ease-in-out infinite}
.bot.near .bnum{color:var(--red)}
.bot.near .btogo i{background:var(--red)}
.bot.ready{border-color:var(--gold);background:rgba(255,209,102,.2)}
@keyframes nearPulse{50%{box-shadow:0 0 0 3px rgba(255,77,94,.16)}}

/* ── the card ──────────────────────────────────────────────────────────── */
/* Cell width and height are measured in JS (UI.sizeCard) and handed over as
   --cw/--ch, so the ticket always fills the space it is given and the column
   letters line up with it exactly — no aspect-ratio guesswork. */
.card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:.3rem .55rem;gap:.2rem}
.cardhead{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));gap:.25rem;flex:none}
.hl{
  text-align:center;font-size:.72rem;font-weight:900;letter-spacing:.1em;
  color:hsl(var(--h),85%,68%);
}
.grid{
  display:grid;flex:none;
  grid-template-columns:repeat(var(--cols),var(--cw));
  grid-auto-rows:var(--ch);gap:.25rem;
}
.cell{
  position:relative;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.13);
  display:grid;place-items:center;
  transition:transform .1s,background .2s,border-color .2s;
  overflow:hidden;
}
.cell.blank{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.05);border-style:dashed}
.num{
  font-size:clamp(.72rem,3.6vw,1.5rem);font-weight:900;line-height:1;
  z-index:2;transition:color .2s,transform .2s;
}
.m-b75 .num,.m-b80 .num,.m-b30 .num{font-size:clamp(1rem,6.5vw,2rem)}
/* A daub is a round blot of ink, so it is sized off the shorter side of the
   cell — 90-ball cells are taller than they are wide and inset:6% would make
   an egg of it. */
.daub{
  position:absolute;top:50%;left:50%;border-radius:50%;
  width:calc(min(var(--cw),var(--ch)) * .86);
  height:calc(min(var(--cw),var(--ch)) * .86);
  background:radial-gradient(circle at 34% 30%,hsl(var(--h),95%,68%),hsl(var(--h),85%,42%) 70%,hsl(var(--h),80%,30%));
  transform:translate(-50%,-50%) scale(0);opacity:0;
  transition:transform .22s cubic-bezier(.2,1.7,.4,1),opacity .18s;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),0 0 14px hsla(var(--h),90%,55%,.6);
}
.cell.on .daub{transform:translate(-50%,-50%) scale(1);opacity:1}
.cell.on .num{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cell.free .daub{background:radial-gradient(circle at 34% 30%,#fff,var(--gold) 60%,var(--gold2))}
.cell.free .num{color:#5a3800}
.cell:active{transform:scale(.93)}
.cell.pop{animation:cellPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes cellPop{30%{transform:scale(1.22)}}
.cell.nope{animation:nope .34s}
@keyframes nope{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-3deg)}40%{transform:translateX(6px) rotate(3deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.cell.hot{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(255,209,102,.35),rgba(255,176,32,.12));
  animation:hotPulse .62s ease-in-out infinite;z-index:3;
}
.cell.hot .num{color:#fff}
@keyframes hotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,.75),0 0 18px rgba(255,209,102,.5);transform:scale(1)}
  50%{box-shadow:0 0 0 7px rgba(255,209,102,0),0 0 26px rgba(255,209,102,.8);transform:scale(1.08)}
}
.card.seeking .cell:not(.hot):not(.on){opacity:.62}

.cell.winner{
  animation:winner .8s ease-in-out infinite alternate;
  border-color:#fff;z-index:4;
}
@keyframes winner{
  from{box-shadow:0 0 0 2px var(--gold),0 0 20px var(--gold)}
  to{box-shadow:0 0 0 3px #fff,0 0 40px var(--gold),0 0 60px var(--pink)}
}

/* ── actions ───────────────────────────────────────────────────────────── */
.actions{
  flex:none;display:flex;gap:.5rem;align-items:stretch;
  padding:.4rem .6rem calc(.5rem + env(safe-area-inset-bottom));
}
.next{
  flex:0 0 88px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  font-size:.66rem;font-weight:900;letter-spacing:.06em;color:var(--dim);
  opacity:.35;transition:opacity .2s,background .2s,color .2s,transform .1s;
}
.next.on{opacity:1;color:var(--ink)}
.next.ready{background:rgba(46,230,214,.22);border-color:var(--cyan);color:var(--cyan);animation:bump .5s}
.next:active{transform:scale(.96)}

.bingo{
  flex:1;position:relative;height:72px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#ff7aa8,var(--pink) 45%,#c60d4c);
  box-shadow:0 10px 30px -10px rgba(255,61,129,.8),inset 0 -4px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.42);
  transition:transform .1s,filter .2s;
}
.bingo:active{transform:translateY(3px) scale(.985)}
.bingo:disabled{filter:grayscale(.7) brightness(.55)}
.blabel{
  position:relative;z-index:2;display:block;
  font-size:1.75rem;font-weight:900;letter-spacing:.09em;
  text-shadow:0 2px 0 rgba(0,0,0,.28),0 0 22px rgba(255,255,255,.35);
}
.bshine{
  position:absolute;top:0;bottom:0;width:45%;left:-60%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:shine 3.4s ease-in-out infinite;
}
@keyframes shine{0%,62%{left:-60%}100%{left:130%}}
.bingo.locked{background:linear-gradient(180deg,#6b6b7a,#3a3a46);box-shadow:none}

/* the moment the card is complete: everything goes off at once */
.bingo.live{
  background:linear-gradient(180deg,#fff3b0,var(--gold) 40%,#ff8a00 75%,var(--pink));
  color:#3a1a00;
  animation:nuclear .42s cubic-bezier(.36,.07,.19,.97) infinite;
}
.bingo.live .blabel{
  color:#3a1a00;font-size:1.95rem;
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.bingo.live .bshine{animation-duration:1.1s;width:60%}
/* The halo is cast with box-shadow rather than an overlay element — an overlay
   sits on the button face and mutes the very gradient it is meant to sell. */
@keyframes nuclear{
  0%,100%{transform:scale(1);
    box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 30px 4px var(--gold),0 0 70px 10px rgba(255,61,129,.7),
               inset 0 -4px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.6)}
  50%{transform:scale(1.04);
    box-shadow:0 0 0 4px rgba(255,255,255,1),0 0 55px 10px var(--gold),0 0 120px 24px rgba(255,61,129,.9),
               inset 0 -4px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.6)}
}

/* whole-screen states */
body.onone #table::after,body.winnable #table::after,body.urgent #table::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:15;
}
body.onone #table::after{
  box-shadow:inset 0 0 90px rgba(255,77,94,.45);
  animation:vign 1.05s ease-in-out infinite;
}
body.winnable #table::after{
  box-shadow:inset 0 0 110px rgba(255,209,102,.6);
  animation:vign .55s ease-in-out infinite;
}
body.urgent #table::after{
  box-shadow:inset 0 0 70px rgba(255,77,94,.55);
  animation:vign .34s steps(2,end) infinite;
}
@keyframes vign{50%{opacity:.25}}

/* ══ BANNER ══════════════════════════════════════════════════════════════ */
.banner{
  position:fixed;left:50%;top:30%;transform:translate(-50%,-50%) scale(.7);
  z-index:58;pointer-events:none;text-align:center;opacity:0;
  transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1);
  background:rgba(8,2,16,.86);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:16px;padding:.8rem 1.4rem;
  min-width:min(84vw,340px);
}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner b{display:block;font-size:1.5rem;font-weight:900;letter-spacing:.06em}
.banner span{display:block;font-size:.76rem;color:var(--dim);margin-top:.15rem}
.banner.go b{color:var(--gold)}
.banner.bad{border-color:rgba(255,77,94,.6)}
.banner.bad b{color:var(--red)}

/* ══ OVERLAYS ════════════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;z-index:65;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(6,1,14,.82);backdrop-filter:blur(14px);
}
.overlay.show{display:flex;animation:fadeIn .22s}
@keyframes fadeIn{from{opacity:0}}
.obox{
  width:min(92vw,400px);text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:22px;padding:1.5rem 1.2rem;
  animation:boxIn .45s cubic-bezier(.2,1.5,.4,1);
  max-height:88dvh;overflow-y:auto;
}
@keyframes boxIn{from{transform:scale(.75) translateY(20px);opacity:0}}
.obox h2{margin:0 0 .6rem;font-size:1.3rem;letter-spacing:.06em;font-weight:900}

.overlay.win .obox{border-color:var(--gold);box-shadow:0 0 60px -10px rgba(255,176,32,.75)}
.wintag{
  font-size:clamp(1.6rem,9vw,2.4rem);font-weight:900;letter-spacing:.05em;
  background:linear-gradient(180deg,#fff,var(--gold) 55%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:bump .6s cubic-bezier(.2,1.6,.4,1);
}
.jptag{
  display:inline-block;margin:.4rem 0;padding:.25rem .8rem;border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--gold));color:#3a1a00;
  font-size:.66rem;font-weight:900;letter-spacing:.12em;
}
.winamt{
  font-size:clamp(3rem,17vw,4.4rem);font-weight:900;line-height:1;margin:.5rem 0;
  color:var(--green);text-shadow:0 0 40px rgba(74,222,128,.55);
}
.winamt.done{animation:bump .45s cubic-bezier(.2,1.8,.4,1)}
.osub{margin:.2rem 0 1.1rem;font-size:.78rem;color:var(--dim)}
.ok{
  width:100%;height:54px;border-radius:16px;font-size:1rem;font-weight:900;letter-spacing:.08em;
  background:linear-gradient(180deg,#ffe08a,var(--gold2));color:#2c1400;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
.ok:disabled{filter:grayscale(.8) brightness(.6)}

.overlay.bot .obox{border-color:rgba(140,160,255,.5)}
.oface{font-size:3rem;line-height:1;animation:bump .5s}
.oquip{margin:.2rem 0 .8rem;font-size:.82rem;color:var(--dim);font-style:italic}
.ominicard{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2px;max-width:280px;margin:0 auto}
.ominicard i{
  aspect-ratio:1;display:grid;place-items:center;border-radius:3px;
  font-size:.6rem;font-style:normal;font-weight:800;
  background:rgba(255,255,255,.08);color:var(--dim);
}
.ominicard i.mb{background:transparent}
.ominicard i.mm{background:rgba(255,255,255,.22);color:#fff}
.ominicard i.mw{background:var(--gold);color:#2c1400;animation:winner .5s ease-in-out infinite alternate}

.rlist{margin:.6rem 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rrow{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;padding:.5rem .7rem;
  font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
.rrow:last-child{border-bottom:0}
.rrow span{color:var(--dim);text-align:left}
.rrow b{font-weight:900}
.rrow em{font-style:normal;color:var(--dim);font-weight:800;min-width:52px;text-align:right}
.rrow.me{background:rgba(255,209,102,.14)}
.rrow.me b{color:var(--gold)}
.rrow.me em{color:var(--green)}
.rtot{display:flex;justify-content:space-between;align-items:baseline;padding:.5rem .2rem}
.rtot span{font-size:.6rem;letter-spacing:.14em;color:var(--dim);font-weight:800}
.rtot b{font-size:1.9rem;font-weight:900}
.rtot.up b{color:var(--green)}
.rtot.down b{color:#ff8f9b}
.rbal{font-size:.7rem;letter-spacing:.12em;color:var(--dim);font-weight:800;margin-bottom:1rem}
.rbtns{display:flex;flex-direction:column;gap:.5rem}

/* ══ RULES SHEET ═════════════════════════════════════════════════════════ */
.sheet{
  position:fixed;inset:0;z-index:80;background:var(--bg);
  transform:translateY(100%);transition:transform .38s cubic-bezier(.3,.9,.3,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sheet.show{transform:none}
.sheetinner{padding:calc(1.4rem + env(safe-area-inset-top)) 1.2rem calc(2.5rem + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.sheetclose{position:sticky;top:0;float:right;width:38px;height:38px;font-size:1.1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:50%}
.sheetinner h2{font-size:1.5rem;letter-spacing:.08em;margin:0 0 1rem;color:var(--gold)}
.sheetinner h3{font-size:.66rem;letter-spacing:.18em;color:var(--cyan);margin:1.6rem 0 .5rem;font-weight:800}
.sheetinner p,.sheetinner li{font-size:.86rem;line-height:1.6;color:#d9cfe8;margin:.5rem 0}
.sheetinner ul{padding-left:1.1rem;margin:.5rem 0}
.sheetinner b{color:#fff}
.sheetfoot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.7rem;color:rgba(255,255,255,.35)}

/* ── narrow phones ─────────────────────────────────────────────────────── */
@media (max-height:700px){
  .stagewrap{height:19dvh;min-height:112px}
  .callbox{min-height:2rem}
  .bingo{height:64px}
  .blabel{font-size:1.55rem}
  .bot{min-width:54px}
}
@media (min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .card{padding:.5rem 1rem}
  #table{max-width:720px;margin:0 auto;left:0;right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
}