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

/* =====/* ============ ODD ONE OUT ================= */
.od-round{width:100%;max-width:94vw;display:flex;flex-direction:column;align-items:center;gap:1.5vmin}
.od-cat{font-family:var(--disp);font-size:2vmin;letter-spacing:.35vmin;color:#ffd94a;background:#ffd94a1a;border:1px solid #ffd94a55;padding:.5vmin 1.6vmin;border-radius:99px}
.od-hero{font-family:var(--disp);font-size:4vmin;line-height:1.3;text-align:center;text-shadow:0 .4vmin 0 #0008}
.od-hero b{color:#ffd94a}
.od-task{font-size:2.2vmin;color:#cfc4ff;text-align:center;max-width:80vw}
.od-task.big{font-family:var(--disp);font-size:3vmin;letter-spacing:.4px;color:#fff}
.od-task b{color:#ffd94a}

.od-chips{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center}
.ochip{--pc:#666;font-family:var(--disp);font-size:1.8vmin;letter-spacing:.6px;padding:.7vmin 1.4vmin;border-radius:99px;
  background:#00000055;border:.3vmin solid var(--pc);opacity:.75;transition:.25s}
.ochip.done{background:var(--pc);opacity:1;box-shadow:0 0 2vmin var(--pc)}
.ochip.none{border-style:dashed;border-color:#ffffff33}

.od-order{display:flex;gap:.9vmin;flex-wrap:wrap;justify-content:center;align-items:center;max-width:92vw}
.oo-lbl{font-family:var(--disp);font-size:1.7vmin;letter-spacing:.4vmin;color:#a99ed0;margin-right:.5vmin}
.oo{--pc:#666;font-family:var(--disp);font-size:1.9vmin;letter-spacing:.5px;padding:.5vmin 1.3vmin;border-radius:99px;
  background:#00000055;border:.28vmin solid var(--pc)}
.oo b{color:#ffd94a;margin-right:.4vmin}
.od-ans{display:flex;gap:1.2vmin;flex-wrap:wrap;justify-content:center;width:min(94vw,1250px)}
.oans{--pc:#666;flex:1 1 26vmin;min-width:24vmin;max-width:34vmin;display:flex;flex-direction:column;gap:.7vmin;
  background:#00000055;border:.35vmin solid var(--pc);border-radius:1.5vmin;padding:1.2vmin 1.4vmin;transition:.3s}
.oa-who{font-family:var(--disp);font-size:1.9vmin;letter-spacing:.4px;color:#e9e2ff;display:flex;align-items:center;gap:.6vmin;flex-wrap:wrap}
.oa-tag{font-size:1.4vmin;background:#e8641b;color:#fff;border-radius:99px;padding:.2vmin 1vmin;letter-spacing:.6px}
.oa-text{font-family:var(--disp);font-size:3vmin;line-height:1.2;color:#fff;word-break:break-word}
.oa-text i{font-style:italic;font-size:2.1vmin;color:#8c81ad}
.oa-votes{display:flex;gap:.5vmin;flex-wrap:wrap}
.oans.faker{border-color:#e8641b;background:linear-gradient(180deg,#5a2a0f,#2a1408);box-shadow:0 0 3vmin #e8641b66}
.oans.clean{opacity:.72}

.od-verdict{font-family:var(--disp);font-size:4.6vmin;letter-spacing:.6vmin;text-align:center;line-height:1.2}
.od-verdict.caught{color:#4dfc9b;text-shadow:0 0 3vmin #1a9e4b88,0 .4vmin 0 #0008}
.od-verdict.escaped{color:#ff9b4a;text-shadow:0 0 3vmin #e8641b88,0 .4vmin 0 #0008}

.od-steal{display:flex;flex-direction:column;gap:1vmin;width:min(88vw,900px)}
.ost{display:flex;align-items:center;gap:1.4vmin;background:#00000055;border:.35vmin solid #ffffff22;border-radius:1.4vmin;
  padding:1.1vmin 1.8vmin;font-family:var(--disp);font-size:2.9vmin;letter-spacing:.4px}
.ost-n{flex:0 0 auto;min-width:4vmin;text-align:center;color:var(--gold)}

.od-prompts{display:flex;gap:1.4vmin;flex-wrap:wrap;justify-content:center;width:min(92vw,1150px)}
.opr{flex:1 1 34vmin;min-width:30vmin;display:flex;flex-direction:column;gap:.5vmin;border-radius:1.5vmin;padding:1.2vmin 1.8vmin;
  background:#00000055;border:.35vmin solid #ffffff22}
.opr span{font-size:1.6vmin;letter-spacing:.5vmin;color:#a99ed0}
.opr b{font-family:var(--disp);font-size:2.9vmin;line-height:1.25}
.opr.real{border-color:#4dfc9b;background:linear-gradient(180deg,#0f4a29,#08281600)}
.opr.real b{color:#8dffc4}
.opr.fake{border-color:#e8641b;background:linear-gradient(180deg,#4a230f,#28140800)}
.opr.fake b{color:#ffb27a}

.od-stealres{font-family:var(--disp);font-size:2.6vmin;letter-spacing:.4px;text-align:center;padding:.8vmin 2vmin;border-radius:99px}
.od-stealres.win{color:#ffd94a;background:#ffd94a1a;border:1px solid #ffd94a66}
.od-stealres.miss{color:#c9bde8;background:#00000055;border:1px solid #ffffff22}

.od-sum{display:flex;gap:1.2vmin;flex-wrap:wrap;justify-content:center;margin-top:.6vmin}
.osum{--pc:#666;font-family:var(--disp);font-size:2.1vmin;padding:.6vmin 1.5vmin;border-radius:99px;background:#00000055;border:.3vmin solid var(--pc)}
.osum b{color:#ffd94a}

/* phone */
.c-form{display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.c-role{font-size:14px;line-height:1.45;border-radius:12px;padding:10px 12px;text-align:center}
.c-role b{letter-spacing:.6px}
.c-role.odd{background:#e8641b26;border:1px solid #e8641b77;color:#ffcfab}

/* ---- THE PEEK DOOR ----------------------------------------------------
   The whole point of this component is that it looks EXACTLY the same on every
   phone in the room while it is shut. Nothing below the .open rules may vary by
   role — no colour, no size, no wording, no border. If you ever find yourself
   adding `.od-shut.faker { }`, stop: that selector is the bug the door exists
   to prevent. The only thing that differs between two players is what is
   printed underneath, and that is only ever on screen while a thumb is holding
   it there. */
.od-shut{position:relative;overflow:hidden;border-radius:16px;min-height:150px;
  background:#00000055;border:1px solid #ffffff1f;
  box-shadow:inset 0 0 0 1px #00000055,inset 0 14px 22px -14px #000000cc}
.od-shut.sm{min-height:104px}
.ods-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:100%;min-height:150px;padding:14px 16px;text-align:center}
.od-shut.sm .ods-body{min-height:104px;padding:10px 12px;gap:5px}
.ods-topic{font-family:var(--disp);font-size:22px;line-height:1.2;letter-spacing:.5px;color:#fff;
  text-shadow:0 2px 0 #00000088}
.od-shut.sm .ods-topic{font-size:17px}
.ods-sub{font-size:12px;line-height:1.45;color:#ffffff7a}
.od-shut.sm .ods-sub{font-size:11px}

/* The lid itself. Opaque on purpose — a translucent door would let a bright
   topic ghost through on an OLED screen at an angle, which is the exact attack
   this is here to stop. */
.ods-lid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:12px;border-radius:16px;cursor:grab;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:linear-gradient(180deg,#3b2f63,#241a44 62%,#1a1233);
  box-shadow:inset 0 1px 0 #ffffff26,0 8px 18px -8px #000000cc;
  transform:translateY(calc(-1 * var(--lift,0px)));
  transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.od-shut.drag .ods-lid{transition:none}
.ods-lid:active{cursor:grabbing}
.ods-grip{width:56px;height:6px;border-radius:99px;background:#ffffff3d;
  box-shadow:0 1px 0 #00000055;margin-bottom:2px}
.ods-hint{font-family:var(--disp);font-size:16px;letter-spacing:1.6px;color:#e6dcff}
.od-shut.sm .ods-hint{font-size:14px}
.ods-sub2{font-size:10.5px;letter-spacing:.3px;color:#ffffff66;text-align:center}
.od-shut.sm .ods-sub2{display:none}
/* A hairline under the closed door so it reads as a door and not a card. */
.ods-lid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#0000,#ffffff33,#0000)}

/* Losses. Used on the reveal, the round summary and both ledgers. */
.neg{color:#ff8b7a!important}
.c-slot{text-align:center;font-family:var(--disp);font-size:17px;letter-spacing:.6px;color:#fff;
  background:#ffd94a1a;border:1px solid #ffd94a66;border-radius:12px;padding:9px 12px}
.c-slot b{color:#ffd94a}
.c-big{text-align:center;font-family:var(--disp);font-size:22px;letter-spacing:1px;color:#ffd94a;line-height:1.35;margin:6px 0}
.c-note.big{font-size:16px;color:#fff}
#ans-in{width:100%;box-sizing:border-box;padding:15px 14px;font-size:19px;font-family:var(--disp);letter-spacing:1px;text-align:center;text-transform:uppercase;
  background:#1a1233;color:#fff;border:2px solid #ffffff33;border-radius:14px;outline:none}
#ans-in:focus{border-color:var(--gold)}
.od-opts{display:flex;flex-direction:column;gap:9px}
.od-opt{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;padding:13px 14px;
  background:linear-gradient(180deg,#3b2b6b,#241a44);color:#fff;border:2px solid #ffffff2b;border-radius:14px;cursor:pointer}
.od-opt:active{transform:scale(.98)}
.odo-n{font-family:var(--disp);font-size:15px;letter-spacing:.6px;color:#cfc4ff}
.odo-a{font-family:var(--disp);font-size:19px;letter-spacing:.5px;line-height:1.2;word-break:break-word}
.od-opt.guess{text-align:center;font-family:var(--disp);font-size:17px;letter-spacing:.6px;line-height:1.25}
.od-opt.sel{background:linear-gradient(180deg,#ffd94a,#c79a00);color:#2a2000;border-color:#fff}
.od-opt.sel .odo-n{color:#4a3800}
.od-opt:disabled:not(.sel){opacity:.5}
#tc-in{width:100%;box-sizing:border-box;background:#160f2c;color:#eee;border:1px solid #ffffff2b;border-radius:10px;padding:9px 11px;font:13px/1.45 inherit;resize:vertical}

/* ---------- PHONE: keep the banner out of the game ---------- */
@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}
}

/* ---------- THE SEALED ROUND + THE END-OF-GAME LEDGER ---------- */
/* Every uncaught round renders this exact block. It is deliberately calm and
   deliberately identical every time — no colour that could read as "good for
   somebody", no motion that could read as a near miss. */
.od-quiet{font-family:var(--disp);font-size:6.4vmin;letter-spacing:.9vmin;color:#8f86b8;
  text-shadow:0 .35vmin 0 #00000088;opacity:.92}

/* The padlock that stands in for every score for the whole game. */
.pc-score.lock{color:#7d74a4;font-size:.86em;letter-spacing:0}

.od-streak{font-family:var(--disp);font-size:2.5vmin;letter-spacing:.35vmin;color:#cbbff2;
  background:#ffffff0e;border:.22vmin solid #ffffff1f;border-radius:99px;padding:.7vmin 2vmin}
.od-streak b{color:#ffd94a}

/* Round-by-round ledger on the game-over card. Grid columns are shared by the
   header row and every entry so the whole thing lines up as one table. */
.od-ledger{margin:14px 0 4px;width:100%}
.od-ledger h4{font-family:var(--disp);font-size:15px;letter-spacing:1.6px;color:#ffd94a;margin:0 0 8px;text-align:center}
.ldg-head,.ldg{display:grid;grid-template-columns:52px minmax(0,2.1fr) minmax(0,1.2fr) minmax(0,1.15fr) minmax(0,1.3fr);
  gap:8px;align-items:center;padding:7px 10px;border-radius:10px;font-size:12.5px;line-height:1.35}
.ldg-head{font-family:var(--disp);letter-spacing:1px;font-size:10.5px;color:#8f86b8;padding-bottom:2px}
.ldg{background:#ffffff0a;border:1px solid #ffffff14;margin-bottom:5px}
.ldg.caught{background:#1a9e4b1a;border-color:#1a9e4b3d}
.ldg.safe{background:#e8b4191a;border-color:#e8b4193d}
.ldg-n{font-family:var(--disp);font-size:14px;color:#ffd94a;letter-spacing:.5px}
.ldg-t{min-width:0;color:#efeaff}
.ldg-t span{display:block;font-family:var(--disp);font-size:9.5px;letter-spacing:1.1px;color:#8f86b8}
.ldg-t b{color:#fff}
.ldg-t i{color:#8f86b8;font-style:normal;padding:0 3px}
.ldg-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pc,#ccc);font-weight:700}
.ldg-res{font-family:var(--disp);font-size:11px;letter-spacing:.7px;color:#efeaff}
.ldg-res b{color:#ffd94a}
.ldg-got{min-width:0;color:#bdb2e6;font-size:11.5px}
.ldg-got i{color:#7d74a4}
@media(max-width:820px){
  .ldg-head{display:none}
  .ldg{grid-template-columns:44px minmax(0,1fr);row-gap:3px}
  .ldg-n{grid-row:span 4}
}

/* ---------- THE LEDGER, ON A PHONE ---------- */
/* Solo mode has no stage at all, so this is the only debrief that exists. */
.c-ledger{margin:14px 0 2px;text-align:left}
.c-ledger h4{font-family:var(--disp);font-size:12px;letter-spacing:1.4px;color:#ffd94a;margin:0 0 7px;text-align:center}
.cldg{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:6px;align-items:center;
  background:#ffffff0a;border:1px solid #ffffff14;border-radius:9px;padding:6px 8px;margin-bottom:4px;font-size:12px}
.cldg.caught{background:#1a9e4b1a;border-color:#1a9e4b3d}
.cldg.safe{background:#e8b4191a;border-color:#e8b4193d}
.cl-n{font-family:var(--disp);font-size:12px;color:#ffd94a;letter-spacing:.4px}
.cl-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#efeaff}
.cl-who i{color:#8f86b8;font-style:normal}
.cl-r{font-family:var(--disp);font-size:10.5px;letter-spacing:.5px;color:#cbbff2;white-space:nowrap}
.cl-me{font-size:10.5px;color:#7ee08a;white-space:nowrap}

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

/* ---------- the answer box types like a sentence now ---------- */
/* It forced uppercase in CSS and with autocapitalize="characters", so every
   word arrived SHOUTED. The board does the casing now, identically for
   everyone, so how you type can't identify you. */
#ans-in{text-transform:none;letter-spacing:.3px;font-size:20px}