@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Noto+Sans+JP:wght@500;700;900&display=swap";:root{--cyan: #00f0ff;--magenta: #ff2bd6;--orange: #ff8c42;--lime: #b7ff00;--bg0: #0a0118;--panel: rgba(20, 6, 46, .82)}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg0);font-family:Rajdhani,system-ui,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}#game-root{position:fixed;top:0;right:0;bottom:0;left:0}#game-root canvas{display:block}#ui-root{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#ui-root>*{pointer-events:auto}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#4a0f6e8c,#0a0118eb);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.start-panel{width:min(560px,92vw);max-height:94vh;overflow-y:auto;padding:34px 38px;background:var(--panel);border:1px solid rgba(0,240,255,.35);border-radius:18px;box-shadow:0 0 40px #ff2bd640,inset 0 0 30px #00f0ff14;text-align:center}.title{font-family:Orbitron,sans-serif;font-weight:900;font-size:58px;letter-spacing:4px;background:linear-gradient(180deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(255,43,214,.5)}.title.small{font-size:34px}.title span{color:var(--orange);-webkit-text-fill-color:var(--orange)}.subtitle{margin:6px 0 22px;color:var(--cyan);letter-spacing:2px;text-transform:lowercase;font-size:15px;opacity:.85}.gate-panel{width:min(440px,92vw)}.gate-lead{margin:4px 0 20px;font-size:15px;opacity:.82;line-height:1.4}.gate-continue{width:100%;margin-top:6px}@keyframes flicker{0%,to{opacity:1}48%{opacity:1}49%{opacity:.55}50%{opacity:1}92%{opacity:.7}93%{opacity:1}}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}@keyframes micPulse{0%,to{box-shadow:0 0 #00f0ff73,inset 0 0 18px #00f0ff2e}50%{box-shadow:0 0 0 10px #00f0ff00,inset 0 0 24px #00f0ff4d}}@keyframes risein{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes barPulse{0%,to{opacity:.9}50%{opacity:1}}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes loadbar{0%{width:6%}to{width:100%}}.menu-screen{align-items:flex-start;justify-content:center;padding:34px 26px 60px;overflow-y:auto;background:radial-gradient(120% 80% at 50% -10%,#2a0b52,#140530 38%,#08010f 72%,#05010c);-webkit-backdrop-filter:none;backdrop-filter:none}.menu-screen-inner{position:relative;z-index:1;width:100%;max-width:1320px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}@keyframes gridScroll{0%{background-position:0 0,0 0}to{background-position:0 60px,0 60px}}@keyframes sunPulse{0%,to{filter:drop-shadow(0 0 40px rgba(255,80,200,.55))}50%{filter:drop-shadow(0 0 70px rgba(255,140,66,.7))}}@keyframes starTw{0%,to{opacity:.35}50%{opacity:1}}.menu-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.mb-stars{position:absolute;top:0;right:0;bottom:0;left:0;animation:starTw 4s ease-in-out infinite;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 28% 9%,#9ff,transparent),radial-gradient(1px 1px at 47% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 67% 12%,#fbd,transparent),radial-gradient(1px 1px at 82% 25%,#fff,transparent),radial-gradient(1.5px 1.5px at 92% 8%,#9ff,transparent),radial-gradient(1px 1px at 7% 33%,#fff,transparent),radial-gradient(1px 1px at 58% 6%,#fff,transparent)}.mb-sun{position:absolute;left:50%;top:30%;width:340px;height:340px;transform:translate(-50%,-50%);border-radius:50%;opacity:.9;background:linear-gradient(180deg,#ffd36b,#ff8c42 34%,#ff2bd6 78%,#7b2bff);animation:sunPulse 5s ease-in-out infinite;-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 19px),linear-gradient(180deg,#000 55%,transparent 92%);mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 19px),linear-gradient(180deg,#000 55%,transparent 92%);-webkit-mask-composite:source-in;mask-composite:intersect}.mb-sun-glow{position:absolute;left:50%;top:30%;width:540px;height:540px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,90,200,.28),transparent 62%)}.mb-horizon{position:absolute;left:0;right:0;top:52%;height:3px;background:linear-gradient(90deg,transparent,#ff2bd6,#00f0ff,#ff2bd6,transparent);box-shadow:0 0 28px 6px #ff2bd68c}.mb-grid{position:absolute;left:-50%;width:200%;top:52%;bottom:-6%;background-image:linear-gradient(rgba(0,240,255,.55) 2px,transparent 2px),linear-gradient(90deg,rgba(255,43,214,.4) 2px,transparent 2px);background-size:60px 60px,60px 60px;transform:perspective(420px) rotateX(76deg);transform-origin:top center;animation:gridScroll 1.6s linear infinite;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 86%);mask-image:linear-gradient(to bottom,#000,transparent 86%)}.mb-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(5,1,12,.7) 100%)}.mb-scan{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.06;background:repeating-linear-gradient(180deg,#fff 0 1px,transparent 1px 3px)}.menu-topline{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.8),rgba(255,43,214,.8),transparent)}.menu-main{flex:1 1 560px;min-width:300px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:24px;background:linear-gradient(165deg,#220c44b8,#0b031cb8);border:1px solid rgba(0,240,255,.22);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px #ff2bd612,0 30px 70px #0000008c,0 0 70px #7b2bff38}.menu-side{flex:1 1 340px;min-width:300px;max-width:400px;display:flex;flex-direction:column;gap:16px;animation:floaty 7s ease-in-out infinite}.menu-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand-row{display:flex;align-items:center;gap:14px}.brand-mark{flex-shrink:0;filter:drop-shadow(0 0 14px rgba(0,240,255,.5))}.title-lockup{font-family:Orbitron,sans-serif;font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:.92;letter-spacing:1px;animation:flicker 7s infinite;background:linear-gradient(118deg,#7ffcff,var(--cyan) 38%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(0,240,255,.3))}.menu-tagline{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}.tag-jp{font-family:Noto Sans JP,sans-serif;font-weight:700;font-size:15px;letter-spacing:6px;color:#ff8c42eb}.tag-dot{width:5px;height:5px;border-radius:50%;background:#b7ff00b3}.tag-text{font-family:Rajdhani,sans-serif;font-weight:600;letter-spacing:3px;font-size:12px;color:#b7ff00d9;text-transform:uppercase;white-space:nowrap}.track-count{font-family:Orbitron,sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;color:#00f0ffb3;border:1px solid rgba(0,240,255,.3);padding:7px 12px;border-radius:999px;white-space:nowrap}.search-wrap{position:relative}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.7}.song-search{width:100%;font-family:Rajdhani,sans-serif;font-weight:600;font-size:16px;color:#fff;background:#07021499;border:1px solid rgba(0,240,255,.28);border-radius:14px;padding:13px 16px 13px 42px;outline:none;letter-spacing:.3px}.song-search::placeholder{color:#ffffff73}.song-search:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #00f0ff2e,0 0 24px #00f0ff40;background:#070214d9}.section-label{display:flex;align-items:center;gap:10px;margin:2px 2px 0;font-family:Orbitron,sans-serif;font-weight:700;font-size:12px;letter-spacing:3px;color:#ffffffc7}.section-tick{width:18px;height:2px;background:var(--magenta);box-shadow:0 0 8px var(--magenta)}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;max-height:62vh;overflow-x:clip;overflow-y:auto;padding:28px 14px;margin:-22px -8px;align-content:start}@keyframes spin{to{transform:rotate(360deg)}}.song-card{position:relative;cursor:pointer;border-radius:16px;padding:8px;color:#fff;font-family:inherit;text-align:left;background:linear-gradient(160deg,#28104e80,#0c041e80);border:1px solid rgba(255,255,255,.08);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}.song-card:hover{transform:translateY(-6px);border-color:#00f0ff80;box-shadow:0 16px 36px #00000080,0 0 30px #00f0ff47}.card-ring{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:18px;padding:2px;opacity:0;pointer-events:none;background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--orange),var(--lime),var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-shadow:0 0 28px #ff2bd673}.song-card.selected .card-ring{opacity:1;animation:spin 4s linear infinite}.card-check{position:absolute;top:14px;right:14px;z-index:3;opacity:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--cyan));display:flex;align-items:center;justify-content:center;color:#06121a;font-weight:900;font-size:15px;box-shadow:0 0 16px #b7ff00b3}.song-card.selected .card-check{opacity:1;animation:pop .35s}.song-cover{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;width:100%;border-radius:11px;overflow:hidden;background-size:cover;background-position:center;background-color:#ffffff0f}.song-letter{font-family:Orbitron,sans-serif;font-weight:900;font-size:62px;color:#ffffffeb;mix-blend-mode:overlay;text-shadow:0 4px 18px rgba(0,0,0,.4)}.cover-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 72% 22%,rgba(255,255,255,.28),transparent 46%)}.cover-scrim{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,rgba(6,1,16,.82))}.song-badge{position:absolute;left:8px;bottom:8px;font-family:Orbitron,sans-serif;font-weight:700;font-size:9px;letter-spacing:1.5px;padding:4px 8px;border-radius:6px;background:#060110b3;border:1px solid;text-transform:uppercase}.song-text{display:block;padding:10px 6px 4px}.song-name{display:block;font-weight:700;font-size:15px;line-height:1.15;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-meta{display:block;font-weight:500;font-size:12.5px;color:#ffffff80;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-empty{text-align:center;padding:44px 20px 30px;animation:risein .4s}.empty-icon{font-size:40px;margin-bottom:10px}.empty-title{font-family:Orbitron,sans-serif;font-weight:700;font-size:16px;letter-spacing:1px;color:#fff}.empty-sub{font-size:14px;color:#ffffff80;margin-top:6px}.step-panel{position:relative;overflow:hidden;padding:18px 20px;border-radius:22px;background:linear-gradient(165deg,#220c44b3,#0b031cb3);border:1px solid rgba(0,240,255,.22);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px #00000073}.mic-area{padding:20px;box-shadow:0 24px 60px #00000080,0 0 50px #00f0ff24}.step-magenta-panel{border-color:#ff2bd633}.step-orange-panel{border-color:#ff8c4238}.step-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}.step-num{font-family:Orbitron,sans-serif;font-weight:800;font-size:11px;letter-spacing:2px}.step-cyan{color:var(--cyan)}.step-magenta{color:var(--magenta)}.step-orange{color:var(--orange)}.step-rule{flex:1;height:1px;background:#ffffff2e}.step-name{font-family:Rajdhani,sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;color:#ffffff80}.toggles{display:flex;flex-direction:column;gap:4px}.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;padding:9px 6px;border-radius:10px;transition:background .15s}.toggle:hover{background:#ffffff0a}.toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-box{flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:2px solid rgba(255,255,255,.35);background:transparent;display:flex;align-items:center;justify-content:center;color:#06121a;font-weight:900;font-size:14px;transition:all .18s}.toggle-box:after{content:"✓";opacity:0;transition:opacity .18s}.toggle input:checked+.toggle-magenta{background:var(--magenta);border-color:var(--magenta);box-shadow:0 0 14px #ff2bd666}.toggle input:checked+.toggle-lime{background:var(--lime);border-color:var(--lime);box-shadow:0 0 14px #b7ff0066}.toggle input:checked+.toggle-box:after{opacity:1}.toggle input:focus-visible+.toggle-box{outline:2px solid var(--cyan);outline-offset:2px}.toggle-text{flex:1}.toggle-title{display:block;font-weight:600;font-size:15px;color:#fff}.toggle-sub{display:block;font-weight:500;font-size:12px;color:#ffffff73}.btn-mic{width:100%;font-family:Orbitron,sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;color:#bff9ff;background:#00f0ff12;border:1.5px solid rgba(0,240,255,.55);border-radius:14px;padding:15px;cursor:pointer;animation:micPulse 2.4s ease-in-out infinite;transition:background .2s,color .2s}.btn-mic:hover:not(:disabled){background:#00f0ff29;color:#fff}.btn-mic:disabled{cursor:default;animation:none}.mic-privacy{font-weight:500;font-size:12.5px;color:#ffffff73;text-align:center;margin-top:10px}.calibration{text-align:center;animation:risein .35s}.cal-caption{font-weight:600;font-size:12px;letter-spacing:2px;color:#00f0ffd9;text-transform:uppercase;margin-bottom:4px}.cal-note{font-family:Orbitron,sans-serif;font-weight:900;font-size:58px;line-height:1;color:#fff;text-shadow:0 0 30px rgba(0,240,255,.6);margin:6px 0}.cal-hz{font-weight:600;font-size:14px;color:#fff9;margin-bottom:14px;min-height:18px}.cal-row{display:flex;align-items:center;gap:10px}.cal-row-label{font-weight:600;font-size:11px;letter-spacing:1px;color:#ffffff80;width:54px;text-align:left}.cal-clarity{flex:1;height:12px;border-radius:999px;background:#ffffff14;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.cal-clarity-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#7b2bff,var(--cyan),var(--lime));box-shadow:0 0 16px #00f0ff99;transition:width .25s ease}.cal-clarity-pct{font-family:Orbitron,sans-serif;font-weight:700;font-size:12px;color:var(--lime);width:34px;text-align:right}.cal-hint{font-weight:500;font-size:12.5px;color:#ffffff8c;margin-top:13px}.pitch-preview{display:flex;align-items:center;gap:14px;animation:risein .35s}.pp-note{font-family:Orbitron,sans-serif;font-weight:900;font-size:46px;line-height:1;color:var(--lime);text-shadow:0 0 26px rgba(183,255,0,.55);min-width:96px}.pp-body{flex:1}.pp-label-row{display:flex;align-items:center;gap:7px;margin-bottom:8px}.pp-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:blink 1.1s infinite}.pp-label{font-weight:700;font-size:12px;letter-spacing:1.5px;color:#b7ff00e6;text-transform:uppercase}.pp-bar{height:14px;border-radius:999px;background:#ffffff14;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.pp-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 16px #b7ff0099;transition:width .12s linear}.readiness{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-family:Rajdhani,sans-serif;font-weight:600;font-size:13px}.mic-chip,.song-chip{display:flex;align-items:center;gap:6px;color:#fff6}.mic-chip.chip-on,.song-chip.chip-on{color:var(--lime)}.chip-dot{color:#ffffff40}.chip-icon{font-size:13px}.upload-row{display:flex;gap:10px;margin-top:14px}.upload-card{flex:1;cursor:pointer;text-align:center;font-family:Rajdhani,sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;color:#ffffffb3;background:#ffffff08;border:1.5px dashed rgba(255,255,255,.25);border-radius:12px;padding:12px 6px;transition:all .18s}.upload-card:hover{border-color:var(--cyan);color:#fff;background:#00f0ff14}.upload-midi:hover{border-color:var(--magenta);background:#ff2bd614}.upload-card.selected{color:#fff;border-style:solid}.upload-card.selected:not(.upload-midi){border-color:var(--cyan);background:#00f0ff21}.upload-midi.selected{border-color:var(--magenta);background:#ff2bd621}.midi-chosen{display:flex;align-items:center;gap:8px;margin-top:10px;font-family:Rajdhani,sans-serif;font-weight:600;font-size:13px;color:var(--lime);background:#b7ff0014;border:1px solid rgba(183,255,0,.3);border-radius:10px;padding:9px 12px;animation:risein .3s}.midi-chosen .chosen-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-chosen .chosen-clear{margin-left:auto;color:#fff6;cursor:pointer}.midi-chosen .chosen-clear:hover{color:#fff}.start-hint{font-family:Rajdhani,sans-serif;font-weight:500;font-size:12px;color:#ff8c42bf;text-align:center;margin-top:8px}.launch-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#140530db,#05010cf5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:risein .25s}.launch-title{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(36px,8vw,76px);letter-spacing:2px;background:linear-gradient(170deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;animation:pop .4s}.launch-sub{font-family:Rajdhani,sans-serif;font-weight:600;font-size:16px;letter-spacing:2px;color:#ffffffb3;margin:10px 0 22px;text-transform:uppercase}.launch-bar{width:min(360px,70vw);height:8px;border-radius:999px;background:#ffffff1a;overflow:hidden}.launch-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--orange));box-shadow:0 0 18px #ff2bd699;animation:loadbar 1.5s ease-out forwards}.btn-start{font-family:Orbitron,sans-serif;font-weight:700;font-size:18px;padding:14px 40px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--magenta),var(--orange));color:#fff;cursor:pointer;letter-spacing:2px;box-shadow:0 0 24px #ff2bd680;transition:transform .12s,box-shadow .12s}.btn-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 34px #ff8c4299}.btn-start:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.menu-side .btn-start{width:100%;font-weight:800;font-size:18px;letter-spacing:1.5px;padding:17px;border-radius:14px;background:linear-gradient(95deg,var(--magenta),var(--orange));box-shadow:0 0 28px #ff2bd68c,0 10px 24px #0006;animation:barPulse 1.8s ease-in-out infinite}.menu-side .btn-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 40px #ff2bd6cc,0 14px 28px #00000073}.menu-side .btn-start:active:not(:disabled){transform:translateY(1px)}.menu-side .btn-start:disabled{opacity:1;color:#ffffff59;background:#ffffff0d;border:1px dashed rgba(255,255,255,.18);box-shadow:none;animation:none}.btn-secondary{font-family:Rajdhani;font-weight:700;font-size:15px;padding:11px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:#ffffff0f;color:#fff;cursor:pointer}.btn-secondary:hover{border-color:var(--cyan)}.footnote{margin-top:18px;font-size:12px;opacity:.55;line-height:1.5}.track-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;text-align:left}.track-row{padding:12px 16px;border-radius:10px;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:#00000040;display:flex;flex-direction:column;gap:3px;transition:all .12s}.track-row:hover{border-color:var(--cyan)}.track-row.selected{border-color:var(--magenta);background:#ff2bd61f}.track-name{font-weight:700;font-size:16px}.track-meta{font-size:12px;opacity:.65}.midi-actions{display:flex;gap:12px;justify-content:center}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.15}}@keyframes promptFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}@keyframes judgePop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}22%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}62%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}@keyframes countPop{0%{transform:translate(-50%,-50%) scale(2.4);opacity:0}28%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(.55);opacity:0}}@keyframes ringSpin{to{transform:rotate(360deg)}}@keyframes skipPulse{0%,to{box-shadow:0 0 #00f0ff80}50%{box-shadow:0 0 0 8px #00f0ff00}}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:Rajdhani,sans-serif}.hud-scrim{position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;background:linear-gradient(180deg,rgba(6,1,16,.78),rgba(6,1,16,.25) 60%,transparent)}.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px}.hud-stats{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}.hud-chip{display:flex;flex-direction:column;gap:1px;justify-content:center;padding:8px 14px;border-radius:13px;background:#08021480;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 18px #0006}.chip-cyan{border-color:#00f0ff4d;padding:8px 16px}.chip-magenta{border-color:#ff2bd64d}.chip-orange{border-color:#ff8c424d}.hud-label{font-family:Orbitron,sans-serif;font-weight:700;font-size:10px;letter-spacing:2px}.chip-cyan .hud-label{color:#00f0ffd9}.chip-magenta .hud-label{color:#ff2bd6d9}.chip-orange .hud-label{color:#ff8c42d9}.hud-score{font-family:Orbitron,sans-serif;font-weight:900;font-size:30px;line-height:1;color:#fff;text-shadow:0 0 16px rgba(0,240,255,.5);font-variant-numeric:tabular-nums}.hud-streak{font-family:Orbitron,sans-serif;font-weight:800;font-size:22px;line-height:1;color:#ff7be3;text-shadow:0 0 14px rgba(255,43,214,.6)}.hud-acc{font-family:Orbitron,sans-serif;font-weight:800;font-size:22px;line-height:1;color:#ffb27a;text-shadow:0 0 14px rgba(255,140,66,.6)}.hud-health-chip{flex-direction:row;align-items:center;padding:0 14px}.hud-health{display:flex;align-items:center;gap:7px}.pip{width:15px;height:15px;transform:rotate(45deg);border-radius:3px;border:1.5px solid;transition:all .18s}.pip.full{background:linear-gradient(135deg,var(--magenta),var(--orange));border-color:#ff8c42b3;box-shadow:0 0 10px #ff2bd6b3}.pip.empty{background:transparent;border-color:#ffffff47;box-shadow:none}.hud-right{display:flex;align-items:center;gap:10px}.hud-rec{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:#08021480;border:1px solid rgba(255,59,107,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:Orbitron,sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;color:#ff85a3}.rec-dot{width:10px;height:10px;border-radius:50%;background:#ff3b6b;box-shadow:0 0 12px #ff3b6b;animation:blink 1.1s infinite}.hud-pause{pointer-events:auto;cursor:pointer;width:46px;height:46px;border-radius:13px;border:1px solid rgba(0,240,255,.35);background:#08021480;color:#bff9ff;font-size:18px;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 18px #0006;display:flex;align-items:center;justify-content:center;transition:all .15s}.hud-pause:hover{border-color:var(--cyan);background:#00f0ff2e;color:#fff}.toast{position:absolute;top:120px;left:50%;transform:translate(-50%);z-index:30;pointer-events:none;display:flex;align-items:center;gap:11px;padding:12px 18px;border-radius:13px;background:#0c041ce0;border:1px solid rgba(0,240,255,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-family:Rajdhani,sans-serif;font-weight:600;font-size:15px;white-space:nowrap;box-shadow:0 10px 30px #00000080,0 0 24px #00f0ff33;transition:opacity .5s,transform .5s}.toast-out{opacity:0;transform:translate(-50%) translateY(-12px)}.pause-screen{z-index:20}.pause-panel{width:min(420px,90vw);text-align:center}.pause-main,.pause-save{display:flex;flex-direction:column;gap:12px}.pause-panel .btn-start,.pause-panel .btn-secondary,.pause-panel .btn-download{width:100%}.pause-panel .subtitle{margin-bottom:4px}.hud-prompt{position:absolute;top:14%;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;font-family:Orbitron,sans-serif;font-weight:800;font-size:18px;letter-spacing:3px;padding:11px 22px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .18s}.hud-prompt.show{opacity:1;animation:promptFloat 2.4s ease-in-out infinite}.prompt-listen{color:var(--cyan);border:1.5px solid rgba(0,240,255,.6);background:#00283480;box-shadow:0 0 30px #00f0ff73,0 6px 20px #0006;text-shadow:0 0 14px rgba(0,240,255,.45)}.prompt-sing{color:var(--lime);border:1.5px solid rgba(183,255,0,.6);background:#1c2e0080;box-shadow:0 0 30px #b7ff0073,0 6px 20px #0006;text-shadow:0 0 14px rgba(183,255,0,.45)}.webcam-pip{position:absolute;left:18px;bottom:18px;width:112px;height:112px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,var(--cyan),var(--magenta),var(--orange),var(--lime),var(--cyan));box-shadow:0 0 24px #ff2bd673;z-index:5;pointer-events:none;animation:ringSpin 8s linear infinite}.webcam-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,#241038,#0e0622);animation:ringSpin 8s linear infinite reverse}.webcam-vid{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000}.hud-judgement{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(56px,10vw,120px);letter-spacing:4px;opacity:0;pointer-events:none;-webkit-text-stroke:1.5px rgba(255,255,255,.25)}.hud-judgement.show{animation:judgePop .9s ease-out}.grade-perfect{color:var(--lime);text-shadow:0 0 30px rgba(183,255,0,.7),0 0 80px rgba(183,255,0,.7)}.grade-good{color:var(--cyan);text-shadow:0 0 30px rgba(0,240,255,.7),0 0 80px rgba(0,240,255,.7)}.grade-miss{color:#ff3b6b;text-shadow:0 0 30px rgba(255,59,107,.7),0 0 80px rgba(255,59,107,.7)}.pitch-meter{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:54px;height:min(58vh,440px);background:#0802146b;border:1px solid rgba(255,255,255,.16);border-radius:27px;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 30px #00000073}.pitch-meter-note{position:absolute;left:0;right:0;top:9px;z-index:3;text-align:center;font-family:Orbitron,sans-serif;font-weight:800;font-size:13px;color:var(--lime);text-shadow:0 0 10px rgba(183,255,0,.6)}.pitch-meter-guide{position:absolute;left:8px;right:8px;top:50%;height:1px;background:#ffffff1f}.pitch-meter-band{position:absolute;left:6px;right:6px;border-radius:14px;background:linear-gradient(180deg,#b7ff0047,#b7ff0024);border:1px solid rgba(183,255,0,.55);box-shadow:0 0 18px #b7ff0059 inset;transition:opacity .2s}.pitch-meter-marker{position:absolute;left:50%;width:26px;height:26px;z-index:4;transform:translate(-50%,-50%);border-radius:50%;background:var(--orange);border:2px solid rgba(255,255,255,.5);box-shadow:0 0 20px #ff8c42cc;transition:top .12s linear,background .15s,box-shadow .15s}.pitch-meter-marker.on-target{background:var(--lime);box-shadow:0 0 20px #b7ff00cc}.karaoke-bar{position:absolute;left:50%;bottom:14%;transform:translate(-50%);width:min(880px,86vw);pointer-events:none;text-align:center}.karaoke-bar:before{content:"";position:absolute;top:-18px;right:-34px;bottom:-18px;left:-34px;z-index:0;border-radius:30px;background:radial-gradient(60% 130% at 50% 50%,rgba(6,1,16,.72),transparent 75%)}.kbar-current{position:relative;z-index:1;font-family:Rajdhani,sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,52px);letter-spacing:.5px;line-height:1.08;filter:drop-shadow(0 3px 16px rgba(0,0,0,.8));min-height:1.08em}.kbar-next{position:relative;z-index:1;font-family:Rajdhani,sans-serif;font-weight:600;font-size:clamp(15px,2vw,22px);opacity:.5;margin-top:8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8);min-height:1em}.kbar-syl{white-space:pre;--p: 0;--hi: var(--lime);--dim: rgba(255, 255, 255, .55);background:linear-gradient(90deg,var(--hi) calc(var(--p) * 100%),var(--dim) calc(var(--p) * 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.kbar-golden{--hi: var(--orange);--dim: rgba(255, 140, 66, .5)}.karaoke-countin{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(120px,22vw,260px);line-height:1;background:linear-gradient(180deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 40px rgba(0,240,255,.5));pointer-events:none;opacity:0;z-index:12}.karaoke-countin.show{opacity:1}.karaoke-countin.pop{animation:countPop .72s ease-out}.yt-pip{position:absolute;top:78px;right:16px;z-index:6;width:280px;aspect-ratio:16 / 9;border-radius:14px;overflow:hidden;border:1.5px solid rgba(0,240,255,.45);box-shadow:0 0 26px #00f0ff59,0 12px 30px #0000008c;background:#06010f;transform:translateY(0);transition:width .6s ease,top .6s ease,right .6s ease,transform .6s ease,box-shadow .6s ease,border-radius .6s ease,border-width .6s ease}.yt-pip iframe{width:100%;height:100%;display:block;border:0}.yt-pip.centered{top:50%;right:calc(50% - min(34vw,380px));width:min(68vw,760px);transform:translateY(-50%);border-radius:18px;border-width:2px;box-shadow:0 0 50px #00f0ff66,0 24px 60px #0009}.yt-wait-hint{position:absolute;bottom:12%;left:50%;transform:translate(-50%);z-index:12;pointer-events:none;text-align:center;font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(18px,3vw,30px);letter-spacing:1px;color:var(--cyan);padding:16px 26px;border-radius:14px;background:#0a0118b3;border:1px solid rgba(0,240,255,.5);text-shadow:0 0 18px rgba(0,240,255,.7);animation:hint-pulse 1.6s ease-in-out infinite}@keyframes hint-pulse{50%{opacity:.55}}.yt-skip{position:absolute;top:200px;right:156px;transform:translate(50%);z-index:13;pointer-events:auto;cursor:pointer;font-family:Orbitron,sans-serif;font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:7px 14px;border-radius:999px;color:#06121a;border:none;background:linear-gradient(95deg,var(--cyan),var(--lime));animation:skipPulse 1.8s infinite;transition:filter .12s}.yt-skip:hover{filter:brightness(1.1)}.results-panel{width:min(620px,94vw)}.grade{font-family:Orbitron;font-size:88px;font-weight:900;line-height:1;margin:8px 0 18px}.grade-S{color:var(--lime);text-shadow:0 0 30px var(--lime)}.grade-A{color:var(--cyan);text-shadow:0 0 30px var(--cyan)}.grade-B{color:var(--orange);text-shadow:0 0 24px var(--orange)}.grade-C,.grade-D{color:#fff}.grade-F{color:#ff2b4d;text-shadow:0 0 24px #ff2b4d}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.results-grid>div{display:flex;flex-direction:column;gap:2px}.r-label{font-size:12px;letter-spacing:1px;opacity:.6}.r-value{font-family:Orbitron;font-size:24px;font-weight:700;color:var(--cyan)}.replay{width:100%;border-radius:12px;margin-bottom:16px;border:1px solid rgba(0,240,255,.3);background:#000;max-height:38vh}.results-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn-download{font-family:Orbitron;font-weight:700;font-size:15px;padding:13px 26px;border-radius:10px;text-decoration:none;background:linear-gradient(90deg,var(--cyan),var(--lime));color:#04121a;letter-spacing:1px;box-shadow:0 0 20px #00f0ff66}.btn-download:hover{filter:brightness(1.1)}@media(max-width:760px){.menu-screen{padding:16px 14px 40px}.menu-side{max-width:none}.song-grid{max-height:none}}@media(max-width:640px){.start-panel{padding:22px 18px;width:94vw}.title{font-size:40px;letter-spacing:2px}.subtitle{font-size:13px;margin-bottom:16px}.song-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.hud-top{padding:12px;gap:10px}.hud-chip{padding:6px 11px}.chip-cyan{padding:6px 12px}.hud-score{font-size:22px}.hud-streak,.hud-acc{font-size:18px}.pip{width:12px;height:12px}.hud-pause{width:40px;height:40px}.hud-judgement{font-size:clamp(40px,13vw,72px)}.hud-prompt{font-size:15px;letter-spacing:2px;padding:9px 16px}.pitch-meter{right:10px;width:40px;height:min(50vh,360px);border-radius:20px}.pitch-meter-marker{width:22px;height:22px}.pitch-meter-note{font-size:11px}.karaoke-bar{bottom:13%;width:min(560px,80vw)}.karaoke-countin{font-size:clamp(80px,28vw,170px)}.webcam-pip{width:96px;height:96px;bottom:14px;left:14px}.yt-pip{width:168px;top:64px;right:10px}.yt-skip{top:150px;right:94px}}@media(max-width:420px){.webcam-pip{display:none}}