:root{--cyan: #42c6ee;--gold: #facc15;--orange: #f2842c;--violet: #8c3cc8;--accent: #42c6ee;--ink: #f4f6ff;--font: "Fredoka", "Avenir Next", "Avenir", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--glass: rgba(10, 12, 24, .55);--line: rgba(255, 255, 255, .14)}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#000;font-family:var(--font);color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}#app{position:fixed;inset:0}canvas#gl{display:block;width:100%;height:100%;cursor:grab}canvas#gl:active{cursor:grabbing}button{font-family:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.hidden{display:none!important}#loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#14102a,#05050b 70%);transition:opacity .6s ease;text-align:center}#loader.hide{opacity:0;pointer-events:none}#loader .mark{font-size:min(12vw,60px);font-weight:700;display:flex;align-items:center;gap:.25em}#loader .mark .star{color:var(--gold);animation:spin-star 1.4s ease-in-out infinite}#loader .sub{margin-top:8px;font-size:min(4.4vw,17px);opacity:.75}#loader .dots{margin-top:20px;display:flex;gap:8px}#loader .dots i{width:9px;height:9px;border-radius:50%;background:var(--cyan);animation:bounce 1s ease-in-out infinite}#loader .dots i:nth-child(2){animation-delay:.15s;background:var(--gold)}#loader .dots i:nth-child(3){animation-delay:.3s;background:var(--orange)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes spin-star{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(1.15)}}.noscript{position:fixed;inset:40% 0 auto;text-align:center}.ui{position:fixed;inset:0;pointer-events:none;z-index:10}.ui>*{pointer-events:auto}.start,.endcard{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#2814508c,#000000d1 70%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:72px 16px 24px;box-sizing:border-box;overflow-y:auto;touch-action:pan-y}.start-card{width:min(720px,100%);text-align:center}.title{margin:0;font-size:clamp(38px,8vw,78px);font-weight:700;letter-spacing:.02em;line-height:1;text-shadow:0 0 24px rgba(66,198,238,.55),2px 0 0 rgba(255,40,80,.55),-2px 0 0 rgba(0,240,255,.55)}.title .star{color:var(--gold);text-shadow:0 0 22px rgba(250,204,21,.8)}.sub{margin:14px auto 22px;font-size:clamp(15px,2.4vw,19px);opacity:.85;max-width:34em}.play{font-size:22px;font-weight:700;padding:16px 54px;border-radius:999px;border:0;color:#1b1030;background:linear-gradient(135deg,var(--gold),var(--orange));box-shadow:0 0 0 4px #facc152e,0 10px 40px #f2842c73;transition:transform .12s ease}.play:hover{transform:scale(1.05)}.play:active{transform:scale(.97)}.hint-hp{margin:16px 0 10px;opacity:.8;font-size:15px}.notice{display:inline-flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;padding:10px 16px;border-radius:14px;border:1px solid rgba(250,204,21,.45);background:#facc1514;font-size:15px}.notice strong{color:var(--gold)}.reduce{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.reduce input{width:18px;height:18px;accent-color:var(--gold)}.scene-list{margin:22px auto 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.scene-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);border-left:3px solid var(--chip);background:#ffffff0d;transition:background .15s ease,transform .15s ease}.scene-chip:hover{background:#ffffff1f;transform:translateY(-2px)}.chip-num{font-family:var(--mono);font-size:11px;opacity:.7}.chip-name{font-weight:600;font-size:16px}.chip-genre{font-family:var(--mono);font-size:10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--chip);letter-spacing:.04em}.keys{margin-top:14px;font-size:13px;opacity:.6}.hud{position:absolute;inset:0;pointer-events:none}.hud>*{pointer-events:auto}.label-wrap{position:absolute;left:max(20px,env(safe-area-inset-left));top:76px;pointer-events:none}.label{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.16em;display:flex;gap:1.2em;text-shadow:0 0 10px rgba(0,0,0,.9)}.l-num{opacity:.6}.l-genre{color:var(--accent);text-shadow:0 0 12px var(--accent)}.l-bpm{opacity:.85}.l-sec{margin-top:6px;font-size:13px;opacity:.7;text-shadow:0 0 8px rgba(0,0,0,.9)}.l-prog{margin-top:8px;width:180px;height:2px;background:#ffffff26;overflow:hidden}.l-fill{height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}.controls{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:6px;align-items:center;padding:6px;border-radius:14px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.ctl{min-width:38px;height:38px;border-radius:10px;border:0;background:#ffffff0f;font-size:16px}.ctl:hover{background:#ffffff29}.ctl.mode{font-size:13px;font-weight:600;padding:0 10px}.ctl.mode.jam{color:var(--gold)}.vol{width:84px;accent-color:var(--accent)}.picker{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:76px;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:14px;background:#080a14e0;border:1px solid var(--line);min-width:260px}.pick-item{text-align:left;font-family:var(--mono);font-size:12.5px;padding:10px 12px;border-radius:10px;border:0;border-left:3px solid var(--chip);background:#ffffff0a;white-space:pre}.pick-item:hover,.pick-item.on{background:#ffffff24}.deck{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:14px}.pads{display:grid;grid-template-columns:repeat(8,54px);gap:6px}.pad{height:54px;border-radius:12px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none}.pad-k{font-family:var(--mono);font-size:15px;font-weight:700}.pad-n{font-size:9.5px;letter-spacing:.08em;opacity:.65}.pad:hover{border-color:var(--accent)}.pad.hit{animation:padhit .35s ease-out}@keyframes padhit{0%{background:var(--accent);color:#000;transform:scale(.94)}to{background:var(--glass);transform:scale(1)}}.drop-btn{position:relative;width:104px;height:104px;border-radius:50%;border:2px solid var(--gold);background:radial-gradient(circle at 50% 35%,#facc1540,#140a28bf);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 30px #facc1540;touch-action:none;transition:transform .1s ease,box-shadow .2s ease}.drop-meter{position:absolute;inset:0;background:linear-gradient(0deg,var(--orange),var(--gold));transform-origin:bottom;transform:scaleY(0);opacity:.85}.drop-label{position:relative;font-weight:700;font-size:22px;letter-spacing:.06em}.drop-sub{position:relative;font-size:11px;opacity:.7;font-family:var(--mono)}.drop-btn.holding{transform:scale(.95);box-shadow:0 0 60px #facc15b3}.drop-btn.pending{box-shadow:0 0 80px #ffffffe6}.toast{position:absolute;left:50%;top:76px;transform:translate(-50%);padding:10px 16px;border-radius:12px;background:var(--glass);border:1px solid var(--line);font-size:14px;max-width:min(520px,80vw);text-align:center;pointer-events:none}@media(max-width:820px){.pads{grid-template-columns:repeat(4,46px)}.pad{height:42px}.pad-n{display:none}.drop-btn{width:96px;height:96px}.controls{left:max(12px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 112px);gap:4px;padding:4px}.ctl{min-width:34px;height:34px;font-size:14px}.ctl.mode{font-size:12px;padding:0 8px}.vol{display:none}.picker{left:12px;right:12px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 160px);min-width:0}.deck{left:12px;right:12px;justify-content:space-between}.toast{top:auto;bottom:140px}}@media(max-width:820px)and (max-height:500px){.controls{inset:12px 90px auto auto}.label-wrap{top:60px}}@media(prefers-reduced-motion:reduce){#loader .mark .star,#loader .dots i{animation:none}}