/* Song Quiz: one dark look for the TV and the phones. Display font for titles, numbers and the buzzer, plain body font for the rest. */
:root{--bg:#14111c;--bg2:#1d1828;--card:#241f31;--line:#3a3348;--fg:#f4f1fa;--mute:#a79fb8;--hot:#ff4f8b;--hot2:#ff8fb3;--a:#52d1ff;--b:#ffb347;--ok:#5ee6a0;--bad:#ff6b6b;
 --display:"Bricolage Grotesque",system-ui,sans-serif;--body:Figtree,system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;font:18px/1.45 var(--body);background:var(--bg);color:var(--fg);min-height:100vh;-webkit-tap-highlight-color:transparent}
h1,h2,h3,.big,.score,.t{font-family:var(--display);font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.A{color:var(--a)}.B{color:var(--b)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0}
:focus-visible{outline:3px solid var(--hot2);outline-offset:2px}

/* ---------- phone ---------- */
.app{min-height:100dvh;max-width:480px;margin:auto;padding:20px max(16px,env(safe-area-inset-left,0px)) 130px max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
.app h1{font-size:2.2rem;margin:.2em 0 0}.app h2{font-size:1.5rem;margin:0}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.95rem;color:var(--mute)}
.hdr b{color:var(--fg)}.score-pill{font:800 1rem var(--display);background:var(--card);border-radius:20px;padding:4px 14px;letter-spacing:.04em}
.label{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:600;margin-bottom:-8px}
.input{width:100%;min-height:54px;padding:0 18px;border-radius:16px;border:2px solid var(--line);background:var(--bg2);font-size:1.05rem}
.input:focus{border-color:var(--hot);outline:none}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:0 20px;border-radius:16px;background:var(--hot);color:#fff;font:800 1.05rem var(--display);letter-spacing:.01em;transition:transform .12s,filter .2s}
.btn:active{transform:scale(.97)}.btn:hover{filter:brightness(1.08)}.btn:disabled{background:var(--card);color:var(--mute);cursor:not-allowed;filter:none;transform:none}
.btn.ghost{background:transparent;border:2px solid var(--line);color:var(--fg)}
.btn.ghost.on{border-color:var(--hot);background:#ff4f8b22}
.stack{display:flex;flex-direction:column;gap:12px}
.hint{font-size:.88rem;color:var(--mute);text-align:center;margin:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px;border-radius:18px;background:var(--card);border:2px solid transparent;min-height:92px;transition:transform .12s,border-color .2s,background .2s}
.tile:active{transform:scale(.97)}.tile i{font-style:normal;font-size:1.5rem}.tile b{font:700 .98rem/1.15 var(--display)}.tile span{font-size:.78rem;color:var(--mute)}
.tile.on{border-color:var(--hot);background:#ff4f8b1f}
.seg{display:flex;gap:6px;padding:5px;border-radius:18px;background:var(--card)}
.seg button{flex:1;min-height:48px;border-radius:13px;background:transparent;color:var(--mute);font-weight:600;transition:background .2s,color .2s}
.seg button.on{background:var(--hot);color:#fff}
.team-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-card{display:flex;flex-direction:column;gap:10px;text-align:left;min-height:160px;padding:16px;border-radius:20px;background:var(--card);border:2px solid transparent;transition:transform .12s,border-color .2s}
.team-card:active{transform:scale(.98)}.team-card h3{margin:0;font-size:1.3rem}.team-card.A.on{border-color:var(--a)}.team-card.B.on{border-color:var(--b)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{background:var(--bg);border-radius:20px;padding:3px 11px;font-size:.82rem;animation:pop .35s both}
.sticky{position:fixed;left:0;right:0;bottom:0;padding:24px max(16px,env(safe-area-inset-left,0px)) calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 38%);z-index:5}
.sticky>*{max-width:480px;margin-inline:auto}
.card{background:var(--card);border-radius:18px;padding:16px 18px}
.answer{font:800 1.4rem/1.2 var(--display)}.answer small{display:block;font:500 1rem var(--body);color:var(--mute);margin-top:4px}
.buzz{width:min(100%,360px);aspect-ratio:1;max-height:56vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--hot2),var(--hot) 55%,#c4306a);color:#fff;font:800 clamp(2.6rem,16vw,4.4rem) var(--display);letter-spacing:.03em;box-shadow:0 10px 24px #0007,inset 0 -8px 20px #0003;position:relative;overflow:hidden;transition:transform .1s}
.buzz:active{transform:scale(.95)}.buzz:disabled{background:var(--card);box-shadow:none;color:var(--mute);font-size:2rem}
.paused .cd i,.paused .cdp i,.paused .dots i{animation-play-state:paused}
.buzz::after{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid #fff;opacity:0;transform:scale(.6)}
.buzz.fire::after{animation:ripple .6s ease-out}
.offline{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--bad);color:#fff;text-align:center;font-weight:600;padding:8px 12px}
.judge-banner{background:#5ee6a01f;border:2px solid var(--ok);border-radius:16px;padding:12px 16px;font-size:.95rem}
.tog{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 18px;border-radius:16px;background:var(--card);border:2px solid transparent;width:100%;font-weight:600;text-align:left}
.tog em{font-style:normal;font-size:1.5rem}.tog.on{border-color:var(--ok);background:#5ee6a01a}
.err{color:var(--bad);text-align:center;margin:0}
.enter>*{animation:rise .32s both}.enter>*:nth-child(2){animation-delay:.04s}.enter>*:nth-child(3){animation-delay:.08s}.enter>*:nth-child(4){animation-delay:.12s}.enter>*:nth-child(n+5){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ripple{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:#000a;animation:fade .2s both}
.modal>div{width:100%;max-width:480px;background:var(--bg2);border-radius:26px 26px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:sheet .28s both}
.modal h2{margin:0}.modal p{margin:0;color:var(--mute)}
@keyframes fade{from{opacity:0}}@keyframes sheet{from{transform:translateY(40px);opacity:0}}
.dots i{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:var(--hot);animation:blink 1.2s infinite both}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.2;transform:scale(.7)}}

/* ---------- TV ---------- */
.tv{padding:3vw;text-align:center}
.tv h1{font-size:max(4vw,28px);margin:.2em 0}.tv h2{font-size:max(2.4vw,20px);font-weight:600;color:var(--mute)}
.tv .big{font-size:min(24vw,16rem);margin:.1em 0;animation:pop .5s both}
.tv .row{display:flex;gap:2vw;margin:2vh 0}.tv .tcard{flex:1;background:var(--card);padding:2vh 2vw;border-radius:2vw;font-size:max(1.5vw,16px);border:3px solid transparent}
.tv .tcard.A{border-color:#52d1ff44}.tv .tcard.B{border-color:#ffb34744}
.tv .score{font-size:7vw;line-height:1;margin:.1em 0;animation:pop .4s both}
#cover{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#33204f,var(--bg) 70%);z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column}
#cover h1{font-size:max(5vw,28px);text-align:center}
#cover .bars{display:flex;gap:1vw;align-items:flex-end;height:30vh}#cover .bars i{width:3vw;border-radius:1vw;background:linear-gradient(var(--hot2),var(--hot));animation:b 1s infinite ease-in-out}
@keyframes b{0%,100%{height:10%}50%{height:100%}}
#yt{position:fixed;left:0;bottom:0;width:320px;height:200px;opacity:.01;z-index:1}
#prompt{position:fixed;inset:0;background:#000d;z-index:9;display:none;align-items:center;justify-content:center;flex-direction:column;font-size:3vw;text-align:center;padding:4vw}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.idle{--u:min(1vw,1.8vh);position:relative;overflow:hidden;min-height:92vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4vw;padding:0 4vw}
.idle>*{position:relative;z-index:1}.idle>.notes{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero{text-align:left}.hero h1{font-size:max(calc(8*var(--u)),48px);margin:.1em 0 .4em;line-height:.95}
.rings{position:relative;width:calc(11*var(--u));height:calc(11*var(--u));display:flex;align-items:center;justify-content:center;font-size:calc(5.5*var(--u));margin-left:calc(2*var(--u))}
.rings span{animation:bob 4s infinite ease-in-out}@keyframes bob{50%{transform:translateY(-.6vw)}}
.rings i{position:absolute;inset:0;border:2px solid #ff4f8b55;border-radius:50%;opacity:0;animation:ring 9s infinite ease-out}
.rings i:nth-child(2){animation-delay:3s}.rings i:nth-child(3){animation-delay:6s}
@keyframes ring{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.steps{list-style:none;padding:0;margin:0;font-size:max(calc(2.2*var(--u)),18px)}.steps li{display:flex;align-items:center;gap:calc(1*var(--u));margin:1.4vh 0}
.steps b{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:var(--hot);display:flex;align-items:center;justify-content:center;font-family:var(--display)}
.scan{text-align:center}.scan p{font-size:max(calc(2*var(--u)),16px);opacity:.85}
.qrcard{background:#fff;padding:1.2vw;border-radius:2vw;width:min(32vw,420px);margin:auto;box-shadow:0 1.2vw 3vw #0008}
.qrsvg svg{width:100%;height:auto;display:block}
.notes em{position:absolute;bottom:-12%;font-style:normal;font-size:6vw;color:#ff4f8b55;animation:rise2 9s infinite linear}
@keyframes rise2{0%{transform:translateY(0) rotate(-10deg);opacity:0}15%{opacity:1}100%{transform:translateY(-110vh) rotate(15deg);opacity:0}}
#np{position:fixed;bottom:1.5vh;left:2vw;z-index:30;opacity:.75;font-size:max(1.2vw,13px);display:none;align-items:center;background:#0008;padding:.25em;border-radius:2em}
#np:hover{opacity:1}#np button{background:none;padding:0;margin:0;font-size:1.4em;width:1.9em;height:1.9em;border-radius:50%;display:flex;align-items:center;justify-content:center}#np button:hover{background:#ffffff1a}#npt:empty{display:none}#npt:not(:empty){padding:0 .9em 0 .3em}
@media(max-width:800px){.idle{grid-template-columns:1fr}.qrcard{width:60vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* entry gate: nothing is shown until the first click, which also unlocks audio */
#snd{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;cursor:pointer} /* no own background: the gate sits on the same stage as the start page, so nothing shifts when it lifts */
.gate{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4vh;animation:rise .5s both}
.gate h1{font-size:max(7vw,44px);margin:0;line-height:1}.gate p{margin:0;color:var(--mute);font-size:max(1.4vw,15px)}
.gate-note{font-size:max(6vw,48px);animation:bob 4s infinite ease-in-out}
.gate-btn{margin-top:2vh;background:var(--hot);color:#fff;font:800 max(2.2vw,20px) var(--display);padding:.7em 1.8em;border-radius:3em;transition:transform .15s}
.gate-btn:hover{transform:scale(1.05)}.gate-btn:active{transform:scale(.97)}

/* phone: make it obvious what to tap */
.step{display:flex;align-items:center;gap:10px;font:800 1.08rem var(--display)}
.step b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--hot);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.step.done b{background:var(--ok);color:#14111c}.step small{margin-left:auto;font:500 .8rem var(--body);color:var(--mute)}
.join-pill{margin-top:auto;align-self:flex-start;padding:7px 15px;border-radius:20px;font:600 .85rem var(--body);background:var(--line)}
.team-card.A .join-pill{background:var(--a);color:#14111c}.team-card.B .join-pill{background:var(--b);color:#14111c}
.team-card.on .join-pill{background:transparent;border:2px solid currentColor;color:var(--fg)}
.tile{position:relative}.tile.on::after{content:"✓";position:absolute;top:10px;right:13px;font-weight:800;color:var(--hot)}

.repo{position:fixed;right:2vw;bottom:2vh;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.4em;width:max(6vw,72px);color:var(--mute);font-size:max(1vw,12px);text-decoration:none}
.repo .qrsvg{background:#fff;padding:.5vw;border-radius:.8vw;width:100%;box-shadow:0 .4vw 1vw #0008}

.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding-bottom:6vh}

.matchup{display:flex;align-items:stretch;justify-content:center;gap:3vw;margin:3vh 0}
.mu{background:var(--card);border-radius:2vw;padding:3vh 3vw;min-width:24vw;border:3px solid var(--line);display:flex;flex-direction:column;gap:.4vh}
.mu.A{border-color:var(--a)}.mu.B{border-color:var(--b)}
.mu small{font-size:max(1.2vw,13px);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.mu b{font:800 max(4.6vw,30px)/1.05 var(--display);overflow-wrap:anywhere}.mu span{font-size:max(1.4vw,14px);color:var(--mute)}
.vs{align-self:center;font:800 max(3vw,22px) var(--display);color:var(--mute)}
.tv .big.sm{font-size:min(14vw,9rem)}
.judge-pill{display:inline-block;background:var(--card);border-radius:3em;padding:.6em 1.8em;font-size:max(2vw,18px)}
#cover-s{margin-top:2vh;opacity:.95}#cover-s .matchup{margin:0}

/* progress: song x of y */
.prog{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mute)}
.prog div{height:6px;border-radius:3px;background:var(--card);overflow:hidden}.prog i{display:block;height:100%;background:var(--hot);border-radius:3px;transition:width .6s ease}
#prog{display:none;position:fixed;top:0;left:0;right:0;z-index:7;padding:1.2vh 3vw 0;font-size:max(1.5vw,14px);color:var(--mute);text-align:center}
#progb{height:.7vh;min-height:5px;margin-top:.6vh;border-radius:3px;background:#ffffff1a;overflow:hidden}#progf{display:block;height:100%;width:0;background:var(--hot);transition:width .6s ease}

/* end screen */
.endscore{font:800 max(4vw,28px) var(--display);display:flex;justify-content:center;gap:2vw;margin:.4vh 0 2vh}.endscore b{font-size:1.3em}
.endgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:2vw;text-align:left}.panel{background:var(--card);border-radius:2vw;padding:2vh 2vw}.panel h3{margin:0 0 1vh;font-size:max(1.8vw,16px);color:var(--mute);font-weight:600}
.chart{width:100%;height:auto;display:block}
table.stats{width:100%;border-collapse:collapse;font-size:max(1.5vw,14px)}table.stats th{font-weight:600;color:var(--mute);text-align:right;padding:.4em .5em;font-size:.8em}table.stats th:first-child,table.stats td:first-child{text-align:left}
table.stats td{padding:.45em .5em;text-align:right;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.legend{margin:1vh 0 0;font-size:max(1.1vw,12px);color:var(--mute)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.stat-grid div{background:var(--card);border-radius:16px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.stat-grid b{font:800 1.5rem var(--display)}.stat-grid span{font-size:.75rem;color:var(--mute)}

.cd{max-width:60vw;margin:0 auto 2vh;font-size:max(1.6vw,15px);color:var(--mute)}.cd div,.cdp div{height:.9vh;min-height:6px;border-radius:4px;background:#ffffff1a;margin-top:.8vh;overflow:hidden}
.cd i,.cdp i{display:block;height:100%;width:100%;background:var(--hot);border-radius:4px;transform-origin:left;animation:drain linear forwards}
@keyframes drain{to{transform:scaleX(0)}}
.again{margin:3vh 0 0;font-size:max(1.8vw,16px);color:var(--mute);animation:rise .6s .8s both}
.cdp{font-size:.85rem;color:var(--mute)}.cdp div{height:6px;margin-top:6px}
.admin-link{text-align:center;font-size:.8rem;color:var(--mute);margin-top:12px}.admin-link a{color:inherit}

.modal>.sheet{max-height:90dvh;overflow-y:auto}
.modal .stack,.modal .btn{flex-shrink:0}

/* gate -> start page transition: the gate lifts away, then the start page builds up */
#snd{transition:opacity .6s ease,transform .6s ease}#snd.out{opacity:0;transform:scale(1.06);pointer-events:none}
.gated .idle>*,.gated #np{opacity:0}
html:not(.gated) .idle .hero{animation:rise .8s .25s both}html:not(.gated) .idle .scan{animation:rise .8s .5s both}html:not(.gated) .idle .repo{animation:rise .8s .9s both}

/* how to play */
.rules{display:flex;flex-direction:column;gap:10px}.rule{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:16px;padding:12px 14px}
.rule i{font-style:normal;font-size:1.6rem;line-height:1.1}.rule b{font:800 1rem var(--display)}.rule p{margin:.15em 0 0;color:var(--mute);font-size:.88rem;line-height:1.35}
.sticky{display:flex;flex-direction:column;gap:10px}
.rulegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;text-align:left;margin:2vh 0}.rulegrid .rule{padding:1.6vh 1.4vw;border-radius:1.4vw}
.rulegrid .rule i{font-size:max(2.6vw,26px)}.rulegrid .rule b{font-size:max(1.8vw,17px)}.rulegrid .rule p{font-size:max(1.35vw,13px);margin-top:.4vh}
.ackbar{display:flex;flex-wrap:wrap;gap:1vw;justify-content:center;margin:2vh 0}.ack{background:var(--card);border-radius:3em;padding:.4em 1.2em;font-size:max(1.6vw,15px);border:2px solid var(--line)}
.ack.ok{border-color:var(--ok);background:#5ee6a01a}.ack.A.ok{border-color:var(--ok)}
.tip{margin-top:3vh;max-width:calc(42*var(--u));min-height:5.5em;font-size:max(calc(1.5*var(--u)),14px);color:var(--mute);line-height:1.4}.tip b{color:var(--fg)}.tip.swap{animation:rise .6s both}
@media(max-width:800px){.rulegrid{grid-template-columns:1fr}.tip{max-width:none}}

.stepper{display:flex;gap:10px;align-items:center}.stepper .input{text-align:center;font:800 1.3rem var(--display);padding:0}
.stepper button{flex:none;width:56px;height:56px;border-radius:16px;background:var(--card);font:800 1.5rem var(--display);transition:transform .12s}.stepper button:active{transform:scale(.94)}

.lang{position:fixed;top:14px;right:16px;z-index:60;border:1px solid #ffffff22;background:#14111ccc;color:var(--mute,#a79fb8);border-radius:99px;padding:6px 12px;font:600 .85rem/1 Figtree,sans-serif;cursor:pointer}.lang b{color:#f4f1fa}

/* buzz flash on the TV: a coloured border/vignette fading out, no blur */
#flash{position:fixed;inset:0;z-index:98;pointer-events:none;opacity:0;--c:#52d1ff;background:radial-gradient(ellipse at center,transparent 45%,color-mix(in srgb,var(--c) 45%,transparent) 100%);border:14px solid var(--c)}
#flash[data-team=A]{--c:#52d1ff}#flash[data-team=B]{--c:#ffb347}
#flash.on{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* ---------- poster look (about 75% of the share image): painted washes, paper grain, misprint title, painted buzzer disc ---------- */
body{background:radial-gradient(ellipse 60% 55% at 30% 40%,#2d1b4e99,transparent 75%),radial-gradient(ellipse 55% 45% at 14% 10%,#3b2270b3,transparent 70%),radial-gradient(ellipse 50% 55% at 90% 80%,#6a2a62a6,transparent 72%),var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .9 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ink{position:relative;isolation:isolate}
.ink::before,.ink::after{content:attr(data-t);position:absolute;left:0;top:0;z-index:-1;white-space:nowrap;pointer-events:none}
.ink::before{color:var(--hot);transform:translate(4px,3px);opacity:.85}.ink::after{color:var(--a);transform:translate(-3px,-2px);opacity:.45}
.disc{display:block;width:100%;height:auto}
.rings .disc{animation:bob 4s infinite ease-in-out}
.entry-disc{width:112px;margin:2px 0 -6px}
.notes em:nth-child(3n+1){color:#ffb34744}.notes em:nth-child(3n+2){color:#52d1ff38}
.steps li:nth-child(odd) b{transform:rotate(-5deg)}.steps li:nth-child(even) b{transform:rotate(4deg);background:var(--b);color:#14111c}

/* rules with pictograms (TV tip card, phone and TV rule lists) */
.tip{min-height:calc(12*var(--u))}
.tipcard{display:grid;grid-template-columns:max(8.5vw,88px) 1fr;gap:1.6vw;align-items:center}
.tipcard svg,.rule i svg{display:block;width:100%;height:auto}
.tp{width:100%}.th{font:800 max(3.4vw,28px)/1.05 var(--display)}.tt{font-size:max(1.8vw,15px);color:var(--mute);margin-top:.35em;line-height:1.3}
.tdots{display:flex;gap:.6vw;margin-top:1.2vh}.tdots i{width:max(.9vw,9px);height:max(.9vw,9px);border-radius:50%;background:var(--line)}.tdots i.on{background:var(--hot)}
.rule i svg{width:52px}.rulegrid .rule i svg{width:max(4.6vw,44px)}.rule i:has(svg){line-height:0;flex:none}
.tip.swap .tipcard{animation:rise .6s both}
/* the start page has to fit 16:9 with the pictogram card: tighter hero */
.idle .rings{width:calc(8*var(--u));height:calc(8*var(--u));margin-left:calc(1*var(--u))}
.idle .hero h1{margin:.05em 0 .25em}
.idle .steps{font-size:max(calc(1.9*var(--u)),17px)}.idle .steps li{margin:.9vh 0}
.idle .tip{margin-top:2vh;min-height:0}.idle .tipcard{grid-template-columns:max(calc(7*var(--u)),76px) 1fr}.idle .th{font-size:max(calc(3*var(--u)),26px)}.idle .tt{font-size:max(calc(1.6*var(--u)),15px)}
.idle{min-height:88vh;padding-bottom:6vh}

.idle .qrcard{width:min(32vw,420px,46vh)}
.idle{min-height:min(88vh,calc(100vh - 6vw - 4px))}
body.ingame .tv{padding-top:max(9vh,76px)}