:root{color:#f8fbff;--arcade-blue:#1f66ff;--arcade-blue-lit:#2f7bff;font-synthesis:none;text-rendering:optimizelegibility;background:#101418;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(160deg,#2d3746a6,#0000 46%),radial-gradient(circle at 50% 0,#f2be493d,#0000 34%),#101418;min-width:320px;min-height:100vh;margin:0}button{font:inherit}#app{min-height:100vh}.screen{place-items:center;min-height:100vh;padding:28px;display:grid}.screen--game,.screen--countdown{place-items:start center;min-height:100dvh;padding:clamp(10px,2vh,24px)}.panel,.game-layout{width:min(920px,100%)}.panel{background:#0e1217d1;border:1px solid #ffffff29;border-radius:8px;justify-items:center;gap:28px;padding:36px;display:grid;box-shadow:0 24px 70px #00000052}.title-block{text-align:center;gap:10px;display:grid}.title-block h1{color:#fff;letter-spacing:0;text-transform:uppercase;max-width:780px;margin:0;font-size:clamp(2.5rem,9vw,5.9rem);line-height:.92}.title-block p,.result-reason{color:#b9c8d7;margin:0;font-size:1.1rem}.stats-row,.hud{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;display:grid}.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.results-panel .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.action-row{flex-wrap:wrap;justify-content:center;gap:14px;width:min(620px,100%);display:flex}.leaderboard{gap:12px;width:min(520px,100%);display:grid}.leaderboard h2{color:#f8fbff;letter-spacing:0;text-align:center;text-transform:uppercase;margin:0;font-size:1rem;font-weight:900}.leaderboard ol{gap:6px;max-height:260px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.leaderboard li{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:6px;grid-template-columns:56px 1fr;align-items:center;gap:12px;min-height:34px;padding:6px 12px;display:grid}.leaderboard span{color:#9eb0c1;font-size:.85rem;font-weight:900}.leaderboard strong{color:#ffd166;text-align:right;font-size:1.25rem;line-height:1}.song-select{gap:8px;width:min(520px,100%);display:grid}.song-select span{color:#9eb0c1;text-transform:uppercase;font-size:.8rem;font-weight:900}.song-select select{color:#f8fbff;cursor:pointer;width:100%;min-height:52px;font:inherit;background:#1f2731;border:1px solid #ffffff38;border-radius:8px;padding:0 14px;font-weight:800}.song-select select:focus{outline-offset:2px;outline:4px solid #ffd1666b}.metric{background:#ffffff12;border:1px solid #ffffff24;border-radius:8px;align-content:center;gap:4px;min-height:74px;padding:12px 16px;display:grid}.metric span{color:#9eb0c1;text-transform:uppercase;font-size:.8rem;font-weight:800}.metric strong{color:#fff;font-size:clamp(1.4rem,5vw,2.25rem);line-height:1}.primary-action{color:#101418;cursor:pointer;text-transform:uppercase;background:#ffd166;border:0;border-radius:8px;min-width:min(280px,100%);min-height:64px;padding:0 28px;font-size:1.15rem;font-weight:900;box-shadow:0 8px #b87918}.secondary-action,.danger-action{color:#f8fbff;cursor:pointer;text-transform:uppercase;background:#1f2731;border:1px solid #ffffff38;border-radius:8px;min-width:min(220px,100%);min-height:56px;padding:0 22px;font-size:1rem;font-weight:900}.danger-action{color:#fff;background:#9f2839}.primary-action:active,.secondary-action:active,.danger-action:active{transform:translateY(5px)}.primary-action:active{box-shadow:0 3px #b87918}.secondary-action:active,.danger-action:active{filter:brightness(.88)}.settings-panel{align-content:start;gap:22px}.settings-panel .title-block h1{font-size:clamp(2.4rem,8vw,4.8rem)}.settings-group{gap:12px;width:min(620px,100%);display:grid}.settings-group h2{color:#ffd166;letter-spacing:0;text-transform:uppercase;margin:0;font-size:1rem;font-weight:1000}.settings-fields{gap:10px;display:grid}.setting-field{background:#ffffff12;border:1px solid #ffffff24;border-radius:8px;grid-template-columns:minmax(120px,1fr) minmax(130px,1.1fr);align-items:center;gap:10px;min-height:58px;padding:10px 12px;display:grid}.setting-field--inline{grid-template-columns:1fr auto}.setting-field__label{color:#d4dfeb;font-size:.95rem;font-weight:900}.key-capture-button,.setting-field select,.number-control input{color:#fff;width:100%;min-height:44px;font:inherit;background:#1f2731;border:1px solid #ffffff38;border-radius:8px;font-weight:900}.key-capture-button{cursor:pointer;text-transform:uppercase}.key-capture-button:focus,.setting-field select:focus,.number-control input:focus,.setting-field input[type=checkbox]:focus{outline-offset:2px;outline:4px solid #ffd1666b}.number-control{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.number-control input{padding:0 12px}.number-control span{color:#9eb0c1;text-transform:uppercase;font-size:.85rem;font-weight:900}.setting-field select{padding:0 12px}.setting-field input[type=checkbox]{accent-color:#ffd166;cursor:pointer;width:28px;height:28px}.settings-message{color:#b9c8d7;text-align:center;min-height:24px;margin:0;font-size:.95rem;font-weight:800}.game-layout{gap:clamp(10px,2vh,18px);width:min(760px,100%,80dvh - 152px);margin-inline:auto;display:grid}.hud{align-self:start}.screen--game .metric{min-height:clamp(52px,8vh,74px);padding-block:8px}.playfield{place-items:center;width:100%;display:grid;position:relative}.note-grid{aspect-ratio:4/4;background:linear-gradient(90deg,#35a7ff29 0 25%,#0000 25% 50%,#f2be491f 50% 75%,#6ee7b726 75%),#f6f8fb;border:10px solid #0a0e12;border-radius:8px;gap:clamp(6px,1.2vw,12px);width:100%;padding:clamp(10px,2vw,18px);display:grid;box-shadow:0 18px #05070a,0 26px 60px #0000006b}.note-grid__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.2vw,12px);min-height:0;display:grid}.note-cell{color:#0000;background:#fffffff0;border:2px solid #cfd8e3;border-radius:4px;place-items:center;min-width:0;min-height:0;display:grid}.note-cell--target{color:#0f1720;background:#d7dee8}.note-grid__row:not([data-row="3"]) .note-cell--target{opacity:.72}.note-cell--active{color:#fff;background:var(--arcade-blue-lit);border-color:#fff;box-shadow:inset 0 0 0 5px #101418,0 0 0 5px #fff}.note-grid--locked .note-cell--active{background:#e94f64;box-shadow:inset 0 0 0 5px #101418,0 0 0 5px #e94f64}.note-cell--cleared{color:#0f17206b;background:#a9b8c8}.note-cell[data-key=A].note-cell--target,.note-cell[data-key=S].note-cell--target,.note-cell[data-key=K].note-cell--target,.note-cell[data-key=L].note-cell--target{background:var(--arcade-blue)}.note-cell[data-key].note-cell--active{background:var(--arcade-blue-lit)}.note-grid--locked .note-cell[data-key].note-cell--active{background:#e94f64}.grid-countdown{z-index:3;aspect-ratio:1;color:#fff;pointer-events:none;background:#e94f64;border:8px solid #fff;border-radius:50%;place-items:center;width:clamp(118px,20vw,172px);font-size:clamp(4rem,12vw,7.6rem);font-weight:1000;line-height:1;display:grid;position:absolute;box-shadow:inset 0 -10px #00000038,0 0 0 10px #101418c7,0 18px 44px #0000006b}.grid-countdown--start{background:var(--arcade-blue-lit)}.key-entry{justify-self:center;width:100%;position:relative}.button-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.2vw,12px);padding-inline:calc(10px + clamp(10px,2vw,18px));display:grid}.key-entry__cover{z-index:2;color:#fff;text-transform:uppercase;background:#101418db;border:4px solid #ffffffd1;border-radius:8px;place-items:center;font-size:clamp(1.5rem,6vw,4.4rem);font-weight:1000;line-height:1;display:grid;position:absolute;inset:-8px;box-shadow:0 16px 36px #00000073}.arcade-button{aspect-ratio:1;color:#fff;cursor:pointer;background:#2d3746;border:0;border-radius:8px;place-items:center;min-width:0;font-size:clamp(1.8rem,6vw,4.5rem);font-weight:1000;line-height:1;display:grid;box-shadow:inset 0 -10px #00000042,0 8px #00000057}.arcade-button[data-key=A]{background:var(--arcade-blue)}.arcade-button[data-key=S]{background:var(--arcade-blue);color:#fff}.arcade-button[data-key=K]{background:var(--arcade-blue)}.arcade-button[data-key=L]{background:var(--arcade-blue);color:#fff}.arcade-button--active{outline:6px solid #fff;transform:translateY(-6px)}.arcade-button--correct{outline:8px solid #fff;animation:.32s ease-out correct-hit;box-shadow:inset 0 -6px #0000002e,0 0 0 8px #ffffffc2,0 16px 28px #2f7bff61}.arcade-button:disabled{cursor:not-allowed;filter:grayscale(.9)brightness(.58);transform:none}.arcade-button:active{transform:translateY(5px);box-shadow:inset 0 -5px #0000003d,0 3px #00000061}.final-score{color:#ffd166;font-size:clamp(5rem,22vw,12rem);font-weight:1000;line-height:.9}@keyframes correct-hit{0%{transform:translateY(0)scale(1)}55%{transform:translateY(-10px)scale(1.04)}to{transform:translateY(-6px)scale(1)}}@media (width<=680px){.screen{padding:18px}.panel{padding:24px}.stats-row,.hud,.results-panel .stats-row{grid-template-columns:1fr}.action-row{display:grid}.setting-field{grid-template-columns:1fr}.setting-field--inline{grid-template-columns:1fr auto}}