@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#06060c;--cyan:#00f0ff;--magenta:#ff006e;--yellow:#ffd000;--green:#39ff14}body{background:var(--bg);color:#fff;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;height:100vh;font-family:Noto Sans JP,Orbitron,sans-serif;display:flex;overflow:hidden}#app-wrapper{justify-content:center;align-items:stretch;width:100%;max-width:1200px;height:100vh;max-height:880px;display:flex;overflow:hidden}#left-panel,#right-panel{background:#ffffff03;border:1px solid #ffffff08;flex-direction:column;justify-content:center;width:220px;min-width:160px;padding:32px 20px;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .4s,width .45s cubic-bezier(.4,0,.2,1),min-width .45s cubic-bezier(.4,0,.2,1),padding .45s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}#left-panel{border-right:none;border-radius:12px 0 0 12px}#right-panel{border-left:none;border-radius:0 12px 12px 0}#left-panel.panel--hidden{opacity:0;pointer-events:none;width:0;min-width:0;padding-left:0;padding-right:0;transform:translate(-100%)}#right-panel.panel--hidden{opacity:0;pointer-events:none;width:0;min-width:0;padding-left:0;padding-right:0;transform:translate(100%)}#left-panel:before,#right-panel:before{content:"";background-image:linear-gradient(#ffffff04 1px,#0000 1px),linear-gradient(90deg,#ffffff04 1px,#0000 1px);background-size:40px 40px;animation:20s linear infinite panelGrid;position:absolute;inset:0}@keyframes panelGrid{0%{background-position:0 0}to{background-position:0 40px}}.panel-content{z-index:1;flex-direction:column;gap:28px;display:flex;position:relative}.panel-section{text-align:center}.panel-title{background:linear-gradient(135deg, var(--cyan), var(--magenta));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:4px;font:900 16px Orbitron,monospace}.panel-subtitle{color:#ffffff73;letter-spacing:3px;font:400 7px Orbitron,monospace}.panel-label{color:#ffffffb3;letter-spacing:1px;margin-bottom:6px;font:400 10px Noto Sans JP,sans-serif}.panel-value{color:#fff9;font:700 22px Orbitron,monospace;transition:color .3s}.panel-value.has-value{color:var(--cyan)}.panel-grade-ladder{justify-content:center;gap:6px;margin-top:8px;display:flex}.pg-badge{color:#ffffff1f;border:1px solid #ffffff0f;border-radius:6px;justify-content:center;align-items:center;width:30px;height:30px;font:900 13px Orbitron,monospace;transition:all .4s;display:flex}.panel-divider{background:#ffffff0a;height:1px;margin:4px 0}.panel-hint{color:#ffffffb3;font:400 10px/1.7 Noto Sans JP,sans-serif}.panel-setting-display{color:#fff3;font:700 12px Orbitron,monospace}.panel-keys-label{color:#ffffff80;letter-spacing:1px;margin-bottom:4px;font:400 8px JetBrains Mono,monospace}.panel-features{flex-direction:column;gap:10px;display:flex}.panel-feature{align-items:center;gap:10px;display:flex}.pf-icon{text-align:center;flex-shrink:0;width:20px;font-size:14px}.pf-text{color:#ffffff8c;font:400 11px/1.4 Noto Sans JP,sans-serif}@media (width<=900px){#left-panel,#right-panel{display:none}}#game-container{flex-shrink:0;width:640px;height:100vh;max-height:880px;transition:width .45s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#game-container.game-container--fullscreen{flex-shrink:1;width:100%!important}canvas{width:100%;height:100%;display:block}#lang-toggle{z-index:200;color:#fff6;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:4px;padding:4px 10px;font:11px JetBrains Mono,monospace;transition:all .2s;position:absolute;top:12px;right:60px}#lang-toggle:hover{color:var(--cyan);border-color:var(--cyan)}#mute-btn{z-index:200;color:#ffffff8c;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:4px;padding:4px 8px;font-size:14px;line-height:1;transition:all .2s;position:absolute;top:12px;right:12px}#mute-btn:hover{color:var(--yellow);border-color:var(--yellow)}.overlay{z-index:100;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s;display:flex;position:absolute;inset:0}.overlay.hidden{opacity:0;pointer-events:none}#start-screen{background:0 0}.start-content{z-index:10;flex-direction:column;align-items:center;display:flex;position:relative}.logo{letter-spacing:5px;background:linear-gradient(135deg, var(--cyan) 0%, #fff 40%, var(--magenta) 70%, var(--yellow) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:4px;font-family:Orbitron,monospace;font-size:54px;font-weight:900;animation:3s ease-in-out infinite alternate logoGlow}@keyframes logoGlow{0%{filter:drop-shadow(0 0 8px #00f0ff4d)}to{filter:drop-shadow(0 0 20px #ff006e4d)}}.tagline{color:#ffffff59;letter-spacing:3px;margin-bottom:36px;font-family:Orbitron,monospace;font-size:12px}.config-panel{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff05;border:1px solid #ffffff0f;border-radius:14px;min-width:440px;margin-bottom:28px;padding:28px 36px}.config-row{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.config-row:last-child{margin-bottom:0}.config-label{color:#fffc;letter-spacing:2px;font:700 13px Orbitron,monospace}.config-options{gap:8px;display:flex}.speed-row{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:center;margin-top:8px;padding:14px 0 10px;display:flex}.speed-row-label{color:#fff9;letter-spacing:2px;font:700 12px Orbitron,monospace}.opt-btn{color:#ffffffa6;letter-spacing:1px;cursor:pointer;background:0 0;border:1px solid #ffffff38;border-radius:6px;padding:10px 18px;font:700 12px Orbitron,monospace;transition:all .15s}.opt-btn:hover{color:#ffffff8c;border-color:#ffffff40}.opt-btn.active{border-color:var(--cyan);color:var(--cyan);background:#00f0ff0f}.key-preview{flex-wrap:wrap;justify-content:center;gap:5px;margin-top:16px;display:flex}.kp{color:#ffffff4d;border:1px solid #ffffff1a;border-radius:5px;justify-content:center;align-items:center;width:32px;height:32px;font:700 14px JetBrains Mono,monospace;display:flex}.cta-area{flex-direction:column;align-items:center;gap:12px;display:flex}.play-btn{border:2px solid var(--cyan);color:var(--cyan);letter-spacing:4px;cursor:pointer;background:#00f0ff0f;border-radius:10px;padding:18px 64px;font:900 18px Orbitron,monospace;transition:all .2s;animation:2s ease-in-out infinite ctaPulse}.play-btn:hover{background:#00f0ff1f;transform:scale(1.03);box-shadow:0 0 40px #00f0ff26}@keyframes ctaPulse{0%,to{box-shadow:0 0 10px #00f0ff1a}50%{box-shadow:0 0 25px #00f0ff33}}.shortcut-hint{color:#ffffff8c;letter-spacing:2px;background:#ffffff05;border:1px solid #ffffff26;border-radius:4px;padding:6px 16px;font:12px JetBrains Mono,monospace}#result-screen{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#06060cf5;display:none}#result-screen.show{display:flex}.result-grade{margin-bottom:4px;font:900 80px Orbitron,monospace}.grade-s{background:linear-gradient(135deg, var(--cyan), var(--yellow), var(--magenta));-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;animation:2s linear infinite gradeShine}@keyframes gradeShine{0%{background-position:0%}to{background-position:200%}}.grade-a{color:var(--cyan)}.grade-b{color:var(--green)}.grade-c{color:var(--yellow)}.grade-d{color:var(--magenta)}.result-score{margin-bottom:6px;font:700 32px Orbitron,monospace}.new-record{color:var(--yellow);letter-spacing:3px;margin-bottom:20px;font:700 12px Orbitron,monospace;animation:1s ease-in-out infinite recordPulse}@keyframes recordPulse{0%,to{opacity:.7}50%{opacity:1}}.result-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;display:grid}.rg-item{text-align:center}.rg-val{font:700 22px Orbitron,monospace}.rg-lbl{color:#fff9;letter-spacing:1px;margin-top:4px;font:400 9px JetBrains Mono,monospace}.rg-perfect .rg-val{color:var(--cyan)}.rg-good .rg-val{color:var(--yellow)}.rg-miss .rg-val{color:var(--magenta)}.rg-combo .rg-val{color:var(--green)}.share-card{cursor:pointer;background:#ffffff08;border:1px solid #ffffff14;border-radius:10px;align-items:center;gap:16px;min-width:320px;margin-bottom:24px;padding:14px 20px;transition:all .2s;display:flex}.share-card:hover{border-color:var(--magenta);background:#ff006e0a;transform:scale(1.02)}.share-card-icon{flex-shrink:0;font-size:28px}.share-card-text{text-align:left}.share-card-main{color:#fff9;margin-bottom:3px;font:700 12px Noto Sans JP,sans-serif}.share-card-sub{color:#ffffff80;text-overflow:ellipsis;white-space:nowrap;max-width:240px;font:400 9px JetBrains Mono,monospace;overflow:hidden}.result-btns{gap:10px;display:flex}.r-btn{letter-spacing:2px;cursor:pointer;background:0 0;border:1px solid;border-radius:7px;padding:11px 28px;font:700 11px Orbitron,monospace;transition:all .2s}.r-btn-retry{border-color:var(--cyan);color:var(--cyan)}.r-btn-retry:hover{background:#00f0ff14}.r-btn-menu{color:#fff6;border-color:#fff3}.r-btn-menu:hover{background:#ffffff0a}#pause-screen{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#06060ceb;display:none}#pause-screen.show{display:flex}.pause-icon{color:#ffffff1a;margin-bottom:8px;font-size:48px}.pause-title-ja{color:#fff6;margin-bottom:32px;font:700 16px Noto Sans JP,sans-serif}.pause-btns{justify-content:center;gap:12px;display:flex}.preset-list{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.preset-card{cursor:pointer;background:#ffffff03;border:1px solid #ffffff0f;border-radius:10px;justify-content:space-between;align-items:center;padding:14px 18px;transition:all .2s;display:flex}.preset-card:hover{background:#ffffff05;border-color:#ffffff1f}.preset-card.active{border-color:var(--cyan);background:#00f0ff0a}.preset-info{flex:1}.preset-name{color:#ffffff80;margin-bottom:3px;font:700 14px Orbitron,monospace}.preset-card.active .preset-name{color:var(--cyan)}.preset-desc{color:#ffffffa6;font:400 10px Noto Sans JP,sans-serif}.preset-keys{gap:4px;display:flex}.pk{color:#ffffff40;border:1px solid #ffffff1a;border-radius:5px;justify-content:center;align-items:center;width:28px;height:28px;font:700 12px JetBrains Mono,monospace;display:flex}.preset-card.active .pk{color:#00f0ff99;border-color:#00f0ff4d}.custom-toggle{cursor:pointer;color:#fff3;justify-content:center;align-items:center;gap:6px;padding:10px;font:400 11px Noto Sans JP,sans-serif;transition:color .2s;display:flex}.custom-toggle:hover{color:#fff6}.custom-arrow{font-size:10px;transition:transform .2s}.custom-arrow.open{transform:rotate(90deg)}.custom-panel{border-top:1px solid #ffffff0a;padding-top:12px}