:root{--lane0:#22d3ee;--lane1:#a855f7;--lane2:#f43f5e;--lane3:#a3e635;--bg0:#05030f;--bg1:#0a0820;--glass:#ffffff0f;--glass-border:#ffffff24;--txt:#eef2ff;--txt-dim:#9aa3c7;--perfect:#f5d76e;--great:#56e39f;--good:#62b6ff;--miss:#ff5470}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg0);color:var(--txt);-webkit-user-select:none;user-select:none;font-family:Rajdhani,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}#bg-aurora{filter:blur(20px);will-change:transform;z-index:0;background:radial-gradient(45% 45% at 20% 25%,#22d3ee38,#0000 60%),radial-gradient(50% 50% at 82% 20%,#a855f738,#0000 60%),radial-gradient(55% 55% at 50% 95%,#f43f5e2e,#0000 60%),radial-gradient(40% 40% at 88% 80%,#a3e63526,#0000 60%);animation:18s ease-in-out infinite alternate auroraShift;position:fixed;top:-20%;bottom:-20%;left:-20%;right:-20%}@keyframes auroraShift{0%{transform:translate(0,0)scale(1)}50%{transform:translate(2%,-2%)scale(1.08)}to{transform:translate(-2%,2%)scale(1.04)}}#bg-grid{z-index:0;opacity:.35;transform-origin:50%;background-image:linear-gradient(#788cff14 1px,#0000 1px),linear-gradient(90deg,#788cff14 1px,#0000 1px);background-size:46px 46px;position:fixed;top:0;bottom:0;left:0;right:0;-webkit-mask-image:radial-gradient(80% 70% at 50% 60%,#000 30%,#0000 80%);mask-image:radial-gradient(80% 70% at 50% 60%,#000 30%,#0000 80%)}#game{z-index:2;display:block;position:fixed;top:0;bottom:0;left:0;right:0}.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px)saturate(150%);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 40px #00000073,inset 0 1px #ffffff2e,inset 0 -1px #ffffff0a}#hud{z-index:6;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 24px;display:flex;position:fixed;top:0;left:0;right:0}.hud-panel{flex-direction:column;min-width:130px;padding:10px 18px;display:flex}#hud-acc-wrap{text-align:right}.hud-label{letter-spacing:.22em;color:var(--txt-dim);font-size:11px;font-weight:600}.hud-value{text-shadow:0 0 18px #78b4ff80;font-family:Orbitron,sans-serif;font-size:26px;font-weight:700;line-height:1.1}.hud-center{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}#hud-combo-wrap{flex-direction:column;align-items:center;line-height:.9;display:flex}#hud-combo{background:linear-gradient(#fff,#9fe9ff);color:#0000;text-shadow:0 0 30px #78c8ff8c;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:64px;font-weight:900;animation:.18s cubic-bezier(.3,1.6,.5,1) comboBump}@keyframes comboBump{0%{transform:scale(1.35)}to{transform:scale(1)}}#hud-combo-label{letter-spacing:.4em;color:var(--txt-dim);font-size:12px;font-weight:700}#hud-judge{letter-spacing:.05em;height:42px;font-family:Orbitron,sans-serif;font-size:34px;font-weight:900;animation:.42s cubic-bezier(.2,1.5,.4,1) forwards judgePop}@keyframes judgePop{0%{opacity:0;transform:translateY(14px)scale(.6)}35%{opacity:1;transform:translateY(0)scale(1.12)}to{opacity:0;transform:translateY(-6px)scale(1)}}#progress-wrap{z-index:6;background:#ffffff12;height:5px;position:fixed;bottom:0;left:0;right:0}#progress-bar{background:linear-gradient(90deg,var(--lane0),var(--lane1),var(--lane2),var(--lane3));width:0%;height:100%;transition:width .12s linear;box-shadow:0 0 14px #a078ffcc}#countdown{z-index:8;color:#fff;text-shadow:0 0 60px #78c8ffcc;pointer-events:none;justify-content:center;align-items:center;font-family:Orbitron,sans-serif;font-size:clamp(80px,22vw,200px);font-weight:900;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.cd-num{animation:.9s cubic-bezier(.2,1.3,.4,1) cdPop}@keyframes cdPop{0%{opacity:0;filter:blur(8px);transform:scale(2.2)}30%{opacity:1;filter:blur()}to{opacity:0;transform:scale(.6)}}.overlay{z-index:10;justify-content:center;align-items:center;padding:24px;animation:.5s fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.card{padding:26px 30px}.menu-inner{flex-direction:column;align-items:center;gap:26px;width:100%;max-width:540px;display:flex}.title-block{text-align:center}.game-title{letter-spacing:.04em;background:linear-gradient(120deg,#22d3ee,#a855f7 45%,#f43f5e 80%);color:#0000;filter:drop-shadow(0 0 30px #a855f773);-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:clamp(44px,9vw,78px);font-weight:900;line-height:1;position:relative}.game-title:after{content:attr(data-text);background:linear-gradient(120deg,#22d3ee,#a855f7 45%,#f43f5e 80%);color:#0000;filter:blur(18px);opacity:.6;z-index:-1;-webkit-background-clip:text;background-clip:text;animation:4s infinite titleFlicker;position:absolute;top:0;bottom:0;left:0;right:0}@keyframes titleFlicker{0%,to{opacity:.6}48%{opacity:.6}50%{opacity:.25}52%{opacity:.6}}.game-subtitle{color:var(--txt-dim);letter-spacing:.04em;margin-top:14px;font-size:16px}.menu-card{flex-direction:column;gap:22px;width:100%;display:flex}.card-label{letter-spacing:.24em;color:var(--txt-dim);font-size:12px;font-weight:700}.diff-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.diff-options{gap:10px;display:flex}.diff-btn{letter-spacing:.08em;cursor:pointer;color:var(--txt-dim);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:13px;padding:10px 16px;font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;transition:all .2s cubic-bezier(.3,1.2,.5,1)}.diff-btn:hover{color:#fff;transform:translateY(-2px)}.diff-btn.active{color:#05030f;background:linear-gradient(120deg,#22d3ee,#a855f7);border-color:#0000;box-shadow:0 6px 24px #78a0ff80}.keys-hint{color:var(--txt-dim);flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;display:flex}.keycaps{gap:8px;display:flex}kbd{text-align:center;color:#fff;background:#ffffff14;border:1px solid #ffffff2e;border-radius:9px;min-width:34px;padding:7px 0;font-family:Orbitron,sans-serif;font-size:14px;box-shadow:0 3px #0006}.keys-sub{opacity:.7;font-size:12px}.btn-primary{letter-spacing:.06em;color:#05030f;cursor:pointer;background:linear-gradient(120deg,#22d3ee,#a855f7 55%,#f43f5e);border:none;border-radius:18px;padding:18px 56px;font-family:Orbitron,sans-serif;font-size:22px;font-weight:900;transition:transform .15s cubic-bezier(.3,1.4,.5,1);position:relative;overflow:hidden;box-shadow:0 10px 40px #965aff8c,inset 0 1px #ffffff80}.btn-primary:hover{transform:translateY(-3px)scale(1.03)}.btn-primary:active{transform:translateY(1px)scale(.98)}.btn-text{z-index:2;position:relative}.btn-glow{background:linear-gradient(120deg,#0000,#fff9,#0000);animation:2.8s infinite btnSweep;position:absolute;top:0;bottom:0;left:0;right:0;transform:translate(-100%)}@keyframes btnSweep{0%{transform:translate(-100%)}55%,to{transform:translate(100%)}}.hint-tip{color:var(--txt-dim);opacity:.8;font-size:13px}.result-inner{text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:480px;padding:34px 30px;display:flex}#result-rank-wrap{justify-content:center;align-items:center;width:140px;height:140px;display:flex;position:relative}#result-rank{color:#0000;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:110px;font-weight:900;line-height:1;animation:.7s cubic-bezier(.2,1.5,.4,1) rankIn}@keyframes rankIn{0%{opacity:0;transform:scale(0)rotate(-25deg)}60%{transform:scale(1.2)rotate(6deg)}to{transform:scale(1)rotate(0)}}#result-rank-glow{filter:blur(14px);z-index:-1;background:radial-gradient(circle,#ffd86e80,#0000 70%);border-radius:50%;width:120px;height:120px;animation:2.2s ease-in-out infinite rankGlow;position:absolute}@keyframes rankGlow{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}#result-title{letter-spacing:.3em;color:var(--txt-dim);font-family:Orbitron,sans-serif;font-size:20px}.result-score{text-shadow:0 0 26px #78c8ff80;font-family:Orbitron,sans-serif;font-size:46px;font-weight:900}.result-stats{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;display:grid}.stat{background:#ffffff0a;border-radius:14px;flex-direction:column;gap:4px;padding:12px 4px;display:flex}.stat-num{font-family:Orbitron,sans-serif;font-size:24px;font-weight:700}.stat-name{letter-spacing:.12em;font-size:11px;font-weight:700}.stat-name.perfect{color:var(--perfect)}.stat-name.great{color:var(--great)}.stat-name.good{color:var(--good)}.stat-name.miss{color:var(--miss)}.result-meta{gap:30px;display:flex}.result-meta div{flex-direction:column;gap:2px;display:flex}.result-meta span{color:var(--txt-dim);letter-spacing:.1em;font-size:12px}.result-meta b{font-family:Orbitron,sans-serif;font-size:22px}.result-actions{gap:14px;margin-top:6px;display:flex}.btn-ghost{letter-spacing:.05em;color:#fff;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:14px;padding:12px 26px;font-family:Rajdhani,sans-serif;font-size:16px;font-weight:700;transition:all .18s cubic-bezier(.3,1.3,.5,1)}.btn-ghost:hover{background:#ffffff24;transform:translateY(-2px)}.btn-ghost:active{transform:translateY(1px)}.pause-card{flex-direction:column;align-items:center;gap:16px;display:flex}.pause-card h2{letter-spacing:.2em;font-family:Orbitron,sans-serif}.select-inner{flex-direction:column;gap:22px;width:100%;max-width:760px;display:flex}.select-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.select-title{letter-spacing:.06em;background:linear-gradient(120deg,#22d3ee,#a855f7);color:#0000;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:clamp(24px,5vw,38px);font-weight:900}.select-count{color:var(--txt-dim);letter-spacing:.1em;font-size:13px}.back-btn{color:var(--txt-dim);cursor:pointer;background:0 0;border:none;padding:8px 4px;font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700;transition:color .18s}.back-btn:hover{color:#fff}.song-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}@media (max-width:560px){.song-grid{grid-template-columns:1fr}}.song-card{cursor:pointer;text-align:left;border-radius:18px;align-items:center;gap:16px;padding:16px;transition:transform .18s cubic-bezier(.3,1.3,.5,1),box-shadow .25s,border-color .2s;display:flex;position:relative;overflow:hidden}.song-card:hover{transform:translateY(-3px)}.song-card.active{box-shadow:0 10px 38px #7878ff73,inset 0 1px #ffffff40}.song-accent{width:4px;position:absolute;top:0;bottom:0;left:0}.song-card.active .song-accent{width:6px}.song-art{border-radius:14px;flex:none;justify-content:center;align-items:center;width:58px;height:58px;display:flex;box-shadow:0 6px 20px #0006,inset 0 1px #fff6}.song-art-note{color:#05030fd9;filter:drop-shadow(0 1px 2px #fff6);font-size:28px}.song-info{flex-direction:column;gap:3px;min-width:0;display:flex}.song-name{letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;font-family:Orbitron,sans-serif;font-size:18px;font-weight:700;overflow:hidden}.song-sub{color:var(--txt-dim);font-size:13px}.song-bpm{color:var(--txt-dim);letter-spacing:.1em;opacity:.8;font-family:Orbitron,sans-serif;font-size:11px}.song-check{color:#05030f;background:linear-gradient(120deg,#22d3ee,#a855f7);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:900;display:flex;position:absolute;top:12px;right:14px;box-shadow:0 2px 10px #78a0ff99}.select-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;display:flex}.select-footer .diff-row{flex:1}.btn-play{padding:14px 36px;font-size:18px}@media (max-width:560px){.select-footer{flex-direction:column;align-items:stretch}.btn-play{width:100%}}