:root{--cream:#f3ead8;--char:#1b1916;--brass:#c9a050;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'IBM Plex Mono',monospace;color:var(--cream);touch-action:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
#roombar{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:rgba(20,18,15,.72);border:1px solid rgba(201,160,80,.5);border-radius:40px;padding:8px 26px 8px;text-align:center;min-width:200px;backdrop-filter:blur(4px);z-index:5}
.rb-top{display:flex;gap:10px;align-items:baseline;justify-content:center}
.rb-label{font-size:11px;letter-spacing:4px;color:var(--brass)}
#roomNum{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;line-height:1}
.rb-track{height:3px;background:rgba(255,255,255,.12);border-radius:3px;margin:6px 0 4px;overflow:hidden}
#rbFill{height:100%;width:0;background:linear-gradient(90deg,#8a6a2c,var(--brass));transition:width .1s}
#best{font-size:10px;opacity:.6;letter-spacing:1px}
#hiddenBadge{position:fixed;top:100px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:5px;color:var(--brass);z-index:7}
#prompt{position:fixed;bottom:22%;left:50%;transform:translateX(-50%);background:rgba(20,18,15,.75);padding:8px 18px;border-radius:6px;font-size:14px;letter-spacing:1px;opacity:0;transition:opacity .2s;z-index:7;white-space:nowrap}
#prompt.show{opacity:1}
#crosshair{position:fixed;top:50%;left:50%;width:4px;height:4px;margin:-2px;background:rgba(255,255,255,.6);border-radius:50%;z-index:5}
#toast{position:fixed;top:30%;left:50%;transform:translateX(-50%);font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:700;color:var(--brass);opacity:0;transition:opacity .5s;text-shadow:0 0 20px #000;z-index:8}
#toast.show{opacity:1}
#locker-view{position:fixed;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.95) 75%)}
#locker-view .slits{position:absolute;left:20%;right:20%;top:30%;bottom:30%;background:repeating-linear-gradient(180deg,rgba(0,0,0,.92) 0 22px,transparent 22px 40px)}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 40%,rgba(60,50,35,.85),rgba(5,5,5,.97));z-index:20;text-align:center;padding:20px}
h1{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(54px,13vw,130px);line-height:.85;letter-spacing:6px;color:var(--cream)}
h2{font-family:'Cormorant Garamond',serif;font-size:56px}
.sub{font-size:13px;opacity:.7;max-width:360px}
.hint{font-size:11px;opacity:.5;max-width:420px;line-height:1.6}
.overlay button{font-family:'IBM Plex Mono',monospace;background:transparent;color:var(--cream);border:1px solid var(--brass);padding:12px 34px;font-size:15px;letter-spacing:4px;cursor:pointer;transition:.2s}
.overlay button:hover{background:var(--brass);color:var(--char)}
.overlay label{font-size:12px;display:flex;flex-direction:column;gap:8px;align-items:center}
.flicker{animation:fl 4s infinite}
@keyframes fl{0%,19%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.3}}
#joy{position:fixed;left:24px;bottom:24px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);z-index:10}
#knob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:rgba(243,234,216,.5)}
#actBtn{position:fixed;right:28px;bottom:40px;width:96px;height:96px;border-radius:50%;background:rgba(201,160,80,.85);color:#1b1916;border:none;font-family:'IBM Plex Mono';font-weight:600;font-size:14px;z-index:10}
#sprintBtn{position:fixed;right:140px;bottom:30px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--cream);border:1px solid rgba(255,255,255,.3);font-family:'IBM Plex Mono';font-size:11px;z-index:10}
#sprintBtn.on{background:rgba(201,160,80,.6)}
#pauseBtn{position:fixed;right:14px;top:14px;width:40px;height:40px;border-radius:8px;background:rgba(0,0,0,.5);color:var(--cream);border:1px solid rgba(255,255,255,.3);z-index:10;font-weight:700}
#remix{position:fixed;left:10px;bottom:6px;font-size:10px;color:rgba(243,234,216,.5);z-index:30;text-decoration:none}
#mobile:not(.hidden) ~ #remix{left:auto;right:10px;top:60px;bottom:auto}