*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --gold:#ffd400;--gold-dk:#c9a227;--navy:#0b2f66;--frame:#c9a227;
  --tile-green:#0f7c4d;--tile-white:#f6f3e8;--flash:#1855d6;
  --stage1:#4a2e14;--stage2:#170d05;
  --ink:#fff;
  --disp:'Arial Black','Arial Bold',Arial,sans-serif;
}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#170d05;overflow-x:hidden}
body.stagebg,body.homebg{background:radial-gradient(120vmax 80vmax at 50% -10%,#5a3a1c 0%,var(--stage1) 40%,var(--stage2) 100%);min-height:100vh}
body.stagebg::before,body.homebg::before{content:"";position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(2px 2px at 12% 20%,#fff8 0,#fff0 60%),radial-gradient(2px 2px at 82% 12%,#fff7 0,#fff0 60%),
  radial-gradient(1.5px 1.5px at 30% 8%,#fff6 0,#fff0 60%),radial-gradient(2px 2px at 65% 25%,#fff5 0,#fff0 60%),
  radial-gradient(1.5px 1.5px at 92% 40%,#fff4 0,#fff0 60%),radial-gradient(2px 2px at 8% 55%,#fff4 0,#fff0 60%)}
body.phonebg{background:linear-gradient(180deg,#4a2e14,#170d05 70%);min-height:100vh}
.hidden{display:none!important}
button{cursor:pointer;font-family:inherit;border:none;border-radius:10px;background:#4a2f16;color:#fff;padding:8px 14px;font-size:15px}
button:disabled{opacity:.4;cursor:default}
button.danger{background:#8f1d1d}
button.ghost{background:transparent;border:2px solid #ffffff44;color:#fffc}
input,select,textarea{font-family:inherit;font-size:16px;border-radius:10px;border:2px solid #ffffff33;background:#2a1a0c;color:#fff;padding:10px 12px;outline:none}
input:focus,textarea:focus{border-color:var(--gold)}
.errmsg{color:#ff9b9b;min-height:20px;font-weight:bold;margin-top:8px;text-align:center}
.warnbar{background:#8f1d1d;color:#fff;text-align:center;padding:6px;border-radius:8px;margin:6px 0;font-weight:bold}

/* ---------- logo ---------- */
.logo{font-family:var(--disp);display:flex;flex-direction:column;line-height:.92;user-select:none;
  font-size:min(11vw,84px);color:var(--gold);text-shadow:0 3px 0 #a67c00,0 7px 14px #0009;letter-spacing:2px;text-align:center}
.logo .of{font-size:.55em;color:var(--gold)}
.logo.sm{font-size:min(9vw,44px)}
.home-sub{font-family:var(--disp);letter-spacing:10px;color:#e4cfae;margin:6px 0 30px;text-align:center;font-size:min(4vw,18px)}

/* ---------- big buttons ---------- */
button.big{font-family:var(--disp);font-size:clamp(16px,2.4vmin,24px);padding:16px 26px;border-radius:14px;letter-spacing:1px;box-shadow:0 5px 0 #00000055,0 10px 20px #0006;transition:transform .08s}
button.big:active{transform:translateY(3px)}
button.big small{display:block;font-family:Arial;font-size:12px;font-weight:normal;letter-spacing:0;opacity:.8;margin-top:4px}
button.gold{background:linear-gradient(180deg,#ffe14d,#e8b419);color:#3a2a00}
button.blue{background:linear-gradient(180deg,#3f74e8,#1f4fd2);color:#fff}
button.green{background:linear-gradient(180deg,#2dbd63,#1a9e4b);color:#fff}

/* ---------- home ---------- */
#home{display:flex;justify-content:center;padding:6vh 20px}
.home-card{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:560px;width:100%}
.home-card>button.big{width:100%}
.home-row{display:flex;gap:10px;width:100%}
.home-row input{flex:1;text-transform:uppercase;font-family:var(--disp);text-align:center;letter-spacing:6px;font-size:20px}
.hall{width:100%;margin-top:10px;background:#00000033;border-radius:14px;padding:12px 16px}
.hall h3,.hall h4{color:var(--gold);margin-bottom:8px;font-family:var(--disp);letter-spacing:1px}
.hf{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed #ffffff22;font-size:14px}
.hf em{color:#bbaaff;font-style:normal;font-size:11px;margin-left:6px}

/* ---------- stage chrome ---------- */
#stage{display:flex;flex-direction:column;height:100vh;padding:1vh 1.2vw;position:relative}
.stage-top{display:flex;align-items:center;gap:12px}
.hdr-round{font-family:var(--disp);color:var(--gold);font-size:3.2vmin;letter-spacing:2px;text-shadow:0 2px 0 #a67c00}
.hdr-right{margin-left:auto;display:flex;gap:8px;align-items:center;margin-right:52px}
.chip{font-family:var(--disp);background:#00000055;border:1px solid #ffffff33;padding:.6vmin 1.2vmin;border-radius:8px;font-size:1.9vmin;letter-spacing:1px}
.chip.code b{color:var(--gold)}
.chip.gold{background:var(--gold);color:#3a2a00}
.chip.wedge{background:#fff;color:#111}
.chip.wedge.special{background:#111;color:#fff}
.chip.timer{background:#0a4;min-width:5vmin;text-align:center;font-size:2.6vmin}
.chip.timer.low{background:#c22;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.net{font-size:12px;padding:4px 10px;border-radius:20px;background:#00000066}
.net.ok{color:#7dffa8}.net.bad{color:#ff9b9b}

/* ---------- board ---------- */
.stage-mid{display:flex;justify-content:center;margin-top:.6vh}
.board-wrap{display:flex;flex-direction:column;align-items:center;gap:1vh}
.board{--ts:min(5.9vw,7.6vh);display:grid;grid-template-columns:repeat(14,var(--ts));gap:.45vmin;
  padding:1.2vmin;background:linear-gradient(180deg,#123c7c,var(--navy));border:.7vmin solid var(--frame);
  border-radius:1.2vmin;box-shadow:0 0 4vmin #0008,inset 0 0 3vmin #0006}
.tile{width:var(--ts);height:calc(var(--ts)*1.28);border-radius:.35vmin;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:calc(var(--ts)*.72);color:#111;user-select:none}
.tile.corner{background:#0a2450;box-shadow:inset 0 0 8px #0008}
.tile.green{background:radial-gradient(circle at 35% 30%,#17925d,var(--tile-green) 70%);box-shadow:inset 0 0 6px #0007}
.tile.blank{background:var(--tile-white);box-shadow:inset 0 -3px 0 #00000022}
.tile.letter{background:var(--tile-white);box-shadow:inset 0 -3px 0 #00000022}
.tile.flash{animation:tileflash .55s}
@keyframes tileflash{0%{background:var(--flash);color:transparent}70%{background:var(--flash);color:transparent}100%{}}
.board.mini{--ts:min(6vw,26px);gap:1.5px;padding:5px;border-width:3px}
.cat-row{display:flex;align-items:center;gap:1vw}
.category{font-family:var(--disp);background:#000;color:var(--gold);padding:.8vmin 4vmin;border-radius:.8vmin;
  font-size:2.9vmin;letter-spacing:3px;border:1px solid #ffffff2e;min-height:2.5vmin;text-transform:uppercase}
.category.sm{font-size:14px;padding:4px 14px;letter-spacing:2px;text-align:center;margin:6px auto;width:fit-content}
.no-vowels{font-family:var(--disp);background:#c22;color:#fff;padding:.5vmin 1.5vmin;border-radius:.6vmin;font-size:1.7vmin;letter-spacing:2px;animation:pulse 1s infinite alternate}

/* ---------- stage bottom ---------- */
.stage-bot{flex:1;display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:end;min-height:0;position:relative;padding-bottom:.5vh}
.wheel-side{width:38vmin;height:38vmin;align-self:end}
.wheel-side canvas{width:100%;height:100%}
.bot-right{display:flex;flex-direction:column;gap:1.2vh;min-width:0;padding-bottom:1vh}
.status-line{font-family:var(--disp);color:#fff;font-size:2.6vmin;letter-spacing:1px;text-shadow:0 2px 6px #000;min-height:3vmin}
.scores{display:flex;gap:1vw;flex-wrap:wrap}
.pcard{--pc:#d21f2c;background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#000));
  border:.4vmin solid #00000055;border-radius:1vmin;padding:1vmin 1.4vmin;min-width:16vmin;
  box-shadow:0 4px 12px #0007;position:relative;transition:transform .2s}
.pcard.active{outline:.5vmin solid #fff;transform:translateY(-.6vmin);box-shadow:0 0 3vmin #ffffff88}
.pcard.locked{opacity:.45;filter:grayscale(.6)}
.pcard.empty{background:#00000044;border-style:dashed;font-family:var(--disp);font-size:1.8vmin;display:flex;align-items:center}
.pc-name{font-family:var(--disp);font-size:1.8vmin;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22vmin}
.pc-name .off{color:#ffd0d0}
.pc-round{font-family:var(--disp);font-size:3.4vmin;text-shadow:0 2px 0 #0008}
.pc-total{font-size:1.5vmin;font-family:var(--disp);color:#ffffffd9;letter-spacing:1px}
.used{display:flex;flex-wrap:wrap;gap:.5vmin;background:#00000044;padding:.8vmin 1vmin;border-radius:.8vmin;width:fit-content}
.used span{font-family:var(--disp);font-size:1.9vmin;width:2.6vmin;text-align:center;color:#fff}
.used span.used{color:#584a8f;text-decoration:line-through}
.used.mini span{font-size:11px;width:16px}
.corner-join{position:absolute;right:0;bottom:0;font-size:1.6vmin;color:#e4cfae;background:#00000055;padding:.5vmin 1vmin;border-radius:.6vmin}
.corner-join b{color:var(--gold);font-family:var(--disp)}
.mirror-note{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:4vmin;background:#170d05ee;z-index:40}

/* ---------- banner ---------- */
.banner{position:fixed;top:38vh;left:50%;transform:translate(-50%,-50%) scale(.6);z-index:60;pointer-events:none;
  font-family:var(--disp);font-size:9vmin;color:var(--gold);letter-spacing:4px;text-align:center;
  text-shadow:0 4px 0 #a67c00,0 0 6vmin #000,0 8px 30px #000c;opacity:0;transition:all .18s;white-space:pre-wrap;max-width:94vw}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner.bad{color:#ff5545;text-shadow:0 4px 0 #7c130b,0 0 6vmin #000}
.banner.good{color:#54ff88;text-shadow:0 4px 0 #0b7c33,0 0 6vmin #000}
.banner.warn{color:#ffb14d;text-shadow:0 4px 0 #7c4c0b,0 0 6vmin #000}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:55;pointer-events:none}

/* ---------- sneak guess ---------- */
.toast{position:fixed;bottom:9vh;left:50%;transform:translate(-50%,20px);z-index:65;opacity:0;transition:all .25s;pointer-events:none;
  background:#000000cc;border:1px solid #ffffff33;color:#ffd400;font-family:var(--disp);font-size:2.1vmin;letter-spacing:1px;padding:1vmin 2.4vmin;border-radius:30px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.shadow-panel{position:fixed;top:52vh;left:50%;transform:translate(-50%,0) scale(.9);z-index:58;opacity:0;transition:all .25s;pointer-events:none;
  background:#12093ef2;border:2px solid var(--gold);border-radius:14px;padding:1.6vmin 2.4vmin;min-width:38vmin;max-width:92vw;box-shadow:0 10px 50px #000c}
.shadow-panel.show{opacity:1;transform:translate(-50%,0) scale(1)}
.sp-title{font-family:var(--disp);color:var(--gold);letter-spacing:2px;font-size:2.3vmin;text-align:center;margin-bottom:.8vmin}
.sp-row{display:flex;justify-content:space-between;gap:3vmin;font-size:1.9vmin;padding:.4vmin 0;border-bottom:1px dashed #ffffff22}
.sp-row.official{border-bottom:none;color:#ffd400;font-weight:bold}
#c-shadow-panel{top:auto;bottom:12vh;font-size:13px}
#c-shadow-panel .sp-title{font-size:15px}
#c-shadow-panel .sp-row{font-size:13px;gap:14px}
.c-shadow-row{display:flex;justify-content:center;margin:2px 0}
#c-shadow-btn{background:linear-gradient(180deg,#4a3f97,#2c2270);border:1px dashed #ffd40088;color:#ffd400;font-family:var(--disp);font-size:13px;letter-spacing:1px;padding:7px 16px;border-radius:20px}
#c-shadow-btn small{display:block;font-family:Arial;font-weight:normal;color:#e4cfae;font-size:10px;letter-spacing:0}
.shadow-badge{background:#0a3d1f;border:1px solid #54ff88;color:#54ff88;border-radius:20px;padding:7px 14px;font-size:13px;font-weight:bold}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:radial-gradient(100vmax 70vmax at 50% 0%,#5a3a1cdd,#170d05f2 70%);z-index:30;overflow:auto;padding:3vh 3vw}
.modal{max-width:440px;margin:20vh auto;background:#221566;border:2px solid #ffffff33;border-radius:16px;padding:26px;text-align:center}
.modal h3{margin-bottom:8px}.modal p{margin-bottom:16px;color:#e4cfae}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:3vw;max-width:1300px;margin:0 auto}
body.mirror .lobby-right{display:none}
body.mirror .lobby-grid{grid-template-columns:1fr;max-width:640px}
.lobby-left{display:flex;flex-direction:column;align-items:center;gap:14px}
.qr-card{background:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 10px 40px #000a}
#lobby-qr svg{display:block}
.lobby-code{font-family:var(--disp);color:#222;font-size:22px;letter-spacing:2px}
.lobby-code b{color:#a3560f;font-size:30px;letter-spacing:6px}
.lobby-url{color:#555;font-size:13px;word-break:break-all;text-align:center}
.lobby-hint{color:#333;font-size:13px}
.lobby-players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lp{--pc:#d21f2c;background:var(--pc);font-family:var(--disp);padding:8px 14px;border-radius:24px;font-size:15px;box-shadow:0 3px 8px #0007}
.lp.none{background:#00000044;font-family:Arial;color:#e4cfae}
.lp .off{font-size:11px;opacity:.8}
.lp-kick{background:#00000044;border-radius:50%;padding:2px 7px;margin-left:6px;font-size:12px}
.lobby-right{background:#00000038;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;max-height:88vh;overflow:auto}
.lobby-right h3{color:var(--gold);font-family:var(--disp);letter-spacing:1px;font-size:16px;margin-top:6px}
.set-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.set-row label{display:flex;align-items:center;gap:8px;font-size:14px;color:#e8e2ff}
.set-row select{padding:6px 8px}
.packs{display:flex;flex-wrap:wrap;gap:6px}
.pack{background:#2a1a0c;border:1px solid #ffffff2a;border-radius:20px;padding:6px 12px;font-size:13px;display:flex;gap:6px;align-items:center}
.pack em{color:#9f8fe8;font-style:normal;font-size:11px}
.custom summary{cursor:pointer;color:#e8e2ff;font-size:14px;padding:4px 0}
.custom textarea{width:100%;margin:8px 0}
.hint{color:#9f8fe8;font-size:12px;margin:4px 0}
.hint code{background:#00000055;padding:1px 6px;border-radius:4px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-row.center{justify-content:center}
.filebtn{background:#4a2f16;border-radius:10px;padding:8px 14px;font-size:14px;cursor:pointer;display:inline-block}
.filebtn.wide{text-align:center;font-size:15px;padding:12px}
.tracks{display:flex;flex-direction:column;gap:6px}
.track{display:flex;justify-content:space-between;align-items:center;background:#2a1a0c;border-radius:10px;padding:7px 12px;font-size:13px;gap:8px}
.track.on{outline:2px solid var(--gold)}
.track.none{color:#9f8fe8}
.over-card{max-width:800px;margin:4vh auto;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.over-card h2{font-family:var(--disp);color:var(--gold);font-size:5vmin;letter-spacing:3px;text-shadow:0 3px 0 #a67c00}
.podium{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pod{--pc:#d21f2c;background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#000));border-radius:14px;padding:16px 22px;min-width:150px;box-shadow:0 6px 20px #0008}
.pod.win{transform:scale(1.15);outline:3px solid var(--gold);box-shadow:0 0 40px #ffd40088}
.pod-place{font-size:26px}
.pod-name{font-family:var(--disp);letter-spacing:1px;margin:4px 0}
.pod-score{font-family:var(--disp);font-size:24px;color:#fff;text-shadow:0 2px 0 #0008}

/* ---------- admin ---------- */
#admin-fab{position:fixed;right:14px;top:14px;z-index:70;font-size:20px;background:#00000066;border-radius:50%;width:44px;height:44px;border:1px solid #ffffff33}
.admin{position:fixed;top:0;right:-420px;width:400px;max-width:95vw;height:100vh;background:#1a1050f5;z-index:80;transition:right .25s;padding:16px;overflow:auto;border-left:2px solid #ffffff22;display:flex;flex-direction:column;gap:14px}
.admin.open{right:0}
.admin-head{display:flex;align-items:center;gap:8px}
.admin-head button{margin-left:auto}
.adm-p{--pc:#d21f2c;border-left:6px solid var(--pc);background:#00000033;border-radius:8px;padding:10px;margin-bottom:8px}
.adm-p-name{font-size:14px;margin-bottom:6px}
.adm-p-name em{color:#9f8fe8;font-style:normal}
.adm-p-btns{display:flex;gap:5px;flex-wrap:wrap}
.adm-p-btns button{font-size:12px;padding:5px 9px}

/* ---------- phone ---------- */
#phone{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.join{display:flex;flex-direction:column;align-items:center;padding:5vh 22px;gap:18px}
.join-card{width:100%;display:flex;flex-direction:column;gap:12px}
.join-card label{display:flex;flex-direction:column;gap:5px;font-family:var(--disp);font-size:12px;letter-spacing:2px;color:#e4cfae}
.join-card input{text-transform:uppercase;font-size:22px;font-family:var(--disp);letter-spacing:4px;text-align:center}
.icons{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ic{font-size:22px;background:#2a1a0c;border-radius:10px;padding:8px 10px;border:2px solid transparent}
.ic.sel{border-color:var(--gold);background:#4a2f16}
.ctrl{display:flex;flex-direction:column;padding:8px 10px;gap:6px;min-height:100vh}
.c-head{display:flex;align-items:center;gap:8px;font-size:14px}
.c-head button{padding:5px 9px;font-size:14px}
.me-chip{--pc:#d21f2c;background:var(--pc);padding:4px 10px;border-radius:16px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-timer{margin-left:auto;font-family:var(--disp);color:var(--gold);font-size:16px}
.c-moneyrow{display:flex;justify-content:space-between;font-family:var(--disp);font-size:13px;color:#e4cfae;padding:0 4px}
.c-moneyrow b{color:var(--gold);font-size:16px}
.c-mid{display:flex;gap:10px;align-items:stretch}
#c-wheel{width:38vw;max-width:210px;aspect-ratio:1;flex:none}
.c-mid-right{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.c-scores{display:flex;flex-direction:column;gap:4px}
.cs{--pc:#d21f2c;display:flex;justify-content:space-between;gap:6px;background:color-mix(in srgb,var(--pc) 55%,#000);border-left:5px solid var(--pc);border-radius:6px;padding:4px 8px;font-size:12px}
.cs.on{outline:2px solid #fff}
.cs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-zone{margin-top:auto;padding:8px 0 18px}
.c-wait{text-align:center;font-size:17px;color:#e8e2ff;padding:18px 10px;background:#00000033;border-radius:14px}
#c-buzz-wrap{display:flex;justify-content:center;padding:8px}
#c-buzz{width:64vw;max-width:290px;aspect-ratio:1;border-radius:50%;font-family:var(--disp);font-size:9vw;letter-spacing:2px;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff6b5e,#c81e10 65%,#8f0d02);box-shadow:0 10px 0 #6d0a02,0 16px 40px #000b;transition:transform .05s}
#c-buzz:active{transform:translateY(8px);box-shadow:0 2px 0 #6d0a02}
.c-actions{display:flex;flex-direction:column;gap:10px}
.c-actions button{width:100%}
.c-kb-hint{text-align:center;font-size:14px;color:var(--gold);font-family:var(--disp);letter-spacing:1px;margin-bottom:8px}
.kb{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.key{font-family:var(--disp);font-size:19px;padding:11px 0;background:#4a2f16;border-radius:9px}
.key.dim{background:#221a4d;color:#584a8f}
.c-solve{display:flex;flex-direction:column;gap:10px}
.pattern{font-family:'Courier New',monospace;font-weight:bold;text-align:center;font-size:16px;letter-spacing:2px;color:var(--gold);background:#00000044;border-radius:10px;padding:10px;word-wrap:break-word}
#solve-input{text-transform:uppercase;font-size:18px;text-align:center}
@media (max-width:700px){
  .lobby-grid{grid-template-columns:1fr}
}

/* ================= TPIR overrides & components ================= */
body.stagebg,body.homebg{background:radial-gradient(120vmax 80vmax at 50% -10%,#8a2b2b 0%,#5a1440 40%,#1c0930 100%)}
body.stagebg::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:-1;
  background:repeating-conic-gradient(#ffd40012 0 9deg,#0000 9deg 18deg);animation:sunspin 90s linear infinite}
@keyframes sunspin{to{transform:rotate(360deg)}}
body.phonebg{background:linear-gradient(180deg,#7a1f3a,#1c0930 70%)}
.logo.tpir{color:#ffe14d;text-shadow:0 3px 0 #a63a00,0 7px 14px #000a}
.linkbtn{text-decoration:none;text-align:center;padding:8px;border-radius:10px}

.pmain{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:1vh 1vw;overflow:auto}
.pscores{justify-content:center;padding-bottom:1vh}
.pc-name2{font-family:var(--disp);font-size:1.7vmin;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22vmin;line-height:1.45}
.pc-score{font-family:var(--disp);font-size:2.9vmin;text-shadow:0 2px 0 #0008}
.curtain{font-size:18vmin;text-align:center;line-height:1.25;animation:pulse 1s infinite alternate}

/* product cards */
.prod-card{background:#fff;color:#222;border-radius:1.6vmin;padding:2vmin 2.6vmin;display:flex;flex-direction:column;align-items:center;gap:.8vmin;box-shadow:0 8px 30px #000a;border:.5vmin solid #e8c04a;min-width:24vmin;max-width:44vmin}
.prod-card.big .pc-emoji{font-size:11vmin}
.prod-card.sm{min-width:13vmin;padding:1.2vmin;border-width:.3vmin;max-width:18vmin}
.prod-card.sm .pc-emoji{font-size:5vmin}
.prod-card.sm .pc-name{font-size:1.4vmin}
.prod-card.sel{outline:.6vmin solid #1a9e4b;transform:translateY(-.5vmin)}
.pc-emoji{font-size:8vmin;line-height:1.25;padding:.06em 0;filter:drop-shadow(0 4px 8px #0006)}
.pc-name{font-family:var(--disp);font-size:2.2vmin;text-align:center;letter-spacing:.5px;line-height:1.3;overflow-wrap:anywhere}
.pc-sub{color:#666;font-size:1.6vmin;text-align:center;line-height:1.4}
.price-tag{font-family:var(--disp);background:#ffd400;color:#7a1f1f;border-radius:.8vmin;padding:.5vmin 2vmin;font-size:3vmin;line-height:1.3;box-shadow:0 3px 0 #a67c00;transform:rotate(-2deg)}
.pc-img{width:9vmin;height:9vmin;object-fit:contain;filter:drop-shadow(0 4px 8px #0006)}
.prod-card.big .pc-img{width:12vmin;height:12vmin}
.prod-card.sm .pc-img{width:5vmin;height:5vmin}

/* contestants row */
.cr-wrap{display:flex;flex-direction:column;align-items:center;gap:2.2vmin;width:100%}
.cr-note{font-family:var(--disp);color:#ffe14d;font-size:2.4vmin;letter-spacing:2px;text-shadow:0 2px 6px #000;text-align:center;line-height:1.4;overflow-wrap:anywhere;max-width:92vw}
.cr-note.warn{color:#ff9b9b}
.podiums{display:flex;gap:1.4vmin;flex-wrap:wrap;justify-content:center;max-width:96vw}
.podium{--pc:#d21f2c;background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 60%,#000));border-radius:1vmin;padding:1.2vmin 1.8vmin;min-width:13vmin;text-align:center;box-shadow:0 5px 14px #0008;border:.3vmin solid #00000044;transition:transform .3s}
.podium.locked{outline:.4vmin solid #ffe14d}
.podium.win{transform:scale(1.12);outline:.5vmin solid #fff;box-shadow:0 0 4vmin #ffd400aa}
.podium.over{opacity:.55}
.pod-bid{font-family:var(--disp);font-size:3vmin;line-height:1.3;text-shadow:0 2px 0 #0008}
.pod-nm{font-family:var(--disp);font-size:1.6vmin;line-height:1.45;margin-top:.4vmin}
.pod-tag{font-size:1.5vmin;font-family:var(--disp);color:#ffe9a3;margin-top:.3vmin;line-height:1.35}

/* pricing game layout */
.game-wrap{display:grid;grid-template-columns:32vmin 1fr;gap:3vmin;align-items:center;width:min(96vw,170vmin);padding:0 2vw}
.game-left{display:flex;flex-direction:column;gap:1.4vmin;align-items:center;max-width:32vmin}
.game-title{font-family:var(--disp);color:#ffe14d;font-size:3.2vmin;letter-spacing:3px;text-shadow:0 3px 0 #a63a00,0 5px 16px #000;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.game-player{--pc:#d21f2c;background:var(--pc);font-family:var(--disp);padding:.8vmin 2vmin;border-radius:3vmin;font-size:2vmin;line-height:1.45;box-shadow:0 3px 10px #0008}
.game-how{color:#ffe9d2;font-size:1.7vmin;text-align:center;line-height:1.5;max-width:30vmin}
.game-result{font-family:var(--disp);font-size:2.2vmin;text-align:center;padding:1.4vmin 2vmin;border-radius:1.2vmin;letter-spacing:1px;line-height:1.45;max-width:100%;overflow-wrap:anywhere}
.game-result.good{background:#0a3d1f;border:.3vmin solid #54ff88;color:#54ff88}
.game-result.bad{background:#3d0a0a;border:.3vmin solid #ff9b9b;color:#ff9b9b}
.bet-note{font-family:Arial;font-size:1.6vmin;color:#ffe9a3;margin-top:.6vmin;line-height:1.4}
.game-right{display:flex;align-items:center;justify-content:center;min-height:40vmin;max-width:100%}
.bet-strip{position:fixed;bottom:13vh;left:50%;transform:translateX(-50%);background:#000000cc;border:2px solid #ffd400;color:#ffd400;font-family:var(--disp);font-size:2.2vmin;letter-spacing:2px;padding:1.2vmin 3vmin;border-radius:30px;z-index:20;max-width:92vw;text-align:center;line-height:1.4;animation:pulse 1s infinite alternate}

/* cliff */
.cliff{width:100%;display:flex;flex-direction:column;gap:2vmin}
.cliff-track{position:relative;height:16vmin;background:linear-gradient(90deg,#33a532 0%,#33a532 74%,#e8b419 74%,#e2231a 96%,#1c0930 96%);border-radius:1vmin;box-shadow:inset 0 0 3vmin #0007}
.cliff-marks span{position:absolute;bottom:.6vmin;transform:translateX(-50%);font-family:var(--disp);font-size:1.7vmin;color:#fff;text-shadow:0 1px 3px #000}
.cliff-marks .cliff-edge{font-size:3vmin;bottom:auto;top:.5vmin;line-height:1.25}
.climber{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);font-size:6vmin;line-height:1.25;filter:drop-shadow(0 4px 6px #0008)}
.cliff-info{font-family:var(--disp);color:#fff;font-size:2.2vmin;text-align:center;line-height:1.4}

/* earn / plinko / punch */
.earn{display:flex;flex-direction:column;align-items:center;gap:1.6vmin;max-width:100%}
.earn-status{font-family:var(--disp);color:#ffe14d;font-size:2.2vmin;letter-spacing:1px;line-height:1.4;text-align:center}
.earn-hist{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center}
.earn-hist span{font-family:var(--disp);font-size:1.7vmin;padding:.4vmin 1vmin;border-radius:.6vmin;background:#00000055;line-height:1.4}
.earn-hist .y{color:#54ff88}.earn-hist .n{color:#ff9b9b}
.plinko-wrap{display:flex;flex-direction:column;align-items:center;gap:1.4vmin;width:100%;max-width:100%}
#plinko-cv{width:min(52vmin,88%);aspect-ratio:1/1.05}
.punch-wrap{display:flex;flex-direction:column;align-items:center;gap:1.6vmin;width:100%;max-width:100%}
.holes{display:grid;grid-template-columns:repeat(10,1fr);gap:.7vmin;width:min(62vmin,92%)}
.hole{aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#e2231a,#8f0d02);border-radius:50%;box-shadow:inset 0 -3px 6px #0008;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:1.5vmin;color:#ffe14d;line-height:1.2}
.hole.done{background:#1c0930;box-shadow:inset 0 0 8px #000}
.hole.cur{outline:.4vmin solid #ffd400;font-size:1.7vmin}

/* digit boards */
.an{display:flex;flex-direction:column;align-items:center;gap:2vmin;max-width:100%}
.an-board{display:flex;flex-direction:column;align-items:center;gap:.8vmin;background:#00000038;border-radius:1.4vmin;padding:1.4vmin 2.4vmin;max-width:92vw}
.an-lbl{font-family:var(--disp);color:#ffe14d;font-size:2vmin;letter-spacing:1px;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.an-cents{color:#ffe9a3;font-size:1.6vmin}
.dboxes{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center}
.dbox{width:6vmin;height:7.4vmin;background:#fff;color:#111;border-radius:.8vmin;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:4.4vmin;box-shadow:inset 0 -4px 0 #00000022}
.dbox.empty{background:#2a1a4e;box-shadow:inset 0 0 10px #000}
.picked{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center;color:#ffe9a3;font-family:var(--disp);font-size:1.9vmin;line-height:1.4}
.picked span{background:#00000055;padding:.4vmin 1.2vmin;border-radius:.6vmin}
.picked .y{color:#54ff88}.picked .n{color:#ff9b9b}
.picked.big span{font-size:3.4vmin;padding:.8vmin 2vmin}
.chips-row{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center}
.dollar{font-size:4vmin;line-height:1.25;filter:drop-shadow(0 3px 5px #0007)}
.dollar.spent{opacity:.22;filter:grayscale(1)}
.safe-emoji{font-size:9vmin;line-height:1.25}
.hilo{display:flex;gap:1.6vmin;flex-wrap:wrap;justify-content:center;max-width:80vmin}

/* range */
.range{display:flex;gap:2vmin;align-items:stretch;height:44vmin;max-height:100%}
.range-scale{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--disp);color:#ffe9a3;font-size:1.9vmin;text-align:right;line-height:1.3}
.range-track{position:relative;width:12vmin;background:linear-gradient(180deg,#2a1a4e,#12093e);border:.4vmin solid #e8c04a;border-radius:1vmin;overflow:visible}
.range-win{position:absolute;left:0;right:0;background:#e2231aa8;border-top:.3vmin solid #ffd400;border-bottom:.3vmin solid #ffd400;bottom:0}
.range-price{position:absolute;left:100%;margin-left:1vmin;white-space:nowrap;font-family:var(--disp);color:#54ff88;font-size:2.2vmin;transform:translateY(50%)}

/* big wheel */
.wheel-wrap{display:grid;grid-template-columns:auto 1fr;gap:4vmin;align-items:center;width:min(96vw,160vmin);padding:0 2vw}
.bw-side{width:52vmin;height:52vmin}
.bw-side canvas{width:100%;height:100%}
.bw-list{display:flex;flex-direction:column;gap:1vmin;max-width:50vmin}
.bw-title{font-family:var(--disp);color:#ffe14d;font-size:2.4vmin;letter-spacing:2px;margin-bottom:1vmin;line-height:1.35}
.bw-row{--pc:#d21f2c;display:flex;justify-content:space-between;gap:2vmin;background:color-mix(in srgb,var(--pc) 45%,#000);border-left:.8vmin solid var(--pc);border-radius:.8vmin;padding:1vmin 1.6vmin;font-family:var(--disp);font-size:2.1vmin;line-height:1.45}
.bw-row.cur{outline:.4vmin solid #fff;transform:scale(1.03)}
.bw-note{font-family:var(--disp);color:#ffe14d;font-size:2.2vmin;margin-top:1vmin;line-height:1.4;animation:pulse 1s infinite alternate}

/* showcase */
.sc-wrap{display:flex;gap:3vmin;flex-wrap:wrap;justify-content:center;align-items:stretch;width:min(96vw,170vmin)}
.sc-card{--pc:#d21f2c;background:#00000042;border:.5vmin solid var(--pc);border-radius:1.8vmin;padding:2vmin;display:flex;flex-direction:column;gap:1.4vmin;align-items:center;min-width:40vmin;flex:1;max-width:70vmin}
.sc-card.active{outline:.5vmin solid #ffd400;animation:pulse 1.2s infinite alternate}
.sc-card.win{outline:.6vmin solid #54ff88;box-shadow:0 0 5vmin #54ff8877}
.sc-lbl{font-family:var(--disp);color:#fff;font-size:2.1vmin;letter-spacing:1px;text-align:center;line-height:1.45}
.sc-items{display:flex;gap:1.4vmin;flex-wrap:wrap;justify-content:center}
.sc-bid{font-family:var(--disp);color:#ffe14d;font-size:2.2vmin;text-align:center;line-height:1.4;overflow-wrap:anywhere}

/* small / vertical screens: stack instead of clipping */
@media (max-aspect-ratio:4/3){
  .game-wrap{grid-template-columns:1fr;justify-items:center;gap:2.4vmin}
  .game-left{max-width:76vmin}
  .wheel-wrap{grid-template-columns:1fr;justify-items:center;gap:2.4vmin}
  .bw-side{width:62vmin;height:62vmin}
}

/* ---------- phone widgets ---------- */
.c-zone2{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 0;justify-content:flex-start;overflow-y:auto}
.c-scoretag{font-family:var(--disp);color:#ffd400;font-size:15px;margin-left:auto}
.c-note{text-align:center;color:#ffe9a3;font-size:14px;line-height:1.4}
.np-hint{text-align:center;font-size:16px;color:#ffe9d2;line-height:1.5;padding:4px 6px}
.np-hint b{overflow-wrap:anywhere}
.np-display{font-family:var(--disp);text-align:center;font-size:34px;color:#ffd400;background:#00000055;border-radius:12px;padding:8px;line-height:1.3}
.np{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.np-key{font-family:var(--disp);font-size:22px;padding:13px 0;background:#4a2f16;border-radius:10px}
.np-key.sel{outline:3px solid #ffd400}
.bet-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bet-btns .big{flex:1;min-width:130px}
.spin-big{width:60vw;max-width:270px;aspect-ratio:1;border-radius:50%;font-family:var(--disp);font-size:8.5vw;line-height:1.2;letter-spacing:2px;margin:8px auto;display:block;
  background:radial-gradient(circle at 35% 30%,#ffe14d,#e8b419 60%,#a67c00);color:#3a2a00;box-shadow:0 10px 0 #6d5200,0 16px 40px #000b;transition:transform .05s}
.spin-big:active{transform:translateY(8px);box-shadow:0 2px 0 #6d5200}
.slot-row{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.slot-btn{font-family:var(--disp);font-size:17px;padding:14px 0;background:#4a2f16;border-radius:8px}
.hole-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.hole-btn{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e2231a,#8f0d02);padding:0}
.hole-btn.done{background:#1c0930;opacity:.4}
.hilo-list{display:flex;flex-direction:column;gap:8px}
.hilo-btn{text-align:left;font-size:15px;padding:12px;background:#4a2f16;border-radius:10px;line-height:1.45}
.hilo-btn.sel{outline:3px solid #1a9e4b;background:#1f4436}
.ud-row{display:flex;gap:10px;justify-content:center}
.ud-col{display:flex;flex-direction:column;gap:6px;align-items:center}
.ud-btn{font-size:19px;padding:9px 13px;background:#4a2f16;border-radius:9px}
.ud-btn.sel{outline:3px solid #ffd400;background:#5a4a13}
.ud-digit{font-family:var(--disp);font-size:26px;background:#fff;color:#111;border-radius:8px;padding:6px 12px}
.safe-d{padding:13px 17px}
.safe-d.sel{opacity:.35}

/* kill inherited WOF scoreboard rules that clip product names / stack podiums wrong */
.prod-card .pc-name{white-space:normal;overflow:visible;text-overflow:clip;max-width:100%;font-size:2.2vmin}
.prod-card.sm .pc-name{font-size:1.5vmin}
.prod-card.big .pc-name{font-size:2.6vmin}
.podium{display:flex;flex-direction:column;align-items:center;gap:.2vmin}
@media (max-aspect-ratio:4/3){
  .prod-card{max-width:80vw}
  .prod-card .pc-name{font-size:clamp(13px,3.4vmin,20px)}
}

/* phone CR reveal */
.rev-list{display:flex;flex-direction:column;gap:7px}
.rev-row{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#00000044;border-radius:10px;padding:10px 13px;font-size:15px;line-height:1.4}
.rev-row b{color:#ffd400;white-space:nowrap}
.rev-row.win{outline:2px solid #54ff88;background:#0a3d1f}
.rev-row.win b{color:#54ff88}
.rev-row.over{opacity:.6}

/* iOS: kill double-tap zoom on rapid taps (buzzers/keys), keep pinch */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
button,input,select,textarea,a,label{touch-action:manipulation}
button{user-select:none;-webkit-user-select:none}

/* how-to-play popup + phone product cards */
.howto{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:45;background:#12093ef6;border:.5vmin solid #ffd400;border-radius:2vmin;padding:3vmin 4vmin;max-width:70vmin;text-align:center;box-shadow:0 14px 60px #000c}
@keyframes htpop{from{transform:translate(-50%,-46%) scale(.85);opacity:0}}
.howto .ht-t{font-family:var(--disp);color:#e4cfae;letter-spacing:3px;font-size:1.9vmin}
.howto .ht-title{font-family:var(--disp);color:#ffe14d;font-size:4vmin;letter-spacing:3px;margin:.8vmin 0;text-shadow:0 3px 0 #a63a00}
.howto p{color:#fff;font-size:2.3vmin;line-height:1.6;margin:1vmin 0}
.howto .ht-sub{color:#54ff88;font-family:var(--disp);font-size:1.9vmin;letter-spacing:1px;animation:pulse 1s infinite alternate}
.howto.phone{position:static;transform:none;max-width:100%;padding:16px;border-width:3px}
.howto.phone .ht-t{font-size:12px}
.howto.phone .ht-title{font-size:24px}
.howto.phone p{font-size:15px}
.howto.phone .ht-sub{font-size:14px}
.howto.phone .prod-card.phone{margin:8px auto}
.prod-card.phone{min-width:0;max-width:100%;width:fit-content;margin:0 auto 6px;padding:12px 22px;border-width:3px;gap:6px}
.prod-card.phone .pc-emoji{font-size:44px}
.prod-card.phone .pc-img{width:64px;height:64px}
.prod-card.phone .pc-name{font-size:16px;line-height:1.35}
.prod-card.phone .price-tag{font-size:20px;padding:3px 16px}
.prod-card.phone.mini{padding:8px 16px}
.prod-card.phone.mini .pc-emoji{font-size:30px}
.prod-card.phone.mini .pc-img{width:44px;height:44px}
.prod-card.phone.mini .pc-name{font-size:13px}
.prod-card.phone.mini .price-tag{font-size:15px;padding:2px 12px}
.sc-phone-items{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sc-phone-items .prod-card.phone{margin:0;flex:1;min-width:96px}

/* ================= TRIVIA theme ================= */
body.stagebg,body.homebg{background:radial-gradient(120vmax 80vmax at 50% -10%,#0e6b6b 0%,#0a3550 40%,#050f1e 100%)}
body.stagebg::after{background:repeating-conic-gradient(#29d3d312 0 9deg,#0000 9deg 18deg)}
body.phonebg{background:linear-gradient(180deg,#7a3f12,#050f1e 70%)}
.logo.triv{color:var(--bkgold,#ffcf6a);text-shadow:0 3px 0 #7a4a12,0 7px 14px #0009}
.hdr-mode{font-family:var(--disp);color:#ffcf6a;font-size:1.9vmin;letter-spacing:2px;margin-left:2vmin}

/* question stage */
.tq-wrap{display:flex;flex-direction:column;align-items:center;gap:2.4vmin;width:min(94vw,150vmin)}
.tq-cat{font-family:var(--disp);background:#000;color:#ffcf6a;padding:.7vmin 3vmin;border-radius:3vmin;font-size:2vmin;letter-spacing:3px}
.tq-cat.sm{font-size:12px;padding:4px 14px;margin:4px auto;width:fit-content;letter-spacing:2px}
.tq-text{font-family:var(--disp);color:#fff;font-size:3.6vmin;text-align:center;line-height:1.4;letter-spacing:.5px;text-shadow:0 3px 10px #000;max-width:120vmin;overflow-wrap:anywhere}
.tq-text.sm{font-size:18px;text-align:center;line-height:1.45;padding:0 4px;font-family:var(--disp)}
.tq-opts{display:grid;grid-template-columns:1fr 1fr;gap:1.6vmin;width:100%;max-width:120vmin}
.tq-opt{--oc:#e2231a;display:flex;align-items:center;gap:1.6vmin;background:linear-gradient(180deg,var(--oc),color-mix(in srgb,var(--oc) 65%,#000));border-radius:1.4vmin;padding:1.8vmin 2.2vmin;font-family:var(--disp);font-size:2.4vmin;line-height:1.35;box-shadow:0 5px 16px #0008;transition:all .25s;overflow-wrap:anywhere}
.tq-opt.right{outline:.6vmin solid #54ff88;transform:scale(1.03);box-shadow:0 0 4vmin #54ff8877}
.tq-opt.dim{opacity:.35;filter:grayscale(.4)}
.tq-shape{font-size:2.6vmin;filter:drop-shadow(0 2px 3px #0008)}
.tq-lbl{background:#00000044;border-radius:.8vmin;padding:.3vmin 1.1vmin;font-size:2vmin}
.tq-txt{flex:1}
.tq-picks{font-size:2.2vmin;line-height:1.3}
.tq-status{font-family:var(--disp);color:#ffcf6a;font-size:2.2vmin;letter-spacing:1px;line-height:1.4;text-align:center;animation:pulse 1.2s infinite alternate}
.pcard.tcard.done{outline:.4vmin solid #ffcf6a}

/* phone options */
.c-opts{display:flex;flex-direction:column;gap:10px}
.c-opt{--oc:#e2231a;display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(180deg,var(--oc),color-mix(in srgb,var(--oc) 65%,#000));border-radius:12px;padding:15px 14px;font-family:var(--disp);font-size:16px;line-height:1.4;color:#fff;box-shadow:0 4px 0 #00000055;transition:transform .06s}
.c-opt:active{transform:translateY(3px)}
.c-opt .tq-shape{font-size:18px}
.c-opt.picked{outline:3px solid #fff}
.c-opt.right{outline:3px solid #54ff88;box-shadow:0 0 24px #54ff8866}
.c-opt.wrongpick{outline:3px solid #ff5545;opacity:.75}
.c-opt.dim{opacity:.35}
.c-opt:disabled{cursor:default;opacity:.9}
.c-opt.dim:disabled{opacity:.35}

/* ================= Solo Host (Play on this device) ================= */
.hostmode{display:flex;gap:8px;width:100%}
.hm-btn{flex:1;font-family:var(--disp);font-size:13px;letter-spacing:.5px;padding:12px 8px;background:#3a2410;border:2px solid #ffffff22;border-radius:12px;color:#f0dcc0;line-height:1.3}
.hm-btn.on{border-color:#ffcf6a;background:#7a3f12;color:#fff}
.solo-id{display:flex;flex-direction:column;gap:8px;width:100%;background:#00000030;border-radius:12px;padding:12px}
.solo-id input{text-transform:uppercase;font-family:var(--disp);letter-spacing:2px;text-align:center}
.solo-note{color:#bfe9f5;font-size:12px;line-height:1.45}
.youtag{font-style:normal;background:#ffcf6a;color:#2a1706;border-radius:5px;padding:0 5px;font-size:.72em;letter-spacing:1px;vertical-align:middle}
/* in solo, the stage IS your controller: tappable + phone-tuned */
body.solo .tq-opt.tappable{cursor:pointer}
body.solo .tq-opt.tappable:active{transform:scale(.97)}
body.solo .tq-opt.mine{outline:.6vmin solid #fff;box-shadow:0 0 3vmin #ffffff66}
body.solo #stage{padding:1vh 3vw}
@media (max-aspect-ratio:3/4){
  body.solo .tq-opts{grid-template-columns:1fr;gap:10px}
  body.solo .tq-text{font-size:22px;line-height:1.35}
  body.solo .tq-cat{font-size:13px}
  body.solo .tq-opt{font-size:18px;padding:15px 16px;gap:12px}
  body.solo .tq-shape{font-size:20px}
  body.solo .tq-lbl{font-size:15px}
  body.solo .hdr-round{font-size:15px}
  body.solo .hdr-mode{font-size:12px}
  body.solo .tq-status{font-size:15px}
  body.solo .pc-name2{font-size:12px}
}

/* ================= DOODLE DASH ================= */
.d-wrap{display:flex;gap:22px;align-items:stretch;justify-content:center;width:100%;height:100%;padding:6px 10px}
.d-board{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:0}
.art{width:100%;height:100%;border-radius:16px;box-shadow:0 10px 34px #0007,inset 0 0 0 3px #ffffff22;background:#fdfbf5}
.d-board .art{width:min(52vw,60vh);height:min(52vw,60vh)}
.d-side{flex:1 1 0;min-width:0;max-width:520px;display:flex;flex-direction:column;gap:10px;justify-content:flex-start;padding-top:4px}

.d-hint{font-family:'Courier New',monospace;font-weight:900;font-size:clamp(22px,3.4vw,46px);letter-spacing:.16em;color:#ffe9a8;text-shadow:0 3px 0 #0007;word-break:break-word;line-height:1.25}
.d-hint.sm{font-size:20px;letter-spacing:.14em;color:#ffe9a8;text-shadow:none}
.d-letters{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#ffffff88;margin-top:-4px}

.d-word{font-size:clamp(30px,4.6vw,62px);font-weight:900;letter-spacing:.03em;color:#fff;text-shadow:0 4px 0 #0008}
.d-by{font-size:18px;color:#ffe9a8}
.d-by b{color:#7dffb0}
.d-got{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.dgot{background:linear-gradient(180deg,var(--pc,#1f8fe0),#0000);border:1px solid #ffffff33;border-radius:999px;padding:4px 11px;font-size:14px;font-weight:800;color:#fff;box-shadow:0 2px 8px #0005}
.d-got i{color:#ffffff77;font-size:16px}

.d-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:90px;text-align:center;animation:dpulse 1.4s ease-in-out infinite}
.d-pick div{font-size:34px;font-weight:900;color:#fff}
.d-pick small{font-size:17px;color:#ffffffaa;font-weight:600}
@keyframes dpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.d-feed{display:flex;flex-direction:column;gap:5px;overflow:hidden;flex:1 1 auto;min-height:0;justify-content:flex-end}
.dfi{background:#ffffff10;border-left:4px solid var(--pc,#888);border-radius:8px;padding:5px 10px;font-size:16px;color:#fff;animation:dfin .22s ease-out}
.dfi span{color:#ffffffbb}
.dfi.near{background:#e8b41922;border-left-color:#e8b419}
.dfi.near em{color:#ffd94a;font-style:normal;font-weight:800;font-size:13px}
.dfi.ok{background:#1a9e4b33;border-left-color:#7dffb0}
.dfi.ok b{color:#7dffb0}
@keyframes dfin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pcard.tcard.drawing{outline:2px solid #ffd94a;box-shadow:0 0 18px #ffd94a55}

/* ---- phone: drawing surface ---- */
.d-draw{display:flex;flex-direction:column;gap:8px;height:100%}
.d-yourword{font-size:17px;font-weight:800;color:#ffe9a8;text-align:center;letter-spacing:.04em}
.d-yourword b{color:#fff;font-size:21px;letter-spacing:.06em}
#dcv{width:100%;aspect-ratio:1/1;max-height:52vh;border-radius:14px;background:#fdfbf5;box-shadow:0 6px 20px #0006;touch-action:none;cursor:crosshair;display:block}
.d-pens{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.d-pens .pen{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff33;padding:0;cursor:pointer;transition:transform .12s}
.d-pens .pen.on{border-color:#ffd94a;transform:scale(1.16)}
.d-tools{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.d-sizes{display:flex;gap:6px}
.d-sizes .psz{width:38px;height:34px;border-radius:9px;background:#ffffff14;border:1px solid #ffffff26;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.d-sizes .psz span{display:block;background:#fff;border-radius:50%}
.d-sizes .psz.on{background:#ffd94a2e;border-color:#ffd94a}
.dtool{background:#ffffff14;border:1px solid #ffffff26;color:#fff;border-radius:9px;padding:8px 12px;font-size:14px;font-weight:700;cursor:pointer}
.dtool:active{background:#ffffff2a}
.d-live{display:flex;flex-direction:column;gap:4px;max-height:22vh;overflow:hidden;justify-content:flex-end}
.d-live .dfi{font-size:14px;padding:4px 8px}

/* ---- phone: guessing ---- */
.d-guess{display:flex;flex-direction:column;gap:8px;height:100%}
.d-art{display:flex;justify-content:center}
.d-art .art{width:100%;max-width:min(90vw,44vh);height:auto;aspect-ratio:1/1;border-radius:12px;box-shadow:0 6px 18px #0006}
.c-form.row{display:flex;gap:8px;align-items:stretch}
.c-form.row .big{flex:0 0 auto;padding:0 18px;font-size:16px}
#guess-in{flex:1 1 auto;min-width:0;font-size:19px;font-weight:700;padding:13px 14px;border-radius:12px;border:2px solid #ffffff33;background:#ffffff12;color:#fff;text-transform:uppercase;letter-spacing:.04em}
#guess-in:focus{outline:none;border-color:#ffd94a;background:#ffffff1c}
/* wrong-guess cooldown */
#guess-in:disabled{border-color:#e2231a66;background:#e2231a14;color:#ffffff7a}
#guess-in:disabled::placeholder{color:#ff9d93cc;text-transform:none;letter-spacing:0;font-weight:700}
.c-form.row .big.cooling{background:#3a2430;color:#ff9d93;box-shadow:0 5px 0 #00000055;cursor:not-allowed;min-width:64px}
.c-form.row .big.cooling:active{transform:none}

/* ---- phone: word picker (shares .bl-opt look) ---- */
.bl-opts{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.bl-opt{width:100%;text-align:left;background:#ffffff12;border:2px solid #ffffff2e;color:#fff;border-radius:13px;padding:16px 16px;font-size:19px;font-weight:800;letter-spacing:.04em;cursor:pointer}
.bl-opt:active{background:#ffffff24}
.bl-opt.sel{border-color:#ffd94a;background:#ffd94a2e}
.bl-opt:disabled{opacity:.45}
.c-form{display:flex;flex-direction:column}
.c-big{font-size:22px;font-weight:900;color:#fff;text-align:center;margin-bottom:4px}
.c-note{display:block;font-size:14px;color:#ffffffaa;margin-top:6px;text-align:center}

@media(max-width:1000px){
  .d-wrap{flex-direction:column;gap:10px;align-items:center}
  .d-board .art{width:min(74vw,40vh);height:min(74vw,40vh)}
  .d-side{max-width:none;width:100%;align-items:center;text-align:center}
  .d-feed{max-height:22vh}
}

/* ================= WORD RUSH ================= */
.setwarn{background:#e2231a1f;border:1px solid #e2231a66;color:#ffc9c3;border-radius:10px;padding:8px 10px;margin:2px 0 10px;font-size:13px;line-height:1.45}
.setwarn b{color:#fff}

/* ---- big screen: the board ---- */
.w-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.6vmin;width:100%;height:100%;padding:.6vh 1vw}
.w-rack{display:flex;gap:1.1vmin;justify-content:center;flex-wrap:wrap}
.wt{font-family:var(--disp);display:flex;align-items:center;justify-content:center;
  width:9.2vmin;height:10.6vmin;border-radius:1.4vmin;font-size:6.2vmin;line-height:1;color:#2a1c00;
  background:linear-gradient(180deg,#fff8e2,#f0d99b);border:.35vmin solid #a67c00;
  box-shadow:0 .8vmin 0 #8a6400,0 1.6vmin 3vmin #0007;text-shadow:0 .2vmin 0 #ffffffcc}
.wt.vow{background:linear-gradient(180deg,#fdf0ff,#e3c6f5);border-color:#7a49a8;box-shadow:0 .8vmin 0 #5d3583,0 1.6vmin 3vmin #0007}
.w-sub{font-family:var(--disp);letter-spacing:.28em;font-size:1.7vmin;color:#e4cfae;text-transform:uppercase}
.w-agg{font-family:var(--disp);color:#ffe9a8;font-size:2.4vmin;letter-spacing:1px}
.w-agg b{color:#7dffb0;font-size:1.25em}

.w-ticker{display:flex;flex-direction:column;gap:.6vmin;align-items:center;flex:1 1 auto;min-height:0;overflow:hidden;justify-content:flex-start;width:min(96vw,120vmin)}
.wti{background:#ffffff10;border-left:.5vmin solid var(--pc,#888);border-radius:.9vmin;padding:.5vmin 1.6vmin;font-size:2vmin;color:#fff;animation:wtin .22s ease-out;white-space:nowrap}
.wti b{color:#ffe14d}
.wti.nine{background:#ffd40026;border-left-color:#ffd400;font-family:var(--disp);letter-spacing:1px;animation:pulse .7s infinite alternate}
@keyframes wtin{from{opacity:0;transform:translateY(.8vmin)}to{opacity:1;transform:none}}

/* ---- big screen: per-player progress, lengths only, never the words ---- */
.w-pips{display:flex;flex-wrap:wrap;gap:.35vmin;margin-top:.5vmin;max-width:22vmin}
.wp{height:1.5vmin;border-radius:.35vmin;background:#ffffff5c;box-shadow:inset 0 -.2vmin 0 #0004}
.wp[data-l="3"]{width:1.1vmin}
.wp[data-l="4"]{width:1.5vmin}
.wp[data-l="5"]{width:2vmin;background:#9fe8ff}
.wp[data-l="6"]{width:2.5vmin;background:#7dffb0}
.wp[data-l="7"]{width:3vmin;background:#ffe14d}
.wp[data-l="8"]{width:3.5vmin;background:#ffa63d}
.wp[data-l="9"]{width:4vmin;background:linear-gradient(90deg,#ffd400,#fff3a8);box-shadow:0 0 1.2vmin #ffd400}
.w-rp{font-family:var(--disp);font-size:1.6vmin;color:#7dffb0;letter-spacing:1px}
.w-rp.zero{color:#ffffff66}
.pcard.tcard.hot{outline:.35vmin solid #ffd94a;box-shadow:0 0 2vmin #ffd94a66}

/* ---- big screen: reveal ---- */
.w-rev{display:flex;flex-direction:column;align-items:center;gap:1.2vmin;width:100%;height:100%;padding:.4vh 1vw}
.w-nine{font-family:var(--disp);font-size:6.4vmin;letter-spacing:.14em;color:#fff;text-shadow:0 .5vmin 0 #a67c00,0 1vmin 2vmin #0009}
.w-ninelbl{font-family:var(--disp);letter-spacing:.3em;font-size:1.6vmin;color:#ffe14d;text-transform:uppercase}
.w-stat{font-size:1.9vmin;color:#e4cfae}
.w-stat b{color:#fff}
.w-cols{display:flex;gap:1.2vmin;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%;flex:1 1 auto;min-height:0;overflow:hidden}
.w-col{--pc:#1f8fe0;background:#00000038;border-top:.5vmin solid var(--pc);border-radius:1vmin;padding:.9vmin 1.2vmin;min-width:17vmin;max-width:26vmin;flex:0 1 auto;max-height:100%;overflow:hidden}
.w-colh{font-family:var(--disp);font-size:1.7vmin;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.w-colh em{font-style:normal;color:#7dffb0}
.w-wlist{display:flex;flex-wrap:wrap;gap:.4vmin;margin-top:.6vmin}
.ww{background:#ffffff14;border-radius:.5vmin;padding:.15vmin .8vmin;font-size:1.55vmin;letter-spacing:.06em;color:#fff}
.ww.l6{background:#7dffb02e;color:#c8ffdc}
.ww.l7{background:#ffe14d2e;color:#fff0b0}
.ww.l8{background:#ffa63d33;color:#ffd9b0}
.ww.l9{background:#ffd40044;color:#fff6c9;font-weight:900}
.ww.dead{opacity:.4;text-decoration:line-through}
.w-none{color:#ffffff77;font-size:1.6vmin;font-style:italic}
.w-missed{font-size:1.7vmin;color:#ffffff99;text-align:center;max-width:80vw}
.w-missed b{color:#ffe14d}

@media(max-width:1000px){
  .wt{width:8.6vmin;height:10vmin;font-size:5.6vmin}
  .w-cols{overflow-y:auto}
}

/* ---- phone: the rack + the box ---- */
.w-play{display:flex;flex-direction:column;gap:9px;height:100%}
.w-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.w-tiles .wt{width:auto;height:auto;aspect-ratio:1/1.08;font-size:min(8.5vw,34px);border-radius:10px;border-width:2px;
  box-shadow:0 4px 0 #8a6400,0 6px 14px #0006;cursor:pointer;transition:transform .07s,opacity .12s}
.w-tiles .wt.vow{box-shadow:0 4px 0 #5d3583,0 6px 14px #0006}
.w-tiles .wt:active{transform:translateY(3px);box-shadow:0 1px 0 #8a6400}
.w-tiles .wt.used{opacity:.24;pointer-events:none}
#w-in{flex:1 1 auto;min-width:0;font-size:22px;font-weight:900;padding:13px 14px;border-radius:12px;border:2px solid #ffffff33;
  background:#ffffff12;color:#fff;text-transform:uppercase;letter-spacing:.14em;text-align:center}
#w-in:focus{outline:none;border-color:#ffd94a;background:#ffffff1c}
.w-acts{display:flex;gap:8px}
.wact{flex:1;background:#ffffff14;border:1px solid #ffffff26;color:#fff;border-radius:10px;padding:9px 6px;font-size:14px;font-weight:700}
.wact:active{background:#ffffff2a}
.w-flash{min-height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
  border-radius:10px;padding:4px 8px;text-align:center;transition:background .15s;line-height:1.3}
.w-flash.ok{background:#1a9e4b33;color:#7dffb0}
.w-flash.bad{background:#e2231a2b;color:#ff9d93;animation:wshake .3s}
.w-flash.meh{background:#ffd40022;color:#ffe14d}
@keyframes wshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.w-mine{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;overflow-y:auto;flex:1 1 auto;min-height:0;padding-top:2px}
.w-mine .ww{font-size:14px;padding:3px 8px;border-radius:7px}
.w-count{font-size:13px;color:#ffffff9c;text-align:center;letter-spacing:.06em}
.w-count b{color:#ffe14d}
.w-revme{display:flex;flex-direction:column;gap:8px;align-items:center}
.w-revme .w-nine{font-size:30px;text-shadow:0 3px 0 #a67c00}

/* ================= DEAD STOP ================= */
/* The clock is the whole game, so it gets the whole screen. Everything else on
   the stage is deliberately quiet — nothing may pulse on a 1-second beat once
   the numbers fade, or the room just counts along with the decoration. */
.ds-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:46vh;position:relative}
.ds-clockbox{position:relative;display:flex;align-items:center;justify-content:center;
  width:min(74vw,900px);height:min(34vh,300px)}
.ds-clock{font-family:var(--disp);font-size:min(26vw,230px);line-height:.9;letter-spacing:-.02em;
  color:#fff;text-shadow:0 0 42px #7ad0ff88,0 6px 0 #00000055;font-variant-numeric:tabular-nums;
  transition:none}
/* The ghost owns its own opacity through the keyframes — a CSS animation beats
   an inline style, so JS toggles .on and never touches opacity here. Alpha lives
   in the keyframes, NOT in the colour: stacking a 12%-white colour under a 15%
   animation made this thing mathematically invisible. */
.ds-ghost{position:absolute;font-size:min(14vw,130px);opacity:0;color:#fff;
  filter:drop-shadow(0 0 30px #7ad0ff55)}
.ds-ghost.on{animation:dsBreathe 3.7s ease-in-out infinite}
/* 3.7s on purpose: any whole-second cycle here would be a metronome */
@keyframes dsBreathe{0%,100%{transform:scale(1);opacity:.09}50%{transform:scale(1.07);opacity:.18}}
.ds-cd{font-family:var(--disp);font-size:min(20vw,180px);color:var(--gold);
  text-shadow:0 0 50px #ffd40066;line-height:1}
.ds-cd.pop{animation:dsPop .5s ease-out}
@keyframes dsPop{0%{transform:scale(.4);opacity:0}45%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
.ds-sub{font-family:var(--disp);letter-spacing:.22em;font-size:clamp(13px,1.6vw,20px);
  color:#9ff0d0;text-transform:uppercase;min-height:24px}

/* ---- reveal ---- */
.ds-rev{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:4px 0}
.ds-tlbl{font-family:var(--disp);letter-spacing:.28em;font-size:clamp(11px,1.3vw,15px);
  color:#ffffff88;text-transform:uppercase}
.ds-target{font-family:var(--disp);font-size:clamp(46px,8vw,110px);line-height:1;color:var(--gold);
  text-shadow:0 0 40px #ffd4004d;font-variant-numeric:tabular-nums}
.ds-target span{font-size:.42em;color:#ffffff9c;margin-left:.06em}

/* the number line: everybody's guess against the truth, at a glance */
.ds-line{position:relative;width:min(92vw,1180px);height:132px;margin:26px 0 2px}
.ds-axis{position:absolute;left:0;right:0;top:96px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#ffffff10,#ffffff44,#ffffff10)}
.ds-mark{position:absolute;top:78px;bottom:0;width:3px;margin-left:-1.5px;
  background:linear-gradient(180deg,var(--gold),#ffd40000);box-shadow:0 0 16px #ffd40099}
.ds-mark::after{content:"";position:absolute;left:50%;top:16px;width:14px;height:14px;margin-left:-7px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 18px #ffd400cc}
.ds-marklbl{position:absolute;left:50%;top:38px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--disp);font-size:14px;color:#ffe98a}
/* every pin BOTTOMS OUT on the axis (top:96px) and none of them may escape the
   box upward — the giant target number lives directly above and labels used to
   crash straight into it. Three lanes, all inside 0..96. */
.ds-pin{position:absolute;top:52px;height:44px;width:0}
.ds-pin.r1{top:26px;height:70px}
.ds-pin.r2{top:0;height:96px}
.ds-pinstem{position:absolute;left:-1px;top:20px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--pc),transparent);opacity:.85}
.ds-pinstem::after{content:"";position:absolute;left:-4px;bottom:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc)}
.ds-pinlbl{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;
  background:var(--pc);color:#fff;font-size:12px;font-weight:bold;padding:3px 8px;border-radius:11px;
  box-shadow:0 2px 8px #0006;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.ds-pinlbl em{font-style:normal;opacity:.82;margin-left:6px;font-variant-numeric:tabular-nums}
.ds-pin.win .ds-pinlbl{outline:2px solid var(--gold);box-shadow:0 0 18px #ffd40088}
.ds-ends{position:absolute;left:0;right:0;top:104px;display:flex;justify-content:space-between;
  font-size:12px;color:#ffffff5c;font-variant-numeric:tabular-nums}

.ds-rows{display:flex;flex-direction:column;gap:5px;width:min(92vw,900px);margin-top:6px}
.ds-row{--pc:#888;display:grid;grid-template-columns:1fr 92px 116px 118px 78px;align-items:center;gap:8px;
  background:#ffffff0e;border-left:5px solid var(--pc);border-radius:9px;padding:7px 12px;font-size:16px}
.ds-row.win{background:#ffd4001c;box-shadow:0 0 0 1px #ffd40055 inset}
.ds-rn{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-rms,.ds-rerr{font-variant-numeric:tabular-nums;text-align:right;color:#ffffffcc}
.ds-rerr{color:#ffffff8a;font-size:14px}
.ds-rg{font-family:var(--disp);font-size:13px;letter-spacing:.1em;text-align:center;
  padding:3px 6px;border-radius:7px;background:#ffffff14}
.ds-rp{font-family:var(--disp);color:var(--gold);text-align:right;font-size:18px}
.ds-rp em{font-style:normal;color:#fff}

/* grades — one ladder shared by the stage and the phone */
.gr-dead{background:linear-gradient(90deg,#ffd400,#ff9d00);color:#241a00;text-shadow:none}
.gr-razor{background:#1fd6a0;color:#04231a}
.gr-sharp{background:#39a2ff;color:#04203d}
.gr-close{background:#c99a5a;color:#170d05}
.gr-off{background:#ffffff1f;color:#ffffffbb}
.gr-wild{background:#c9372e;color:#fff}
.gr-none{background:#ffffff12;color:#ffffff7a}

/* ---- the phone ---- */
.c-sync{font-size:11px;color:#ffffff77;white-space:nowrap;letter-spacing:.02em}
.c-sync.good{color:#5ce0a8}
.c-sync.warn{color:#ffb45c}
.c-run{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0}
.c-cd{font-family:var(--disp);font-size:64px;line-height:1;color:var(--gold);min-height:0}
.c-cd:empty{display:none}
.c-watch{text-align:center;color:#cfe8ff;font-size:16px;padding:8px 12px;background:#00000033;border-radius:12px}
.c-clockbox{position:relative;display:flex;align-items:center;justify-content:center;height:110px;width:100%}
.c-clock{font-family:var(--disp);font-size:76px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px #7ad0ff66}
.c-ghost{position:absolute;font-size:54px;opacity:0;color:#fff;filter:drop-shadow(0 0 18px #7ad0ff55)}
.c-ghost.on{animation:dsBreathe 3.7s ease-in-out infinite}
/* the button is the size it is because you will be looking at the TV, not at it */
.c-stopbtn{width:min(78vw,300px);height:min(78vw,300px);border-radius:50%;
  font-family:var(--disp);font-size:46px;letter-spacing:.06em;
  background:radial-gradient(circle at 50% 34%,#ff6a5e,#a3160e 72%);color:#fff;
  box-shadow:0 12px 0 #6d0d07,0 18px 34px #0009;transition:transform .06s,box-shadow .06s;
  border:5px solid #ffffff2b}
.c-stopbtn:disabled{opacity:.42;box-shadow:0 8px 0 #3d0a06}
.c-stopbtn.live{animation:dsReady .9s ease-out 1}
.c-stopbtn.live:active{transform:translateY(9px);box-shadow:0 3px 0 #6d0d07,0 6px 14px #0009}
@keyframes dsReady{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.c-stopbtn.done{background:radial-gradient(circle at 50% 34%,#4a5f7a,#1d2836 72%);font-size:26px;
  box-shadow:0 8px 0 #10161f}
.c-revme{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;
  background:#00000033;border-radius:14px}
.c-tlbl{font-family:var(--disp);letter-spacing:.24em;font-size:11px;color:#ffffff7a}
.c-target{font-family:var(--disp);font-size:52px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.c-target span{font-size:.4em;color:#ffffff9c}
.c-myms{font-family:var(--disp);font-size:38px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.c-myms span{font-size:.42em;color:#ffffff9c}
.c-grade{font-family:var(--disp);font-size:15px;letter-spacing:.12em;padding:5px 14px;border-radius:9px}

@media(max-width:820px){
  .ds-row{grid-template-columns:1fr 74px 92px 96px 62px;font-size:14px;padding:6px 9px}
  .ds-line{height:126px}
  .ds-pinlbl{font-size:11px;max-width:130px}
}

/* ---------- PHONE: keep the banner out of the game ----------
   The shared banner is 9vmin type parked at 38vh. On a 390px phone that is
   ~35px letters landing dead-centre on the controller, burying whatever the
   player was reading. Pin it to the header strip instead: the chips up there
   are informational, the game content below stays clear, and it never meets
   the toast down at bottom:9vh.
   left:50% + shrink-to-fit is the trap here — the space available to a fixed
   box starting at the midline is only 50vw, so max-width:94vw never applied
   and every banner wrapped at 195px. Span the width explicitly and drop the
   -50% translate that went with it. */
@media(max-width:560px){
  .banner{top:6px;bottom:auto;left:3vw;right:3vw;max-width:none;
    transform:translateY(-8px);
    font-size:4.1vmin;letter-spacing:.8px;line-height:1.22;
    padding:9px 14px;border-radius:12px;background:#0a1018e6;
    box-shadow:0 6px 24px #000b,inset 0 0 0 1px #ffffff24;
    text-shadow:0 2px 0 #a67c00,0 0 10px #000}
  .banner.show{transform:translateY(0)}
  .banner.bad{text-shadow:0 2px 0 #7c130b,0 0 10px #000}
  .banner.good{text-shadow:0 2px 0 #0b7c33,0 0 10px #000}
  .banner.warn{text-shadow:0 2px 0 #7c4c0b,0 0 10px #000}
}

/* =====================================================================
   KNEAD FOR SPEED — bakery theme + six stations
   Everything above this line is the shared Game Night chrome. This block
   re-skins it warm (flour, crust, oven light) and then adds the station
   widgets. Stage classes are .bk-*, phone station classes are prefixed
   per station: .mx- mix, .fm- form, .pf- proof, .ov- bake, .pk- pack,
   .sh- ship.
   ===================================================================== */
:root{
  --crust:#b5651d;--crust-dk:#7a3f12;--flour:#f3e6d0;--dough:#e8c99a;
  --oven:#ff7a18;--oven-dk:#9c2f06;--leaf:#6f9c4a;--bkgold:#ffcf6a;
}
body.stagebg,body.homebg{background:radial-gradient(120vmax 80vmax at 50% -10%,#5a3a1c 0%,#2c1a0c 42%,#150c05 100%)}
/* flour dust instead of the starfield */
body.stagebg::before,body.homebg::before{background:
  radial-gradient(2px 2px at 12% 20%,#fff6 0,#fff0 60%),radial-gradient(2px 2px at 82% 12%,#fff5 0,#fff0 60%),
  radial-gradient(1.5px 1.5px at 30% 8%,#fff4 0,#fff0 60%),radial-gradient(2px 2px at 65% 25%,#fff4 0,#fff0 60%),
  radial-gradient(1.5px 1.5px at 92% 40%,#fff3 0,#fff0 60%),radial-gradient(2px 2px at 8% 55%,#fff3 0,#fff0 60%),
  radial-gradient(1.5px 1.5px at 47% 72%,#fff3 0,#fff0 60%),radial-gradient(2px 2px at 22% 88%,#fff2 0,#fff0 60%)}
body.phonebg{background:linear-gradient(180deg,#4a2e14,#1a0f06 72%)}
input,select,textarea{background:#2a1a0c}
button{background:#4a2f16}
.logo{color:var(--bkgold);text-shadow:0 3px 0 #7a4a12,0 7px 14px #0009}
.logo .of{color:#fff}
.home-sub{color:#e4cfae}

/* ---------- stage: the station header ---------- */
.bk-head{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,26px);margin:6px 0 10px}
.bk-hicon{font-size:clamp(34px,6vw,72px);line-height:1;filter:drop-shadow(0 6px 14px #000a)}
.bk-htxt{text-align:left}
.bk-hname{font-family:var(--disp);font-size:clamp(24px,4.4vw,60px);line-height:1;color:var(--bkgold);
  letter-spacing:.04em;text-shadow:0 4px 0 #7a4a12,0 10px 26px #000a}
.bk-hsub{font-size:clamp(12px,1.5vw,20px);color:#e8d3b0;margin-top:5px;font-style:italic;max-width:46ch}
.bk-hclock{font-family:var(--disp);font-size:clamp(28px,5vw,66px);color:#fff;font-variant-numeric:tabular-nums;
  min-width:2.4em;text-align:center;text-shadow:0 0 22px #ff9a3c66}
.bk-hclock.hot{color:#ff8a5c;animation:bkPulse .5s infinite}
@keyframes bkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* ---------- stage: the brief card ---------- */
.bk-brief{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:44vh;text-align:center}
.bk-bicon{font-size:clamp(70px,15vw,190px);line-height:1;animation:bkDrop .6s cubic-bezier(.2,1.5,.4,1);
  filter:drop-shadow(0 14px 30px #000a)}
@keyframes bkDrop{0%{transform:translateY(-40px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.bk-bname{font-family:var(--disp);font-size:clamp(30px,7vw,96px);color:var(--bkgold);letter-spacing:.05em;
  text-shadow:0 5px 0 #7a4a12,0 14px 34px #000a}
.bk-bhow{font-size:clamp(15px,2.1vw,28px);color:#fff;max-width:24ch;line-height:1.45}
.bk-bquip{font-size:clamp(13px,1.6vw,21px);color:#e0c69c;font-style:italic;max-width:40ch}
.bk-bstep{font-family:var(--disp);letter-spacing:.3em;font-size:clamp(11px,1.3vw,16px);color:#ffffff7a}

/* ---------- stage: the live bakery line ---------- */
.bk-line{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,14px);width:min(94vw,1300px);margin:0 auto;padding:2px 0}
.bk-lane{display:grid;grid-template-columns:minmax(120px,1.5fr) 3fr minmax(96px,auto);align-items:center;
  gap:clamp(8px,1.4vw,20px);background:#00000038;border-radius:14px;padding:clamp(6px,1vh,12px) clamp(10px,1.4vw,18px);
  border-left:6px solid var(--pc,#fff);position:relative;overflow:hidden}
.bk-lane.lead{background:#ffcf6a1c;box-shadow:inset 0 0 0 1px #ffcf6a4d}
.bk-lname{font-family:var(--disp);font-size:clamp(14px,1.8vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-lname .off{opacity:.45;font-size:.8em}
.bk-lsub{font-size:clamp(10px,1.1vw,14px);color:#ffffff8a;font-family:Arial;letter-spacing:.04em;margin-top:2px}
.bk-ltrack{position:relative;height:clamp(20px,3.2vh,34px);border-radius:999px;background:#00000059;
  box-shadow:inset 0 0 0 1px #ffffff1a;overflow:hidden}
.bk-lfill{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,var(--pc,#fff)55,var(--pc,#fff));transition:width .32s ease-out}
.bk-lbead{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:clamp(15px,2.4vh,26px);
  transition:left .32s ease-out;filter:drop-shadow(0 2px 4px #000a)}
.bk-lpts{font-family:var(--disp);font-size:clamp(16px,2.2vw,30px);text-align:right;font-variant-numeric:tabular-nums}
.bk-lpts em{display:block;font-style:normal;font-size:.5em;color:var(--bkgold);letter-spacing:.06em}
.bk-ldone{position:absolute;right:clamp(10px,1.4vw,18px);top:50%;transform:translateY(-50%);
  font-family:var(--disp);font-size:clamp(11px,1.2vw,15px);letter-spacing:.16em;color:#8fe6a4;
  background:#0e2a16cc;padding:3px 9px;border-radius:7px}

/* ---------- stage: station tally ---------- */
.bk-tally{width:min(94vw,1100px);margin:0 auto;display:flex;flex-direction:column;gap:7px}
.bk-trow{display:grid;grid-template-columns:1fr 132px 118px 92px;align-items:center;gap:12px;
  background:#0000003d;border-radius:12px;padding:8px 14px;border-left:6px solid var(--pc,#fff);
  animation:bkRowIn .34s backwards}
.bk-trow.best{background:#ffcf6a24;box-shadow:inset 0 0 0 1px #ffcf6a5c}
@keyframes bkRowIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.bk-tn{font-family:var(--disp);font-size:clamp(14px,1.7vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-tg{font-family:var(--disp);font-size:clamp(11px,1.2vw,15px);letter-spacing:.1em;text-align:center;
  padding:5px 8px;border-radius:8px}
.bk-tnote{font-size:clamp(11px,1.2vw,15px);color:#e6cfa8;text-align:center;font-style:italic}
.bk-tp{font-family:var(--disp);font-size:clamp(16px,2vw,26px);text-align:right;font-variant-numeric:tabular-nums}
.bk-tp em{font-style:normal;color:var(--bkgold);font-size:.62em}
.g-perfect{background:#1d7a3ecc;color:#d6ffe4}
.g-great{background:#2f6ea8cc;color:#dcefff}
.g-ok{background:#8a6a1ccc;color:#ffeec2}
.g-meh{background:#8a4a1ccc;color:#ffe0c6}
.g-bad{background:#8a1d1dcc;color:#ffd6d6}

/* ---------- stage: the loaf, quality-driven ---------- */
.bk-loafwrap{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vw,28px);margin:8px 0 4px}
.bk-loafcard{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:118px}
.bk-loaf{font-size:clamp(38px,6vw,76px);line-height:1;filter:drop-shadow(0 8px 16px #000a)}
.bk-loaf.q5{animation:bkShine 2.4s ease-in-out infinite}
.bk-loaf.q1{filter:grayscale(.7) brightness(.55) drop-shadow(0 8px 16px #000a);transform:rotate(-8deg)}
@keyframes bkShine{0%,100%{transform:none}50%{transform:translateY(-6px) scale(1.05)}}
.bk-loaftitle{font-family:var(--disp);font-size:clamp(11px,1.2vw,16px);letter-spacing:.08em;text-align:center}
.bk-loafname{font-size:clamp(11px,1.1vw,14px);color:#ffffffa8;text-align:center}

/* ---------- stage: conveyor decoration ---------- */
.bk-belt{height:16px;border-radius:8px;margin:10px auto 0;width:min(94vw,1300px);
  background:repeating-linear-gradient(90deg,#3a2611 0 22px,#4c331a 22px 44px);
  box-shadow:inset 0 0 0 1px #00000066;animation:bkBelt 1.1s linear infinite}
@keyframes bkBelt{to{background-position:44px 0}}

/* =====================================================================
   PHONE — the six stations
   ===================================================================== */
.bk-c{display:flex;flex-direction:column;gap:9px;padding:2px 0 4px;touch-action:manipulation;user-select:none}
.bk-chud{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk-cst{font-family:var(--disp);font-size:16px;letter-spacing:.06em;color:var(--bkgold);
  display:flex;align-items:center;gap:6px}
.bk-cst i{font-style:normal;font-size:22px}
.bk-csc{font-family:var(--disp);font-size:20px;font-variant-numeric:tabular-nums;color:#fff}
.bk-cbar{height:8px;border-radius:4px;background:#00000059;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}
.bk-cbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd98a,#e0a03c);transition:width .12s linear}
.bk-cbar.hot i{background:linear-gradient(90deg,#ff9d6e,#e03c1c)}
.bk-ctip{font-size:13px;color:#e4cfae;text-align:center;line-height:1.4;min-height:18px}
.bk-cfb{font-family:var(--disp);text-align:center;font-size:clamp(14px,5vw,22px);letter-spacing:.04em;
  min-height:28px;color:#fff;text-shadow:0 2px 10px #000;padding:0 8px;max-width:100%;
  overflow-wrap:anywhere;line-height:1.2}
.bk-cfb.pop{animation:bkFb .4s ease-out}
@keyframes bkFb{0%{transform:scale(.72);opacity:0}55%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.bk-cdone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px;text-align:center;
  background:#00000038;border-radius:16px}
.bk-cdone .big2{font-family:var(--disp);font-size:44px;color:var(--bkgold);font-variant-numeric:tabular-nums}
.bk-cwait{padding:20px 14px;text-align:center;font-size:16px;line-height:1.55;color:#f0e2ca;
  background:#00000030;border-radius:16px}

/* ---- countdown before a station goes live ---- */
.bk-cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;
  font-family:var(--disp);font-size:104px;color:var(--bkgold);pointer-events:none;
  text-shadow:0 6px 0 #7a4a12,0 0 40px #000}
.bk-cd.go{font-size:64px;color:#8fe6a4}

/* ---- 1. MIX: alternate the paddles on the beat ---- */
.mx-stage{position:relative;height:min(44vh,300px);display:flex;align-items:center;justify-content:center}
.mx-bowl{position:relative;width:min(62vw,240px);height:min(62vw,240px);border-radius:50%;
  background:radial-gradient(circle at 50% 34%,#5d452b,#2a1c0e 74%);
  box-shadow:inset 0 8px 26px #00000090,0 10px 24px #0007;display:flex;align-items:center;justify-content:center}
.mx-dough{width:64%;height:64%;border-radius:46% 54% 52% 48%/50% 46% 54% 50%;
  background:radial-gradient(circle at 40% 34%,#f0d7ab,#c9a56f);box-shadow:inset 0 -6px 14px #00000038;
  transition:transform .1s}
.mx-dough.spin{animation:mxSpin 1.6s linear infinite}
@keyframes mxSpin{to{transform:rotate(360deg)}}
.mx-ring{position:absolute;width:min(62vw,240px);height:min(62vw,240px);border-radius:50%;
  border:5px solid #ffffff2e;pointer-events:none}
.mx-pulse{position:absolute;border-radius:50%;border:5px solid var(--bkgold);pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.mx-side{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--disp);font-size:15px;
  letter-spacing:.14em;color:#ffffff70}
.mx-side.l{left:2px}.mx-side.r{right:2px}
.mx-pads{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mx-pad{height:min(26vh,150px);border-radius:18px;font-family:var(--disp);font-size:24px;letter-spacing:.08em;
  background:linear-gradient(180deg,#6b4a26,#3a2512);color:#f6e6cc;box-shadow:0 7px 0 #24160a,0 12px 22px #0008;
  border:3px solid #ffffff1f;transition:transform .06s,box-shadow .06s,background .12s}
.mx-pad:active{transform:translateY(5px);box-shadow:0 2px 0 #24160a}
.mx-pad.next{background:linear-gradient(180deg,#ffd98a,#d9962f);color:#3a2405;border-color:#fff6}
.mx-pad.hit{background:linear-gradient(180deg,#7ee6a0,#26a25a);color:#08240f}
.mx-pad.miss{background:linear-gradient(180deg,#ff8a7a,#a8241a);color:#fff}

/* ---- 2. FORM: lock the loaf inside the band ---- */
.fm-stage{position:relative;height:min(40vh,270px);display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#00000018 0 12px,#00000000 12px 24px);border-radius:18px;
  box-shadow:inset 0 0 0 1px #ffffff14;overflow:hidden}
.fm-band{position:absolute;border:3px dashed #8fe6a4bb;border-radius:50%;pointer-events:none}
.fm-band::after{content:"TARGET";position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:#8fe6a4}
.fm-blob{border-radius:48% 52% 46% 54%/54% 48% 52% 46%;
  background:radial-gradient(circle at 38% 32%,#f7e3c0,#c9a56f);box-shadow:inset 0 -8px 18px #00000030,0 6px 16px #0006}
.fm-blob.good{background:radial-gradient(circle at 38% 32%,#d6ffe0,#63c98a)}
.fm-blob.bad{background:radial-gradient(circle at 38% 32%,#ffd3cc,#c96f63)}
.fm-pips{display:flex;justify-content:center;gap:7px}
.fm-pip{width:14px;height:14px;border-radius:50%;background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff30}
.fm-pip.on{background:var(--bkgold)}
.fm-pip.miss{background:#a8241a}
.bk-act{height:min(20vh,116px);border-radius:18px;font-family:var(--disp);font-size:27px;letter-spacing:.09em;
  background:linear-gradient(180deg,#ffd98a,#d9962f);color:#3a2405;box-shadow:0 8px 0 #8a5a12,0 14px 26px #0008;
  border:3px solid #ffffff33;transition:transform .06s,box-shadow .06s;width:100%}
.bk-act:active{transform:translateY(6px);box-shadow:0 2px 0 #8a5a12}
.bk-act:disabled{opacity:.42;box-shadow:0 4px 0 #4a3010}
.bk-act.hot{background:linear-gradient(180deg,#ff9d6e,#d43a12);color:#fff;box-shadow:0 8px 0 #7a1c06,0 14px 26px #0008}
.bk-act.hot:active{box-shadow:0 2px 0 #7a1c06}
.bk-act.cool{background:linear-gradient(180deg,#9ed7ff,#2f7fc4);color:#04243d;box-shadow:0 8px 0 #144b78}

/* ---- 3. PROOF: pull it at the line, through the haze ---- */
.pf-stage{position:relative;height:min(42vh,290px);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#1d1206,#38230f);box-shadow:inset 0 0 0 1px #ffffff14}
.pf-dough{position:absolute;left:8%;right:8%;bottom:0;border-radius:44% 56% 8% 8%/60% 60% 8% 8%;
  background:radial-gradient(ellipse at 50% 20%,#f7e3c0,#caa26b);box-shadow:inset 0 -10px 20px #00000030}
.pf-line{position:absolute;left:0;right:0;height:0;border-top:3px dashed #8fe6a4;pointer-events:none}
.pf-line::after{content:"PERFECT";position:absolute;right:8px;top:-19px;font-family:var(--disp);
  font-size:11px;letter-spacing:.18em;color:#8fe6a4}
.pf-over{position:absolute;left:0;right:0;height:0;border-top:2px dotted #ff8a7a99;pointer-events:none}
.pf-over::after{content:"COLLAPSE";position:absolute;right:8px;top:-17px;font-family:var(--disp);
  font-size:10px;letter-spacing:.16em;color:#ff8a7ab0}
.pf-haze{position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(0px);
  background:linear-gradient(180deg,#ffffff00,#e8d9bc00)}
.pf-pips{display:flex;justify-content:center;gap:9px}

/* ---- 4. BAKE: hold the needle in the band ---- */
.ov-stage{position:relative;height:min(40vh,270px);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#1a0e05,#3d1a08);box-shadow:inset 0 0 0 1px #ffffff14}
.ov-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 108%,#ff7a18aa,#ff7a1800 62%);
  opacity:.3;transition:opacity .18s}
.ov-scale{position:absolute;left:14px;right:14px;top:16px;bottom:52px}
.ov-band{position:absolute;left:0;right:0;background:#8fe6a42e;border-top:2px solid #8fe6a4;border-bottom:2px solid #8fe6a4;
  transition:top .28s ease,height .28s ease}
.ov-band::after{content:"375°";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:#8fe6a4}
.ov-needle{position:absolute;left:0;right:0;height:0;border-top:4px solid #fff;
  box-shadow:0 0 14px #fff9;transition:top .06s linear}
.ov-needle::before{content:"🌡";position:absolute;left:2px;top:-13px;font-size:17px}
.ov-temp{position:absolute;left:14px;bottom:14px;font-family:var(--disp);font-size:26px;
  font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 16px #ff8a3c88}
.ov-temp.in{color:#8fe6a4}
.ov-temp.burn{color:#ff8a7a;animation:bkPulse .4s infinite}
.ov-door{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:var(--disp);
  font-size:15px;letter-spacing:.1em;color:#ffd6a0;background:#00000070;padding:5px 11px;border-radius:9px;
  opacity:0;transition:opacity .2s}
.ov-door.on{opacity:1;animation:bkPulse .5s infinite}
.ov-loaf{position:absolute;right:16px;bottom:12px;font-size:38px;transition:filter .3s}

/* ---- 5. PACK: bag the good ones, leave the burnt ---- */
.pk-stage{position:relative;height:min(58vh,420px);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#241708,#150d05);box-shadow:inset 0 0 0 1px #ffffff14}
.pk-belt{position:absolute;left:0;right:0;bottom:0;height:34px;
  background:repeating-linear-gradient(90deg,#3a2611 0 18px,#4c331a 18px 36px);
  animation:bkBelt .9s linear infinite;box-shadow:0 -3px 10px #0007}
.pk-item{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:14px;
  font-size:34px;background:#00000000;transition:transform .12s,opacity .18s}
.pk-item.tapped{transform:scale(.4) translateY(-30px);opacity:0}
.pk-item.burnt{filter:brightness(.35) saturate(.3)}
.pk-item .ring{position:absolute;inset:-8px;border-radius:16px;border:3px solid #ffffff00}
.pk-hit{position:absolute;font-family:var(--disp);font-size:18px;pointer-events:none;
  animation:pkFloat .6s ease-out forwards}
@keyframes pkFloat{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-38px)}}
.pk-tapzone{position:absolute;inset:0}

/* ---- 6. SHIP: right crate, right truck ---- */
.sh-stage{display:flex;flex-direction:column;gap:10px}
.sh-crate{position:relative;border-radius:18px;padding:16px 12px;text-align:center;
  background:linear-gradient(180deg,#6b4a26,#3a2512);box-shadow:inset 0 0 0 1px #ffffff1f,0 8px 20px #0008;
  animation:bkDrop .28s cubic-bezier(.2,1.5,.4,1)}
.sh-cico{font-size:44px;line-height:1}
.sh-cdest{font-family:var(--disp);font-size:25px;letter-spacing:.08em;color:var(--bkgold);margin-top:4px}
.sh-cnote{font-size:12px;color:#e2cba6;margin-top:3px}
.sh-fuse{height:9px;border-radius:5px;background:#00000066;overflow:hidden;margin-top:11px;
  box-shadow:inset 0 0 0 1px #ffffff1a}
.sh-fuse i{display:block;height:100%;background:linear-gradient(90deg,#8fe6a4,#e0c03c);transition:width .1s linear}
.sh-fuse.hot i{background:linear-gradient(90deg,#ffb36e,#e03c1c)}
.sh-trucks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-truck{height:min(15vh,92px);border-radius:16px;font-family:var(--disp);font-size:16px;letter-spacing:.05em;
  background:linear-gradient(180deg,#5b6b7e,#2b3542);color:#eef4ff;box-shadow:0 7px 0 #1a222c,0 12px 22px #0008;
  border:3px solid #ffffff1f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:transform .06s,box-shadow .06s,background .12s}
.sh-truck b{font-size:26px;line-height:1}
.sh-truck:active{transform:translateY(5px);box-shadow:0 2px 0 #1a222c}
.sh-truck.right{background:linear-gradient(180deg,#7ee6a0,#26a25a);color:#08240f}
.sh-truck.wrong{background:linear-gradient(180deg,#ff8a7a,#a8241a);color:#fff}

/* ---- shared: sub-scores on the phone ---- */
.bk-mini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bk-minichip{font-size:12px;padding:4px 9px;border-radius:8px;background:#00000045;
  box-shadow:inset 0 0 0 1px #ffffff1a;display:flex;align-items:center;gap:5px}
.bk-minichip b{font-family:var(--disp);font-size:13px}

/* ---- keyboard hints only make sense with a keyboard ---- */
.bk-keys{font-size:11px;color:#ffffff6b;text-align:center;letter-spacing:.04em}
@media(hover:none) and (pointer:coarse){.bk-keys{display:none}}

@media(max-width:820px){
  .bk-lane{grid-template-columns:minmax(88px,1.2fr) 3fr minmax(70px,auto);gap:8px}
  .bk-trow{grid-template-columns:1fr 96px 84px 68px;gap:8px;padding:7px 10px}
}

/* Two later game skins in this merged stylesheet redefine .podium (one of them
   to a vertical column), and they win on source order. Put the row back. */
#over-podium.podium{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  justify-content:center;gap:16px;background:none;border:0;padding:0;box-shadow:none;min-width:0}
#over-podium .pod{text-align:center;min-width:170px;padding:18px 22px 20px}

/* #main is a row flex container (see .pmain). Every big-screen view therefore
   hands it exactly ONE child, and that child stacks its own parts. */
.bk-view{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-width:0;gap:clamp(4px,1vh,14px)}
.bk-view .bk-head{margin:0}
.bk-view .bk-belt{margin:4px auto 0}

/* The desktop banner sits at top:38vh, which on this game lands exactly on the
   station head. It also inherits the left:50% + max-width:94vw shrink-to-fit
   trap (a fixed box starting at the midline only has 50vw to work with), so
   "ANA TAKES THE STATION" wrapped into two lines and ran off both edges.
   Span the width explicitly and park it above the content. Scoped to the big
   screen so the phone rules at max-width:560px are untouched. */
@media(min-width:561px){
  .banner{top:11vh;left:3vw;right:3vw;max-width:none;
    transform:translateY(-14px) scale(.94);font-size:6.4vmin;line-height:1.1}
  .banner.show{transform:translateY(0) scale(1)}
}

/* ---------- big-screen banner: give it a plate ---------- */
/* It was 9vmin of gold text with nothing behind it, parked at top:38vh — dead
   centre, straight over the board, and legible only when whatever was under it
   happened to be dark. "ZACH — 0.25s OFF" is a result, not decoration: it needs
   to be readable on the first glance from across a room. Same plate the phone
   has always had, plus the move off the middle of the game, scoped so the
   max-width:560px rules stay exactly as they are. */
@media(min-width:561px){
  .banner{top:11vh;left:3vw;right:3vw;max-width:none;
    transform:translateY(-14px) scale(.94);
    font-size:6.4vmin;line-height:1.14;
    padding:1.1vmin 2.6vmin;border-radius:16px;
    background:#070c13e8;
    box-shadow:0 14px 48px #000d,inset 0 0 0 1px #ffffff26;
    text-shadow:0 3px 0 #a67c00,0 2px 14px #000}
  .banner.show{transform:translateY(0) scale(1)}
  .banner.bad{text-shadow:0 3px 0 #7c130b,0 2px 14px #000;box-shadow:0 14px 48px #000d,inset 0 0 0 1px #ff554540}
  .banner.good{text-shadow:0 3px 0 #0b7c33,0 2px 14px #000;box-shadow:0 14px 48px #000d,inset 0 0 0 1px #54ff8840}
  .banner.warn{text-shadow:0 3px 0 #7c4c0b,0 2px 14px #000;box-shadow:0 14px 48px #000d,inset 0 0 0 1px #ffb14d40}
}
@media(max-width:560px){
  .banner{top:6px;bottom:auto;left:3vw;right:3vw;max-width:none;
    transform:translateY(-8px);
    font-size:4.1vmin;letter-spacing:.8px;line-height:1.22;
    padding:9px 14px;border-radius:12px;background:#0a1018e6;
    box-shadow:0 6px 24px #000b,inset 0 0 0 1px #ffffff24;
    text-shadow:0 2px 0 #a67c00,0 0 10px #000}
  .banner.show{transform:translateY(0)}
  .banner.bad{text-shadow:0 2px 0 #7c130b,0 0 10px #000}
  .banner.good{text-shadow:0 2px 0 #0b7c33,0 0 10px #000}
  .banner.warn{text-shadow:0 2px 0 #7c4c0b,0 0 10px #000}
}

/* ---------- a way out of the lobby ---------- */
/* Every game could be entered and none of them could be left: the only exit
   from a lobby or a game-over screen was retyping the site address. The overlay
   is position:fixed with inset:0, so a corner chip anchors cleanly whatever the
   lobby inside it is laid out like. */
.ov-exit{position:absolute;top:12px;left:14px;z-index:8;
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 16px;border-radius:999px;
  background:#0a1018cc;border:1px solid #ffffff2e;color:#cfe6ff;
  font-size:14px;font-weight:800;letter-spacing:.04em;text-decoration:none;
  box-shadow:0 4px 16px #0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ov-exit:hover{background:#16233acc;border-color:#ffffff55;color:#fff}
.ov-exit:active{transform:translateY(1px)}
@media(max-width:560px){
  .ov-exit{top:8px;left:8px;min-height:36px;padding:0 12px;font-size:13px}
}