:root{--bg: #141a26;--bg-deep: #0d1119;--panel: #1b2231;--panel-edge: #2a3347;--ink: #f2ede2;--ink-dim: #b8b2a4;--ink-faint: #7d7869;--accent: #e8a13d;--gold: #f2b632;--good: #7fc98f;--bad: #e07a6a;--staff: #c9c2b2;--font-display: "Fraunces", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", Georgia, serif;--font-body: "Nunito", "Yu Gothic UI", "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;min-height:-webkit-fill-available;height:100svh;height:100dvh;margin:0}body{background:var(--bg-deep);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit;cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app{height:100%;position:relative}.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:screen-in .42s cubic-bezier(.22,1,.36,1) both}@keyframes screen-in{0%{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}.screen-head{display:flex;align-items:center;gap:14px;padding:22px 28px 10px}.screen-title{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:.02em;margin:0;flex:1;text-align:center}.screen-head-spacer{width:40px}.back-btn,.ghost-btn{background:transparent;border:1px solid transparent;border-radius:10px;color:var(--ink-dim);font-size:15px;font-weight:700;padding:8px 14px;transition:color .16s ease,background .16s ease,border-color .16s ease,transform .12s ease}.back-btn{font-size:20px;line-height:1;width:40px;height:40px;padding:0}.back-btn:hover,.ghost-btn:hover{color:var(--ink);background:#ffffff0d;border-color:var(--panel-edge)}.back-btn:active,.ghost-btn:active{transform:scale(.96)}.primary-btn{background:linear-gradient(180deg,#f0b04f,#dd9531);border:1px solid rgba(0,0,0,.25);border-radius:12px;color:#241a08;font-size:16px;font-weight:800;padding:12px 26px;box-shadow:0 6px 18px #e8a13d38,inset 0 1px #ffffff59;transition:transform .12s ease,box-shadow .16s ease,filter .16s ease}.primary-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.primary-btn:active{transform:translateY(1px) scale(.98)}.home-screen{align-items:center;justify-content:center;overflow:hidden}.home-sky{position:absolute;inset:0;pointer-events:none}.home-hill{position:absolute;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#2e3a528c,#1b223126)}.home-hill-1{width:120vw;height:44vh;left:-34vw;bottom:-18vh}.home-hill-2{width:150vw;height:52vh;left:40vw;bottom:-26vh;opacity:.75}.home-hill-3{width:90vw;height:30vh;left:8vw;bottom:-12vh;opacity:.5}.home-glow{position:absolute;left:50%;top:30%;width:60vw;height:60vh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(232,161,61,.12),transparent 72%)}.home-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 26px 10px}.home-brand{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:800;letter-spacing:.04em;font-size:14px}.home-corner{display:flex;gap:8px}.home-main{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px;z-index:1}.home-title{font-family:var(--font-display);font-size:clamp(44px,7vw,74px);font-weight:600;letter-spacing:.01em;margin:0;line-height:1.2;background:linear-gradient(180deg,#fbf6ea 30%,#d9cfba 95%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 20px 50px rgba(0,0,0,.35)}.home-greet{margin:0 0 26px;color:var(--ink-dim);font-size:17px;font-weight:600}.big-play{display:flex;align-items:center;gap:16px;background:linear-gradient(180deg,#f5bb5c,#dd9531);border:1px solid rgba(0,0,0,.28);border-radius:18px;padding:18px 34px;color:#241a08;box-shadow:0 14px 38px #e8a13d42,inset 0 1px #ffffff73;transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .16s ease}.big-play:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.05);box-shadow:0 20px 46px #e8a13d57,inset 0 1px #ffffff73}.big-play:active{transform:translateY(1px) scale(.985)}.big-play-arrow{font-size:20px;opacity:.85}.big-play-text{display:flex;flex-direction:column;align-items:flex-start;font-size:22px;font-weight:800;line-height:1.1}.big-play-text small{font-size:13px;font-weight:700;opacity:.75;letter-spacing:.04em}.home-path-btn{margin-top:8px;font-size:15px}.home-meta{margin-top:26px}.home-stars{color:var(--gold);font-size:18px;letter-spacing:.3em}.home-stars i{display:block;font-style:normal;font-size:13px;letter-spacing:.08em;color:var(--ink-dim);margin-top:6px}.home-hint{margin:22px 0 0;color:var(--ink-faint);font-size:14px;font-weight:600}.home-hint b{color:var(--ink-dim);letter-spacing:.02em;word-spacing:.35em;font-variant-ligatures:none}.stages-screen{background:radial-gradient(120% 90% at 50% 0%,rgba(46,58,82,.5),transparent 60%)}.path-wrap{position:relative;flex:1;margin:8px auto 0;width:min(880px,92vw)}.path-line{position:absolute;inset:0;width:100%;height:100%}.stage-node{position:absolute;transform:translate(-50%,-50%);background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;transition:transform .16s cubic-bezier(.34,1.56,.64,1)}.stage-node:hover:not(:disabled){transform:translate(-50%,-52%) scale(1.06)}.stage-node:disabled{cursor:default;opacity:.45}.stage-node-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#2c3650,#1a2131 72%);border:2px solid var(--panel-edge);box-shadow:0 6px 16px #0006,inset 0 1px #ffffff14;color:var(--ink-dim);font-weight:800;font-size:19px}.stage-node.is-cleared .stage-node-dot{border-color:var(--node-color, var(--accent));color:var(--ink);box-shadow:0 6px 18px #00000073,0 0 14px color-mix(in srgb,var(--node-color, var(--accent)) 45%,transparent)}.stage-node.is-next .stage-node-dot{border-color:var(--gold);color:var(--gold);animation:next-pulse 2s ease-in-out infinite}@keyframes next-pulse{0%,to{box-shadow:0 6px 16px #0006,0 0 #f2b63259}50%{box-shadow:0 6px 16px #0006,0 0 0 12px #f2b63200}}.stage-node-lock{font-size:11px;letter-spacing:.04em;font-weight:700}.stage-node-stars{display:flex;gap:2px;font-size:11px;line-height:1}.stage-node-stars i{font-style:normal;color:#ffffff24}.stage-node-stars i.on{color:var(--gold);text-shadow:0 0 8px rgba(242,182,50,.5)}.stage-node-name{font-size:12.5px;font-weight:700;color:var(--ink-dim);white-space:nowrap}.stage-node.is-cleared .stage-node-name{color:var(--ink)}.stage-node-badge{position:absolute;top:-12px;right:-22px;background:var(--gold);color:#241a08;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;box-shadow:0 4px 10px #f2b63259}.stages-foot{text-align:center;color:var(--ink-faint);font-size:13.5px;font-weight:600;padding:14px 24px 26px;margin:0}.game-screen{background:linear-gradient(180deg,#131926,#10141f 60%,#0d1119);outline:none}.key-sink{position:fixed;left:0;top:0;width:8px;height:8px;margin:0;padding:0;border:0;opacity:0;ime-mode:disabled}.game-head{display:flex;align-items:center;gap:16px;padding:max(8px,env(safe-area-inset-top)) 22px 2px;flex:0 0 auto}.game-title{display:flex;flex-direction:column;flex:1;min-width:0}.game-stage-name{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:.01em}.game-stage-sub{font-size:12.5px;color:var(--ink-faint);font-weight:700;letter-spacing:.05em}.game-stats{display:flex;align-items:baseline;gap:16px}.game-score{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}.game-combo{min-width:84px;text-align:right;font-size:14px;font-weight:800;color:transparent;transition:color .18s ease,text-shadow .18s ease}.game-combo.is-hot{color:var(--gold);text-shadow:0 0 16px rgba(242,182,50,.45);animation:combo-pop .26s cubic-bezier(.34,1.56,.64,1)}@keyframes combo-pop{0%{transform:scale(1.28)}to{transform:scale(1)}}.game-progress{height:2px;margin:4px 22px 0;border-radius:3px;background:#ffffff0f;overflow:hidden;flex:0 0 auto}.game-progress-fill{height:100%;background:linear-gradient(90deg,rgba(232,161,61,.55),var(--gold));border-radius:3px;transition:width .22s linear}.game-playfield{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:0 0 8px;background:radial-gradient(70% 55% at 50% 62%,rgba(232,161,61,.055),transparent 72%)}.game-stage-area{position:relative;flex:0 0 auto;height:clamp(220px,42dvh,430px);margin:0 6px;min-height:0}.game-canvas{position:absolute;inset:0;display:block}.game-countin,.game-paused{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:radial-gradient(70% 55% at 50% 42%,#0d1119d1,#0d11196b 78%);animation:fade-in .28s ease both}.game-countin{justify-content:flex-start;align-items:center;padding-top:6px;gap:10px;background:none;pointer-events:none}.game-ready-overlay{pointer-events:none}.game-start-btn{pointer-events:auto;margin-top:8px}.start-label-touch{display:none}@media (pointer: coarse){.start-label-pc{display:none}.start-label-touch{display:inline}.back-btn{width:48px;height:48px}.big-play,.primary-btn,.game-start-btn{min-height:52px;padding:14px 28px;font-size:18px}}@media (max-width: 900px) and (orientation: portrait){.home-title{font-size:clamp(36px,11vw,58px)}.game-stage-area{height:clamp(170px,30dvh,280px)}.path-wrap{min-height:58vh}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.game-tip{font-family:var(--font-display);font-size:clamp(15px,1.8vw,20px);font-weight:600;max-width:36ch;margin:0;color:var(--ink-dim);text-shadow:0 2px 14px rgba(8,10,16,.9)}.game-ready{margin:0;color:var(--accent);font-weight:800;letter-spacing:.18em;font-size:14px;animation:breathe 1.4s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.45}50%{opacity:1}}.game-paused-title{font-family:var(--font-display);font-size:30px;margin:0}.game-paused{animation:none;background:#0d1119e0;backdrop-filter:blur(4px)}.game-paused .ghost-btn,.game-paused .primary-btn{min-width:180px}.game-piano{padding:0 18px max(12px,env(safe-area-inset-bottom));display:flex;justify-content:center;margin-top:2px;flex:0 0 auto}.piano{display:flex;gap:5px;width:min(1100px,94vw)}.piano-key{position:relative;flex:1;height:clamp(84px,13.5dvh,128px);border:1px solid rgba(0,0,0,.5);border-radius:0 0 12px 12px;background:none;padding:0;overflow:visible;transition:transform 90ms ease;-webkit-tap-highlight-color:transparent;touch-action:none}.piano-key.is-lit{z-index:2}.piano-key.is-lit:after{content:"";position:absolute;left:12%;right:12%;top:-26px;height:32px;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--key-color, var(--gold)) 70%,transparent),transparent 72%)}.piano-key:active{transform:translateY(2px)}.piano-key-body{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(180deg,#fbf8f0,#ece7da 82%,#d8d2c2);box-shadow:inset 0 -6px 10px #00000024,inset 0 2px #ffffffd9;transition:background .14s ease,box-shadow .14s ease}.piano-key-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 32%);opacity:0;transition:opacity .14s ease}.piano-key.is-lit .piano-key-shine,.piano-key.is-miss .piano-key-shine{opacity:1}.piano-key.is-lit .piano-key-body{background:linear-gradient(180deg,var(--key-color, var(--gold)) 0%,#f7f4ec 78%);box-shadow:0 0 28px color-mix(in srgb,var(--key-color, var(--gold)) 70%,transparent),0 -10px 22px color-mix(in srgb,var(--key-color, var(--gold)) 40%,transparent),inset 0 1px #fff9}.piano-key.is-miss .piano-key-body{background:linear-gradient(180deg,#d98a7c,#ece7da 85%)}.piano-key.is-guide{z-index:2}.piano-key.is-guide .piano-key-body{box-shadow:0 0 0 2px var(--gold),0 0 18px #f2b63273,inset 0 1px #fff9}.piano-key.is-unknown{opacity:.58}.piano-key-labels{position:absolute;left:0;right:0;bottom:10px;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:1}.piano-key-note{font-size:16px;font-weight:800;color:#3a3428}.piano-key-hint{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#3a34288c;border:1px solid rgba(58,52,40,.3);border-radius:5px;padding:1px 5px}@media (pointer: coarse){.piano-key{height:clamp(96px,18dvh,168px)}}@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 768px) and (min-height: 560px){.game-head{padding:max(4px,env(safe-area-inset-top)) 18px 0;gap:12px}.game-stage-name{font-size:17px}.game-stage-sub{font-size:11px}.game-score{font-size:22px}.game-playfield{justify-content:flex-end;gap:clamp(20px,4.2dvh,40px);padding-bottom:2px}.game-stage-area{height:clamp(168px,31dvh,320px)}.game-piano{margin-top:0;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}.piano{width:min(1240px,96vw);gap:7px}.piano-key{height:clamp(140px,27dvh,232px);border-radius:0 0 14px 14px}.piano-key-note{font-size:20px}.piano-key-hint{font-size:12px}.piano-key-labels{bottom:12px}}.results-screen{align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px;overflow:hidden}.results-burst{position:absolute;left:50%;top:42%;width:80vmin;height:80vmin;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(242,182,50,.14),transparent 70%);animation:burst-in .9s cubic-bezier(.16,1,.3,1) both;pointer-events:none}@keyframes burst-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.results-title{font-family:var(--font-display);font-size:clamp(34px,5vw,52px);font-weight:600;margin:0}.results-stage{color:var(--ink-dim);font-weight:700;margin:2px 0 10px}.results-stars{display:flex;gap:14px;margin:8px 0 20px}.results-stars .star{font-size:46px;color:#ffffff1f;line-height:1}.results-stars .star.on{color:var(--gold);text-shadow:0 0 26px rgba(242,182,50,.55);animation:star-pop .52s cubic-bezier(.34,1.56,.64,1) both}@keyframes star-pop{0%{opacity:0;transform:scale(.2) rotate(-28deg)}to{opacity:1;transform:none}}.results-grid{display:flex;gap:44px;margin:0 0 22px}.results-grid div{display:flex;flex-direction:column;gap:4px}.results-grid dt{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink-faint)}.results-grid dd{margin:0;font-family:var(--font-display);font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}.results-kind{max-width:42ch;color:var(--ink-dim);font-weight:600;margin:0 0 18px}.results-actions{display:flex;gap:10px;align-items:center}.progress-screen{min-height:0}.progress-body{width:min(720px,92vw);margin:6px auto 0;flex:1;overflow-y:auto;padding:8px 6px 72px;min-height:0}.progress-summary{display:flex;gap:56px;justify-content:center;padding:22px 0 26px}.progress-big{display:flex;flex-direction:column;align-items:center;gap:6px}.progress-big-num{font-family:var(--font-display);font-size:46px;font-weight:600;line-height:1}.progress-big-num i{font-style:normal;font-size:20px;color:var(--ink-faint)}.progress-big-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}.progress-h3{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:26px 0 12px}.progress-list{list-style:none;margin:0;padding:0}.progress-list li{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:10px;color:var(--ink-faint);font-weight:700}.progress-list li.is-played{color:var(--ink);background:#ffffff08}.progress-stage-name{flex:1}.progress-stage-stars{display:flex;gap:3px;font-size:13px}.progress-stage-stars i{font-style:normal;color:#ffffff1f}.progress-stage-stars i.on{color:var(--gold)}.progress-stage-score{min-width:70px;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-display);font-size:15px}.progress-note-sub{color:var(--ink-dim);font-size:13.5px;font-weight:600;margin:0 0 12px}.note-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.note-bars li{display:flex;align-items:center;gap:14px}.note-bar-letter{width:22px;font-weight:800;font-size:17px;text-align:center}.note-bar-track{flex:1;height:8px;border-radius:4px;background:#ffffff0f;overflow:hidden}.note-bar-fill{display:block;height:100%;border-radius:4px;opacity:.8;animation:bar-grow .7s cubic-bezier(.22,1,.36,1) both}@keyframes bar-grow{0%{transform:scaleX(0);transform-origin:left}}.settings-body{width:min(560px,92vw);margin:10px auto 0;flex:1;overflow-y:auto;padding-bottom:40px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.05)}.settings-label{font-weight:700;font-size:15.5px}input[type=range]{width:220px;accent-color:var(--accent);height:26px}.switch{width:52px;height:30px;border-radius:999px;border:1px solid var(--panel-edge);background:#ffffff0f;position:relative;padding:0;transition:background .18s ease,border-color .18s ease}.switch-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink-dim);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .18s ease}.switch.is-on{background:#e8a13d3d;border-color:var(--accent)}.switch.is-on .switch-knob{transform:translate(22px);background:var(--gold)}.settings-hint{margin:8px 4px 0;color:var(--ink-faint);font-size:13px;font-weight:600;line-height:1.5}.settings-try{margin-top:30px;text-align:center}.settings-try-title{font-family:var(--font-display);font-size:19px;margin:0 0 14px}.settings-keys{display:flex;gap:6px;justify-content:center}.mini-key{width:52px;height:84px;border-radius:0 0 8px 8px;border:1px solid rgba(0,0,0,.5);background:linear-gradient(180deg,#fbf8f0,#e4dfd1);color:#3a3428;font-weight:800;font-size:15px;box-shadow:inset 0 -5px 8px #00000021;transition:transform 90ms ease,box-shadow .14s ease,background .14s ease;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-bottom:8px}.mini-key-note{font-size:15px;line-height:1}.mini-key-hint{font-size:10px;font-weight:800;letter-spacing:.04em;color:#3a34288c;border:1px solid rgba(58,52,40,.28);border-radius:4px;padding:1px 5px}.mini-key:active,.mini-key.is-lit{transform:translateY(2px);background:linear-gradient(180deg,var(--key-color, var(--gold)),#f7f4ec 78%);box-shadow:0 0 18px color-mix(in srgb,var(--key-color, var(--gold)) 55%,transparent),inset 0 -5px 8px #00000021}.settings-try-sub{color:var(--ink-faint);font-size:13px;font-weight:600;margin-top:14px}.settings-reset{margin-top:36px;text-align:center;padding-top:18px;border-top:1px solid rgba(255,255,255,.05)}.settings-reset-warn{margin:0 0 12px;color:var(--ink-dim);font-size:13.5px;font-weight:600}.settings-reset-actions{display:flex;justify-content:center;gap:10px}.reset-progress{display:flex;flex-direction:column;align-items:center;gap:10px}.reset-open-btn,.reset-confirm-btn{background:transparent;border:1px solid var(--panel-edge);border-radius:10px;color:var(--ink-dim);font-size:15px;font-weight:700;padding:10px 22px;transition:color .16s ease,background .16s ease,border-color .16s ease}.reset-open-btn:hover,.reset-confirm-btn:hover{color:var(--ink);background:#ffffff0d;border-color:var(--ink-faint)}.reset-confirm-btn{border-color:#e07a6a8c;color:#e07a6a}.reset-confirm-btn:hover{color:#f0a396;border-color:#e07a6a;background:#e07a6a1f}.progress-corner-reset{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:2;max-width:min(320px,calc(100vw - 36px))}.progress-corner-reset .reset-progress{align-items:flex-end}.progress-corner-reset .reset-open-btn{min-width:0;min-height:40px;padding:8px 14px;font-size:13px;color:var(--ink-faint)}.progress-corner-reset .settings-reset-warn{margin:0 0 8px;text-align:right;max-width:28ch}.progress-corner-reset .settings-reset-actions{justify-content:flex-end}