:root{--bg:#140600;--bg2:#3a0d02;--ember:#ff6b1a;--flame:#ffb02e;--gold:#f7c548;--gold2:#fff1b8;--ink:#fff7ea;--mute:#e9c9a7;--red:#e63946;--ok:#5ee08f;--card:rgba(40,12,2,.78);--line:rgba(255,190,90,.28)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
body{background:radial-gradient(120% 70% at 50% 110%,#ff5a0a55 0,#a3200055 35%,transparent 70%),radial-gradient(80% 60% at 50% -10%,#f7c54822 0,transparent 60%),linear-gradient(180deg,var(--bg) 0,var(--bg2) 100%);background-attachment:fixed;min-height:100vh}
body::after{content:"";position:fixed;left:0;right:0;bottom:-40px;height:140px;pointer-events:none;z-index:0;background:radial-gradient(40px 70px at 10% 100%,#ffb02e88,transparent),radial-gradient(60px 110px at 30% 100%,#ff6b1a88,transparent),radial-gradient(50px 90px at 55% 100%,#ffb02e77,transparent),radial-gradient(70px 120px at 78% 100%,#ff6b1a88,transparent),radial-gradient(40px 80px at 95% 100%,#ffb02e88,transparent);filter:blur(6px);animation:flick 1.6s infinite alternate ease-in-out}
@keyframes flick{0%{transform:scaleY(1) translateY(0);opacity:.85}50%{transform:scaleY(1.15) translateY(-6px);opacity:1}100%{transform:scaleY(.95) translateY(2px);opacity:.8}}
main,header,.wrap{position:relative;z-index:1}
a{color:var(--gold)}
h1,h2,h3{margin:.2em 0;line-height:1.15}
.brand{font-weight:900;letter-spacing:.02em;background:linear-gradient(180deg,var(--gold2),var(--gold) 45%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px #ff6b1a44}
.muted{color:var(--mute)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 10px 30px #0008, inset 0 1px 0 #ffffff10}
button,.btn{font:inherit;font-size:17px;min-height:48px;min-width:44px;padding:10px 18px;border-radius:14px;border:2px solid transparent;cursor:pointer;color:#2a0b00;font-weight:800;background:linear-gradient(180deg,var(--gold2),var(--gold) 50%,#e89a1c);box-shadow:0 4px 0 #8a4a00,0 8px 18px #0007;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
button:active{transform:translateY(2px);box-shadow:0 2px 0 #8a4a00}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
button.danger{background:linear-gradient(180deg,#ff8a8a,var(--red));color:#fff;box-shadow:0 4px 0 #7a1010}
button.chip,.chip{min-height:44px;font-size:15px;padding:6px 12px;border-radius:999px;background:#ffffff14;color:var(--ink);border:1px solid var(--line);box-shadow:none;font-weight:700}
:focus-visible{outline:3px solid #7cc4ff;outline-offset:2px}
input,select,textarea{font:inherit;font-size:16px;min-height:48px;width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:#1d0a03;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #f7c54855}
label{display:block;font-weight:700;margin:12px 0 6px}
.hint{font-size:14px;color:var(--mute);margin:4px 0 0}
.err{color:#ffd0d0;background:#7a101099;border:1px solid #ff8a8a66;border-radius:10px;padding:10px 12px;margin-top:10px;font-weight:600}
.err:empty{display:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
.center{text-align:center}
.hidden{display:none!important}
.tbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:10px}
.timer{position:relative;height:12px;border-radius:99px;background:#ffffff18;overflow:hidden;margin:10px 0}
.timer .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--ember),var(--flame));border-radius:99px;transition:width .25s linear}
.timer.low .bar{background:linear-gradient(90deg,var(--red),var(--ember))}
.timer .num{position:absolute;right:8px;top:-3px;font-size:12px;font-weight:800}
.avatar{display:inline-grid;place-items:center;border-radius:50%;width:44px;height:44px;font-size:24px;background:#ffffff14;border:2px solid var(--c,var(--gold))}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:#ffffff12;border:1px solid var(--line);font-weight:700}
.pill.done{border-color:var(--ok);background:#5ee08f22}
.pill.off{opacity:.45}
.opt{display:flex;width:100%;text-align:left;justify-content:flex-start;min-height:60px;margin:8px 0;font-size:18px;line-height:1.25;background:linear-gradient(180deg,#fff3d1,#f7c548);}
.opt .let{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:#2a0b00;color:var(--gold);font-weight:900}
.opt.sel{outline:4px solid var(--ok)}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes rise{0%{transform:translateY(30px);opacity:0}100%{transform:none;opacity:1}}
.pop{animation:pop .45s ease-out both}.rise{animation:rise .5s ease-out both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}body::after{animation:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- phone ---------- */
.phone{max-width:560px;margin:0 auto;padding:8px 14px 120px}
.phone .q{font-size:20px;font-weight:800;line-height:1.3}
.phone .tag{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--flame);font-weight:800}
.big-emoji{font-size:84px;line-height:1;background:none;border:0;box-shadow:none;cursor:pointer}
.hostbar{position:sticky;top:0;z-index:5;background:#1d0a03ee;border-bottom:1px solid var(--line);padding:10px 14px;backdrop-filter:blur(6px)}
.hostbar .code{font-size:22px;font-weight:900;letter-spacing:.15em;color:var(--gold)}
.plist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.result{font-size:22px;font-weight:900}
.pts{color:var(--ok);font-weight:900}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;background:#ffffff10;color:var(--ink);border:2px solid var(--line);box-shadow:none;font-size:15px}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a0b00;border-color:var(--gold)}
.home{max-width:760px;margin:0 auto;padding:16px}
.home .tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.home .tile{display:block;text-decoration:none;color:var(--ink)}
.home .tile b{display:block;font-size:22px;color:var(--gold)}

/* ---------- TV (16:9) ---------- */
.tv{position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:2.2vh 3vw;overflow:hidden}
.tv .top{display:flex;justify-content:space-between;align-items:center;gap:2vw}
.tv .top .brand{font-size:4.2vh;white-space:nowrap}
.tv .status{white-space:nowrap;font-size:2.6vh;font-weight:800;color:var(--mute)}
.tv .roomtag{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:2.2vh;font-weight:900;letter-spacing:.2em;color:var(--gold);background:#ffffff10;border:1px solid var(--line);border-radius:12px;padding:.6vh 1.2vw}
.tv .stage{display:flex;flex-direction:column;justify-content:center;min-height:0}
.tv .q{font-size:5.4vh;font-weight:900;line-height:1.2;text-align:center;margin:0 4vw;text-wrap:balance}
.tv .tagline{font-size:2.6vh;text-transform:uppercase;letter-spacing:.2em;color:var(--flame);text-align:center;font-weight:900}
.tv .instr{font-size:3.4vh;text-align:center;color:var(--gold2);margin-top:2vh;font-weight:700}
.tv .timer{height:2vh;margin:2vh 8vw}
.tv .timer .num{font-size:1.6vh;top:0}
.tv .bigtime{font-size:9vh;font-weight:900;text-align:center;color:var(--gold)}
.tv .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(36vw,1fr));gap:1.8vh 2vw;margin:3vh 4vw 0}
.tv .opts div{background:linear-gradient(180deg,#fff3d1,#f7c548);color:#2a0b00;border-radius:2vh;padding:2vh 2vw;font-size:3.4vh;font-weight:800;display:flex;gap:1.4vw;align-items:center;box-shadow:0 .6vh 0 #8a4a00}
.tv .opts .let{display:inline-grid;place-items:center;min-width:6vh;height:6vh;border-radius:1.4vh;background:#2a0b00;color:var(--gold);font-weight:900}
.tv .players{display:flex;flex-wrap:wrap;gap:1vh 1vw;justify-content:center;padding-top:1vh}
.tv .players .pill{font-size:2.2vh}
.tv .players .avatar{width:4.4vh;height:4.4vh;font-size:2.6vh}
.tv .lobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3vw;align-items:center;height:100%}
.tv .joinbox{text-align:center}
.tv .joinbox .url{font-size:3.6vh;font-weight:800}
.tv .joinbox .code{font-size:15vh;font-weight:900;letter-spacing:.12em;line-height:1;color:var(--gold);text-shadow:0 0 40px #ff6b1a88}
.tv .joinbox img{width:28vh;height:28vh;background:#fff8e7;border-radius:2vh;padding:1vh;margin-top:1vh}
.tv .lobby .grid{display:flex;flex-wrap:wrap;gap:1.4vh;align-content:flex-start;max-height:70vh;overflow:hidden}
.tv .lobby .grid .pill{font-size:2.8vh;padding:.6vh 1.4vw .6vh .6vh}
.tv .lobby .grid .avatar{width:6vh;height:6vh;font-size:3.6vh}
.tv .chips{display:flex;gap:1vw;justify-content:center;flex-wrap:wrap;font-size:2.4vh}
.tv .chips span{background:#ffffff12;border:1px solid var(--line);border-radius:99px;padding:.6vh 1.4vw;font-weight:700}
.tv .reveal{display:flex;flex-direction:column;align-items:center;gap:2vh}
.tv .rcard{min-width:60vw;max-width:86vw;text-align:center;border-radius:3vh;padding:3vh 3vw;background:var(--card);border:.4vh solid var(--line)}
.tv .rcard .txt{font-size:6vh;font-weight:900;line-height:1.15}
.tv .rcard .lbl{font-size:5vh;font-weight:900;letter-spacing:.1em;margin-top:1.5vh}
.tv .rcard.lie{border-color:var(--red);box-shadow:0 0 6vh #e6394666}.tv .rcard.lie .lbl{color:#ff7b84}
.tv .rcard.truth{border-color:var(--ok);box-shadow:0 0 8vh #5ee08f55}.tv .rcard.truth .lbl{color:var(--ok)}
.tv .rcard .who{font-size:3vh;margin-top:1.4vh;display:flex;gap:1vw;justify-content:center;flex-wrap:wrap;align-items:center}
.tv .rcard .ref{font-size:2.6vh;color:var(--flame);font-weight:800;margin-top:1.4vh}
.tv .rcard .why{font-size:2.6vh;color:var(--mute);margin-top:1vh;font-style:italic}
.tv .rcard .stamp{display:inline-block;transform:rotate(-8deg);border:.5vh solid currentColor;border-radius:1.2vh;padding:.2vh 1.4vw}
.tv .others{font-size:2.2vh;color:var(--mute);text-align:center;max-width:86vw}
.tv .bars{display:grid;gap:1.4vh;width:80vw}
.tv .bars .b{display:grid;grid-template-columns:7vh 1fr 8vh;gap:1.4vw;align-items:center;font-size:3vh;font-weight:800}
.tv .bars .b .fill{height:6vh;border-radius:1.4vh;background:#ffffff18;position:relative;overflow:hidden}
.tv .bars .b .fill i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ember),var(--flame));transition:width .8s}
.tv .bars .b .fill span{position:relative;padding-left:1vw;line-height:6vh;font-size:2.6vh}
.tv .bars .b.real .fill i{background:linear-gradient(90deg,#1f9d55,var(--ok))}
.tv .boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(26vw,1fr));gap:2vw;align-items:start}
.tv .board h2{font-size:3.4vh;text-align:center;color:var(--gold)}
.tv .board ol{list-style:none;margin:0;padding:0}
.tv .board li{display:grid;grid-template-columns:4vh 5vh 1fr auto;gap:.8vw;align-items:center;font-size:2.8vh;font-weight:800;padding:.7vh .8vw;border-radius:1.2vh;background:#ffffff0c;margin-bottom:.8vh}
.tv .board li .avatar{width:4.6vh;height:4.6vh;font-size:2.6vh}
.tv .board li .d{font-size:2vh;color:var(--ok);margin-left:.6vw}
.tv .board li:first-child{background:linear-gradient(90deg,#f7c54844,#ffffff0c)}
.tv .podiums{display:grid;grid-template-columns:repeat(auto-fit,minmax(40vw,1fr));gap:3vw}
.tv .podium{display:flex;align-items:flex-end;justify-content:center;gap:1.4vw;height:46vh}
.tv .podium .step{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:11vw}
.tv .podium .step .blk{width:100%;border-radius:1.6vh 1.6vh 0 0;display:grid;place-items:center;font-size:5vh;font-weight:900;color:#2a0b00}
.tv .podium .p1 .blk{height:24vh;background:linear-gradient(180deg,var(--gold2),var(--gold))}
.tv .podium .p2 .blk{height:16vh;background:linear-gradient(180deg,#f1f1f1,#b8b8b8)}
.tv .podium .p3 .blk{height:11vh;background:linear-gradient(180deg,#f3c08b,#c27a3a)}
.tv .podium .nm{font-size:2.8vh;font-weight:900;text-align:center;margin:.6vh 0;word-break:break-word}
.tv .podium .sc{font-size:2.2vh;color:var(--mute)}
.tv .podium .avatar{width:8vh;height:8vh;font-size:5vh}
.tv .overlay{position:fixed;inset:0;display:grid;place-items:center;background:#000a;z-index:20;font-size:8vh;font-weight:900}
.tv .hostctl{position:fixed;right:1.5vw;bottom:1.5vh;z-index:30;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:60vw}
.tv .hostctl button{min-height:44px;font-size:15px;padding:6px 12px}
.tv .count{font-size:3vh;text-align:center;color:var(--gold2);font-weight:800;margin-top:1vh}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.confetti i{position:absolute;top:-4vh;width:1vw;height:2vh;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.tv .modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:40}
.tv .modal .card{text-align:center;font-size:2.6vh;max-width:70vw}
.tv .modal img{width:30vh;height:30vh;background:#fff8e7;border-radius:2vh;padding:1vh}
@media (max-aspect-ratio:1/1){.tv .lobby{grid-template-columns:1fr}.tv .q{font-size:4vh}.tv .opts{grid-template-columns:1fr}}

.noanim .rise,.noanim .pop{animation:none!important}