:root{color-scheme:dark;--text:#f5f2ee;--soft:rgba(245,242,238,.64);--faint:rgba(245,242,238,.38);--line:rgba(255,255,255,.18);--gold:#ffd479;--pink:#ff639a;--mint:#5eead4;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#070707;color:var(--text);font-family:"Noto Serif SC","Songti SC",serif}button{font:inherit;color:inherit}.app{position:relative;width:100%;height:100%;min-height:320px;overflow:hidden}.scene{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,2,4,.52),rgba(2,2,4,.08) 42%,rgba(2,2,4,.76)),linear-gradient(90deg,rgba(2,2,4,.42),transparent 28%,transparent 72%,rgba(2,2,4,.42)),url("assets/late-night-variety-studio-v1.png") center/cover no-repeat;transform:scale(1.01)}
.stage-light{position:absolute;z-index:2;top:10%;width:26vw;height:72%;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 50% 28%,rgba(255,212,121,.22),rgba(255,212,121,.03) 46%,transparent 70%);transition:opacity .35s}.stage-light--left{left:17%}.stage-light--right{right:17%}.app.is-revealing .stage-light{opacity:1}
.hud{position:absolute;z-index:20;left:0;right:0;top:0;height:64px;padding:max(8px,var(--safe-t)) max(12px,var(--safe-r)) 8px max(12px,var(--safe-l));display:grid;grid-template-columns:48px minmax(170px,1fr) auto auto auto;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(5,5,8,.78);backdrop-filter:blur(12px)}
.icon-button,.motion-toggle{height:48px;border:1px solid var(--line);border-radius:6px;background:rgba(8,8,12,.78);cursor:pointer}.icon-button{width:48px;display:grid;place-items:center}.icon-button svg,.motion-toggle svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.6}.hud__identity{display:grid;gap:3px}.hud__identity span{font:600 10px ui-monospace,monospace;letter-spacing:2px;color:var(--faint)}.hud__identity strong{font-size:14px;letter-spacing:1px}.recording,.score{height:40px;display:flex;align-items:center;border:1px solid var(--line);background:rgba(8,8,12,.64)}.recording{gap:8px;padding:0 13px}.recording i{width:7px;height:7px;border-radius:50%;background:#ff4e68;box-shadow:0 0 12px #ff4e68}.recording span{font:700 10px ui-monospace,monospace;color:#ff788b;letter-spacing:1px}.recording b{font-size:12px}.score{padding:0 12px;gap:7px}.score span,.score i{font:500 10px ui-monospace,monospace;color:var(--soft);font-style:normal}.score b,.score strong{font:700 17px ui-monospace,monospace;color:var(--gold)}.score strong{color:var(--pink)}.score em{width:1px;height:17px;background:var(--line);margin:0 3px}.motion-toggle{min-width:128px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 11px ui-monospace,monospace}.motion-toggle b{color:var(--mint)}
.opening{position:absolute;z-index:12;left:50%;top:48%;transform:translate(-50%,-50%);width:min(480px,72vw);text-align:center;text-shadow:0 3px 18px #000;transition:opacity .25s,transform .25s}.opening>span,.question-panel>span,.result span{font:700 10px ui-monospace,monospace;letter-spacing:2.4px;color:var(--gold)}.opening h1{margin:10px 0 6px;font-size:clamp(32px,4vw,56px);letter-spacing:5px}.opening p{margin:0 0 22px;color:var(--soft);font-size:14px}.start-action,.next-action,.primary-action{min-height:52px;border:0;border-radius:6px;background:var(--gold);color:#17110a;font-weight:800;letter-spacing:2px;cursor:pointer}.start-action{min-width:220px;padding:0 20px}.start-action b,.next-action b,.primary-action b{float:right;font-size:23px;line-height:.8}.app.is-running .opening{opacity:0;pointer-events:none;transform:translate(-50%,-46%)}
.lead-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto 16px}.lead-picker a{min-height:52px;padding:8px 10px;display:grid;place-content:center;gap:2px;color:var(--soft);border:1px solid var(--line);border-radius:6px;background:rgba(8,8,12,.78);text-decoration:none;font-size:13px}.lead-picker small{color:var(--faint);font-size:9px}.lead-picker a:hover,.lead-picker a:focus-visible,.lead-picker a.is-current{color:var(--text);border-color:var(--pink);background:rgba(35,17,26,.82);outline:none}.lead-picker a.is-current small{color:var(--pink)}
.question-panel{position:absolute;z-index:9;left:50%;top:20%;transform:translateX(-50%);width:min(700px,66vw);padding:12px 22px;text-align:center;text-shadow:0 3px 16px #000;opacity:0;transition:opacity .25s}.app.is-running .question-panel{opacity:1}.question-panel h2{margin:7px 0 3px;font-size:clamp(22px,2.5vw,34px);line-height:1.35;letter-spacing:1px}.question-panel p{margin:0;color:var(--soft);font-size:12px}
.boards{position:absolute;z-index:10;left:50%;top:55%;transform:translate(-50%,-50%);width:min(780px,70vw);display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:18px;opacity:0;pointer-events:none}.app.is-revealing .boards{opacity:1}.answer-board{height:130px;padding:18px;border:1px solid rgba(255,255,255,.28);background:linear-gradient(150deg,rgba(13,13,17,.96),rgba(30,26,22,.92));box-shadow:0 22px 48px rgba(0,0,0,.42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transform:rotateX(88deg);transform-origin:bottom;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.app.is-revealing .answer-board{transform:rotateX(0)}.answer-board--me{border-bottom:3px solid var(--gold)}.answer-board--lead{border-bottom:3px solid var(--pink)}.answer-board span{font:700 10px ui-monospace,monospace;letter-spacing:1.5px;color:var(--soft)}.answer-board b{font-size:clamp(22px,2.4vw,34px)}.match-mark{text-align:center;font:700 34px ui-monospace,monospace;color:var(--pink);text-shadow:0 0 18px currentColor}.app.is-match .match-mark{color:var(--mint)}
.host-caption{position:absolute;z-index:12;left:50%;bottom:88px;transform:translateX(-50%);width:min(720px,72vw);min-height:48px;padding:8px 18px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;border-left:2px solid var(--gold);background:linear-gradient(90deg,rgba(5,5,8,.94),rgba(5,5,8,.72),rgba(5,5,8,.16));opacity:0;pointer-events:none;transition:opacity .22s}.app.is-running .host-caption{opacity:1}.host-caption span{color:var(--gold);font-size:12px}.host-caption b{font-size:13px;font-weight:500}
.answer-dock{position:absolute;z-index:14;left:0;right:0;bottom:0;min-height:74px;padding:10px max(18px,var(--safe-r)) max(10px,var(--safe-b)) max(18px,var(--safe-l));display:grid;grid-template-columns:180px minmax(0,620px) 180px;justify-content:center;align-items:center;gap:18px;border-top:1px solid var(--line);background:rgba(5,5,8,.9);backdrop-filter:blur(12px);transform:translateY(100%);transition:transform .25s}.app.is-running .answer-dock{transform:translateY(0)}.dock-copy{display:grid;gap:4px}.dock-copy span{font:700 9px ui-monospace,monospace;letter-spacing:2px;color:var(--gold)}.dock-copy b{font-size:14px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choice-board{min-height:52px;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:rgba(13,13,17,.92);display:grid;grid-template-columns:32px 1fr;align-items:center;text-align:left;cursor:pointer}.choice-board i{font:700 16px ui-monospace,monospace;color:var(--gold);font-style:normal}.choice-board b{font-size:14px}.choice-board:hover,.choice-board:focus-visible{border-color:var(--gold);background:rgba(35,29,19,.94)}.next-action{display:none;width:180px;padding:0 16px;text-align:left}.app.is-revealing .choices{opacity:.34;pointer-events:none}.app.is-revealing .next-action{display:block}
.result{position:absolute;z-index:50;inset:0;display:grid;grid-template-columns:180px minmax(0,500px);justify-content:center;align-items:center;padding:calc(62px + var(--safe-t)) max(18px,var(--safe-r)) calc(18px + var(--safe-b));background:rgba(3,3,5,.8);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .25s}.result.is-open{opacity:1;pointer-events:auto}.result__score,.result__copy{min-height:250px;background:rgba(8,8,11,.95);border:1px solid var(--line)}.result__score{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:0}.result__score strong{margin:15px 0 9px;font:500 46px ui-monospace,monospace;color:var(--pink)}.result__score small{color:var(--soft)}.result__copy{padding:26px 30px}.result__copy h2{margin:10px 0 8px;font-size:25px}.result__copy p{margin:0 0 15px;color:var(--soft);font-size:14px;line-height:1.65}.result__effects{display:flex;gap:7px;flex-wrap:wrap}.result__effects span{padding:6px 9px;border:1px solid rgba(94,234,212,.35);border-radius:4px;color:var(--mint);font:600 11px ui-monospace,monospace;letter-spacing:0}.primary-action{width:100%;margin-top:17px;padding:0 17px;text-align:left}.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:active{filter:brightness(.92)}.app[data-reduced-motion="true"] *{animation:none!important;transition:none!important}
@media(max-width:900px),(max-height:500px){.hud{height:50px;padding-block:4px;grid-template-columns:44px minmax(130px,1fr) auto auto;gap:7px}.icon-button,.motion-toggle{height:42px}.icon-button{width:44px}.hud__identity span,.recording{display:none}.hud__identity strong{font-size:12px}.score{height:38px;padding-inline:9px}.motion-toggle{min-width:44px;padding:0 10px}.motion-toggle span{display:none}.question-panel{top:15%;width:72vw;padding-block:6px}.question-panel h2{font-size:19px;margin:4px 0}.question-panel p{display:none}.boards{top:50%;width:68vw;grid-template-columns:1fr 38px 1fr;gap:10px}.answer-board{height:92px;padding:10px;gap:7px}.answer-board b{font-size:20px}.host-caption{bottom:62px;min-height:38px;width:70vw;padding-block:5px}.answer-dock{min-height:58px;padding-block:6px;grid-template-columns:110px minmax(0,500px) 145px;gap:10px}.dock-copy span{display:none}.dock-copy b{font-size:12px}.choice-board{min-height:44px;padding:5px 10px}.choice-board b{font-size:12px}.next-action{width:145px;min-height:44px;font-size:12px}.result{grid-template-columns:130px minmax(0,430px);padding-top:50px}.result__score,.result__copy{min-height:205px}.result__score strong{font-size:35px;margin:8px 0}.result__copy{padding:15px 20px}.result__copy h2{font-size:19px;margin:6px 0}.result__copy p{font-size:11px;margin-bottom:8px}.result__effects span{padding:4px 7px}.primary-action{min-height:42px;margin-top:9px}}
@media(max-width:760px) and (max-height:380px){.question-panel{top:14%}.boards{top:47%}.answer-board{height:82px}.host-caption{bottom:58px;width:76vw}.answer-dock{grid-template-columns:minmax(0,480px) 138px}.dock-copy{display:none}.next-action{width:138px}.result{grid-template-columns:112px minmax(0,410px)}.result__score,.result__copy{min-height:190px}.result__copy{padding:12px 17px}.result__copy p{line-height:1.5}.primary-action{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
