@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap";:root{--bg-deep:#060b0a;--bg-panel:#0c1512;--line:#1c2b26;--teal:#7fe7c4;--cyan:#5fd3e8;--violet:#8f7fe7;--amber:#ff6b4a;--text-dim:#7fa89a;--text-bright:#eafff6}*{box-sizing:border-box}html,body{background:var(--bg-deep);height:100%;color:var(--text-bright);justify-content:center;align-items:center;margin:0;padding:0;font-family:JetBrains Mono,monospace;display:flex;overflow:hidden}.stage{flex-direction:column;gap:10px;width:min(94vw,920px);padding:14px;display:flex}.hud{justify-content:space-between;align-items:flex-end;padding:2px 6px;display:flex}.hud .label{letter-spacing:2px;color:var(--text-dim);font-size:10px}.hud .value{color:var(--text-bright);font-family:Space Grotesk,sans-serif;font-size:22px;font-weight:700}.hud-center{text-align:center}.hud-right{text-align:right}.combo-chip{letter-spacing:1px;color:var(--amber);text-shadow:0 0 10px #ff6b4a80;margin-top:2px;font-family:Space Grotesk,sans-serif;font-size:12px;font-weight:700}.combo-chip.hidden{visibility:hidden}.modifier-banner{text-align:center;letter-spacing:2px;border:1px solid var(--amber);color:var(--amber);text-shadow:0 0 10px #ff6b4a66;background:#ff6b4a14;border-radius:4px;margin:0 6px;padding:6px 10px;font-size:11px;font-weight:700}.modifier-banner.hidden{display:none}.viewport-wrap{border:1px solid var(--line);background:radial-gradient(ellipse at center, #7fe7c40d, transparent 70%), var(--bg-panel);border-radius:6px;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #0009,0 0 0 1px #7fe7c40a}canvas{aspect-ratio:900/560;touch-action:none;cursor:crosshair;width:100%;height:auto;display:block}.overlay{text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#060b0ad1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay.hidden{display:none}.panel{background:#0c151299;border:1px solid #7fe7c440;border-radius:8px;max-width:420px;padding:28px 30px}.panel-wide{max-width:460px}.panel h1,.panel h2{letter-spacing:3px;color:var(--teal);text-shadow:0 0 18px #7fe7c466;margin:0 0 12px;font-family:Space Grotesk,sans-serif}.panel h1{font-size:28px}.panel h2{font-size:20px}.panel p{color:var(--text-dim);margin:0 0 20px;font-size:13px;line-height:1.6}.result-body{text-align:left;align-items:center;gap:20px;margin-bottom:18px;display:flex}.gauge{flex-shrink:0}.gauge-track{fill:none;stroke:var(--line);stroke-width:8px}.gauge-fill{fill:none;stroke-width:8px;stroke-linecap:round;transform-origin:60px 60px;transition:stroke-dashoffset .6s,stroke .3s;transform:rotate(-90deg)}.gauge-label{font-family:Space Grotesk,sans-serif;font-size:22px;font-weight:700}.stat-grid{flex-direction:column;flex:1;gap:7px;display:flex}.stat-row{letter-spacing:1.5px;color:var(--text-dim);justify-content:space-between;align-items:center;font-size:11px;display:flex}.stat-row .stat-value{color:var(--text-bright);letter-spacing:0;font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:700}.grade-badge{letter-spacing:2px;color:#06110d;border-radius:3px;padding:2px 10px;font-size:11px}.grade-badge.grade-perfect{background:var(--teal)}.grade-badge.grade-great{background:var(--cyan)}.grade-badge.grade-good{background:var(--violet)}.grade-badge.grade-miss{background:var(--amber)}.panel .score-line{color:var(--teal);text-align:center;margin:0 0 20px;font-family:Space Grotesk,sans-serif;font-size:17px;font-weight:700}.btn{letter-spacing:2px;color:var(--teal);border:1px solid var(--teal);cursor:pointer;background:0 0;border-radius:4px;padding:10px 22px;font-family:JetBrains Mono,monospace;font-size:12px;transition:all .15s}.btn:hover{background:var(--teal);color:#06110d;box-shadow:0 0 20px #7fe7c480}.footer-row{justify-content:space-between;align-items:center;padding:0 6px;display:flex}.hint{color:var(--text-dim);letter-spacing:1px;font-size:10px}.reset-btn{letter-spacing:1px;color:var(--text-dim);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:4px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:10px}.reset-btn:hover{color:var(--amber);border-color:var(--amber)}