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

/* =====/* ============ FINDERS KEEPERS ================= */
.od-round{width:100%;max-width:94vw;display:flex;flex-direction:column;align-items:center;gap:1.5vmin}
.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}
/* Grabs closed. The board is frozen and the only move left is the vote — the
   stage needs to say so loudly enough to be read from a sofa. */
.od-task.shut{color:#ffb27a}
.od-task.shut b{color:#ff9b4a}

.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}

/* ---- THE TABLE OF BOXES ------------------------------------------------
   One tile per player, and every tile is identical. There is no state on the
   big screen that could ever hint at who is holding the prize — the holder is
   simply not in the published state until the round resolves. If you find
   yourself wanting a `.kbox.holder` rule that renders before the reveal, that
   is the leak this game is built to avoid. */
.kp-board{display:flex;gap:1.4vmin;flex-wrap:wrap;justify-content:center;width:min(94vw,1300px)}
.kbox{--pc:#666;flex:1 1 20vmin;min-width:19vmin;max-width:27vmin;display:flex;flex-direction:column;align-items:center;
  gap:.8vmin;background:#00000055;border:.4vmin solid var(--pc);border-radius:1.8vmin;padding:1.6vmin 1.2vmin;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s,border-color .3s,opacity .3s}
.kbox-ico{font-size:5.4vmin;line-height:1;filter:drop-shadow(0 .5vmin .6vmin #000a)}
.kbox-name{font-family:var(--disp);font-size:2.1vmin;letter-spacing:.5px;color:#efeaff;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbox-pips{display:flex;gap:.5vmin;align-items:center;min-height:1.6vmin}
.kpip{width:1.4vmin;height:1.4vmin;border-radius:50%;background:#ffd94a;box-shadow:0 0 1vmin #ffd94a88}
.kpip.spent{background:#ffffff17;box-shadow:none}
.kbox-tag{font-family:var(--disp);font-size:1.5vmin;letter-spacing:.7px;color:#8f86b8}
.kbox.swapped{transform:translateY(-1.2vmin) scale(1.05);box-shadow:0 0 4vmin #7ec8ff77;border-color:#7ec8ff}
.kbox.called{border-color:#ff9b4a;box-shadow:0 0 3vmin #e8641b66}
.kbox.holder{border-color:#4dfc9b;background:linear-gradient(180deg,#0f4a29,#08281600);box-shadow:0 0 4vmin #4dfc9b77}
.kbox.holder .kbox-ico{animation:kpop .6s ease}
.kbox.out{opacity:.45}
@keyframes kpop{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(-6deg)}100%{transform:scale(1)}}

/* The running trade feed. Public by design: a grab everyone can see is the
   only information this game hands out for free. */
.kp-feed{display:flex;flex-direction:column;gap:.6vmin;width:min(88vw,900px);max-height:26vmin;overflow:hidden}
.kfeed{font-family:var(--disp);font-size:2vmin;letter-spacing:.4px;color:#dcd3ff;background:#00000055;
  border:.25vmin solid #ffffff1f;border-radius:1.2vmin;padding:.7vmin 1.6vmin;text-align:center;
  animation:kslide .35s ease both}
.kfeed b{color:#7ec8ff}
.kfeed.call{border-color:#e8641b66;color:#ffcfab;background:#e8641b1a}
.kfeed.call b{color:#ff9b4a}
@keyframes kslide{from{opacity:0;transform:translateY(-1vmin)}to{opacity:1;transform:none}}
.kp-feed .kfeed:nth-child(n+4){opacity:.55}
.kp-feed .kfeed:nth-child(n+6){opacity:.3}

.kp-caller{font-family:var(--disp);font-size:2.4vmin;letter-spacing:.5vmin;color:#ff9b4a;
  background:#e8641b1a;border:.25vmin solid #e8641b66;border-radius:99px;padding:.7vmin 2.2vmin}

/* Head-to-head finale. Two panes, and only one of them knows anything. */
.kp-duel{display:flex;gap:2vmin;flex-wrap:wrap;justify-content:center;align-items:stretch;width:min(92vw,1100px)}
.kduel{--pc:#666;flex:1 1 34vmin;min-width:30vmin;display:flex;flex-direction:column;align-items:center;gap:1vmin;
  background:#00000055;border:.4vmin solid var(--pc);border-radius:2vmin;padding:2vmin 1.6vmin}
.kduel-role{font-family:var(--disp);font-size:1.7vmin;letter-spacing:.5vmin;color:#a99ed0}
.kduel-name{font-family:var(--disp);font-size:3.2vmin;letter-spacing:.5px;color:#fff;text-align:center}
.kduel-sub{font-size:1.8vmin;line-height:1.4;color:#bdb2e6;text-align:center;max-width:26vmin}
.kduel.armed{border-color:#ffd94a;box-shadow:0 0 3vmin #ffd94a55}
.kduel.armed .kduel-role{color:#ffd94a}
.kduel.spent{opacity:.7}

.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-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.holder { }`, 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. Both bodies are also written to the same number of lines so the
   shut door is the same height on every phone in the room. */
.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
   box 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}

.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}

/* ---- PHONE: the grab rail --------------------------------------------
   Grab buttons are enabled/disabled imperatively on every render. They are
   NEVER re-rendered from innerHTML during trading — redrawing the zone would
   slam the peek door shut in the player's hand every time somebody else in the
   room made a trade, which is both infuriating and a tell. */
.kg-rail{display:flex;flex-direction:column;gap:8px}
.kg-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--disp);font-size:13px;letter-spacing:1.1px;color:#cfc4ff}
.kg-left{color:#ffd94a}
.kg-left.none{color:#7d74a4}
.kg-opt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  padding:12px 14px;background:linear-gradient(180deg,#3b2b6b,#241a44);color:#fff;
  border:2px solid #ffffff2b;border-radius:14px;cursor:pointer;transition:opacity .2s}
.kg-opt:active:not(:disabled){transform:scale(.98)}
.kg-opt:disabled{opacity:.42;cursor:default}
.kg-who{font-family:var(--disp);font-size:17px;letter-spacing:.5px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kg-act{font-family:var(--disp);font-size:12px;letter-spacing:1.2px;color:#7ec8ff;flex:0 0 auto}
.kg-opt:disabled .kg-act{color:#7d74a4}
.kg-call{width:100%;padding:14px;font-family:var(--disp);font-size:18px;letter-spacing:1.4px;
  background:linear-gradient(180deg,#e8641b,#a83c07);color:#fff;border:2px solid #ff9b4a88;
  border-radius:14px;cursor:pointer;transition:opacity .2s}
.kg-call:disabled{opacity:.4;cursor:default;background:linear-gradient(180deg,#3b2b6b,#241a44);border-color:#ffffff22}
/* The post-grab CALL lock. A disabled button with no visible reason reads as a
   broken button, and somebody will hammer it for seven seconds and then tell you
   the game is broken. So the wait gets its own bar. */
.kg-bar{display:flex;flex-direction:column;gap:5px;margin-top:-2px}
.kg-bart{font-family:var(--disp);font-size:11.5px;letter-spacing:1.3px;color:#ffb27a;text-align:center}
.kg-bartrk{height:5px;border-radius:99px;background:#ffffff14;overflow:hidden}
.kg-bartrk i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#e8641b,#ffb27a);transition:width .25s linear}
.kg-note{font-size:11.5px;line-height:1.45;color:#9a90c4;text-align:center}
.kg-feed{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.kgf{font-size:12px;line-height:1.35;color:#bdb2e6;background:#ffffff0a;border:1px solid #ffffff14;
  border-radius:9px;padding:6px 9px}
.kgf b{color:#7ec8ff}
.kgf.me{border-color:#ffd94a4d;background:#ffd94a12;color:#efeaff}

/* ---------- 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 END-OF-GAME LEDGER ---------- */
.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,1.4fr) minmax(0,1.5fr) minmax(0,1.5fr);
  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.duel{background:#7ec8ff1a;border-color:#7ec8ff3d}
.ldg-n{font-family:var(--disp);font-size:14px;color:#ffd94a;letter-spacing:.5px}
.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;font-style:normal}
@media(max-width:820px){
  .ldg-head{display:none}
  .ldg{grid-template-columns:44px minmax(0,1fr);row-gap:3px}
  .ldg-n{grid-row:span 3}
}

/* ---------- 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}
.cldg.duel{background:#7ec8ff1a;border-color:#7ec8ff3d}
.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}
.cl-me.neg{color:#ff8b7a}

/* ---- practice mode (?bots=N) --------------------------------------------
   Deliberately loud. A robot on the scoreboard is easy to miss on a TV across
   a room, and a game that quietly stopped counting for the hall of fame is a
   worse surprise than an ugly badge. */
.chip.prac{background:#3a2a10;border:1px solid #ffb02e66;color:#ffcf7a;
  font-family:var(--disp);letter-spacing:1px;animation:pracPulse 2.4s ease-in-out infinite}
@keyframes pracPulse{0%,100%{opacity:.72}50%{opacity:1}}
.prac-note{background:#3a2a1066;border:1px solid #ffb02e55;color:#ffdfae;
  border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:13px;line-height:1.45}
.prac-note b{color:#ffcf7a}
.prac-note code{background:#0004;border-radius:5px;padding:1px 5px;font-size:12px;color:#ffe9c9}

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