/* Luna's Bingo — shared styles for the player and caller screens. "Neon bingo hall at night." */
:root{
  color-scheme:dark;
  --felt:#120E24; --header:#150F2B; --panel:#1D1736; --panel-2:#271F47; --deep:#120E24;
  --line:#2E2650; --line-2:#3A3163;
  --text:#F4EFFF; --muted:#B7AED6; --dim:#8E85B5;
  --gold:#FFC94A; --pink:#FF5FA2; --teal:#35E0C2; --blue:#5AA9FF; --orange:#FF9F5C;
  --amber:var(--gold); --amber-glow:rgba(255,201,74,.45);
  --cream:var(--text); --ink:#120E24; --paper:#FBF6EA;
  --b:#5AA9FF; --i:#FF7DB5; --n:#F4EFFF; --g:#35E0C2; --o:#FF9F5C;
  --good:#35E0C2; --bad:#FF6B7A;
  --dauber:#FF5FA2; --screen:#0E1430; --screen-text:#A9C8FF;
  --display:"Bungee","Arial Black",Impact,sans-serif;
  --body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--felt);color:var(--text);margin:0}
body{font-family:var(--body);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:0 32px}
button,select,input{font:inherit}
button{cursor:pointer;border:0;border-radius:12px;min-height:44px;padding:.55em 1.1em;font-weight:700;background:var(--panel-2);color:var(--text);border:1px solid var(--line-2)}
button:hover:not(:disabled){filter:brightness(1.12)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.42;cursor:not-allowed}
.primary{background:var(--gold);color:#1B1200;border-color:var(--gold);font-family:var(--display);font-weight:400;letter-spacing:.02em}
.danger{background:var(--bad);color:#2A0010;border-color:var(--bad)}
.go{background:var(--teal);color:#0B2E28;border-color:var(--teal);font-family:var(--display);font-weight:400}
.warn{background:var(--orange);color:#2A1200;border-color:var(--orange)}
select,input{background:var(--deep);color:var(--text);border:1px solid var(--line-2);border-radius:12px;padding:.55em .8em;min-height:44px}
input[type=checkbox]{min-height:0;width:20px;height:20px;accent-color:var(--teal);vertical-align:middle}
input{min-width:0}
[hidden]{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--header);display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:14px 20px;margin:0 -16px 24px;border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.03em;color:var(--gold)}
.brand span{display:block;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.brand .luna{display:inline;margin:0;font-family:var(--display);font-size:inherit;letter-spacing:inherit;text-transform:none;color:var(--gold)}
nav{display:flex;gap:4px;background:var(--panel);padding:4px;border-radius:999px;border:1px solid var(--line)}
nav button{border:0;background:transparent;border-radius:999px;padding:0 22px;font-size:15px;font-weight:600;color:var(--text)}
nav button[aria-pressed="true"]{background:var(--gold);color:#1B1200;font-weight:700}
.wallet{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip-user{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:600;font-size:14px}
.chip-user svg{flex:none}
.credits-pill{display:inline-flex;align-items:baseline;gap:8px;padding:8px 18px;border-radius:999px;background:#2A2147;border:1px solid var(--gold)}
.credits-pill small,.wallet small{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.wallet .amt{font-family:var(--display);font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
.wallet button{border-radius:999px;font-size:13px;padding:0 16px;background:transparent}
@media (max-width:640px){
  .top{padding:12px 16px;gap:10px}
  .brand{font-size:22px}
  .top{position:static}
  nav{order:3;width:100%}
  nav button{flex:1}
  .wallet{margin-left:0;width:100%;gap:6px;flex-wrap:nowrap}
  .chip-user{padding:0 12px;min-height:40px;font-size:13px;min-width:0;overflow:hidden}
  .chip-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .credits-pill{padding:0 12px;min-height:40px;align-items:center;flex:none}
  .credits-pill small{font-size:9px;letter-spacing:.1em}
  .wallet .amt{font-size:16px}
  .wallet button{min-height:40px;padding:0 12px;margin-left:auto;flex:none}
}

main{max-width:1360px;margin:0 auto}
.two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;gap:24px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;min-width:0}
@media (max-width:500px){.panel{padding:16px;border-radius:20px}}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
h2.h,.h1{font-family:var(--display);font-weight:400;font-size:22px;margin:0 0 8px;line-height:1.15}
.h1{font-size:30px;margin:0}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--panel-2);color:var(--muted);border:1px solid var(--line-2)}
.pill.selling{background:#123D36;color:#5CF0D2;border-color:#1E5C51}
.pill.selling::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal)}
.pill.running{background:#3A2E10;color:var(--gold);border-color:#6B5418}
.pill.checking{background:#3D1430;color:#FF8FC0;border-color:#6B2350}
.pill.paused{background:var(--panel-2);color:var(--text)}

/* caller board */
.callrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.callinfo{display:flex;flex-direction:column;gap:8px;flex:1 1 220px;min-width:0}
.ball{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;align-content:center;background:var(--paper);color:var(--ink);box-shadow:0 0 0 5px var(--c,#3A3163),0 0 30px color-mix(in srgb,var(--c,#3A3163) 45%,transparent);flex:none}
.ball small{font-family:var(--display);font-size:13px;line-height:1;opacity:.75}
.ball b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;font-variant-numeric:tabular-nums}
.ball.big{width:112px;height:112px;box-shadow:0 0 0 6px var(--c,#3A3163),0 0 44px color-mix(in srgb,var(--c,#3A3163) 50%,transparent)}
.ball.big small{font-size:20px}
.ball.big b{font-size:42px}
.nowcalling{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px dashed var(--pink);color:#FF7DB5;font-size:13px;font-weight:700}
.nowcalling i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:blink .9s steps(2,start) infinite}
.recent{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.recent span{padding:6px 12px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line-2);font-weight:700;font-size:15px;color:var(--c);font-variant-numeric:tabular-nums}
.count{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.count b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.count b small,.count .muted{font-family:var(--display);font-size:17px;color:var(--dim)}

.board{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(15,minmax(0,1fr));gap:5px;background:var(--deep);padding:10px;border-radius:16px}
.lbl{display:grid;place-items:center;font-family:var(--display);font-size:clamp(12px,2vw,18px);color:var(--ink);border-radius:8px}
.l0{background:var(--b)}.l1{background:var(--i)}.l2{background:var(--n)}.l3{background:var(--g)}.l4{background:var(--o)}
.num{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#1A1430;border:1px solid var(--line);color:var(--dim);font-weight:600;font-size:clamp(9px,1.35vw,14px);font-variant-numeric:tabular-nums;transition:background .25s,color .25s,box-shadow .25s}
.num.lit{background:var(--gold);border-color:var(--gold);color:#1B1200;font-weight:700;box-shadow:0 0 10px var(--amber-glow)}
.num.call{background:transparent;color:#FF7DB5;border:2px dashed var(--pink)}
.num.last{animation:flash 1s ease-in-out 3}
@keyframes flash{50%{background:#fff;box-shadow:0 0 18px #fff}}
@media (max-width:460px){.board{gap:3px;padding:6px;border-radius:12px}.num{border-width:0}.num.call{border-width:1.5px}}
@media (prefers-reduced-motion:reduce){.num.last,.nowcalling i{animation:none}.tabcover{transition:none!important}}

.status{margin-top:12px;min-height:1.4em;font-weight:600;color:var(--muted)}
.status.win{color:var(--gold);font-family:var(--display);font-weight:400;font-size:17px}
.status.bad{color:var(--bad)}

/* win message */
.winbox{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;background:#2A2147;border:1px solid var(--gold);margin-top:12px}
.winbox svg{flex:none}
.winbox b{display:block;font-family:var(--display);font-weight:400;font-size:15px;line-height:1.3;color:var(--gold)}
.winbox span{display:block;font-family:var(--display);font-size:22px;color:#5CF0D2}

/* buying packs */
.prod{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--panel-2)}
.prod.on{border:2px solid var(--teal);background:#123D36;padding:9px 9px 9px 15px}
.prod .pname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prod .pname b{font-size:15px}
.prod .pname span{font-size:13px;color:var(--muted)}
.prod .pname em{font-style:normal;color:var(--gold);font-weight:700}
.prodlist{display:grid;gap:10px}
.basket{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;margin-top:12px;border-top:1px solid var(--line)}
.basket span{color:var(--muted);font-size:14px}
.basket b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold)}
.buybtn{width:100%;min-height:52px;margin-top:12px;background:var(--teal);color:#0B2E28;border-color:var(--teal);font-family:var(--display);font-weight:400;font-size:17px}
.why{margin:8px 0 0;font-size:13px;color:var(--muted);min-height:1.2em}
.why.bad{color:var(--bad)}

/* cards */
.pack{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px}
.pack-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pack-head b{font-family:var(--display);font-weight:400;font-size:22px}
.pack-foot{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line-2);display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.pack-no{font-family:var(--display);font-size:15px;letter-spacing:.05em;color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.card{border-radius:16px;padding:10px;position:relative}
.card.paper{background:var(--paper);color:#231B3A;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card.machine{background:linear-gradient(180deg,#141B3D,#0E1430);color:var(--screen-text);border:1px solid #2B3770;box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 0 24px rgba(90,169,255,.08)}
.chead{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:0 2px 8px;color:#6B5F8A}
.machine .chead{color:#7F95D6}
.need{font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-size:12px;padding:3px 10px;border-radius:999px;background:#E9E0F7;color:#3A2F55}
.machine .need{background:#1F2A57;color:#C7D7FF}
.need.hot{background:var(--pink);color:#2A0016}
.cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ch{text-align:center;font-family:var(--display);font-size:14px}
.paper .ch:nth-child(1){color:#2B6FC2}.paper .ch:nth-child(2){color:#C2296E}.paper .ch:nth-child(3){color:#231B3A}.paper .ch:nth-child(4){color:#0E7C6A}.paper .ch:nth-child(5){color:#B95A12}
.machine .ch:nth-child(1){color:var(--b)}.machine .ch:nth-child(2){color:var(--i)}.machine .ch:nth-child(3){color:var(--n)}.machine .ch:nth-child(4){color:var(--g)}.machine .ch:nth-child(5){color:var(--o)}
.cell{aspect-ratio:1/1.02;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;border:1px solid #E6DCC6;border-radius:7px;font-size:12px;line-height:1.1;font-variant-numeric:tabular-nums;font-weight:600;color:#3A2F55}
.machine .cell{background:#161F45;border-color:#2B3770;color:var(--screen-text)}
.cell .n{padding:0 5px;border-radius:999px;line-height:16px}
.cell.free{font-size:0}
.cell.free::after{content:"FREE";width:70%;aspect-ratio:1;max-width:30px;border-radius:50%;background:var(--pink);color:#2A0016;font-size:8px;font-weight:800;display:grid;place-items:center}
.machine .cell.free::after{background:var(--gold);color:#1B1200}
.n.on{background:var(--pink);color:#2A0016;font-weight:700}
.machine .n.on{background:var(--gold);color:#1B1200}
.n.call{outline:2px dashed var(--pink);outline-offset:1px;color:#C2296E}
.machine .n.call{color:#FF8FC0}
.machine .cell.hit{background:#262E5E}
.cell.win{outline:3px solid var(--teal);outline-offset:-2px}
.cfoot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:10px 2px 0;font-size:12px}
.card-no{display:block;font-family:var(--display);font-size:16px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.cfoot button{min-height:44px;padding:0 16px;border-radius:10px;background:#231B3A;color:var(--gold);border:0;font-family:var(--display);font-weight:400;font-size:14px}
.machine .cfoot button{background:#2B3770}
.cfoot button.primary{background:var(--gold);color:#1B1200}
.card.winner{outline:3px solid var(--gold);box-shadow:0 0 24px var(--amber-glow)}

/* pull tabs */
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px}
.deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;align-items:start}
.deal{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:12px}
.deal::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--hue)}
.deal h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1;margin:0;color:var(--hue)}
.deal .sub{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.prizes{display:grid;gap:8px;padding:14px;border-radius:14px;background:var(--deep)}
.prizes div{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--muted)}
.prizes b{font-family:var(--display);font-weight:400;color:var(--gold)}
.deal .buy{width:100%;min-height:48px;margin-top:8px;background:var(--hue);border-color:var(--hue);color:var(--ink);font-family:var(--display);font-weight:400;font-size:15px}
.flare{display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;font-size:14px;font-variant-numeric:tabular-nums;background:var(--deep);border-radius:10px;padding:8px 10px}
.flare .gone{opacity:.35;text-decoration:line-through}
.tabzone{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px;align-items:flex-start}
.tabzone > .panel{flex:1 1 340px;display:flex;flex-direction:column;gap:16px}
.tabzone > .panel.wide{flex:999 1 520px}
.tabstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tabstats div{padding:14px;border-radius:14px;background:var(--deep);display:flex;flex-direction:column;gap:4px}
.tabstats b{font-family:var(--display);font-weight:400;font-size:22px;font-variant-numeric:tabular-nums}
.tabstats span{font-size:12px;color:var(--muted)}
.ticket{background:#efe3c2;color:var(--ink);border-radius:6px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.ticket header{background:var(--hue);color:var(--ink);font-family:var(--display);text-align:center;padding:6px;border-radius:4px;font-size:16px}
.ticket .serial{display:flex;justify-content:space-between;font-size:11px;margin:6px 2px;font-variant-numeric:tabular-nums}
.window{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#fff;border:2px solid var(--hue);border-radius:4px;margin-top:8px;padding:8px;min-height:58px}
.window .s{display:grid;place-items:center;font-size:24px;font-weight:800;font-family:var(--display)}
.window.won{background:#fff4c2}
.tabcover{position:absolute;inset:-2px;border:2px dashed rgba(0,0,0,.35);border-radius:4px;background:repeating-linear-gradient(45deg,var(--hue) 0 10px,#0003 10px 20px);color:var(--ink);font-weight:800;letter-spacing:.15em;text-transform:uppercase;font-size:12px;transition:transform .35s ease,opacity .35s ease}
.tabcover.open{transform:rotateY(80deg) translateX(30px);opacity:0;pointer-events:none}
.result{margin-top:10px;text-align:center;font-family:var(--display);font-size:20px;min-height:1.4em}
.result.win{color:#0E7C6A}
.list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.list li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--panel-2);border-radius:12px;font-size:14px}
.empty{color:var(--muted);border:2px dashed var(--line-2);border-radius:24px;padding:22px;text-align:center}
.empty.big{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 24px}
.empty.big b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--text)}
.empty.big span{font-size:15px;max-width:420px}

/* forms */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row > input{flex:1}
.gate{max-width:440px;margin:10vh auto 0;display:grid;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px}
.gate h1{font-family:var(--display);font-weight:400;font-size:30px;margin:0;color:var(--gold)}
.err{color:var(--bad);min-height:1.3em}

/* caller claims */
.claim{border:2px solid var(--line-2);border-radius:18px;padding:16px;display:grid;gap:10px;background:var(--deep)}
.claim.good{border-color:var(--good)}
.claim.badc{border-color:var(--bad)}
.verdict{font-family:var(--display);font-size:22px}
.verdict.good{color:var(--good)}.verdict.badc{color:var(--bad)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:14px;font-variant-numeric:tabular-nums}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700}
.match{font-weight:800}
.match.ok{color:var(--good)}.match.no{color:var(--bad)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center}
.stats > *{background:var(--deep);border-radius:14px;padding:10px 6px}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
@media (max-width:500px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.face-wrap{max-width:260px}
footer{max-width:1360px;margin:32px auto 0;color:var(--dim);font-size:13px;border-top:1px solid var(--line);padding-top:14px}

/* pull tab buying and the ticket scroll */
.qty{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;flex:none}
.stepper button{border:0;border-radius:0;width:44px;padding:0;background:var(--panel-2);font-size:20px;font-weight:600}
.stepper input,.stepper output{width:3.2em;text-align:center;border:0;border-radius:0;background:var(--deep);font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;display:grid;place-items:center;padding:0}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{min-height:36px;padding:0 12px;font-size:13px;border-radius:999px;background:transparent;border:1px solid var(--line-2)}
.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
/* unopened tickets: tear-off stubs */
.back{flex:none;width:80px;height:124px;min-height:0;scroll-snap-align:start;border-radius:10px;padding:10px 4px;border:0;background:var(--hue);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;font-size:11px;font-weight:700;line-height:1.2;
  -webkit-mask:radial-gradient(circle 6px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 6px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.back b{font-family:var(--display);font-weight:400;font-size:11px;line-height:1.1}
.back i{width:58px;border-top:2px dashed rgba(18,14,36,.45)}
.back:nth-child(even){filter:brightness(1.12)}
.back:hover{transform:translateY(-3px)}
.mini{background:#efe3c2;color:var(--ink);border-radius:6px;padding:6px;font-size:11px;align-self:start}
.mini header{background:var(--hue);color:var(--ink);font-family:var(--display);font-size:12px;text-align:center;border-radius:3px;padding:3px}
.mini .serial{display:flex;justify-content:space-between;margin:3px 2px 0;font-variant-numeric:tabular-nums}
.mini .window{min-height:32px;padding:3px;margin-top:4px;gap:2px;border-width:1px}
.mini .window .s{font-size:15px}
.mini .tabcover{font-size:0}
.mini .pz{text-align:center;font-family:var(--display);font-size:13px;margin-top:5px}
.mini .pz.win{color:#0E7C6A}
.mini.win{outline:3px solid var(--gold)}

/* your races and holds: shown big at the top of the pull tabs page */
.keepers{margin-bottom:24px;padding:22px;border-radius:24px;background:linear-gradient(135deg,#3A1A3F,#1E2A4A 60%,#123D36);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(255,201,74,.12),0 0 40px rgba(255,201,74,.18);display:flex;flex-direction:column;gap:16px}
.khead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.khead b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;color:var(--gold)}
.khead span{font-weight:700;color:var(--text)}
.keepers .kbox{display:flex;flex-direction:column;gap:10px}
.keepers .kname{font-weight:800;font-size:15px;color:var(--hue)}
.kchips{display:flex;flex-wrap:wrap;gap:10px}
.kchip{min-width:72px;padding:8px 12px;border-radius:16px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--display);font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.kchip small{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.12em}
.kchip small:last-child{letter-spacing:0;font-weight:600;opacity:.75}
.kchip.race{background:var(--pink);color:#2A0016;box-shadow:0 6px 18px rgba(255,95,162,.35)}
.kchip.hold{background:var(--teal);color:#0B2E28;box-shadow:0 6px 18px rgba(53,224,194,.3)}
.kchip.won{box-shadow:0 0 0 4px var(--gold),0 0 24px var(--amber-glow)}
.kchip.new{animation:kpop .7s cubic-bezier(.2,.9,.3,1.4),kglow 1.6s ease-in-out .7s 3}
@keyframes kpop{0%{transform:scale(.3) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes kglow{50%{box-shadow:0 0 0 4px #fff,0 0 30px #fff}}
@media (prefers-reduced-motion:reduce){.kchip.new{animation:none}}
.kchips.sm .kchip{min-width:34px;height:32px;padding:0 8px;font-size:13px;border-radius:9px;display:inline-flex;flex-direction:row}
.kchips.sm .kchip.hold{border-radius:999px}
.mine-line{display:flex;flex-direction:column;gap:6px;margin-top:4px}
@media (max-width:460px){.keepers{padding:16px;border-radius:20px}.khead b{font-size:18px}.kchip{min-width:62px;font-size:24px;padding:6px 10px}}

/* opened tickets: tidy list, tap a row to see the ticket */
.opened{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow-y:auto;padding:2px}
.orow{border-radius:14px;background:var(--deep);border:1px solid var(--line)}
.orow summary{list-style:none;display:flex;align-items:center;gap:14px;padding:10px 14px;min-height:56px;cursor:pointer}
.orow summary::-webkit-details-marker{display:none}
.orow .stripe{width:10px;height:38px;border-radius:4px;background:var(--hue);flex:none}
.orow .otitle{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.orow .otitle b{font-size:15px}
.orow .otitle span{font-size:13px;color:var(--muted)}
.orow[open] summary{border-bottom:1px dashed var(--line-2)}
.orow .face{padding:12px;display:flex;justify-content:center}
.orow .face .rt{width:min(220px,100%)}
.tag{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;background:var(--panel-2);color:var(--dim)}
.tag.race{background:var(--pink);color:#2A0016}
.tag.hold{background:var(--teal);color:#0B2E28}
.tag.won{background:var(--gold);color:#1B1200}
.tag.lost{background:var(--panel-2);color:var(--muted)}
.orow.keep.race{border:2px solid var(--pink);background:rgba(255,95,162,.12)}
.orow.keep.hold{border:2px solid var(--teal);background:rgba(53,224,194,.10)}
.orow.keep .tag{font-family:var(--display);font-weight:400;font-size:15px;padding:7px 14px}
.orow.win{border:2px solid var(--gold);box-shadow:0 0 16px var(--amber-glow)}

/* race boxes */
.meter{height:8px;border-radius:999px;background:var(--deep);overflow:hidden}
.meter span{display:block;height:100%;background:var(--hue);transition:width .4s}
.main-prize{font-size:14px}
.main-prize b{font-family:var(--display);font-weight:400;color:var(--gold)}
.myholds{color:var(--gold)}
.raceboard{display:grid;gap:3px;background:var(--deep);padding:8px;border-radius:12px;font-variant-numeric:tabular-nums}
.rb-row{display:grid;grid-template-columns:2.4em repeat(5,minmax(0,1fr));gap:3px;align-items:center}
.rb-row.won{background:rgba(255,201,74,.16);border-radius:8px}
.rb-r{font-size:11px;color:var(--dim);font-weight:700}
.rb-l{text-align:center;font-family:var(--display);font-size:12px}
.rb-head .rb-l:nth-child(2){color:var(--b)}.rb-head .rb-l:nth-child(3){color:var(--i)}.rb-head .rb-l:nth-child(4){color:var(--n)}.rb-head .rb-l:nth-child(5){color:var(--g)}.rb-head .rb-l:nth-child(6){color:var(--o)}
.rb-n{text-align:center;font-size:12px;font-weight:700;border-radius:999px;padding:3px 0;color:var(--dim);background:#1A1430}
.rb-n.on{background:var(--gold);color:#1B1200}
.rb-n.mine{outline:2px solid var(--teal);outline-offset:-2px;color:#5CF0D2}
.rb-n.on.mine{color:#1B1200}
.rb-n.win{background:var(--teal);color:#0B2E28}
/* ticket faces, styled after the paper race tickets */
.rt{background:var(--hue);border-radius:8px;padding:6px;color:var(--ink);font-size:11px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.rt header{font-family:var(--display);font-size:11px;text-align:center;letter-spacing:.04em}
.rt .race{font-family:var(--display);font-size:15px;text-align:center;margin:2px 0}
.rt-panel{position:relative;display:grid;grid-template-columns:1fr 1.4fr;border-radius:5px;overflow:hidden;background:#111;border:2px solid #111}
.rt-panel .L{background:#fff;color:#d3242b;font-family:var(--display);font-size:20px;line-height:1.25;text-align:center}
.rt-panel .N{color:#fff;font-family:var(--display);font-size:20px;line-height:1.25;text-align:center;font-variant-numeric:tabular-nums}
.rt-panel .N.held{background:#ffd23f;color:#111}
.rt-panel .tabcover{border-radius:0}
.rt .hold{margin-top:5px;background:#ffd23f;color:#111;font-family:var(--display);font-size:14px;text-align:center;border-radius:3px;padding:2px}
.rt .hold.none{background:rgba(0,0,0,.28);color:#fff;font-size:12px}
.rt .res{text-align:center;font-weight:800;margin-top:4px;font-size:12px}
.rt .foot{display:flex;justify-content:space-between;margin-top:3px;opacity:.85;font-variant-numeric:tabular-nums}
.rt.win{outline:3px solid var(--gold);box-shadow:0 0 18px var(--amber-glow)}

.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start}
.bbody{display:grid;gap:10px}
.rb-btn{border:1px solid var(--line-2);background:#1A1430;cursor:pointer;padding:6px 0;min-height:34px;border-radius:999px;font-size:14px}
.rb-btn:disabled{cursor:default;opacity:1}
.rb-btn.on{background:var(--gold);color:#1B1200;border-color:var(--gold)}
.rb-btn.win{background:var(--teal);color:#0B2E28}

.rb-r.myrace{color:var(--pink)}
.rt.is-race .hold{background:#fff;color:#d3242b}

.rt-slots{position:relative;display:grid;gap:3px;background:#fff;border:2px solid #111;border-radius:5px;padding:4px}
.rt-slots .srow{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.rt-slots .srow span{display:grid;place-items:center;min-height:28px;background:#f3ead2;color:#c41f2a;border-radius:3px;font-family:var(--display);font-size:15px;line-height:1}
.rt.loser{opacity:.95}

.rb-n.last{box-shadow:0 0 0 2px #fff inset}
.boxes .callrow .ball,.raceinfo .callrow .ball{width:60px;height:60px}
.boxes .callrow .ball b,.raceinfo .callrow .ball b{font-size:22px}
.raceinfo .recent span,.boxes .recent span{font-size:13px;padding:4px 9px}

/* animations */
.ball.drop{animation:balldrop .7s cubic-bezier(.2,.9,.3,1.2)}
@keyframes balldrop{0%{transform:translateY(-60px) rotate(-200deg) scale(.5);opacity:0}60%{transform:translateY(6px) rotate(12deg) scale(1.08);opacity:1}100%{transform:none}}
.cell.pop{animation:daub .45s ease-out}
@keyframes daub{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.rb-n.last{animation:daub .5s ease-out}
.banner{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;background:rgba(18,14,36,.6);animation:fadeout 2.6s ease forwards}
.banner div{text-align:center;animation:bannerpop .6s cubic-bezier(.2,.9,.3,1.3)}
.banner b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(48px,14vw,140px);line-height:1;color:var(--gold);text-shadow:0 4px 0 #6B4A00,0 0 40px var(--amber-glow),0 0 80px rgba(255,95,162,.4)}
.banner span{display:block;margin-top:10px;font-family:var(--display);font-size:clamp(16px,4vw,28px);color:var(--text)}
@keyframes bannerpop{0%{transform:scale(.3) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes fadeout{0%,75%{opacity:1}100%{opacity:0}}
.confetti{position:fixed;inset:0;z-index:51;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ball.drop,.cell.pop,.rb-n.last,.banner,.banner div{animation:none}}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--deep);padding:4px;border:1px solid var(--line);border-radius:999px}
.seg button{border:0;border-radius:999px;background:transparent}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1B1200}
.gate input{font-size:16px}

/* machine cards: one number per square */
.machine .cell .n:only-child{font-size:15px;font-weight:700;padding:0 7px;line-height:20px}

/* bingo blower next to the called ball */
.blower{width:70px;height:84px;flex:none;display:block}
.boxes .blower,.raceinfo .blower{width:58px;height:70px}

/* caller: players */
.ptable-wrap{overflow-x:auto;max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:16px}
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
.ptable th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px}
.ptable td{padding:10px;border-top:1px solid var(--line);white-space:nowrap}
.ptable .r{text-align:right}
.ptable tr[data-id]{cursor:pointer}
.ptable tr[data-id]:hover,.ptable tr.sel{background:rgba(255,201,74,.10)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-2);margin-right:8px;vertical-align:middle}
.dot.on{background:var(--good);box-shadow:0 0 6px var(--good)}
.pdetail{background:var(--deep)}
.pbal{font-family:var(--display);font-size:32px;color:var(--gold);font-variant-numeric:tabular-nums}
.phist{max-height:260px;overflow-y:auto}
.phist .plus{color:var(--good);font-weight:700}.phist .minus{color:var(--bad);font-weight:700}
.phist li{background:var(--panel)}

.namerow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.namerow input{width:100%}
@media (max-width:360px){.namerow{grid-template-columns:1fr}}
.ptable .uname{display:block;margin-left:16px;font-size:12px;color:var(--muted)}
.sel-text{user-select:all;word-break:break-all}

/* cards: show more, one-to-go and bingo-ready */
.morebtn{width:100%;margin-top:14px;background:var(--deep);border:1px dashed var(--line-2);color:var(--text)}
.card.one{outline:3px solid var(--pink);outline-offset:2px;animation:onetogo 1.1s ease-in-out infinite}
@keyframes onetogo{50%{box-shadow:0 0 26px rgba(255,95,162,.6)}}
.card.one .need{background:var(--pink);color:#2A0016;animation:blink .9s steps(2,start) infinite}
@keyframes blink{50%{opacity:.35}}
.card.ready{outline:3px solid var(--teal);outline-offset:2px;animation:readyglow .8s ease-in-out infinite}
@keyframes readyglow{50%{box-shadow:0 0 28px rgba(53,224,194,.75)}}
.card.ready .need{background:var(--teal);color:#0B2E28}
.card.ready .cfoot button{animation:btnpulse .7s ease-in-out infinite}
@keyframes btnpulse{50%{transform:scale(1.1)}}
.card.shake .cgrid{animation:shake .5s ease}
@keyframes shake{20%{transform:translateX(-4px) rotate(-1deg)}40%{transform:translateX(4px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.card.one,.card.one .need,.card.ready,.card.ready .cfoot button,.card.shake .cgrid{animation:none}}

/* suspend / delete */
.tag-sus{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--bad);color:#2A0010;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.ptable tr.sus td{opacity:.7}
.acct{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line-2)}
.sus-note{margin:4px 0 8px;color:var(--bad);font-weight:600}

/* claim: winning number */
.winball{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.winball .ball{width:64px;height:64px}
.winball .ball b{font-size:24px}
.winball .wb{font-family:var(--display);font-weight:400;font-size:28px;color:var(--gold);line-height:1.1}
.winball .wb.bad{color:var(--bad)}
.late{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--orange);color:#2A1200;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.card.missed .need{background:#D9CFEA;color:#6B5F8A}
.machine.card.missed .need{background:#1F2A57;color:#7F95D6}

.card-pack{display:block;font-size:10px;letter-spacing:.06em;opacity:.65;font-variant-numeric:tabular-nums}
.pack-foot .pack-no{text-align:right;word-break:break-word}

/* phones: two cards per row */
@media (max-width:460px){
  body{padding-inline:12px}
  .top{margin-inline:-12px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pack{padding:12px;border-radius:18px}
  .card{padding:6px;border-radius:12px}
  .cgrid{gap:2px}
  .cell{font-size:10px;border-radius:5px}
  .cell .n{padding:0 3px;line-height:14px}
  .machine .cell .n:only-child{font-size:13px;padding:0 4px;line-height:17px}
  .chead{font-size:9px;letter-spacing:.08em;padding-bottom:6px}
  .need{font-size:10px;padding:2px 6px}
  .ch{font-size:11px}
  .cfoot{font-size:11px;padding-top:6px}
  .card-no{font-size:12px}
  .cfoot button{min-height:40px;padding:0 10px;font-size:12px}
  .callrow{gap:12px}
  .ball.big{width:88px;height:88px}
  .ball.big b{font-size:34px}
  .ball.big small{font-size:16px}
  .count b{font-size:26px}
  .tabstats b{font-size:18px}
}

/* caller: space bar shortcut */
kbd{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:6px;border:1px solid rgba(27,18,0,.35);background:rgba(27,18,0,.12);font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.12em;vertical-align:middle}
button.pressed{animation:presskey .25s ease}
@keyframes presskey{50%{transform:scale(.97);filter:brightness(1.2)}}
@media (prefers-reduced-motion:reduce){button.pressed{animation:none}}
@media (hover:none){#callBtn kbd,#drawBtn kbd{display:none}}
button:disabled kbd{visibility:hidden}

/* floating bar: the called ball stays on screen while you scroll */
.callbar{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:14px;padding:8px 20px 8px 8px;border-radius:999px;background:rgba(21,15,43,.95);border:2px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 24px rgba(255,201,74,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:calc(100vw - 20px);animation:barin .3s ease-out}
.callbar .ball{width:58px;height:58px;box-shadow:0 0 0 4px var(--c,#3A3163),0 0 18px color-mix(in srgb,var(--c,#3A3163) 50%,transparent)}
.callbar .ball small{font-size:11px}
.callbar .ball b{font-size:24px}
.cb-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cb-now{font-family:var(--display);font-size:20px;line-height:1.1;color:var(--gold);white-space:nowrap}
.cb-prev{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-count{font-family:var(--display);font-size:22px;color:var(--gold);padding-left:14px;border-left:1px solid var(--line-2);white-space:nowrap}
.cb-count small{font-size:13px;color:var(--dim)}
.callbar.calling{border-color:var(--pink);box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 24px rgba(255,95,162,.35)}
.callbar.calling .cb-now{color:#FF7DB5}
.callbar.calling .ball{outline:2px dashed var(--pink);outline-offset:6px}
body.has-callbar{padding-bottom:100px}
@keyframes barin{0%{transform:translate(-50%,120%)}100%{transform:translateX(-50%)}}
@media (max-width:460px){.callbar{gap:10px;padding-right:14px}.callbar .ball{width:50px;height:50px}.callbar .ball b{font-size:20px}.cb-now{font-size:17px}.cb-prev{font-size:12px}.cb-count{font-size:18px;padding-left:10px}}
@media (prefers-reduced-motion:reduce){.callbar{animation:none}}

/* caller: connection light */
.conn::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--dim);vertical-align:middle}
.conn.ok::before{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.conn.bad{color:var(--bad)}
.conn.bad::before{background:var(--bad);animation:blink .9s steps(2,start) infinite}

/* the one square a card still needs for bingo */
.cell.need1{position:relative;z-index:1;outline:3px solid var(--gold);outline-offset:-2px;animation:needbeat .9s ease-in-out infinite}
.paper .cell.need1{background:#FFF1B8}
.machine .cell.need1{background:#4A3B0E}
.cell.need1 .n{font-weight:800;color:#8A5A00}
.machine .cell.need1 .n{color:var(--gold)}
.cell.need1::after{content:"★";position:absolute;top:-9px;right:-7px;font-size:13px;line-height:1;color:var(--gold);text-shadow:0 0 6px rgba(255,201,74,.9),0 1px 0 #6B4A00;animation:needstar 1.2s linear infinite}
@keyframes needbeat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,201,74,0)}50%{transform:scale(1.14);box-shadow:0 0 16px 5px rgba(255,201,74,.85)}}
@keyframes needstar{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.35)}100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.cell.need1,.cell.need1::after{animation:none}}

/* buying: pick the game, Buy 1, all-night bundles */
.gamepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin-bottom:14px}
.gamepick button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border-radius:14px;background:var(--panel-2);font-family:var(--display);font-weight:400;font-size:14px}
.gamepick button small{font-family:var(--body);font-size:11px;font-weight:600;color:var(--muted);text-transform:none}
.gamepick button[aria-pressed="true"]{background:#123D36;border:2px solid var(--teal);color:#5CF0D2}
.gamepick button[aria-pressed="true"] small{color:#5CF0D2}
.gamepick button:disabled{opacity:.35}
.buy1{min-height:44px;padding:0 12px;border-radius:12px;background:transparent;border:1px solid var(--teal);color:#5CF0D2;font-size:13px;flex:none}
.prod{flex-wrap:wrap}
@media (max-width:420px){.prod .pname{flex-basis:100%}.prod .stepper{margin-left:auto}}
.bundles{display:grid;gap:12px}
.bundle{border-radius:18px;padding:16px;background:linear-gradient(135deg,#2A2147,#1E2A4A);border:1px solid var(--gold);display:grid;gap:8px}
.bundle.deluxe{background:linear-gradient(135deg,#3A1A3F,#2A2147);border:2px solid var(--pink);box-shadow:0 0 22px rgba(255,95,162,.18)}
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bhead b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--gold)}
.bundle.deluxe .bhead b{color:#FF8FC0}
.bprice{font-family:var(--display);font-size:24px;color:var(--text)}
.bundle ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.bown{margin:0;font-weight:700;color:#5CF0D2}
.bbuy{width:100%;min-height:48px;background:var(--gold);border-color:var(--gold);color:#1B1200;font-family:var(--display);font-weight:400;font-size:15px}
.bundle.deluxe .bbuy{background:var(--pink);border-color:var(--pink);color:#2A0016}

/* little screen showing the game pattern */
.patmini{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 10px;border-radius:14px;background:#0B0818;border:1px solid var(--line-2);box-shadow:inset 0 0 18px rgba(90,169,255,.12),0 0 14px rgba(255,201,74,.08)}
.pm-top{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--dim)}
.pm-grid{display:grid;grid-template-columns:repeat(5,14px);grid-auto-rows:14px;gap:3px}
.pm-grid span{border-radius:4px;background:#221B3D;display:grid;place-items:center;font-size:9px;color:#6B6290;transition:background .35s,box-shadow .35s}
.pm-grid span.on{background:var(--gold);box-shadow:0 0 8px rgba(255,201,74,.7)}
.pm-grid span.free.on{color:#1B1200}
.pm-grid span.pop{animation:pmpop .45s ease-out}
@keyframes pmpop{0%{transform:scale(.4)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.pm-name{max-width:110px;text-align:center;font-family:var(--display);font-size:11px;line-height:1.15;color:var(--gold)}
@media (max-width:460px){.pm-grid{grid-template-columns:repeat(5,11px);grid-auto-rows:11px;gap:2px}.patmini{padding:6px 8px}}
@media (prefers-reduced-motion:reduce){.pm-grid span.pop{animation:none}}
.callrow .patmini{margin-left:auto}
.callrow .patmini + .count{margin-left:0}
.winbox small.split{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}

/* caller: default prizes */
.prizegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 16px}
.prizegrid label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--deep)}
.prizegrid .pin{display:inline-flex;align-items:center;gap:4px;color:var(--gold);font-weight:700}
.prizegrid input{width:6em;text-align:right}

/* caller: cash-out requests */
#cashPanel{border-color:var(--teal);box-shadow:0 0 22px rgba(53,224,194,.12)}
.cashreq{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--deep);border:1px solid var(--line-2)}
.cr-main{display:flex;gap:14px;align-items:center}
.cr-amt{font-family:var(--display);font-weight:400;font-size:26px;color:#5CF0D2;min-width:4.5em}
.cr-note{color:var(--text);font-style:italic}

/* player: cash out */
.cashbtn{border-radius:999px;min-height:40px;padding:0 16px;background:#123D36;border:1px solid var(--teal);color:#5CF0D2;font-size:13px}
.cashbtn.pending{background:var(--teal);color:#0B2E28}
dialog#cashDlg{width:min(440px,calc(100vw - 32px));border:1px solid var(--line-2);border-radius:24px;padding:0;background:var(--panel);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.6)}
dialog#cashDlg::backdrop{background:rgba(10,7,22,.7)}
.cashform{padding:22px;display:block}
.cashform input{width:auto}
.cash-have{font-family:var(--display);font-weight:400;color:var(--gold)}
.cash-status{margin:0 0 12px;padding:12px;border-radius:14px;background:#123D36;border:1px solid var(--teal)}
@media (max-width:640px){
  .wallet{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .wallet > *{justify-content:center;margin-left:0!important;min-width:0}
  .wallet .cashbtn,.wallet #logout{width:100%}
  /* ball area on phones: blower, ball and count on top; previous calls and the pattern screen under them */
  #view-bingo .callrow{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"blower ball count" "info info pat";gap:10px 12px;align-items:center}
  #view-bingo .callrow .blower{grid-area:blower;width:52px;height:62px}
  #view-bingo .callrow .ball{grid-area:ball}
  #view-bingo .callinfo{grid-area:info;align-self:start}
  #view-bingo #patScreen{grid-area:pat;justify-self:end;margin-left:0}
  #view-bingo .count{grid-area:count;justify-self:end;margin-left:0}
}
@media (max-width:460px){#view-bingo .recent span{font-size:13px;padding:4px 10px}#view-bingo .nowcalling{font-size:12px}}

/* "Bingo starts in" countdown */
.countdown{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:-4px 0 16px;padding:12px 18px;border-radius:18px;background:linear-gradient(90deg,#2A2147,#3A1A3F);border:2px solid var(--gold);box-shadow:0 0 26px rgba(255,201,74,.2)}
.cd-label{font-family:var(--display);font-size:15px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.cd-time{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,201,74,.45)}
.countdown.soon{border-color:var(--pink);animation:cdpulse 1s ease-in-out infinite}
.countdown.soon .cd-time{color:#FF8FC0;text-shadow:0 0 18px rgba(255,95,162,.5)}
@keyframes cdpulse{50%{box-shadow:0 0 34px rgba(255,95,162,.55)}}
.cdchip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#2A2147;border:1px solid var(--gold);color:var(--gold);font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums}
.timerrow .chips button{min-width:40px}
.cd-mini{font-family:var(--display);font-weight:400;color:var(--gold);font-variant-numeric:tabular-nums}
.cd-mini.soon{color:#FF8FC0}
@media (max-width:640px){.cdchip{order:2;width:100%;justify-content:center}.cd-time{font-size:32px}}
@media (prefers-reduced-motion:reduce){.countdown.soon{animation:none}}

/* what game is being played and what it pays */
.gamebar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 16px;padding:10px 16px;border-radius:16px;background:var(--deep);border:1px solid var(--line-2)}
.gb-game{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.gb-game b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.gb-game span{font-family:var(--display);font-size:20px;color:var(--text)}
.gb-prize{display:flex;align-items:baseline;gap:8px}
.gb-prize small{font-family:var(--display);font-size:14px;color:var(--muted);text-transform:uppercase}
.gb-prize b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;color:var(--gold);text-shadow:0 0 16px rgba(255,201,74,.4);font-variant-numeric:tabular-nums}
.gb-prize b.bump{animation:bump .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes bump{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.pm-prize{font-family:var(--display);font-size:12px;color:#5CF0D2}
@media (max-width:460px){.gb-game span{font-size:17px}.gb-prize b{font-size:24px}.gamebar{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.gb-prize b.bump{animation:none}}

/* tip the caller */
.boardfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.boardfoot .status{margin:0;flex:1 1 220px}
.tipbtn{border-radius:999px;min-height:40px;padding:0 16px;background:#3A1A3F;border:1px solid var(--pink);color:#FF8FC0;font-size:14px}
dialog#tipDlg{width:min(420px,calc(100vw - 32px));border:1px solid var(--pink);border-radius:24px;padding:0;background:var(--panel);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.6)}
dialog#tipDlg::backdrop{background:rgba(10,7,22,.7)}
.tipamts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tipamts button{font-family:var(--display);font-weight:400;font-size:18px;min-height:52px}
.tipamts button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#2A0016}
#tipsPanel{border-color:var(--pink)}
.tiptotal{font-family:var(--display);font-weight:400;font-size:24px;color:#FF8FC0}

/* pull tabs: instant winners */
.rt.instant .race{color:var(--ink);font-size:13px}
.rt.instant .hold{background:#ffd23f;color:#111}
.rt-slots .srow.hit span{background:#ffd23f;color:#111;box-shadow:inset 0 0 0 2px #c58b00}

/* finished race: big X, GAME CLOSED */
.deal.finished > *:not(.xover){opacity:.45;filter:saturate(.6)}
.deal .xover{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.deal .xover svg{position:absolute;inset:6% 8%;width:84%;height:88%}
.deal .xover line{stroke:#FF3B5C;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.deal .xover svg{filter:drop-shadow(0 0 6px rgba(255,59,92,.7));animation:xin .45s ease-out both}
@keyframes xin{0%{transform:scale(1.25);opacity:0}100%{transform:none;opacity:1}}
.deal .xover span{position:relative;transform:rotate(-12deg);padding:8px 18px;border-radius:12px;border:3px solid #FF3B5C;background:rgba(18,14,36,.88);color:#FF6B81;font-family:var(--display);font-size:24px;letter-spacing:.06em;box-shadow:0 0 22px rgba(255,59,92,.45);animation:stamp .5s .45s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes xdraw{to{stroke-dashoffset:0}}
@keyframes stamp{0%{transform:rotate(-12deg) scale(2.2);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.deal .xover svg,.deal .xover span{animation:none}}

/* pull tabs: animal artwork */
.rt{position:relative;overflow:hidden;border-radius:12px;padding:8px;background:linear-gradient(170deg,var(--hue),color-mix(in srgb,var(--hue) 55%,#120E24))}
.rt header{font-family:var(--display);font-size:13px;text-align:center;color:#120E24;letter-spacing:.04em}
.rt-art{position:relative;height:74px;margin:6px 0;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.95) 0 38%,rgba(255,255,255,.55) 39% 52%,transparent 53%),repeating-conic-gradient(from 0deg at 50% 110%,rgba(255,255,255,.22) 0 8deg,transparent 8deg 16deg),color-mix(in srgb,var(--hue) 70%,#fff)}
.rt-art.big{height:96px}
.rt-animal{font-size:46px;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));animation:gallop .9s ease-in-out infinite}
.rt-art.big .rt-animal{font-size:60px}
.rt-accent{position:absolute;top:6px;right:8px;font-size:20px;animation:twinkle 1.6s ease-in-out infinite}
@keyframes gallop{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes twinkle{50%{transform:scale(1.25) rotate(12deg)}}
.rt-body{position:relative;border-radius:10px;background:#FBF6EA;padding:8px;color:#231B3A}
.rt-racebadge{text-align:center;font-family:var(--display);font-size:14px;color:#6B5F8A}
.rt-racebadge b{font-weight:400;font-size:22px;color:#231B3A}
.rt-balls{display:flex;justify-content:center;gap:4px;margin:6px 0}
.rt-balls span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 35% 30%,#fff 0 20%,var(--c) 62%);font-family:var(--display);font-size:12px;line-height:1;color:#120E24;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.rt-balls span small{font-size:8px;opacity:.7}
.rt-holdball{width:72px;height:72px;margin:2px auto 6px;border-radius:50%;display:grid;place-items:center;align-content:center;background:#fff;border:6px solid var(--c);box-shadow:0 3px 0 rgba(0,0,0,.2),0 0 18px color-mix(in srgb,var(--c) 60%,transparent);font-family:var(--display);color:#120E24;line-height:1}
.rt-holdball small{font-size:14px}
.rt-holdball b{font-weight:400;font-size:28px}
.rt .res{text-align:center;font-weight:800;margin-top:6px;font-size:12px;color:#231B3A}
.rt .foot{color:#120E24;opacity:.8}
.rt-body .rt-slots{background:transparent;border:0;padding:0}
.rt-body .rt-slots .srow span{background:#fff;border:1px solid #E6DCC6;font-size:22px;min-height:36px;border-radius:8px;color:inherit;font-family:inherit}
.rt-body .rt-slots .srow.hit span{background:#ffd23f;border-color:#c58b00;animation:hitpop .8s ease-in-out 3}
@keyframes hitpop{50%{transform:scale(1.12)}}
.rt-body .hold{margin-top:6px}
.rt.loser{opacity:.9}
.rt.win{box-shadow:0 0 0 3px var(--gold),0 0 22px var(--amber-glow)}
.rt .tabcover{inset:0;border-radius:10px}
.orow .face .rt{width:min(240px,100%)}
/* unopened stubs and game boxes show the game's animal */
.back .stub-animal{font-size:34px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.back:hover .stub-animal{animation:gallop .6s ease-in-out infinite}
.deal h3 .deal-animal{margin-right:8px;font-size:26px;vertical-align:-2px;display:inline-block;animation:gallop 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rt-animal,.rt-accent,.deal h3 .deal-animal,.back:hover .stub-animal,.rt-body .rt-slots .srow.hit span{animation:none}}

/* opened tickets as tiles, matching the race/hold badges */
.opened{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:62vh;overflow-y:auto;padding:4px;align-content:start}
.otile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:112px;padding:10px 6px 8px;border-radius:16px;border:0;font-family:var(--display);font-weight:400;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,.3);transition:transform .15s}
.otile:hover{transform:translateY(-3px)}
.otile .ot-animal{position:absolute;top:6px;left:8px;font-size:18px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.otile small{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.12em;margin-top:8px}
.otile b{font-weight:400;font-size:32px}
.otile .ot-no{font-family:var(--body);font-size:11px;font-weight:600;opacity:.8;margin-top:4px}
.otile.race{background:var(--pink);color:#2A0016;box-shadow:0 6px 18px rgba(255,95,162,.35)}
.otile.hold{background:var(--teal);color:#0B2E28;box-shadow:0 6px 18px rgba(53,224,194,.3)}
.otile.gold{background:var(--gold);color:#1B1200;box-shadow:0 0 0 3px #fff3,0 6px 22px rgba(255,201,74,.5)}
.otile.lost{filter:saturate(.35) brightness(.8)}
.otile.none{background:var(--panel-2);color:var(--dim);border:1px solid var(--line-2);box-shadow:none}
.otile.none b{font-size:26px}
.otile.sel{outline:3px solid #fff;outline-offset:2px}
.otile.new{animation:kpop .6s cubic-bezier(.2,.9,.3,1.4)}
.oviewer{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:12px;border-radius:18px;background:var(--deep);border:1px dashed var(--line-2)}
.oviewer .rt{width:min(220px,100%)}
@media (max-width:460px){.opened{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.otile{min-height:96px}.otile b{font-size:26px}}
@media (prefers-reduced-motion:reduce){.otile.new{animation:none}}

/* opened ticket: styled like the game boxes */
.tface{position:relative;overflow:hidden;width:min(280px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px 18px 16px;display:flex;flex-direction:column;gap:10px;text-align:left;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.tface::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--hue)}
.tf-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tf-head h3{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1;margin:0;color:var(--hue)}
.tf-head h3 .deal-animal{margin-right:8px;font-size:24px;vertical-align:-2px;display:inline-block;animation:gallop 1.4s ease-in-out infinite}
.tface .sub{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.tf-body{position:relative;display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--deep)}
.tf-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;color:var(--muted)}
.tf-line b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--gold)}
.tf-line.small{font-size:13px;justify-content:center}
.tf-body .rt-balls{margin:0}
.tf-body .rt-holdball{margin:0 auto}
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tf-grid span{display:grid;place-items:center;min-height:44px;border-radius:10px;background:#1A1430;border:1px solid var(--line);font-size:24px}
.tf-grid span.hit{background:#3A2E10;border-color:var(--gold);box-shadow:0 0 12px var(--amber-glow);animation:hitpop .8s ease-in-out 3}
.tf-result{text-align:center;font-weight:700;color:var(--muted);font-size:14px}
.tf-result b{font-family:var(--display);font-weight:400;color:var(--gold)}
.tface .pill.gold{background:#3A2E10;color:var(--gold);border-color:#6B5418}
.tface.win{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,201,74,.35),0 0 26px var(--amber-glow)}
.tface.dim .tf-body{opacity:.75}
.tface .tabcover{inset:0;border-radius:14px}
.oviewer .tface{width:min(280px,100%)}
@media (prefers-reduced-motion:reduce){.tf-head h3 .deal-animal,.tf-grid span.hit{animation:none}}
.tf-art{margin:0 0 2px;border-radius:14px;height:104px}
.tf-art .rt-animal{font-size:64px}
.tface.win .tf-art .rt-animal{animation:gallop .55s ease-in-out infinite}
.tface.dim .tf-art{filter:saturate(.55) brightness(.85)}
.deal .tf-art .rt-animal{animation:gallop .9s ease-in-out infinite}
.deal.finished .tf-art .rt-animal{animation:none}
.kcards{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}
.kcards .tface{width:min(280px,100%)}
.kcards .tface.new{animation:kpop .7s cubic-bezier(.2,.9,.3,1.4)}
.rt-balls span.on{box-shadow:0 0 0 3px var(--gold),0 0 16px var(--amber-glow);transform:scale(1.08)}
@media (max-width:460px){.kcards{justify-content:center}}
@media (max-width:560px){
  .kcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .kcards .tface{width:auto;padding:16px 10px 10px;gap:6px;border-radius:16px}
  .kcards .tf-art{height:64px}.kcards .tf-art .rt-animal{font-size:40px}
  .kcards .tf-head h3{font-size:14px}.kcards .tf-head .pill{display:none}
  .kcards .sub{font-size:11px}.kcards .tf-result{font-size:11px}
  .kcards .tf-line{font-size:12px}.kcards .tf-line.small{display:none}
  .kcards .rt-balls{gap:3px}.kcards .rt-balls span{width:26px;height:26px;font-size:10px}
  .kcards .rt-holdball{transform:scale(.75)}
}
@media (max-width:560px){
  .kcards .tface{min-width:0}
  .kcards .tf-body{padding:8px 6px;min-width:0}
  .kcards .tf-line b{font-size:16px}
  .kcards .rt-balls{flex-wrap:nowrap;justify-content:center}
  .kcards .rt-balls span{width:24px;height:24px;flex:0 0 24px}
}
@media (max-width:560px){
  .keepers{padding:14px 10px}
  .kcards{gap:8px}
  .kcards .tface{padding:12px 8px 8px}
  .kcards .sub{flex-direction:column;gap:0}
  .kcards .tf-line{flex-direction:column;align-items:center;gap:0;text-align:center}
  .kcards .tf-line span{font-size:11px}
  .kcards .rt-balls{gap:2px}
  .kcards .rt-balls span{width:21px;height:21px;flex:0 0 21px;font-size:9px}
  .kcards .rt-balls span small{display:none}
}
/* Live pull tab race board at the top of the Bingo and Pull tabs pages */
.liveraces{display:grid;gap:14px;margin-bottom:20px}
.liverace{border:2px solid var(--hue);border-radius:22px;padding:16px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--hue) 22%,#16112B),#16112B 65%);box-shadow:0 0 30px color-mix(in srgb,var(--hue) 35%,transparent)}
.lr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lr-animal{font-size:30px;display:inline-block;animation:gallop .9s ease-in-out infinite}
.lr-name{font-family:var(--display);font-size:22px;color:var(--hue)}
.lr-tag{font-size:11px;font-weight:800;letter-spacing:.14em;padding:4px 10px;border-radius:999px;background:#E0315A;color:#fff;animation:lrpulse 1.4s ease-in-out infinite}
.lr-tag.over{background:#3A2E10;color:var(--gold);animation:none}
.lr-prize{margin-left:auto;color:var(--muted);font-size:14px}.lr-prize b{color:var(--gold)}
@keyframes lrpulse{50%{opacity:.55}}
@media (min-width:900px){
  .lr-body{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;column-gap:20px;align-items:start}
  .lr-body .callrow,.lr-body .status{grid-column:1}
  .lr-body .raceboard{grid-column:2;grid-row:1 / span 3}
}
@media (prefers-reduced-motion:reduce){.lr-animal,.lr-tag{animation:none}}
/* Early Speedball and Blackout */
.gamepick button.special{border-color:color-mix(in srgb,var(--pink) 55%,var(--line))}
.gamepick button.special[aria-pressed="true"]{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 18%,transparent);color:#fff}
.bundle .bextra{margin:6px 0 10px;font-size:13px;color:var(--muted)}.bundle .bextra b{color:var(--gold)}
.bundle .bbtns{display:grid;gap:8px}
.bundle .bbuy.plus{background:linear-gradient(90deg,var(--pink),var(--gold));color:#1B1200}
.bundle .bbuy.plus:disabled{background:#2A2340;color:var(--dim)}
.specialrow button.special{border:1px solid var(--pink);color:var(--pink)}
.specialrow button.special:disabled{border-color:var(--line);color:var(--dim)}
.redorow button.redo{border:1px solid var(--gold);color:var(--gold)}
.redorow button.redo:disabled{border-color:var(--line);color:var(--dim)}
/* Caller's live microphone */
.micbox{display:inline-flex;align-items:center;gap:8px}
.micbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--pink);color:var(--pink);font-weight:800}
.micbtn .micdot{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.6}
.micbtn.on{background:#E0315A;border-color:#E0315A;color:#fff;box-shadow:0 0 18px rgba(224,49,90,.6)}
.micbtn.on .micdot{opacity:1;animation:lrpulse 1s ease-in-out infinite}
.miclevel{width:60px;height:8px;border-radius:99px;background:var(--deep);overflow:hidden}
.miclevel i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold),#E0315A);transition:width .08s linear}
.voicebtn{display:inline-flex;align-items:center;gap:6px;font-weight:800;border:1px solid var(--line)}
.voicebtn.live{border-color:#E0315A;color:#FF6B8B;animation:voicepulse 1.6s ease-in-out infinite}
.voicebtn.on{background:#123D36;border-color:var(--teal);color:#5CF0D2;animation:none}
.voicebtn.on.live{box-shadow:0 0 14px rgba(53,224,194,.45)}
@keyframes voicepulse{50%{box-shadow:0 0 16px rgba(224,49,90,.6)}}
@media (prefers-reduced-motion:reduce){.voicebtn.live,.micbtn.on .micdot{animation:none}}
.top .voicebtn{font-size:13px;padding:.5em .9em;white-space:nowrap}
@media (min-width:1200px){.top{flex-wrap:nowrap;gap:12px 20px}.top .wallet{margin-left:auto;flex-wrap:nowrap}}
/* Double action paper: once either number is called, the whole square is daubed */
.paper .cell.hit:not(.free){background:var(--pink);border-color:#C2296E;color:#2A0016;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.paper .cell.hit:not(.free) .n{color:#2A0016;opacity:.75}
.paper .cell.hit:not(.free) .n.on{background:#fff;color:#2A0016;opacity:1;box-shadow:0 0 0 1px #C2296E}
.paper .cell.hit.need1{background:var(--pink)}
.paper .cell.win{outline-color:var(--teal);box-shadow:0 0 0 2px var(--teal),inset 0 0 0 2px rgba(255,255,255,.35)}
/* Early Speedball: the orange single-number card */
.card.speed{background:#D4552F;color:#fff;border-radius:14px;padding:8px 10px 10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card.speed .chead{color:#FFE3D6}
.card.speed .ch{color:#fff;font-family:"Rockwell","Roboto Slab","Georgia",serif;font-weight:900;font-size:24px;line-height:1;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.card.speed .cgrid{gap:0;background:#fff;border:2px solid #fff;border-radius:2px}
.card.speed .cell{background:#fff;border:1px solid #D4552F;border-radius:0;color:#111;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:19px;aspect-ratio:1/0.92}
.card.speed .cell .n{padding:0 4px;line-height:1.15}
.card.speed .cell.free{font-size:11px;color:#D4552F;font-weight:800;letter-spacing:.02em}
.card.speed .cell.free::after{display:none}
.card.speed .cell.hit:not(.free){background:#FFC2A0}
.card.speed .n.on{background:#D4552F;color:#fff;border-radius:999px}
.card.speed .cell.need1{background:#FFF1B8}
.card.speed .cfoot{color:#fff}.card.speed .card-pack{color:#FFE3D6}
.card.speed .cfoot button{background:#fff;color:#D4552F}
/* Blackout: black 9-on sheet */
.blackout-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:#0A0A0A;padding:4px;border-radius:10px}
.card.blackout{background:#0A0A0A;color:#fff;border-radius:4px;padding:4px 6px 6px;box-shadow:none}
.card.blackout .chead{color:#bbb;padding-bottom:4px;font-size:10px}
.card.blackout .ch{color:#fff;font-family:"Rockwell","Roboto Slab","Georgia",serif;font-weight:900;font-size:22px;line-height:1.05;position:relative}
.card.blackout .ch.nbox{display:flex;flex-direction:column;align-items:center;font-size:14px;line-height:1}
.card.blackout .ch.nbox small{display:block;background:#fff;color:#000;font-family:Arial,sans-serif;font-weight:800;font-size:9px;letter-spacing:0;padding:1px 4px;border-radius:2px;margin-top:1px}
.card.blackout .cgrid{gap:0;background:#fff;border:1px solid #fff}
.card.blackout .cell{background:#fff;border:1px solid #222;border-radius:0;color:#000;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:18px;aspect-ratio:1/0.9}
.card.blackout .cell .n{padding:0 3px;line-height:1.1}
.card.blackout .cell.free{font-size:9px;font-weight:800;color:#000;display:flex;flex-direction:column;line-height:1}
.card.blackout .cell.free::after{display:none}
.card.blackout .cell.free small{font-size:8px;font-weight:700;opacity:.7}
.card.blackout .cell.hit:not(.free){background:#FFC94A}
.card.blackout .n.on{background:#0A0A0A;color:#FFC94A;border-radius:999px}
.card.blackout .cell.need1{background:#FF9FC6}
.card.blackout .cfoot{color:#fff;padding-top:6px}.card.blackout .card-no{font-size:13px}
.card.blackout .cfoot button{background:#FFC94A;color:#000;min-height:36px;padding:0 10px;font-size:12px}
@media (max-width:700px){.blackout-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card.blackout .cell{font-size:15px}.card.speed .cell{font-size:16px}}
/* Session rows in the game picker */
.gamepick .gp-ses{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:4px 0 -2px}
.gamepick .gp-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.bundleses{margin-bottom:12px}
.card.speed .ch{background:#D4552F;padding:2px 0 4px}
.card.blackout .ch{background:#0A0A0A;padding:2px 0 3px}
#micSel{max-width:190px;font-size:13px;padding:.35em .5em;border-radius:999px}
/* Caller's copy of the "Buy for" panel */
#salesBoard .sb-sold{margin-left:auto}
.sb-sold{font-family:var(--display);font-size:15px;color:var(--gold);white-space:nowrap;padding:0 8px}
.sb-sum{margin:12px 0 10px;font-size:14px;color:var(--muted)}.sb-sum b{color:var(--text,#fff)}
.sb-bsold{display:grid;gap:4px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}.sb-bsold b{color:var(--gold)}
.countdown.salescd{border-color:var(--teal);box-shadow:0 0 26px rgba(53,224,194,.2)}
.countdown.salescd .cd-time{color:#5CF0D2}
/* Bingo freeze */
.frozen-note{margin:-4px 0 16px;padding:12px 18px;border-radius:18px;background:linear-gradient(90deg,#10324A,#1C2450);border:2px solid #7FD3FF;color:#CFEFFF;text-align:center;font-weight:700;box-shadow:0 0 22px rgba(127,211,255,.25)}
.frozen-note b{font-family:var(--display);font-size:20px;color:#fff}
body.bingo-frozen .cfoot button{background:#2A3E5A !important;color:#9CC7E6 !important;animation:none !important}
.freezerow{gap:6px}.freezerow button{min-height:34px;padding:0 12px;border:1px solid #7FD3FF;color:#7FD3FF}
/* Hall paused: "We'll be back in a few moments" */
.hallpause{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(10,7,24,.82);backdrop-filter:blur(4px)}
.hp-card{max-width:520px;width:100%;text-align:center;padding:34px 26px;border-radius:26px;background:linear-gradient(160deg,#2A2147,#1A1433);border:2px solid var(--gold);box-shadow:0 0 50px rgba(255,201,74,.25)}
.hp-icon{font-size:54px;line-height:1;margin-bottom:10px;animation:lrpulse 1.6s ease-in-out infinite}
.hp-card h2{margin:0 0 10px;font-family:var(--display);font-size:clamp(26px,6vw,38px);color:var(--gold);line-height:1.1}
.hp-card p{margin:0 0 12px;font-size:18px;color:#fff}.hp-card p:empty{display:none}
.hp-card small{color:var(--muted);font-size:14px}
.hallbtn{border:1px solid var(--gold) !important;color:var(--gold) !important;font-weight:800}
.hallbanner{position:sticky;top:0;z-index:20;display:grid;gap:12px;padding:16px 18px;border-radius:20px;background:linear-gradient(90deg,#4A1730,#2A2147);border:2px solid #FF5FA2;box-shadow:0 0 30px rgba(255,95,162,.35)}
.hallbanner .hb-text{font-size:15px;line-height:1.45}.hallbanner .hb-text b{font-family:var(--display);font-size:20px;color:#FF8FC0;font-weight:400;margin-right:6px}
@media (prefers-reduced-motion:reduce){.hp-icon{animation:none}}
#micQ{font-size:13px;padding:.35em .5em;border-radius:999px;max-width:130px}
/* Countdown music panel */
.mtrack.off b{opacity:.55}
.mtrack button{min-height:32px;padding:0 10px;font-size:13px}
.filebtn{display:inline-flex;align-items:center;cursor:pointer;padding:.55em 1.1em;border-radius:999px;background:var(--gold);color:#1B1200;font-weight:800}
/* Test mode */
/* Test mode: a slim strip at the very top of the page (it used to float over the bingo numbers) */
.testribbon{display:block;margin:0 -16px;padding:5px 16px;text-align:center;background:#FFC94A;color:#1B1200;font-weight:800;font-size:12px;letter-spacing:.06em}
.testribbon[hidden]{display:none}
.testnote{margin:0 0 6px;padding:10px 14px;border-radius:14px;background:#3A2E10;border:1px solid var(--gold);color:var(--gold);font-weight:700}
.testbtn{border:1px solid var(--gold) !important;color:var(--gold) !important;font-weight:800}
.testbtn.on{background:var(--gold) !important;color:#1B1200 !important}
.tag-test{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#3A2E10;color:var(--gold);font-size:11px;font-weight:800}
/* Roles, owner tools, chat */
.role-caller .owner-only{display:none !important}
.whochip{padding:6px 12px;border-radius:999px;background:#2A2147;border:1px solid var(--line);font-size:13px;font-weight:800;white-space:nowrap}
.ownergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.btnlink{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:inherit;text-decoration:none;font-weight:700;font-size:14px}
.btnlink.primary{background:var(--gold);color:#1B1200;border-color:var(--gold)}
.audit-wrap{max-height:360px;overflow:auto;border-radius:12px;border:1px solid var(--line)}
table.audit{width:100%;border-collapse:collapse;font-size:13px}
table.audit th,table.audit td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.audit th{position:sticky;top:0;background:var(--panel-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
table.audit .r{text-align:right;font-variant-numeric:tabular-nums}table.audit .pos{color:#5CF0D2}table.audit .neg{color:#FF8FA8}
.chatlog{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:12px;background:var(--deep)}
.cmsg{font-size:14px;line-height:1.35;padding:4px 6px;border-radius:8px;overflow-wrap:anywhere}
.cmsg b{color:#9FD8FF}.cmsg.caller{background:rgba(255,201,74,.1)}.cmsg.caller b{color:var(--gold)}.cmsg.mine b{color:#5CF0D2}
.cmsg .ct{font-size:11px;color:var(--dim)}
.cmsg .cact{float:right;display:inline-flex;gap:4px}.cmsg .cact button{min-height:24px;padding:0 6px;font-size:12px}
/* Auto-daub toggle */
.daubtoggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.daubhint{margin:-4px 0 10px;font-size:13px;color:var(--gold)}
.card.manual .n{cursor:pointer}
.card.manual .n:hover{outline:2px dashed var(--pink);outline-offset:1px}
.n.nope{animation:shake .4s ease}
/* Player chat drawer */
.chatfab{position:fixed;left:14px;bottom:14px;z-index:140;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:#2A2147;border:1px solid #7FD3FF;color:#CFEFFF;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.chatfab .badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#E0315A;color:#fff;font-size:12px;display:inline-grid;place-items:center}
.chatdrawer{position:fixed;left:14px;bottom:68px;z-index:145;width:min(360px,calc(100vw - 28px));height:min(460px,calc(100vh - 140px));display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:20px;background:#1A1433;border:1px solid #7FD3FF;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.chatdrawer[hidden]{display:none}
.cd-head{display:flex;justify-content:space-between;align-items:center}.cd-head button{min-height:32px;padding:0 10px}
.chatdrawer .chatlog{flex:1;max-height:none}
.cd-form{display:flex;gap:6px}.cd-form input{flex:1;min-width:0}
.cd-note{margin:0;font-size:12px;color:var(--muted)}
/* Winners board */
.seg.small button{padding:4px 12px;font-size:13px;min-height:32px}
.winlist li{align-items:center}.wamt{font-family:var(--display);color:var(--gold);font-weight:400}
.wrank{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border-radius:50%;background:#3A2E10;color:var(--gold);font-size:12px}
/* Install app */
.installbtn{display:inline-flex;align-items:center;gap:6px;font-weight:800;border:1px solid #5CF0D2 !important;color:#5CF0D2 !important;white-space:nowrap}
.installbtn[hidden]{display:none}
.top .installbtn{font-size:13px;padding:.5em .9em}
.gate .installbtn{width:100%;justify-content:center}
.iossteps{text-align:left;margin:6px 0 18px;padding-left:22px;line-height:1.6;color:#fff}
.shareicon{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #9FD8FF;border-radius:5px;color:#9FD8FF;font-size:13px}
.chatfab[hidden]{display:none}
.studiochk{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer}
/* Caller desk header: let the controls wrap onto a second line instead of squashing */
.top:has(#micBtn){flex-wrap:wrap}
.top:has(#micBtn) .wallet{flex-wrap:wrap !important;justify-content:flex-end;row-gap:8px}
.top:has(#micBtn) .wallet > *,.top:has(#micBtn) .wallet button,.top:has(#micBtn) .brand{white-space:nowrap}
.musicvol{display:inline-flex;align-items:center;gap:4px;font-size:14px}.musicvol[hidden]{display:none}.musicvol input{width:80px}

/* Pull tabs opened popup */
.tabopen{z-index:190}
.tabopen .hp-card{border-color:var(--pink);box-shadow:0 0 50px rgba(255,95,180,.28)}
.tolist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.tolist li{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);display:grid;gap:2px}
.tolist b{font-size:18px;color:#fff}.tolist span{color:var(--muted);font-size:14px}

/* Free space: always daubed (like a marked square), except Hardway bingo where it doesn't count */
.paper .cell.free.hit{background:var(--pink);border-color:#C2296E}
.paper .cell.free.hit::after{background:#fff;color:#C2296E}
.machine .cell.free.hit{background:#262E5E}
.card.speed .cell.free.hit{background:#FFC2A0}
.card.blackout .cell.free.hit{background:#FFC94A}
.cell.free.nofree{opacity:.45;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 6px,transparent 6px 12px)}
.cell.free.nofree::after{background:transparent!important;color:var(--muted)!important;border:1px dashed currentColor;text-decoration:line-through}
.card.speed .cell.free.nofree,.card.blackout .cell.free.nofree{text-decoration:line-through}
.patmini.nofree .pm-grid span.free{opacity:.2}
/* Bingo shown to everyone */
.bcheck{position:fixed;inset:0;z-index:195;display:grid;place-items:center;padding:16px;background:rgba(10,7,24,.8);backdrop-filter:blur(3px);overflow:auto}
.bc-card{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;border-radius:24px;background:linear-gradient(160deg,#2A2147,#1A1433);border:2px solid var(--gold);box-shadow:0 0 50px rgba(255,201,74,.25)}
.bc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bc-head h2{margin:0;font-family:var(--display);color:var(--gold);font-size:clamp(22px,5vw,32px)}
.bc-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bc-item{padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:2px solid var(--line-2);display:grid;gap:6px;justify-items:center;text-align:center}
.bc-item.good{border-color:var(--teal);box-shadow:0 0 30px rgba(53,224,194,.25)}
.bc-item.bad{border-color:#FF5C5C;box-shadow:0 0 30px rgba(255,92,92,.22)}
.bc-verdict{font-family:var(--display);font-size:clamp(24px,6vw,34px);line-height:1.1}
.bc-item.good .bc-verdict{color:var(--teal)}.bc-item.bad .bc-verdict{color:#FF7A7A}
.bc-meta{color:#fff}.bc-why{color:var(--muted);font-size:14px}
.bc-face{width:100%;max-width:300px}.bc-face .card{width:100%}
.showrow{align-items:center;gap:10px;flex-wrap:wrap}
.showbtn{background:var(--gold);color:#1B1200;border-color:#C79A1E}
.showing{font-weight:800;color:var(--gold)}

/* Desk sound mute (M) */
.deskmute{white-space:nowrap}
.deskmute kbd{font:700 11px/1 var(--mono,monospace);padding:2px 5px;border-radius:5px;border:1px solid var(--line-2);margin-left:4px;opacity:.8}
.deskmute.muted{background:#3A1630;border-color:var(--pink);color:#FFB3D1}
/* Ball on its way up the blower tube */
.ball.flying{animation:ballwait .5s ease-in-out infinite alternate}
.ball.flying b,.ball.flying small{opacity:0}
@keyframes ballwait{from{transform:scale(.92);filter:brightness(.85)}to{transform:scale(1);filter:brightness(1.05)}}
@media (prefers-reduced-motion:reduce){.ball.flying{animation:none}}

.micbtn.on.mutedmic{background:#3A1630;border-color:var(--pink);color:#FFB3D1}
.micbtn.on.mutedmic .micdot{animation:none;background:#888}

.blate{margin:4px 0 6px;font-size:13px;font-weight:700;color:var(--gold)}

/* =================== Halloween theme (switched on from the caller desk) =================== */
:root[data-theme="halloween"]{
  --felt:#0D0912; --header:#130B19; --panel:#1A1122; --panel-2:#281833; --deep:#0D0912;
  --line:#33203F; --line-2:#472A5C;
  --text:#FFF3E4; --muted:#CDB8DC; --dim:#9C87AE;
  --gold:#FF8A1C; --pink:#A95CFF; --teal:#8CFF5A; --blue:#FF8A1C; --orange:#FF8A1C;
  --amber-glow:rgba(255,138,28,.5);
  --b:#FF8A1C; --i:#B57BFF; --n:#F3EAD8; --g:#8CFF5A; --o:#FF5050;
  --good:#8CFF5A; --dauber:#A95CFF; --paper:#FFF2DE; --screen:#160E1E; --screen-text:#FFB866;
  --spooky:"Creepster","Bungee",Impact,fantasy;
}
/* Night sky: a big glowing moon, purple haze, green swamp glow */
:root[data-theme="halloween"],:root[data-theme="halloween"] body{background-color:transparent}
:root[data-theme="halloween"]{
  background:
    radial-gradient(circle at 90% 9%, #FFF1C9 0 34px, rgba(255,214,140,.6) 35px, rgba(255,190,100,.18) 50px, rgba(255,170,80,.06) 110px, transparent 170px),
    radial-gradient(ellipse at 50% 120%, rgba(169,92,255,.22), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(140,255,90,.08), transparent 50%),
    var(--felt);
  background-attachment:fixed;
}
:root[data-theme="halloween"] body{padding-bottom:150px}
/* Decoration layer (built by common.js): behind everything, never clickable */
.hw-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hw-bat{position:absolute;left:-90px;width:58px;filter:drop-shadow(0 0 3px rgba(255,138,28,.9)) drop-shadow(0 0 10px rgba(255,138,28,.3));animation:hwfly 24s linear infinite}
.hw-bat svg{display:block;width:100%;animation:hwflap .28s ease-in-out infinite alternate;transform-origin:50% 40%}
.hb1{top:12vh} .hb2{top:30vh;width:40px;animation-duration:31s;animation-delay:-9s} .hb3{top:52vh;width:48px;animation-duration:27s;animation-delay:-17s}
.hb4{top:8vh;width:30px;animation-duration:38s;animation-delay:-4s} .hb5{top:70vh;width:36px;animation-duration:35s;animation-delay:-22s}
@keyframes hwfly{0%{transform:translate(0,0)}25%{transform:translate(30vw,-5vh)}50%{transform:translate(60vw,3vh)}75%{transform:translate(90vw,-4vh)}100%{transform:translate(calc(100vw + 180px),2vh)}}
@keyframes hwflap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.hw-ghost{position:absolute;width:62px;opacity:.28;filter:drop-shadow(0 0 14px rgba(243,236,255,.6));animation:hwghost 16s ease-in-out infinite}
.hg1{left:6vw;bottom:18vh} .hg2{right:8vw;bottom:34vh;width:46px;animation-duration:21s;animation-delay:-7s} .hg3{left:46vw;bottom:10vh;width:38px;animation-duration:19s;animation-delay:-12s}
@keyframes hwghost{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(14px,-26px) rotate(3deg)}50%{transform:translate(-8px,-48px) rotate(-2deg);opacity:.36}75%{transform:translate(-18px,-20px) rotate(4deg)}}
.hw-fog{position:absolute;left:-50%;bottom:-40px;width:200%;height:220px;background:radial-gradient(ellipse at 30% 60%,rgba(205,184,220,.14),transparent 60%),radial-gradient(ellipse at 75% 70%,rgba(205,184,220,.11),transparent 55%);filter:blur(10px);animation:hwfog 40s linear infinite}
.hw-fog.f2{bottom:-70px;opacity:.8;animation-duration:60s;animation-direction:reverse}
@keyframes hwfog{from{transform:translateX(0)}to{transform:translateX(25%)}}
.hw-grave{position:absolute;left:0;right:0;bottom:0;height:140px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%2306030A'%3E%3Cpath d='M0 120q300-30 600 0t600 0v20H0z'/%3E%3Cpath d='M90 125v-48a22 22 0 0144 0v48z'/%3E%3Cpath d='M180 128V92h8V82h8v10h8v36z'/%3E%3Cpath d='M300 126v-38a16 16 0 0132 0v38z'/%3E%3Cpath d='M480 124V70a28 28 0 0156 0v54z'/%3E%3Cpath d='M640 126V96h7V86h8v10h7v30z'/%3E%3Cpath d='M760 124v-42a18 18 0 0136 0v42z'/%3E%3Cpath d='M930 126V80a24 24 0 0148 0v46z'/%3E%3Cpath d='M1080 127V95h7V84h9v11h7v32z'/%3E%3Cpath d='M380 128c4-30-2-50-14-70 10 8 16 6 20-6-2 14 4 24 12 30-10-2-14 4-12 12 6-6 14-6 22 0-10 2-16 10-14 34z'/%3E%3Cpath d='M1000 126c6-40 0-66-16-90 14 10 22 8 26-8-2 18 6 30 16 38-12-2-18 6-16 16 8-8 18-8 28 0-14 2-22 12-20 44z'/%3E%3Cg stroke='%2306030A' stroke-width='3'%3E%3Cpath d='M560 132h70M570 132v-26M585 132v-26M600 132v-26M615 132v-26'/%3E%3Cpath d='M820 132h80M830 132v-24M846 132v-24M862 132v-24M878 132v-24M894 132v-24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom center/auto 100% repeat-x;opacity:.95}
/* Top bar: spooky name, glowing pumpkin, slime dripping off the bottom edge, a spider hanging down */
:root[data-theme="halloween"] .top{border-bottom:0;box-shadow:0 6px 24px rgba(255,138,28,.14)}
:root[data-theme="halloween"] .top::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath fill='%23FF8A1C' d='M0 0h120v4c-4 0-5 3-6 7s-2 6-4 6-3-3-3-6-1-5-4-5-4 2-5 4-1 3-3 3-2-2-3-4-2-4-5-4-4 4-5 8-2 5-4 5-3-3-3-6-2-6-5-6-3 2-4 3-2 2-3 2-3-2-4-3-3-2-6-2-4 3-5 6-2 8-4 8-3-5-3-8-2-6-5-6-5 2-6 4-2 3-4 3-3-3-4-5-3-4-6-4z'/%3E%3C/svg%3E") top left/240px 100% repeat-x;filter:drop-shadow(0 2px 4px rgba(255,138,28,.35))}
:root[data-theme="halloween"] .brand{font-family:var(--spooky);font-size:34px;letter-spacing:.04em;color:#FF8A1C;text-shadow:0 0 14px rgba(255,138,28,.7),0 2px 0 #5A2400}
:root[data-theme="halloween"] .brand .luna{font-family:inherit}
:root[data-theme="halloween"] .brand::before{content:"🎃 ";display:inline-block;animation:hwglow 2.4s ease-in-out infinite}
:root[data-theme="halloween"] .brand span::after{content:" · 👻";color:var(--gold)}
@keyframes hwglow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,138,28,.6))}50%{filter:drop-shadow(0 0 14px rgba(255,138,28,1))}}
.hw-spider{position:absolute;right:22%;top:100%;width:26px;pointer-events:none;z-index:2;transform-origin:50% 0;animation:hwspider 5s ease-in-out infinite}
.hw-spider i{display:block;width:1px;height:46px;margin:0 auto;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.55))}
.hw-spider svg{display:block;width:26px;margin-top:-4px}
@keyframes hwspider{0%,100%{transform:translateY(-22px) rotate(-3deg)}50%{transform:translateY(0) rotate(3deg)}}
/* Panels: a little see-through so the night shows behind, cobwebs in the corner, spooky headings */
:root[data-theme="halloween"] .panel{position:relative;background:rgba(26,17,34,.9);backdrop-filter:blur(2px);box-shadow:inset 0 1px 0 rgba(255,138,28,.08),0 10px 30px rgba(0,0,0,.35)}
:root[data-theme="halloween"] .panel::after{content:"";position:absolute;top:0;right:0;width:96px;height:96px;pointer-events:none;opacity:.13;border-top-right-radius:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M100 0L0 100M100 0L30 100M100 0L0 30M100 0L60 100M100 0L0 60'/%3E%3Cpath d='M86 0Q90 10 100 14M70 0Q78 22 100 30M52 0Q64 36 100 48M32 0Q48 52 100 68M12 0Q30 70 100 88'/%3E%3C/svg%3E") top right/100% no-repeat}
:root[data-theme="halloween"] h2.h,:root[data-theme="halloween"] .panel > h2{font-family:var(--spooky);font-weight:400;letter-spacing:.04em;color:#FFB45C;font-size:1.55em}
/* Bingo board and the monitor ball as a pumpkin */
:root[data-theme="halloween"] .lbl{font-family:var(--spooky);font-size:clamp(14px,2.2vw,22px)}
:root[data-theme="halloween"] .num.lit{background:radial-gradient(circle at 40% 35%,#FFB15C,#FF8A1C 55%,#D9620A);border-color:#FF8A1C;color:#1E0B00;box-shadow:0 0 12px rgba(255,138,28,.6)}
:root[data-theme="halloween"] .num.last{box-shadow:0 0 0 3px #8CFF5A,0 0 18px rgba(140,255,90,.7)}
:root[data-theme="halloween"] .ball{position:relative;background:radial-gradient(circle at 38% 32%,#FFF7EA,#FFE2BC 60%,#FFC98A);box-shadow:0 0 0 5px var(--c,#472A5C),0 0 34px color-mix(in srgb,var(--c,#FF8A1C) 60%,transparent)}
:root[data-theme="halloween"] .ball::before{content:"";position:absolute;top:-13px;left:50%;width:10px;height:14px;margin-left:-5px;border-radius:3px 6px 2px 2px;background:#3E7A1E;box-shadow:inset -2px 0 0 #2B5813;transform:rotate(12deg)}
:root[data-theme="halloween"] .callbar .ball::before{display:none}
:root[data-theme="halloween"] .patmini{border-color:#5A2E12}
/* Cards */
:root[data-theme="halloween"] .card.paper{background:linear-gradient(#FFE3BD 0 34px,var(--paper) 34px);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,138,28,.35)}
:root[data-theme="halloween"] .paper .cell.hit:not(.free),:root[data-theme="halloween"] .paper .cell.free.hit{background:#A95CFF;border-color:#7A35D0;color:#fff}
:root[data-theme="halloween"] .paper .cell.hit:not(.free) .n{color:#fff;opacity:.85}
:root[data-theme="halloween"] .paper .cell.hit:not(.free) .n.on{background:#FF8A1C;color:#1E0B00;box-shadow:0 0 0 1px #B85A00}
:root[data-theme="halloween"] .cell.free.hit::after{content:"🎃"!important;background:transparent!important;font-size:16px}
:root[data-theme="halloween"] .primary{color:#1E0B00;box-shadow:0 0 16px rgba(255,138,28,.35)}
/* Big moments */
:root[data-theme="halloween"] .banner{background:rgba(13,9,18,.72)}
:root[data-theme="halloween"] .banner b{font-family:var(--spooky);color:#8CFF5A;letter-spacing:.04em;text-shadow:0 4px 0 #1F4A0A,0 0 40px rgba(140,255,90,.6),0 0 90px rgba(255,138,28,.5)}
:root[data-theme="halloween"] .banner b::before{content:"🎃 "} :root[data-theme="halloween"] .banner b::after{content:" 👻"}
:root[data-theme="halloween"] .hp-card,:root[data-theme="halloween"] .bc-card{border-color:var(--gold);background:linear-gradient(160deg,#2A1633,#170D1E)}
:root[data-theme="halloween"] .hp-card h2,:root[data-theme="halloween"] .bc-head h2,:root[data-theme="halloween"] .bc-verdict{font-family:var(--spooky);letter-spacing:.04em}
:root[data-theme="halloween"] .gate h1,:root[data-theme="halloween"] #gate h1,:root[data-theme="halloween"] #gate .brand{font-family:var(--spooky);color:#FF8A1C;text-shadow:0 0 14px rgba(255,138,28,.6)}
@media (prefers-reduced-motion:reduce){.hw-bat,.hw-bat svg,.hw-ghost,.hw-fog,.hw-spider,:root[data-theme="halloween"] .brand::before{animation:none} .hw-bat{left:auto;right:10vw}}
@media (max-width:640px){.hw-spider{right:12%} :root[data-theme="halloween"] .brand{font-size:28px} .hw-grave{height:100px}}
/* Caller desk theme switch */
.themepick button[aria-pressed="true"]{background:var(--gold);color:#1B1200;border-color:var(--gold)}

/* Link to Football Squares */
nav .navlink{display:inline-flex;align-items:center;border-radius:999px;padding:0 16px;font-size:14px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap}
nav .navlink:hover{background:var(--panel-2)}
.sqgate{display:block;margin:-4px 0 14px;padding:10px 12px;border-radius:12px;background:#0E1433;border:1px solid #FFC93C;color:#FFC93C;font-weight:700;text-decoration:none;text-align:center}
.btnlink{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:var(--gold);color:#1B1200;font-weight:700;text-decoration:none}

/* Caller desk: Football Squares pick alerts */
#sqToasts{position:fixed;right:16px;bottom:16px;z-index:300;display:grid;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.sqtoast{padding:12px 14px;border-radius:14px;background:#0E1433;border:2px solid #FFC93C;color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;animation:sqin .25s ease-out}
@keyframes sqin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sqtoast{animation:none}}
.sqalerts{gap:10px;flex-wrap:wrap}

.sqtoast{white-space:pre-line}
.sqqrow{gap:6px;margin-top:6px}
.sqpick .sqans{display:block;font-size:13px;color:var(--text);margin-top:2px}
.sqpick .sqans i{font-style:normal;color:var(--muted)}
.sqstate{margin:6px 0 0;font-weight:700}.sqstate.on{color:var(--good)}.sqstate.off{color:#FF8FB4}