:root{
  --metal:#8f9e94; --metal-hi:#a9b8ae; --metal-lo:#6c7a71; --metal-dk:#4e5952;
  --chrome1:#f1f3f4; --chrome2:#9aa1a6;
  --bg1:#2a2420; --bg2:#120f0d;
  --phos:#59ff8a; --phos-dim:#1f7a3f;
  --s:1;            /* stage scale, set by app.js */
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{
  overflow:hidden; color:#efe6d8; font-family:'Share Tech Mono',monospace;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, #5a463466, transparent 70%),
    linear-gradient(180deg,var(--bg1) 0%, #1c1714 62%, #0d0b0a 62.2%, #17120f 100%);
}
body, body *{cursor:var(--cur, default) !important}

/* ---------- title ---------- */
.title{position:fixed; top:18px; left:16px; right:16px; z-index:5; text-align:center; pointer-events:none}
.title h1{display:inline; margin:0; font-family:'Bungee',cursive; font-weight:400; color:#f3d9a4;
  font-size:clamp(15px,2.3vw,28px); line-height:1.25; letter-spacing:.5px; text-shadow:0 2px 0 #00000088, 0 0 18px #ffb54a33}
.proto{display:inline-block; vertical-align:middle; margin-left:10px; padding:3px 8px 2px; border:1px solid #f3d9a466; border-radius:3px;
  font-size:clamp(10px,1vw,12px); letter-spacing:2px; text-transform:uppercase; color:#f3d9a4; background:#00000055; transform:translateY(-3px)}

/* ---------- stage ---------- */
.stage{position:fixed; inset:0}
.scene{position:absolute; left:calc(50% + 90px * var(--s)); top:53%; width:0; height:0; perspective:1500px; transform:scale(var(--s))}
.world{position:absolute; transform-style:preserve-3d; transform:rotateX(-30deg) rotateY(-30deg)}
.floor-shadow{position:absolute; left:50%; top:calc(53% + 245px * var(--s)); width:calc(560px * var(--s)); height:calc(120px * var(--s));
  transform:translate(calc(-50% + 90px * var(--s)),-50%); background:radial-gradient(ellipse at center,#000c 0%,#0006 45%,transparent 70%); pointer-events:none}

/* generic 3D helpers */
.g{position:absolute; transform-style:preserve-3d}
.f{position:absolute; backface-visibility:hidden}

/* ---------- cabinet ---------- */
.body-face{background:linear-gradient(180deg,var(--metal-hi),var(--metal)); box-shadow:inset 0 0 0 2px #00000022}
.body-face.side{background:linear-gradient(180deg,var(--metal),var(--metal-lo))}
.body-face.side.dark{filter:brightness(.72)}
.body-face.top{background:linear-gradient(135deg,#b9c7bd,var(--metal-hi)); box-shadow:inset 0 0 0 3px #00000018}
.body-face.recess{background:#141714}
.body-face.base{background:#2b302c}
.plate{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font-family:'Bungee',cursive; font-size:10px; letter-spacing:2px;
  color:#3b443d; background:linear-gradient(180deg,#d6cfa8,#a99f73); padding:3px 8px; border-radius:2px; box-shadow:0 1px 0 #fff6 inset, 0 1px 2px #0007; white-space:nowrap}

/* drawer */
.drawer{transition:transform .55s cubic-bezier(.2,.9,.25,1.05)}
.cabinet.open .drawer.top{transform:translateZ(270px)}
.d-front{background:linear-gradient(180deg,var(--metal-hi),var(--metal) 70%,var(--metal-lo)); border-radius:3px;
  box-shadow:inset 0 0 0 2px #00000030, inset 0 3px 0 #ffffff30}
.d-inner{background:linear-gradient(180deg,#5d6a61,#47524b)}
.d-side{background:linear-gradient(180deg,#76847a,#5b675f)}
.d-floor{background:repeating-linear-gradient(90deg,#3a433d 0 18px,#353d38 18px 20px)}
.holder{position:absolute; left:50%; top:22px; transform:translateX(-50%); width:110px; height:34px; border-radius:3px;
  background:linear-gradient(180deg,var(--chrome1),var(--chrome2)); box-shadow:0 2px 3px #0006; padding:4px}
.holder span{display:block; height:100%; background:#f6f0dd; color:#3a3a3a; font-family:'Permanent Marker',cursive; font-size:13px; text-align:center; line-height:26px; border-radius:1px}
.handle{position:absolute; left:50%; top:86px; transform:translateX(-50%); width:120px; height:26px; border-radius:13px;
  background:linear-gradient(180deg,var(--chrome1),var(--chrome2) 60%,#6c7378); box-shadow:0 5px 6px #0007, inset 0 -2px 0 #0003}
.handle::after{content:""; position:absolute; left:14px; right:14px; top:8px; height:10px; border-radius:5px; background:#3e4448; box-shadow:inset 0 2px 3px #000a}
.lock{position:absolute; right:22px; top:24px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle,#ddd 0 3px,#888 4px,#bbb 8px,#777 9px)}

/* ---------- cassettes ---------- */
.slot{transform-style:preserve-3d}
.hit{position:absolute; background:transparent; border:0; padding:0; outline:none; cursor:pointer}
.tape{transition:transform .38s cubic-bezier(.2,1.2,.35,1); pointer-events:none}
.slot.lifted .tape{transform:translate3d(0,-150px,60px) rotateY(30deg) rotateX(30deg) scale(1.2)}
.t-face{background:linear-gradient(180deg,#26262a,#141416)}
.t-edge{background:#1b1b1e}
.t-top{background:#202024; display:flex; align-items:center; justify-content:center; overflow:hidden}
.t-top span{font-size:13px; letter-spacing:2px; white-space:nowrap}
.t-front{border-radius:6px; box-shadow:inset 0 0 0 2px #000, inset 0 1px 0 #ffffff22}
.t-front .screw{position:absolute; width:7px; height:7px; border-radius:50%; background:radial-gradient(#aaa,#444)}
.t-front .screw.a{left:6px; top:6px}.t-front .screw.b{right:6px; top:6px}.t-front .screw.c{left:6px; bottom:6px}.t-front .screw.d{right:6px; bottom:6px}
.label{position:absolute; left:14px; right:14px; top:10px; height:62px; border-radius:4px; overflow:hidden; padding:6px 9px}
.win{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); width:96px; height:24px; border-radius:12px; background:#0c0c0d;
  display:flex; justify-content:space-between; align-items:center; padding:0 14px; box-shadow:inset 0 2px 3px #000}
.win i{width:14px; height:14px; border-radius:50%; background:#ddd; box-shadow:0 0 0 3px #3e2f27}
.base-trap{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:110px; height:22px; background:#2a2a2e; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}

/* terminal label (INKTRON) */
.label.terminal{background:radial-gradient(ellipse at 50% 40%,#0f2414,#050a06 75%); color:var(--phos); font-family:'VT323',monospace;
  text-shadow:0 0 4px #59ff8aaa, 0 0 10px #59ff8a44; box-shadow:inset 0 0 0 1px #1f7a3f}
.label.terminal::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg,#00000040 0 1px,transparent 1px 3px); pointer-events:none}
.label.terminal .lt{font-size:28px; line-height:.9; letter-spacing:3px}
.label.terminal .ls{font-size:15px; opacity:.85; margin-top:1px}
.label.terminal .lv{position:absolute; right:8px; top:6px; font-size:16px; border:1px solid var(--phos); padding:0 4px; line-height:1.1}
.label.terminal .radar{position:absolute; right:10px; bottom:6px; width:22px; height:22px; border-radius:50%; border:1px solid var(--phos-dim);
  background:conic-gradient(from 0deg,#59ff8a66,transparent 25%); animation:sweep 2.4s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.t-top.terminal{background:#050a06; color:var(--phos); font-family:'VT323',monospace; text-shadow:0 0 4px #59ff8aaa}
.t-top.terminal span{font-size:17px}

/* blank label */
.label.blank{background:repeating-linear-gradient(180deg,transparent 0 12px,#9bb5d055 12px 13px), #ebe6d9; color:#6b6255}
.label.blank .lt{font-family:'Permanent Marker',cursive; font-size:19px; transform:rotate(-2deg); margin-top:2px}
.label.blank .ls{font-size:9px; margin-top:2px; opacity:.8}
.t-top.blank{background:#e6e0d1; color:#7b7262; font-family:'Permanent Marker',cursive}

/* ---------- HUD ---------- */
.hud{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:5; min-width:min(420px,calc(100vw - 32px)); max-width:calc(100vw - 32px);
  text-align:center; padding:10px 18px; border-radius:6px; background:#0b0a09cc; border:1px solid #f3d9a433; pointer-events:none}
.hud-title{font-family:'Bungee',cursive; font-size:18px; letter-spacing:1px; color:#f3d9a4}
.hud-sub{font-size:13px; color:#cbbfa9; margin-top:2px}
.hud.terminal .hud-title{font-family:'VT323',monospace; font-size:28px; color:var(--phos); text-shadow:0 0 6px #59ff8a88}
.hud .on{color:#59ff8a}.hud .off{color:#ff6b6b}

/* the open drawer must not block the cassettes' hover areas */
.drawer.top .f:not(.hit){pointer-events:none}
.drawer.top .d-front{pointer-events:auto}
.cabinet.open .drawer.top .d-front{pointer-events:none}
.cabinet:not(.open) .hit{pointer-events:none}
body.fine .hud{bottom:auto; top:clamp(58px,7vw,84px)}

/* ---------- phones ---------- */
.hud-nav{display:none; gap:8px; justify-content:center; margin-top:10px}
body:not(.fine) .hud.open .hud-nav{display:flex}
body:not(.fine) .hud{pointer-events:auto}
.hud-nav button{font-family:'Bungee',cursive; font-size:16px; color:#f3d9a4; background:#2a2420; border:1px solid #f3d9a466; border-radius:6px; min-width:52px; min-height:46px; padding:0 14px}
.hud-nav button.play{flex:1; max-width:200px; background:#3b2f22; color:#ffe2a8}
.hud.terminal .hud-nav button.play{background:#0b1a0f; color:var(--phos); border-color:#59ff8a66; font-family:'VT323',monospace; font-size:24px}
.hud-nav button:active{transform:translateY(1px); filter:brightness(1.2)}
.lift-hit{position:fixed; z-index:6; background:transparent; border:0; padding:0; border-radius:10px; -webkit-tap-highlight-color:transparent}
.lift-hit:active{background:#ffffff14}
.lift-hit[hidden]{display:none}
body:not(.fine) .scene{left:calc(50% + 175px * var(--s))}
body:not(.fine) .floor-shadow{transform:translate(calc(-50% + 175px * var(--s)),-50%)}