:root{--bg:#1b1d1f;--panel:#272a2d;--line:#363a3e;--text:#e8ecef;--mute:#8d969d;--mint:#5eead4;--mint-d:#2dd4bf;--bad:#ff6b6b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 "Trebuchet MS",system-ui,sans-serif;min-height:100vh}
main{max-width:860px;margin:0 auto;padding:16px}
.hud{display:flex;gap:10px;max-width:860px;margin:12px auto 0;padding:0 16px}
.hud>div{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px 14px}
.hud span,.prompt span{display:block;font-size:.75rem;color:var(--mute)}
.hud b{font-size:1.25rem;color:var(--mint)}
.hud .timer.low b{color:var(--bad)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;max-width:520px;margin:24px auto}
h1{font-size:2.2rem;margin:0;color:var(--mint)} h2{margin:20px 0 6px}
.muted{color:var(--mute)} .note{font-size:.85rem;color:var(--mute);margin:0 0 8px}
label{display:block;margin:14px 0 0;color:var(--mute);font-size:.9rem}
input,select{width:100%;margin-top:4px;padding:11px 14px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:12px;font:inherit}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
button{font:inherit;border:0;border-radius:14px;padding:12px 20px;cursor:pointer;margin-top:18px}
.primary{background:var(--mint);color:#10231f;font-weight:700;width:100%}
.primary:hover{background:var(--mint-d)} .ghost{background:transparent;color:var(--mute);border:1px solid var(--line)}
.row{display:flex;gap:10px}.row button{flex:1}
ol{padding-left:22px;margin:0} li{padding:4px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.prompt{text-align:center;margin:8px 0 12px}
.prompt b{font-size:2.6rem;color:var(--mint);text-transform:capitalize}
.stage{position:relative;border-radius:24px;overflow:hidden;border:2px solid var(--line);background:#000}
.stage video,.stage canvas{display:block;width:100%;height:100%}
.stage canvas{position:absolute;inset:0}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0}
.flash.ok{animation:ok .7s ease-out;background:radial-gradient(circle,rgba(94,234,212,.55),transparent 70%)}
.flash.bad{animation:bad .5s ease-out;box-shadow:inset 0 0 0 8px var(--bad)}
@keyframes ok{0%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.3)}}
@keyframes bad{0%,60%{opacity:1}100%{opacity:0}}
.toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(27,29,31,.88);padding:8px 18px;border-radius:999px;font-weight:700;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}.toast.ok{color:var(--mint)}.toast.bad{color:var(--bad)}
.bar{height:8px;background:var(--panel);border-radius:8px;margin-top:12px;overflow:hidden}
.bar div{height:100%;width:0;background:var(--mint);transition:width .2s}
table{width:100%;border-collapse:collapse;font-size:.9rem;margin:8px 0}
td,th{text-align:left;padding:5px 4px;border-bottom:1px solid var(--line)}
.err{color:var(--bad)}
@media (prefers-reduced-motion:reduce){.flash.ok,.flash.bad{animation:none}}

/* ---- two-player turn flow ---- */
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:rgba(27,29,31,.82);padding:16px}
.ov[hidden]{display:none}
#ovWho{font-size:clamp(1.1rem,4vw,1.6rem);color:var(--mute)}
#ovMain{font-size:clamp(2rem,8vw,3.6rem);font-weight:700;color:var(--mint);text-transform:capitalize;line-height:1.1}
#ovSub{font-size:clamp(2rem,7vw,3rem);font-weight:700}
.ov.ok #ovWho,.ov.ok #ovSub{color:var(--mint)}
.ov.bad #ovWho{color:var(--bad)} .ov.bad #ovMain{color:var(--text)}
.sb{display:flex;gap:10px;margin-top:12px}
.sbp{flex:1;display:flex;align-items:baseline;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px 14px}
.sbp span{color:var(--mute);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbp b{font-size:1.3rem}.sbp em{color:var(--mint);font-style:normal;font-size:.9rem}
.sbp.active{border-color:var(--mint)}.sbp.active span{color:var(--text)}
.card h3{margin:18px 0 4px;color:var(--mint)}