:root { color-scheme: dark; font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; --cyan: #6cf2ff; --ink: #171851; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #11133f; }
body { display: grid; place-items: center; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
[hidden] { display: none !important; }
.game-panel { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); overflow: hidden; isolation: isolate; container-type: inline-size; user-select: none; touch-action: none; background: #292684; color: #fff; }
canvas { width: 100%; height: 100%; display: block; }
.idle-section, .result-section, .hud-section { position: absolute; inset: 0; pointer-events: none; }
.hud-section::before { content: ''; position: absolute; inset: 0 0 auto; height: 17.7%; background: linear-gradient(#222177 75%, #22217700); }
button { touch-action: manipulation; }
.idle-section button, .result-section button { pointer-events: auto; }
h1 { position: absolute; top: 8%; left: 4%; width: 92%; margin: 0; font-size: 10cqw; font-weight: 950; line-height: 1.12; letter-spacing: -.05em; text-align: center; text-shadow: 0 .5cqw #9b8aff, 0 1cqw #6454d4; overflow-wrap: anywhere; }
.title-kicker { display: block; font-size: 5cqw; letter-spacing: .05em; margin-bottom: 2.4cqw; text-shadow: none; color: #cfcaff; }
#EventTitle { display: block; max-height: 4.2em; }
.intro-caption { position: absolute; top: 68.4%; left: 0; width: 100%; margin: 0; font-size: 3.4cqw; font-weight: 800; text-align: center; }
.primary { border: 1px solid #c5ffff; border-radius: 2cqw; background: linear-gradient(145deg, #7df2ff, #3bdef6); color: var(--ink); box-shadow: inset 0 .6cqw 0 #cdffff66; font-weight: 900; padding: .7em; }
.primary:active { transform: translateY(2px); filter: brightness(.96); }
.start-button, .next-button { position: absolute; width: 68%; left: 16%; height: 8%; font-size: 5.6cqw; padding: 0; }
.start-button { top: 85%; }
.utilities { position: absolute; bottom: 2%; left: 5%; display: flex; gap: 2cqw; }
.utilities button { border: 0; border-radius: 6px; color: #d3d7ff; background: transparent; width: 8cqw; height: 8cqw; font-size: 5cqw; }
.score-block, .time-block { position: absolute; top: 3%; font-variant-numeric: tabular-nums; }
.score-block { left: 5%; }.time-block { right: 5%; text-align: right; }
.score-block span, .time-block span { display: block; color: #c7baff; font-size: 3.7cqw; font-weight: 800; }
.score-block strong, .time-block strong { display: block; font-size: 9.5cqw; line-height: 1.13; letter-spacing: -.025em; font-weight: 950; }
.progress { position: absolute; width: 37%; height: 1.9%; left: 31%; top: 7.4%; border: .55cqw solid #7160ed; border-radius: 10px; background: #332a93; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: 10px; background: #aaa0ff; }
.combo { position: absolute; top: 11%; left: 39%; width: 22%; display: flex; gap: 1.5cqw; }
.combo i { display: block; height: .65cqw; background: #b8b2ff44; flex: 1; border-radius: 3px; }
.combo i.active { background: #a7ffff; }
.stage { position: absolute; top: 14%; width: 100%; text-align: center; color: #d9e8ff; font-size: 2.8cqw; font-weight: 700; letter-spacing: .1cqw; }
.touch-section { position: absolute; left: 0; bottom: 0; width: 100%; height: 23%; background: transparent; border: 0; color: #fff; font-size: 4.8cqw; font-weight: 800; }
.touch-section span { position: absolute; left: 0; width: 100%; top: 63%; pointer-events: none; }
.touch-section:focus-visible { outline-offset: -7px; }
.feedback { pointer-events: none; position: absolute; top: 21%; left: 0; width: 100%; text-align: center; font-size: 7cqw; font-weight: 950; font-style: italic; letter-spacing: .025em; color: #a7ffff; text-shadow: 0 3px #412496; }
.feedback.overdrive { color: #ffea90; }
#ScoreBoost { color: #ffea90; margin-left: 1cqw; text-shadow: 0 0 8px #ffce8977; }
.result-section h2 { position: absolute; top: 10%; width: 100%; text-align: center; margin: 0; font-size: 10cqw; font-weight: 950; }
.result-score { position: absolute; top: 47%; width: 100%; text-align: center; }
.result-score > span { font-size: 5cqw; color: #d0c9ff; font-weight: 800; }
.result-score strong { font-size: 19cqw; letter-spacing: -.04em; font-weight: 950; }.result-score b { margin-left: 1cqw; font-size: 6cqw; }
.next-button { top: 72%; }.return-notice { position: absolute; top: 82%; width: 100%; text-align: center; margin: 0; font-size: 3.1cqw; color: #dfd9ff; }
.pause-section { position: absolute; inset: 0; background: #17164ddb; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3cqw; }
.pause-section h2 { font-size: 6cqw; }.pause-section button { width: 65%; font-size: 4.4cqw; }
.secondary { border: 1px solid #aaa5e5; color: #e2e1ff; background: #34297e; border-radius: 8px; padding: .7em 1em; }
.settings-dialog { color: #fff; border: 1px solid #8479d5; border-radius: 14px; background: #252054; width: min(90vw, 440px); padding: 24px; max-height: 90dvh; overflow-y: auto; touch-action: pan-y; }
.settings-dialog::backdrop { background: #090924b8; }.settings-dialog h2 { margin: 0 0 20px; }.settings-dialog label { display: block; font-size: 14px; margin: 12px 0; }
.settings-dialog input:not([type=checkbox]), .settings-dialog select { display: block; border: 1px solid #776ea6; border-radius: 6px; width: 100%; padding: 10px; margin-top: 5px; color: #fff; background: #17143c; user-select: text; }
.settings-dialog .check-label { display: flex; gap: 8px; align-items: center; }.settings-note { font-size: 12px; color: #c1badf; }.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }.dialog-actions .primary { border-radius: 8px; }
.status { position: absolute; bottom: 1%; left: 10%; width: 80%; text-align: center; font-size: 2.6cqw; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }