:root{--bg:#0d1117;--panel:#151b23;--text:#e6edf3;--muted:#9aa4b2;--gold:#ffd33d;--green:#3fb950;--orange:#dc8030;--bad:#f85149}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:grid;place-items:center;padding:20px}.app{width:min(100%,1050px);background:var(--panel);border:1px solid #30363d;border-radius:16px;padding:18px;box-shadow:0 10px 30px #00000047}.role-stage{position:relative;width:100%;aspect-ratio:1024 / 430;border-radius:14px;overflow:hidden;background-image:linear-gradient(#a87c1f80,#a87c1f80),url(/arena-bg.png);background-size:cover;background-position:center 48%;border:1px solid #30363d}.role-stage.hidden,.placement-stage.hidden{display:none}.role-btn{position:absolute;transform:translate(-50%,-50%);width:7.4%;aspect-ratio:1 / 1;min-width:46px;max-width:72px;border:0;padding:0;margin:0;background:transparent;border-radius:12px;cursor:pointer;display:grid;place-items:center;transition:transform .08s ease,filter .08s ease,outline-color .08s ease;overflow:visible}.role-btn img.role-icon{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}.role-btn:hover{transform:translate(-50%,-50%) scale(1.12)}.role-btn.selected{outline:3px solid var(--gold);outline-offset:5px;filter:drop-shadow(0 0 12px rgba(255,211,61,.8))}.debuff-token{position:absolute;left:50%;top:-58%;width:70%;aspect-ratio:1 / 1;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px rgba(220,128,48,.85));z-index:5}.role-btn.show-debuff .debuff-token{animation:flashIn .42s ease-out forwards}@keyframes flashIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.debuff-stack img{width:100%;height:100%;object-fit:contain;display:block}.debuff-aoe{border-radius:50%;background:#dc8030e0;border:3px solid rgba(255,220,145,.92);box-shadow:0 0 18px #dc8030d9}.debuff-cone{width:84%;height:84%;background:var(--orange);clip-path:polygon(50% 6%,92% 100%,8% 100%);border-radius:10px;box-shadow:0 0 18px #dc8030d9}.debuff-cone:after{content:"";position:absolute;top:12%;right:32%;bottom:12%;left:32%;background:#ffdc91eb;clip-path:polygon(50% 0%,100% 100%,0% 100%)}.placement-stage{width:min(100%,900px);margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid #30363d;background:#10151d;padding:20px}.placement-svg{display:block;width:100%;height:auto;overflow:visible}.tower-visual{pointer-events:none}.choice-circle{cursor:pointer;transition:filter .08s ease,stroke-width .08s ease,transform .08s ease;transform-box:fill-box;transform-origin:center}.choice-circle:hover{filter:drop-shadow(0 0 7px rgba(255,255,255,.85));stroke-width:3}.choice-circle.correct{fill:#3fb950!important;stroke:#fff!important;stroke-width:3!important;filter:drop-shadow(0 0 9px rgba(63,185,80,.9))}.choice-circle.wrong{fill:#f85149!important;stroke:#fff!important;stroke-width:3!important;filter:drop-shadow(0 0 9px rgba(248,81,73,.9))}.stage-flash-token{position:fixed;width:54px;height:54px;transform:translate(-50%,-50%) scale(.8);pointer-events:none;z-index:9999;filter:drop-shadow(0 0 10px rgba(220,128,48,.9));animation:stageFlash 2s ease-in-out forwards}.stage-flash-token.cone{background:var(--orange);clip-path:polygon(50% 6%,92% 100%,8% 100%);border-radius:10px}.stage-flash-token.aoe{border-radius:50%;background:#dc8030e6;border:3px solid rgba(255,220,145,.95);box-shadow:0 0 18px #dc8030d9}.stage-flash-token.stack img{width:100%;height:100%;object-fit:contain;display:block}@keyframes stageFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.85)}}.timeline-cue{margin:12px auto 0;text-align:center;color:var(--gold);font-size:30px;line-height:1;font-weight:950;letter-spacing:.04em;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 9px rgba(0,0,0,.95)}.timeline-cue.hidden{display:none}.status{margin-top:14px;min-height:64px;padding:12px;border-radius:12px;background:#0d1117;border:1px solid #30363d;color:var(--muted);font-weight:650;line-height:1.45}.status.ready{color:var(--green)}.status.bad{color:var(--bad)}.status strong{color:var(--text)}.hint{margin-top:10px;padding:11px 13px;border-radius:10px;background:#0d1117;border:1px dashed #3d444d;color:var(--gold);font-weight:700;line-height:1.55}.hint.hidden{display:none}.hint .group-a{color:#58a6ff}.hint .group-b{color:#d2a8ff}.hint strong{color:var(--text)}button.next{border:0;border-radius:10px;padding:11px 14px;font-weight:800;cursor:pointer;color:#fff;background:#238636;margin-top:12px}button.next.hidden{display:none}.mode-tabs{display:flex;gap:8px;margin-bottom:14px}.mode-tab{border:1px solid #30363d;background:#0d1117;color:var(--muted);border-radius:10px;padding:9px 16px;font-weight:800;cursor:pointer;transition:background .08s ease,color .08s ease,border-color .08s ease}.mode-tab.active{background:#238636;color:#fff;border-color:#2ea043}#fullQuiz.hidden,#practiceGroup.hidden,.practice-stage.hidden{display:none}.practice-role-stage{position:relative;width:100%;aspect-ratio:1024 / 430;border-radius:14px;overflow:hidden;background-image:linear-gradient(#a87c1f80,#a87c1f80),url(/arena-bg.png);background-size:cover;background-position:center 48%;border:1px solid #30363d}.practice-role-btn{position:absolute;transform:translate(-50%,-50%);width:7.4%;aspect-ratio:1 / 1;min-width:46px;max-width:72px;border:0;padding:0;margin:0;background:transparent;border-radius:12px;cursor:pointer;display:grid;place-items:center;transition:transform .08s ease,filter .08s ease;overflow:visible}.practice-role-btn img.role-icon{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}.practice-role-btn:hover{transform:translate(-50%,-50%) scale(1.12)}.practice-role-btn.selected{outline:3px solid var(--gold);outline-offset:5px;filter:drop-shadow(0 0 12px rgba(255,211,61,.8))}.practice-role-btn .debuff-token{position:absolute;left:50%;top:-58%;width:70%;aspect-ratio:1 / 1;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px rgba(220,128,48,.85));z-index:5}.practice-role-btn.show-debuff .debuff-token{animation:flashIn .42s ease-out forwards}.ab-buttons{display:flex;gap:14px;justify-content:center;margin-top:16px}.ab-btn{flex:1;max-width:220px;font-size:22px;font-weight:900;padding:18px;border:0;border-radius:12px;cursor:pointer;color:#fff;background:#1f6feb;transition:transform .08s ease,filter .08s ease,background .08s ease}.ab-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}.ab-btn:disabled{opacity:.5;cursor:default}.ab-btn.correct{background:var(--green)}.ab-btn.wrong{background:var(--bad)}.practice-reason{margin-top:12px;text-align:center;font-size:18px;font-weight:800;color:var(--gold);min-height:26px}