:root{color-scheme:dark;--ink:#070b1b;--cyan:#00eaff;--purple:#b95cff;--text:#eaf6ff;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--ink);color:var(--text)}body{height:100svh;height:100dvh;display:flex;justify-content:center;align-items:center;gap:6vw;overflow:hidden;background:radial-gradient(ellipse at 22% 10%,#22163d 0,transparent 50%),radial-gradient(ellipse at 90% 85%,#062b3d 0,transparent 50%),#050914}button,input{-webkit-tap-highlight-color:transparent;font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #e8fcff;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.game{position:relative;isolation:isolate;width:min(100vw,480px);height:min(100dvh,920px);height:min(100svh,920px);height:min(100dvh,920px);display:flex;flex-direction:column;overflow:hidden;background:#080e22;box-shadow:0 0 90px #0ac3ff18;border-inline:1px solid #2a3350}.topbar{height:52px;flex-shrink:0;padding:8px 14px;display:flex;justify-content:space-between;align-items:center;background:#080e22e8;border-bottom:1px solid #30415f;z-index:2}.brand{font-size:10px;font-weight:900;letter-spacing:.16em;line-height:1.08}.brand span{display:block;color:var(--cyan);font-size:16px;letter-spacing:.02em;font-style:italic}.top-right{display:flex;gap:12px;align-items:center}.bpm{font-size:10px;color:#b4c9df;letter-spacing:.1em}.icon-button{border:1px solid #4b6587;background:#101f36;width:34px;height:34px;border-radius:9px;font-size:20px}.playfield{position:relative;flex:1;min-height:0;overflow:hidden}.playfield canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;text-shadow:0 2px 8px #000}.hud small{display:block;font-size:8px;letter-spacing:.1em;color:#a4bcdb}.score strong{font-variant-numeric:tabular-nums;font-style:italic;font-size:19px}.combo{text-align:center}.combo small{color:#93f6ff;font-style:italic}.combo strong{display:block;font-size:34px;line-height:1;font-weight:950;font-style:italic;color:white;text-shadow:0 0 17px #b95cff}.speed{text-align:right}.speed strong{font-size:29px;font-style:italic;line-height:1}.speed small{font-size:8px}.speed small span{display:block;margin-top:3px;color:#d2e5ed}.route{position:absolute;left:14px;right:14px;top:72px;display:flex;gap:8px;align-items:center;font-size:8px;letter-spacing:.08em;color:#bfd3e9;pointer-events:none}.route>div{height:3px;flex:1;background:#223149}.route i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.route b{font-variant-numeric:tabular-nums;font-weight:500;min-width:30px;text-align:right}.event-label{position:absolute;top:104px;left:12px;right:12px;text-align:center;font-size:11px;font-weight:650;text-shadow:0 2px 6px #000;color:#effaff;pointer-events:none}.judgement{position:absolute;top:63%;left:0;right:0;font-size:24px;font-style:italic;letter-spacing:.05em;text-align:center;font-weight:950;text-shadow:0 0 16px var(--cyan);opacity:0;transition:opacity .15s;pointer-events:none}.judgement.good{color:#8dceff}.judgement.miss{color:#ff8ba5;font-size:18px;text-shadow:none}.lane-labels{position:absolute;bottom:2px;left:3%;right:3%;display:grid;grid-template-columns:repeat(4,1fr);font-size:7px;letter-spacing:.15em;text-align:center;opacity:.6;pointer-events:none}.countdown{position:absolute;top:36%;left:0;right:0;text-align:center;font-size:80px;font-weight:900;font-style:italic;text-shadow:0 0 30px #00eaff;pointer-events:none}.controls{flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 8px max(8px,env(safe-area-inset-bottom));background:#080e22;border-top:1px solid #314060;z-index:4;touch-action:none}.controls button{position:relative;min-width:0;min-height:64px;border:0;padding:0;background:none;touch-action:none;user-select:none;-webkit-user-select:none}.controls img{height:clamp(44px,8.5svh,72px);max-width:100%;display:block;margin:0 auto;pointer-events:none}.controls span{display:block;font-size:9px;line-height:1.5;white-space:nowrap;color:#b9cee6;pointer-events:none}.controls kbd{display:inline-block;margin-left:4px;font-size:8px;opacity:.5}.controls button.pressed{filter:brightness(1.8);transform:translateY(1px)}.overlay{position:absolute;inset:52px 0 0;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(180deg,#080d23a8,#050914f5 70%);backdrop-filter:blur(5px);z-index:3;overflow-y:auto;scrollbar-width:thin}.panel{width:100%;max-width:370px;text-align:center;padding:12px 6px}.panel h1{font-size:clamp(40px,8svh,62px);line-height:.95;letter-spacing:-.045em;font-style:italic;font-weight:950;margin:12px 0}.panel h1 span{font-size:.79em;color:var(--cyan);text-shadow:0 0 32px #00eaff44}.eyebrow{font-size:9px;letter-spacing:.2em;color:#a88ce0;margin:0 0 10px}.tagline{font-size:12px;font-weight:650;color:#e8e8fb;margin:15px 0 24px}.song{display:flex;align-items:center;gap:14px;text-align:left;border-block:1px solid #35405c;padding:14px 10px;margin-bottom:16px;background:#1b26452b}.song-icon{font-size:25px;color:var(--cyan)}.song strong{display:block;font-size:14px;letter-spacing:.1em;font-style:italic}.song small{display:block;font-size:10px;color:#a9bdd9;margin-top:5px}.howto{font-size:11px;line-height:1.8;color:#adc1d7;margin:14px 0 20px}.primary,.secondary{display:block;width:100%;min-height:48px;border-radius:9px;font-size:13px;font-weight:750;margin:10px 0;padding:12px 14px}.primary{color:#081326;border:1px solid #98f8ff;background:linear-gradient(110deg,#8b75ff,#52eeff);box-shadow:0 5px 28px #00ddff16}.primary span{margin-left:10px}.secondary{border:1px solid #3b5573;background:#172640}.loading{font-size:10px;line-height:1.5;color:#94a9c4;margin:9px 0;min-height:15px}.menu-links{display:flex;justify-content:space-between;gap:6px;margin-top:13px}.menu-links button,.text-button{border:0;background:none;color:#b8cdeb;font-size:11px;padding:10px 2px;text-decoration:underline;text-underline-offset:4px}.best{font-size:10px;letter-spacing:.08em;color:#9cc3da;margin:18px 0 0}.panel h2{font-size:27px;margin:10px 0 20px}.panel>p:not(.eyebrow):not(.tagline):not(.howto):not(.loading):not(.best):not(.hint){font-size:12px;line-height:1.8}.result-score{display:block;font-size:48px;font-style:italic;color:var(--cyan);font-variant-numeric:tabular-nums;margin:8px 0 18px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:9px;letter-spacing:.08em;color:#a6bed7}.result-grid strong{display:block;font-size:25px;color:white;letter-spacing:0;margin-top:4px}.grades{font-size:11px;margin:18px 0}.grades>div{display:flex;justify-content:space-between;padding:7px 3px;border-bottom:1px solid #22314a}.grades dd{margin:0;font-variant-numeric:tabular-nums}.setting-row{display:block;text-align:left;font-size:12px;margin:16px 0;color:#d5e6fa}.setting-row output{float:right;color:var(--cyan);font-variant-numeric:tabular-nums}.setting-row input{display:block;width:100%;margin-top:10px;accent-color:var(--cyan)}.hint{font-size:10px;line-height:1.7;color:#97adcb}.checkbox{display:block;font-size:12px;text-align:left;margin:18px 0}.checkbox input{accent-color:var(--cyan);margin-right:7px}.calibration-pad{display:block;width:130px;height:130px;border:2px solid var(--cyan);border-radius:50%;background:#0b2540;color:var(--cyan);font-size:25px;font-weight:800;margin:24px auto;touch-action:manipulation}.practice-response{color:var(--cyan);min-height:44px}.desktop-note{max-width:300px;display:none}.desktop-note>span{font-size:10px;letter-spacing:.25em;color:#8d86c7}.desktop-note h2{font-size:35px;line-height:1.5;letter-spacing:-.04em}.desktop-note p{font-size:13px;color:#a9bfd7;line-height:2}.desktop-note small{display:block;color:#5edbdf;margin-top:35px;font-size:11px;letter-spacing:.04em}@media(min-width:950px){.desktop-note{display:block}}@media(max-height:680px){.topbar{height:42px}.overlay{inset:42px 0 0;padding:10px}.panel{padding:5px}.panel h1{font-size:40px;margin:8px 0}.tagline{margin:12px 0}.song{padding:9px;margin-bottom:10px}.howto{margin:10px 0;font-size:10px}.primary,.secondary{min-height:42px;margin:7px 0}.menu-links{margin-top:8px}.best{margin-top:10px}.panel h2{font-size:23px;margin:8px 0 12px}.setting-row{margin:11px 0}.controls img{height:44px}.controls button{min-height:60px}.controls{padding-top:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}.result-score{font-size:37px;margin-bottom:10px}.grades{margin:10px 0}.grades>div{padding:5px 2px}.hud{top:10px}.route{top:62px}.event-label{top:86px}.combo strong{font-size:29px}.speed strong{font-size:25px}}@media(max-height:480px){.overlay{align-items:flex-start}.panel h1{font-size:30px}.tagline,.best,.howto{display:none}.song{margin-block:10px}.controls img{height:34px}.controls button{min-height:54px}.event-label{top:75px;font-size:9px}.hud strong{font-size:20px}.route{top:49px}}
/* Direction pad: acceleration above braking, with indicators on either side. */
.controls{grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:repeat(2,56px);grid-template-areas:"left accel right" "left brake right";gap:4px 8px}
.controls button{min-height:56px;align-self:center}
.controls [data-action="left"]{grid-area:left}
.controls [data-action="right"]{grid-area:right}
.controls [data-action="accel"]{grid-area:accel}
.controls [data-action="brake"]{grid-area:brake}
.controls img{height:38px}
.controls [data-action="left"] img,.controls [data-action="right"] img{height:64px}
.controls kbd{font-family:inherit;opacity:.8}
@media(max-height:680px){.controls{grid-template-rows:repeat(2,50px)}.controls button{min-height:50px}.controls img{height:32px}.controls [data-action="left"] img,.controls [data-action="right"] img{height:44px}}
@media(max-height:480px){.controls{grid-template-rows:repeat(2,44px)}.controls button{min-height:44px}.controls img{height:26px}.controls [data-action="left"] img,.controls [data-action="right"] img{height:34px}}

.controls button{transition:transform 90ms ease,filter 90ms ease,box-shadow 90ms ease;will-change:transform}
.controls button.pressed{transform:translateY(4px) scale(.92);filter:brightness(1.8);box-shadow:0 0 24px #00eaff99,inset 0 0 18px #ffffff44}
.game[data-state="armed"] .countdown{font-size:clamp(17px,5vw,25px);letter-spacing:.02em;white-space:nowrap}
.game[data-state="armed"] .controls [data-action="accel"]{box-shadow:0 0 28px #00eaff99;border-color:#00eaff}
@media(prefers-reduced-motion:reduce){.controls button{transition:none}}

.controls [data-action="brake"]{--action-color:#ff465d;color:var(--action-color)}
.controls [data-action="left"],.controls [data-action="right"]{--action-color:#ffad32;color:var(--action-color)}
.controls [data-action="accel"]{--action-color:#00eaff;color:var(--action-color)}
.controls button.pressed{box-shadow:0 0 24px var(--action-color),inset 0 0 18px #ffffff44}

/* The touch targets and falling notes share canvas coordinates from laneLayout. */
.playfield .controls{position:absolute;inset:0;display:block;padding:0;border:0;background:none;z-index:2;pointer-events:none}
.playfield .controls button{position:absolute;min-height:0;min-width:0;padding:0;transform:translate(-50%,-50%);border:1px solid var(--action-color);border-radius:9px;background:transparent;pointer-events:auto;box-shadow:inset 0 0 14px color-mix(in srgb,var(--action-color) 18%,transparent);transition:filter 90ms,box-shadow 90ms;will-change:filter}
.playfield .controls button.pressed{transform:translate(-50%,-50%);filter:brightness(1.8);box-shadow:0 0 24px var(--action-color)}
.playfield .controls button::before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);background:#f3ffff;box-shadow:0 0 7px var(--action-color);pointer-events:none}
.playfield .controls img{display:none}
.playfield .controls span{position:absolute;top:calc(50% + 6px);left:0;width:100%;text-align:center;color:#effaff;font-size:10px;font-weight:750;line-height:1.1;text-shadow:0 1px 3px #000}
.playfield .controls kbd{font-size:8px;margin-left:3px}
.timing-hint{position:absolute;top:65%;left:0;right:0;margin:0;text-align:center;font-size:10px;letter-spacing:.04em;color:#c2dcf2;pointer-events:none}
.game[data-state="practice"] .controls{z-index:4}
.game[data-state="practice"] .overlay{align-items:flex-start;padding-top:7%}
.game[data-state="armed"] .controls [data-action="accel"]{box-shadow:0 0 28px #00eaff99}
@media(pointer:coarse){.playfield .controls kbd{display:none}}
@media(max-width:350px){.playfield .controls kbd{display:none}}

/* Score is the central focal point; combo occupies the former score position. */
.hud .combo{order:0;text-align:left;flex:1}
.hud .score{order:1;text-align:center;flex:1.8}
.hud .speed{order:2;flex:1}
.hud .score small{font-size:10px;letter-spacing:.18em;color:#b9faff}
.hud .score strong{display:block;font-size:clamp(30px,8vw,40px);font-weight:950;line-height:1.04;color:#ffffff;text-shadow:0 0 18px #00eaff88,0 3px 0 #193256}
.hud .combo strong{font-size:25px;margin-top:2px;color:#b4d5ed;text-shadow:none}
.hud .combo small{font-size:7px;letter-spacing:.02em}
.game[data-holding-accel="true"] .controls [data-action="accel"]{box-shadow:0 0 24px #00eaff,inset 0 0 16px #00eaff66}
.playfield .controls [data-action="accel"] kbd{display:none}
@media(max-height:480px){.hud .score strong{font-size:26px}.hud .score small{font-size:8px}.hud .combo strong{font-size:20px}}

.combo-celebration{position:absolute;top:29%;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font-size:clamp(24px,7vw,34px);font-weight:950;font-style:italic;letter-spacing:.03em;color:#dcffff;text-shadow:0 0 12px #00eaff,0 3px 0 #123e59;line-height:1.2}
.combo-celebration[data-level="major"]{color:#fff5c6;font-size:clamp(29px,8vw,40px);text-shadow:0 0 16px #ffb72b,0 3px 0 #6c3b17}
@media(max-height:480px){.combo-celebration{top:32%;font-size:24px}.combo-celebration[data-level="major"]{font-size:28px}}

.game[data-holding-brake="true"] .controls [data-action="brake"]{box-shadow:0 0 24px #ff465d,inset 0 0 16px #ff465d66}

.result-sharing{margin:12px 0;padding:12px;border:1px solid #305872;border-radius:12px;background:linear-gradient(120deg,#07283b,#211337)}
.result-sharing>p{font-size:11px;margin:0 0 8px;color:#b6f7ff}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-actions a,.share-actions button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:1px solid #53708d;border-radius:8px;background:#101e34;color:#fff;text-decoration:none;font-size:12px;font-weight:700;cursor:pointer}
.share-actions a:focus-visible{outline:3px solid #e8fcff;outline-offset:3px}
.share-actions a:hover,.share-actions button:hover{background:#203856;border-color:#00eaff}
#share-line{border-color:#36c879}#share-x{border-color:#b2b8d3}
.result-sharing #share-status{margin:7px 0 0;font-size:10px;line-height:1.5}
#share-status:empty{display:none}#share-fallback{width:100%;margin-top:8px;font:inherit;font-size:11px}

/* Keep original game branding and tempo; fit the logo in the central gap. */
.topbar{display:grid;grid-template-columns:92px minmax(0,1fr) 92px;gap:8px}
.company-logo{grid-column:2;display:block;width:min(100%,180px);height:auto;margin:auto}
.topbar .top-right{grid-column:3;justify-content:flex-end}
.topbar .brand{grid-column:1}
.topbar .bpm{display:inline;white-space:nowrap}

.save-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.save-row #save-status{text-align:left;flex:1}
#result-attempt{flex:none;font-size:10px;font-weight:400;color:#97adcb;font-variant-numeric:tabular-nums}

.version-info{font-size:10px;color:#97adcb;text-align:center;margin:8px 0 0;letter-spacing:.06em}

.result-footer{margin-top:18px;padding-bottom:max(8px,env(safe-area-inset-bottom));text-align:center}
.result-footer .play-safety{margin:0 0 10px;font-size:clamp(10px,2.8vw,12px);line-height:1.7;color:#b4c9df}
.result-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:22px;row-gap:2px}
.result-links a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;font-size:12px;color:#b7ddeb;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.result-links a:hover{color:#00eaff}.result-links a:focus-visible{outline:2px solid #00eaff;outline-offset:4px;border-radius:2px}

.share-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.share-actions a,.share-actions button{min-width:0;line-height:1.5;text-align:center;overflow-wrap:anywhere}