:root{--color-sky:#38b6d8;--color-sky-deep:#1f6475;--color-body-yellow:#ffd538;--color-body-yellow-glow:#ffd53873;--color-eye-orange:#f26b38;--color-mouth-teal:#1f6475;--color-white:#fffdf6;--color-shadow:#18526659;--dock-bg:#184c5c8c;--dock-border:#ffffff47;--font-family:system-ui, -apple-system, "SF Pro Rounded", "M PLUS Rounded 1c", sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{touch-action:manipulation;background-color:var(--color-sky);width:100%;height:100%;font-family:var(--font-family);color:var(--color-white);-webkit-text-size-adjust:100%;position:fixed;inset:0;overflow:hidden}#mv-canvas{touch-action:none;z-index:1;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.overlay{-webkit-backdrop-filter:blur(14px);z-index:50;background:#1f6475b8;justify-content:center;align-items:center;transition:opacity .5s cubic-bezier(.2,.8,.2,1),visibility .5s;display:flex;position:fixed;inset:0}.overlay:not(.active){opacity:0;visibility:hidden;pointer-events:none}.start-card{text-align:center;box-shadow:0 24px 48px var(--color-shadow);background:#fffdf629;border:1.5px solid #ffffff59;border-radius:32px;flex-direction:column;align-items:center;width:90%;max-width:360px;padding:38px 42px;animation:3.2s ease-in-out infinite alternate cardFloat;display:flex;position:relative}.start-close-btn{color:#fff;cursor:pointer;z-index:5;background:#00000040;border:1.5px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:900;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;display:flex;position:absolute;top:14px;right:14px}.start-close-btn:hover{background:#00000073;transform:scale(1.15)}.start-close-btn:active{transform:scale(.9)}@keyframes cardFloat{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.avatar-preview{background:#38b6d8;border:3.5px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:116px;height:116px;margin-bottom:20px;display:flex;overflow:hidden;box-shadow:0 10px 28px #18526659}.preview-img{object-fit:contain;width:76%;height:76%}.title{letter-spacing:2px;color:var(--color-body-yellow);text-shadow:0 4px 14px #1852664d;margin-bottom:4px;font-size:40px;font-weight:900}.tagline{color:var(--color-white);opacity:.92;letter-spacing:.5px;margin-bottom:20px;font-size:14px;font-weight:600}.diff-selector{background:#00000038;border:1px solid #ffffff29;border-radius:40px;gap:6px;width:100%;max-width:280px;margin-bottom:22px;padding:4px;display:flex}.diff-btn{color:#ffffffb3;letter-spacing:.8px;cursor:pointer;background:0 0;border:none;border-radius:30px;flex:1;padding:7px 14px;font-size:12px;font-weight:800;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.diff-btn:hover{color:#fff;background:#ffffff14}.diff-btn.active[data-diff=easy]{color:#064030;background:#1dd1a1;box-shadow:0 2px 10px #1dd1a173}.diff-btn.active[data-diff=normal]{background:var(--color-body-yellow);color:var(--color-mouth-teal);box-shadow:0 2px 10px #ffd53873}.diff-btn.active[data-diff=hard]{color:#fff;background:#ff6b8b;box-shadow:0 2px 10px #ff6b8b80}.skin-selector{background:#0000002e;border:1px solid #ffffff24;border-radius:30px;justify-content:center;align-items:center;gap:10px;margin-bottom:22px;padding:6px 14px;display:flex}.skin-label{letter-spacing:1px;color:#ffffffb3;font-size:10.5px;font-weight:900}.skin-dots{align-items:center;gap:8px;display:flex}.skin-btn{background:var(--skin-c);cursor:pointer;border:2px solid #0000;border-radius:50%;width:22px;height:22px;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s;box-shadow:0 2px 6px #00000040}.skin-btn:hover{transform:scale(1.22)}.skin-btn.active{box-shadow:0 0 10px var(--skin-c), 0 2px 8px #00000059;border-color:#fff;transform:scale(1.28)}.skin-name-badge{letter-spacing:.8px;color:#fff;text-align:center;background:#ffffff29;border:1px solid #fff3;border-radius:12px;min-width:60px;padding:3px 8px;font-size:10px;font-weight:900;transition:all .2s}.start-button{background:var(--color-body-yellow);color:var(--color-mouth-teal);letter-spacing:1px;cursor:pointer;box-shadow:0 8px 24px var(--color-body-yellow-glow);border:none;border-radius:50px;align-items:center;gap:10px;padding:15px 32px;font-size:16px;font-weight:800;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:inline-flex}.start-button:hover{transform:scale(1.06);box-shadow:0 10px 30px #ffd538b3}.start-button:active{transform:scale(.95)}.hint{opacity:.85;margin-top:18px;font-size:13px;font-weight:500}.duo-header{z-index:10;pointer-events:none;justify-content:space-between;align-items:center;gap:16px;display:flex;position:absolute;top:16px;left:20px;right:20px}.duo-header>*{pointer-events:auto}.brand-pill{-webkit-backdrop-filter:blur(12px);cursor:pointer;background:#184c5c80;border:1.5px solid #ffffff40;border-radius:30px;outline:none;flex-shrink:0;align-items:center;gap:8px;padding:8px 16px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s;display:flex;box-shadow:0 4px 16px #00000026}.brand-pill:hover{background:#184c5cbf;transform:scale(1.05);box-shadow:0 6px 20px #00000040}.brand-pill:active{transform:scale(.96)}.brand-dot{background:var(--color-body-yellow);width:10px;height:10px;box-shadow:0 0 12px var(--color-body-yellow);border-radius:50%;animation:2s ease-in-out infinite pulseDot}@keyframes pulseDot{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.brand-title{letter-spacing:1.2px;color:#fff;font-size:14px;font-weight:900}.groove-progress-wrapper{background:#00000047;border:1.5px solid #ffffff40;border-radius:12px;flex:1;max-width:320px;height:14px;padding:2px;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.groove-progress-bar{background:linear-gradient(90deg,#38b6d8,#ffd538 60%,#ff5277) 0 0/200% 100%;border-radius:10px;height:100%;transition:width .2s cubic-bezier(.2,.8,.2,1);animation:3s infinite alternate grooveGlow;box-shadow:0 0 10px #ffd53899}@keyframes grooveGlow{0%{background-position:0%}to{background-position:100%}}.status-stats{align-items:center;gap:10px;display:flex}.stat-badge{-webkit-backdrop-filter:blur(12px);background:#184c5c80;border:1.5px solid #ffffff40;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 4px 12px #00000026}.stat-badge.bounce{animation:.35s cubic-bezier(.34,1.56,.64,1) badgePop}@keyframes badgePop{0%{transform:scale(1)}50%{transform:scale(1.35)rotate(-3deg)}to{transform:scale(1)}}.stat-icon{font-size:16px;line-height:1}.stat-val{letter-spacing:.5px;color:#fff;font-size:15px;font-weight:900}.stat-badge.hearts .stat-val{color:#ff6b8b}.stat-badge.streak .stat-val{color:#ff9f43}.stat-badge.score .stat-val{color:#54a0ff}.top-actions{gap:8px;display:flex}.glass-round-btn{-webkit-backdrop-filter:blur(12px);width:40px;height:40px;color:var(--color-white);cursor:pointer;background:#184c5c80;border:1.5px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;font-size:16px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;display:flex;box-shadow:0 4px 12px #00000026}.glass-round-btn:hover{background:#184c5cb3;transform:scale(1.1)}.glass-round-btn:active{transform:scale(.92)}.hud-dock-wrapper{z-index:10;pointer-events:none;flex-direction:column;align-items:center;gap:14px;max-width:90%;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.hud-dock-wrapper>*{pointer-events:auto}.rhythm-pad-bar{-webkit-backdrop-filter:blur(14px);background:#184c5c73;border:1.5px solid #ffffff40;border-radius:28px;gap:12px;padding:8px 14px;display:flex;box-shadow:0 12px 32px #12374459}.rhythm-pad{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(#ffd538 0%,#f39c12 100%);border:none;border-radius:18px;justify-content:center;align-items:center;width:58px;height:58px;transition:transform 80ms,box-shadow 80ms,background .15s;display:flex;position:relative;box-shadow:0 6px #b8730e,0 10px 18px #0003}.rhythm-pad:first-child{background:linear-gradient(#ff6b8b 0%,#ee5253 100%);box-shadow:0 6px #b33939,0 10px 18px #0003}.rhythm-pad:nth-child(2){background:linear-gradient(#ff9f43 0%,#f39c12 100%);box-shadow:0 6px #b8730e,0 10px 18px #0003}.rhythm-pad:nth-child(3){background:linear-gradient(#ffd538 0%,#f1c40f 100%);box-shadow:0 6px #b7950b,0 10px 18px #0003}.rhythm-pad:nth-child(4){background:linear-gradient(#1dd1a1 0%,#10ac84 100%);box-shadow:0 6px #0d6d53,0 10px 18px #0003}.rhythm-pad:nth-child(5){background:linear-gradient(#48dbfb 0%,#0abde3 100%);box-shadow:0 6px #077991,0 10px 18px #0003}.rhythm-pad .pad-num{color:#fff;text-shadow:0 2px 4px #0000004d;pointer-events:none;font-size:20px;font-weight:900;line-height:1.1}.pad-sub-key{opacity:.8;color:#fff;pointer-events:none;font-size:9px;font-weight:800;line-height:1}.rhythm-pad:active,.rhythm-pad.active{filter:brightness(1.2);transform:translateY(5px);box-shadow:0 1px #0006,0 4px 10px #0000004d}.pad-divider{background:#ffffff38;width:1.5px;height:38px;margin:0 4px}.rhythm-sling-btn{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;border:none;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:68px;height:58px;padding:0 8px;transition:transform 80ms,box-shadow 80ms,filter .15s;display:flex;position:relative}.rhythm-sling-btn.poyon{background:linear-gradient(#1dd1a1 0%,#10ac84 100%);box-shadow:0 6px #0d6d53,0 10px 18px #0003}.rhythm-sling-btn.bion{background:linear-gradient(#ff6b8b 0%,#e84393 100%);box-shadow:0 6px #a91f5e,0 10px 18px #0003}.rhythm-sling-btn .sling-icon{font-size:15px;line-height:1}.rhythm-sling-btn .sling-text{color:#fff;letter-spacing:.5px;text-shadow:0 1px 3px #0000004d;font-size:11px;font-weight:900;line-height:1.1}.sling-sub-key{opacity:.85;color:#fff;letter-spacing:.3px;pointer-events:none;background:#0003;border-radius:4px;padding:1px 4px;font-size:8.5px;font-weight:800}.rhythm-sling-btn:active,.rhythm-sling-btn.active{filter:brightness(1.2);transform:translateY(5px);box-shadow:0 1px #0006,0 4px 10px #0000004d}.pill-dock{background:var(--dock-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--dock-border);border-radius:50px;align-items:center;gap:12px;padding:8px 14px 8px 10px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 16px 36px #12374459}.pill-dock:hover{transform:translateY(-2px)}.dock-play-btn{background:var(--color-body-yellow);width:44px;height:44px;color:var(--color-mouth-teal);cursor:pointer;box-shadow:0 4px 14px var(--color-body-yellow-glow);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex}.dock-play-btn:hover{transform:scale(1.1);box-shadow:0 6px 18px #ffd538a6}.dock-play-btn:active{transform:scale(.92)}.dock-segment-group{background:#00000029;border-radius:30px;gap:4px;padding:4px;display:flex}.dock-segment-btn{color:#fffc;letter-spacing:.6px;cursor:pointer;background:0 0;border:none;border-radius:20px;padding:8px 16px;font-size:12px;font-weight:700;transition:all .22s cubic-bezier(.34,1.56,.64,1)}.dock-segment-btn:hover{color:#fff}.dock-segment-btn.active{background:var(--color-white);color:var(--color-mouth-teal);transform:scale(1.02);box-shadow:0 2px 8px #12374440}.dock-segment-btn[data-mode=fever].active{color:#fff;background:linear-gradient(135deg,#ffd538,#ff6b8b);box-shadow:0 4px 12px #ff6b8b66}.dock-eq-visualizer{align-items:flex-end;gap:3px;height:18px;padding:0 6px;display:flex}.eq-bar{background:var(--color-body-yellow);border-radius:3px;width:3.5px;height:6px;transition:height 80ms}.hint-chips{opacity:.85;flex-wrap:wrap;justify-content:center;gap:8px;transition:opacity .2s;display:flex}.chip{-webkit-backdrop-filter:blur(8px);background:#184c5c59;border:1px solid #ffffff29;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:600;display:flex}.chip kbd{background:#ffffff40;border-radius:4px;padding:2px 5px;font-size:9px;font-weight:800}@media (width<=680px){.hint-chips{display:none}.duo-header{justify-content:space-between;gap:4px;top:8px;left:8px;right:8px}.brand-pill{gap:4px;padding:4px 8px}.brand-dot{width:8px;height:8px}.brand-title{letter-spacing:.5px;font-size:11px}@media (width<=440px){.brand-title{display:none}.brand-pill{padding:6px 8px}}.groove-progress-wrapper{border-radius:8px;min-width:36px;max-width:70px;height:10px;padding:1.5px}.status-stats{gap:4px}.stat-badge{border-radius:14px;gap:3px;padding:4px 6px}.stat-badge .stat-icon{font-size:11px}.stat-badge .stat-val{font-size:11.5px}.top-actions{gap:4px}.glass-round-btn{width:32px;height:32px;font-size:13px}.hud-dock-wrapper{gap:8px;width:98%;max-width:440px;bottom:12px}.rhythm-pad-bar{border-radius:20px;justify-content:space-between;gap:4px;width:100%;padding:6px}.rhythm-pad{border-radius:12px;flex:1 1 0;min-width:0;max-width:46px;height:48px;box-shadow:0 4px #00000040}.rhythm-pad .pad-num{font-size:17px}.pad-sub-key{display:none}.pad-divider{height:28px;margin:0 1px}.rhythm-sling-btn{border-radius:12px;flex:1.25 1 0;min-width:0;max-width:58px;height:48px;padding:0 2px;box-shadow:0 4px #00000040}.rhythm-sling-btn .sling-icon{font-size:13px}.rhythm-sling-btn .sling-text{font-size:9.5px}.sling-sub-key{display:none}.pill-dock{border-radius:30px;justify-content:space-between;width:100%;padding:5px 8px}.dock-play-btn{width:34px;height:34px;font-size:13px}.dock-segment-btn{padding:5px 9px;font-size:10px}.dock-eq-visualizer{display:none}.result-card{border-radius:26px;width:92%;max-width:330px;max-height:92vh;padding:20px 18px 16px;overflow-y:auto}.result-badge-wrap{gap:6px;margin-bottom:8px}.result-title-badge{margin-bottom:0;padding:3px 12px;font-size:11px}.result-diff-pill{padding:3px 8px;font-size:9.5px}.result-char-preview{width:82px;height:82px;margin-bottom:8px}.result-avatar{padding:10px}.rank-circle{width:36px;height:36px;font-size:18px}.result-score-block{margin-bottom:10px}.result-score-num{font-size:30px}.result-grid{gap:6px;margin-bottom:14px}.result-stat-item{border-radius:12px;padding:6px 8px}.result-stat-item .lbl{font-size:8.5px}.result-stat-item .val{font-size:14px}.result-actions{gap:8px}.action-btn{padding:10px 14px;font-size:12.5px}}#result-overlay{z-index:60}.result-card{text-align:center;-webkit-backdrop-filter:blur(24px);background:#123e4dd1;border:1.5px solid #ffffff61;border-radius:36px;flex-direction:column;align-items:center;width:90%;max-width:400px;padding:32px 34px 28px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);animation:3.6s ease-in-out infinite alternate resultFloat;display:flex;transform:scale(.92);box-shadow:0 24px 64px #0a242eb3,0 0 50px #ffd5382e}#result-overlay.active .result-card{transform:scale(1)}@keyframes resultFloat{0%{transform:translateY(0)}to{transform:translateY(-6px)}}.result-badge-wrap{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:16px;display:flex}.result-title-badge{letter-spacing:2px;text-transform:uppercase;border-radius:30px;margin-bottom:0;padding:7px 20px;font-size:14px;font-weight:900}.result-diff-pill{letter-spacing:1.2px;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);border:1px solid #ffffff40;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:900}.result-diff-pill.easy{color:#1dd1a1;background:#1dd1a138;border-color:#1dd1a180}.result-diff-pill.normal{color:#ffd538;background:#ffd53838;border-color:#ffd53880}.result-diff-pill.hard{color:#ff6b8b;background:#ff6b8b40;border-color:#ff6b8b80}.result-title-badge.clear{color:#124250;background:linear-gradient(135deg,#ffd538 0%,#ff6b8b 100%);animation:1.8s ease-in-out infinite alternate badgePulse;box-shadow:0 4px 18px #ffd5388c,0 2px #df4e70}.result-title-badge.full-combo{color:#0b3c47;background:linear-gradient(135deg,#00e5ff 0%,#1dd1a1 100%);animation:1.4s ease-in-out infinite alternate badgePulse;box-shadow:0 4px 20px #00e5ff99,0 2px #0d8272}.result-title-badge.all-perfect{color:#124250;background:linear-gradient(135deg,#ff6b8b,#ffd538,#1dd1a1,#00e5ff,#a29bfe) 0 0/300% 300%;animation:3s infinite rainbowBadge,1.2s ease-in-out infinite alternate badgePulse;box-shadow:0 4px 24px #ffd538b3}@keyframes rainbowBadge{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.result-title-badge.retire{color:#fff;background:#ffffff2e;border:1px solid #ffffff59;box-shadow:0 4px 12px #0003}@keyframes badgePulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.result-char-preview{width:106px;height:106px;margin-bottom:14px;position:relative}.result-avatar{object-fit:contain;box-sizing:border-box;background:#38b6d8;border:3.5px solid #fff;border-radius:50%;width:100%;height:100%;padding:14px;box-shadow:0 10px 24px #0a2a3666,0 0 24px #ffd53859}.rank-circle{border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;font-weight:900;display:flex;position:absolute;bottom:-4px;right:-6px;box-shadow:0 4px 12px #00000059}.rank-circle.rank-s{color:#4a2800;background:linear-gradient(135deg,#ffe066,#f90);box-shadow:0 0 20px #ffc800d9}.rank-circle.rank-a{color:#fff;background:linear-gradient(135deg,#48dbfb,#10ac84);box-shadow:0 0 14px #10ac8499}.rank-circle.rank-b{color:#fff;background:linear-gradient(135deg,#a29bfe,#6c5ce7);box-shadow:0 0 14px #6c5ce799}.rank-circle.rank-c{color:#fff;background:linear-gradient(135deg,#b2bec3,#636e72)}.result-score-block{margin-bottom:16px}.result-score-label{letter-spacing:1.8px;opacity:.85;margin-bottom:2px;font-size:11px;font-weight:800}.result-score-num{color:var(--color-body-yellow);text-shadow:0 4px 18px #ffd53880;letter-spacing:1px;font-size:40px;font-weight:900;line-height:1.1}.result-best-badge{letter-spacing:1px;color:#ffd538;background:#ffd53833;border:1px solid #ffd53880;border-radius:20px;margin-top:4px;margin-bottom:4px;padding:3px 12px;font-size:11px;font-weight:900;animation:1.2s ease-in-out infinite alternate badgePulse;display:none;box-shadow:0 0 12px #ffd53866}.result-best-row{opacity:.85;justify-content:center;align-items:center;gap:6px;margin-top:3px;display:flex}.result-best-row .best-lbl{letter-spacing:1px;color:#fffc;font-size:10px;font-weight:800}.result-best-row .best-num{color:#ffd538;font-size:13px;font-weight:900}.result-grid{grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-bottom:20px;display:grid}.result-stat-item{background:#ffffff1f;border:1px solid #ffffff2e;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;padding:10px 12px;transition:transform .2s,background .2s;display:flex}.result-stat-item:hover{background:#ffffff2e;transform:translateY(-2px)}.result-stat-item.stat-combo{border-bottom:3px solid #ff9f43}.result-stat-item.stat-hearts{border-bottom:3px solid #ff6b8b}.result-stat-item.stat-perfect{border-bottom:3px solid #1dd1a1}.result-stat-item.stat-miss{border-bottom:3px solid #54a0ff}.result-stat-item .lbl{letter-spacing:1px;opacity:.8;margin-bottom:3px;font-size:10px;font-weight:800}.result-stat-item .val{color:#fff;font-size:17px;font-weight:900}.result-actions{flex-direction:column;gap:10px;width:100%;display:flex}.action-btn{letter-spacing:.6px;cursor:pointer;border:none;border-radius:50px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 20px;font-size:14px;font-weight:900;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,background .16s;display:flex}.action-btn.retry-btn{background:var(--color-body-yellow);color:var(--color-mouth-teal);box-shadow:0 4px #dca812,0 8px 24px #ffd53873}.action-btn.retry-btn:hover{transform:translateY(-2px);box-shadow:0 6px #dca812,0 12px 28px #ffd53899}.action-btn.retry-btn:active{transform:translateY(3px);box-shadow:0 1px #dca812,0 4px 12px #ffd5384d}.action-btn.x-share{color:#fff;background:#000;border:1.5px solid #ffffff59;box-shadow:0 4px 14px #00000073}.action-btn.x-share:hover{background:#111;border-color:#fff9;transform:translateY(-2px);box-shadow:0 6px 20px #0009}.action-btn.x-share:active{transform:translateY(1px)}.action-btn.copy-btn{color:#fff;background:#ffffff24;border:1px solid #ffffff47}.action-btn.copy-btn:hover{background:#ffffff3d;transform:translateY(-2px)}.action-btn.copy-btn:active{transform:translateY(1px)}