[hidden]{display:none!important}
/* SNAPPY — tokens from the locked Brand Bible / UI Implementation handoff v1 (Drive: 02 + 04). */
:root{
  --swamp:#070A08; --swamp-1:#0C120E; --swamp-2:#111A14; --swamp-3:#18241B; --line:#223126; --line-2:#2E4233;
  --acid:#A8FF3E; --acid-dim:#6FAE23; --purple:#9B2CFF; --purple-dim:#5B1A99; --gold:#FFBF3E; --pink:#FF3F9E;
  --cyan:#72E8E8; --bone:#F5F2E8; --muted:#94A39A;
  --f-display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --fast:140ms; --normal:220ms; --bounce:360ms cubic-bezier(.3,1.6,.5,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--swamp);color:var(--bone)}
body{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:0 32px;min-height:100dvh;
  background:
    radial-gradient(900px 520px at 100% -5%, rgba(155,44,255,.20), transparent 60%),
    radial-gradient(800px 520px at -10% 105%, rgba(168,255,62,.10), transparent 60%),
    var(--swamp);
  background-attachment:fixed}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--acid)}
:focus-visible{outline:3px solid var(--acid);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.wrap{max-width:1440px;margin:0 auto}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fine{font-size:12px;color:var(--muted);text-align:center;margin:0}
.fine a{color:var(--bone)}
.bmp{color:var(--purple);font-weight:800;letter-spacing:.04em}
.endorse{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.endorse b{display:block;color:var(--purple);font-size:15px;letter-spacing:.06em}
.hand{font-family:var(--f-hand);font-weight:400}

/* ---------- pieces ---------- */
.logo{display:block;height:auto}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acid);color:var(--acid);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.wait{border-color:var(--gold);color:var(--gold)}
.pill.lock{border-color:var(--purple);color:#C996FF}
.pill.bite{border-color:var(--pink);color:var(--pink)}
.pill.done{border-color:var(--gold);color:var(--gold)}
.bal{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--swamp-2);border-radius:999px;padding:4px 14px 4px 4px;font-weight:800;font-size:14px;white-space:nowrap}
.bal img{width:28px;height:28px;object-fit:contain}
.bal small{color:var(--muted);font-weight:700;font-size:11px;letter-spacing:.08em}
.card{background:rgba(17,26,20,.82);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:grid;gap:12px;min-width:0}
.card h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-md);min-height:52px;padding:0 20px;font-family:var(--f-display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  background:var(--acid);color:var(--swamp);transition:transform var(--fast),box-shadow var(--fast),background var(--fast)}
.btn:hover{box-shadow:0 0 0 4px rgba(168,255,62,.18),0 8px 28px rgba(168,255,62,.25)}
.btn:active{transform:scale(.97)}
.btn.purple{background:var(--purple);color:var(--bone)}
.btn.purple:hover{box-shadow:0 0 0 4px rgba(155,44,255,.25),0 8px 28px rgba(155,44,255,.3)}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--bone);box-shadow:none}
.btn.gold{background:var(--gold);color:var(--swamp)}
.btn.sm{min-height:40px;font-size:16px;padding:0 14px;border-radius:var(--r-sm)}
.btn.full{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.field{display:grid;gap:6px}
.field label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
input,select{width:100%;background:var(--swamp-1);border:1px solid var(--line-2);color:var(--bone);border-radius:var(--r-md);padding:13px 14px;font:inherit}
input:focus{border-color:var(--acid);outline:none;box-shadow:0 0 0 3px rgba(168,255,62,.18)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg button{background:var(--swamp-1);border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 4px;font-weight:800;display:grid;justify-items:center;gap:2px;min-height:48px}
.seg button small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.seg button[aria-pressed="true"]{border-color:var(--acid);color:var(--acid);background:rgba(168,255,62,.08)}
.err{color:var(--pink);font-size:13px;min-height:1em;font-weight:600}
.tag{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:6px;border:1px solid var(--line-2);color:var(--muted)}
.tag.you{border-color:var(--purple);color:#C996FF}
.tag.h2h{border-color:var(--gold);color:var(--gold)}
.avatar{border-radius:50%;display:inline-grid;place-items:center;font-weight:800;flex:none;color:var(--swamp)}
.pos-n{color:var(--acid)} .neg-n{color:var(--pink)}
.ok{color:var(--acid);font-weight:800} .bad{color:var(--pink);font-weight:800}
.hash{font-family:var(--f-mono);font-size:12px;color:var(--muted);word-break:break-all}
.toast{position:fixed;left:16px;right:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));max-width:448px;margin:0 auto;background:var(--bone);color:var(--swamp);border-radius:var(--r-md);padding:12px 14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.6);transform:translateY(20px);opacity:0;transition:var(--normal);pointer-events:none;z-index:30}
.toast.on{transform:none;opacity:1}
.offline{position:fixed;top:0;left:0;right:0;background:var(--pink);color:var(--swamp);text-align:center;font-weight:800;font-size:13px;padding:6px;z-index:40}

/* ---------- the board: Snappy's face + shield teeth ---------- */
.board{position:relative;display:grid;justify-items:center;gap:8px;min-width:0;width:100%}
.board .face{position:relative;width:min(100%,var(--face,340px));aspect-ratio:1/0.95}
.board .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:opacity var(--normal),transform var(--normal);filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
.board .face img.off{opacity:0;transform:scale(.96)}
.board .face img.breathe{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.012)}}
.board .count{position:absolute;left:0;right:0;top:22%;text-align:center;font-family:var(--f-display);font-size:calc(var(--face,340px)*.46);line-height:1;color:var(--gold);text-shadow:0 6px 0 #6b4400,0 0 40px rgba(255,191,62,.6);pointer-events:none;opacity:0;transform:scale(.6)}
.board .count.on{opacity:1;transform:none;transition:transform 260ms cubic-bezier(.3,1.8,.5,1),opacity 120ms}
.board .chomp{position:absolute;top:0;left:0;right:0;text-align:center;font-family:var(--f-hand);font-size:calc(var(--face,340px)*.2);color:var(--gold);text-shadow:0 4px 0 #6b4400,0 0 30px rgba(255,191,62,.55);opacity:0;transform:rotate(-6deg) scale(.4);pointer-events:none;z-index:2}
.board .chomp.on{opacity:1;transform:rotate(-6deg) scale(1);transition:transform 220ms cubic-bezier(.3,2,.5,1),opacity 80ms}
.board.shake{animation:shake .42s linear}
@keyframes shake{0%,100%{transform:none}12%{transform:translate(-12px,5px) rotate(-.8deg)}28%{transform:translate(10px,-4px) rotate(.6deg)}44%{transform:translate(-7px,3px)}60%{transform:translate(5px,-2px)}78%{transform:translate(-3px,1px)}}
.teeth{position:relative;display:grid;grid-template-columns:repeat(var(--n,13),minmax(0,1fr));gap:var(--tgap,5px);width:100%;padding:14px 10px 10px;background:rgba(7,10,8,.72);border:1px solid var(--line);border-radius:var(--r-lg);margin-top:-6px}
.tooth{position:relative;display:grid;justify-items:center;gap:4px;background:none;border:0;padding:0;min-width:0;color:inherit}
.tooth .shield{width:100%;max-width:64px;aspect-ratio:.8;display:grid;place-items:start center;padding-top:20%;background:var(--bone);color:var(--swamp);font-family:var(--f-display);font-size:clamp(13px,var(--tfs,3.6vw),30px);line-height:1;
  clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);transition:transform var(--fast),background var(--fast),filter var(--fast)}
.tooth .amt{font-size:11px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.2em;white-space:nowrap}
.tooth .amt.has{color:var(--gold)}
.board.interactive .tooth{cursor:pointer}
.board.interactive:not(.locked) .tooth:hover .shield{transform:translateY(-4px);background:#FFF1C9}
.tooth.hot .shield{background:var(--gold)}
.tooth.backed .shield{background:var(--purple);color:var(--bone)}
.tooth.selected .shield{background:var(--acid);color:var(--swamp);transform:translateY(-6px)}
.tooth.backed::after{content:"";position:absolute;top:-8px;left:50%;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--purple)}
.board.locked .tooth:not(.backed):not(.bite) .shield{filter:brightness(.5)}
.tooth.pressed .shield{filter:brightness(.38);transform:translateY(8px)}
.tooth.bite .shield{background:var(--pink);color:var(--swamp);filter:none!important;animation:bitepop .5s cubic-bezier(.3,2,.5,1) forwards}
.tooth.bite.backed .shield{background:var(--gold)}
@keyframes bitepop{0%{transform:scale(.6)}100%{transform:scale(1.1)}}
.flyer{position:absolute;width:46px;height:46px;pointer-events:none;z-index:5;margin:-23px 0 0 -23px;animation:fly .55s cubic-bezier(.25,.8,.3,1) forwards}
@keyframes fly{0%{transform:translate(var(--fx),var(--fy)) scale(1.3);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(0,0) scale(.5);opacity:0}}

/* Critter Chip selector */
.critters{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(62px,1fr);gap:4px;overflow-x:auto;padding:8px 2px 4px;scrollbar-width:none}
.critters::-webkit-scrollbar{display:none}
.critter{background:none;border:1px solid transparent;border-radius:var(--r-md);padding:4px 2px 6px;display:grid;justify-items:center;gap:2px;transition:transform var(--bounce),border-color var(--fast);color:var(--bone)}
.critter img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.critter span{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.critter[aria-pressed="true"]{border-color:var(--acid);background:rgba(168,255,62,.07);transform:translateY(-4px) scale(1.06)}
.critter:disabled{opacity:.28}

/* ---------- phone ---------- */
.phone-page{max-width:480px;margin:0 auto;display:grid;gap:14px;padding-block:12px 104px}
.ph-top{display:flex;align-items:center;gap:10px}
.ph-top .logo{width:92px}
.ph-top .bal{margin-left:auto}
.ph-title{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1;text-transform:uppercase;margin:0;letter-spacing:.01em}
.ph-title small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted);text-transform:none;font-weight:600;margin-top:5px;letter-spacing:0}
.ph-body{display:grid;gap:14px}
.ph-nav{position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(12,18,14,.94);backdrop-filter:blur(10px);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:6px 6px calc(12px + env(safe-area-inset-bottom,0px))}
.ph-nav button{background:none;border:0;padding:8px 2px;border-radius:10px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:grid;gap:3px;justify-items:center}
.ph-nav button[aria-pressed="true"]{color:var(--acid)}
.ph-nav svg{width:22px;height:22px}
.status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-row .right{margin-left:auto;font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.mouth-line{text-align:center;font-family:var(--f-display);font-size:20px;letter-spacing:.03em;text-transform:uppercase;min-height:1.2em}
.mouth-line .n{color:var(--gold)}
.mouth-line.hot .n{color:var(--pink)}
.summary{display:flex;align-items:center;gap:12px;background:var(--swamp-1);border:1px solid var(--line-2);border-radius:var(--r-md);padding:8px 12px;min-height:62px}
.summary img{width:44px;height:44px;object-fit:contain}
.summary b{display:block;font-family:var(--f-display);font-weight:400;font-size:18px;letter-spacing:.02em;text-transform:uppercase}
.summary span{font-size:12px;color:var(--muted)}
.mine-row{display:flex;gap:6px;flex-wrap:wrap}
.mine-row span{border:1px solid var(--purple);color:#D9B8FF;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.result{border-radius:var(--r-lg);padding:16px;text-align:center;display:grid;gap:4px;border:1px solid var(--line-2);background:var(--swamp-1)}
.result .big{font-family:var(--f-display);font-size:44px;line-height:1;text-transform:uppercase}
.result .sub{font-family:var(--f-display);font-size:22px;text-transform:uppercase}
.result.win{border-color:var(--gold);box-shadow:0 12px 40px rgba(255,191,62,.15)}
.result.win .big{color:var(--gold)} .result.win .sub{color:var(--acid)}
.result.lose{border-color:var(--pink)} .result.lose .hand{color:var(--pink);font-size:24px}
.result.none .big{font-size:30px}
.result .row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.result .row .btn{flex:1}
.list{display:grid;gap:8px}
.lrow{display:flex;align-items:center;gap:10px;background:var(--swamp-1);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.lrow .sub{font-size:12px;color:var(--muted)}
.lrow .end{margin-left:auto;text-align:right}
.incoming{background:rgba(155,44,255,.14);border:1px solid var(--purple);border-radius:var(--r-lg);padding:12px;display:grid;gap:10px}
.incoming .row{display:flex;gap:8px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:var(--swamp-1);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;text-align:center}
.stats b{display:block;font-family:var(--f-display);font-weight:400;font-size:24px}
.stats span{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.code{font-family:var(--f-mono);font-size:22px;letter-spacing:.14em;color:var(--acid);text-align:center;background:var(--swamp-1);border:1px dashed var(--acid-dim);border-radius:var(--r-md);padding:10px}
.turn{font-family:var(--f-display);font-size:24px;text-transform:uppercase}
.turn.me{color:var(--acid)} .turn.them{color:var(--muted)}
.timer-bar{height:6px;border-radius:3px;background:var(--swamp-3);overflow:hidden}
.timer-bar i{display:block;height:100%;background:var(--acid);transition:width .25s linear}
.timer-bar.hot i{background:var(--pink)}

/* sign-in */
.welcome{max-width:440px;margin:0 auto;display:grid;gap:14px;padding-block:20px 40px;justify-items:center;text-align:center}
.welcome .logo{width:min(240px,66%)}
.welcome .hero{width:min(210px,56%);margin:-4px 0 -34px;position:relative;z-index:0;animation:breathe 3.4s ease-in-out infinite}
.welcome .card{width:100%;position:relative;z-index:1;text-align:left}
.welcome h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:28px;letter-spacing:.02em;text-transform:uppercase;text-align:center}
.welcome .lede{text-align:center;color:var(--muted);margin:-8px 0 0}
.social{display:grid;gap:8px}
.social a{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-md);min-height:50px;font-weight:700;text-decoration:none}
.social .g{background:#F4F6F5;color:#111}
.social .a{background:#000;color:#fff;border:1px solid #333}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ---------- big screen ---------- */
.screen-page{padding-inline:clamp(16px,2.5vw,48px);padding-block:18px 14px;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;overflow:hidden}
.scr-top{display:flex;align-items:center;gap:18px}
.scr-top .logo{width:clamp(110px,9vw,170px)}
.scr-top .meta{margin-left:auto;display:flex;align-items:center;gap:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(12px,1vw,16px);color:var(--muted)}
.scr-top .meta b{color:var(--bone)}
.stage{position:relative;display:grid;min-height:0}
.state{display:none;min-height:0}
.state.on{display:grid}
.attract{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:3vw}
.attract .copy{display:grid;gap:2.4vh;align-content:center}
.attract .logo{width:min(30vw,500px)}
.attract h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(48px,6.2vw,120px);line-height:.95;color:var(--acid);text-transform:uppercase}
.attract .sub{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(14px,1.3vw,22px)}
.attract .art{position:relative;height:100%;min-height:0;display:grid;place-items:center}
.attract .art > img{width:100%;height:100%;max-height:70vh;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));animation:breathe 3.6s ease-in-out infinite}
.qrbox{display:flex;align-items:center;gap:20px}
.qr{background:#fff;padding:12px;border-radius:14px;line-height:0}
.qr img,.qr canvas{width:var(--qr,180px)!important;height:var(--qr,180px)!important}
.qrbox .url{font-family:var(--f-display);font-size:clamp(26px,2.4vw,44px);line-height:1}
.qrbox .scan{color:var(--acid);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(12px,1vw,16px)}
.live{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:1.2vh}
.live .board{--face:min(50vh,560px);max-width:1300px}
.live .teeth{--tgap:1vw;padding:2vh 2vw 1.4vh}
.live .tooth .shield{max-width:96px;--tfs:2.3vw}
.live .tooth .amt{font-size:clamp(12px,1.1vw,20px)}
.live .line{font-family:var(--f-display);font-size:clamp(24px,2.6vw,48px);text-transform:uppercase;letter-spacing:.02em;text-align:center}
.live .line .n{color:var(--gold)}
.live .line.hot .n{color:var(--pink)}
.corner-qr{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:12px;--qr:120px;text-align:right}
.corner-qr .qr{padding:8px;border-radius:10px}
.corner-qr .scan{color:var(--acid);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.corner-qr .url{font-family:var(--f-display);font-size:24px}
.resultst{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:3vw}
.resultst .art{height:100%;min-height:0;display:grid;place-items:center}
.resultst .art > img{width:100%;height:100%;max-height:70vh;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.resultst .chomp{font-family:var(--f-hand);font-size:clamp(70px,8.5vw,160px);color:var(--gold);line-height:1;text-shadow:0 8px 0 #6b4400,0 0 50px rgba(255,191,62,.5);transform:rotate(-5deg);transform-origin:left}
.resultst .bites{font-family:var(--f-display);font-size:clamp(44px,5vw,96px);line-height:1;text-transform:uppercase;margin-top:1vh}
.resultst .panel{border:2px solid var(--pink);border-radius:var(--r-xl);padding:2.2vh 2vw;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1.2vh 2vw;max-width:640px;background:rgba(7,10,8,.7);margin-top:2.4vh}
.resultst .panel .k{font-size:clamp(12px,1vw,16px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.resultst .panel .v{font-family:var(--f-display);font-size:clamp(26px,2.4vw,46px);text-align:right}
.resultst .winners{margin-top:2vh;display:flex;gap:10px;flex-wrap:wrap}
.resultst .winners span{border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:6px 14px;font-weight:800;font-size:clamp(14px,1.1vw,20px)}
.scr-foot{display:flex;align-items:center;gap:2.4vw;flex-wrap:wrap}
.scr-foot .tick{display:grid;gap:2px}
.scr-foot .tick .v{font-family:var(--f-display);font-size:clamp(22px,1.9vw,36px);line-height:1}
.scr-foot .tick .v.gold{color:var(--gold)}
.lb{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.lb .row{display:flex;align-items:center;gap:8px;background:var(--swamp-2);border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 5px;font-weight:700;font-size:clamp(12px,1vw,16px)}
.lb .pos{width:26px;height:26px;border-radius:50%;background:var(--acid);color:var(--swamp);display:grid;place-items:center;font-weight:900;font-size:13px}
.lb .row:first-child .pos{background:var(--gold)}
.screen-controls{position:fixed;right:12px;top:12px;display:flex;gap:8px;opacity:.2;z-index:20}
.screen-controls:hover{opacity:1}

/* ---------- operator ---------- */
.office{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;max-width:1500px;margin:0 auto;padding-block:20px}
.side{display:grid;gap:4px;align-content:start;position:sticky;top:20px}
.side .logo{width:120px;margin:0 0 18px 8px}
.side button{background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:10px 12px;text-align:left;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.side button[aria-pressed="true"]{border-color:var(--acid);color:var(--acid);background:rgba(168,255,62,.06)}
.side .foot{margin-top:24px;padding:0 10px;display:grid;gap:6px}
@media (max-width:900px){.office{grid-template-columns:minmax(0,1fr)}.side{position:static;grid-auto-flow:column;overflow-x:auto}.side .logo,.side .foot{display:none}}
.o-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.o-head h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3vw,44px);text-transform:uppercase;letter-spacing:.01em}
.o-head .r{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.health{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acid);display:inline-flex;gap:8px;align-items:center}
.health::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.health.bad{color:var(--pink)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--swamp-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:grid;gap:6px}
.kpi .v{font-family:var(--f-display);font-size:30px;line-height:1}
.kpi .v.acid{color:var(--acid)} .kpi .v.gold{color:var(--gold)} .kpi .v.purple{color:#C996FF}
.kpi .s{font-size:12px;color:var(--muted)}
.ogrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}
@media (max-width:1150px){.ogrid{grid-template-columns:minmax(0,1fr)}}
.ocol{display:grid;gap:18px;align-content:start;min-width:0}
.box{background:var(--swamp-1);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:grid;gap:12px;min-width:0}
.box-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.box-h h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase}
.box-h .r{margin-left:auto;font-size:12px;color:var(--muted)}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--swamp-2)}
tr.sel td{background:rgba(168,255,62,.07)}
.ledger td{font-family:var(--f-mono);font-size:12px}
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.kv span:first-child{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.feedlist{display:grid;gap:8px;font-size:13px}
.feedlist div{display:flex;gap:10px}
.feedlist .t{color:var(--muted);font-family:var(--f-mono);font-size:12px;flex:none}
.nocash{font-size:12px;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:10px 12px}
.view{display:none}
.view.on{display:block}
.grp{display:flex;align-items:center;gap:12px;background:var(--swamp-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.grp .gcode{font-family:var(--f-display);font-size:20px;color:var(--acid);letter-spacing:.04em}
.grp .end{margin-left:auto}

/* ---------- verify / privacy ---------- */
.verify{max-width:760px;margin:0 auto;padding-block:28px;display:grid;gap:16px}
.verify .logo{width:110px}
.verify h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(34px,6vw,56px);text-transform:uppercase;line-height:1}
.verify h1 span{color:var(--acid)}
.prose{display:grid;gap:12px;font-size:15px;line-height:1.6}
.prose h2{margin:6px 0 0;font-family:var(--f-display);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.prose p,.prose ul{margin:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body.screen-body{padding:0;background-attachment:fixed}

/* phone board: a smaller Snappy, teeth in two rows of big targets */
.phone-page .board{--face:min(60vw,230px)}
.phone-page .teeth{--tgap:6px;row-gap:10px;padding:14px 12px 8px}
.phone-page .tooth .shield{max-width:52px;--tfs:6vw;font-size:clamp(16px,6vw,26px)}
.phone-page .tooth .amt{font-size:10px}
.ph-body>*,.phone-page>*{min-width:0}
/* once the mouth locks, your committed tooth reads as BACKED (purple), not SELECTED */
.board.locked .tooth.selected:not(.backed) .shield{background:var(--bone);color:var(--swamp);transform:none;filter:brightness(.5)}
.board.locked .tooth.backed .shield{background:var(--purple);color:var(--bone);transform:translateY(-4px)}
.board.locked .tooth.backed.bite .shield{background:var(--gold);color:var(--swamp)}

/* sign-in: stacked on phones, Snappy and the form side by side on desktop */
.welcome .w-art,.welcome .w-form{display:grid;gap:14px;justify-items:center;width:100%}
.welcome .w-art picture{display:contents}
@media (min-width:900px){
  .welcome.home{max-width:1180px;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:center;gap:56px;min-height:calc(100dvh - 40px);padding-block:24px}
  .welcome.home .w-art{justify-items:start;text-align:left;align-content:center}
  .welcome.home .w-art .logo{width:min(380px,70%)}
  .welcome.home .w-art .hero{width:min(560px,100%);margin:0;max-height:62vh;object-fit:contain;justify-self:center}
  .welcome.home .w-form .card{padding:24px}
}
/* Snappy / Snappy Live toggle */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--swamp-1);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:5px}
.modes button{background:none;border:1px solid transparent;border-radius:var(--r-md);padding:9px 6px;display:grid;gap:1px;justify-items:center;color:var(--muted)}
.modes b{font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.modes small{font-size:11px;font-weight:600}
.modes button[aria-selected="true"]{background:rgba(168,255,62,.08);border-color:var(--acid);color:var(--bone)}
.modes button[data-m="live"][aria-selected="true"]{background:rgba(255,63,158,.1);border-color:var(--pink)}
.modes .dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:livepulse 1.4s infinite}
@keyframes livepulse{50%{opacity:.35}}
/* live head to head: back a player */
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px}
.match .vs{align-self:center;font-family:var(--f-hand);font-size:26px;color:var(--gold)}
.match .pick{position:relative;display:grid;gap:4px;justify-items:center;align-content:center;min-height:150px;padding:14px 8px;border-radius:var(--r-lg);border:2px solid var(--line-2);background:var(--swamp-1);color:var(--bone);transition:transform var(--fast),border-color var(--fast)}
.match .pick .who{font-family:var(--f-display);font-size:26px;line-height:1;text-transform:uppercase;text-align:center;word-break:break-word}
.match .pick .pot{font-family:var(--f-display);font-size:22px;color:var(--gold)}
.match .pick .pot small{font-family:var(--f-body);font-size:11px;color:var(--muted)}
.match .pick .muted{font-size:12px}
.match .pick.selected{border-color:var(--acid);background:rgba(168,255,62,.08);transform:translateY(-3px)}
.match .pick.backed{border-color:var(--purple)}
.match .pick.snapped{border-color:var(--pink);opacity:.7}
.match .pick.won{border-color:var(--gold);box-shadow:0 10px 30px rgba(255,191,62,.18)}
.match .pick .tagline{font-size:20px;color:var(--gold)}
.match .pick.snapped .tagline{color:var(--pink)}
.match .pick:disabled{cursor:default}

.match.big{width:min(1100px,92vw);gap:2vw}
.match.big .pick{min-height:38vh;border-width:3px}
.match.big .pick .who{font-size:clamp(40px,5vw,96px)}
.match.big .pick .pot{font-size:clamp(30px,3vw,56px)}
.match.big .pick .muted{font-size:clamp(14px,1.2vw,22px)}
.match.big .pick .tagline{font-size:clamp(30px,3vw,60px)}
.match.big .vs{font-size:clamp(40px,4vw,80px)}

/* ===================== MOTION (Logo Motion System v01 + Product Motion System v01) ===================== */
/* layered logo: underline-snap / snappy-wordmark / casino-word inside "whole" */
.slogo{position:relative;display:inline-block;width:var(--lw,160px);aspect-ratio:900/521;line-height:0}
.slogo .whole{position:absolute;inset:0;transform-origin:50% 60%}
.slogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none}
.slogo .l-flash{position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,242,232,.85),rgba(168,255,62,.35) 45%,transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.slogo.full .l-under{animation:lUnder 180ms cubic-bezier(.16,1,.3,1) both}
.slogo.full .l-word{animation:lWord 340ms cubic-bezier(.16,1,.3,1) 80ms both}
.slogo.full .l-casino{animation:lCasino 270ms cubic-bezier(.16,1,.3,1) 280ms both}
.slogo.full .l-flash{animation:lFlash 160ms ease-out 680ms both}
.slogo.full .whole{animation:lChomp 230ms cubic-bezier(.2,.8,.2,1) 750ms both}
.slogo.sting .l-under{animation:lUnder 90ms cubic-bezier(.16,1,.3,1) both}
.slogo.sting .l-word{animation:lWord 180ms cubic-bezier(.16,1,.3,1) 20ms both}
.slogo.sting .l-casino{animation:lCasino 150ms cubic-bezier(.16,1,.3,1) 90ms both}
.slogo.sting .whole{animation:lChomp 170ms cubic-bezier(.2,.8,.2,1) 230ms both}
.slogo.micro .whole{animation:lChomp 180ms cubic-bezier(.2,.8,.2,1) both}
.slogo.calm .whole{animation:lFade 300ms ease-out both}
@keyframes lUnder{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lWord{0%{opacity:0;transform:scale(1.75) rotate(-9deg)}60%{opacity:1;transform:scale(.93) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes lCasino{from{opacity:0;transform:translateY(22%)}to{opacity:1;transform:none}}
@keyframes lFlash{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}
@keyframes lChomp{0%{transform:none}30%{transform:scale(1.12,.82) translateX(-.4%)}60%{transform:scale(.97,1.05) translateX(.3%)}100%{transform:none}}
@keyframes lFade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.ph-top .slogo{--lw:96px}
.welcome .slogo{--lw:min(240px,66%);width:var(--lw)}
.welcome.home .w-art .slogo{--lw:min(380px,70%)}
.scr-top .slogo{--lw:clamp(110px,9vw,170px)}
.attract .slogo{--lw:min(30vw,500px)}
.side .slogo{--lw:120px;margin:0 0 18px 8px}

/* Snappy alive: breath, a little sway, a shadow that breathes with him */
.board .face::after{content:"";position:absolute;left:18%;right:18%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);animation:shadowBreath 3.4s ease-in-out infinite;z-index:-1}
@keyframes shadowBreath{50%{transform:scaleX(.94);opacity:.8}}
.board .face img.breathe{animation:idle 3.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idle{0%,100%{transform:none}30%{transform:scale(1.012) rotate(-.5deg)}65%{transform:scale(1.006) rotate(.45deg) translateY(-.6%)}}
/* countdown tension: he leans in, the Critters get twitchy */
.board.tense .face img:not(.off){animation:lean .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lean{to{transform:scale(1.025) translateY(1%)}}
.phone-page.tense .critter img{animation:jitter .12s linear infinite}
@keyframes jitter{25%{transform:translate(1px,-2px) rotate(-2deg)}75%{transform:translate(-2px,1px) rotate(2deg)}}
/* pre-bite freeze: everything stops for a beat */
.board.freeze *,.board.freeze{animation-play-state:paused!important;transition:none!important}
/* CHOMP: squash-stretch on the bite pose, a flash, gold rays for a win */
.board .face img.chompin{animation:chompIn .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes chompIn{0%{transform:scale(.9,1.12) translateY(4%)}35%{transform:scale(1.14,.84)}65%{transform:scale(.97,1.05)}100%{transform:none}}
.board .face .bang{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,63,158,.45) 40%,transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:3}
.board .face .bang.on{animation:lFlash .28s ease-out both}
.board .face .rays{position:absolute;inset:-25%;z-index:-1;border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,191,62,.38) 0 8deg,transparent 8deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 72%);mask:radial-gradient(closest-side,#000 25%,transparent 72%)}
.board .face .rays.on{opacity:1;animation:rays 6s linear infinite,raysIn .5s ease-out}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes raysIn{from{opacity:0;scale:.6}}
/* Critters alive in the selector: staggered bob */
.critter img{animation:bob 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.35s)}
@keyframes bob{50%{transform:translateY(-5px)}}
.critter[aria-pressed="true"] img{animation:bobBig 1.4s ease-in-out infinite}
@keyframes bobBig{50%{transform:translateY(-8px) scale(1.06)}}
.critter:disabled img{animation:none}
/* bursts */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.fx-critter{position:absolute;width:var(--cs,clamp(56px,5.5vw,120px));height:var(--cs,clamp(56px,5.5vw,120px));margin:calc(var(--cs,clamp(56px,5.5vw,120px)) / -2) 0 0 calc(var(--cs,clamp(56px,5.5vw,120px)) / -2);object-fit:contain;animation:fxWin 1.3s cubic-bezier(.2,.7,.3,1) both;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.fx-critter.win{animation-name:fxWin}
.fx-critter.scatter{animation-name:fxScatter}
@keyframes fxWin{0%{transform:translate(0,0) scale(0) rotate(0);opacity:0}12%{opacity:1}55%{transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotate(calc(var(--rot) * .6))}100%{transform:translate(var(--dx),calc(var(--dy) + var(--fall))) scale(calc(var(--s) * .8)) rotate(var(--rot));opacity:0}}
@keyframes fxScatter{0%{transform:scale(var(--s));opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + var(--fall))) scale(calc(var(--s) * .6)) rotate(var(--rot));opacity:0}}
/* floating Critters around a hero */
.fx-floaters{position:absolute;inset:0;pointer-events:none;z-index:0}
.fx-floaters img{position:absolute;width:calc(70px * var(--d));opacity:calc(.25 + var(--d) * .55);filter:blur(calc((1 - var(--d)) * 3px)) drop-shadow(0 8px 14px rgba(0,0,0,.5));animation:float var(--dur) ease-in-out var(--del) infinite}
@keyframes float{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(calc(14px * var(--d)),calc(-26px * var(--d))) rotate(8deg)}}
/* hero tilt toward the cursor (desktop) */
.tilt{transform:perspective(900px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg));transition:transform .25s ease-out;transform-style:preserve-3d}
.welcome.home .w-art{position:relative}
.attract .art{position:relative}
.qr{position:relative}
.attract .qr::after{content:"";position:absolute;inset:-6px;border-radius:18px;border:3px solid var(--acid);animation:qrPing 2.4s ease-out infinite;pointer-events:none}
@keyframes qrPing{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.12)}}
/* result headline slams in */
.resultst.on .chomp{animation:slam .45s cubic-bezier(.2,.8,.2,1) both}
.resultst.on .bites{animation:lCasino .35s cubic-bezier(.16,1,.3,1) .15s both}
.resultst.on .panel{animation:lCasino .35s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes slam{0%{transform:rotate(-5deg) scale(2.2);opacity:0}55%{transform:rotate(-5deg) scale(.92);opacity:1}100%{transform:rotate(-5deg) scale(1)}}
.result.win .big,.result.lose .big{animation:slam2 .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes slam2{0%{transform:scale(1.8);opacity:0}60%{transform:scale(.95);opacity:1}100%{transform:none}}

.slogo.hdr{--lw:clamp(110px,9vw,170px)}
.slogo.big{--lw:min(30vw,500px)}
.resultst .art{position:relative}

/* attract: logo + headline + QR must fit one 1080p screen */
.attract .copy{gap:1.8vh}
.slogo.big{--lw:min(22vw,360px)}
.attract h1{font-size:clamp(40px,5.2vw,100px)}
.attract .qr{--qr:clamp(120px,10vw,190px)!important}
.attract .art > img{max-height:66vh}

/* ---------- leaderboard (/board and the big screen's idle rotation) ----------
   Everything is sized in --u, one hundredth of a 16:9 frame, so a 4K TV and a laptop show the same layout. */
.board-page{--u:min(1vw,1.778vh);height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);gap:calc(var(--u)*1);padding:calc(var(--u)*1.6) calc(var(--u)*2.6) calc(var(--u)*1.4);position:relative}
.board-page .scr-top .slogo{--lw:calc(var(--u)*11)}
.board-page .endorse{font-size:calc(var(--u)*.75)}
.board-page .endorse b{font-size:calc(var(--u)*1.05)}
.board-page > .fx-floaters{opacity:.35}
.lbd{--u:min(1vw,1.778vh);position:relative;z-index:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:calc(var(--u)*1.6)}
.lbd-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:calc(var(--u)*3)}
.lbd-live{display:inline-flex;align-items:center;gap:calc(var(--u)*.5);color:var(--pink);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:calc(var(--u)*.85)}
.lbd-live i{width:calc(var(--u)*.6);height:calc(var(--u)*.6);border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(255,63,158,.6);animation:lbdPing 1.6s infinite}
@keyframes lbdPing{70%{box-shadow:0 0 0 calc(var(--u)*.9) rgba(255,63,158,0)}100%{box-shadow:0 0 0 0 rgba(255,63,158,0)}}
.lbd-title{margin:calc(var(--u)*.2) 0 0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.9;font-size:calc(var(--u)*5);letter-spacing:.01em;
  background:linear-gradient(100deg,var(--acid) 0%,var(--acid) 38%,#F4FFE6 48%,var(--acid) 58%,var(--acid) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lbdShine 5s linear infinite}
.lbd[data-tab=live] .lbd-title{background-image:linear-gradient(100deg,var(--pink) 0%,var(--pink) 38%,#FFE3F1 48%,var(--pink) 58%,var(--pink) 100%)}
@keyframes lbdShine{from{background-position:120% 0}to{background-position:-130% 0}}
.lbd-sub{font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:calc(var(--u)*.95);margin-top:calc(var(--u)*.5)}
.lbd-tabs{position:relative;display:flex;border:1px solid var(--line-2);border-radius:999px;padding:calc(var(--u)*.3);background:rgba(17,26,20,.7)}
.lbd-tabs span{position:relative;z-index:1;padding:calc(var(--u)*.55) calc(var(--u)*1.3);font-weight:900;letter-spacing:.1em;text-transform:uppercase;font-size:calc(var(--u)*.8);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .3s}
.lbd-tabs span.on{color:var(--swamp)}
.lbd-tabs.single span[data-t=live]{opacity:.35}
.lbd-tabbar{position:absolute;left:0;top:calc(var(--u)*.3);bottom:calc(var(--u)*.3);border-radius:999px;background:var(--acid);transition:transform .5s cubic-bezier(.3,1.4,.5,1),width .5s,background .4s}
.lbd[data-tab=live] .lbd-tabbar{background:var(--pink)}
.lbd-stats{display:flex;gap:calc(var(--u)*2)}
.lbd-stats div{display:grid;gap:calc(var(--u)*.15);text-align:right}
.lbd-stats .eyebrow{font-size:calc(var(--u)*.7)}
.lbd-stats b{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*2.2);line-height:1}
.lbd-stats b.gold{color:var(--gold)}

.lbd-body{min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:calc(var(--u)*2.6);align-items:stretch}
.lbd.few .lbd-body{grid-template-columns:minmax(0,1fr)}
.lbd.few .lbd-podium{max-width:calc(var(--u)*70);justify-self:center;width:100%}
.lbd-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:calc(var(--u)*1.2);min-height:0}
.pod{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:0;perspective:900px}
.pod-in{position:relative;display:grid;align-content:end;justify-items:center;padding-bottom:calc(var(--u)*1);min-height:0}
.pod.flip .pod-in{animation:podFlip .8s cubic-bezier(.2,1.25,.4,1) both}
@keyframes podFlip{0%{transform:rotateY(90deg) scale(.8);opacity:0}100%{transform:none;opacity:1}}
.pod-who{display:grid;justify-items:center;gap:calc(var(--u)*.35);text-align:center;min-width:0;max-width:100%}
.pod-av{--c:var(--acid);--s:calc(var(--u)*5.8);width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:calc(var(--s)*.46);color:var(--swamp);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 45%),var(--c);box-shadow:0 0 0 calc(var(--u)*.35) var(--swamp),0 0 0 calc(var(--u)*.6) var(--ring,var(--line-2)),0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.5)}
.pod-av.vac{--c:var(--swamp-3);color:var(--muted)}
.p1 .pod-av{--s:calc(var(--u)*7.6);--ring:var(--gold);animation:bob 3s ease-in-out infinite}
.p2 .pod-av{--ring:#D9E2DC}
.p3 .pod-av{--ring:#E08A4B}
.pod-name{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*1.9);line-height:1.05;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:calc(var(--u)*.6)}
.p1 .pod-name{font-size:calc(var(--u)*2.4)}
.pod-net{font-family:var(--f-display);font-size:calc(var(--u)*2.3);color:var(--gold);line-height:1;text-shadow:0 0 calc(var(--u)*2) rgba(255,191,62,.35)}
.p1 .pod-net{font-size:calc(var(--u)*3.1)}
.pod-net.neg,.r-net.neg{color:var(--pink);text-shadow:none}
.pod-stat{color:var(--muted);font-weight:700;font-size:calc(var(--u)*.8);letter-spacing:.04em}
.pod.vacant .pod-who b{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*1.6);color:var(--muted);text-transform:uppercase;margin-top:calc(var(--u)*.6)}
.pod-crown{position:relative;display:grid;place-items:center;margin-bottom:calc(var(--u)*-1.2);z-index:1}
.pod-crown img{width:calc(var(--u)*3.4);filter:drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.6));animation:crown 2.6s ease-in-out infinite;position:relative}
@keyframes crown{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(6deg) translateY(calc(var(--u)*-.5))}}
.pod-crown .rays{position:absolute;width:calc(var(--u)*22);height:calc(var(--u)*22);top:50%;left:50%;margin:calc(var(--u)*-11) 0 0 calc(var(--u)*-11);border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,191,62,.16) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent);mask:radial-gradient(closest-side,#000 25%,transparent);animation:rays 24s linear infinite;z-index:-1}
.pod-step{display:grid;place-items:center;border-radius:calc(var(--u)*1.2) calc(var(--u)*1.2) 0 0;border:1px solid var(--line-2);border-bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),var(--swamp-2);position:relative;overflow:hidden}
.pod-step::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite}
.p2 .pod-step::after{animation-delay:.6s}.p3 .pod-step::after{animation-delay:1.2s}
@keyframes sheen{40%,100%{transform:translateX(120%)}}
.pod-step span{font-family:var(--f-display);font-size:calc(var(--u)*3.8);line-height:1;opacity:.9}
.p1 .pod-step{height:calc(var(--u)*8.5);border-color:var(--gold);box-shadow:0 0 calc(var(--u)*4) rgba(255,191,62,.2) inset}
.p1 .pod-step span{color:var(--gold);font-size:calc(var(--u)*5)}
.p2 .pod-step{height:calc(var(--u)*6)}
.p3 .pod-step{height:calc(var(--u)*4.2)}
.p3 .pod-step span{color:#E08A4B}
.pod-mv{min-height:calc(var(--u)*1.2)}

.lbd-rows{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:minmax(0,calc(var(--u)*5));align-content:center;gap:calc(var(--u)*.6);min-height:0}
.lbd-rows li{display:grid;grid-template-columns:calc(var(--u)*2.6) calc(var(--u)*3.4) minmax(0,1fr) auto calc(var(--u)*8) calc(var(--u)*8.5);align-items:center;gap:calc(var(--u)*1);
  padding:0 calc(var(--u)*1.3) 0 calc(var(--u)*.8);border-radius:calc(var(--u)*1.1);background:rgba(17,26,20,.78);border:1px solid var(--line);position:relative;overflow:hidden}
.lbd-rows li::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--acid);opacity:.6}
.lbd[data-tab=live] .lbd-rows li::before{background:var(--pink)}
.lbd-rows li.enter{animation:rowIn .6s cubic-bezier(.2,1.2,.4,1) both}
@keyframes rowIn{from{opacity:0;transform:translateX(calc(var(--u)*5))}}
.r-pos{font-family:var(--f-display);font-size:calc(var(--u)*1.9);color:var(--muted);text-align:center}
.r-av{--c:var(--acid);width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:calc(var(--u)*1.45);color:var(--swamp);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.4),transparent 45%),var(--c)}
.r-name{display:grid;min-width:0}
.r-name b{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*1.75);text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-name small{color:var(--muted);font-weight:700;font-size:calc(var(--u)*.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-bar{height:calc(var(--u)*.55);border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.r-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--acid-dim),var(--acid));transition:width 1s cubic-bezier(.2,1,.3,1)}
.r-bar i.neg{background:linear-gradient(90deg,#7a1d4b,var(--pink))}
.r-net{font-family:var(--f-display);font-size:calc(var(--u)*2);text-align:right;color:var(--gold)}
.mv{display:inline-block;font-weight:900;font-size:calc(var(--u)*.75);letter-spacing:.06em;padding:calc(var(--u)*.15) calc(var(--u)*.5);border-radius:999px;text-transform:uppercase;animation:mvIn .5s cubic-bezier(.3,1.6,.5,1) both}
.mv.up{background:rgba(168,255,62,.16);color:var(--acid)}
.mv.down{background:rgba(255,63,158,.16);color:var(--pink)}
@keyframes mvIn{from{transform:scale(0)}}

.lbd-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*3)}
.lbd-empty img{width:calc(var(--u)*18);animation:breathe 3.6s ease-in-out infinite}
.lbd-empty div{display:grid;gap:calc(var(--u)*.8)}
.lbd-empty b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:calc(var(--u)*4.4);line-height:.95;color:var(--bone)}
.lbd-empty span{font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acid);font-size:calc(var(--u)*1.1)}

.lbd-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--u)*2);align-items:center}
.lbd-ticker{display:flex;align-items:center;gap:calc(var(--u)*1);border:1px solid var(--line);border-radius:999px;background:rgba(17,26,20,.7);padding:calc(var(--u)*.5) calc(var(--u)*.5) calc(var(--u)*.5) calc(var(--u)*.6);min-width:0}
.lbd-tk-label{flex:none;background:var(--gold);color:var(--swamp);border-radius:999px;padding:calc(var(--u)*.35) calc(var(--u)*.9);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:calc(var(--u)*.75)}
.lbd-tk{overflow:hidden;min-width:0;flex:1;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.lbd-track{display:flex;width:max-content;gap:calc(var(--u)*2.4)}
.lbd-track.run{animation:tk var(--tk,30s) linear infinite}
@keyframes tk{to{transform:translateX(-50%)}}
.tk-i{display:inline-flex;align-items:center;gap:calc(var(--u)*.5);font-weight:800;font-size:calc(var(--u)*1.05);white-space:nowrap;padding-right:calc(var(--u)*2.4)}
.tk-i img{width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);object-fit:contain}
.tk-i em{font-style:normal;color:var(--gold);font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*1.3)}
.tk-live{font-style:normal;color:var(--pink);border:1px solid var(--pink);border-radius:999px;padding:0 calc(var(--u)*.45);font-size:calc(var(--u)*.65);letter-spacing:.1em;text-transform:uppercase}
.lbd-join{display:flex;align-items:center;gap:calc(var(--u)*1);text-align:right}
.lbd-join b{display:block;color:var(--acid);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:calc(var(--u)*.85)}
.lbd-join span{font-family:var(--f-display);font-size:calc(var(--u)*1.9);line-height:1}
.lbd-qr{padding:calc(var(--u)*.45);border-radius:calc(var(--u)*.7);--qr:calc(var(--u)*6)}

.lbd.swap .lbd-title,.lbd.swap .lbd-sub{animation:swapIn .7s cubic-bezier(.2,1.2,.4,1) both,lbdShine 5s linear infinite}
.lbd.swap .lbd-sub{animation:swapIn .7s .08s cubic-bezier(.2,1.2,.4,1) both}
@keyframes swapIn{from{opacity:0;transform:translateY(calc(var(--u)*1.5)) skewX(-8deg)}}

.lbd-stamp{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;pointer-events:none;z-index:5;opacity:0}
.lbd-stamp span{font-family:var(--f-hand);font-size:calc(var(--u)*4);color:var(--pink);transform:rotate(-6deg)}
.lbd-stamp b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:calc(var(--u)*9);line-height:.9;color:var(--gold);text-shadow:0 calc(var(--u)*.6) 0 #6b4400,0 0 calc(var(--u)*5) rgba(255,191,62,.55)}
.lbd-stamp.on{animation:stamp 3.2s ease both}
.lbd-stamp.on b,.lbd-stamp.on span{animation:slam2 .6s cubic-bezier(.3,1.5,.5,1) both}
.lbd-stamp::before{content:"";position:absolute;inset:-5%;background:radial-gradient(closest-side,rgba(7,10,8,.92),rgba(7,10,8,.7) 60%,transparent);z-index:-1}
@keyframes stamp{0%{opacity:0}8%,80%{opacity:1}100%{opacity:0}}

/* the big screen's idle rotation shows the board inside the stage */
.state.boardst{grid-template-rows:minmax(0,1fr)}
.boardst .lbd{height:100%}
.screen-page.boarding .scr-foot{display:none}
.screen-page.boarding{grid-template-rows:auto minmax(0,1fr)}
@media (prefers-reduced-motion: reduce){.lbd-track.run{animation:none}.lbd-title{animation:none}}
.pod-net.zero,.r-net.zero{color:var(--muted);text-shadow:none}
.lbd-track{padding-left:calc(var(--u)*1.2)}