*{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:#31217a;--stage2:#150b38;
  --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:#150b38;overflow-x:hidden}
body.stagebg,body.homebg{background:radial-gradient(120vmax 80vmax at 50% -10%,#4a35a8 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,#31217a,#150b38 70%);min-height:100vh}
.hidden{display:none!important}
button{cursor:pointer;font-family:inherit;border:none;border-radius:10px;background:#3a2f7d;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:#1d1350;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:#cfc4ff;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:#cfc4ff;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:#150b38ee;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:#cfc4ff;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%,#4a35a8dd,#150b38f2 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:#cfc4ff}
.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:#1f4fd2;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:#cfc4ff}
.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:#1d1350;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:#3a2f7d;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:#1d1350;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:#cfc4ff}
.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:#1d1350;border-radius:10px;padding:8px 10px;border:2px solid transparent}
.ic.sel{border-color:var(--gold);background:#3a2f7d}
.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:#cfc4ff;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:#3a2f7d;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:#3a2f7d;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:#3a2f7d;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:#3a2f7d;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:#3a2f7d;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:#cfc4ff;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,#0e5b6b,#050f1e 70%)}
.logo.triv{color:#4dfce2;text-shadow:0 3px 0 #0a6b57,0 7px 14px #000a}
.hdr-mode{font-family:var(--disp);color:#4dfce2;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:#4dfce2;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:#4dfce2;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 #4dfce2}

/* 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:#0a3550;border:2px solid #ffffff22;border-radius:12px;color:#cfeffd;line-height:1.3}
.hm-btn.on{border-color:#4dfce2;background:#0e5b6b;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:#4dfce2;color:#04222a;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:#cfc4ff;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:#cfc4ff}
.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}
/* The mark. It is the only thing on this screen that never fades, so it is
   styled to sit still: no animation, no glow pulse, nothing that could be
   counted along with. */
.ds-tgtplate{display:flex;align-items:baseline;gap:14px;padding:6px 22px;border-radius:16px;
  background:#ffd40012;border:1px solid #ffd4003d}
.ds-tgtplate span{font-family:var(--disp);letter-spacing:.28em;font-size:clamp(11px,1.3vw,15px);color:#ffe9a8cc}
.ds-tgtplate b{font-family:var(--disp);font-size:clamp(30px,4.6vw,64px);line-height:1;color:var(--gold);
  text-shadow:0 0 34px #ffd40055;font-variant-numeric:tabular-nums}
.ds-tgtplate b em{font-style:normal;font-size:.42em;color:#ffffff9c;margin-left:.05em}
/* A liar you can spot is not a liar: .lying is deliberately identical to the
   honest clock. It exists only so a test can tell the two apart. */
.ds-clock.lying{}

/* ---- 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 celebration banner lives at 38vh, which on the reveal lands squarely on
   the number line and makes both unreadable — the pins and the shout are the
   two things everybody looks at, and they were fighting for the same pixels.
   Lift it clear whenever the reveal layout is on screen. */
body:has(.ds-line) .banner{top:13vh}

/* 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}
.ds-golf{font-family:var(--disp);letter-spacing:.16em;font-size:clamp(11px,1.3vw,15px);
  color:#ffe9a8aa;text-transform:uppercase;margin-top:4px}
.ds-golf b{color:var(--gold)}
/* Golf: the running total is seconds off, so the small round delta beside it is
   damage, not reward. It must not be the green everything else on the site uses
   for points won. */
.pcard.golf .pc-score{font-variant-numeric:tabular-nums}
.pcard.golf .pc-score em{font-style:normal;font-size:.5em;color:#ffffff8a;margin-left:.06em}
.pcard.golf .w-rp{color:#ffb45c}

/* 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:#8f7ce8;color:#150b38}
.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-liarnote{margin-top:4px;font-size:13px;color:#ffb45c}
/* The mark on the phone. Same job as .ds-tgtplate: sit still and be readable
   without being looked at. */
.c-tgtplate{display:flex;align-items:baseline;gap:10px;padding:5px 16px;border-radius:14px;
  background:#ffd40012;border:1px solid #ffd4003d}
.c-tgtplate span{font-family:var(--disp);letter-spacing:.24em;font-size:11px;color:#ffe9a8cc}
.c-tgtplate b{font-family:var(--disp);font-size:30px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.c-tgtplate b em{font-style:normal;font-size:.45em;color:#ffffff9c;margin-left:.05em}
.c-clock.lying{}
.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}
}

/* ---------- phone: mirrored clock + reveal timeline ---------- */
/* The clock used to be solo-mode only, so it never needed a caption. Now it
   runs on every phone and the caption is what stops people trusting it. */
.c-mirrornote{margin-top:6px;text-align:center;font-size:12px;letter-spacing:.08em;
  color:#ffffff6e;text-transform:uppercase}
.c-liarwarn{color:#ffb14d}

/* .c-revme is a centred flex column, so a plain block child shrink-wraps to its
   content — which for an absolutely-positioned timeline is zero, stacking every
   dot on the same pixel. Both of these have to be told to fill the card. */
.c-revme .cds-line,.c-revme .cds-finish{align-self:stretch;width:100%}
.cds-line{position:relative;width:100%;height:46px;margin:14px 2px 4px;padding-top:4px}
.cds-axis{position:absolute;left:0;right:0;top:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#ffffff14,#ffffff3d,#ffffff14)}
.cds-mark{position:absolute;top:6px;height:22px;width:3px;margin-left:-1.5px;border-radius:2px;
  background:var(--gold);box-shadow:0 0 10px #ffd40099}
.cds-dot{position:absolute;top:11px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--pc);border:2px solid #0b0f16;box-shadow:0 1px 4px #000a}
.cds-dot.win{box-shadow:0 0 0 2px #ffd400,0 0 12px #ffd40099;z-index:2}
.cds-dot.me{width:15px;height:15px;top:9px;margin-left:-7.5px;border-color:#fff;z-index:3}
.cds-ends{position:absolute;left:0;right:0;top:30px;display:flex;justify-content:space-between;
  font-size:11px;color:#ffffff5c;font-variant-numeric:tabular-nums}
.cds-mlbl{color:var(--gold);opacity:.9}

.cds-finish{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.cds-fhd{font-size:11px;letter-spacing:.22em;color:#ffffff59;text-align:center;margin-bottom:2px}
.cds-row{--pc:#888;display:grid;grid-template-columns:20px 1fr 64px 72px;align-items:center;gap:6px;
  padding:6px 8px;border-radius:9px;background:#ffffff0b;border-left:3px solid var(--pc);
  font-size:13px;font-variant-numeric:tabular-nums}
.cds-row.win{background:#ffd4001c;box-shadow:0 0 0 1px #ffd40044 inset}
.cds-row.me{background:#ffffff1c;font-weight:800}
.cds-row.me.win{background:#ffd40028}
.cds-rk{color:#ffffff6b;font-size:12px;text-align:center}
.cds-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cds-ms{text-align:right;color:#fff}
.cds-er{text-align:right;color:#ffffff9e;font-size:12px}

/* ---------- 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}
}