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

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

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


/* ============================================================
   VENTED! — the saboteur game. Everything below is vent-only.
   ============================================================ */

/* ---------- stage layout ---------- */
.v-main{display:flex;flex-direction:column;align-items:center;gap:2vmin;width:min(96vw,1500px);margin:0 auto;padding:1vmin 0 2vmin}
.v-phasehdr{display:flex;align-items:center;gap:2.2vmin;font-family:var(--disp);font-size:3.6vmin;letter-spacing:2px;color:#dfe9ff;text-shadow:0 2px 0 #000a}
.v-phasehdr .vph-t{color:var(--gold);text-shadow:0 2px 0 #a67c00}
.v-phasehdr .vph-clock{font-size:3.2vmin;background:#00000055;border:1px solid #ffffff22;border-radius:1.2vmin;padding:.4vmin 1.6vmin;min-width:9vmin;text-align:center}
.v-phasehdr .vph-clock.low{color:#ff7a6a;animation:pulse .5s infinite alternate}

/* The one shared instrument: how close the crew is to winning by work alone.
   It has to be readable from the far end of a room, so it is a wall, not a pill. */
.v-barwrap{width:100%;max-width:1240px}
.v-barlbl{display:flex;justify-content:space-between;font-family:var(--disp);font-size:2.2vmin;letter-spacing:1.6px;color:#9fd0ff;margin-bottom:.6vmin}
.v-barlbl b{color:#54ff88}
.v-bar{height:4.6vmin;background:#0b1424;border:.35vmin solid #ffffff26;border-radius:99px;overflow:hidden;box-shadow:inset 0 3px 10px #000c}
.v-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#0f8f46,#54ff88);box-shadow:0 0 18px #54ff8866;transition:width .5s cubic-bezier(.2,.7,.3,1)}

/* crew roster */
.v-crew{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4vmin;width:100%}
.vp{display:flex;flex-direction:column;align-items:center;gap:.5vmin;min-width:11vmin;padding:1.2vmin 1.6vmin;background:#00000042;border:.3vmin solid #ffffff1f;border-radius:1.6vmin;border-top:.55vmin solid var(--pc,#888)}
.vp .vp-ic{font-size:4.4vmin;line-height:1}
.vp .vp-n{font-family:var(--disp);font-size:1.9vmin;letter-spacing:1px;color:#fff;white-space:nowrap;max-width:16vmin;overflow:hidden;text-overflow:ellipsis}
.vp .vp-tag{font-size:1.5vmin;color:#9fd0ff}
.vp.off{opacity:.45}
.vp.dead{filter:grayscale(1);opacity:.55}
.vp.dead .vp-ic{position:relative}
.vp.dead .vp-n{text-decoration:line-through;color:#ff9a8a}
.vp.voted .vp-tag{color:#54ff88}
.vp.ejected{outline:.4vmin dashed #ff5545}

/* event feed */
.v-feed{display:flex;flex-direction:column;gap:.7vmin;width:min(92vw,1000px);max-height:22vh;overflow:hidden;margin-top:.6vmin}
.vf{background:#00000048;border-left:.6vmin solid #4a90d9;border-radius:.9vmin;padding:.8vmin 1.4vmin;font-size:2vmin;color:#dfe9ff;animation:vfIn .35s ease both}
.vf.bad{border-left-color:#ff5545;color:#ffd2ca}
.vf.good{border-left-color:#54ff88;color:#d2ffe0}
.vf.gold{border-left-color:var(--gold);color:#ffe9a8}
@keyframes vfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the alarm — a body was found / sabotage klaxon */
@keyframes vAlarm{0%,100%{box-shadow:inset 0 0 0 0 #ff000000}50%{box-shadow:inset 0 0 22vmin 4vmin #ff254588}}
body.alarm #stage{animation:vAlarm .8s ease-in-out 3}

/* meeting panel */
.v-meet{display:flex;flex-direction:column;align-items:center;gap:1.6vmin;background:#101a30ee;border:.4vmin solid #ffffff26;border-radius:2.4vmin;padding:3vmin 4vmin;max-width:1100px;box-shadow:0 16px 60px #000c}
.v-meet h2{margin:0;font-family:var(--disp);font-size:4.6vmin;letter-spacing:2px;color:#ff7a6a;text-shadow:0 3px 0 #6a1508}
.v-meet h2.sos{color:var(--gold);text-shadow:0 3px 0 #a67c00}
.v-meet .vm-sub{font-size:2.3vmin;color:#cfe0ff;text-align:center;line-height:1.5}
.v-meet .vm-votes{font-family:var(--disp);font-size:2.6vmin;letter-spacing:1.5px;color:#9fd0ff}
.v-meet .vm-votes b{color:#54ff88;font-size:3.2vmin}

/* the airlock */
.v-eject{display:flex;flex-direction:column;align-items:center;gap:2vmin;padding:4vmin 2vmin}
.v-eject .ve-ic{font-size:11vmin;animation:veFloat 2.6s ease-in-out both}
@keyframes veFloat{0%{transform:translate(-42vw,2vh) rotate(0)}100%{transform:translate(44vw,-9vh) rotate(720deg);opacity:.15}}
.v-eject .ve-t{font-family:var(--disp);font-size:5vmin;letter-spacing:2px;color:#fff;text-shadow:0 3px 0 #000}
.v-eject .ve-r{font-family:var(--disp);font-size:3.4vmin;letter-spacing:1.6px}
.v-eject .ve-r.imp{color:#ff5545}.v-eject .ve-r.crew{color:#54ff88}
@media (prefers-reduced-motion:reduce){.v-eject .ve-ic{animation-duration:.01ms}}

/* win screens ride the shared over-card; give the verdict a color */
.v-verdict{font-family:var(--disp);font-size:3.2vmin;letter-spacing:2px;margin:.4vmin 0 1vmin}
.v-verdict.imp{color:#ff5545;text-shadow:0 2px 0 #6a1508}
.v-verdict.crew{color:#54ff88;text-shadow:0 2px 0 #0b7c33}
.v-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:1vmin;margin:.6vmin 0}
.v-roles .vr{background:#00000042;border:1px solid #ffffff22;border-radius:99px;padding:.6vmin 1.4vmin;font-size:1.9vmin;color:#dfe9ff}
.v-roles .vr.imp{border-color:#ff554577;color:#ffb3a8}

/* ---------- phone ---------- */
.v-cwrap{display:flex;flex-direction:column;gap:12px;padding:2px}
.v-shifthdr{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:15px;letter-spacing:1.2px;color:#9fd0ff}
.v-shifthdr .low{color:#ff7a6a}
.v-minibar{height:12px;background:#0b1424;border:1px solid #ffffff26;border-radius:99px;overflow:hidden}
.v-minibar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#0f8f46,#54ff88);transition:width .5s}

/* role colours (only ever painted INSIDE the door body) */
.rl-crew{color:#54ff88}.rl-imp{color:#ff5545}

/* task list */
.v-tasks{display:flex;flex-direction:column;gap:9px}
.vt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 14px;
  background:linear-gradient(180deg,#22355c,#152441);color:#fff;border:2px solid #ffffff2b;border-radius:14px;cursor:pointer;font:inherit}
.vt:active{transform:scale(.985)}
.vt .vt-ic{font-size:22px}
.vt .vt-n{flex:1;font-family:var(--disp);font-size:16px;letter-spacing:.6px}
.vt .vt-s{font-size:12px;color:#9fd0ff}
.vt.done{opacity:.5;background:#12301f;border-color:#54ff8833;cursor:default}
.vt.done .vt-s{color:#54ff88}

/* minigame shell */
.mg{display:flex;flex-direction:column;gap:12px;background:#0d1526;border:2px solid #ffffff22;border-radius:16px;padding:14px}
.mg h4{margin:0;font-family:var(--disp);font-size:17px;letter-spacing:1px;color:var(--gold);text-align:center}
.mg .mg-sub{font-size:12.5px;color:#cfe0ff;text-align:center;line-height:1.4}
.mg-quit{align-self:center;background:none;border:none;color:#8fa8cc;font-size:13px;text-decoration:underline;cursor:pointer;padding:6px}

/* wires: tap a left plug then its matching right plug */
.mg-wires{display:flex;justify-content:space-between;gap:14px}
.mg-wires .wcol{display:flex;flex-direction:column;gap:10px;flex:1}
.wplug{height:52px;border-radius:12px;border:3px solid #ffffff33;cursor:pointer;font-size:20px}
.wplug.sel{outline:4px solid #fff;outline-offset:2px}
.wplug.done{opacity:.28;cursor:default}
.wplug.w-r{background:#c22a1d}.wplug.w-b{background:#1f6fd0}.wplug.w-y{background:#d9b41f}.wplug.w-g{background:#1a9e4b}

/* keypad */
.mg-code{font-family:var(--disp);font-size:26px;letter-spacing:8px;text-align:center;color:#54ff88;background:#04140b;border:2px solid #54ff8833;border-radius:10px;padding:8px 6px;min-height:34px}
.mg-code.err{color:#ff5545;border-color:#ff554566}
.mg-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mg-pad button{height:54px;font-size:22px;font-family:var(--disp);background:linear-gradient(180deg,#2b3a63,#16223f);border:2px solid #ffffff24;border-radius:12px;color:#dfe9ff;cursor:pointer}
.mg-pad button:active{transform:translateY(2px)}

/* hold-to-calibrate gauge */
.mg-gauge{position:relative;height:26px;background:#0b1424;border:2px solid #ffffff26;border-radius:99px;overflow:hidden}
.mg-gauge .g-zone{position:absolute;top:0;bottom:0;background:#54ff8833;border-left:2px solid #54ff88;border-right:2px solid #54ff88}
.mg-gauge .g-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#8a5cd0,#c07ae8)}
.mg-hold{height:64px;width:100%;font-family:var(--disp);font-size:18px;letter-spacing:1.5px;background:linear-gradient(180deg,#3b2f63,#241a44);border:2px solid #ffffff2b;border-radius:14px;color:#fff;cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mg-hold:active{transform:scale(.985)}

/* swipe card */
.mg-track{position:relative;height:64px;background:#0b1424;border:2px solid #ffffff26;border-radius:14px;touch-action:none}
.mg-cardt{position:absolute;top:5px;left:5px;width:86px;height:50px;border-radius:9px;background:linear-gradient(135deg,#e8b419,#c07a10);display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 3px 10px #000a;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}
.mg-lights{display:flex;justify-content:center;gap:10px}
.mg-lights i{width:14px;height:14px;border-radius:50%;background:#333;border:1px solid #ffffff33}
.mg-lights i.on{background:#54ff88;box-shadow:0 0 8px #54ff88aa}
.mg-lights i.bad{background:#ff5545;box-shadow:0 0 8px #ff5545aa}

/* pump */
.mg-pumpbtn{height:110px;width:100%;font-size:40px;background:radial-gradient(circle at 50% 35%,#2b3a63,#101b33);border:3px solid #ffffff2b;border-radius:20px;color:#fff;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mg-pumpbtn:active{transform:scale(.96)}

/* THE CREW MONITOR — identical on every phone, because on exactly one of
   them it is the airlock. Nothing in here may vary by role. Ever. */
.v-mon{display:flex;flex-direction:column;gap:10px;background:#0d1a2ecc;border:2px solid #4a90d955;border-radius:16px;padding:13px}
.v-mon h4{margin:0;font-family:var(--disp);font-size:15px;letter-spacing:1.2px;color:#7ec8ff;text-align:center}
.v-mon .mon-note{font-size:12px;color:#b9d4f2;text-align:center;line-height:1.45}
.mon-cd{font-family:var(--disp);font-size:14px;letter-spacing:1px;color:#9fb9dd;text-align:center}
.mon-cd.rdy{color:#54ff88}
.mon-list{display:flex;flex-direction:column;gap:8px}
.mon-t{display:flex;align-items:center;gap:10px;padding:12px 13px;background:linear-gradient(180deg,#22355c,#152441);border:2px solid #ffffff2b;border-radius:12px;color:#fff;cursor:pointer;font:inherit;text-align:left}
.mon-t .st-n{font-family:var(--disp);font-size:16px;letter-spacing:.6px}
.mon-t .mon-x{margin-left:auto;font-size:16px}
.mon-t.arm{border-color:var(--gold);box-shadow:0 0 0 2px #ffd94a44}
.mon-t.tag{border-color:#7ec8ff88}
.mon-t:active{transform:scale(.98)}

/* emergency */
.sos-btn{width:100%;padding:15px;font-family:var(--disp);font-size:16px;letter-spacing:1.4px;background:linear-gradient(180deg,#7c1408,#4a0c04);border:2px solid #ff554566;border-radius:14px;color:#ffd2ca;cursor:pointer}
.sos-btn:disabled{opacity:.4;cursor:default}
.sos-btn:active:not(:disabled){transform:scale(.98)}

/* vote list */
.v-votes{display:flex;flex-direction:column;gap:9px}
.vv{display:flex;align-items:center;gap:10px;padding:13px 14px;background:linear-gradient(180deg,#22355c,#152441);border:2px solid #ffffff2b;border-radius:14px;color:#fff;cursor:pointer;font:inherit;text-align:left}
.vv .vv-ic{font-size:20px}
.vv .vv-n{flex:1;font-family:var(--disp);font-size:16px;letter-spacing:.6px}
.vv.sel{background:linear-gradient(180deg,#ffd94a,#c79a00);color:#2a2000;border-color:#fff}
.vv:disabled:not(.sel){opacity:.5;cursor:default}
.vv.skip{background:linear-gradient(180deg,#3a4456,#232a38)}
.vv.skip.sel{background:linear-gradient(180deg,#ffd94a,#c79a00)}

/* ghost */
.v-ghost{background:#1a1233;border:2px dashed #8a5cd066;border-radius:14px;padding:12px 14px;text-align:center;color:#cfc4ff;font-size:13.5px;line-height:1.5}
.v-ghost b{color:#e8dcff;font-family:var(--disp);letter-spacing:1px}

/* dead-body report card on phones (victim view) */
.v-victim{background:#2a0d0d;border:2px solid #ff554566;border-radius:16px;padding:16px;text-align:center}
.v-victim h4{margin:0 0 6px;font-family:var(--disp);font-size:20px;letter-spacing:1.4px;color:#ff5545}
.v-victim p{margin:0;font-size:13px;color:#ffc9c0;line-height:1.5}