:root{font-family:Arial,sans-serif;color:#f6edcf;background:#10271e;color-scheme:dark;--gold:#f4cc71;--muted:#b6c2a4}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,input{font:inherit}button{border:0;border-radius:5px;background:var(--gold);color:#203022;padding:13px 22px;font-weight:800;cursor:pointer;min-height:44px}button:hover{background:#ffe5a3}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #fff4c5;outline-offset:4px}.quiet{background:#203d30;color:#e4dfc7;border:1px solid #688164;padding:10px 14px}.quiet:hover{background:#36533b}a{color:inherit;text-decoration:none}header{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:22px 4vw;gap:16px}header a{font-size:13px;letter-spacing:2px;font-weight:900}header a span{color:#a9b59e}.header-actions{display:flex;align-items:center;gap:12px}#connection{font-size:11px;color:var(--muted)}#ranking-toggle{display:none}small{font-size:10px;letter-spacing:2px;color:var(--muted)}main{position:relative;z-index:2;min-height:100dvh;pointer-events:none}.screen{pointer-events:auto}#arena{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 90%,#48643b 0%,#1b3828 47%,#0e211b 100%);overflow:hidden}#arena:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(92deg,transparent 0px,transparent 170px,#071b1320 171px,#071b1320 174px);box-shadow:inset 0 0 140px #0008}canvas{position:absolute;width:100%;height:100%;touch-action:none}#slash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#slashpath{fill:none;stroke:#fff4b2;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px #e2f38a)}#lobby,#results{width:min(660px,90%);margin:auto;padding:120px 0 90px;text-align:center}.seal{color:var(--gold);font-size:35px;margin-bottom:20px}h1{font-size:clamp(48px,8vw,98px);line-height:.98;letter-spacing:-4px;margin:24px 0;font-weight:900}h1 em{font-style:normal;color:var(--gold)}p{font-size:13px;line-height:1.7;color:var(--muted)}.intro{font-size:16px;line-height:1.7;margin-bottom:32px}#join{max-width:440px;margin:auto;text-align:left}label{font-size:10px;letter-spacing:2px;color:var(--muted);display:block;margin-bottom:10px}.entry{display:flex;padding:6px;border:1px solid #73835a;background:#11251ee6;border-radius:7px;gap:8px}input{background:transparent;border:0;color:#fff3d7;padding:12px;min-width:0;width:100%;font-size:16px}.entry button{white-space:nowrap}.lobby-rules{display:flex;justify-content:center;gap:22px;margin:30px 0;font-size:12px;color:#d2d9bc}details{max-width:490px;margin:25px auto 0;color:#b4c09e;font-size:12px}summary{cursor:pointer}#waiting{padding:20px;color:var(--gold)}#waiting p{margin-bottom:0}#ranking{position:fixed;z-index:8;right:3vw;top:95px;width:280px;max-height:70dvh;overflow:auto;padding:24px;background:#132b23f5;border:1px solid #6e8058;border-radius:8px;box-shadow:0 15px 70px #0005;display:none}.ranking-heading{display:flex;align-items:center;justify-content:space-between}.ranking-heading h3{font-size:18px;margin:0}#ranking-close{font-size:22px;padding:5px 12px}ol{padding:0;list-style:none;margin:20px 0}li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #485d43;font-size:13px}li span{overflow-wrap:anywhere}li.self{color:var(--gold)}body.ranking-open #ranking{display:block}#teacher{position:fixed;z-index:10;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#12271df5;border:1px solid #708157;padding:8px 12px;border-radius:8px;white-space:nowrap}#teacher strong{font-size:9px;letter-spacing:1px;margin-right:8px}#teacher button{font-size:11px;padding:9px 12px}#battle{pointer-events:none;padding:90px 4vw 0}.battle-hud{display:flex;gap:28px;justify-content:space-between;align-items:flex-start}.question{max-width:950px;flex:1;text-shadow:0 2px 12px #0007}.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:10px;letter-spacing:1px;color:var(--gold)}#instruction{color:var(--muted);letter-spacing:0}h2{font-size:clamp(18px,2.4vw,31px);line-height:1.3;margin:14px 0 18px;max-width:850px}#answers{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:860px}.answer{display:flex;align-items:center;gap:12px;font-size:14px;padding:10px 14px;background:#0c211bcb;border:1px solid #8b9c6959;border-radius:6px;transition:opacity .2s}.answer i{font-size:29px;font-style:normal}.answer.chosen{opacity:.4}.answer.chosen:after{content:'✓';margin-left:auto}.answer.correct{opacity:1;border-color:#c8e28d;background:#36512de8}.answer.wrong{opacity:1;border-color:#d28a79;background:#572e28e8}.answer.wrong:after{content:'×';margin-left:auto}.stats{display:flex;gap:22px;text-align:center}.stats strong{display:block;font-size:38px;color:var(--gold);margin-top:6px}.clock{border:2px solid #d9c48377;border-radius:50%;width:94px;height:94px;display:flex;flex-direction:column;justify-content:center}.clock strong{font-size:30px}.clock small{font-size:8px}.score{padding-top:14px}.score small{font-size:9px}.battle-rules{position:fixed;bottom:24px;left:4vw;font-size:10px;letter-spacing:1px;color:#b9c6a4}.battle-rules b{color:var(--gold)}.battle-rules span{padding:0 10px;color:#748f70}.arena-note{display:none;position:absolute;bottom:24px;right:4vw;font-size:9px;letter-spacing:2px;color:#aec19c;pointer-events:none}#effects{position:absolute;left:4vw;top:48%;color:var(--gold);font-size:14px;pointer-events:none}#toast{position:absolute;z-index:5;top:51%;left:50%;transform:translateX(-50%);padding:12px 25px;background:#f4cc71;color:#172a1e;border-radius:30px;font-size:16px;font-weight:bold;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}#ink{position:absolute;inset:42% 15% 8%;background:radial-gradient(ellipse,#080e11 45%,transparent 70%);filter:blur(8px);opacity:0;pointer-events:none;border-radius:44% 60% 39% 55%}#banner{position:absolute;z-index:1;top:58%;width:100%;text-align:center;font-size:clamp(24px,5vw,48px);font-weight:900;color:var(--gold);text-shadow:0 2px 30px #000;pointer-events:none}#explanation{pointer-events:auto;position:fixed;top:53%;left:50%;transform:translateX(-50%);width:min(640px,85vw);padding:24px;background:#142a22ef;border:1px solid #90a06c;border-radius:8px;line-height:1.7;font-size:16px;color:#eee7c9}body[data-phase="review"] #banner{top:auto;bottom:17%;font-size:20px}.result-score{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px auto}.result-score strong{font-size:72px;color:var(--gold)}.result-score span{font-size:13px;color:var(--muted)}body[data-screen="battle"]{overflow:hidden}body[data-screen="battle"] .arena-note{display:block}body[data-screen="battle"] header{padding-top:16px;padding-bottom:12px;background:#0d231a88}body[data-screen="lobby"] #ranking-toggle,body[data-screen="battle"] #ranking-toggle,body[data-screen="results"] #ranking-toggle{display:block}body[data-screen="lobby"] canvas,body[data-screen="results"] canvas{opacity:.35}[hidden]{display:none!important}@media(max-width:800px){header{padding:16px 4vw}header a{font-size:10px;letter-spacing:1px}.header-actions{gap:6px}#connection{position:fixed;bottom:8px;right:12px;font-size:9px}.quiet{font-size:10px;padding:8px}#battle{padding-top:80px}.battle-hud{gap:12px}.stats{flex-direction:column;gap:4px}.clock{width:64px;height:64px}.clock strong{font-size:22px}.score{padding:5px 0}.score strong{font-size:26px}.score small{font-size:7px;letter-spacing:0}.meta{font-size:9px}#instruction{display:none}h2{font-size:20px;margin-top:10px}#answers{gap:6px}.answer{font-size:12px;padding:8px;gap:6px}.answer i{font-size:24px}.battle-rules{bottom:30px;font-size:8px}.arena-note{bottom:50px;font-size:8px}#teacher{bottom:10px;max-width:98vw;gap:4px;padding:5px}#teacher strong{display:none}#teacher button{font-size:10px;padding:8px}.lobby-rules{gap:12px;flex-wrap:wrap}#explanation{font-size:14px;padding:18px}#lobby,#results{padding-top:110px}#ranking{width:min(320px,92vw);right:4vw}h1{letter-spacing:-2px}}@media(max-width:420px){#fullscreen{font-size:0}#fullscreen:after{content:'⛶';font-size:18px}.battle-hud{gap:8px}h2{font-size:17px}.answer{font-size:11px;padding:6px}.answer i{font-size:21px}.clock{width:55px;height:55px}.stats small{letter-spacing:0}.entry button{padding:12px}.meta{letter-spacing:0}#battle{padding-top:74px}.battle-rules span{padding:0 4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}