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

/* payout explainers */
.ht-pay{font-family:var(--disp);color:#ffd400;font-size:2vmin;line-height:1.5;margin:.8vmin 0;letter-spacing:.5px}
.howto.phone .ht-pay{font-size:14px}
.game-pay{color:#ffd400;font-size:1.6vmin;text-align:center;line-height:1.5;max-width:30vmin;font-weight:bold}

/* ===== Solo Host (Play on this device) ===== */
.hostmode{display:flex;gap:8px;width:100%}
.hm-btn{flex:1;font:inherit;font-size:13px;letter-spacing:.5px;padding:12px 8px;background:#3a1010;border:2px solid #ffffff22;border-radius:12px;color:#ffe1c4;line-height:1.3;cursor:pointer}
.hm-btn.on{border-color:#ffd400;background:#5a1a16;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;letter-spacing:2px;text-align:center}
.solo-note{color:#ffdcc0;font-size:12px;line-height:1.45}

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