@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--s:1;--beat:0;--pink:#ff4fb0;--cyan:#4fe6ff;--gold:#ffc65a;--green:#5cff9d;--violet:#a98bff;--ink:#f2eefc;--mute:#a49bbf;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,sans-serif;
  --spring:cubic-bezier(.2,1.3,.3,1);--out:cubic-bezier(.22,.8,.24,1);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#120a1f radial-gradient(120% 70% at 50% 30%,#2a1638,#0b0716 75%);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.press{transition:transform .16s var(--spring),filter .16s}
.press:active,.press.down{transform:translateY(1.5px) scale(.96);filter:brightness(1.15)}

/* ---------- camera + room canvas (390x844 design, scaled to fit: never wider than the screen) ---------- */
.cam{position:fixed;inset:0;transform-origin:0 0;will-change:transform}
.room{position:absolute;left:50%;top:0;width:390px;height:844px;margin-left:-195px;transform-origin:50% 0;transform:scale(var(--s));contain:layout style}
.room>*{position:absolute}
.ceiling{left:-200px;right:-200px;top:0;height:96px;background:linear-gradient(180deg,#07040d,#1a0f26 70%,#2a1838);border-bottom:2px solid #3b2650;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.ceiling .strip{position:absolute;left:180px;right:180px;bottom:10px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#ffd59a,transparent);box-shadow:0 0 18px 4px rgba(255,190,110,.5);opacity:.85}
.ceiling .leds{position:absolute;right:226px;bottom:22px;display:flex;gap:7px}
.leds b{width:6px;height:6px;border-radius:50%;background:#ff4f6a;box-shadow:0 0 8px #ff4f6a;animation:led 1.7s steps(2) infinite}
.leds b:nth-child(2n){background:var(--green);box-shadow:0 0 8px var(--green);animation-duration:2.3s}.leds b:nth-child(3n){background:var(--gold);box-shadow:0 0 8px var(--gold);animation-duration:1.1s}
@keyframes led{50%{opacity:.25}}
.wall{left:-200px;right:-200px;top:96px;height:640px;
  background:
    radial-gradient(260px 200px at 60% 18%,rgba(255,170,120,.16),transparent 70%),
    radial-gradient(240px 260px at 85% 60%,rgba(80,230,255,.08),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 64px),
    linear-gradient(180deg,#3a1f4a 0%,#2a1638 40%,#1d1029 100%)}
.wall::after{content:"";position:absolute;left:0;right:0;top:300px;height:3px;background:linear-gradient(90deg,transparent,rgba(255,200,150,.25),transparent)}
.wall-lights{left:0;right:0;top:96px;height:30px}
.wall-lights i{position:absolute;top:0;width:60px;height:110px;background:radial-gradient(ellipse at top,rgba(255,200,140,.35),transparent 70%)}
.wall-lights i:nth-child(1){left:30px}.wall-lights i:nth-child(2){left:170px}.wall-lights i:nth-child(3){left:300px}

/* subtle label pills: appear on hover / long-press, plus during the intro */
.obj{z-index:3}
.obj::after{content:attr(data-label);position:absolute;left:50%;bottom:-14px;transform:translate(-50%,4px);opacity:0;white-space:nowrap;pointer-events:none;
  font:600 11px/1 var(--body);letter-spacing:.04em;padding:6px 10px;border-radius:999px;background:rgba(12,8,22,.82);border:1px solid rgba(255,255,255,.22);color:#fff;transition:opacity .25s,transform .35s var(--spring);z-index:9}
.obj:hover::after,.obj.show-label::after,body.intro .obj::after{opacity:1;transform:translate(-50%,0)}
.obj{transition:transform .2s var(--spring),filter .2s}
.obj:active,.obj.down{transform:scale(.97);filter:brightness(1.25)}
.obj.glow-hint{animation:hintglow 2.4s ease-in-out 2}
@keyframes hintglow{50%{filter:brightness(1.35) drop-shadow(0 0 10px rgba(255,255,255,.4))}}

/* neon */
.neon{display:flex;flex-direction:column;align-items:flex-start;font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;font-style:italic;font-weight:700;line-height:.95;color:#fff;transform:rotate(-4deg);cursor:pointer}
.neon .n1{font-size:30px;text-shadow:0 0 2px #fff,0 0 7px #fff,0 0 14px var(--pink),0 0 30px var(--pink),0 0 54px var(--pink);animation:flick 7s infinite}
.neon .n2{font-size:27px;margin-left:18px;text-shadow:0 0 2px #fff,0 0 7px #fff,0 0 14px var(--cyan),0 0 30px var(--cyan),0 0 54px #1aa9d6;animation:flick 9s infinite 2s}
.neon::before{content:"";position:absolute;inset:-12px -6px;border-radius:14px;background:radial-gradient(closest-side,rgba(255,79,176,calc(.14 + var(--beat)*.35)),transparent);z-index:-1}
@keyframes flick{0%,91%,100%{opacity:1}92%{opacity:.35}93%{opacity:1}96%{opacity:.6}97%{opacity:1}}

/* posters */
.posters{display:flex;gap:8px;align-items:flex-start;justify-content:flex-end;padding-top:2px}
.poster{position:relative;width:40px;height:58px;border-radius:3px;border:2px solid #120a1c;box-shadow:0 4px 10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);background-size:cover;background-position:center}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 40%)}
.p1{background-image:linear-gradient(180deg,#ff9ecb,#c2135f 40%,#2a1040)}.p2{background-image:radial-gradient(circle at 60% 30%,#e8ecf5 0 16%,transparent 17%),linear-gradient(180deg,#1b2340,#0c0f22 60%,#2a1a3a);margin-top:8px}.p3{background-image:linear-gradient(180deg,#2b1a4e,#c2410c 55%,#f59e0b 78%,#1c0f08)}

/* porthole */
.port{border-radius:50%;z-index:2;cursor:pointer}
.port-space{position:absolute;inset:12px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 120%,#3b2a6a,#0a0820 60%,#03020a)}
.ps-stars{position:absolute;inset:-30%;background-repeat:repeat}
.ps-stars.a{background-image:radial-gradient(1.2px 1.2px at 12px 18px,#fff,transparent),radial-gradient(1px 1px at 60px 70px,#cdf6ff,transparent),radial-gradient(1.4px 1.4px at 90px 30px,#fff,transparent);background-size:110px 90px;animation:sdrift 60s linear infinite}
.ps-stars.b{background-image:radial-gradient(2px 2px at 30px 40px,#fff,transparent),radial-gradient(1.6px 1.6px at 120px 110px,#ffd9ee,transparent);background-size:170px 150px;animation:sdrift 35s linear infinite;opacity:.8}
@keyframes sdrift{to{transform:translate3d(-110px,30px,0)}}
.ps-planet{left:96px;top:28px;width:96px;height:96px;border-radius:50%;position:absolute;background:radial-gradient(circle at 35% 30%,#e9f4ff,#8fb8e8 30%,#3b5aa8 60%,#121a3c 85%);box-shadow:-10px 0 40px rgba(120,170,255,.35),inset -18px -10px 30px rgba(0,0,0,.7)}
.ps-planet::after{content:"";position:absolute;left:-26px;right:-26px;top:44px;height:14px;border-radius:50%;border:3px solid rgba(255,220,180,.55);transform:rotate(-14deg);box-shadow:0 0 10px rgba(255,200,150,.4)}
.ps-moon{position:absolute;left:30px;top:44px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#cfd3e6 50%,#8389a4);box-shadow:0 0 16px rgba(255,255,255,.5)}
.ps-horizon{position:absolute;left:-10%;right:-10%;bottom:-40px;height:90px;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0%,#c7c3d8,#6b6788 40%,#24203a 80%);box-shadow:0 -6px 30px rgba(255,170,120,.35)}
.ps-horizon::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 30%,rgba(0,0,0,.25) 0 6px,transparent 7px) 0 0/34px 22px}
.ship{position:absolute;left:-40px;top:70px;width:34px;height:10px;animation:fly 18s linear infinite;opacity:0}
.ship::before{content:"";position:absolute;inset:0;border-radius:50% 60% 40% 40%;background:linear-gradient(180deg,#e9edf7,#8a90a8)}
.ship i{position:absolute;left:-12px;top:3px;width:12px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#7ff6ff);filter:blur(1px)}
.ship.s2{top:120px;width:22px;height:7px;animation-duration:26s;animation-delay:9s}
@keyframes fly{0%{transform:translate3d(0,0,0);opacity:0}3%{opacity:1}45%{transform:translate3d(260px,-30px,0);opacity:1}48%,100%{transform:translate3d(280px,-32px,0);opacity:0}}
.port-glass{position:absolute;inset:12px;border-radius:50%;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.18) 0%,transparent 28%,transparent 62%,rgba(255,255,255,.06) 70%,transparent 76%);box-shadow:inset 0 0 30px rgba(0,0,0,.8)}
.port-glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 48%,transparent 56%);background-size:300% 100%;animation:glass 9s ease-in-out infinite}
@keyframes glass{0%,60%{background-position:120% 0}100%{background-position:-60% 0}}
.port-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;border:12px solid #6e6a80;box-shadow:inset 0 0 0 2px #2b2838,0 0 0 2px #2b2838,0 0 0 6px #4a4660,0 10px 30px rgba(0,0,0,.6),inset 0 4px 6px rgba(255,255,255,.25);background:none}
.port-ring i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e5e3ee,#5d5970);transform:rotate(calc(var(--k)*45deg)) translateY(-97px)}
.port-ring i:nth-child(1){--k:0}.port-ring i:nth-child(2){--k:1}.port-ring i:nth-child(3){--k:2}.port-ring i:nth-child(4){--k:3}.port-ring i:nth-child(5){--k:4}.port-ring i:nth-child(6){--k:5}.port-ring i:nth-child(7){--k:6}.port-ring i:nth-child(8){--k:7}
.sill{height:10px;border-radius:3px;background:linear-gradient(180deg,#8a86a0,#3c3950);box-shadow:0 6px 12px rgba(0,0,0,.6);z-index:2}

/* badge cabinet */
.cabinet{border-radius:10px;background:linear-gradient(180deg,#5a3b2a,#3a2418);border:3px solid #24150d;box-shadow:0 10px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15)}
.peg{position:absolute;inset:8px 8px 26px;border-radius:5px;background:#2b2030 radial-gradient(circle,rgba(0,0,0,.55) 1.4px,transparent 1.8px) 0 0/10px 10px;box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.stk{position:absolute;font-size:24px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));animation:stk 6s ease-in-out infinite}
.st1{left:16px;top:16px;color:#ffd23e;text-shadow:0 0 10px #ffb000}.st2{left:66px;top:22px;color:#7df9c9;text-shadow:0 0 10px #34d399;animation-delay:1s}
.st3{left:22px;top:62px;color:#ffc65a;text-shadow:0 0 10px #ff9d00;animation-delay:2s}.st4{left:70px;top:66px;color:#9ad6ff;text-shadow:0 0 10px #4fb0ff;animation-delay:3s}
.st5{left:18px;top:106px;animation-delay:4s}.st6{left:70px;top:108px;color:#e8ecff;text-shadow:0 0 10px #a98bff;animation-delay:5s}
@keyframes stk{0%,90%,100%{transform:none}94%{transform:rotate(-8deg) scale(1.1)}}
.cab-tag{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font:800 9px/1 var(--display);letter-spacing:.3em;color:#ffd59a;text-shadow:0 0 6px rgba(255,190,110,.8)}
.cab-glass{position:absolute;inset:8px 8px 26px;border-radius:5px;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 35%);pointer-events:none}

/* CRT */
.tv-body{position:absolute;inset:10px 0 0;border-radius:12px;background:linear-gradient(180deg,#6b5a4a,#3d3128);border:3px solid #1f1812;box-shadow:0 10px 22px rgba(0,0,0,.65),inset 0 2px 0 rgba(255,255,255,.18);display:flex;padding:8px;gap:8px}
.tv-screen{position:relative;flex:1;border-radius:14px/18px;overflow:hidden;background:#0a0f1a;box-shadow:inset 0 0 18px rgba(0,0,0,.9),0 0 0 3px #15110d}
.tv-pic{position:absolute;inset:0;background:linear-gradient(180deg,#ff8fc8,#9b2d8b 45%,#2a1150 70%,#0b0620),radial-gradient(circle at 70% 30%,#fff 0 6%,transparent 7%);background-size:cover;background-position:center;opacity:.9;animation:tvpic 4s ease-in-out infinite}
@keyframes tvpic{50%{opacity:.75}}
.tv-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.tv-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.18),transparent 60%)}
.tv::before{content:"";position:absolute;left:-10px;right:-10px;top:0;bottom:-16px;z-index:-1;border-radius:20px;background:radial-gradient(closest-side,rgba(255,120,200,calc(.18 + var(--beat)*.3)),transparent);animation:crtglow 3s ease-in-out infinite}
@keyframes crtglow{50%{opacity:.6}}
.tv-side{width:26px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}
.knob{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8e2d6,#7a6e60);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.knob.k2{width:12px;height:12px}
.grille{width:20px;height:24px;border-radius:3px;background:repeating-linear-gradient(0deg,#1f1812 0 2px,transparent 2px 4px)}
.tv-ant{position:absolute;left:50%;top:-14px;width:60px;height:26px;margin-left:-30px;pointer-events:none}
.tv-ant::before,.tv-ant::after{content:"";position:absolute;bottom:0;width:2px;height:30px;background:#9a9ab0;transform-origin:bottom}
.tv-ant::before{left:28px;transform:rotate(-30deg)}.tv-ant::after{left:30px;transform:rotate(28deg)}
.shelf{height:10px;border-radius:3px;background:linear-gradient(180deg,#8a5d3a,#4a2e18);box-shadow:0 8px 14px rgba(0,0,0,.6);z-index:2}

/* deck */
.deck{border-radius:8px;background:linear-gradient(180deg,#c9c4bc,#8d877e);border:2px solid #2a2622;box-shadow:0 8px 18px rgba(0,0,0,.6),inset 0 1px 0 #fff8;display:flex;align-items:center;gap:6px;padding:6px 8px}
.deck-win{position:relative;width:58px;height:34px;border-radius:4px;background:#1b1714;box-shadow:inset 0 0 8px #000;display:flex;align-items:center;justify-content:space-around;padding:0 6px}
.reel{width:16px;height:16px;border-radius:50%;border:3px solid #ddd5c8;background:conic-gradient(#3a332c 0 20%,#ddd5c8 0 25%,#3a332c 0 45%,#ddd5c8 0 50%,#3a332c 0 70%,#ddd5c8 0 75%,#3a332c 0);animation:spin 3s linear infinite;animation-play-state:paused}
body.playing .reel{animation-play-state:running;animation-duration:1.4s}
@keyframes spin{to{transform:rotate(360deg)}}
.deck-vu{display:flex;gap:2px;align-items:flex-end;height:26px;width:26px}
.deck-vu i{flex:1;height:30%;background:linear-gradient(0deg,var(--green),var(--gold) 70%,#ff4f6a);border-radius:1px;transform-origin:bottom;transform:scaleY(calc(.25 + var(--beat)*.9))}
.deck-vu i:nth-child(2){transform:scaleY(calc(.2 + var(--beat)*1.1))}.deck-vu i:nth-child(4){transform:scaleY(calc(.3 + var(--beat)*.7))}
.deck-keys{display:flex;gap:2px;margin-left:auto}
.deck-keys i{width:9px;height:22px;border-radius:2px;background:linear-gradient(180deg,#f5f1ea,#bdb5a8);box-shadow:0 2px 0 #5d564d}
.records{height:40px;background:repeating-linear-gradient(90deg,#c2135f 0 5px,#111 5px 7px,#0e7490 7px 12px,#111 12px 14px,#f59e0b 14px 18px,#111 18px 20px,#7c3aed 20px 25px,#111 25px 27px);border-radius:2px;opacity:.85}

/* lava + plant */
.lava{width:26px;height:80px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,rgba(255,79,176,.32),rgba(255,140,60,.2));border:2px solid #4a3a5c;box-shadow:0 0 calc(18px + var(--beat)*20px) rgba(255,79,176,.6)}
.lava::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-12px;height:14px;border-radius:3px 3px 6px 6px;background:linear-gradient(180deg,#8a86a0,#3c3950)}
.lava i{position:absolute;left:6px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle,#ffd0e8,var(--pink));animation:lava 7s ease-in-out infinite}
.lava i:nth-child(1){bottom:6px}.lava i:nth-child(2){bottom:30px;width:8px;height:12px;left:9px;animation-duration:9s;animation-delay:-3s}.lava i:nth-child(3){top:8px;width:9px;height:8px;animation-duration:11s;animation-delay:-6s}
@keyframes lava{50%{transform:translateY(-38px) scale(1.2,.9)}}
.plant{width:50px;height:80px}
.plant::after{content:"";position:absolute;left:12px;bottom:0;width:28px;height:26px;border-radius:3px 3px 8px 8px;background:linear-gradient(180deg,#d9894f,#8f4a22)}
.plant i{position:absolute;left:24px;bottom:22px;width:12px;height:44px;border-radius:50% 50% 0 50%;background:linear-gradient(180deg,#5ee39b,#1e7a4a);transform-origin:bottom;animation:sway 5s ease-in-out infinite}
.plant i:nth-child(1){transform:rotate(-38deg)}.plant i:nth-child(2){transform:rotate(-10deg);height:52px}.plant i:nth-child(3){transform:rotate(18deg)}.plant i:nth-child(4){transform:rotate(44deg);height:36px}
@keyframes sway{50%{rotate:4deg}}

/* terminal */
.terminal{border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#c8c6cf,#7d7a8a);border:2px solid #2a2834;box-shadow:0 10px 24px rgba(0,0,0,.6),inset 0 2px 0 #fff9}
.term-hood{position:absolute;left:6px;right:6px;top:6px;height:10px;border-radius:6px 6px 0 0;background:#3a3846}
.term-screen{position:absolute;left:10px;right:10px;top:14px;height:84px;border-radius:8px;background:radial-gradient(ellipse at 50% 40%,#0c2a16,#030c06);box-shadow:inset 0 0 14px #000,0 0 0 3px #22202c,0 0 22px rgba(92,255,157,.25);overflow:hidden;padding:6px 7px;color:var(--green);font:700 11px/1.1 ui-monospace,Menlo,monospace;text-shadow:0 0 6px var(--green)}
.term-screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);animation:roll 6s linear infinite}
@keyframes roll{to{background-position:0 30px}}
.term-chg{position:absolute;left:7px;top:20px;font-size:10px;opacity:.85}
.term-spark{position:absolute;left:6px;right:6px;bottom:6px;height:44px;width:calc(100% - 12px)}
.term-spark polyline{fill:none;stroke:var(--green);stroke-width:2.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px var(--green))}
.term-keys{position:absolute;left:12px;right:12px;top:108px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.term-keys i{height:14px;border-radius:3px;background:linear-gradient(180deg,#2a3a30,#14201a);box-shadow:0 2px 0 #0a0f0c,inset 0 0 6px rgba(92,255,157,.35)}
.term-led{position:absolute;right:12px;bottom:12px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:led 1.2s steps(2) infinite}

/* arcade */
.arcade{border-radius:8px 8px 0 0;background:linear-gradient(90deg,#1b1030,#2d1a4e 50%,#1b1030);border:2px solid #0c0616;box-shadow:0 10px 24px rgba(0,0,0,.6)}
.arc-marquee{position:absolute;left:4px;right:4px;top:4px;height:22px;border-radius:4px;display:grid;place-items:center;font:900 italic 13px/1 var(--display);letter-spacing:.08em;color:#fff;background:linear-gradient(180deg,#ff6ab3,#a3125b);text-shadow:0 0 8px #fff;box-shadow:0 0 16px rgba(255,79,176,.6);animation:flick 5s infinite}
.arc-screen{position:absolute;left:8px;right:8px;top:32px;height:62px;border-radius:6px;background:#050414;box-shadow:inset 0 0 10px #000,0 0 14px rgba(79,230,255,.35);overflow:hidden}
.arc-screen i{position:absolute;left:50%;bottom:8px;width:10px;height:10px;margin-left:-5px;background:var(--cyan);clip-path:polygon(50% 0,100% 100%,0 100%);animation:arcship 3s ease-in-out infinite}
.arc-screen::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 10px 10px,#ff4fb0,transparent),radial-gradient(1.5px 1.5px at 40px 22px,#ffc65a,transparent),radial-gradient(1px 1px at 25px 40px,#fff,transparent);background-size:60px 50px;animation:sdrift 8s linear infinite}
@keyframes arcship{50%{transform:translateX(18px)}}
.arc-panel{position:absolute;left:4px;right:4px;top:100px;height:24px;border-radius:4px;background:#120a22;display:flex;align-items:center;justify-content:center;gap:6px}
.arc-panel i{width:9px;height:9px;border-radius:50%;background:#ff4f6a;box-shadow:0 0 6px #ff4f6a}.arc-panel i:nth-child(2){background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.arc-panel i:nth-child(3){background:var(--gold);box-shadow:0 0 6px var(--gold)}

/* couch */
.couch{z-index:2}
.couch i{position:absolute;display:block}
.couch .back{left:10px;right:10px;top:0;height:50px;border-radius:18px 18px 6px 6px;background:linear-gradient(180deg,#e0566f,#a3263f);box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.couch .seat{left:6px;right:6px;top:40px;height:36px;border-radius:10px;background:linear-gradient(180deg,#c73a55,#8a1c33);box-shadow:0 10px 20px rgba(0,0,0,.6)}
.couch .arm{top:26px;width:22px;height:54px;border-radius:12px;background:linear-gradient(180deg,#d84a64,#93203a)}
.couch .arm.l{left:0}.couch .arm.r{right:0}
.couch .pillow{left:26px;top:20px;width:34px;height:28px;border-radius:8px;transform:rotate(-8deg);background:repeating-conic-gradient(#f3f0e8 0 25%,#222 0 50%) 0 0/10px 10px;box-shadow:0 3px 6px rgba(0,0,0,.5)}

.room-beat{inset:0;pointer-events:none;z-index:6;background:radial-gradient(60% 40% at 50% 45%,rgba(255,79,176,.10),transparent 70%);opacity:var(--beat);mix-blend-mode:screen}
.vignette{inset:0;pointer-events:none;z-index:7;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
body.night .room{filter:brightness(.78) saturate(.9)}
body.night .wall-lights{opacity:.4}

/* ---------- HUD ---------- */
.hud-top{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(var(--st) + 10px) 12px 0}
.brand{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 12px 0 8px;border-radius:14px;background:rgba(12,8,22,.6);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.logo{display:flex;flex-direction:column;gap:2px;transform:skewX(-18deg)}
.logo i{display:block;width:18px;height:3px;border-radius:2px}.logo i:nth-child(1){background:#ff5a3d}.logo i:nth-child(2){background:#ffb02e}.logo i:nth-child(3){background:#4fb0ff}
.b-txt{display:flex;flex-direction:column;line-height:1}
.b-txt b{font:900 italic 16px/1 var(--display);font-stretch:120%;letter-spacing:.04em;background:linear-gradient(180deg,#fff,#ffd7ec 50%,#ff8cc8);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-txt small{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.profile{display:flex;align-items:center;gap:8px;height:48px;flex:1 1 0;min-width:0;max-width:170px;margin-left:auto;padding:0 10px 0 6px;border-radius:14px;background:rgba(12,8,22,.6);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left}
.pf-av{width:36px;height:36px;flex:none;border-radius:10px;background:linear-gradient(135deg,#7a5cff,#ff4fb0);background-size:cover;background-position:center;display:grid;place-items:center;font:800 15px var(--display)}
.pf-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.pf-txt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-txt small{font-size:10.5px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mute{flex:none;width:44px;height:44px;margin-left:auto;border-radius:50%;display:grid;place-items:center;background:rgba(12,8,22,.55);border:1px solid rgba(255,255,255,.12)}
.mute svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.muted .mute .w{opacity:0}body.muted .mute svg{stroke:var(--mute)}
.hint-pill{position:fixed;z-index:19;left:50%;bottom:calc(var(--sb) + 136px);transform:translate(-50%,0);padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgba(12,8,22,.7);border:1px solid rgba(255,255,255,.15);transition:opacity .6s,transform .6s var(--spring);pointer-events:none}
.hint-pill.gone{opacity:0;transform:translate(-50%,-10px)}

.dock-wrap{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:0 8px calc(var(--sb) + 8px);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.dock-wrap>*{pointer-events:auto}
.radio,.dock{max-width:520px;width:100%;margin:0 auto;border-radius:18px;background:rgba(14,10,26,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.radio{display:flex;align-items:center;gap:2px;height:52px;padding:0 6px}
.r-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.r-btn svg{width:16px;height:16px;fill:#fff;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.r-btn.play{width:44px;height:44px;background:radial-gradient(circle at 35% 30%,#ffd0e8,var(--pink) 55%,#a3125b);box-shadow:0 0 16px rgba(255,79,176,.5)}
.r-btn.play svg{fill:#1a0610;stroke:#1a0610}
.r-meta{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;padding:4px 6px;height:44px;justify-content:center;text-align:left}
.r-meta small{font-size:9px;letter-spacing:.18em;color:var(--cyan)}
.r-meta b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.viz{display:flex;gap:2px;align-items:flex-end;height:22px;width:30px;flex:none}
.viz i{flex:1;height:100%;border-radius:1px;background:linear-gradient(0deg,var(--cyan),var(--pink));transform-origin:bottom;transform:scaleY(.15)}
.clock{display:flex;flex-direction:column;align-items:center;line-height:1;padding:0 6px 0 8px;flex:none;border-left:1px solid rgba(255,255,255,.1);margin-left:6px}
.clock b{font:700 15px/1 ui-monospace,Menlo,monospace;color:var(--cyan);text-shadow:0 0 8px rgba(79,230,255,.6)}
.clock small{font-size:9px;color:var(--mute);margin-top:3px;letter-spacing:.06em}
.dock{display:grid;grid-template-columns:repeat(7,1fr);padding:4px}
.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;color:var(--mute);font-size:9.5px;font-weight:600}
.dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock button.on{color:#fff;background:linear-gradient(180deg,rgba(79,230,255,.2),rgba(79,230,255,.05));box-shadow:inset 0 0 0 1px rgba(79,230,255,.35),0 0 14px rgba(79,230,255,.2)}
.dock button.on svg{stroke:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan))}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 140px);z-index:80;transform:translate(-50%,16px);opacity:0;padding:11px 16px;border-radius:999px;background:rgba(20,14,34,.94);border:1px solid rgba(255,255,255,.14);font-size:13.5px;font-weight:600;transition:all .35s var(--spring);pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ios-haptic{position:fixed;left:-100px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.media-park{position:fixed;width:1px;height:1px;left:-10px;top:-10px;overflow:hidden;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .room *,.room *::before,.room *::after{animation:none!important}
  body.playing .reel{animation:none}
}

/* ---------- Wizmo ---------- */
.wizmo-wrap{left:0;top:0;width:78px;height:78px;z-index:4;cursor:pointer;will-change:transform;touch-action:none}
.wz{width:100%;height:100%;overflow:visible}
.wz *{transform-box:fill-box}
.wz-all{transform-origin:50% 100%;transition:transform .25s var(--spring)}
.wz-body{transform-origin:50% 100%;animation:wzbreathe 3.2s ease-in-out infinite}
.wizmo-wrap.happy .wz-body{animation-duration:1.6s}
.wizmo-wrap.sleep .wz-body{animation-duration:5.5s}
@keyframes wzbreathe{50%{transform:scale(1.035,.975)}}
.wz-face{transition:transform .35s var(--out)}
.wz-pupil{transition:transform .18s var(--out)}
.wz-lid{transform-origin:50% 0;transform:scaleY(0);transition:transform .08s ease-in}
.wizmo-wrap.blink .wz-lid,.wizmo-wrap.sleep .wz-lid,.wizmo-wrap.purr .wz-lid{transform:scaleY(1)}
.wizmo-wrap.half .wz-lid{transform:scaleY(.55)}
.wz-ear{transform-origin:50% 100%;transition:transform .3s var(--spring)}
.wz-tip{animation:wztip 2.4s ease-in-out infinite}
@keyframes wztip{50%{opacity:.55}}
.wz-mouth path{opacity:0;transition:opacity .12s}
.wz-mouth .m-smile{opacity:1}
.wizmo-wrap[data-mouth] .wz-mouth .m-smile{opacity:0}
.wizmo-wrap[data-mouth=open] .m-open,.wizmo-wrap[data-mouth=flat] .m-flat,.wizmo-wrap[data-mouth=o] .m-o,.wizmo-wrap[data-mouth=cat] .m-cat{opacity:1}
.wz-brow{opacity:0;transition:opacity .2s,transform .2s}
.wizmo-wrap.annoyed .wz-brow{opacity:1}
.wz-blush{opacity:.55;transition:opacity .3s}
.wizmo-wrap.happy .wz-blush,.wizmo-wrap.purr .wz-blush{opacity:1}
.wz-shadow{transform-origin:50% 50%;transition:transform .25s}
.heart{position:absolute;z-index:8;pointer-events:none;font-size:16px;color:#ff6ab3;text-shadow:0 0 8px #ff4fb0;animation:heart 1.3s var(--out) forwards}
@keyframes heart{from{transform:translate(0,0) scale(.4);opacity:0}20%{opacity:1}to{transform:translate(var(--dx,0px),-60px) scale(1.2);opacity:0}}
.zzz{z-index:8;font:800 14px var(--display);color:#cfe8ff;opacity:0;pointer-events:none;text-shadow:0 0 8px #7fd0ff}
body.wz-sleep .zzz{opacity:1;animation:zzz 3s ease-in-out infinite}
.zzz span{display:inline-block;margin-left:2px;font-size:.8em;transform:translateY(-6px)}.zzz span+span{font-size:.65em;transform:translateY(-12px)}
@keyframes zzz{0%{transform:translate(0,0);opacity:0}30%{opacity:1}100%{transform:translate(10px,-22px);opacity:0}}