:root{--bg-1: #070f1b;--bg-2: #17254f;--lane: rgba(255, 255, 255, .08);--lane-border: rgba(255, 255, 255, .22);--line: #fff5a8;--note-a: #57f0da;--note-b: #ff7ba8;--text: #f2f5ff;--good: #75e3ff;--great: #63ff9d;--perfect: #ffe175;--miss: #ff7676}*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;font-family:Zen Kaku Gothic New,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 20%,rgba(0,235,255,.18),transparent 40%),radial-gradient(circle at 80% 10%,rgba(255,102,175,.2),transparent 35%),linear-gradient(150deg,var(--bg-1),var(--bg-2));display:grid;place-items:center;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.bg-glow{position:fixed;top:-25%;right:-25%;bottom:-25%;left:-25%;background:conic-gradient(from 120deg,transparent,rgba(255,255,255,.07),transparent 30%);animation:spin 10s linear infinite;pointer-events:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app{width:min(960px,96vw);display:grid;gap:10px;z-index:1;margin-top:-8px}.topbar{display:flex;justify-content:space-between;align-items:end;gap:16px}.title-wrap h1{margin:0;font:700 1.6rem Kanit,sans-serif;letter-spacing:.03em}.title-wrap p{margin:4px 0 0;opacity:.85}.status{display:grid;grid-template-columns:repeat(3,minmax(126px,1fr));gap:10px;justify-items:stretch;width:min(560px,100%)}.status div{min-width:0;padding:8px 10px;border:1px solid var(--lane-border);background:#0000003d;border-radius:10px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.label{display:block;opacity:.72;font-size:.78rem}.playfield-wrap{display:grid;place-items:center}.playfield{position:relative;width:min(700px,96vw);height:min(68vh,680px);border:2px solid var(--lane-border);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#ffffff14,#ffffff05),repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 8px,transparent 8px,transparent 16px);perspective:1200px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.track-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,#a1e0ff1f,#20275e47 35%,#0a0e1e70);will-change:clip-path;transform:translateZ(0)}.track-perspective{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.lane-fill{opacity:.32}.lane-fill-1,.lane-fill-3{fill:#53e4ff38}.lane-fill-2,.lane-fill-4{fill:#ff7bb433}.lane-sep{stroke:#ffffffb8;stroke-width:1.2}.lane-sep.outer{stroke:#ffffffd9;stroke-width:1.6}.track-grid{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 1px,transparent 1px,transparent 22px),linear-gradient(to right,#ffffff12,#ffffff12);transform-origin:top center;transform:perspective(900px) rotateX(7deg);opacity:.3;animation:trackFlow 1.6s linear infinite}.track-gloss{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(130deg,rgba(255,255,255,.14),transparent 38%),linear-gradient(350deg,rgba(0,250,255,.09),transparent 45%)}@keyframes trackFlow{0%{background-position:0 0,0 0}to{background-position:0 22px,0 0}}.lanes{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);z-index:3;transform:translateZ(0)}.lane{border:none;background:transparent;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;touch-action:none}.judge-line{position:absolute;left:var(--judge-line-left, 10%);right:var(--judge-line-right, 10%);bottom:var(--judge-line-bottom, 110px);height:5px;background:var(--line);box-shadow:0 0 22px #fff5a8f2;z-index:6;border-radius:2px}.note-poly{fill:var(--note-a);opacity:.95;stroke:#ffffffe6;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(87,240,218,.4))}.note-poly.alt{fill:var(--note-b);filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,123,168,.4))}.note-poly.long,.note-poly.long.alt{fill:#ffe175;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,225,117,.5))}.cue{position:absolute;inset:0 auto auto 50%;transform:translate(-50%,34px) scale(1);font:700 2rem Kanit,sans-serif;letter-spacing:.06em;color:#f8fcff;text-shadow:0 0 24px rgba(138,250,255,.95);z-index:8;transition:opacity .22s ease,transform .22s ease;pointer-events:none}.mobile-song-chip{display:none;position:absolute;right:8px;top:8px;z-index:9;max-width:68%;padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:#070e1e9e;font:700 .78rem Zen Kaku Gothic New,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-entry-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9999;background:radial-gradient(ellipse at center,#1a1a2e,#0a0a14);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.mobile-entry-content{text-align:center;animation:entry-pulse 2s ease-in-out infinite}.mobile-entry-icon{font-size:64px;margin-bottom:24px}.mobile-entry-text{font-size:22px;color:#ffffffe6;letter-spacing:2px;font-weight:600}@keyframes entry-pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}body[data-ui-mode=mobile]{overflow:hidden;padding:0;margin:0;height:100vh;height:100dvh;height:-webkit-fill-available;min-height:0;display:block}body[data-ui-mode=mobile] .app{position:fixed;top:0;right:0;bottom:0;left:0;padding:0;margin:0;gap:0;display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:100%}.portrait-message{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:linear-gradient(150deg,var(--bg-1),var(--bg-2));flex-direction:column;align-items:center;justify-content:center;gap:20px;color:var(--text);text-align:center}.portrait-message-icon{font-size:56px;animation:rotate-hint 2s ease-in-out infinite}@keyframes rotate-hint{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.portrait-message-text{font-size:18px;font-weight:600;letter-spacing:1px;line-height:1.6}@media (orientation: portrait){body[data-ui-mode=mobile] .portrait-message{display:flex!important}body[data-ui-mode=mobile] .app,body[data-ui-mode=mobile] .bg-glow{display:none!important}}body[data-ui-mode=mobile] .topbar{flex-direction:column;align-items:flex-start;gap:6px}body[data-ui-mode=mobile] .title-wrap h1{font-size:1.02rem;letter-spacing:.01em}body[data-ui-mode=mobile] .title-wrap p{font-size:.74rem}body[data-ui-mode=mobile] .status{grid-template-columns:1fr 1fr;width:100%;gap:5px}body[data-ui-mode=mobile] .status div{padding:5px 7px;border-radius:8px}body[data-ui-mode=mobile] .song-select-desktop{display:none}body[data-ui-mode=mobile] .label{font-size:.68rem}body[data-ui-mode=mobile] .status span{font-size:.82rem}body[data-ui-mode=mobile] select{width:100%;font-size:.78rem;padding:3px 5px}body[data-ui-mode=mobile] .playfield-wrap{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden}body[data-ui-mode=mobile] .playfield{width:100%!important;flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important;border-width:1px;border-radius:0;--judge-line-bottom: 50px}body[data-ui-mode=mobile] .mobile-song-chip{display:block;right:6px;top:6px;font-size:.72rem;max-width:72%}body[data-ui-mode=mobile] .cue{font-size:1.35rem;transform:translate(-50%,16px) scale(1)}body[data-ui-mode=mobile] .countdown-overlay{font-size:3.2rem}body[data-ui-mode=mobile] .hit-feedback{font-size:1.2rem;bottom:calc(var(--judge-line-bottom, 50px) + 10px)}.mobile-toolbar{display:none}body[data-ui-mode=mobile] .mobile-toolbar{display:flex;align-items:center;gap:4px;width:100%;padding:0 2px;flex-shrink:0}body[data-ui-mode=mobile] .mobile-toolbar-btn{flex-shrink:0;padding:6px 10px;font-size:.75rem;font-weight:700;min-height:36px;white-space:nowrap;border-radius:8px}body[data-ui-mode=mobile] .mobile-toolbar-select{flex:1;min-width:0;font-size:.75rem;padding:4px 6px;min-height:36px;border-radius:8px;overflow:hidden;text-overflow:ellipsis}body[data-ui-mode=mobile] button{padding:6px 8px;font-size:.8rem;border-radius:8px}body[data-ui-mode=mobile] .settings-card{width:min(360px,96vw);padding:12px}body[data-ui-mode=mobile] .settings-card h2{margin-bottom:8px;font-size:1rem}body[data-ui-mode=mobile] .speed-row{margin:6px 0 10px;gap:8px}.countdown-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 5rem Kanit,sans-serif;letter-spacing:.06em;color:#fff;text-shadow:0 0 26px rgba(123,247,255,.95),0 0 44px rgba(255,255,255,.5);z-index:11;transition:opacity .14s ease;pointer-events:none}.countdown-overlay.hidden{opacity:0}.hit-feedback{position:absolute;left:50%;bottom:calc(var(--judge-line-bottom, 110px) + 18px);transform:translate(-50%) scale(1);font:700 2rem Kanit,sans-serif;letter-spacing:.05em;color:var(--perfect);text-shadow:0 0 20px rgba(255,255,255,.7);z-index:8;transition:opacity .18s ease,transform .18s ease;pointer-events:none}.cue.hidden,.hit-feedback.hidden{opacity:0;transform:translate(-50%,8px) scale(.95)}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:12;background:#040712ad;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:center}.result-overlay.hidden{display:none}.result-card{width:min(430px,86vw);text-align:center;padding:22px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,#101c3cf2,#0b1225f2);box-shadow:0 14px 30px #00000073}.result-state{margin:0;font:700 2.1rem Kanit,sans-serif;letter-spacing:.04em}.result-rank{margin:4px 0 0;font:700 1.7rem Kanit,sans-serif}.result-score{margin:8px 0 0;font:700 1.2rem Kanit,sans-serif}.result-meta{margin:2px 0 0;opacity:.9}.result-restart{margin-top:14px;width:100%}.controls{display:flex;gap:10px;align-items:center}button{font:700 .95rem Kanit,sans-serif;border-radius:10px;border:1px solid var(--lane-border);padding:8px 16px;color:var(--text);background:#0000003d;touch-action:manipulation;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}button.primary{background:linear-gradient(90deg,#00d4ff,#00ffa3);color:#102035;border:none}.progress{margin-left:auto;opacity:.9}.settings-panel{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-items:start;padding:12px 0;background:#030814a6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20;overflow-y:auto;overscroll-behavior:contain}.settings-panel.hidden{display:none}.settings-card{width:min(420px,92vw);max-height:calc(100dvh - 24px);padding:18px;border-radius:14px;border:1px solid var(--lane-border);background:linear-gradient(180deg,#0e1830f2,#0a1123f2);overflow-y:auto;overscroll-behavior:contain}.settings-card h2{margin:0 0 12px;font:700 1.2rem Kanit,sans-serif}.speed-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:8px 0 16px}#speedRange{width:100%}#speedValue{min-width:44px;text-align:right;font:700 1rem Kanit,sans-serif}.settings-hint{margin:0 0 14px;opacity:.8;font-size:.86rem}.judge-perfect{color:var(--perfect)}.judge-great{color:var(--great)}.judge-good{color:var(--good)}.judge-miss{color:var(--miss)}@media (max-width: 700px){body:not([data-ui-mode=mobile]){overflow-y:auto;overflow-x:hidden;align-items:start;padding:8px 0 14px}.app{width:100vw;padding:0 8px;margin-top:0;gap:8px}.topbar{flex-direction:column;align-items:flex-start;gap:8px}.title-wrap h1{font-size:1.2rem;line-height:1.2}.title-wrap p{font-size:.8rem;margin-top:2px}.status{grid-template-columns:repeat(2,minmax(130px,1fr));width:100%;gap:6px}.status div{padding:6px 8px;border-radius:8px}.status select{width:100%}.song-select-desktop{display:none}.playfield{width:100%;height:min(62vh,560px);border-radius:12px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls .progress{grid-column:1 / -1;margin-left:0;font-size:.86rem}.hit-feedback{font-size:1.7rem}.mobile-song-chip{display:block}}@media (max-width: 460px){.status{grid-template-columns:1fr 1fr}.playfield{height:min(58vh,500px)}.judge-line{height:4px}.countdown-overlay{font-size:4rem}.hit-feedback{font-size:1.4rem}button{padding:7px 10px;font-size:.86rem}}@media (max-width: 390px) and (max-height: 900px){body:not([data-ui-mode=mobile]){padding:4px 0 10px}.app{padding:0 6px;gap:6px}.topbar{gap:6px}.title-wrap h1{font-size:1.02rem;letter-spacing:.01em}.title-wrap p{font-size:.74rem}.status{grid-template-columns:1fr 1fr;gap:5px}.status div{padding:5px 7px}.label{font-size:.68rem}.status span{font-size:.82rem}select{width:100%;font-size:.78rem;padding:3px 5px}.playfield{width:100%;height:min(54vh,460px);border-width:1px;border-radius:10px}.cue{font-size:1.35rem;transform:translate(-50%,16px) scale(1)}.countdown-overlay{font-size:3.2rem}.hit-feedback{font-size:1.2rem;bottom:calc(var(--judge-line-bottom, 110px) + 10px)}.controls{grid-template-columns:1fr 1fr;gap:6px}button{padding:6px 8px;font-size:.8rem;border-radius:8px}.progress{font-size:.78rem}.settings-card{width:min(360px,96vw);padding:12px}.settings-card h2{margin-bottom:8px;font-size:1rem}.speed-row{margin:6px 0 10px;gap:8px}.mobile-song-chip{right:6px;top:6px;font-size:.72rem;max-width:72%}}.category-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}.category-tab{font:600 .72rem Zen Kaku Gothic New,sans-serif;color:var(--text);background:#ffffff0f;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:3px 8px;min-height:26px;cursor:pointer;transition:background .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent}.category-tab:hover{background:#ffffff1f;border-color:#ffffff4d}.category-tab.active{background:linear-gradient(90deg,#00d4ff40,#00ffa333);border-color:#00d4ff99;color:#e0fcff}select{width:170px;font:600 .88rem Zen Kaku Gothic New,sans-serif;color:var(--text);background:#00000040;border:1px solid var(--lane-border);border-radius:8px;padding:4px 6px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:36px}@media (max-width: 480px){.app{gap:6px;margin-top:0}.topbar{gap:8px}.title-wrap h1{font-size:1.2rem}.title-wrap p{font-size:.78rem}.keyboard-hint{display:none}.status{grid-template-columns:repeat(2,1fr);gap:6px}.status div{padding:6px 8px;font-size:.9rem}.label{font-size:.7rem}.playfield{height:62svh;--judge-line-bottom: 80px}.judge-line{bottom:var(--judge-line-bottom, 80px)}.hit-feedback{font-size:1.4rem;bottom:calc(var(--judge-line-bottom, 80px) + 14px)}.controls{gap:8px}button{padding:10px 14px;font-size:.88rem}select{width:140px;font-size:.82rem}}@media (max-height: 500px) and (orientation: landscape){.app{gap:4px;margin-top:0}.topbar{flex-direction:row;align-items:center;gap:8px}.title-wrap h1{font-size:1rem}.title-wrap p{display:none}.status{grid-template-columns:repeat(3,1fr);gap:4px;width:auto}.status div{padding:4px 6px;font-size:.8rem}.playfield{height:58svh;--judge-line-bottom: 70px}.controls{gap:6px}button{padding:6px 12px;min-height:36px;font-size:.85rem}}.result-new-best{color:var(--perfect);font-size:1.1rem;font-weight:800;letter-spacing:.06em;margin:4px 0;animation:newBestPulse 1s ease-in-out infinite alternate}@keyframes newBestPulse{0%{opacity:.75;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}.result-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}.result-ranking-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:var(--text);border-radius:8px;padding:10px 18px;cursor:pointer;font-weight:700;font-size:.9rem}.result-ranking-btn:hover{background:#ffffff2e}.ranking-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:16px}.ranking-card{background:linear-gradient(160deg,#0e162df7,#161230f7);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:20px 24px;max-width:min(740px,96vw);width:100%;max-height:88vh;overflow-y:auto;color:var(--text)}.ranking-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.ranking-title{font-size:1.2rem;font-weight:800;letter-spacing:.04em;margin:0;color:var(--perfect)}.ranking-close{background:#ffffff1a;border:1px solid rgba(255,255,255,.25);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--text);font-size:.9rem;padding:0}.ranking-song-select{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.ranking-label{font-size:.8rem;color:#fff9;white-space:nowrap}.ranking-select{flex:1;min-width:180px;background:#ffffff0f;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text);padding:6px 10px;font-size:.85rem}.ranking-song-info{font-size:.78rem;color:#ffffff80;margin:0 0 12px}.ranking-empty{color:#ffffff73;font-size:.88rem;text-align:center;padding:20px 0}.ranking-table{width:100%;border-collapse:collapse;font-size:.82rem}.ranking-table th{text-align:left;color:#ffffff80;font-weight:600;font-size:.72rem;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.12)}.ranking-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}.ranking-row-best td{background:#ffe1640f}.ranking-cell-rank{font-size:1rem;text-align:center;width:32px}.ranking-cell-score{font-weight:700;font-size:.9rem;color:var(--perfect)}.ranking-rank-badge{font-weight:700;font-size:.78rem}.ranking-rank-badge.rank-S{color:#ffe175}.ranking-rank-badge.rank-A{color:#57f0da}.ranking-rank-badge.rank-B{color:#63ff9d}.ranking-rank-badge.rank-C{color:#75e3ff}.ranking-rank-badge.rank-D{color:#aaa}.ranking-judges{font-size:.76rem;white-space:nowrap}.judge-p{color:var(--perfect)}.judge-g{color:var(--great)}.judge-go{color:var(--good)}.judge-m{color:var(--miss)}.ranking-date{font-size:.72rem;color:#ffffff73;white-space:nowrap}.ranking-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.ranking-btn-clear{background:#ff646426;border:1px solid rgba(255,100,100,.35);color:#ff9090;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:.82rem}.ranking-btn-clear:hover{background:#ff646440}.ranking-btn-close{padding:8px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:700;font-size:.88rem}