@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101016;--card:#191921;--muted:#93939f;--line:#2b2b36;--accent:#be9bff;--green:#b8f57a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f4f8;font-family:'DM Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,label{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,label:focus-visible{outline:2px solid var(--green);outline-offset:4px}button{color:inherit}button,input{accent-color:var(--accent)}[hidden]{display:none!important}.home{max-width:1120px;margin:auto;padding:0 42px}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;text-decoration:none;color:white;letter-spacing:-2px;display:flex;align-items:center;gap:10px}.brand-icon{display:grid;place-items:center;background:var(--accent);color:#201331;width:32px;height:35px;transform:skew(-8deg);font-size:28px;letter-spacing:-3px;padding-right:3px}.brand-dot{color:var(--accent);margin-left:-10px}.header-tag{font-size:10px;letter-spacing:2px;color:var(--muted)}.icon-btn{background:transparent;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;font-size:21px;display:grid;place-items:center;flex-shrink:0}.intro{padding:43px 0 31px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-family:'Space Grotesk',sans-serif;letter-spacing:-3px;line-height:1.1;font-size:64px;margin:15px 0}h1 em{font-style:normal;color:var(--accent)}.intro p{color:var(--muted);font-size:15px;margin:0}.dashboard{display:grid;grid-template-columns:1.05fr 1fr;gap:48px}.section-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#bbbbc7;font-weight:700;margin-bottom:15px}.local-badge{color:#8d9b88;font-size:9px;letter-spacing:0}.dropzone{border:1px dashed #53515f;background:linear-gradient(135deg,#21202b,#181820);border-radius:16px;min-height:233px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:#252031}.upload-icon{display:grid;place-items:center;width:40px;height:40px;background:#343040;border-radius:12px;font-size:28px;color:var(--accent);margin-bottom:14px}.dropzone strong{font-size:17px}.dropzone>span:not(.file-pill):not(.upload-icon){font-size:12px;color:var(--muted);margin-top:7px}.file-pill{margin-top:18px;border:1px solid #55505f;padding:9px 16px;border-radius:7px;font-size:11px;font-weight:600}.file-pill b{padding-left:18px}.dropzone small{font-size:9px;color:#74717f;margin-top:14px}.status{font-size:12px;color:var(--accent);margin:10px 0;min-height:0}.status:empty{display:none}.demo-link{width:100%;background:none;border:none;font-size:11px;color:var(--muted);padding:14px 0 5px}.demo-link strong{color:#d2c4ea;font-weight:500;margin-left:5px}.difficulty-label{margin-top:29px}.difficulties{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.difficulties button{border:1px solid var(--line);background:#1a1a22;border-radius:11px;text-align:left;padding:14px 12px;transition:.2s}.difficulties button.selected{border-color:var(--accent);background:#30273f;box-shadow:0 0 0 1px #be9bff25}.bars{display:block;color:var(--accent);height:23px;font-size:17px;letter-spacing:2px}.difficulties strong{font-size:14px;display:block;margin:5px 0}.difficulties small{color:var(--muted);font-size:9px;white-space:nowrap}.mode-hint{font-size:10px;color:var(--muted);margin:12px 0 23px}.play-button{background:var(--accent);color:#241338;width:100%;padding:17px 22px;display:flex;justify-content:space-between;border:0;border-radius:10px;font-size:15px;font-weight:700}.play-button:disabled{background:#34313d;color:#77717f}.play-footnote{text-align:center;font-size:10px;letter-spacing:.5px;color:#777381;margin-top:12px}.showcase{overflow:hidden;position:relative;background:radial-gradient(ellipse at 55% 50%,#3c285a 0,#211d2d 46%,#1a1923 90%);border:1px solid #3b3049;border-radius:20px;min-height:570px;display:flex;flex-direction:column}.preview-top{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;font-size:9px;letter-spacing:1.4px;color:#c3b5d7}.preview-top i{display:inline-block;width:5px;height:5px;background:var(--green);border-radius:50%;margin-right:5px}.preview-top>span:last-child{font-size:22px}.preview-copy{font-family:'Space Grotesk',sans-serif;font-size:35px;line-height:1.1;letter-spacing:-1.3px;padding:6px 27px;z-index:1}.preview-copy>span{color:#a494bb}.preview-board{position:absolute;bottom:30px;height:390px;left:15%;right:15%;transform:none;mask-image:linear-gradient(transparent,black 12%)}.lane{position:absolute;width:33.333%;height:100%;border-right:1px solid #76638640;background:linear-gradient(#9c76ce03,#9c76ce0b)}.l1{left:0;border-left:1px solid #76638640}.l2{left:33.333%}.l3{left:66.666%}.sample-note{position:absolute;width:29%;height:28px;left:2%;border-radius:5px;background:linear-gradient(#ddccff,#b58ce8);box-shadow:0 0 20px #b58ce830;border-top:3px solid #f1e6ff}.n1{top:55px;left:35.3%}.n2{top:138px}.n3{top:200px;left:68.6%;background:linear-gradient(#d1ff9d,#9ada5d);border-color:#eaffd1;color:#345514;text-align:center;font-size:22px}.n4{top:285px;left:35.3%}.n5{top:10px;height:55px;left:68.6%;opacity:.4}.hit-line{position:absolute;top:317px;left:-5%;right:-5%;height:2px;background:#e7d7ff;box-shadow:0 0 20px 6px #c29aee50}.perfect{position:absolute;top:340px;text-align:center;width:100%;font-size:17px;letter-spacing:4px;font-weight:700;color:#d7ffb2;transform:rotate(-5deg)}.perfect span{color:#f3ffd8}.preview-bottom{position:absolute;bottom:16px;display:flex;justify-content:center;gap:24px;width:100%;font-size:8px;letter-spacing:1.5px;color:#aa9abf}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);margin-top:36px;padding:26px 0}.how>div{display:flex;align-items:center;gap:13px}.how>div>span{font-family:'Space Grotesk';font-size:12px;color:#b5a2cf;background:#24202e;padding:10px;border-radius:50%}.how p{margin:0}.how strong{display:block;font-size:11px}.how small{display:block;margin-top:5px;color:var(--muted);font-size:10px}footer{border-top:1px solid var(--line);padding:20px 0 25px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#73717e}footer button{background:none;border:0;color:#af9ec6;font-size:10px}.track-card{display:flex;align-items:center;gap:15px;min-height:233px;border-radius:16px;background:linear-gradient(125deg,#322647,#1d1c25);padding:22px;border:1px solid #514264}.cover-art{width:90px;height:110px;border-radius:12px;background:repeating-radial-gradient(circle at 40% 70%,#ba9af9 0,#ba9af9 2px,#77539e 3px,#77539e 8px);display:grid;place-items:center;flex-shrink:0}.cover-art span{font-size:65px;color:#eaffc9;transform:skew(-12deg);text-shadow:3px 3px #352346}.track-details{min-width:0;flex:1}.track-details small{font-size:8px;color:var(--green);letter-spacing:1px}.track-details h2{font-size:19px;overflow-wrap:anywhere;line-height:1.3}.track-details p{color:#b4a7c8;font-size:11px}
dialog{color:#f5f4f8;background:#1d1b27;border:1px solid #4c3d60;border-radius:22px;padding:28px;max-width:410px;width:calc(100% - 32px);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#080710c9;backdrop-filter:blur(8px)}dialog h2{font-family:'Space Grotesk';font-size:29px;letter-spacing:-1px;margin:15px 0}dialog p{font-size:13px;color:#aaa0b8;line-height:1.6}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin-top:0}.dialog-head .icon-btn{align-self:flex-start}.primary,.secondary{width:100%;border-radius:10px;padding:14px;border:0;font-weight:600;margin-top:12px}.primary{background:var(--accent);color:#21132f}.secondary{background:#302a3d;color:#d6c5eb;border:1px solid #4c405d}.text-button{background:none;border:0;padding:18px;width:100%;color:#aaa0b8}.setting-label{display:flex;justify-content:space-between;font-size:12px;margin:25px 0 15px}.setting-label strong{color:var(--accent)}#offset{width:100%}.instruction{display:flex;align-items:center;gap:18px}.instruction b{font-size:24px;color:var(--green);width:25px;flex-shrink:0}.instruction strong{display:block;color:white;margin-bottom:3px}.result-stars{text-align:center;color:var(--green);font-size:36px;letter-spacing:6px;margin:24px 0 8px}.result-score{font-family:'Space Grotesk';font-size:52px;font-weight:700;text-align:center;letter-spacing:-2px}.result-grid{display:flex;justify-content:center;gap:45px;padding:20px 0}.result-grid strong,.result-grid small{display:block;text-align:center}.result-grid strong{font-size:22px}.result-grid small{font-size:8px;letter-spacing:1px;color:#aaa0b8;margin-top:6px}.judgments{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:11px;color:#b8abc9;padding-top:15px;border-top:1px solid #40344e}.judgments span{display:flex;justify-content:space-between}.best-score{text-align:center;color:var(--green)}#game{height:100dvh;position:fixed;inset:0;background:radial-gradient(ellipse at 50% 80%,#292039,#0e0d15 75%);max-width:640px;margin:auto;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.game-header{height:80px;padding:calc(12px + env(safe-area-inset-top)) 20px 12px;display:flex;gap:16px;align-items:center}.game-header>div{flex:1;min-width:0}.game-header small{display:block;font-size:9px;letter-spacing:2px;color:var(--accent);margin-bottom:5px}.game-header strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#gameTime{color:#9d91ad;font-size:11px}.score-row{display:flex;align-items:center;justify-content:space-between;height:70px;padding:7px 25px}.score-row small{display:block;font-size:8px;letter-spacing:2px;color:#aa98bb}.score-row strong{display:block;font-family:'Space Grotesk';font-size:27px;letter-spacing:-1px}.combo-box{text-align:right}.stars{font-size:23px;color:var(--green);letter-spacing:2px}.song-progress{height:2px;background:#352842;margin:0 20px}.song-progress i{height:100%;display:block;background:var(--accent);width:0;box-shadow:0 0 12px #bca0ff}#board{display:block;width:100%;height:calc(100% - 188px - env(safe-area-inset-bottom));touch-action:none}.game-bottom{height:36px;display:flex;justify-content:space-around;align-items:center;color:#726180;font-size:10px;padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:700px){.home{padding:0 22px}header{height:76px}.header-tag{font-size:7px;letter-spacing:1px}.brand{font-size:29px}.brand-icon{width:27px;height:31px;font-size:25px}.intro{padding:30px 0 28px}h1{font-size:48px;letter-spacing:-2.5px}.intro p{font-size:12px}.eyebrow{font-size:8px}.dashboard{grid-template-columns:1fr;gap:24px}.showcase{display:none}.dropzone{min-height:220px}.difficulty-label{margin-top:25px}.difficulties button{padding:13px 12px}.difficulties small{font-size:9px}.how{gap:13px;padding:22px 0;margin-top:22px}.how>div{display:block}.how>div>span{display:none}.how strong{font-size:10px;line-height:1.4}.how small{font-size:9px;line-height:1.5}.section-label{font-size:9px}.track-card{min-height:220px;padding:15px}.track-card .cover-art{width:70px;height:100px}.track-details h2{font-size:17px}.play-button{padding:18px 20px}.game-bottom{color:transparent}footer{font-size:7px}.local-badge{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Pulse 2: roomier controls and a cool, high-contrast performance surface. */
.focus-label{display:block;font-size:11px;color:#b6aac6;margin-top:21px}.focus-label select{margin-top:8px;display:block;width:100%;background:#24212d;color:#e8e0f4;border:1px solid #4c425d;border-radius:9px;padding:12px;font-size:12px}.focus-note{font-size:10px;color:#91869e;line-height:1.5;margin:8px 0}.mode-hint{margin:12px 0 18px}.showcase{min-height:650px}.preview-board{height:435px}.sample-note{height:48px;background:linear-gradient(#39b9f4,#075ab4 25%,#052649);border-top-color:#5bdfff;border-bottom:6px solid #020f25;box-shadow:0 6px 0 #020d20}.sample-note:after{content:'';position:absolute;top:50%;left:20%;right:20%;height:2px;background:#c5fbff;box-shadow:0 0 5px #6defff}.n3 span{position:relative;z-index:1}.n3:after{display:none}.hit-line{top:330px;background:#d2fbff}.perfect{top:365px}#game{background:#071525;max-width:570px;overscroll-behavior:none}#game .game-header{background:#0b1524}#game .score-row{background:#0b1524}.combo-box{position:relative;padding-right:35px}#multiplier{position:absolute;right:0;bottom:4px;color:#cfff9b;font-size:18px;font-weight:700}.stars{font-size:20px;letter-spacing:1px}.game-bottom{background:#122d4d}.score-row strong{font-variant-numeric:tabular-nums}#help{max-height:85dvh;overflow:auto}.instruction{gap:13px}.instruction b{font-size:21px}#board{contain:strict}#results{max-height:90dvh;overflow:auto}
@media(max-width:700px){.focus-label{font-size:11px}.focus-label select{font-size:13px}.mode-hint{line-height:1.5}.score-row{padding-left:18px;padding-right:18px}.score-row strong{font-size:24px}.combo-box{padding-right:29px}#multiplier{font-size:16px}.game-header{height:calc(76px + env(safe-area-inset-top));padding-top:calc(12px + env(safe-area-inset-top))}#board{height:calc(100% - 184px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.preview-bottom{gap:15px}}
.chart-summary{color:#a9bdd3;font-size:10px;line-height:1.6;margin:10px 0 0}.chart-summary:empty{display:none}

/* Song colors stay fixed across difficulty changes and replays. */
#game{--song-hue:190;background:hsl(var(--song-hue) 58% 13%)}#game .game-header,#game .score-row{background:hsl(var(--song-hue) 42% 10%)}#game .game-bottom{background:hsl(var(--song-hue) 62% 29%)}#game .song-progress{background:hsl(var(--song-hue) 35% 21%)}#game .song-progress i{background:hsl(var(--song-hue) 85% 78%);box-shadow:0 0 12px hsl(var(--song-hue) 80% 65% / .6)}
#settings{max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}#settings h3{font-size:18px;margin:0 0 16px}.setting-control{display:block;font-size:12px;color:#d9cfe5;margin:10px 0}.setting-control select{display:block;width:100%;background:#302a3d;color:#eee4fa;border:1px solid #584a6b;border-radius:9px;padding:12px;margin-top:8px;font:inherit}dialog .setting-help{font-size:11px;line-height:1.55;margin:9px 0 17px}.settings-divider{border-top:1px solid #4c3d60;margin:23px 0}.offset-buttons{display:flex;justify-content:space-between;gap:8px;margin:8px 0 15px}.offset-buttons button{border:1px solid #4c405d;border-radius:8px;background:#302a3d;padding:9px 14px;font-size:11px}.sync-track{position:relative;height:140px;background:linear-gradient(#0e1830,#182d4c);border:1px solid #4f6d8e;border-radius:12px;overflow:hidden;contain:strict}.sync-track i{position:absolute;top:99px;left:0;right:0;height:2px;background:#dbfaff;box-shadow:0 0 9px #83eaff}.sync-track small{position:absolute;right:10px;top:110px;font-size:8px;letter-spacing:1px;color:#a2c3d6}.sync-track #syncNote{position:absolute;top:0;left:30%;width:40%;height:36px;border-radius:6px;background:linear-gradient(#299ad8,#093b74);border:1px solid #6ce8fa;will-change:transform}.sync-track #syncNote:after{content:'';height:2px;position:absolute;top:17px;left:20%;right:20%;background:#e5ffff}.sync-track.beat{border-color:#d9ffa9;box-shadow:inset 0 0 25px #c2ffaf30}.sync-feedback{font-size:11px;color:#cbb8e0;text-align:center;min-height:22px;padding-top:8px}.sync-actions{display:flex;gap:8px}.sync-actions button{font-size:11px;margin-top:8px;padding:11px 6px}.sync-tap{margin-top:12px;padding:26px 12px;width:100%;border-radius:12px;background:#bca0ff;color:#251539;border:0;font-weight:700;touch-action:none}.sync-tap:disabled{background:#332d40;color:#92869e}#calibrationStatus{font-size:11px;min-height:36px}#settings .setting-label{margin-top:16px}
/* Performance arena: circular score, full-height straight lanes, luminous hit zone. */
#game{--dial-size:clamp(140px,22dvh,200px);--hud-height:calc(var(--dial-size) + 52px + env(safe-area-inset-top));max-width:500px;background:radial-gradient(ellipse at 50% 20%,hsl(var(--song-hue) 85% 72%),hsl(var(--song-hue) 72% 40%) 80%);isolation:isolate}#game .game-header{position:absolute;inset:calc(14px + env(safe-area-inset-top)) 15px auto;height:36px;z-index:3;background:none;padding:0;display:flex;justify-content:space-between}.mode-chip{color:#f1ffff;background:#052c3b55;border:1px solid #caffff55;border-radius:18px;font-size:8px;letter-spacing:1.5px;padding:8px 11px;align-self:center}#game .game-header .icon-btn{background:#052b3d66;border-color:#daffff88;width:32px;height:32px;font-size:17px}.arena-hud{height:var(--hud-height);padding-top:calc(15px + env(safe-area-inset-top));position:relative;display:flex;align-items:center;flex-direction:column;overflow:visible}.score-dial{position:relative;width:var(--dial-size);height:var(--dial-size);flex-shrink:0;border-radius:50%;background:#0c101a;border:7px solid #f4ffff;box-shadow:0 0 0 1px #b5ffff,0 0 35px #d3ffff60}.score-dial:before,.score-dial:after{content:'';position:absolute;border:1px solid #ebffff88;border-radius:50%;inset:-20px;pointer-events:none}.score-dial:after{inset:-35px;border-color:#e6ffff33}.score-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.dial-track{fill:none;stroke:#23323e;stroke-width:4}.dial-progress{fill:none;stroke:#b65cff;stroke-width:5;stroke-linecap:round;stroke-dasharray:578;stroke-dashoffset:578}.dial-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12% 0 8%}.dial-content small{color:#97e3e8;font-size:clamp(8px,1.2dvh,11px);letter-spacing:2px;margin-bottom:7px}.dial-content #score{font-family:'Space Grotesk',system-ui;font-size:clamp(23px,3.4dvh,33px);font-weight:500;letter-spacing:1px;line-height:1.1;font-variant-numeric:tabular-nums}.dial-content #multiplier{position:static;font-size:clamp(23px,3.4dvh,32px);font-weight:500;color:#c465ff;line-height:1.1;margin-top:7px}.streak{font-size:7px;letter-spacing:1.4px;color:#89a8b5;margin-top:7px}.streak b{font-weight:600;color:#d6efff}#game .stars{position:relative;z-index:2;color:#f4ffe5;font-size:20px;letter-spacing:4px;margin-top:13px;text-shadow:0 1px 6px #16434b}.arena-meta{height:27px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px;color:#eaffff;background:#062d3c26}.arena-meta strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.arena-meta #gameTime{font-size:10px;color:#e0ffff}#game .song-progress{height:0;margin:0;overflow:hidden}#game #board{height:calc(100% - var(--hud-height) - 53px - env(safe-area-inset-bottom));width:100%;display:block}#game .game-bottom{height:26px;padding:0 18px;background:hsl(var(--song-hue) 70% 34%);color:#dbffff88;font-size:9px;display:flex;justify-content:space-around;align-items:center}.preview-board{background:linear-gradient(#d7e1e322,#a5c5c555);border-left:1px solid #c1ffff66;border-right:1px solid #c1ffff66}.sample-note{background:linear-gradient(135deg,#1d3037,#080d12 65%,#17252d);border-color:#5b7d82;border-top:1px solid #78949c;box-shadow:0 4px 0 #071017}.sample-note:after{background:#e8ffff;box-shadow:0 0 5px 3px #4cfff7}.n3{color:#c8fffb}.n3 span{font-size:32px;line-height:1.3}.perfect{transform:none;color:#99ff78}.hit-line{box-shadow:0 0 0 20px #023c4c66,0 0 12px #a9ffff}
@media(max-width:700px){#game .game-bottom{color:transparent}.arena-meta strong{max-width:85%}.mode-chip{font-size:7px;padding:7px 9px}}
@media(max-height:620px){#game{--dial-size:120px}.dial-content small{margin-bottom:4px;font-size:7px}.dial-content #score{font-size:20px}.dial-content #multiplier{font-size:21px;margin-top:4px}.streak{font-size:6px;margin-top:3px}.arena-hud{padding-top:calc(10px + env(safe-area-inset-top))}#game .stars{margin-top:8px;font-size:17px}}

.audition-controls{margin:18px 0;padding:16px;border:1px solid #ffffff18;border-radius:14px;background:#ffffff04}.audition-controls label{display:flex;justify-content:space-between;font-size:12px;color:#c9c2db}.audition-controls input{width:100%;margin:12px 0;accent-color:#b396ff}.audition-controls .secondary{width:100%;margin:0 0 10px}.audition-controls small{display:block;color:#a19aaf;font-size:11px;line-height:1.6}

.focus-status{font-size:12px;line-height:1.6;color:#d2c2ef;margin:8px 0}.focus-status:empty{display:none}.stem-controls{border:1px solid #ffffff18;border-radius:12px;padding:12px;margin:10px 0 16px;font-size:12px;color:#bfb6cf}.stem-controls summary{cursor:pointer;color:#ded3f0}.stem-controls p{line-height:1.6}.stem-upload{display:inline-block;padding:11px 14px;border-radius:8px;background:#b396ff22;color:#e4d7ff;cursor:pointer}.stem-controls .text-button{font-size:12px;padding:8px}

/* Make the runway, not the score display, the main phone interaction area. */
#game{--dial-size:clamp(112px,17dvh,160px);--hud-height:calc(var(--dial-size) + 34px + env(safe-area-inset-top));display:flex;flex-direction:column}.arena-hud{flex:0 0 var(--hud-height);padding-top:calc(9px + env(safe-area-inset-top))}#game .stars{font-size:16px;margin-top:7px}.arena-meta{height:22px;flex:0 0 22px}#game #board{flex:1 1 0;height:auto;min-height:0}#game .game-bottom{flex:0 0 calc(12px + env(safe-area-inset-bottom));height:calc(12px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.score-dial:after{inset:-22px}.score-dial:before{inset:-12px}.dial-content #score{font-size:clamp(21px,3dvh,29px)}.dial-content #multiplier{font-size:clamp(21px,2.8dvh,27px)}

.difficulties{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulties button{min-height:104px}.difficulties button[data-mode="hard"] .bars,.difficulties button[data-mode="extreme"] .bars{letter-spacing:0;font-size:21px}.difficulties button[data-mode="hard"].selected{border-color:#ffb674;background:#3c2924}.difficulties button[data-mode="extreme"].selected{border-color:#ff799d;background:#3b2232}.result-bonus{text-align:center;font-size:12px;color:#e2c9ff;line-height:1.6;margin:4px 0 14px}.play-footnote{line-height:1.6}

.cover-art{position:relative;overflow:hidden}.cover-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:inherit}
/* Directional flicks can start anywhere in the game, including its header. */
#game{touch-action:none}

#game{background:radial-gradient(ellipse at 50% 20%,hsl(var(--song-hue) var(--song-saturation,70%) 65%),hsl(var(--song-hue) var(--song-saturation,70%) 30%) 80%)}
#game .dial-progress{stroke:hsl(var(--song-accent,var(--song-hue)) var(--song-saturation,70%) 72%)}
#game .dial-content #multiplier{color:hsl(var(--song-accent,var(--song-hue)) var(--song-saturation,70%) 80%)}
#game .game-bottom{background:hsl(var(--song-hue) var(--song-saturation,70%) 28%)}

/* The menu shares the playfield's song palette, dark tiles, and bright dashes. */
.home{--song-hue:190;--song-saturation:70%;--accent:hsl(var(--song-hue) var(--song-saturation) 80%);max-width:540px;min-height:100dvh;padding:0 22px;background:radial-gradient(ellipse at 50% 0%,hsl(var(--song-hue) var(--song-saturation) 30%),#111820 65%);border-inline:1px solid #ffffff18}
.home header{height:76px;border-color:#ffffff22}.home .intro{padding:24px 0 20px}.home h1{font-size:30px;letter-spacing:-1px;margin:8px 0}.home .intro p{font-size:12px;color:#c6d0d4}.home .dashboard{display:block}.home .setup{width:100%}.home .section-label{color:#c5d5d8}.home .local-badge{color:#bdd8d4}
.home .track-card{position:relative;display:flex;flex-direction:column;padding:20px;gap:16px;background:linear-gradient(145deg,#263339ee,#090e14f5);border:1px solid #ffffff40;border-radius:14px;box-shadow:0 7px 0 #05090d,0 18px 38px #0004}
.home .track-card .cover-art{width:min(100%,260px);height:auto;aspect-ratio:1/1;border-radius:8px;box-shadow:0 4px 18px #0007}.home .cover-art img{object-fit:contain}.home .track-details{text-align:center;width:100%}.home .track-details h2{font-size:22px;margin:6px 0}.home .track-details p{margin:0;color:#bed0d4}.home #changeTrack{position:absolute;right:9px;top:9px;background:#07121ddd;border-color:#d5ffff66}
.home .difficulties{grid-template-columns:repeat(2,1fr)}.home .difficulties button{background:linear-gradient(145deg,#263339,#090e14);box-shadow:0 4px 0 #05090d;border-color:#ffffff26}.home .difficulties button.selected{border-color:var(--accent);box-shadow:0 4px 0 #05090d,inset 0 -3px var(--accent),0 0 16px #ffffff0b}.home .difficulties small,.home .mode-hint,.home .focus-note{color:#b9c9ce}
.home .play-button{background:linear-gradient(145deg,#263339,#090e14);border:1px solid var(--accent);color:#efffff;box-shadow:0 5px 0 #03090c,inset 0 -4px var(--accent);min-height:60px}.home .play-button:disabled{opacity:.45}.home .dropzone{background:linear-gradient(145deg,#263339,#090e14);border-color:#c9ffff70}.home .audition-controls{border-color:#ffffff25}.home #menuAudio{font-size:11px;color:var(--accent);padding:10px}.home footer{color:#b6c7cc}.home .play-footnote{color:#bed0d4}
.start-gate{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(transparent 15%,#0002 60%,#080d18b0)}.start-tile{pointer-events:auto;position:absolute;top:var(--gate-y);height:var(--gate-height);width:calc((100% - 36px)/3 - 5px);background:linear-gradient(140deg,#26343c,#080d13 55%,#18252c);border:2px solid #7b9ba6;border-radius:9px;box-shadow:0 7px 0 #02080c;display:grid;place-items:center;touch-action:manipulation}.start-tile.left{left:20.5px}.start-tile.right{right:20.5px}.start-tile i{width:65%;height:5px;background:#f0ffff;box-shadow:0 0 12px #9fffff}.start-tile.armed{border-color:#baffcf;background:#17483c}.start-tile.armed i{background:#baffcf;box-shadow:0 0 16px #67ffa0}.start-gate p{position:absolute;top:calc(var(--gate-y) + var(--gate-height) + 24px);left:0;width:100%;text-align:center;letter-spacing:2px;color:#f0ffff;font-size:13px}.gate-back{pointer-events:auto;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:none;border:0;color:#c6d6df;font-size:12px}

.home #menuAudio{width:auto;margin-left:auto;margin-right:8px}.home #changeTrack{width:auto;height:32px;border-radius:18px;font-size:11px;padding:0 10px}.home .play-button{margin-top:22px}.song-options{border-top:1px solid #ffffff25;margin:24px 0;padding-top:18px}.song-options>summary{cursor:pointer;color:#c6d6df;font-size:12px;letter-spacing:.5px}.home .focus-label select,.home .secondary{background:#18262e;border-color:#ffffff30;color:#e7f5f6}.home header{height:calc(76px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}.home footer{padding-bottom:calc(25px + env(safe-area-inset-bottom))}

.start-tile{touch-action:none}

#editor{max-width:550px;max-height:92dvh;overflow:auto}#editorTrack{height:390px;position:relative;background:repeating-linear-gradient(90deg,#1a333c 0,#1a333c 32.8%,#8bafb5 33%,#1a333c 33.33%);border:1px solid #87aeb9;border-radius:8px;margin-top:12px}.edit-note{position:absolute;width:31%;height:30px;border:1px solid #9ef7ff;background:#08141d;color:#e5ffff;border-radius:5px;font-size:10px}.edit-note.selected{background:#2c675a;border:2px solid #b8ff91}.editor-fields,.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.editor-fields{margin-top:16px}.editor-fields label{font-size:11px;color:#c3cdd6}.editor-fields input,.editor-fields select,.focus-label input[type=number]{width:100%;padding:10px;background:#13242e;color:#fff;border:1px solid #657883;border-radius:6px;margin-top:6px}#editorPosition{width:100%}#editorStatus,#libraryStatus{font-size:12px;color:#c3eddb}.saved-song{display:flex;gap:10px;align-items:center;border-top:1px solid #ffffff24;padding:10px 0}.saved-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;border:0;background:#182a32;border-radius:8px;padding:10px}.saved-open img{width:48px;height:48px;object-fit:contain}.saved-open span{overflow-wrap:anywhere;font-size:12px}.saved-song .text-button{width:auto;font-size:11px;padding:8px}.miss-link{border:1px solid #69516e;background:#33263b;border-radius:8px;padding:8px;margin:3px;color:#ffd7dd;font-size:11px}.results-detail{border-top:1px solid #58475d;margin-top:20px}.results-detail h3{font-size:14px}#savedSongs{max-height:400px;overflow:auto}

.mastery-hud{display:flex;justify-content:space-between;gap:8px;padding:5px 18px;background:#07263255;color:#e8ffff;font-size:9px;flex:0 0 25px;font-variant-numeric:tabular-nums}.mastery-hud span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-medal{text-align:center!important;font-size:19px!important;font-weight:800;letter-spacing:1px;color:#8ff5ff!important;text-shadow:0 0 18px #85e9ff66}#editor .setting-help{font-size:11px}

.artwork-status,.artwork-source{font-size:11px;line-height:1.5;color:#c5dce0}.artwork-status:empty{display:none}.artwork-source{display:block;margin:8px 0;text-underline-offset:3px}
/* Deluxe is a separate chart edition with an artwork-tinted night palette. */
.edition-picker{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:#090e16;border:1px solid #ffffff26;border-radius:14px;margin-bottom:9px}.edition-picker button{min-height:45px;border:1px solid transparent;border-radius:10px;background:transparent;color:#a8b2c6;font-size:13px;font-weight:700;letter-spacing:.4px}.edition-picker button.selected{background:#273242;color:#f1f7ff;border-color:#b7cbe766}.edition-picker #deluxeEdition.selected{background:linear-gradient(125deg,#412b5d,#231b36);border-color:#ccabff;color:#f1dfff;box-shadow:inset 0 0 14px #c69fff15}.edition-picker #deluxeEdition span{margin-right:5px;color:#d3adff}.edition-hint{font-size:11px;color:#b0b9c9;line-height:1.6;min-height:35px;margin:0 2px 14px}.deluxe-guide{font-size:11px;line-height:1.65;background:#171320;border:1px solid #bb91ef40;border-radius:11px;padding:12px 14px;margin-bottom:14px;color:#c0b2d2}.deluxe-guide summary{cursor:pointer;font-weight:700;color:#e8d2ff}.deluxe-guide p{margin:10px 0}.deluxe-guide b{color:#f1e4ff}
.home.deluxe{--accent:#d3b1ff;background:radial-gradient(ellipse at 50% 0%,hsl(var(--song-hue) var(--song-saturation) 13%),#0b0a12 65%);border-color:#c49aff30}.home.deluxe .track-card{background:linear-gradient(145deg,#221a2c,#0c1017);border-color:#b48ad055}.home.deluxe .difficulties button{background:#13121c;border-color:#67527955}.home.deluxe .difficulties button.selected{background:#2a1e3b;border-color:#c69cff}.home.deluxe .play-button:not(:disabled){background:linear-gradient(110deg,#e2c7ff,#af88dd);color:#21152e}.home.deluxe .song-options{border-color:#b68bd73b}
#game.deluxe{background:radial-gradient(ellipse at 50% 15%,hsl(var(--song-hue) var(--song-saturation,70%) 18%),#09080f 80%)}#game.deluxe .mode-chip{background:#1d142c;color:#e3c6ff;border-color:#c99bff88;box-shadow:0 0 18px #b26aff20}#game.deluxe .score-dial{background:#100c19;border-color:#dcc2ff;box-shadow:0 0 0 1px #7b4baf,0 0 30px #a86cff38}#game.deluxe .score-dial:before{border-color:#d2a3ff55}#game.deluxe .score-dial:after{border-color:#b080e033}#game.deluxe .dial-content small{color:#d6b7ed}#game.deluxe .dial-content #multiplier{color:#d5a6ff}#game.deluxe .dial-progress{stroke:#d5a6ff}#game.deluxe .mastery-hud,#game.deluxe .arena-meta{background:#0c0913aa;color:#d8c5ed}#game.deluxe .game-bottom{background:#09080f}#game.deluxe .start-tile{border-color:#bba1d5;background:linear-gradient(140deg,#2d233c,#100c18 55%,#22192d)}#game.deluxe .start-tile i{background:#f2e5ff;box-shadow:0 0 12px #bc8eff}

/* Video fills the portrait arena, retaining height and cropping the sides. */
#musicVideo,.video-shade{display:none;pointer-events:none}
#game.video-mode{background:#080910;overflow:hidden}
#game.video-mode #musicVideo{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
#game.video-mode .video-shade{display:block;position:absolute;inset:0;background:linear-gradient(#05071188,transparent 32%,#05071122 65%,#05071166);z-index:-1}
#game.video-mode{--dial-size:82px;--hud-height:calc(100px + env(safe-area-inset-top))}
#game.video-mode .score-dial{border-width:2px;background:#090d18aa;box-shadow:none}
#game.video-mode .score-dial:before,#game.video-mode .score-dial:after{display:none}
#game.video-mode .dial-content{padding:4px 0}
#game.video-mode .dial-content small{font-size:7px;margin-bottom:3px;letter-spacing:1px}
#game.video-mode .dial-content #score{font-size:19px;letter-spacing:0}
#game.video-mode .dial-content #multiplier{font-size:16px;margin-top:2px}
#game.video-mode .streak{font-size:6px;margin-top:3px;letter-spacing:0}
#game.video-mode .stars{position:absolute;right:18px;bottom:8px;font-size:12px;letter-spacing:1px;margin:0}
#game.video-mode .mastery-hud{flex-basis:20px;padding:3px 18px;background:#080b1433;text-shadow:0 1px 3px #000}
#game.video-mode .arena-meta,#game.video-mode .game-bottom{background:#080b1433;text-shadow:0 1px 3px #000}
#game.video-mode #board{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

#game.video-mode #musicVideo{transform:translateZ(0);backface-visibility:hidden}

/* Video-driven accents; judgment messages are drawn separately and retain their colors. */
#game.video-mode .score-dial{border-color:var(--video-ink,#edffff)}
#game.video-mode .dial-progress{stroke:var(--video-accent,#bdfaff)}
#game.video-mode .dial-track{stroke:var(--video-dark,#15242c)}
#game.video-mode .dial-content small,#game.video-mode .dial-content #multiplier,#game.video-mode .streak,#game.video-mode .streak b,#game.video-mode .stars,#game.video-mode .arena-meta,#game.video-mode .arena-meta #gameTime,#game.video-mode .mastery-hud,#game.video-mode .game-bottom{color:var(--video-ink,#edffff)}
#game.video-mode .mode-chip,#game.video-mode .game-header .icon-btn{color:var(--video-ink,#edffff);border-color:var(--video-accent,#bdfaff);background:var(--video-dark,#15242c)}
#game.video-mode .start-tile{border-color:var(--video-accent,#bdfaff)}
#game.video-mode .start-tile i{background:var(--video-ink,#edffff);box-shadow:0 0 12px var(--video-accent,#bdfaff)}
#game.video-mode .dial-content #score{color:var(--video-ink,#edffff)}

/* One consistent, touch-friendly navigation row. */
.home .home-header{gap:16px;min-height:calc(84px + env(safe-area-inset-top));height:auto;padding-bottom:14px;padding-top:calc(14px + env(safe-area-inset-top))}
.top-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.home .top-controls .nav-control,.home .top-controls #menuAudio{position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;margin:0;padding:0;font-size:0;line-height:0;border:1px solid #a9c8d038;border-radius:50%;background:#0d182780;color:#c7d8de;text-decoration:none;transition:background .18s,border-color .18s,color .18s,box-shadow .18s}
.top-controls .nav-control::before{content:'';position:absolute;inset:0;margin:auto;display:block;width:21px;height:21px;background:currentColor;mask:var(--nav-icon) center/contain no-repeat;-webkit-mask:var(--nav-icon) center/contain no-repeat}
.home .top-controls .nav-control:hover{background:#ffffff12;color:#fff;border-color:#c9e5ea80}
.home .top-controls .nav-control[data-active="true"]{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#0d1827);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 12%,transparent)}
.top-controls .nav-control[data-active="true"]::after{content:'';position:absolute;right:2px;bottom:2px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #101b23}
@media(max-width:420px){.home .home-header{gap:8px}.home .home-header .brand{font-size:26px;gap:6px;letter-spacing:-1.5px}.home .home-header .brand-icon{width:25px;height:28px;font-size:23px}.home .home-header .brand-dot{margin-left:-6px}.top-controls{gap:5px}}
@media(max-width:350px){.home .home-header{flex-wrap:wrap}.home .home-header .top-controls{width:100%;justify-content:flex-end}}

.nav-preview{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l11-2v13M9%208l11-2%22%2F%3E%3Cellipse%20cx%3D%226%22%20cy%3D%2218%22%20rx%3D%223%22%20ry%3D%223%22%2F%3E%3Cellipse%20cx%3D%2217%22%20cy%3D%2216%22%20rx%3D%223%22%20ry%3D%223%22%2F%3E%3C%2Fsvg%3E")}

.nav-tv{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2021h8m-4-4v4%22%2F%3E%3C%2Fsvg%3E")}

.nav-players{--nav-icon:url("/multiplayer-icon.svg")}

.nav-settings{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203-.5%202-2%201-2-.5-2%203%201.5%201.5v3L2.5%2015l2%203%202-.5%202%201L9%2021h6l.5-2.5%202-1%202%20.5%202-3-1.5-2v-3l1.5-1.5-2-3-2%20.5-2-1L15%203Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}

#game .game-header{justify-content:flex-end}

/* Audio visualization shares the transparent playfield, with no media element. */
#musicVisuals{display:none;pointer-events:none;position:absolute;inset:0;width:100%;height:100%;z-index:-2}
#game.visualizer-mode #musicVisuals:not([hidden]){display:block}
#game.visualizer-mode #musicVideo{display:none}
@media(prefers-reduced-motion:reduce){#musicVisualHelp:after{content:' For less motion, leave visuals off.'}}