:root{--m:#ff2bd6;--c:#19f5ff;--y:#e8ff1a;--p:#8a2bff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:'Fredoka',sans-serif;color:#fff;touch-action:none}
#scene-container{position:fixed;inset:0}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s;z-index:5}
.hidden{display:none!important}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
.glass{background:rgba(10,0,25,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
h1{font-family:'Rubik Wet Paint',cursive;font-size:clamp(54px,15vw,130px);line-height:.85;margin:0;animation:hue 3s linear infinite,wob 2.4s ease-in-out infinite;color:var(--m);text-shadow:0 0 30px currentColor,6px 6px 0 var(--c)}
h2{font-family:'Rubik Wet Paint',cursive;font-size:clamp(28px,7vw,48px);margin:0 0 6px;color:var(--y);text-shadow:4px 4px 0 var(--m)}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes wob{50%{transform:rotate(-3deg) scale(1.05,.95)}}
#tagline{font-weight:300;font-size:18px;min-height:24px;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:20px}
.big{font-family:'Rubik Wet Paint',cursive;font-size:38px;padding:14px 54px;border-radius:60px;border:4px solid var(--y);background:linear-gradient(90deg,var(--m),var(--p),var(--c));color:#fff;cursor:pointer;animation:pulse 1.2s ease-in-out infinite;box-shadow:0 0 40px var(--m)}
.big.small{font-size:28px;padding:10px 40px}
@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 0 70px var(--c)}}
.pill{min-height:52px;padding:0 22px;border-radius:30px;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.5);color:#fff;font:700 16px 'Fredoka';cursor:pointer}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.best{font-weight:300;margin:0}
.remix{color:var(--c);font-size:14px;margin-top:6px}
#auth-status{font-size:13px;opacity:.8}
#hud>*{position:fixed;z-index:8}
#roomCount{top:14px;left:14px;font:700 22px 'Fredoka';background:rgba(0,0,0,.5);padding:6px 14px;border-radius:16px}
#sanityWrap{top:14px;right:76px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:16px}
#smiley{font-size:26px;display:inline-block;color:var(--y)}
#sanityBar{width:min(30vw,160px);height:12px;border-radius:8px;background:#222;overflow:hidden}
#sanityFill{height:100%;width:100%;background:linear-gradient(90deg,red,orange,yellow,lime,cyan,magenta)}
#hint{top:70px;left:50%;transform:translateX(-50%);font:700 18px 'Fredoka';background:rgba(0,0,0,.55);padding:8px 18px;border-radius:20px;opacity:0;transition:opacity .5s;white-space:nowrap;pointer-events:none}
#joy{left:24px;bottom:24px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.4)}
#knob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 20px var(--c)}
#shiftBtn{right:24px;bottom:30px;width:84px;height:84px;border-radius:50%;border:3px solid var(--y);background:radial-gradient(var(--m),var(--p));color:#fff;font:700 16px 'Fredoka';cursor:pointer}
#pauseBtn{top:12px;right:12px;width:56px;height:56px;border-radius:16px;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:26px;cursor:pointer}
#arrow{bottom:130px;left:50%;font-size:28px;color:#fff;text-shadow:0 0 12px var(--c);transform-origin:center;pointer-events:none}
#lbList{list-style:none;padding:0;margin:0;max-height:50vh;overflow:auto;width:min(90vw,380px);text-align:left}
#lbList li{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between}
#stats{font-size:20px}