:root{color-scheme:dark;--bg:#090f13;--panel:#101b21;--line:#28383c;--text:#e4eee6;--dim:#91a7a8;--mint:#a4e6bd;font-family:'Segoe UI','Malgun Gothic',sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:grid;place-items:center;background:var(--bg);color:var(--text)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}
.shell{width:min(100%,calc((100dvh - 142px)*1.666667 + 32px));max-width:1440px;margin:auto;padding:16px}
.workspace{width:100%}.game-panel{border:1px solid var(--line);background:var(--panel);overflow:hidden;border-radius:10px}
.toolbar{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line)}
.arena-title,.actions,.mode-nav{display:flex;align-items:center;gap:8px}
.note-legend{display:flex;align-items:center;gap:12px;font-size:11px;color:#e4eee6;white-space:nowrap}
.note-legend span{display:flex;align-items:center;gap:5px}.note-dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid #ffffffaa}.note-dot.blue{background:#48b9ff}.note-dot.red{background:#ff5068}.note-dot.purple{background:#bd91ff;box-shadow:0 0 0 2px #bd91ff55}
.phase{font:9px monospace;color:var(--mint);border:1px solid #48715d;border-radius:4px;padding:5px 7px}
.mode-nav a{font-size:11px;color:var(--dim);padding:6px 8px}.mode-nav a:hover{color:var(--text)}
button{border:1px solid #34484c;background:#192a2f;color:#dbe7dc;border-radius:6px;font-size:11px;padding:8px 12px;transition:background .15s}
button:hover{background:#29413f}.primary{background:var(--mint);color:#152e28;border-color:var(--mint);font-weight:700}.primary:hover{background:#c1f3ce}
.stats{padding:10px 16px;display:grid;grid-template-columns:1.7fr 1fr .8fr .8fr .8fr 1fr;gap:20px;background:#111f25}
.stats.practice{grid-template-columns:1.7fr 1fr 1fr}
.stat span{display:block;font-size:9px;color:var(--dim);letter-spacing:1.2px;margin-bottom:4px}.stat strong{font:18px Consolas,monospace}
.stat.dash strong{font-size:13px;color:var(--mint);line-height:21px}
.meter{background:#263a3e;height:3px;margin-top:5px;border-radius:2px;overflow:hidden}.meter i{display:block;width:100%;height:100%;background:var(--mint);transition:width .1s}
.arena-wrap{position:relative;background:#0b171b}
canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;outline:none;cursor:crosshair;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07131885;backdrop-filter:blur(3px);text-align:center}
.overlay-card{max-width:440px;padding:24px}.overlay h1{font-size:24px;font-weight:600;margin:0 0 20px;letter-spacing:1px}
.overlay p{font-size:12px;color:#abc1bc;line-height:1.8;margin:0 0 20px}.overlay .primary{font-size:13px;padding:11px 26px}
.status{font-size:11px;color:#e6c78e;padding:10px 16px;margin:0;border-top:1px solid var(--line)}
@media(max-width:560px){.shell{width:100%;padding:8px}.toolbar{padding:8px;gap:4px;flex-wrap:wrap}.note-legend{order:3;flex-basis:100%;justify-content:center;font-size:10px}.actions{gap:4px}button{padding:7px 8px;font-size:10px}.stats{grid-template-columns:repeat(3,1fr);gap:10px;padding:10px}.stats.practice{grid-template-columns:repeat(3,1fr)}.stat strong{font-size:16px}.overlay h1{font-size:18px}.overlay-card{padding:14px}.phase{font-size:8px}.mode-nav a{font-size:10px;padding:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.overlay{backdrop-filter:none}}
.pixel-panel{margin-top:16px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.pixel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.pixel-heading h2{font-size:15px;letter-spacing:.3px;margin:0 0 6px}.pixel-heading p{font-size:11px;color:var(--dim);margin:0;min-height:16px}
.pixel-actions{display:flex;gap:6px}.pixel-actions [aria-pressed=true]{color:var(--mint);border-color:var(--mint);background:#19372d}
.pixel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}.pixel-field{display:block;min-width:0;font-size:12px}.pixel-field>span{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}.pixel-field output{font:12px Consolas,monospace;color:var(--mint);font-variant-numeric:tabular-nums}
.pixel-panel input[type=range]{width:100%;margin:0;accent-color:var(--mint);cursor:pointer;touch-action:pan-y}.pixel-panel input[type=checkbox]{accent-color:var(--mint);margin:0 6px 0 0;vertical-align:middle;cursor:pointer}
.pixel-panel select{width:100%;font:inherit;font-size:12px;padding:7px 9px;background:#192a2f;border:1px solid #34484c;border-radius:5px;color:var(--text)}
.pixel-panel input:focus-visible,.pixel-panel select:focus-visible,.pixel-panel summary:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.pixel-details{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}.pixel-details summary{font-size:12px;color:#b6c9bf;cursor:pointer;width:fit-content}.pixel-details[open] summary{margin-bottom:18px}.pixel-checks{display:flex;align-items:center;gap:20px;font-size:12px}
.pixel-footer{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}.pixel-footer label{color:var(--text);white-space:nowrap}.pixel-footer button{margin-left:auto;min-width:72px}
.pixel-panel progress{display:block;width:100%;height:3px;accent-color:var(--mint);margin:-10px 0 20px}.pixel-panel [data-error=true]{color:#efab8b}
@media(max-width:680px){.pixel-panel{padding:16px}.pixel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.pixel-heading{gap:10px}.pixel-actions{flex-wrap:wrap;justify-content:flex-end}.pixel-footer{gap:10px;flex-wrap:wrap}.pixel-footer>span{order:3;flex-basis:100%}}