:root{--red:#d7263d;--cream:#fff3d6;--ink:#1b0f0a;--neon:#ffe14d;--pink:#ff5fa2;--teal:#2ec4b6}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:'Gaegu',cursive;color:var(--cream);touch-action:none;user-select:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;opacity:.6}
#nowPlaying{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--ink);border:3px solid var(--neon);box-shadow:0 0 18px var(--neon);padding:6px 16px;border-radius:30px;font-family:'Bungee';font-size:14px;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.np-tag{color:var(--red);margin-right:10px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
#tokens{position:absolute;top:12px;left:12px;font-family:'Bungee';font-size:20px;background:repeating-conic-gradient(var(--red) 0 25%,#fff 0 50%) 0 0/16px 16px;padding:4px 14px;border-radius:10px;color:var(--ink);border:3px solid var(--ink);text-shadow:0 0 4px #fff}
#lyrics{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);font-size:30px;text-align:center;text-shadow:0 0 8px var(--pink),2px 2px 0 #000;max-width:90vw;transition:opacity .3s}
#hint{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);font-family:'Bungee';font-size:14px;background:#000a;padding:6px 12px;border-radius:8px;display:none}
#minimap{position:absolute;right:12px;bottom:12px;border:3px solid var(--neon);border-radius:8px;background:#f7ecd0;opacity:.9}
#hudBtns{position:absolute;top:12px;right:12px;display:flex;gap:8px;pointer-events:auto}
#hudBtns button,#pClose{font-family:'Bungee';background:var(--ink);color:var(--neon);border:2px solid var(--neon);border-radius:8px;padding:6px 10px;cursor:pointer}
#panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0008;z-index:10}
.panel-inner{background:var(--cream);color:var(--ink);border:6px solid var(--red);border-radius:18px;padding:20px;width:min(360px,92vw);display:flex;flex-direction:column;gap:10px;box-shadow:0 0 0 6px #fff,0 0 40px var(--red)}
.panel-inner h2{font-family:'Bungee';margin:0;color:var(--red);text-align:center}
.sub{margin:0;text-align:center;font-size:16px}
.big{font-family:'Bungee';font-size:18px;padding:12px;border:none;border-radius:12px;background:var(--teal);color:#fff;cursor:pointer;box-shadow:0 4px 0 #0005}
.big:active{transform:translateY(3px);box-shadow:none}
.pink{background:var(--pink)}.dark{background:var(--ink)}
.bday{display:flex;flex-direction:column;gap:6px}
.bday input{font-family:'Gaegu';font-size:20px;padding:8px;border:3px solid var(--ink);border-radius:8px}
.vol{font-size:18px;display:flex;gap:8px;align-items:center}
#start{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#3a0d14,#0b0204 70%),#000}
.start-inner{text-align:center;padding:20px}
.marquee{font-family:'Bungee';color:var(--neon);font-size:28px;letter-spacing:8px;text-shadow:0 0 12px var(--neon)}
#start h1{font-family:'Bungee';font-size:clamp(40px,9vw,96px);margin:0;color:var(--red);text-shadow:4px 4px 0 #fff,0 0 30px var(--red)}
.tag{font-size:22px;opacity:.85}
#enter{font-family:'Bungee';font-size:24px;padding:16px 34px;border-radius:40px;border:4px solid #fff;background:var(--red);color:#fff;cursor:pointer;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 30px var(--red)}}
.controls{margin-top:18px;font-size:18px;opacity:.8}
.remix{display:inline-block;margin-top:18px;color:var(--neon);font-family:'Bungee';font-size:13px}
#toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);font-family:'Bungee';background:var(--pink);color:#fff;padding:8px 16px;border-radius:10px;opacity:0;transition:opacity .3s;z-index:30;pointer-events:none}
#joy{position:fixed;left:24px;bottom:24px;width:120px;height:120px;border-radius:50%;border:3px solid #fff6;background:#0004;display:none;z-index:5}
#joyKnob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fffa}
#btnE{position:fixed;right:200px;bottom:30px;width:64px;height:64px;border-radius:50%;font-family:'Bungee';font-size:24px;background:var(--red);color:#fff;border:3px solid #fff;z-index:5;display:none}
body.touch #joy,body.touch #btnE{display:block}
@media(max-width:600px){#minimap{width:120px;height:134px}#btnE{right:150px}#lyrics{font-size:22px}}