/* BACK TO THE MOONBASE — DeLorean steel material system */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0b0e14;
  --cyan:#39e6ff; --pink:#ff5a9d; --amber:#ffb000; --red:#ff3b30;
  --steel-hi:#aeb4bd; --steel-mid:#7d838b; --steel-lo:#4a4e55;
}
html{-webkit-text-size-adjust:100%}
body{
  background:#05070c;color:#e8ecf2;
  font-family:"Helvetica Neue",Arial,system-ui,sans-serif;
  min-height:100vh;overflow-x:hidden;
}
/* ---------- space backdrop ---------- */
.space-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 800px at 50% -10%,#131a2b 0%,#05070c 60%);}
.twinkles{position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),
    radial-gradient(1px 1px at 32% 68%,#9adcff,transparent),
    radial-gradient(2px 2px at 58% 12%,#fff,transparent),
    radial-gradient(1px 1px at 74% 44%,#ffd9ec,transparent),
    radial-gradient(1.5px 1.5px at 88% 78%,#fff,transparent),
    radial-gradient(1px 1px at 44% 34%,#fff,transparent),
    radial-gradient(2px 2px at 22% 84%,#9adcff,transparent),
    radial-gradient(1px 1px at 66% 90%,#fff,transparent);
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}}
/* ---------- phone column ---------- */
.phone{
  position:relative;max-width:430px;margin:0 auto;min-height:100vh;
  padding:46px 12px calc(182px + env(safe-area-inset-bottom));
  background:linear-gradient(175deg,#2b2f36 0%,#16181d 30%,#1e2127 70%,#101216 100%);
  border-left:3px solid #3a3d42;border-right:3px solid #3a3d42;
  box-shadow:0 0 60px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.5);
}
/* ---------- panels: brushed steel ---------- */
.panel{
  position:relative;border-radius:14px;margin:12px 2px;padding:14px;
  background:
    linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%),
    repeating-linear-gradient(93deg,rgba(255,255,255,.028) 0 2px,rgba(0,0,0,.03) 2px 4px),
    linear-gradient(160deg,#9aa0a8 0%,#767b83 28%,#a8adb5 48%,#5d6269 72%,#83898f 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(0,0,0,.35);
  border:1px solid #2f3339;
}
.panel::before{ /* copper pinstripe inlay */
  content:"";position:absolute;inset:5px;border-radius:10px;pointer-events:none;
  border:1px solid rgba(255,122,40,.35);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
/* rivets on all four corners */
.rivets{position:relative}
.rivets::after{
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:3;
  background-image:
    radial-gradient(circle at 50% 35%,#f4f7fb 0 22%,#a9afb8 38%,#54585f 66%,#1e2126 82%),
    radial-gradient(circle at 50% 35%,#f4f7fb 0 22%,#a9afb8 38%,#54585f 66%,#1e2126 82%),
    radial-gradient(circle at 50% 35%,#f4f7fb 0 22%,#a9afb8 38%,#54585f 66%,#1e2126 82%),
    radial-gradient(circle at 50% 35%,#f4f7fb 0 22%,#a9afb8 38%,#54585f 66%,#1e2126 82%);
  background-size:13px 13px;background-repeat:no-repeat;
  background-position:left top,right top,left bottom,right bottom;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
/* ---------- lamps: amber, pulsing, out of sync ---------- */
.lamp{
  display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff3d0 0%,#ffcf6e 30%,var(--amber) 55%,#6e4400 100%);
  box-shadow:0 0 8px 2px rgba(255,176,0,.75),0 0 20px 4px rgba(255,176,0,.25);
  animation:lampPulse 2.2s ease-in-out infinite;
}
.lamp.mini{width:8px;height:8px}
@keyframes lampPulse{0%,100%{opacity:1;box-shadow:0 0 10px 3px rgba(255,176,0,.85),0 0 24px 6px rgba(255,176,0,.3)}50%{opacity:.55;box-shadow:0 0 4px 1px rgba(255,176,0,.4),0 0 10px 2px rgba(255,176,0,.12)}}
/* ---------- status LEDs: tiny blinking indicators ---------- */
.status-led{
  position:absolute;width:7px;height:7px;border-radius:50%;z-index:4;
  animation:ledBlink 1.6s steps(2,jump-none) infinite;
}
.sl-green{background:#51ff7a;box-shadow:0 0 6px 2px rgba(81,255,122,.8);top:8px;right:10px}
.sl-amber{background:var(--amber);box-shadow:0 0 6px 2px rgba(255,176,0,.8);top:8px;right:22px}
.sl-cyan{background:var(--cyan);box-shadow:0 0 6px 2px rgba(57,230,255,.8);top:8px;right:10px}
.sl-pink{background:var(--pink);box-shadow:0 0 6px 2px rgba(255,90,157,.8);top:8px;right:22px}
@keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.15}}
/* ---------- engraved stencil labels ---------- */
.engraved{
  font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#33373d;text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 1px rgba(0,0,0,.5);
  font-family:"Arial Black","Helvetica Neue",sans-serif;
}
.eng-label{font-size:11px;font-weight:800;letter-spacing:.18em}
.eng-label.cyan,.cyan-text{color:var(--cyan);text-shadow:0 0 8px rgba(57,230,255,.55)}
.panel-title{font-size:19px;text-align:center}
.panel-title.sm{font-size:14px}
.sub-label{font-size:11px;letter-spacing:.22em;color:#dfe6f2;opacity:.85;text-align:center;font-weight:700}
/* ---------- LED readouts behind glass ---------- */
.led{
  font-family:"Courier New",monospace;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(180deg,#120a0a,#070404);
  border-radius:8px;padding:8px 12px;text-align:center;font-size:21px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.9),inset 0 0 24px rgba(255,59,48,.12),0 1px 0 rgba(255,255,255,.25);
  border:1px solid #000;position:relative;overflow:hidden;
  animation:ledFlicker 5s steps(12) infinite;
}
.led::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 45%,transparent 55%);pointer-events:none}
.led-red{color:#ff5147;text-shadow:0 0 6px #ff3b30,0 0 20px rgba(255,59,48,.55)}
.led-cyan{color:#5df0ff;text-shadow:0 0 6px #22d3ee,0 0 20px rgba(57,230,255,.55)}
@keyframes ledFlicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.86}94%{opacity:1}97%{opacity:.93}98%{opacity:1}}
/* ---------- puffy stickers ---------- */
.sticker{
  position:relative;display:inline-block;border-radius:18px;
  background:#fdfdfd;padding:6px;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 8px 18px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.9),inset 0 -4px 8px rgba(0,0,0,.18);
  transform:rotate(-4deg);
}
.sticker::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,transparent 35%);}
.sticker svg{display:block;width:100%;height:auto}
/* ---------- push buttons: chunky 80s ---------- */
.pushbtn{
  width:34px;height:30px;border-radius:8px;border:2px solid rgba(0,0,0,.55);cursor:pointer;
  box-shadow:0 4px 0 #26282d,0 6px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.5);
  transition:transform .06s,box-shadow .06s;
}
.pushbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #26282d,inset 0 2px 6px rgba(0,0,0,.4)}
.pushbtn.sm{width:26px;height:22px}
.p-red{background:linear-gradient(180deg,#ff6a5e,#c22a20)}
.p-orange{background:linear-gradient(180deg,#ffb35e,#d06a10)}
.p-blue{background:linear-gradient(180deg,#5ea8ff,#1d56c2)}
.chunky-btn{
  font-family:inherit;cursor:pointer;border-radius:12px;padding:12px 18px;
  background:linear-gradient(165deg,#9aa0a8,#767b83 40%,#a8adb5 60%,#5d6269);
  border:2px solid #2b2e33;color:#22252b;
  box-shadow:0 5px 0 #23262b,0 8px 14px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.55);
  transition:transform .07s,box-shadow .07s;
}
.chunky-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #23262b,inset 0 2px 8px rgba(0,0,0,.35)}
.chunky-btn.big{padding:14px 30px;background:linear-gradient(165deg,#ffd9a0,#e09a3e 45%,#ffcf7d 60%,#9a6220);border-color:#4d3408}
.chunky-btn.sm{padding:9px 14px}
.glow-btn{
  cursor:pointer;border-radius:999px;padding:12px 26px;border:2px solid #0b3a44;
  background:linear-gradient(180deg,#12333c,#0b1e24);color:#5df0ff;font-weight:900;letter-spacing:.14em;
  box-shadow:0 0 14px rgba(57,230,255,.55),inset 0 0 12px rgba(57,230,255,.25),0 4px 10px rgba(0,0,0,.5);
  transition:transform .07s;
}
.glow-btn:active{transform:scale(.96)}
.glow-btn span{font-size:13px}
/* ---------- chrome wordmark ---------- */
.chrome-word{
  font-family:"Arial Black",Impact,sans-serif;font-style:italic;font-weight:900;
  text-align:center;line-height:.95;letter-spacing:.01em;
  background:linear-gradient(180deg,#ffffff 0%,#d5d9e0 28%,#7d838b 46%,#f2f5f9 52%,#9aa0a8 68%,#565b63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
  font-size:44px;
}
.chrome-word.sm{font-size:30px}
/* ---------- neon script ---------- */
.ada-script{
  font-family:"Brush Script MT","Segoe Script",cursive;font-size:19px;color:#ff9ec7;
  text-shadow:0 0 8px rgba(255,90,157,.8),0 0 22px rgba(255,90,157,.4);text-align:center;line-height:1.35;
}
.neon-name{
  font-family:"Brush Script MT","Segoe Script",cursive;font-size:44px;color:#ff7ab8;cursor:pointer;
  text-shadow:0 0 6px #ff5a9d,0 0 18px #ff5a9d,0 0 42px rgba(255,90,157,.6);
  animation:neonBreathe 3.4s ease-in-out infinite;text-align:center;z-index:2;position:relative;
}
@keyframes neonBreathe{0%,100%{opacity:1;text-shadow:0 0 6px #ff5a9d,0 0 18px #ff5a9d,0 0 42px rgba(255,90,157,.6)}50%{opacity:.82;text-shadow:0 0 4px #ff5a9d,0 0 10px #ff5a9d,0 0 24px rgba(255,90,157,.35)}}

/* ---------- screens & transitions ---------- */
.screen{display:none}
.screen.active{display:block;animation:screenIn .28s ease-out}
@keyframes screenIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
/* ---------- COMMAND ---------- */
.wordmark-panel{padding:22px 14px 18px;overflow:hidden}
.wordmark-panel .lamp-tl{position:absolute;top:10px;left:12px}
.wordmark-panel .lamp-tr{position:absolute;top:10px;right:12px}
.wordmark-panel .lamp-bl{position:absolute;bottom:10px;left:12px}
.wordmark-panel .lamp-br{position:absolute;bottom:10px;right:12px}
.circuits{padding:16px 14px 16px 40px}
.circuit-row{display:flex;align-items:center;gap:10px;margin:10px 0}
.circuit-row .eng-label{width:108px;flex:none}
.circuit-row .led{flex:1;font-size:19px}
.circuit-row .lamp{margin-left:2px}
.circuit-side{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.circuits{padding-right:62px}
.ada-strip{
  margin:12px 2px;padding:10px 34px;border-radius:12px;position:relative;
  background:linear-gradient(160deg,#8b9098,#6a6f77 50%,#7f848c);
  box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4);
  border:1px solid #2f3339;
}
.ada-strip .lamp{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.family-panel .fam-row{
  display:flex;align-items:center;gap:10px;padding:9px 4px;
  border-top:1px dashed rgba(0,0,0,.28);
}
.family-panel .fam-row .engraved{font-size:16px}
.fam-val{margin-left:auto;font-size:16px;font-weight:800;letter-spacing:.06em}
.duo{display:flex;gap:10px}
.duo .mini-panel{flex:1;text-align:center;padding:12px 8px}
.mini-panel h3{font-size:11px;margin-bottom:8px;letter-spacing:.05em;white-space:nowrap}
.mini-panel .led{font-size:30px;margin:4px 0 10px}
.minibtns{display:flex;justify-content:center;gap:10px}
.stats-strip{display:flex;justify-content:space-between;padding:12px 10px;text-align:center}
.stat{display:flex;flex-direction:column;gap:4px;flex:1}
.stat + .stat{border-left:1px dashed rgba(0,0,0,.3)}
.stat-val{font-weight:800;font-size:14px;color:#eef2f8;letter-spacing:.04em}
.founder-panel{padding:10px 14px 10px 34px}
.founder-line{font-size:12.5px;color:#2c3036;line-height:1.5}
.founder-line .engraved{font-size:12px}
.founder-panel .lamp{position:absolute;left:12px;top:14px}
.badge-founder{
  display:inline-block;font-size:10px;font-weight:900;letter-spacing:.12em;color:#1d1200;
  background:linear-gradient(180deg,#ffd97d,#e09a3e);border:1px solid #6e4400;border-radius:6px;
  padding:2px 7px;box-shadow:0 0 8px rgba(255,176,0,.5);vertical-align:1px;
}
/* gizmo hook */
.gizmo-spot{position:relative;min-height:120px;margin:6px 2px}
.gizmo-fallback{position:absolute;right:6px;bottom:0;width:110px;height:120px;cursor:pointer;transition:transform .15s}
.gizmo-fallback:active{transform:scale(.92)}
.gizmo-fallback .gz-body{position:absolute;left:15px;bottom:8px;width:80px;height:88px;border-radius:46% 46% 42% 42%;
  background:radial-gradient(circle at 35% 30%,#c9a06a,#8a5f36 60%,#5e3d22);
  box-shadow:0 6px 14px rgba(0,0,0,.5),inset -6px -8px 14px rgba(0,0,0,.35)}
.gizmo-fallback .gz-ear{position:absolute;top:6px;width:34px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#b98f5c,#7a522e 70%);
  box-shadow:inset -3px -4px 8px rgba(0,0,0,.4);animation:earWiggle 4s ease-in-out infinite}
.gizmo-fallback .gz-ear.left{left:0;transform:rotate(-18deg)}
.gizmo-fallback .gz-ear.right{right:0;transform:rotate(18deg);animation-delay:-2s}
.gizmo-fallback .gz-eye{position:absolute;top:38px;width:17px;height:22px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 2px #2b2e33;animation:gzBlink 5s infinite}
.gizmo-fallback .gz-eye.left{left:32px}.gizmo-fallback .gz-eye.right{left:58px}
.gizmo-fallback .gz-eye::after{content:"";position:absolute;left:4px;top:5px;width:8px;height:11px;border-radius:50%;background:#1a1d22}
.gizmo-fallback .gz-eye::before{content:"";position:absolute;left:7px;top:7px;width:3px;height:4px;border-radius:50%;background:#fff;z-index:1}
.gizmo-fallback .gz-mouth{position:absolute;left:48px;top:66px;width:14px;height:8px;border-radius:0 0 12px 12px;background:#3a2415}
.gizmo-fallback .gz-body{animation:gzBreathe 3.2s ease-in-out infinite}
@keyframes gzBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035,1.05)}}
@keyframes gzBlink{0%,93%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.08)}}
@keyframes earWiggle{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-12deg)}}
.gizmo-fallback.wave .gz-body{animation:gzWave .5s ease-in-out 3}
@keyframes gzWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.gizmo-fallback.celebrate .gz-body{animation:gzJump .45s ease-in-out 4}
@keyframes gzJump{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px) scale(1.05)}}
.gizmo-fallback.sulk{filter:saturate(.6) brightness(.85)}
.gizmo-fallback.sulk .gz-mouth{border-radius:12px 12px 0 0;transform:scaleY(-1)}
.gizmo-img{position:absolute;right:0;bottom:0;width:120px;image-rendering:auto}
/* floating stickers on command */
.sticker-bolt{position:absolute;right:8px;top:9%;width:58px;z-index:5;transform:rotate(12deg)}
#screen-command{position:relative}
/* ---------- CREW ---------- */
.crew-head{display:flex;align-items:center;gap:12px}
.sticker-patch{width:74px;flex:none;transform:rotate(-6deg)}
.crew-head-text{flex:1}
.crew-head-text .panel-title{text-align:left}
.crew-head-text .sub-label{text-align:left;margin-top:4px}
.founders-box{margin:12px 2px}
.founder-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin:8px 0;
  background:linear-gradient(160deg,#3a3f47,#23262c);border:1px solid #14161a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.4)}
.founder-row .handle{font-weight:800;color:#eef2f8}
.founder-row .addr{font-family:monospace;font-size:11px;color:#9aa4b5}
.founder-row .bal{margin-left:auto;font-family:monospace;color:var(--cyan);font-size:13px}
.badge-excluded{font-size:9px;font-weight:900;letter-spacing:.1em;padding:3px 8px;border-radius:6px;background:#2b2e33;color:#ffb000;border:1px solid #6e4400}
.tier-block{margin:14px 2px}
.tier-divider{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.tier-divider .engraved{font-size:14px;white-space:nowrap}
.tier-divider .rule{flex:1;height:2px;background:linear-gradient(90deg,transparent,rgba(255,176,0,.6),transparent)}
.crew-row{
  display:flex;align-items:center;gap:10px;padding:10px;margin:8px 0;border-radius:12px;cursor:pointer;
  background:linear-gradient(165deg,#878d95,#676c74 45%,#7e848c 70%,#54585f);
  border:1px solid #2b2e33;box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .08s;
}
.crew-row:active{transform:scale(.985)}
.rank-led{font-family:"Courier New",monospace;font-weight:700;font-size:17px;color:#5df0ff;min-width:44px;text-align:center;
  background:#0a0d12;border-radius:7px;padding:7px 4px;text-shadow:0 0 8px rgba(57,230,255,.7);
  box-shadow:inset 0 2px 8px #000;animation:ledFlicker 6s steps(12) infinite}
.pfp{width:42px;height:42px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-weight:700;font-size:19px;color:#0b0e14;
  background:linear-gradient(135deg,var(--cyan),#1d8fc2);border:2px solid #10131a;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5)}
.crew-meta{flex:1;min-width:0}
.crew-meta .handle{font-weight:800;font-size:14.5px;color:#f2f5fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crew-meta .bal{font-family:monospace;font-size:12px;color:#cfd6e2}
.reward-pill{
  font-size:12.5px;font-weight:900;letter-spacing:.06em;color:#08222b;white-space:nowrap;
  background:linear-gradient(180deg,#8ff5ff,#39e6ff 60%,#1d9fc2);border-radius:999px;padding:7px 12px;
  border:2px solid #eafcff;box-shadow:0 0 12px rgba(57,230,255,.55),0 3px 6px rgba(0,0,0,.4);
}
.reward-pill.gold{background:linear-gradient(180deg,#ffe9ad,#ffb000 60%,#c07a10);box-shadow:0 0 12px rgba(255,176,0,.6),0 3px 6px rgba(0,0,0,.4)}
.reward-pill.silver{background:linear-gradient(180deg,#f2f5f9,#b9c1cb 60%,#7d848d);box-shadow:0 0 10px rgba(200,210,220,.5),0 3px 6px rgba(0,0,0,.4)}
.reward-pill.bronze{background:linear-gradient(180deg,#f0b27d,#c07a3e 60%,#8a4f1e);color:#2b1600;box-shadow:0 0 10px rgba(220,140,70,.5),0 3px 6px rgba(0,0,0,.4)}
.crew-detail{display:none;padding:10px 4px 2px;font-size:12.5px;color:#2c3036}
.crew-row.open .crew-detail{display:block}
.crew-detail .dline{display:flex;justify-content:space-between;padding:3px 0;border-top:1px dashed rgba(0,0,0,.25)}
.crew-detail .mono{font-family:monospace}
.loading-line{text-align:center;padding:24px;font-size:13px}

/* ---------- JUKEBOX ---------- */
.juke-head{display:flex;align-items:center;gap:12px}
.sticker-tape{width:92px;flex:none;transform:rotate(3deg)}
.boombox{padding:16px 14px}
.bb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.vu-face{position:relative;width:74px;height:56px;border-radius:10px;background:linear-gradient(180deg,#f4e9c8,#d9c491);
  border:3px solid #2b2e33;box-shadow:inset 0 2px 8px rgba(0,0,0,.35);overflow:hidden}
.vu-face::before{content:"";position:absolute;inset:6px;
  background:repeating-linear-gradient(90deg,rgba(120,60,20,.35) 0 1px,transparent 1px 8px);border-radius:6px}
.vu-needle{position:absolute;left:8px;bottom:6px;width:58px;height:3px;background:#c22a20;border-radius:2px;
  transform-origin:0 50%;transform:rotate(-38deg);box-shadow:0 0 4px rgba(194,42,32,.7)}
.vu.playing .vu-needle{animation:needleDance .7s ease-in-out infinite alternate}
.vu-cap{position:absolute;bottom:2px;right:6px;font-size:10px;font-weight:900;color:#5a4020}
@keyframes needleDance{from{transform:rotate(-38deg)}to{transform:rotate(28deg)}}
.bb-brand{font-size:15px}
.bb-mid{display:flex;align-items:center;gap:10px}
.speaker{width:76px;height:96px;border-radius:12px;flex:none;background:radial-gradient(circle at 50% 42%,#1c1f24 0 30%,#33373d 31% 46%,#14161a 47%);
  border:3px solid #2b2e33;box-shadow:inset 0 3px 10px rgba(0,0,0,.7)}
.sp-cone{width:100%;height:100%;border-radius:12px;background:repeating-radial-gradient(circle at 50% 42%,rgba(255,255,255,.05) 0 3px,transparent 3px 7px)}
.deck{flex:1;border-radius:10px;padding:10px;background:linear-gradient(180deg,#14161a,#0b0d11);
  border:2px solid #000;box-shadow:inset 0 2px 12px #000;position:relative}
.cassette{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-radius:8px;
  background:linear-gradient(180deg,#20242b,#12151a);border:1px solid #33373d}
.reel{width:34px;height:34px;border-radius:50%;position:relative;flex:none;
  background:conic-gradient(#ff9ec7 0 60deg,#3a3f47 60deg 120deg,#ff9ec7 120deg 180deg,#3a3f47 180deg 240deg,#ff9ec7 240deg 300deg,#3a3f47 300deg 360deg);
  border:3px solid #0a0c0f;box-shadow:0 0 8px rgba(255,90,157,.4)}
.reel::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#0b0d11;border:2px solid #ff9ec7}
.deck.playing .reel{animation:reelSpin 1.1s linear infinite}
.deck.playing .reel#reelR{animation-duration:.8s}
@keyframes reelSpin{to{transform:rotate(360deg)}}
.tape-window{flex:1;height:10px;margin:0 8px;border-radius:5px;background:linear-gradient(90deg,#3a2c1c,#6e5230,#3a2c1c);box-shadow:inset 0 1px 3px #000}
.deck-label{text-align:center;font-size:10px;margin-top:8px;color:#9aa4b5;letter-spacing:.2em}
.bb-bottom{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.knob{width:64px;height:64px;border-radius:50%;cursor:grab;position:relative;touch-action:none;
  background:conic-gradient(from 200deg,#d5d9e0,#7d838b,#d5d9e0,#565b63,#d5d9e0);
  border:3px solid #23262b;box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.5)}
.knob:active{cursor:grabbing}
.knob-pointer{position:absolute;left:50%;top:5px;width:5px;height:20px;margin-left:-2.5px;border-radius:3px;background:#ff5147;box-shadow:0 0 6px #ff3b30}
.tracklist{padding:12px}
#trackRows{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.track-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;cursor:pointer;
  background:linear-gradient(165deg,#6b7078,#4c5158);border:1px solid #23262b;
  box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .07s}
.track-row:active{transform:scale(.98)}
.track-row .tplay{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#8a8f98,#4c5158);border:2px solid #1d1f24;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.track-row .tplay svg{width:12px;height:12px}
.track-row .tnum{font-family:monospace;font-weight:700;color:#cfd6e2;font-size:13px}
.track-row .tname{flex:1;font-weight:900;letter-spacing:.1em;color:#f2f5fa;font-size:14px}
.track-row .tdur{font-family:monospace;font-size:12px;color:#aeb8c6}
.track-row.playing{background:linear-gradient(165deg,#8a6a35,#6e4f22);border-color:#ffb000;
  box-shadow:0 0 14px rgba(255,176,0,.5),0 3px 8px rgba(0,0,0,.4)}
.track-row.playing .tname{color:#ffe9bd}
.transport{display:flex;gap:10px;justify-content:center;margin:12px 2px}
/* ---------- RULES ---------- */
.rules-head{display:flex;align-items:center;gap:14px}
.sticker-shield{width:70px;flex:none;transform:rotate(-4deg)}
.dossier{margin:12px 2px}
.dossier-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dossier-head h3{font-size:17px}
.sticker-mini{width:46px;transform:rotate(6deg)}
.dossier-sum{font-size:13px;font-weight:800;letter-spacing:.1em;margin-bottom:8px}
.dossier-list{list-style:none}
.dossier-list li{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:14px;font-weight:700;color:#2c3036;border-top:1px dashed rgba(0,0,0,.25)}
.tick{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3d0,#ffb000 60%,#6e4400);box-shadow:0 0 6px rgba(255,176,0,.7);flex:none;animation:lampPulse 2.6s ease-in-out infinite}
.dossier-list.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.mult-row{display:flex;gap:10px;margin:8px 0}
.mult-pill{font-weight:900;font-size:15px;color:#3a2200;background:linear-gradient(180deg,#ffd97d,#e09a3e);
  border:2px solid #6e4400;border-radius:10px;padding:7px 14px;box-shadow:0 3px 0 #4d3408,0 5px 10px rgba(0,0,0,.35)}
.fineprint{font-size:11.5px;color:#3a3f46;line-height:1.5;margin-top:6px}
.lookup{padding:14px}
.lookup-row{display:flex;gap:8px;margin-top:8px}
.steel-input{flex:1;min-width:0;border-radius:9px;padding:11px 12px;font-size:14px;font-family:monospace;
  background:linear-gradient(180deg,#14161a,#0b0d11);color:#5df0ff;border:2px solid #000;
  box-shadow:inset 0 2px 8px #000,0 1px 0 rgba(255,255,255,.2)}
.steel-input::placeholder{color:#5a6474}
.lookup-result{margin-top:10px;border-radius:10px;padding:12px;background:linear-gradient(160deg,#2c3138,#1a1d22);
  border:1px solid #0c0e11;color:#e8ecf2;font-size:13.5px;line-height:1.7;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.lookup-result .mono{font-family:monospace;color:var(--cyan)}
/* ---------- YOU: themed quarters ---------- */
.you-head .crew-head-text .panel-title{text-align:center}
.theme-picker{display:flex;gap:10px;justify-content:center;margin:12px 2px}
.theme-btn{cursor:pointer;padding:10px 14px;border-radius:16px;font-size:11px;transition:transform .08s}
.theme-btn .engraved{font-size:10.5px;line-height:1.4}
.theme-btn:active{transform:scale(.94)}
.theme-btn.selected{outline:3px solid var(--amber);box-shadow:0 0 16px rgba(255,176,0,.65),0 8px 18px rgba(0,0,0,.55)}
.room-frame{padding:0;overflow:hidden;min-height:380px}
.room-scene{position:absolute;inset:0;overflow:hidden;border-radius:12px}
.scene-wall{position:absolute;inset:0 0 38% 0}
.scene-floor{position:absolute;inset:62% 0 0 0}
.scene-prop{position:absolute}
/* Roller Lounge */
.theme-roller .scene-wall{background:linear-gradient(180deg,#123a44,#0e2c34 60%,#12303a),
  repeating-linear-gradient(90deg,rgba(57,230,255,.08) 0 26px,transparent 26px 52px)}
.theme-roller .scene-floor{background:repeating-conic-gradient(#e8ecf2 0 25%,#14161a 0 50%) 0 0/44px 44px;
  transform:perspective(300px) rotateX(28deg);transform-origin:top;box-shadow:inset 0 20px 40px rgba(0,0,0,.5)}
.theme-roller .prop-discoball{left:7%;top:5%;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#9adcff 35%,#3a6a8a 70%,#16232e);
  box-shadow:0 0 24px rgba(154,220,255,.6);animation:discoSpin 7s linear infinite}
@keyframes discoSpin{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
/* Orbital Cabin */
.theme-orbital .scene-wall{background:linear-gradient(180deg,#2a2f38,#1a1e25 70%,#232830)}
.theme-orbital .scene-floor{background:linear-gradient(180deg,#333943,#22262d)}
.theme-orbital .prop-window{left:auto;right:5%;top:6%;width:120px;height:120px;border-radius:50%;
  border:14px solid #4c5158;box-shadow:0 0 0 4px #23262b,inset 0 0 30px #000,0 0 30px rgba(255,120,40,.25);
  background:radial-gradient(circle at 62% 66%,#ff8a3d 0 26%,#b34a1e 27% 34%,#0a0d18 35%),
  radial-gradient(1.5px 1.5px at 30% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),#05070f}
/* Record Shop */
.theme-record .scene-wall{background:repeating-linear-gradient(90deg,#4a3220 0 34px,#3d2817 34px 68px)}
.theme-record .scene-floor{background:linear-gradient(180deg,#5a4028,#3a2817)}
.theme-record .prop-shelf{left:6%;right:6%;top:34%;height:10px;background:#2b1d0e;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.theme-record .prop-shelf::before{content:"";position:absolute;left:2%;right:2%;top:-64px;height:60px;
  background:repeating-linear-gradient(90deg,#14161a 0 10px,#39e6ff 10px 12px,#14161a 12px 26px,#ff5a9d 26px 28px,#14161a 28px 42px);
  border-radius:4px;box-shadow:0 3px 6px rgba(0,0,0,.5)}
.room-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 16px 22px;min-height:380px}
.avatar-frame{width:118px;padding:8px;transform:rotate(2deg)}
.pixel-avatar{width:96px;height:96px;margin:0 auto;
  background:
    radial-gradient(circle at 32% 38%,#fff 0 7%,transparent 8%),
    radial-gradient(circle at 68% 38%,#fff 0 7%,transparent 8%),
    radial-gradient(circle at 32% 40%,#1a1d22 0 4.5%,transparent 5.5%),
    radial-gradient(circle at 68% 40%,#1a1d22 0 4.5%,transparent 5.5%),
    linear-gradient(180deg,#8a5f36,#6e4a28);
  border-radius:18px;border:3px solid #2b2e33;box-shadow:inset 0 -8px 14px rgba(0,0,0,.4);
  animation:gzBreathe 3.4s ease-in-out infinite}
.sm-float{position:absolute;width:52px;z-index:3}
.sticker-bolt.sm-float{left:8%;top:30%;transform:rotate(-12deg)}
.sticker-star.sm-float{right:8%;top:22%;transform:rotate(10deg)}
.id-plate{font-size:12px;padding:8px 18px;border-radius:8px;background:linear-gradient(165deg,#878d95,#5d6269);
  border:1px solid #2b2e33;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(0,0,0,.4)}
/* folder tabs: steel file dividers */
.folder-tabs{display:flex;gap:6px;margin:14px 2px 0;align-items:flex-end}
.folder-tab{
  flex:1;cursor:pointer;border:2px solid #23262b;border-bottom:none;border-radius:12px 12px 0 0;
  padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:linear-gradient(165deg,#7d838b,#5d6269);color:#22252b;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4);transition:transform .08s;
}
.folder-tab .engraved{font-size:10.5px}
.folder-tab .lamp{opacity:.35}
.folder-tab.active{background:linear-gradient(165deg,#a8adb5,#7d838b);transform:translateY(-3px);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6),0 -4px 12px rgba(0,0,0,.3)}
.folder-tab.active .lamp{opacity:1}
.folder-body{border-radius:0 12px 12px 12px;margin-top:0}
.folder-pane{display:none}
.folder-pane.active{display:block;animation:screenIn .22s ease-out}
.poster-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 8px}
.poster{aspect-ratio:3/4;border-radius:8px;border:3px solid #23262b;display:flex;align-items:flex-end;justify-content:center;
  padding:10px;box-shadow:0 5px 12px rgba(0,0,0,.5),inset 0 0 20px rgba(0,0,0,.35);position:relative;overflow:hidden}
.poster .engraved{font-size:12px;color:#f2f5fa;text-shadow:0 2px 4px #000;z-index:1;text-align:center}
.poster.p1{background:linear-gradient(180deg,#2b1a4e 20%,#ff5a9d 55%,#ffcf6e 75%,#1a0f2e)}
.poster.p2{background:linear-gradient(180deg,#0e2c4e 30%,#39e6ff 60%,#0a1a2e)}
.poster.p3{background:radial-gradient(circle at 50% 30%,#fff 0 4%,#2b1a4e 5% 40%,#0a0d18 70%)}
.poster.p4{background:linear-gradient(160deg,#3d1030,#ff5a2d 70%,#2b0a1e)}
.coin-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;margin:4px 0 8px;
  background:linear-gradient(160deg,#3a3f47,#22262c);border:1px solid #101216}
.coin-face{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:"Arial Black",sans-serif;font-size:26px;color:#3a2200;
  background:radial-gradient(circle at 35% 30%,#ffe9ad,#e09a3e 60%,#8a5a1a);border:3px solid #6e4400;
  box-shadow:0 0 12px rgba(255,176,0,.5)}
.coin-meta .engraved{font-size:13px;color:#e8ecf2;text-shadow:0 1px 2px #000}
.mono-line{font-family:monospace;font-size:12px;color:var(--cyan);margin:3px 0}
.badge-row{display:flex;gap:12px;justify-content:center;margin:6px 0 8px}
.badge-sticker{width:92px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;transform:rotate(-3deg)}
.badge-sticker:nth-child(2){transform:rotate(3deg)}
.badge-sticker svg{width:44px;height:44px}
.badge-sticker .engraved{font-size:9px;text-align:center;color:#33373d}
.mini-tracks{display:flex;flex-direction:column;gap:6px}
.mini-track{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:700;color:#2c3036;
  background:linear-gradient(165deg,#878d95,#676c74);border:1px solid #2b2e33}
.mini-track .tnum{font-family:monospace;color:#1d2126}
/* ---------- now playing bar ---------- */
.nowbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(104px + env(safe-area-inset-bottom));z-index:40;
  width:min(404px,calc(100vw - 24px));display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;background:linear-gradient(165deg,#2c3138,#171a1f);
  border:1px solid #3a3f47;box-shadow:0 6px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);
}
.nowbar[hidden]{display:none}
.nowbar-btn{width:34px;height:34px;border-radius:50%;flex:none;cursor:pointer;border:2px solid #0b3a44;
  background:radial-gradient(circle at 35% 30%,#2b4a55,#101c22);box-shadow:0 0 10px rgba(57,230,255,.4)}
.nowbar-btn svg{width:14px;height:14px;margin:8px}
.nowbar-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.nowbar-track{font-size:12.5px;font-weight:700;color:#e8ecf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowbar-eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.nowbar-eq span{width:4px;background:var(--cyan);border-radius:2px;box-shadow:0 0 6px rgba(57,230,255,.7)}
.nowbar-eq span:nth-child(1){height:60%;animation:eqB 0.9s ease-in-out infinite alternate}
.nowbar-eq span:nth-child(2){height:100%;animation:eqB 0.7s ease-in-out infinite alternate-reverse}
.nowbar-eq span:nth-child(3){height:45%;animation:eqB 1.1s ease-in-out infinite alternate}
.nowbar-eq span:nth-child(4){height:80%;animation:eqB 0.8s ease-in-out infinite alternate-reverse}
.nowbar.paused .nowbar-eq span{animation-play-state:paused;height:20%}
@keyframes eqB{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:50;
  width:min(430px,100vw);display:flex;justify-content:space-around;align-items:flex-end;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#3a3f47,#22262b 60%,#14161a);
  border-top:3px solid #4c5158;box-shadow:0 -8px 24px rgba(0,0,0,.6);
}
.tabbar .lamp{position:absolute;left:14px;top:8px}
.tabbar .status-led{top:8px}
.tab-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 6px}
.tab-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#9aa0a8,#5d6269 60%,#2e3237);
  border:3px solid #14161a;box-shadow:0 4px 0 #101216,0 6px 12px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.4);
  transition:transform .07s,box-shadow .07s}
.tab-btn:active .tab-ring{transform:translateY(3px);box-shadow:0 1px 0 #101216,inset 0 2px 6px rgba(0,0,0,.4)}
.tab-ring svg{width:26px;height:26px}
.tab-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:#8b93a1}
.tab-btn.active .tab-ring{border-color:var(--pink);box-shadow:0 4px 0 #101216,0 0 16px rgba(255,90,157,.75),inset 0 2px 4px rgba(255,255,255,.4)}
.tab-btn.active .tab-label{color:var(--pink);text-shadow:0 0 8px rgba(255,90,157,.7)}
/* ---------- sound toggle ---------- */
.sound-toggle{
  position:fixed;top:10px;right:calc(50% - min(215px,50vw) + 10px);z-index:60;cursor:pointer;
  display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  background:linear-gradient(165deg,#3a3f47,#22262b);border:2px solid #101216;
  box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15);
}
.st-knob{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a8f98,#4c5158);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.st-label{font-size:10px;font-weight:900;letter-spacing:.12em;color:#8b93a1}
.sound-toggle.on .st-knob{background:radial-gradient(circle at 35% 30%,#fff3d0,#ffb000 60%,#6e4400);box-shadow:0 0 8px rgba(255,176,0,.8)}
.sound-toggle.on .st-label{color:var(--amber)}
/* ---------- responsive & motion prefs ---------- */
@media (max-width:360px){
  .chrome-word{font-size:36px}
  .circuit-row .eng-label{width:88px;font-size:9.5px}
  .reward-pill{font-size:11px;padding:6px 9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s !important;animation-iteration-count:1 !important}
}