/* ─────────────────────────────────────────────────────────────────
   BASE
───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Courier New', Courier, monospace; }

body {
  min-height: 100dvh;
  background:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.018) 0, transparent 1px, transparent 52px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.018) 0, transparent 1px, transparent 52px),
    radial-gradient(ellipse at 50% 0%, #160630 0%, #060110 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  gap: 10px;
  padding: 12px 0 16px;
}

/* ─────────────────────────────────────────────────────────────────
   RAINING QUARTERS
───────────────────────────────────────────────────────────────── */
#bg-quarters { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bq {
  position: absolute; top: -55px;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f8e870, #c89010, #7a5000);
  border: 2px solid #a07010;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: bold; color: #4a2e00;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,220,80,0.4);
  animation: coin-fall linear infinite;
  opacity: 0;
}
@keyframes coin-fall {
  0%   { top: -55px; opacity: 0;    transform: rotate(0deg); }
  8%   { opacity: 0.5; }
  92%  { opacity: 0.5; }
  100% { top: 110vh;  opacity: 0;   transform: rotate(540deg); }
}

/* ─────────────────────────────────────────────────────────────────
   HEADER
───────────────────────────────────────────────────────────────── */
#arcade-header {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; max-width: 700px; padding: 0 12px;
}

#neon-frame {
  width: 100%; padding: 3px;
  background: linear-gradient(90deg,#ff6b6b,#ff922b,#ffd93d,#6bcb77,#4d96ff,#cc5de8,#ff6b6b);
  background-size: 300% 100%;
  animation: rainbow-shift 4s linear infinite;
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(180,100,255,0.45), 0 0 60px rgba(100,50,200,0.2);
}
@keyframes rainbow-shift { 0%{background-position:0%} 100%{background-position:300%} }

#neon-text {
  background: #06021a;
  border-radius: 10px;
  padding: 10px 16px;
  text-align: center;
  font-size: clamp(13px, 4vw, 24px);
  font-weight: bold;
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 22px #d0a0ff, 0 0 45px #a060ff;
  animation: neon-pulse 2.5s ease-in-out infinite alternate;
}
@keyframes neon-pulse {
  from { text-shadow: 0 0 8px #fff, 0 0 18px #d0a0ff, 0 0 36px #a060ff; }
  to   { text-shadow: 0 0 14px #fff, 0 0 30px #e0c0ff, 0 0 60px #c080ff; }
}
#neon-sub {
  background: #06021a;
  border-radius: 10px;
  text-align: center;
  padding: 0 16px 8px;
  font-size: 9px; letter-spacing: 5px; color: #8060c0;
}

#bday-tag {
  font-size: clamp(10px, 3vw, 15px);
  letter-spacing: 3px;
  color: #f8d060;
  text-shadow: 0 0 14px rgba(248,208,96,0.7);
  animation: bday-glow 2s ease-in-out infinite alternate;
}
@keyframes bday-glow {
  from { text-shadow: 0 0 8px rgba(248,208,96,0.4); }
  to   { text-shadow: 0 0 20px rgba(248,208,96,0.95); }
}

/* ─────────────────────────────────────────────────────────────────
   ARCADE FLOOR — horizontal scroll row
───────────────────────────────────────────────────────────────── */
#arcade-floor {
  position: relative; z-index: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 20px 16px 12px;
}
#arcade-floor::-webkit-scrollbar { display: none; }

#cab-strip {
  display: flex;
  gap: 28px;
  width: max-content;
  align-items: flex-end;
  padding-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   BASE CABINET SHELL
───────────────────────────────────────────────────────────────── */
.hub-cab {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  flex-shrink: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.hub-cab.playable { cursor: pointer; }
.hub-cab.playable:hover  { transform: scale(1.04) translateY(-8px); }
.hub-cab.playable:active { transform: scale(0.97); }
.hub-cab.locked { opacity: 0.42; cursor: default; }

/* 3-D lid (visible top surface of the box) */
.hc-lid {
  width: 85%;
  height: 16px;
  margin-bottom: -1px;
  position: relative;
  overflow: hidden;
}
.hc-lid::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.16) 0%, transparent 100%);
}

/* Cabinet body = sides + front */
.hc-body { display: flex; align-items: stretch; width: 100%; }

/* Side panels */
.hc-side {
  width: 18px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 40px; gap: 20px;
}
.hc-side.l { border-radius: 12px 0 0 8px; }
.hc-side.r { border-radius: 0 12px 8px 0; }

.hc-stripe {
  position: absolute;
  top: 0; left: 3px; right: 3px; bottom: 0;
  opacity: 0.45;
}

/* Wood grain for sheep cabinet */
.hc-wood {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    92deg,
    rgba(0,0,0,0.25) 0px, transparent 2px,
    transparent 8px, rgba(0,0,0,0.15) 9px,
    transparent 11px
  );
}

/* Front face */
.hc-face {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Marquee */
.hc-mq {
  position: relative; overflow: hidden;
  padding: 7px 6px;
  text-align: center;
  border-bottom: 2px solid rgba(0,0,0,0.3);
}
.hc-mq-glow {
  position: absolute; inset: 0;
  background-size: 300% 100%;
  animation: rainbow-shift 4s linear infinite;
  opacity: 0.88;
}
.hc-mq-txt {
  position: relative; z-index: 1;
  font-size: 8px; font-weight: bold; letter-spacing: 2px; color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.hc-mq-sub {
  position: relative; z-index: 1;
  font-size: 6px; letter-spacing: 2px; color: rgba(255,255,255,0.75);
  margin-top: 2px;
}

/* Locked marquee (no rainbow) */
.lock-mq .hc-mq-glow { display: none; }
.lock-mq { background: #0c0c18; }
.lock-mq .hc-mq-txt { color: #2e2860; text-shadow: none; }
.lock-mq .hc-mq-sub { color: #1e1840; }

/* Speaker row */
.hc-speaker {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 7px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
}
.hc-grille {
  flex: 1; height: 14px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.4) 1.2px, transparent 1.2px);
  background-size: 5px 5px;
  border-radius: 2px; border: 1px solid rgba(0,0,0,0.2);
}
.hc-brand { font-size: 6px; letter-spacing: 2px; white-space: nowrap; }

/* Monitor */
.hc-monitor { padding: 7px; }
.hc-bezel {
  border-radius: 5px; padding: 7px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.5);
}
.hc-screen {
  position: relative; border-radius: 3px;
  overflow: hidden; height: 160px;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.8);
}

/* CRT overlays on screen */
.hc-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 3px, rgba(0,0,0,0.055) 3px, rgba(0,0,0,0.055) 4px);
}
.hc-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100%);
}

/* Control panel */
.hc-ctrl {
  padding: 6px 8px;
  border-top: 2px solid rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.lock-ctrl { justify-content: space-between; }

/* Joystick */
.hc-joystick { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.hj-base {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 10px;
  background: radial-gradient(ellipse at 50% 30%, #3a3a3a, #111);
  border-radius: 50%; border: 1.5px solid #080808;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.hj-shaft {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 13px;
  background: linear-gradient(to right, #444, #777, #444);
  border-radius: 2px;
}
.hj-ball {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #666, #111);
  border: 1.5px solid #080808;
  box-shadow: 0 2px 4px rgba(0,0,0,0.9);
}

/* Play button */
.hc-play-btn {
  flex: 1;
  padding: 7px 2px;
  font-family: inherit; font-size: 7px; font-weight: bold; letter-spacing: 1.5px;
  cursor: pointer; border: none; border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.5);
  animation: play-blink 1.6s ease-in-out infinite alternate;
}

.lock-badge {
  flex: 1; text-align: center;
  font-size: 7px; letter-spacing: 2px; color: #2e2860; padding: 7px 0;
}

/* Action buttons */
.hc-ab-row { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.hc-ab {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.4);
  box-shadow: 0 3px 0 rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,255,255,0.15);
}
.hc-ab.r { background: radial-gradient(circle at 33% 28%, #ff6666, #bb0000); }
.hc-ab.b { background: radial-gradient(circle at 33% 28%, #66aaff, #0033bb); }
.hc-ab.y { background: radial-gradient(circle at 33% 28%, #ffee66, #bb8800); }

/* Coin door */
.hc-coin {
  padding: 4px 8px;
  border-top: 1px solid rgba(0,0,0,0.3);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.hc-slots { display: flex; gap: 14px; }
.hc-slot {
  width: 26px; height: 5px; border-radius: 3px;
  background: #050310; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.95);
  display: flex; align-items: center; justify-content: center;
  font-size: 4px; color: rgba(255,255,255,0.15);
}
.hc-coin-lbl { font-size: 6px; letter-spacing: 2px; }

/* Kickplate */
.hc-kick {
  height: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 5px; letter-spacing: 3px;
  border-top: 1px solid rgba(0,0,0,0.4);
}

/* ─────────────────────────────────────────────────────────────────
   CABINET 1 — SHEEP ESCAPE
   Forest green + warm wood. Classic arch top.
───────────────────────────────────────────────────────────────── */
.cab-sheep .hc-lid {
  background: linear-gradient(to right, #1e4816, #2e6e24, #1e4816);
  border-radius: 55% 55% 0 0; /* Classic arch */
  border: 2px solid #3d8a30;  border-bottom: none;
  box-shadow: 0 -6px 20px rgba(60,180,60,0.3);
  transform: perspective(500px) rotateX(-30deg);
  transform-origin: bottom;
}
.cab-sheep .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)) drop-shadow(0 0 20px rgba(40,120,40,0.25)); }
.cab-sheep .hc-side  { background: linear-gradient(to right, #152e10, #1e4a16, #182c12); border: 1.5px solid #2d5a22; }
.cab-sheep .hc-side.r { background: linear-gradient(to left, #152e10, #1e4a16, #182c12); }
.cab-sheep .hc-stripe { background: linear-gradient(to bottom, #72c257,#3d8a2a,#5aaa3f,#3d8a2a,#72c257); }
.cab-sheep .hc-face  { background: linear-gradient(170deg, #1a3812 0%, #0e2208 60%, #0a1a06 100%); border: 1.5px solid #2a4a1e; border-left:none; border-right:none; }
.cab-sheep .hc-mq-glow { background: linear-gradient(90deg,#6bcb77,#3d8a2a,#72c257,#3d8a2a,#6bcb77); background-size:300%; animation:rainbow-shift 3s linear infinite; }
.cab-sheep .hc-brand { color: #2a5a20; }
.cab-sheep .hc-monitor { background: #060e04; }
.cab-sheep .hc-bezel { background: #030804; border: 1.5px solid #0e1a08; }
.cab-sheep .hc-ctrl  { background: linear-gradient(to bottom,#122010,#0a180a); }
.cab-sheep .hc-play-btn { background: #2d6e22; color: #b0e0a0; box-shadow: 0 3px 0 #122e0e; }
.cab-sheep .hc-coin  { background: #0a180a; border-top-color: #1a3010; }
.cab-sheep .hc-coin-lbl { color: #2e5a24; }
.cab-sheep .hc-kick  { background: #081206; color: #1a3010; border-top-color: #1a3010; }
@keyframes play-blink-sheep {
  from { background:#2d6e22; color:#b0e0a0; }
  to   { background:#4a9a38; color:#e0ffe0; }
}
.cab-sheep .hc-play-btn { animation: play-blink-sheep 1.6s ease-in-out infinite alternate; }

/* Sheep preview screen */
.prev-sheep {
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, #72c257 0%, #5aaa3f 55%, #3d8a2a 100%);
  position: relative; overflow: hidden;
}
.ps-grass {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(to top, #2a6a1a, #3d8a2a);
}
.ps {
  position: absolute;
  left: var(--px); top: var(--py);
  font-size: 22px;
  animation: sheep-bob 2s ease-in-out var(--d) infinite alternate;
}
@keyframes sheep-bob {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-7px) rotate(4deg); }
}

/* ─────────────────────────────────────────────────────────────────
   CABINET 2 — FEAR OF FLYING
   Sky blue + chrome silver. Flat modern top.
───────────────────────────────────────────────────────────────── */
.cab-fly .hc-lid {
  background: linear-gradient(to right, #082040, #1060a0, #082040);
  border-radius: 4px 4px 0 0;
  border: 2px solid #2080c0; border-bottom: none;
  box-shadow: 0 -4px 18px rgba(30,120,200,0.35);
  transform: perspective(500px) rotateX(-38deg);
  transform-origin: bottom;
}
.cab-fly .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)) drop-shadow(0 0 20px rgba(20,100,200,0.3)); }
.cab-fly .hc-side  {
  /* Chrome/brushed metal */
  background: linear-gradient(to right, #404858, #606878, #505868);
  border: 1.5px solid #707888;
}
.cab-fly .hc-side.r { background: linear-gradient(to left, #404858, #606878, #505868); }
.cab-fly .hc-stripe { background: linear-gradient(to bottom, #42a5f5,#1255a0,#42a5f5); }
.cab-fly .hc-face   { background: linear-gradient(170deg, #0c1a2e 0%, #081220 60%, #050c18 100%); border: 1.5px solid #182840; border-left:none; border-right:none; }
.cab-fly .hc-mq-glow { background: linear-gradient(90deg,#42a5f5,#1255a0,#4dd0e1,#1255a0,#42a5f5); background-size:300%; animation:rainbow-shift 3s linear infinite; }
.cab-fly .hc-brand  { color: #1a4060; }
.cab-fly .hc-monitor { background: #040a12; }
.cab-fly .hc-bezel  { background: #020608; border: 1.5px solid #0a1420; }
.cab-fly .hc-ctrl   { background: linear-gradient(to bottom,#0c1828,#080f1c); }
.cab-fly .hc-play-btn { background: #0d4a8a; color: #90c8f8; box-shadow: 0 3px 0 #041830; }
.cab-fly .hc-coin   { background: #06101c; border-top-color: #0e1e30; }
.cab-fly .hc-coin-lbl { color: #1a3a5a; }
.cab-fly .hc-kick   { background: #040c16; color: #0e1e30; border-top-color: #0e1e30; }
@keyframes play-blink-fly {
  from { background:#0d4a8a; color:#90c8f8; }
  to   { background:#1a70c0; color:#d0eeff; }
}
.cab-fly .hc-play-btn { animation: play-blink-fly 1.6s ease-in-out infinite alternate; }

/* Flying preview screen */
.prev-fly {
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, #1255a0 0%, #42a5f5 55%, #b3e5fc 100%);
  position: relative; overflow: hidden;
}
.pf-cloud {
  position: absolute;
  background: rgba(255,255,255,0.85);
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(255,255,255,0.3);
}
.pf-cloud::before {
  content: ''; position: absolute;
  background: inherit; border-radius: inherit;
}
.pf-cloud.c1 { width:60px; height:22px; top:25%; left:-70px; animation: cloud-scroll 5s linear infinite; }
.pf-cloud.c2 { width:45px; height:16px; top:55%; left:-55px; animation: cloud-scroll 7s 1s linear infinite; }
.pf-cloud.c3 { width:55px; height:18px; top:15%; left:-65px; animation: cloud-scroll 6s 2.5s linear infinite; }
@keyframes cloud-scroll { from{left:-80px} to{left:calc(100% + 20px)} }
.pf-plane {
  position: absolute; top: 42%; left: 20%;
  font-size: 26px;
  animation: plane-drift 3s ease-in-out infinite alternate;
}
@keyframes plane-drift {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-12px) rotate(2deg); }
}

/* ─────────────────────────────────────────────────────────────────
   CABINET 3 — GAME 3 (Crimson / Jagged top)
───────────────────────────────────────────────────────────────── */
.cab-g3 .hc-lid {
  background: linear-gradient(to right, #3a0606, #6a1010, #3a0606);
  clip-path: polygon(0 100%, 6% 0, 94% 0, 100% 100%); /* angular wedge */
  border: none;
  height: 20px;
}
.cab-g3 .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)); }
.cab-g3 .hc-side  { background: linear-gradient(to right, #200404, #380808, #240505); border: 1.5px solid #4a0a0a; }
.cab-g3 .hc-side.r { background: linear-gradient(to left, #200404, #380808, #240505); }
.cab-g3 .hc-stripe { background: linear-gradient(to bottom,#ff6b6b,#8b0000,#ff6b6b); }
.cab-g3 .hc-face   { background: linear-gradient(170deg,#1e0808,#130404,#0e0202); border:1.5px solid #3a0808; border-left:none; border-right:none; }
.cab-g3 .hc-brand  { color: #3a1010; }
.cab-g3 .hc-monitor { background: #060202; }
.cab-g3 .hc-bezel  { background: #030000; border:1.5px solid #160404; }
.cab-g3 .hc-ctrl   { background: #100404; }
.cab-g3 .hc-coin   { background: #0c0303; border-top-color:#280808; }
.cab-g3 .hc-coin-lbl { color: #300808; }
.cab-g3 .hc-kick   { background: #080202; color:#1e0606; border-top-color:#1e0606; }

/* ─────────────────────────────────────────────────────────────────
   CABINET 4 — GAME 4 (Deep navy + Gold / Art-deco stepped top)
───────────────────────────────────────────────────────────────── */
.cab-g4 .hc-lid {
  background: linear-gradient(to right, #14100a, #c89010, #14100a);
  height: 20px;
  border-radius: 2px 2px 0 0;
  border: 2px solid #a07010; border-bottom: none;
  box-shadow: 0 -4px 14px rgba(200,144,16,0.2);
  /* Steps via box-shadow trick */
  transform: perspective(500px) rotateX(-38deg);
  transform-origin: bottom;
}
.cab-g4 .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)); }
.cab-g4 .hc-side  { background: linear-gradient(to right, #100c04, #1c1808, #100c04); border: 1.5px solid #2e2610; }
.cab-g4 .hc-side.r { background: linear-gradient(to left, #100c04, #1c1808, #100c04); }
.cab-g4 .hc-stripe { background: linear-gradient(to bottom,#f8e070,#c89010,#f8e070); }
.cab-g4 .hc-face   { background: linear-gradient(170deg,#14100a,#0c0a06,#080604); border:1.5px solid #2a2010; border-left:none; border-right:none; }
.cab-g4 .hc-brand  { color: #2e2408; }
.cab-g4 .hc-monitor { background: #060402; }
.cab-g4 .hc-bezel  { background: #040200; border:1.5px solid #120e04; }
.cab-g4 .hc-ctrl   { background: #0c0a06; }
.cab-g4 .hc-coin   { background: #0a0804; border-top-color:#201808; }
.cab-g4 .hc-coin-lbl { color: #28200a; }
.cab-g4 .hc-kick   { background: #060402; color:#1a1408; border-top-color:#1a1408; }

/* ─────────────────────────────────────────────────────────────────
   CABINET 5 — GAME 5 (Candy pink + Deep purple / Blob top)
───────────────────────────────────────────────────────────────── */
.cab-g5 .hc-lid {
  background: linear-gradient(to right, #2a0838, #8a10a0, #2a0838);
  border-radius: 45% 45% 0 0; /* fat blob arch */
  border: 2px solid #b020c0; border-bottom: none;
  box-shadow: 0 -5px 18px rgba(180,20,200,0.2);
  transform: perspective(500px) rotateX(-28deg);
  transform-origin: bottom;
  width: 90%; height: 22px;
}
.cab-g5 .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)); }
.cab-g5 .hc-side  { background: linear-gradient(to right, #180820, #280c38, #1c0a28); border: 1.5px solid #3e1460; }
.cab-g5 .hc-side.r { background: linear-gradient(to left, #180820, #280c38, #1c0a28); }
.cab-g5 .hc-stripe { background: linear-gradient(to bottom,#f783ac,#cc5de8,#f783ac); }
.cab-g5 .hc-face   { background: linear-gradient(170deg,#1c0828,#140620,#0e0418); border:1.5px solid #320a48; border-left:none; border-right:none; }
.cab-g5 .hc-brand  { color: #3a1050; }
.cab-g5 .hc-monitor { background: #0a0210; }
.cab-g5 .hc-bezel  { background: #060010; border:1.5px solid #1a0428; }
.cab-g5 .hc-ctrl   { background: #100620; }
.cab-g5 .hc-coin   { background: #0c0418; border-top-color:#200830; }
.cab-g5 .hc-coin-lbl { color: #280840; }
.cab-g5 .hc-kick   { background: #080214; color:#180630; border-top-color:#180630; }

/* ─────────────────────────────────────────────────────────────────
   LOCKED SCREEN
───────────────────────────────────────────────────────────────── */
.lock-screen {
  background: #050308 !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.lock-icon { font-size: 28px; opacity: 0.4; }
.lock-txt  { font-size: 7px; letter-spacing: 3px; color: #2a2050; }

/* ─────────────────────────────────────────────────────────────────
   FLOOR TEXT
───────────────────────────────────────────────────────────────── */
#floor-text {
  position: relative; z-index: 1;
  font-size: 7px; letter-spacing: 4px;
  color: #1e1840; text-align: center;
  padding: 0 16px;
}

/* ── Cabinet 3 — Fire Escape (brick red + iron) ── */
.escape-mq .hc-mq-glow { background: linear-gradient(90deg,#c0794a,#8b3a1a,#c0794a,#8b3a1a,#c0794a); background-size:300%; animation:rainbow-shift 3s linear infinite; }
.escape-preview { background: linear-gradient(to bottom, #5a2e1a 0%, #8b4a2a 50%, #5a2e1a 100%) !important; }

.cab-g3.playable .hc-lid {
  background: linear-gradient(to right, #3a0808, #7a2010, #3a0808);
  clip-path: polygon(0 100%, 6% 0, 94% 0, 100% 100%);
  border: none; height: 20px;
}
.cab-g3.playable .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)) drop-shadow(0 0 16px rgba(180,80,30,0.2)); }
.cab-g3.playable .hc-side  { background: linear-gradient(to right, #280a04, #481408, #300c05); border: 1.5px solid #5a1a10; }
.cab-g3.playable .hc-side.r { background: linear-gradient(to left, #280a04, #481408, #300c05); }
.cab-g3.playable .hc-stripe { background: linear-gradient(to bottom,#c0794a,#5a2e1a,#c0794a); }
.cab-g3.playable .hc-face   { background: linear-gradient(170deg,#2a1008,#1a0a04,#120804); border:1.5px solid #481408; border-left:none; border-right:none; }
.cab-g3.playable .hc-brand  { color: #481408; }
.cab-g3.playable .hc-monitor { background: #0a0402; }
.cab-g3.playable .hc-bezel  { background: #060200; border:1.5px solid #1a0804; }
.cab-g3.playable .hc-ctrl   { background: linear-gradient(to bottom,#1a0804,#120604); }
.cab-g3.playable .hc-play-btn { background: #8b3a1a; color: #f8c8a0; box-shadow: 0 3px 0 #3a1008; }
.cab-g3.playable .hc-coin   { background: #0e0604; border-top-color:#281008; }
.cab-g3.playable .hc-coin-lbl { color: #481408; }
.cab-g3.playable .hc-kick   { background: #080402; color:#200804; border-top-color:#200804; }
@keyframes play-blink-escape {
  from { background:#8b3a1a; color:#f8c8a0; }
  to   { background:#c0604a; color:#fff0e0; }
}
.cab-g3.playable .hc-play-btn { animation: play-blink-escape 1.6s ease-in-out infinite alternate; }

/* ── Climbing Up Wheeler hub preview — mini ladder + photos ── */
.escape-preview {
  background: linear-gradient(to bottom, #5a2e1a 0%, #8b4a2a 50%, #5a2e1a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  /* Brick texture */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 28px),
    linear-gradient(to bottom, #5a2e1a, #8b4a2a) !important;
}

.ep-ladder {
  position: absolute;
  top: 6%; bottom: 4%;
  left: 50%; transform: translateX(-50%);
  width: 54%;
}

/* Vertical rails */
.ep-rail {
  position: absolute;
  top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to right, #3a3a3a, #555, #222);
  border-radius: 2px;
  box-shadow: 1px 0 3px rgba(0,0,0,0.6);
}
.ep-rail.l { left: 0; }
.ep-rail.r { right: 0; }

/* Rungs */
.ep-rung {
  position: absolute;
  left: -2px; right: -2px;
  height: 5px;
  background: linear-gradient(to bottom, #484848, #222);
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Polaroid photo on rung */
.ep-photo {
  width: 28px; height: 22px;
  background: #f8f4ee;
  border-radius: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.ep-photo::before {
  /* Photo image fill */
  content: '';
  position: absolute;
  top: 2px; left: 2px; right: 2px; bottom: 5px;
  border-radius: 1px;
}
/* Different tint per photo (simulates actual photos) */
.ep-photo.p1::before { background: linear-gradient(135deg,#7ec8e3,#1a6fb5); }
.ep-photo.p2::before { background: linear-gradient(135deg,#a8d8a8,#3a7a3a); }
.ep-photo.p3::before { background: linear-gradient(135deg,#f4c4a4,#c07040); }
.ep-photo.p4::before { background: linear-gradient(135deg,#d4a8d8,#804a90); }
.ep-photo.p5::before { background: linear-gradient(135deg,#f8d8a8,#c89030); }

/* ── Chutes & Memories hub preview — mini board ── */
.board-preview {
  background: #f5edd8 !important;
  position: relative !important;
  padding: 6px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.bp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  width: 100%; height: 100%;
  flex: 1;
}
.bp-sq {
  background: #fff9e0;
  border: 1px solid rgba(120,90,50,0.25);
  border-radius: 2px;
  position: relative;
  font-size: 7px;
  display: flex; align-items: center; justify-content: center;
}
.bp-sq:nth-child(even) { background: #e6f4ff; }
.bp-sq:nth-child(3n)   { background: #ffe6f0; }
.bp-sq.has-ladder::after  { content: '🪜'; font-size: 9px; }
.bp-sq.has-chute::after   { content: '🐍'; font-size: 9px; }
.bp-sq.has-photo { background: #e8f5e8; }
.bp-sq.has-photo::after   { content: '📷'; font-size: 8px; }
.bp-sq.finish    { background: #fff3b0; }
.bp-sq.finish::after { content: '⭐'; font-size: 10px; }
.bp-token {
  position: absolute;
  bottom: 16px; left: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8e870, #c89010);
  border: 1px solid #a07010;
  font-size: 7px; font-weight: bold; color: #4a2e00;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ── Cabinet 4 gold theme ── */
.board-mq .hc-mq-glow {
  background: linear-gradient(90deg,#c89010,#f8e070,#c89010,#f8e070,#c89010);
  background-size: 300%; animation: rainbow-shift 3s linear infinite;
}
.cab-g4.playable .hc-lid {
  background: linear-gradient(to right, #14100a, #c89010, #14100a);
  height: 20px; border-radius: 2px 2px 0 0;
  border: 2px solid #a07010; border-bottom: none;
  box-shadow: 0 -4px 14px rgba(200,144,16,.2);
  transform: perspective(500px) rotateX(-38deg); transform-origin: bottom;
}
.cab-g4.playable .hc-body { filter: drop-shadow(0 20px 40px rgba(0,0,0,.9)) drop-shadow(0 0 16px rgba(200,160,20,.15)); }
.cab-g4.playable .hc-side  { background: linear-gradient(to right,#100c04,#1c1808,#100c04); border: 1.5px solid #2e2610; }
.cab-g4.playable .hc-side.r { background: linear-gradient(to left, #100c04,#1c1808,#100c04); }
.cab-g4.playable .hc-stripe { background: linear-gradient(to bottom,#f8e070,#c89010,#f8e070); }
.cab-g4.playable .hc-face   { background: linear-gradient(170deg,#14100a,#0c0a06,#080604); border:1.5px solid #2a2010; border-left:none; border-right:none; }
.cab-g4.playable .hc-brand  { color: #2e2408; }
.cab-g4.playable .hc-monitor { background: #060402; }
.cab-g4.playable .hc-bezel  { background: #040200; border:1.5px solid #120e04; }
.cab-g4.playable .hc-ctrl   { background: #0c0a06; }
.cab-g4.playable .hc-play-btn { background: #8a6800; color: #f8e8a0; box-shadow: 0 3px 0 #3a2800; }
.cab-g4.playable .hc-coin   { background: #0a0804; border-top-color:#201808; }
.cab-g4.playable .hc-coin-lbl { color: #282008; }
.cab-g4.playable .hc-kick   { background: #060402; color:#1a1408; border-top-color:#1a1408; }
@keyframes play-blink-board {
  from { background:#8a6800; color:#f8e8a0; }
  to   { background:#c89a20; color:#fffae0; }
}
.cab-g4.playable .hc-play-btn { animation: play-blink-board 1.6s ease-in-out infinite alternate; }

/* ════════════════════════════════════════════════════
   CLIMBING UP WHEELER — hub preview cover art
   Night-time illustration of Wheeler Dormitory
════════════════════════════════════════════════════ */

.wheeler-cover {
  background: #020810 !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Sky */
.wc-sky {
  flex: 1;
  background: linear-gradient(to bottom, #000308 0%, #060818 60%, #120a08 100%);
  position: relative;
  min-height: 28px;
}
.wc-moon {
  position: absolute; top: 4px; right: 10px; font-size: 13px;
}
.wc-star {
  position: absolute; font-size: 7px; color: rgba(255,255,220,0.7);
  animation: star-twinkle 2.5s ease-in-out infinite alternate;
}
.wc-star.s1 { top: 6px;  left: 18px; animation-delay: 0s; }
.wc-star.s2 { top: 12px; left: 55px; animation-delay: 0.8s; }
.wc-star.s3 { top: 5px;  left: 80px; animation-delay: 1.4s; }
@keyframes star-twinkle {
  from { opacity: 0.4; } to { opacity: 1; }
}

/* Building facade */
.wc-facade {
  position: relative;
  width: 92%;
  margin: 0 auto;
  background:
    /* Horizontal mortar lines */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 7px,
      rgba(180,140,100,0.35) 7px, rgba(180,140,100,0.35) 8.5px
    ),
    /* Brick base colour */
    #9a3c28;
  border-top: 2px solid #c8b090;
}

/* Roof (mansard / Colonial Revival) */
.wc-roof {
  background: #2a2a30;
  height: 14px;
  clip-path: polygon(0 100%, 3% 0, 97% 0, 100% 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 0 12px;
  border-bottom: 1.5px solid #888;
}
.wc-dormer {
  width: 14px; height: 10px;
  background: #9a3c28;
  border: 1.5px solid #c8b090;
  border-bottom: none;
  border-radius: 0 0 0 0;
  position: relative;
  top: 4px;
}
.wc-dormer::after {   /* dormer window */
  content: '';
  position: absolute;
  inset: 2px 2px 0;
  background: #88bbdd;
  border: 1px solid #fff;
}

/* Floor rows */
.wc-floor {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3px 8px;
  height: 22px;
}
.wc-floor.ground {
  height: 26px;
  padding: 2px 8px;
  justify-content: space-between;
}
/* White cornice strip between floors */
.wc-floor + .wc-floor {
  border-top: 1.5px solid #c8b090;
}

/* Windows */
.wc-win {
  width: 15px; height: 15px;
  background: #88c4ee;
  border: 1.5px solid #fff;
  position: relative;
  flex-shrink: 0;
}
.wc-win.tall { height: 20px; }
/* Window pane cross */
.wc-win::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 1px; background: #fff;
}
.wc-win::after {
  content: ''; position: absolute;
  top: 50%; left: 0; right: 0; height: 1px; background: #fff;
}
/* Warm interior light on some windows */
.wc-floor:nth-child(3) .wc-win:nth-child(odd)  { background: #e8c870; }
.wc-floor:nth-child(4) .wc-win:nth-child(even)  { background: #e8d480; }

/* Door surround + green door */
.wc-door-surround {
  display: flex; align-items: flex-end; justify-content: center;
  border: 1.5px solid #c8b090;
  border-bottom: none;
  padding: 1px 2px 0;
  border-radius: 3px 3px 0 0;
  background: rgba(200,176,144,0.25);
  flex-shrink: 0;
}
.wc-door {
  width: 13px; height: 20px;
  background: #1a6632;
  border: 1.5px solid #fff;
  border-radius: 5px 5px 0 0;
  position: relative;
}
.wc-door::after {     /* door knob */
  content: '';
  position: absolute;
  right: 2px; top: 50%;
  width: 2px; height: 2px;
  background: #f8d060;
  border-radius: 50%;
}

/* Fire escape on right side of building */
.wc-fe {
  position: absolute;
  right: 4px; top: 0; bottom: 0;
  width: 14px;
}
.wc-fe-rl, .wc-fe-rr {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px; background: #1a1a1a;
  box-shadow: 1px 0 2px rgba(0,0,0,0.6);
}
.wc-fe-rl { left: 2px; }
.wc-fe-rr { right: 2px; }
.wc-fe-rung {
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: #222;
}
.wc-fe-rung:nth-child(3) { top: 18%; }
.wc-fe-rung:nth-child(4) { top: 36%; }
.wc-fe-rung:nth-child(5) { top: 54%; }
.wc-fe-rung:nth-child(6) { top: 72%; }
.wc-fe-rung:nth-child(7) { top: 90%; }

/* Title bar */
.wc-label {
  width: 100%;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 5.5px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #f4d03f;
  padding: 3px 2px;
  background: #000;
  text-shadow: 0 0 6px rgba(244,208,63,0.5);
}

/* ════════════════════════════════════════════════════════════════
   BIRTHDAY ARCADE ATMOSPHERE — Space Cadet Pinball vibes
════════════════════════════════════════════════════════════════ */

/* Stars behind everything */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 15%  12%, rgba(255,255,220,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 42%   8%, rgba(255,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 68%  20%, rgba(255,255,220,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%   5%, rgba(255,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 28%  35%, rgba(255,255,220,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  45%, rgba(255,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at  8%  55%, rgba(255,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90%  60%, rgba(255,255,220,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 36%  75%, rgba(255,255,220,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  80%, rgba(255,255,220,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 20%  88%, rgba(255,255,220,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  92%, rgba(255,255,220,.6) 0%, transparent 100%);
}

/* Enhanced body background — deep Space Cadet black */
body {
  background:
    repeating-linear-gradient(0deg,   rgba(255,255,255,.018) 0, transparent 1px, transparent 52px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.018) 0, transparent 1px, transparent 52px),
    radial-gradient(ellipse at 20% 10%, #1a0030 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, #001a40 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, #0a0818 0%, #030108 100%);
}

/* ── Balloons ─────────────────────────────────────────────────── */
#balloons { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.bln {
  position: absolute;
  bottom: -90px;
  left: var(--bx);
  width: 42px; height: 50px;
  border-radius: 50% 50% 48% 52%;
  background: var(--bc);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  animation: bln-rise var(--bs) var(--bd) ease-in-out infinite;
  box-shadow:
    inset 10px -10px 22px rgba(255,255,255,.32),
    inset -5px 5px 12px rgba(0,0,0,.2),
    0 4px 12px rgba(0,0,0,.4);
  opacity: 0;
}
/* Knot */
.bln::after {
  content: '';
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid var(--bc);
  filter: brightness(0.65);
}
/* String */
.bln::before {
  content: '';
  position: absolute; bottom: -38px; left: 50%;
  width: 1px; height: 32px;
  background: rgba(255,255,255,.25);
}
@keyframes bln-rise {
  0%   { bottom: -90px;  opacity: 0;   transform: rotate(-6deg) translateX(0); }
  8%   { opacity: .75; }
  50%  { transform: rotate(4deg) translateX(12px); }
  90%  { opacity: .75; }
  100% { bottom: 115vh;  opacity: 0;   transform: rotate(-4deg) translateX(-8px); }
}

/* ── Neon signs row ───────────────────────────────────────────── */
#neon-signs-row {
  position: relative; z-index: 1;
  display: flex; gap: 10px; align-items: center;
  overflow: hidden;
  width: 100%; max-width: 900px;
  padding: 4px 12px;
  /* Ceiling rope effect */
  border-top: 3px solid rgba(255,200,100,.15);
}

.hang-sign {
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
  position: relative;
  animation: sign-pulse 1.8s ease-in-out infinite alternate;
}
/* Wire hanging from top */
.hang-sign::before {
  content: '';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 8px;
  background: rgba(255,220,100,.4);
}

.hs-pink  { color: #ff69b4; border: 1px solid #ff69b4; box-shadow: 0 0 10px #ff69b4, inset 0 0 8px rgba(255,105,180,.15); animation-delay: 0s; }
.hs-gold  { color: #ffd700; border: 1px solid #ffd700; box-shadow: 0 0 10px #ffd700, inset 0 0 8px rgba(255,215,0,.15);   animation-delay: 0.6s; }
.hs-blue  { color: #00d4ff; border: 1px solid #00d4ff; box-shadow: 0 0 10px #00d4ff, inset 0 0 8px rgba(0,212,255,.15);  animation-delay: 1.1s; }
.hs-green { color: #39ff14; border: 1px solid #39ff14; box-shadow: 0 0 10px #39ff14, inset 0 0 8px rgba(57,255,20,.15);  animation-delay: 0.3s; }

@keyframes sign-pulse {
  from { opacity: .7; box-shadow-blur: 6px; }
  to   { opacity: 1;  }
}

/* ── Shared deco-machine shell (claw + pinball) ───────────────── */
.deco-machine {
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
  width: 200px; flex-shrink: 0;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.95));
}
.dm-lid {
  width: 85%; height: 16px; margin-bottom: -1px;
  position: relative; overflow: hidden;
}
.dm-lid::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.18) 0%, transparent 100%);
}
.dm-body { display: flex; align-items: stretch; width: 100%; }
.dm-side {
  width: 18px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 40px; gap: 20px;
}
.dm-side.l { border-radius: 12px 0 0 8px; }
.dm-side.r { border-radius: 0 12px 8px 0; }
.dm-stripe { position: absolute; top: 0; left: 3px; right: 3px; bottom: 0; opacity: .45; }
.dm-face { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.dm-header {
  position: relative; overflow: hidden;
  padding: 7px 6px; text-align: center;
  border-bottom: 2px solid rgba(0,0,0,.3);
}
.dm-hglow { position: absolute; inset: 0; background-size: 300% 100%; animation: rainbow-shift 4s linear infinite; opacity: .88; }
.dm-htxt  { position: relative; z-index:1; font-size:8px; font-weight:bold; letter-spacing:2px; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.8); }
.dm-hsub  { position: relative; z-index:1; font-size:6px; letter-spacing:2px; color:rgba(255,255,255,.75); margin-top:2px; }

/* ════════════════════════
   CLAW MACHINE
════════════════════════ */
.claw-lid { background: linear-gradient(to right,#0a2040,#1060a0,#0a2040); border-radius:4px 4px 0 0; border:2px solid #2080c0; border-bottom:none; box-shadow:0 -4px 18px rgba(30,120,200,.4); transform:perspective(500px) rotateX(-38deg); transform-origin:bottom; }
.claw-machine .dm-side  { background:linear-gradient(to right,#040820,#0a1440,#060e2a); border:1.5px solid #102050; }
.claw-machine .dm-side.r { background:linear-gradient(to left,#040820,#0a1440,#060e2a); }
.claw-machine .dm-stripe { background:linear-gradient(to bottom,#00aaff,#0044aa,#00aaff); }
.claw-machine .dm-face { background:linear-gradient(170deg,#060e20,#040c1a,#020810); border:1.5px solid #0a2040; border-left:none; border-right:none; }
.claw-header .dm-hglow { background:linear-gradient(90deg,#00aaff,#0044cc,#00aaff); background-size:200%; animation:rainbow-shift 3s linear infinite; }

/* Glass case */
.claw-glass {
  flex: 1;
  margin: 5px 6px;
  background: rgba(100,180,255,.08);
  border: 2px solid rgba(100,200,255,.3);
  border-radius: 3px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,100,200,.1), 0 0 12px rgba(0,150,255,.15);
  min-height: 160px;
}
/* Glass shine */
.claw-glass::before {
  content: ''; position: absolute;
  top: 0; left: 8%; width: 4px; bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), transparent, rgba(255,255,255,.08));
  pointer-events: none;
}
/* Scan line effect */
.claw-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,150,255,.03) 3px, rgba(0,150,255,.03) 4px);
}

/* Claw mechanism */
.claw-track {
  position: absolute; top: 0; left: 0; right: 0; height: 24px;
  background: linear-gradient(to bottom, #1a2a40, #0a1820);
  border-bottom: 1px solid #2a4060;
  display: flex; align-items: center; justify-content: center;
}
.claw-arm {
  display: flex; flex-direction: column; align-items: center;
  animation: claw-swing 3s ease-in-out infinite;
}
@keyframes claw-swing {
  0%,100% { transform: translateX(-16px); }
  50%      { transform: translateX(16px); }
}
.claw-wire {
  width: 2px; height: 20px;
  background: linear-gradient(to bottom, #888, #555);
}
.claw-head { display: flex; gap: 1px; align-items: flex-start; }
.claw-f {
  width: 5px; height: 12px;
  background: #666;
  border-radius: 0 0 3px 3px;
  transform-origin: top center;
}
.claw-f.l { transform: rotate(-25deg); }
.claw-f.r { transform: rotate(25deg); }
.claw-f.c { height: 16px; }

/* Prizes */
.claw-prizes {
  position: absolute; bottom: 0; left: 0; right: 0; top: 24px;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: center; gap: 1px; padding: 4px;
  font-size: 18px; line-height: 1;
}
.claw-prizes span { animation: pickle-bob 2s ease-in-out infinite alternate; }
.claw-prizes span:nth-child(even) { animation-delay: .4s; }
.claw-prizes span:nth-child(3n)   { animation-delay: .8s; }
@keyframes pickle-bob {
  from { transform: translateY(0) rotate(-5deg); }
  to   { transform: translateY(-3px) rotate(5deg); }
}

/* Claw controls */
.claw-ctrl {
  padding: 5px 8px;
  background: linear-gradient(to bottom,#060e1a,#040c16);
  border-top: 2px solid #0a2040;
  display: flex; align-items: center; gap: 6px;
}
.claw-joy-wrap { position:relative; width:28px; height:28px; flex-shrink:0; }
.claw-joy-base {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:28px; height:10px;
  background:radial-gradient(ellipse at 50% 30%,#3a3a3a,#111);
  border-radius:50%; border:1.5px solid #080808;
}
.claw-joy-ball {
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 33% 28%,#66aaff,#0033bb);
  border:1.5px solid #080808;
  box-shadow:0 2px 4px rgba(0,0,0,.9),0 0 8px rgba(0,100,255,.4);
}
.claw-btn {
  flex:1; padding:7px 2px;
  background:#0044aa; color:#88ccff;
  border:none; border-radius:4px;
  font-family:inherit; font-size:7px; font-weight:bold; letter-spacing:1.5px;
  cursor:pointer; box-shadow:0 3px 0 #001a50;
  animation:claw-btn-blink 1.4s ease-in-out infinite alternate;
}
@keyframes claw-btn-blink {
  from { background:#0044aa; color:#88ccff; }
  to   { background:#0088ff; color:#ddf0ff; }
}
.claw-lights { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.cl-light {
  width:8px; height:8px; border-radius:50%;
  box-shadow:0 0 6px currentColor;
  animation:light-blink 1s ease-in-out infinite alternate;
}
.cl-light:nth-child(2) { animation-delay:.35s; }
.cl-light:nth-child(3) { animation-delay:.7s; }
@keyframes light-blink { from{opacity:.3} to{opacity:1} }

.claw-slot-area {
  padding:4px 8px; background:#040c16;
  border-top:1px solid #0a2040;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.claw-slot-hole {
  width:32px; height:5px; border-radius:3px;
  background:#020810; border:1px solid #1a4060;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9);
}
.claw-slot-lbl { font-size:6px; letter-spacing:2px; color:#1a4060; font-family:'Courier New',monospace; }
.claw-kick {
  height:12px; display:flex; align-items:center; justify-content:center;
  font-size:5px; letter-spacing:3px; color:#0a2030; font-family:'Courier New',monospace;
  background:#020810; border-top:1px solid #0a2040;
}

/* ════════════════════════
   PINBALL MACHINE — Space Cadet 25 theme
════════════════════════ */
.pb-lid { background:linear-gradient(to right,#1a0840,#5010b0,#1a0840); border-radius:50% 50% 0 0 / 30% 30% 0 0; border:2px solid #7020e0; border-bottom:none; box-shadow:0 -6px 20px rgba(120,30,255,.4); transform:perspective(500px) rotateX(-30deg); transform-origin:bottom; width:82%; }
.pinball-machine .dm-side  { background:linear-gradient(to right,#0c0420,#180a38,#100620); border:1.5px solid #2a1050; }
.pinball-machine .dm-side.r { background:linear-gradient(to left,#0c0420,#180a38,#100620); }
.pinball-machine .dm-stripe { background:linear-gradient(to bottom,#cc5de8,#7c14a8,#cc5de8); }
.pinball-machine .dm-face  { background:linear-gradient(170deg,#0e0620,#080418,#040210); border:1.5px solid #180840; border-left:none; border-right:none; }
.pb-header .dm-hglow { background:linear-gradient(90deg,#cc5de8,#7c14a8,#ff69b4,#7c14a8,#cc5de8); background-size:300%; animation:rainbow-shift 3s linear infinite; }

/* Playfield */
.pb-playfield {
  flex:1; margin:5px 6px;
  background:
    radial-gradient(ellipse at 50% 0%, #0a0430 0%, transparent 60%),
    linear-gradient(180deg, #050215 0%, #0a0425 100%);
  border:2px solid #2a1060;
  border-radius:3px; position:relative; overflow:hidden;
  box-shadow:inset 0 0 20px rgba(100,0,200,.15);
  min-height: 155px;
}
/* Playfield grid lines (Space Cadet style) */
.pb-playfield::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 14px, rgba(100,0,200,.08) 14px, rgba(100,0,200,.08) 15px),
    repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(100,0,200,.08) 14px, rgba(100,0,200,.08) 15px);
}
.pb-star {
  position:absolute; color:rgba(255,255,220,.5); font-size:8px;
  animation:star-twinkle 2s ease-in-out infinite alternate;
}

/* Bumpers */
.pb-bumper {
  position:absolute; width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle,#ff0080,#880040);
  border:2px solid #ff66bb;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:bold; color:#fff;
  text-shadow:0 0 6px #fff;
  box-shadow:0 0 12px #ff0080,0 0 24px rgba(255,0,128,.4),inset 0 2px 4px rgba(255,200,220,.3);
  animation:bumper-pulse 1.5s ease-in-out infinite alternate;
  transform:translate(-50%,-50%);
}
.pb-bmp-center { background:radial-gradient(circle,#ffd700,#aa6600); border-color:#ffee88; box-shadow:0 0 12px #ffd700,0 0 24px rgba(255,215,0,.4); }
@keyframes bumper-pulse {
  from { box-shadow:0 0 8px #ff0080,0 0 16px rgba(255,0,128,.3); transform:translate(-50%,-50%) scale(1); }
  to   { box-shadow:0 0 16px #ff0080,0 0 32px rgba(255,0,128,.6); transform:translate(-50%,-50%) scale(1.06); }
}

/* NANCY targets */
.pb-target {
  position:absolute; width:16px; height:14px;
  background:#001a40; border:1.5px solid #0066ff;
  border-radius:2px; display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:bold; color:#0099ff;
  box-shadow:0 0 6px #0066ff; transform:translateX(-50%);
  animation:target-glow 1.8s ease-in-out infinite alternate;
}
@keyframes target-glow {
  from { color:#0055cc; box-shadow:0 0 3px #0044aa; }
  to   { color:#44ccff; box-shadow:0 0 10px #0099ff; }
}

/* Lanes */
.pb-lane {
  position:absolute; top:0; bottom:28%; width:10px;
  border:1.5px solid rgba(100,0,200,.5);
  border-top:none;
}
.pb-lane.l { left:8px;  border-left:2px solid #6600cc; border-right:none; }
.pb-lane.r { right:8px; border-right:2px solid #6600cc; border-left:none; }

/* Ball */
.pb-ball {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eee,#888);
  box-shadow:0 0 8px rgba(255,255,255,.6),0 2px 4px rgba(0,0,0,.8);
  animation:ball-move 4s ease-in-out infinite;
}
@keyframes ball-move {
  0%  { top:30%; left:35%; }
  20% { top:55%; left:60%; }
  40% { top:20%; left:70%; }
  60% { top:60%; left:25%; }
  80% { top:25%; left:45%; }
  100%{ top:30%; left:35%; }
}

/* Flippers */
.pb-flipper {
  position:absolute; bottom:8%; height:6px; width:34%;
  background:linear-gradient(to bottom,#555,#222);
  border-radius:3px;
  box-shadow:0 2px 4px rgba(0,0,0,.8);
}
.pb-flipper.fl { left:8%; transform-origin:left center; transform:rotate(-22deg); }
.pb-flipper.fr { right:8%; transform-origin:right center; transform:rotate(22deg); }

/* Pinball controls */
.pb-ctrl {
  padding:5px 8px;
  background:linear-gradient(to bottom,#080418,#060214);
  border-top:2px solid #180840;
  display:flex; align-items:center; gap:6px;
}
.pb-score-wrap { flex:1; }
.pb-score-lbl  { font-size:5px; letter-spacing:2px; color:#440088; font-family:'Courier New',monospace; }
.pb-score {
  font-size:14px; font-weight:bold; letter-spacing:2px;
  color:#cc44ff;
  text-shadow:0 0 8px #aa00ff,0 0 16px rgba(170,0,255,.5);
  font-family:'Courier New',monospace;
  animation:score-flicker 3s ease-in-out infinite;
}
@keyframes score-flicker {
  0%,90%,100% { opacity:1; }
  92%          { opacity:.6; }
  95%          { opacity:1; }
  97%          { opacity:.7; }
}
.pb-plunger-wrap { display:flex; flex-direction:column; align-items:center; gap:1px; flex-shrink:0; }
.pb-plunger { width:12px; height:20px; background:linear-gradient(to right,#666,#999,#555); border-radius:2px 2px 0 0; border:1px solid #333; }
.pb-spring  { width:10px; height:8px; background:repeating-linear-gradient(to bottom,#444 0,#444 1px,transparent 1px,transparent 3px); border:1px solid #333; }

.pb-coin-area {
  padding:4px 8px; background:#040210;
  border-top:1px solid #180840;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.pb-slot { width:32px; height:5px; border-radius:3px; background:#020010; border:1px solid #180840; box-shadow:inset 0 2px 4px rgba(0,0,0,.9); }
.pb-slot-lbl { font-size:6px; letter-spacing:2px; color:#180840; font-family:'Courier New',monospace; }
.pb-kick { height:12px; display:flex; align-items:center; justify-content:center; font-size:5px; letter-spacing:3px; color:#100030; font-family:'Courier New',monospace; background:#020010; border-top:1px solid #180840; }

/* ════════════════════════════════════════════════════════════
   PARTY ADDITIONS — quarters, banner, balloons, CSS drawings
════════════════════════════════════════════════════════════ */

/* ── Gold "25" number balloons ── */
#num-balloons {
  position: relative; z-index: 1;
  display: flex; gap: 2px; align-items: flex-end;
  animation: num-float 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 18px rgba(200,150,10,.5));
}
@keyframes num-float {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-14px) rotate(2deg); }
}
.num-bln {
  font-size: 74px; font-weight: 900;
  font-family: Arial Black, Impact, sans-serif;
  line-height: 1;
  color: #f8d060;
  -webkit-text-stroke: 3px #a07010;
  text-shadow:
    0 0 18px rgba(248,208,96,.8),
    0 0 36px rgba(200,144,10,.5),
    3px 3px 0 #a07010,
    5px 5px 10px rgba(0,0,0,.4);
}
/* Balloon string */
.num-bln::after {
  content: '';
  display: block; width: 2px; height: 22px;
  background: rgba(200,150,10,.4);
  margin: 0 auto;
}

/* ── Sparkle quarters ── */
.bq { position: relative; font-size: 11px; font-family: 'Courier New', monospace; font-weight: bold; color: #4a2e00; }
.bq::before { content: '25¢'; }
.bq-spark {
  position: absolute;
  font-size: 9px; color: #fff;
  animation: spark-pop 1.8s ease-in-out infinite;
  pointer-events: none;
}
.bq-spark:first-child { top: -8px; right: -8px; animation-delay: 0s; }
.bq-spark.b { bottom: -8px; left: -6px; animation-delay: 0.9s; font-size: 7px; color: #fffde0; }
@keyframes spark-pop {
  0%,100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.3) rotate(45deg); }
}
/* Spin on fall */
@keyframes coin-fall {
  0%   { top: -55px; opacity: 0;    transform: rotate(0deg) scale(1); }
  8%   { opacity: 0.9; }
  50%  { transform: rotate(360deg) scale(1.05); }
  92%  { opacity: 0.9; }
  100% { top: 110vh;  opacity: 0;   transform: rotate(720deg) scale(1); }
}

/* ── Birthday banner ── */
#birthday-banner {
  position: relative; z-index: 1;
  width: 100%; max-width: 700px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.banner-rope {
  width: 100%; height: 3px;
  background: linear-gradient(to right, transparent 2%, rgba(200,160,60,.5) 10%, rgba(200,160,60,.5) 90%, transparent 98%);
}
.banner-pennants {
  display: flex; justify-content: center; gap: 1px;
  width: 90%;
}
.pnt {
  width: 22px; height: 30px;
  background: var(--pc, #ff69b4);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: pnt-sway 2s ease-in-out infinite alternate;
}
.pnt:nth-child(even) { animation-delay: 0.3s; }
.pnt:nth-child(3n)   { animation-delay: 0.6s; }
@keyframes pnt-sway {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}
.banner-message {
  font-size: clamp(11px, 3.5vw, 18px);
  font-weight: bold; letter-spacing: 4px;
  font-family: 'Courier New', monospace;
  text-align: center;
  padding: 6px 20px;
  background: linear-gradient(90deg,
    #ff69b4, #ffd700, #ff4500, #9b59b6, #3498db, #2ecc71, #ff69b4);
  background-size: 300%;
  animation: rainbow-shift 4s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(255,200,100,.4));
}

/* ── CSS sheep for hub game1 preview ── */
.css-sheep {
  position: absolute;
  left: var(--px); top: var(--py);
  width: 36px; height: 26px;
  transform: rotate(var(--sa, 0deg));
  animation: sheep-bob 2s ease-in-out infinite alternate;
}
.css-sheep:nth-child(2) { animation-delay: 0.5s; }
.css-sheep:nth-child(3) { animation-delay: 1s; }
.css-sheep:nth-child(4) { animation-delay: 0.3s; }
.css-sheep:nth-child(5) { animation-delay: 0.8s; }
@keyframes sheep-bob {
  from { transform: rotate(var(--sa,0deg)) translateY(0); }
  to   { transform: rotate(calc(var(--sa,0deg) + 4deg)) translateY(-3px); }
}
.csh-body {
  position: absolute;
  bottom: 0; left: 0;
  width: 30px; height: 18px;
  background: #f0efe7;
  border-radius: 55% 45% 45% 55%;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.2);
}
.csh-wool {
  position: absolute;
  top: -7px; left: 3px;
  width: 24px; height: 14px;
  background: #e6e5dc;
  border-radius: 50%;
  box-shadow: 8px -3px 0 -2px #e8e7de, -4px -2px 0 -1px #eae9e0;
}
.csh-head {
  position: absolute;
  right: -4px; bottom: 4px;
  width: 14px; height: 13px;
  background: #5c3d28;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* Eye */
.csh-head::after {
  content: '';
  position: absolute; top: 3px; right: 3px;
  width: 3px; height: 3px;
  background: #fff; border-radius: 50%;
}
/* Hat (party hat — tiny triangle) */
.csh-head::before {
  content: '';
  position: absolute; top: -7px; left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 9px solid;
  border-bottom-color: var(--hc, #ff69b4);
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.4));
}
/* Vary hat colours */
.css-sheep:nth-child(1) .csh-head { --hc:#ff69b4; }
.css-sheep:nth-child(2) .csh-head { --hc:#ffd700; }
.css-sheep:nth-child(3) .csh-head { --hc:#9b59b6; }
.css-sheep:nth-child(4) .csh-head { --hc:#3498db; }
.css-sheep:nth-child(5) .csh-head { --hc:#2ecc71; }

/* ── CSS airplane for hub game2 preview ── */
.css-plane {
  position: absolute;
  width: 70px; height: 38px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: plane-drift 3s ease-in-out infinite alternate;
}
.cp-body {
  position: absolute;
  width: 58px; height: 16px;
  background: #f4f6fb;
  border-radius: 50%;
  top: 11px; left: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.cp-stripe {
  position: absolute;
  left: 0; right: 0; top: 5px; height: 5px;
  background: #1565c0;
}
.cp-window {
  position: absolute;
  width: 8px; height: 8px;
  background: #88c8f0;
  border-radius: 50%;
  top: 4px;
  border: 1px solid #b8ddf8;
}
.cp-window.w1 { left: 10px; }
.cp-window.w2 { left: 24px; }
.cp-window.w3 { left: 38px; }
.cp-wing {
  position: absolute;
  width: 26px; height: 20px;
  background: #c8d4e8;
  clip-path: polygon(0 100%, 40% 0, 100% 100%);
  top: 2px; left: 22px;
}
.cp-tail {
  position: absolute;
  width: 14px; height: 16px;
  background: #1565c0;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  top: 0; left: 2px;
}
.cp-nose {
  position: absolute;
  width: 14px; height: 14px;
  background: #1565c0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  top: 12px; right: 0;
}
@keyframes plane-drift {
  from { transform: translate(-50%,-50%) translateY(0) rotate(-2deg); }
  to   { transform: translate(-50%,-50%) translateY(-10px) rotate(2deg); }
}

/* ══════════════════════════════════════════════════
   STANDALONE CLAW MACHINE — carnival chrome style
   Completely different from arcade game shells.
   Bright chrome/silver body, rounded corners,
   glass viewing area, LED lighting.
══════════════════════════════════════════════════ */
.claw-standalone {
  width: 175px; flex-shrink: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  background: linear-gradient(175deg, #e0e4ec 0%, #c8ccd6 40%, #d0d4dc 100%);
  border: 3px solid #a8acb4;
  border-radius: 12px 12px 6px 6px;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.6),
    inset -2px -2px 4px rgba(0,0,0,.2),
    6px 8px 0 #888890,
    12px 16px 0 rgba(0,0,0,.25),
    0 0 30px rgba(0,0,0,.5);
  overflow: hidden;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.7));
}

/* LED header */
.cs-header {
  padding: 8px 6px 6px;
  background: linear-gradient(to bottom, #1a1a28, #0e0e1c);
  border-bottom: 2px solid #303040;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cs-leds { display: flex; gap: 5px; }
.cs-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lc, #ff4444);
  box-shadow: 0 0 6px var(--lc, #ff4444);
  animation: led-blink 0.9s ease-in-out infinite alternate;
}
.cs-led:nth-child(2) { animation-delay:.15s }
.cs-led:nth-child(3) { animation-delay:.3s }
.cs-led:nth-child(4) { animation-delay:.45s }
.cs-led:nth-child(5) { animation-delay:.6s }
.cs-led:nth-child(6) { animation-delay:.75s }
@keyframes led-blink { from{opacity:.3} to{opacity:1} }
.cs-title {
  font-family:'Courier New',monospace; font-size:13px; font-weight:bold;
  letter-spacing:3px; color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.8);
}
.cs-subtitle { font-family:'Courier New',monospace; font-size:7px; letter-spacing:2px; color:#aaa; }

/* Glass viewing area */
.cs-glass {
  flex:1; min-height:180px;
  margin:6px;
  background:
    linear-gradient(135deg, rgba(180,220,255,.12) 0%, transparent 50%),
    linear-gradient(to bottom, #c8d8f0 0%, #a0b8e0 100%);
  border:2px solid rgba(160,200,240,.5);
  border-radius:4px; position:relative; overflow:hidden;
  box-shadow:
    inset 0 0 20px rgba(100,160,220,.15),
    inset 2px 2px 6px rgba(255,255,255,.3);
}
.cs-glass-shine {
  position:absolute; top:0; left:10%; width:6px; bottom:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent,rgba(255,255,255,.1));
  pointer-events:none;
}

/* Claw rail + mechanism */
.cs-rail {
  position:absolute; top:0; left:0; right:0; height:22px;
  background:linear-gradient(to bottom,#2a2a3a,#1a1a28);
  border-bottom:1px solid #404050;
  display:flex; align-items:center; justify-content:center;
}
.cs-claw { display:flex; flex-direction:column; align-items:center; animation:cs-swing 3.5s ease-in-out infinite; }
@keyframes cs-swing { 0%,100%{transform:translateX(-20px)} 50%{transform:translateX(20px)} }
.cs-cable { width:2px; height:28px; background:linear-gradient(to bottom,#888,#444); }
.cs-grip  { display:flex; gap:2px; }
.cs-finger {
  width:6px; height:14px;
  background:linear-gradient(to right,#888,#bbb,#888);
  border-radius:0 0 4px 4px;
  transform-origin:top center;
}
.cs-finger.fl { transform:rotate(-28deg); }
.cs-finger.fr { transform:rotate(28deg); }
.cs-finger.fc { height:18px; }

/* CSS Stuffed animals */
.cs-toys { position:absolute; inset:0; top:22px; }

/* Bear — body + head + ears via box-shadow */
.cs-bear {
  position:absolute;
  width:28px; height:32px;
}
.cs-bear::before { /* body */
  content:'';
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:22px; height:17px;
  background:var(--bc,#c08060);
  border-radius:50% 50% 40% 40%;
  box-shadow:inset 0 4px 8px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.15);
}
.cs-bear::after { /* head + ears via box-shadow */
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:18px; height:18px;
  background:var(--bc,#c08060);
  border-radius:50%;
  box-shadow:
    -7px -3px 0 3px var(--bc,#c08060),   /* left ear */
     7px -3px 0 3px var(--bc,#c08060),   /* right ear */
    inset 0 3px 6px rgba(255,255,255,.3),
    inset 0 -2px 4px rgba(0,0,0,.15);
}

/* Bunny — tall ears */
.cs-bunny {
  position:absolute;
  width:22px; height:36px;
}
.cs-bunny::before { /* body */
  content:'';
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:18px; height:14px;
  background:#e0d8f0;
  border-radius:50%;
  box-shadow:inset 0 3px 6px rgba(255,255,255,.4);
}
.cs-bunny::after { /* head + long ears */
  content:'';
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:14px; height:14px;
  background:#e0d8f0;
  border-radius:50%;
  box-shadow:
    -4px -16px 0 2px #e0d8f0,  /* left ear */
     4px -16px 0 2px #e0d8f0,  /* right ear */
    inset 0 2px 4px rgba(255,255,255,.35);
}

/* Star plush */
.cs-star-plush {
  position:absolute;
  width:28px; height:28px;
  background:#f8d060;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  box-shadow:2px 2px 6px rgba(0,0,0,.3);
}

/* Heart plush */
.cs-heart-plush {
  position:absolute;
  width:26px; height:24px;
  background:#ff6b9d;
  clip-path:polygon(50% 100%,5% 40%,15% 10%,30% 5%,50% 20%,70% 5%,85% 10%,95% 40%);
  box-shadow:2px 2px 6px rgba(0,0,0,.3);
}

/* Controls */
.cs-controls {
  padding:6px 8px;
  background:linear-gradient(to bottom,#b0b4bc,#9a9ea8);
  border-top:2px solid #888890;
  display:flex; align-items:center; gap:6px;
}
.cs-joy { position:relative; width:36px; height:36px; flex-shrink:0; }
.cs-joy-base {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:36px; height:12px;
  background:radial-gradient(ellipse at 50% 30%,#555,#222);
  border-radius:50%; border:2px solid #111;
}
.cs-joy-shaft {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  width:6px; height:14px;
  background:linear-gradient(to right,#666,#aaa,#666);
  border-radius:2px;
}
.cs-joy-top {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff4444,#990000);
  box-shadow:0 2px 5px rgba(0,0,0,.6),0 0 8px rgba(255,50,50,.4);
}
.cs-btn-area { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.cs-grab-btn {
  width:100%; padding:7px 0;
  background:linear-gradient(to bottom,#ffdd00,#cc9900);
  color:#3a2000; font-family:inherit; font-size:10px; font-weight:bold;
  letter-spacing:2px; border:none; border-radius:4px; cursor:pointer;
  box-shadow:0 3px 0 #886600, inset 0 1px 0 rgba(255,255,255,.4);
  animation:grab-btn-glow 1.5s ease-in-out infinite alternate;
}
@keyframes grab-btn-glow {
  from{background:linear-gradient(to bottom,#ffdd00,#cc9900); box-shadow:0 3px 0 #886600;}
  to  {background:linear-gradient(to bottom,#ffe955,#ddaa00); box-shadow:0 3px 0 #886600,0 0 10px rgba(255,220,0,.4);}
}
.cs-price-lbl { font-size:8px; letter-spacing:2px; color:#555; font-family:'Courier New',monospace; }
.cs-indicator-lights { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.cs-il {
  width:9px; height:9px; border-radius:50%;
  background:var(--ic,#ff3333);
  box-shadow:0 0 5px var(--ic,#ff3333);
  animation:led-blink 1.1s ease-in-out infinite alternate;
}
.cs-il:nth-child(2) { animation-delay:.55s; }

/* Coin slot */
.cs-coinslot {
  padding:4px 8px 6px;
  background:linear-gradient(to bottom,#888,#666);
  border-top:2px solid #707078;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.cs-slot-hole {
  width:38px; height:6px; border-radius:4px;
  background:#1a1a1a; border:1px solid #333;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9);
}
.cs-slot-txt { font-size:6px; letter-spacing:2px; color:#aaa; font-family:'Courier New',monospace; }

/* ══════════════════════════════════════════════════
   STANDALONE PINBALL MACHINE — classic arcade style
   Different from both the game shells AND the claw.
   Upright cabinet with backglass + angled playfield.
══════════════════════════════════════════════════ */
.pb-standalone {
  width: 195px; flex-shrink: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.7));
  position: relative;
}

/* Backglass (top artwork panel) */
.pbs-backglass {
  width: 100%;
  background: linear-gradient(175deg, #0a0420 0%, #1a0838 50%, #0e0628 100%);
  border: 2px solid #3a1880;
  border-radius: 4px 4px 0 0;
  padding: 8px 6px;
  box-shadow: inset 0 0 20px rgba(80,0,160,.3), 0 0 16px rgba(120,0,255,.2);
  overflow: hidden;
}
.pbs-bg-art { position:relative; height:90px; }
.pbs-bg-title {
  text-align:center;
  font-family:'Courier New',monospace; font-weight:bold;
  font-size:18px; letter-spacing:4px;
  color:#fff;
  text-shadow:0 0 10px #c040ff,0 0 20px rgba(180,60,255,.6),0 0 40px rgba(120,0,200,.4);
  margin-bottom:2px;
}
.pbs-bg-sub { text-align:center; font-size:7px; letter-spacing:3px; color:#8060c0; font-family:'Courier New',monospace; }
/* Decorative stars in backglass */
.pbs-star {
  position:absolute; border-radius:50%;
  background:#fff;
  animation:star-twinkle 2s ease-in-out infinite alternate;
}
.pbs-star.a { width:3px;height:3px; top:15px;left:15%; animation-delay:0s; }
.pbs-star.b { width:4px;height:4px; top:8px; left:70%; animation-delay:.7s; }
.pbs-star.c { width:2px;height:2px; top:30px;left:45%; animation-delay:1.3s; }
/* Planet */
.pbs-planet {
  position:absolute; top:20px; right:12%;
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#6040c0,#2a1060);
  box-shadow:0 0 12px rgba(100,60,200,.4);
}
.pbs-planet::after { /* ring */
  content:''; position:absolute;
  top:50%;left:-6px; right:-6px; height:4px;
  transform:translateY(-50%) rotateX(70deg);
  border-radius:50%;
  border:2px solid rgba(180,140,255,.5);
}
.pbs-score-panel {
  text-align:center; padding:4px 0;
  border-top:1px solid #2a1060;
}
.pbs-score-lbl { font-size:6px; letter-spacing:3px; color:#4a2880; font-family:'Courier New',monospace; }
.pbs-score-num {
  font-size:16px; font-weight:bold; letter-spacing:3px;
  color:#cc44ff; font-family:'Courier New',monospace;
  text-shadow:0 0 8px #aa00ff;
  animation:score-flicker 4s ease-in-out infinite;
}

/* Cabinet body */
.pbs-body {
  width:100%;
  background:linear-gradient(175deg,#1e1830,#14102a,#0e0c20);
  border:2px solid #2a2050;
  border-top:none;
}

/* Playfield */
.pbs-playfield {
  margin:6px;
  background:linear-gradient(165deg,#050218,#0a0430,#060220);
  border:2px solid #1a0848;
  border-radius:3px;
  height:188px; position:relative; overflow:hidden;
  box-shadow:inset 0 0 16px rgba(80,0,180,.2);
}
/* Grid overlay */
.pbs-pf-inner {
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 14px,rgba(60,0,120,.08) 14px,rgba(60,0,120,.08) 15px),
             repeating-linear-gradient(90deg,transparent 0,transparent 14px,rgba(60,0,120,.08) 14px,rgba(60,0,120,.08) 15px);
}
.pbs-bumper {
  position:absolute; width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle,#e020c0,#700060);
  border:2px solid #ff60e0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:bold; color:#fff;
  box-shadow:0 0 12px #e020c0,0 0 24px rgba(220,0,180,.4);
  animation:bumper-pulse 1.6s ease-in-out infinite alternate;
  transform:translate(-50%,-50%);
}
.pbs-bmp-ring {
  position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(255,100,240,.5);
  animation:ring-expand .8s ease-out infinite;
}
@keyframes ring-expand {
  from{transform:scale(1);opacity:.8}
  to  {transform:scale(1.4);opacity:0}
}
.pbs-center { background:radial-gradient(circle,#ffd700,#886600); border-color:#ffe055; box-shadow:0 0 12px #ffd700; }
.pbs-ramp {
  position:absolute; bottom:22%; width:12%; height:45%;
  border:2px solid rgba(100,0,200,.6); border-bottom:none;
}
.pbs-ramp.l { left:6%; border-left:2.5px solid #6600cc; border-right:none; border-radius:4px 0 0 0; }
.pbs-ramp.r { right:6%; border-right:2.5px solid #6600cc; border-left:none; border-radius:0 4px 0 0; }
.pbs-sling {
  position:absolute; bottom:30%; width:18px; height:22px;
  border:2px solid rgba(200,100,255,.5);
}
.pbs-sling.l { left:14%; border-radius:0 0 4px 4px; transform:skewX(12deg); }
.pbs-sling.r { right:14%; border-radius:0 0 4px 4px; transform:skewX(-12deg); }
.pbs-targets {
  position:absolute; bottom:44%; left:50%; transform:translateX(-50%);
  display:flex; gap:3px;
}
.pbs-t {
  width:14px; height:12px; border-radius:2px;
  background:#001a40; border:1.5px solid #0066ff;
  display:flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:bold; color:#4499ff;
  box-shadow:0 0 4px #0066ff;
  animation:target-glow 1.8s ease-in-out infinite alternate;
}
.pbs-ball {
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eee,#888);
  box-shadow:0 0 8px rgba(255,255,255,.5);
  animation:ball-move 5s ease-in-out infinite;
}
.pbs-flipper {
  position:absolute; bottom:6%; height:7px; width:32%;
  background:linear-gradient(to bottom,#666,#333);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.8);
}
.pbs-flipper.pbs-fl { left:8%; transform-origin:left; transform:rotate(-22deg); }
.pbs-flipper.pbs-fr { right:8%; transform-origin:right; transform:rotate(22deg); }

/* Control ledge */
.pbs-ledge {
  padding:5px 8px;
  background:linear-gradient(to bottom,#181030,#100c24);
  border-top:2px solid #241860;
  display:flex; align-items:center; justify-content:space-between;
}
.pbs-coin-row { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pbs-coin-slot {
  width:34px; height:5px; border-radius:3px;
  background:#060010; border:1px solid #180840;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9);
}
.pbs-coin-lbl { font-size:6px; letter-spacing:1.5px; color:#281840; font-family:'Courier New',monospace; }
.pbs-plunger-housing { display:flex; flex-direction:column; align-items:center; }
.pbs-plunger-rod {
  width:10px; height:22px;
  background:linear-gradient(to right,#666,#aaa,#666);
  border-radius:2px; border:1px solid #333;
}
.pbs-plunger-knob {
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aa4444,#441010);
  border:1.5px solid #662222;
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}

/* Legs */
.pbs-leg {
  position:absolute; bottom:-14px;
  width:10px; height:16px;
  background:linear-gradient(to right,#2a2040,#3a3060);
  border:1px solid #1a1030;
  border-radius:0 0 3px 3px;
}
.pbs-leg.l { left:14px; }
.pbs-leg.r { right:14px; }

/* ════════════════════════════════════════════════════
   FONT ASSIGNMENTS
   Press Start 2P — big arcade titles, score displays
   Bungee          — buttons, marquee labels, signs
   Orbitron        — UI numbers, body, descriptions
════════════════════════════════════════════════════ */
body { font-family: 'Orbitron', sans-serif; }

/* Main neon arcade sign */
#neon-text { font-family: 'Press Start 2P', monospace; font-size: clamp(10px, 3vw, 18px); letter-spacing: 2px; }
#neon-sub  { font-family: 'Orbitron', sans-serif; }

/* Birthday tags */
#bday-tag      { font-family: 'Bungee', sans-serif; letter-spacing: 3px; }
.banner-message { font-family: 'Bungee', sans-serif; }
.hang-sign      { font-family: 'Bungee', sans-serif; }
.num-bln        { font-family: 'Bungee', sans-serif; }

/* Hub cabinet text */
.hc-mq-txt  { font-family: 'Bungee', sans-serif; font-size: 9px; letter-spacing: 1.5px; }
.hc-mq-sub  { font-family: 'Orbitron', sans-serif; }
.hc-play-btn { font-family: 'Bungee', sans-serif; letter-spacing: 1.5px; }
.hc-brand   { font-family: 'Orbitron', sans-serif; }
.hc-coin-lbl { font-family: 'Orbitron', sans-serif; }
.mc-desc    { font-family: 'Orbitron', sans-serif; }
.lock-badge { font-family: 'Orbitron', sans-serif; }
.lock-txt   { font-family: 'Orbitron', sans-serif; }

/* Floor text */
#floor-text { font-family: 'Orbitron', sans-serif; }

/* Claw machine */
.cs-title    { font-family: 'Bungee', sans-serif; font-size: 15px; letter-spacing: 3px; }
.cs-subtitle { font-family: 'Orbitron', sans-serif; }
.cs-grab-btn { font-family: 'Bungee', sans-serif; }
.cs-slot-txt { font-family: 'Orbitron', sans-serif; }

/* Pinball machine */
.pbs-bg-title  { font-family: 'Press Start 2P', monospace; font-size: 16px; }
.pbs-bg-sub    { font-family: 'Orbitron', sans-serif; }
.pbs-score-num { font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: 2px; }
.pbs-score-lbl { font-family: 'Orbitron', sans-serif; }
.pbs-coin-lbl  { font-family: 'Orbitron', sans-serif; }

/* ════════════════════════════════════════════════════
   PAZZAZ — confetti, floating 25s, bigger quarters,
            proper teddy bears
════════════════════════════════════════════════════ */

/* ── Confetti ── */
#confetti { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.conf {
  position: absolute;
  bottom: -20px;
  left: var(--cx);
  width: var(--cw, 8px);
  height: var(--ch, 12px);
  background: var(--cc, #ff69b4);
  border-radius: 2px;
  opacity: 0;
  animation: conf-fall var(--cs, 7s) var(--cd, 0s) linear infinite;
}
@keyframes conf-fall {
  0%   { bottom: -20px; opacity:0; transform: rotate(var(--cr,30deg)) translateX(0); }
  6%   { opacity: .9; }
  94%  { opacity: .9; }
  100% { bottom: 110dvh; opacity:0; transform: rotate(calc(var(--cr,30deg) + 540deg)) translateX(24px); }
}

/* ── Floating "25" watermarks ── */
#floating-25s { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.f25 {
  position: absolute;
  left: var(--fx);
  top:  var(--fy);
  font-size: var(--fs, 60px);
  font-family: 'Bungee', sans-serif;
  font-weight: 900;
  color: #f8d060;
  opacity: var(--fo, 0.05);
  animation: f25-drift var(--ft, 9s) var(--fd, 0s) ease-in-out infinite alternate;
  -webkit-text-stroke: 1px rgba(200,144,10,.3);
}
.star25 { color: #fff; }
@keyframes f25-drift {
  from { transform: translateY(0) rotate(-4deg); opacity: var(--fo, .05); }
  to   { transform: translateY(-18px) rotate(4deg); opacity: calc(var(--fo, .05) * 1.8); }
}

/* ── Upgraded quarters ── */
.bq {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #fff8c0 0%, #f8d860 20%, #c89010 55%, #8a5800 80%, #f8d060 100%);
  border: 2.5px solid #c0900a;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 10px rgba(248,208,60,.7),
    0 0 22px rgba(200,140,10,.4),
    inset 0 2px 4px rgba(255,240,120,.5),
    inset 0 -2px 4px rgba(80,40,0,.3);
  flex-shrink: 0;
}
.bq::before { content: '25¢'; font-family: 'Press Start 2P', monospace; font-size: 7px; font-weight: bold; color: #4a2e00; }
/* Large slow-drifting quarters */
.bq-lg { width: 56px; height: 56px; }
.bq-lg::before { font-size: 9px; }

/* 4-point sparkles — different positions */
.bq-spark {
  position: absolute;
  font-family: serif;
  color: #fffde0;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 8px #f8d060;
  animation: spark-pop 1.6s ease-in-out infinite;
}
.bq-spark.tl { top: -10px; left: -8px;  font-size: 11px; animation-delay: 0s; }
.bq-spark.tr { top: -10px; right: -8px; font-size: 9px;  animation-delay: 0.4s; }
.bq-spark.bl { bottom: -10px; left: -6px;  font-size: 8px;  animation-delay: 0.8s; }
.bq-spark.br { bottom: -10px; right: -6px; font-size: 12px; animation-delay: 1.2s; }
/* Backwards-compat for old .b class */
.bq-spark.b { bottom: -8px; left: -6px; font-size: 8px; animation-delay: 0.9s; }

/* Quarter fall now includes a wobble-spin */
@keyframes coin-fall {
  0%   { top:-65px; opacity:0; transform:rotate(0deg) scale(1); }
  6%   { opacity:.95; }
  50%  { transform:rotate(360deg) scale(1.08); }
  94%  { opacity:.95; }
  100% { top:110vh; opacity:0; transform:rotate(740deg) scale(1); }
}

/* ── Proper CSS Teddy Bears ── */
.cs-teddy {
  position: absolute;
  width: 34px; height: 42px;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,.35));
  animation: teddy-sway 3s ease-in-out infinite alternate;
}
.cs-teddy:nth-child(2n) { animation-delay: .8s; }
.cs-teddy:nth-child(3n) { animation-delay: 1.6s; }
@keyframes teddy-sway {
  from { transform: rotate(-4deg) scale(1); }
  to   { transform: rotate(4deg)  scale(1.04); }
}

/* Ears */
.ct-ear {
  position: absolute;
  width: 13px; height: 13px;
  background: var(--tc, #c08060);
  border-radius: 50%;
  top: 2px; z-index: 3;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.35), inset 0 -1px 3px rgba(0,0,0,.2);
}
.ct-ear::after { /* inner ear — slightly lighter */
  content: '';
  position: absolute; inset: 3px;
  background: rgba(255,220,210,.35);
  border-radius: 50%;
}
.ct-el { left: 0; }
.ct-er { right: 0; }

/* Head */
.ct-head {
  position: absolute;
  width: 24px; height: 24px;
  background: var(--tc, #c08060);
  border-radius: 50%;
  top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.3),
    inset 0 -2px 4px rgba(0,0,0,.15),
    0 1px 3px rgba(0,0,0,.25);
}

/* Rosy cheek blush — on the head using ::before */
.ct-head::before {
  content: '';
  position: absolute;
  width: 7px; height: 5px;
  background: rgba(255,130,130,.28);
  border-radius: 50%;
  bottom: 6px; left: 1px;
  /* Mirror right cheek with box-shadow */
  box-shadow: 14px 0 0 rgba(255,130,130,.28);
}

/* Eyes — round button eyes, warm dark brown */
.ct-eye {
  position: absolute;
  width: 5px; height: 5px;
  background: #1a0c04;
  border-radius: 50%;
  top: 7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
/* Small shine dot — makes them look glossy like buttons */
.ct-eye::after {
  content: '';
  position: absolute; top: 1px; right: 1px;
  width: 2px; height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
}
.ct-eyl { left: 4px; }
.ct-eyr { right: 4px; }

/* Nose — just a small round stitched dot, NO smile */
.ct-nose {
  position: absolute;
  width: 5px; height: 5px;
  background: #3a1a08;
  border-radius: 50%;
  bottom: 7px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Body */
.ct-body {
  position: absolute;
  width: 28px; height: 24px;
  background: var(--tc, #c08060);
  border-radius: 50% 50% 45% 45%;
  bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 2;
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.25),
    inset 0 -3px 5px rgba(0,0,0,.2);
}

/* Belly spot */
.ct-belly {
  position: absolute;
  width: 14px; height: 12px;
  background: rgba(255,255,255,.22);
  border-radius: 50%;
  top: 5px; left: 50%; transform: translateX(-50%);
}

/* ── Two-row arcade floor layout ──────────────────────────────
   Row 1: the 5 playable game cabinets
   Row 2: claw machine + pinball machine
───────────────────────────────────────────────────────────── */
#arcade-floor {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  padding: 20px 12px 12px !important;
}

#cab-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px 22px !important;
  justify-content: center !important;
  align-items: flex-end !important;
  width: 100% !important;
  max-width: none !important;
  padding-bottom: 0 !important;
}

/* Row 1 — game cabinets */
.hub-cab         { order: 1; }

/* Full-width invisible divider that forces the row break */
.row-break {
  order: 2;
  flex-basis: 100%;
  height: 20px;
  pointer-events: none;
}

/* Row 2 — decorative machines */
.claw-standalone { order: 3; }
.pb-standalone   { order: 3; }

/* ═══════════════════════════════════════════════════════════════
   PINBALL MACHINE — detailed rebuild
   All new pbs2- / pbs- overrides below win over earlier rules
═══════════════════════════════════════════════════════════════ */

/* Backglass overrides */
.pbs-backglass {
  width:100%;
  background:linear-gradient(175deg,#0a0320 0%,#180640 50%,#0c0428 100%);
  border:2px solid #3a1880; border-radius:4px 4px 0 0; overflow:hidden;
  box-shadow:inset 0 0 20px rgba(80,0,160,.3), 0 0 16px rgba(120,0,255,.2);
}
.pbs-bg-art { position:relative; height:100px; }

/* Scattered stars in backglass */
.pbs-sfstar {
  position:absolute; background:#fff; border-radius:50%;
  animation:star-twinkle 2s ease-in-out infinite alternate;
}

/* Saturn */
.pbs-saturn {
  position:absolute; width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#a090d8,#4a2880,#280a50);
  top:8px; right:8%; box-shadow:0 0 14px rgba(120,60,200,.4);
  overflow:visible;
}
.pbs-saturn-ring {
  position:absolute; width:60px; height:14px;
  border:3px solid rgba(200,160,255,.45); border-radius:50%;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotateX(72deg);
}

/* Comet */
.pbs-comet {
  position:absolute; width:46px; height:2px;
  background:linear-gradient(to right,transparent,rgba(200,180,255,.7),#fff);
  top:42%; left:4%; transform:rotate(-22deg);
}
.pbs-comet::after {
  content:''; position:absolute; right:-1px; top:-3px;
  width:8px; height:8px;
  background:radial-gradient(circle,#fff,rgba(220,200,255,.6));
  border-radius:50%;
}

/* Score panel */
.pbs-score-panel {
  padding:5px 7px 3px; border-top:1.5px solid #2a1060;
  background:#04020c;
}
.pbs-scores-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:3px;
}
.pbs-player-score { text-align:center; }
.pbs-sc-lbl  { font-size:5px; letter-spacing:2px; color:#3a1870; font-family:'Orbitron',sans-serif; }
.pbs-sc-num  { font-size:11px; letter-spacing:2px; color:#cc44ff; font-family:'Press Start 2P',monospace;
               text-shadow:0 0 8px #aa00ff; animation:score-flicker 4s ease-in-out infinite; }
.pbs-sc-num.hi { color:#ff8800; text-shadow:0 0 8px #cc6600; }
.pbs-ball-display { text-align:center; }
.pbs-ball-pips { display:flex; gap:3px; justify-content:center; margin-top:2px; }
.pbs-pip { width:7px; height:7px; border-radius:50%; background:#0e0428; border:1px solid #2a1060; }
.pbs-pip.active { background:radial-gradient(circle at 35% 30%,#eee,#999); box-shadow:0 0 5px rgba(255,255,255,.5); border-color:#888; }
.pbs-status-strip {
  text-align:center; font-size:5.5px; letter-spacing:2px; color:#9933cc;
  font-family:'Press Start 2P',monospace;
  animation:score-flicker 2.5s ease-in-out infinite;
}

/* Cabinet body — flex column */
.pbs-body {
  width:100%; display:flex; flex-direction:column;
  background:linear-gradient(175deg,#1e1830,#14102a,#0e0c20);
  border:2px solid #2a2050; border-top:none;
}

/* Main area — playfield + plunger lane side by side */
.pbs-main-area { display:flex; flex-direction:row; flex:1; }

/* Playfield */
.pbs-playfield {
  flex:1;
  background:linear-gradient(165deg,#040212,#08032a,#050118);
  border-right:1px solid #1a0848; position:relative;
  box-shadow:inset 0 0 18px rgba(80,0,180,.18);
  min-height:210px;
}
.pbs-pf-inner {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0,transparent 15px,rgba(60,0,120,.07) 15px,rgba(60,0,120,.07) 16px),
    repeating-linear-gradient(90deg,transparent 0,transparent 15px,rgba(60,0,120,.07) 15px,rgba(60,0,120,.07) 16px);
}

/* ── Rollover lanes ── */
.pbs-rollover-row {
  position:absolute; top:3%; left:50%; transform:translateX(-50%);
  display:flex; gap:3px; z-index:4;
}
.pbs-rl {
  width:11px; height:18px;
  background:#010010; border:1.5px solid #1a0060; border-radius:2px;
  font-size:5.5px; color:#2a0090; font-family:'Orbitron',sans-serif;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
}
.pbs-rl.lit {
  background:#080040; border-color:#4466ff; color:#88aaff;
  box-shadow:0 0 8px rgba(80,120,255,.7), inset 0 0 4px rgba(80,120,255,.3);
}

/* ── 5-bumper cluster ── */
.pbs-bumper-zone {
  position:absolute; top:14%; left:8%; right:8%; height:80px;
}
.pbs-bmp {
  position:absolute;
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle,#e020c0,#700050);
  border:2px solid #ff60e0;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:bold; color:#fff;
  box-shadow:0 0 10px #e020c0, 0 0 20px rgba(220,0,180,.4);
  animation:bumper-pulse 1.5s ease-in-out infinite alternate;
  transform:translate(-50%,-50%); z-index:3;
}
.pbs-bmp.gold { background:radial-gradient(circle,#ffe050,#aa6600); border-color:#ffe055; box-shadow:0 0 12px #ffd700; }
.pbs-bmp-halo {
  position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid rgba(255,100,240,.4);
  animation:ring-expand .85s ease-out infinite;
}
.pbs-bmp.gold .pbs-bmp-halo { border-color:rgba(255,220,50,.4); }
/* Positions */
.pbs-bmp.b1 { top:5%;  left:22%; }
.pbs-bmp.b2 { top:5%;  left:78%; }
.pbs-bmp.b3 { top:50%; left:50%; }
.pbs-bmp.b4 { top:95%; left:22%; }
.pbs-bmp.b5 { top:95%; left:78%; }

/* ── Ramp guides ── */
.pbs-ramp-guide {
  position:absolute; top:8%; bottom:24%; width:14%;
  border:2px solid rgba(100,0,200,.5); border-bottom:none;
}
.pbs-ramp-guide.rl { left:2%; border-right:none; border-radius:8px 0 0 0; }
.pbs-ramp-guide.rr { right:2%; border-left:none; border-radius:0 8px 0 0; }

/* ── Target bank ── */
.pbs-target-bank {
  position:absolute; top:53%; left:50%; transform:translateX(-50%);
  display:flex; gap:3px; z-index:3;
}
.pbs-tgt {
  width:13px; height:11px; border-radius:2px;
  background:#010018; border:1.5px solid #1a0060;
  display:flex; align-items:center; justify-content:center;
  font-size:6.5px; font-weight:bold; color:#2233aa;
  font-family:'Orbitron',sans-serif;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.pbs-tgt.lit {
  background:#06004a; border-color:#4466ff; color:#66aaff;
  box-shadow:0 0 6px rgba(80,120,255,.6);
  animation:target-glow 1.8s ease-in-out infinite alternate;
}

/* ── Slingshot kickers ── */
.pbs-kicker {
  position:absolute; bottom:24%; width:22px; height:28px;
  background:rgba(140,40,255,.35);
  border:2px solid rgba(160,60,255,.6);
  clip-path:polygon(10% 100%, 50% 0%, 90% 100%);
}
.pbs-kicker.kl { left:9%; }
.pbs-kicker.kr { right:9%; }

/* ── Inlane / outlane dividers ── */
.pbs-inlane {
  position:absolute; bottom:7%; top:24%; width:2px;
  background:rgba(100,0,200,.45);
}
.pbs-inlane.il { left:14%; }
.pbs-inlane.ir { right:14%; }

/* ── Ball ── */
.pbs-ball2 {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#f0f0f0,#888);
  box-shadow:0 0 7px rgba(255,255,255,.55), 0 2px 4px rgba(0,0,0,.8);
  animation:ball-move 4.5s ease-in-out infinite;
  z-index:4;
}

/* ── Flippers (improved — tapered) ── */
.pbs-flip2 {
  position:absolute; bottom:7%; height:8px;
  width:34%;
  background:linear-gradient(to bottom,#777,#333);
  box-shadow:0 2px 5px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15);
  z-index:4;
}
.pbs-flip2.fl2 {
  left:9%;
  border-radius:6px 3px 3px 6px;
  clip-path:polygon(0 15%,100% 0%,100% 100%,0 85%);
  transform-origin:5px 50%; transform:rotate(-22deg);
}
.pbs-flip2.fr2 {
  right:9%;
  border-radius:3px 6px 6px 3px;
  clip-path:polygon(0 0%,100% 15%,100% 85%,0 100%);
  transform-origin:calc(100% - 5px) 50%; transform:rotate(22deg);
}

/* ── Drain slot ── */
.pbs-drain-slot {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:22%; height:5px;
  background:#010010; border:1px solid #1a0040;
  border-bottom:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.9);
}
.pbs-tilt-lbl {
  position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  font-size:5px; letter-spacing:3px; color:#160840;
  font-family:'Press Start 2P',monospace;
}

/* ── Plunger lane ── */
.pbs-plunger-lane {
  width:18px; flex-shrink:0;
  background:#030012; border-left:1px solid #180840;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; padding-bottom:8px; gap:4px;
  position:relative;
}
.pbs-pl-channel {
  flex:1; width:8px;
  background:#010008; border:1px solid #1a0050; border-radius:3px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly; padding:6px 0;
  margin-top:6px;
}
.pbs-pl-arrow {
  width:6px; height:4px;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-top:5px solid rgba(100,0,200,.5);
}
.pbs-pl-spring {
  width:8px; height:14px;
  background:repeating-linear-gradient(to bottom,#2a1060 0,#2a1060 1.5px,transparent 1.5px,transparent 4px);
  border:1px solid #1a0840;
}
.pbs-pl-knob {
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aa3322,#440800);
  border:1.5px solid #882200;
  box-shadow:0 2px 4px rgba(0,0,0,.7),0 0 6px rgba(150,30,0,.3);
}

/* ═══════════════════════════════════════════════════════════════
   3-D ARCADE ROOM — perspective floor, walls, corners, depth
═══════════════════════════════════════════════════════════════ */

/* ── Room base body ── */
body {
  background:
    /* Ambient colour bleeding from left wall */
    radial-gradient(ellipse at 0% 60%, rgba(60,0,120,.35) 0%, transparent 40%),
    /* Ambient from right wall */
    radial-gradient(ellipse at 100% 60%, rgba(0,60,120,.25) 0%, transparent 40%),
    /* Back-wall centre glow (neon machines illuminating it) */
    radial-gradient(ellipse at 50% 45%, rgba(30,0,70,.6) 0%, transparent 55%),
    /* Deep base */
    #04010c !important;
}

#room { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

/* ── Ceiling ── */
#room-ceiling {
  position:absolute; top:0; left:0; right:0;
  height:14%;
  background:linear-gradient(to bottom,
    rgba(2,0,8,1) 0%,
    rgba(4,1,12,.92) 50%,
    transparent 100%);
  border-bottom:1px solid rgba(120,60,255,.08);
}

/* Spotlight cones hanging from ceiling */
.spotlight {
  position:absolute; top:0;
  width:80px; height:45dvh;
  background:linear-gradient(to bottom,
    rgba(255,220,160,.06) 0%,
    rgba(255,200,100,.03) 40%,
    transparent 100%);
  clip-path:polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
  mix-blend-mode:screen;
}
.sp1 { left:12%; }
.sp2 { left:35%; background:linear-gradient(to bottom,rgba(180,100,255,.05) 0%,transparent 100%); }
.sp3 { left:58%; }
.sp4 { right:10%; background:linear-gradient(to bottom,rgba(180,100,255,.05) 0%,transparent 100%); }

/* ── Side walls ── */
#room-wall-l {
  position:absolute; top:0; bottom:0; left:0;
  width:clamp(30px, 7vw, 70px);
  background:linear-gradient(to right,
    rgba(3,1,10,.98) 0%,
    rgba(6,2,18,.85) 55%,
    transparent 100%);
  overflow:hidden;
}
#room-wall-r {
  position:absolute; top:0; bottom:0; right:0;
  width:clamp(30px, 7vw, 70px);
  background:linear-gradient(to left,
    rgba(3,1,10,.98) 0%,
    rgba(6,2,18,.85) 55%,
    transparent 100%);
  overflow:hidden;
}
/* Decorative neon stripe on walls */
.wall-stripe {
  position:absolute; top:15%; bottom:10%;
  width:2px; opacity:.4;
  background:linear-gradient(to bottom,
    transparent, rgba(120,60,255,.8) 30%, rgba(120,60,255,.8) 70%, transparent);
}
#room-wall-l .ws1 { right:30%; }
#room-wall-l .ws2 { right:12%; opacity:.2; }
#room-wall-r .ws1 { left:30%; }
#room-wall-r .ws2 { left:12%; opacity:.2; }

/* ── Corner lines where walls meet back wall ── */
#room-corner-l {
  position:absolute; top:0; bottom:0; left:clamp(30px,7vw,70px);
  width:1px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(140,80,255,.25) 20%,
    rgba(140,80,255,.4) 50%,
    rgba(140,80,255,.25) 80%,
    transparent 100%);
}
#room-corner-r {
  position:absolute; top:0; bottom:0; right:clamp(30px,7vw,70px);
  width:1px;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(140,80,255,.25) 20%,
    rgba(140,80,255,.4) 50%,
    rgba(140,80,255,.25) 80%,
    transparent 100%);
}

/* ── Perspective grid floor ──────────────────────────────────
   The grid element is a wide flat rectangle. perspective+rotateX
   tilts it so the top recedes (vanishing point) and the bottom
   stays close — creating the classic arcade floor in depth.
─────────────────────────────────────────────────────────── */
#room-floor {
  position:absolute; bottom:0;
  width:320%; left:-110%;       /* extra-wide to fill after foreshortening */
  height:46%;
  transform-origin:top center;
  transform:perspective(380px) rotateX(60deg);
  overflow:hidden;
}
#room-floor::before {         /* grid lines */
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,
      rgba(130,0,255,.13) 0px, rgba(130,0,255,.13) 1px,
      transparent 1px, transparent 65px),
    repeating-linear-gradient(90deg,
      rgba(130,0,255,.13) 0px, rgba(130,0,255,.13) 1px,
      transparent 1px, transparent 65px),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(80,0,180,.28) 55%,
      rgba(120,0,255,.42) 100%);
}
#room-floor::after {          /* horizon fade — hides the far edge cleanly */
  content:''; position:absolute;
  top:0; left:0; right:0; height:40%;
  background:linear-gradient(to bottom, #04010c, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   MACHINE DEPTH — visible right-side face + strong floor shadow
═══════════════════════════════════════════════════════════════ */

/* Shared depth treatment for all machines in the strip */
.hub-cab,
.claw-standalone,
.pb-standalone {
  position:relative;
}

/* Right-side face: a dark strip offset to the right and down,
   simulating the visible right panel of a physical cabinet     */
.hub-cab::after,
.claw-standalone::after,
.pb-standalone::after {
  content:''; position:absolute; z-index:-1;
  right:-7px; top:5px; bottom:-5px; width:7px;
  background:linear-gradient(to right,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.92) 100%);
  border-radius:0 0 3px 0;
}

/* Bottom face (floor contact shadow) */
.hub-cab::before,
.claw-standalone::before,
.pb-standalone::before {
  content:''; position:absolute; z-index:-2;
  bottom:-5px; left:3px; right:-6px; height:5px;
  background:rgba(0,0,0,.7);
  border-radius:0 0 3px 3px;
}

/* Override existing drop-shadows to add horizontal offset
   (light source = upper-left, shadow falls lower-right) */
.hub-cab {
  filter:
    drop-shadow(5px 12px 8px rgba(0,0,0,.85))
    drop-shadow(1px 2px 3px rgba(0,0,0,.6)) !important;
}
.hub-cab.playable:hover {
  transform:scale(1.04) translateY(-8px) !important;
  filter:
    drop-shadow(6px 18px 14px rgba(0,0,0,.9))
    drop-shadow(0 0 28px rgba(100,50,255,.4)) !important;
}
.claw-standalone {
  filter:
    drop-shadow(5px 12px 8px rgba(0,0,0,.85))
    drop-shadow(1px 2px 3px rgba(0,0,0,.6)) !important;
}
.pb-standalone {
  filter:
    drop-shadow(5px 12px 8px rgba(0,0,0,.85))
    drop-shadow(1px 2px 3px rgba(0,0,0,.6)) !important;
}

/* Floor glow / light pool under each machine */
.hub-cab,
.claw-standalone,
.pb-standalone {
  --glow: rgba(80,40,200,.25);
}
.hub-cab::after,
.claw-standalone::after,
.pb-standalone::after {
  box-shadow:0 8px 24px var(--glow);
}

/* Each game cab has its own glow colour matching its theme */
.cab-sheep  { --glow: rgba(40,140,40,.20); }
.cab-fly    { --glow: rgba(20,100,200,.22); }
.cab-g3.playable { --glow: rgba(160,60,20,.22); }
.cab-g4.playable { --glow: rgba(180,140,20,.18); }
.claw-standalone { --glow: rgba(80,180,255,.18); }
.pb-standalone   { --glow: rgba(140,40,255,.22); }

/* ═══════════════════════════════════════════════════════════════
   BACKGROUND ARCADE MACHINE ROWS — depth / recession
   Uses absolute positioning inside a fixed container.
   No flexbox column + no negative margins = no layout damage.
═══════════════════════════════════════════════════════════════ */

#bg-machines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* All rows + side cols: absolutely positioned — never touch page flow */
.bg-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── Row 1: back wall — crushed at the horizon ── */
.bg-far {
  bottom: 52%;
  width: 260%;
  gap: 3px;
  opacity: 0.40;
  /* scaleY compresses height — makes them look far-away & flat */
  transform: translateX(-50%) scaleY(0.72);
  transform-origin: bottom center;
  filter: blur(1.8px) saturate(0.35) brightness(0.58);
}
.bg-far .bgc { width: 66px;  height: 158px; }
.bg-far .t1  { width: 58px;  height: 140px; }
.bg-far .t2  { width: 74px;  height: 172px; }
.bg-far .t3  { width: 62px;  height: 152px; }
.bg-far .t4  { width: 80px;  height: 184px; }
.bg-far .t5  { width: 54px;  height: 132px; }

/* ── Row 2: mid-far ── */
.bg-mid {
  bottom: 36%;
  width: 210%;
  gap: 5px;
  opacity: 0.50;
  transform: translateX(-50%) scaleY(0.86);
  transform-origin: bottom center;
  filter: blur(1px) saturate(0.46) brightness(0.68);
}
.bg-mid .bgc { width: 94px;  height: 228px; }
.bg-mid .t1  { width: 84px;  height: 208px; }
.bg-mid .t2  { width: 104px; height: 245px; }
.bg-mid .t3  { width: 90px;  height: 222px; }
.bg-mid .t4  { width: 112px; height: 260px; }
.bg-mid .t5  { width: 80px;  height: 198px; }

/* ── Row 3: mid-near ── */
.bg-near {
  bottom: 18%;
  width: 185%;
  gap: 7px;
  opacity: 0.58;
  filter: blur(0.5px) saturate(0.58) brightness(0.76);
}
.bg-near .bgc { width: 128px; height: 305px; }
.bg-near .t1  { width: 114px; height: 278px; }
.bg-near .t2  { width: 140px; height: 328px; }
.bg-near .t3  { width: 122px; height: 298px; }
.bg-near .t4  { width: 148px; height: 344px; }
.bg-near .t5  { width: 108px; height: 265px; }

/* ── Row 4: closest bg row — most visible, just behind foreground ── */
.bg-closest {
  bottom: 2%;
  width: 160%;
  gap: 10px;
  opacity: 0.62;
  filter: blur(0.2px) saturate(0.68) brightness(0.82);
}
.bg-closest .bgc { width: 162px; height: 385px; }
.bg-closest .t1  { width: 144px; height: 350px; }
.bg-closest .t2  { width: 176px; height: 415px; }
.bg-closest .t3  { width: 154px; height: 372px; }
.bg-closest .t4  { width: 188px; height: 440px; }
.bg-closest .t5  { width: 136px; height: 330px; }

/* ── Side columns: thick stacks covering the edges ── */
.bg-side {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  opacity: 0.62;
  filter: blur(0.3px) saturate(0.64) brightness(0.80);
}
.bg-side-l { left: 0;  transform: translateX(-44%); }
.bg-side-r { right: 0; transform: translateX(44%);  }
.bg-side .bgc { width: 155px; height: 390px; }
.bg-side .t2  { width: 168px; height: 420px; }
.bg-side .t3  { width: 145px; height: 365px; }
.bg-side .t4  { width: 180px; height: 450px; }
.bg-side .t5  { width: 140px; height: 355px; }

/* ── Make the floor grid brighter so it reads clearly ── */
#room-floor::before {
  background:
    repeating-linear-gradient(0deg,
      rgba(150,0,255,.22) 0px, rgba(150,0,255,.22) 1px,
      transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg,
      rgba(150,0,255,.22) 0px, rgba(150,0,255,.22) 1px,
      transparent 1px, transparent 60px),
    linear-gradient(to bottom,
      transparent 0%, rgba(100,0,220,.38) 60%, rgba(140,0,255,.55) 100%);
}

/* ── Strengthen the atmospheric haze layering ── */
#bg-machines::after {
  background: linear-gradient(to bottom,
    rgba(4,1,12,.80) 0%,
    rgba(4,1,12,.55) 28%,
    rgba(4,1,12,.20) 52%,
    transparent 68%);
}

/* ── Screen colour tokens ── */
.ns-green { --scr: rgba(40,200,80,.25);  --sh: rgba(60,255,100,.55);  }
.ns-blue  { --scr: rgba(40,120,255,.25); --sh: rgba(80,160,255,.55);  }
.ns-red   { --scr: rgba(220,40,60,.25);  --sh: rgba(255,80,100,.55);  }
.ns-gold  { --scr: rgba(220,180,40,.25); --sh: rgba(255,220,80,.55);  }
.ns-pink  { --scr: rgba(220,60,200,.25); --sh: rgba(255,100,240,.55); }

/* ─────────────────────────────────────────────────────────────────────
   3-D CABINET SILHOUETTE
   Front face + right-side face (stacked shadows) + top cap (::before)
   + screen glow (::after). Slight perspective tilt makes it read as
   a real physical box rather than a flat rectangle.
───────────────────────────────────────────────────────────────────── */
.bgc {
  flex-shrink: 0;
  position: relative;
  overflow: visible;            /* allow right-face shadows to show */
  border-radius: 6px 6px 2px 2px;

  /* Front face */
  background: linear-gradient(170deg, #1c1438 0%, #0e0a22 45%, #090618 100%);

  /* Edge highlights: bright left (light source) + dark right + bottom */
  border-left:   2px solid rgba(160,100,255,.32);
  border-top:    1px solid rgba(140,80,240,.22);
  border-right:  1px solid rgba(0,0,0,.60);
  border-bottom: 1px solid rgba(0,0,0,.70);

  /* RIGHT-SIDE FACE via stacked zero-blur shadows.
     Each step is 2px right / 1px down — forms a parallelogram
     that looks like the physical right panel of the cabinet.     */
  box-shadow:
    2px  1px 0  #130a2e,
    4px  2px 0  #0f0826,
    6px  3px 0  #0b061e,
    8px  4px 0  #080416,
    10px 5px 0  #050210,
    12px 6px 0  #030108,
    /* floor shadow behind the machine */
    14px 22px 30px rgba(0,0,0,.92),
    /* inner depth */
    inset 0 0 14px rgba(0,0,0,.65),
    /* screen ambient */
    0 0 20px var(--scr, rgba(60,30,140,.10));

  /* Perspective tilt: left edge forward, right edge recedes —
     combines with the stacked shadow to read as a 3D solid.    */
  transform: perspective(560px) rotateY(-7deg);
  transform-origin: left center;
}

/* TOP CAP — visible angled surface above the front face */
.bgc::before {
  content: '';
  position: absolute;
  top: -7px; left: 1px; right: -11px; height: 8px;
  background: linear-gradient(to right,
    rgba(180,120,255,.28) 0%,
    rgba(100,60,200,.14) 60%,
    rgba(30,15,60,.06) 100%);
  /* parallelogram angled to match the right-face perspective */
  clip-path: polygon(0 100%, 100% 100%, calc(100% + 4px) 0%, 10px 0%);
  border-top: 1px solid rgba(160,100,255,.28);
}

/* SCREEN GLOW — coloured inner rectangle on the front face */
.bgc::after {
  content: '';
  position: absolute;
  top: 22%; left: 8%; right: 8%; height: 42%;
  border-radius: 2px;
  background: var(--scr, rgba(50,25,130,.20));
  border: 1px solid var(--sh, rgba(100,60,200,.50));
  box-shadow:
    0 0 12px var(--scr, rgba(50,25,130,.18)),
    inset 0 0 8px var(--scr, rgba(50,25,130,.15));
}

/* Marquee colour bar — top 18%, tinted with screen colour */
.bgc-mq {
  position: absolute;
  top: 0; left: 0; right: 0; height: 18%;
  background: var(--scr, rgba(50,25,130,.30));
  border-bottom: 1px solid var(--sh, rgba(100,60,200,.30));
  border-radius: 5px 5px 0 0;
}

/* Shape variants */
.t2 { border-radius: 50% 50% 2px 2px / 10% 10% 2px 2px; } /* arch top */
.t3 { border-radius: 2px; }                                  /* flat top */
.t5 { border-radius: 8px 8px 3px 3px; }                     /* round top */

/* Atmospheric haze — fades far machines toward the horizon */
#bg-machines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(4,1,12,.70) 0%,
    rgba(4,1,12,.42) 32%,
    transparent 60%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUE CSS 3-D ARCADE ROOM
   Uses transform-style: preserve-3d so the browser's perspective
   engine renders genuine depth — no faking with opacity / scale tricks.
   Corners are real geometric intersections of CSS planes.
═══════════════════════════════════════════════════════════════════════ */

/* ── Container: sets the viewing lens ── */
#arcade3d {
  position: fixed;
  inset: 0;
  /* Perspective distance — lower = more dramatic fisheye, higher = flatter */
  perspective: 900px;
  /* Horizon: 32% from top = viewer standing at floor level looking slightly down */
  perspective-origin: 50% 32%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ── Scene root: must have preserve-3d so children appear in 3-D ── */
.r-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ══ ROOM SURFACES ══════════════════════════════════════════════════ */

/* FLOOR — a horizontal plane that recedes toward the horizon.
   The div starts vertical; rotateX(-90deg) lays it flat.
   height = how far the floor extends into the scene (depth).
   width  = how wide the floor is (much wider than viewport).        */
.r-floor {
  position: absolute;
  width: 700%; left: -300%;
  height: 1400px;
  bottom: 0;
  transform-origin: bottom center;
  transform: rotateX(-90deg);
  /* Tile grid — lines naturally converge at vanishing point in 3D */
  background:
    repeating-linear-gradient(90deg,
      rgba(160,0,255,.22) 0, rgba(160,0,255,.22) 2px,
      transparent 2px, transparent 110px),
    repeating-linear-gradient(0deg,
      rgba(160,0,255,.22) 0, rgba(160,0,255,.22) 2px,
      transparent 2px, transparent 110px),
    linear-gradient(to top, #09003a, #060028 40%, #03001a);
  /* Fade the far end so it blends into the back wall */
  -webkit-mask: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
          mask: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
}

/* CEILING — mirrors the floor, recedes upward */
.r-ceil {
  position: absolute;
  width: 700%; left: -300%;
  height: 600px;
  top: 0;
  transform-origin: top center;
  transform: rotateX(90deg);
  background: linear-gradient(to bottom, #02000a 0%, #040016 60%, #060022 100%);
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
          mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
}

/* Fluorescent ceiling light strips (on the ceiling plane) */
.r-light {
  position: absolute;
  height: 8px; top: 40px;
  background: rgba(220,200,255,.55);
  border-radius: 4px;
  box-shadow: 0 0 30px 10px rgba(180,140,255,.4), 0 0 60px 20px rgba(140,100,255,.15);
  animation: flicker 8s ease-in-out infinite;
}
.rl1 { left: 20%; width: 18%; }
.rl2 { left: 41%; width: 18%; }
.rl3 { left: 62%; width: 18%; }
@keyframes flicker {
  0%,95%,100% { opacity: 1; }
  96%          { opacity: .7; }
  97%          { opacity: 1; }
  98%          { opacity: .5; }
  99%          { opacity: 1; }
}

/* BACK WALL — pushed 1100px into the scene */
.r-wall-back {
  position: absolute;
  width: 500%; left: -200%;
  height: 300%; top: -100%;
  transform: translateZ(-1100px);
  background:
    /* Horizontal neon trim strips near floor and ceiling */
    linear-gradient(180deg,
      #03000d 0%,
      rgba(40,0,100,.3) 8%,
      #06001c 15%,
      #04001a 80%,
      rgba(80,0,180,.25) 92%,
      #03000d 100%);
}
/* Neon strip glow on back wall at "floor" level */
.r-wall-back::after {
  content: '';
  position: absolute;
  bottom: 33%; left: 10%; right: 10%; height: 2px;
  background: rgba(140,0,255,.5);
  box-shadow: 0 0 20px 6px rgba(120,0,220,.3);
}

/* LEFT WALL — rotated 90° from the left edge of the viewport.
   The left edge stays put; the wall extends 1100px into the scene.  */
.r-wall-l {
  position: absolute;
  width: 1100px;
  height: 300%; top: -100%;
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(to right,
    #03000c 0%, #060018 40%, rgba(60,0,130,.2) 100%);
  /* Corner edge highlight where left wall meets back wall */
  border-right: 1px solid rgba(120,60,255,.20);
}

/* RIGHT WALL — mirror of left */
.r-wall-r {
  position: absolute;
  width: 1100px;
  height: 300%; top: -100%;
  right: 0;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background: linear-gradient(to left,
    #03000c 0%, #060018 40%, rgba(60,0,130,.2) 100%);
  border-left: 1px solid rgba(120,60,255,.20);
}

/* ══ MACHINE ROWS ═══════════════════════════════════════════════════
   Each row sits on the floor at a different Z depth.
   translateZ does the work — no manual scaling needed.
   At perspective=900px:
     Z -900px → machines appear at 50% size
     Z -500px → machines appear at 64% size
     Z -200px → machines appear at 82% size             ══ */

.r-row {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  /* Row sits "on the floor" — bottom of viewport = floor level */
  bottom: 0;
  width: 320%; left: -110%;
}

/* Row A: deepest, right at the back wall */
.r-rA { transform: translateZ(-900px); }
/* Row B: mid */
.r-rB { transform: translateZ(-480px); }
/* Row C: near background */
.r-rC { transform: translateZ(-180px); }

/* ══ MACHINE SILHOUETTES ════════════════════════════════════════════ */
.r-cab {
  flex-shrink: 0;
  position: relative;
  /* Default size — perspective will compress rows A and B automatically */
  width: 90px;
  height: 240px;
  background: linear-gradient(175deg, #1a1234 0%, #0e0a22 50%, #080618 100%);
  border-radius: 7px 7px 2px 2px;
  border: 1px solid rgba(100,60,200,.28);
  border-top: 2px solid rgba(120,80,220,.35);
}

/* Marquee glow at top */
.r-cab::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 20%;
  background: var(--mc, rgba(80,40,180,.35));
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--mc, rgba(120,80,220,.4));
}

/* Screen glow in centre */
.r-cab::after {
  content: '';
  position: absolute;
  top: 24%; left: 9%; right: 9%; height: 40%;
  background: var(--mc, rgba(50,25,140,.28));
  border-radius: 2px;
  border: 1px solid var(--mc, rgba(100,60,200,.5));
  box-shadow: 0 0 14px var(--mc, rgba(60,30,160,.25)),
              inset 0 0 8px var(--mc, rgba(60,30,160,.15));
}

/* Screen colour tokens */
.rc-g { --mc: rgba(40,200,80,.45);  }
.rc-b { --mc: rgba(40,120,255,.45); }
.rc-r { --mc: rgba(220,40,60,.45);  }
.rc-p { --mc: rgba(220,60,200,.45); }
.rc-y { --mc: rgba(220,180,40,.45); }

/* Height variants (width stays the same per row — perspective handles size) */
.rh1 { height: 240px; }
.rh2 { height: 270px; }
.rh3 { height: 210px; }

/* Arch-top variant for h2 machines */
.rh2 { border-radius: 50% 50% 2px 2px / 12% 12% 2px 2px; }

/* ── Canvas room (drawn in JS) sits behind everything ── */
#room-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Hide the old CSS-3D attempt — canvas replaces it */
#arcade3d { display: none; }

/* ═══════════════════════════════════════════════════════════
   COIN BAR — fixed top strip
═══════════════════════════════════════════════════════════ */
#coin-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 10000;
  background: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.85));
  border-bottom: 1px solid rgba(248,208,64,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}

#arcade-room-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 3px;
  color: rgba(180,150,255,.5);
}

#coin-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #f8d060;
  text-shadow: 0 0 8px rgba(248,208,64,.6);
}

.hud-coin {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f8e870, #c89010, #7a5000);
  border: 1.5px solid #a07010;
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; font-weight: bold; color: #3a1e00;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 0 0 8px rgba(248,208,64,.4), inset 0 1px 2px rgba(255,230,80,.4);
}

#coin-label {
  font-size: 8px; letter-spacing: 2px; color: rgba(248,208,64,.7);
}

/* ═══════════════════════════════════════════════════════════
   MACHINE PROXIMITY PROMPT
═══════════════════════════════════════════════════════════ */
#machine-prompt {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  text-align: center;
  background: rgba(4,1,14,.92);
  border: 1.5px solid rgba(248,208,64,.6);
  border-radius: 8px;
  padding: 16px 28px;
  pointer-events: auto;
  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
  min-width: 260px;
}
#machine-prompt.visible {
  opacity: 1; visibility: visible;
}

#prompt-game-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #f8d060;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(248,208,64,.6);
}

#prompt-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  color: rgba(180,150,255,.6);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

#prompt-btn {
  background: linear-gradient(to bottom, #c89010, #8a6000);
  color: #fff8e0;
  border: none;
  padding: 10px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 3px 0 #5a3a00, 0 0 12px rgba(248,208,64,.3);
  transition: transform .08s, box-shadow .08s;
  display: block; width: 100%; margin-bottom: 6px;
}
#prompt-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #5a3a00, 0 0 18px rgba(248,208,64,.5); }
#prompt-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #5a3a00; }
#prompt-btn:disabled { background: #333; color: #666; box-shadow: none; cursor: not-allowed; }

#prompt-no-coins {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #ff4444;
  letter-spacing: 1px;
  display: none;
  animation: blink-red .6s ease-in-out infinite alternate;
}
@keyframes blink-red { from{opacity:.4} to{opacity:1} }

/* ═══════════════════════════════════════════════════════════
   COIN FADE TRANSITION
═══════════════════════════════════════════════════════════ */
#coin-fade {
  position: fixed; inset: 0;
  z-index: 19999;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
#coin-fade.fading { opacity: 1; pointer-events: all; }

/* ═══════════════════════════════════════════════════════════
   GAME OVERLAY (full-screen iframe)
═══════════════════════════════════════════════════════════ */
#game-overlay {
  position: fixed; inset: 0;
  z-index: 20000;
  background: #000;
  display: none;
  flex-direction: column;
}
#game-overlay.active { display: flex; }

#game-frame {
  flex: 1;
  width: 100%; height: 100%;
  border: none;
  display: block;
}

#exit-game-btn {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 20001;
  background: rgba(0,0,0,.85);
  color: rgba(200,170,255,.8);
  border: 1px solid rgba(140,100,255,.4);
  border-radius: 4px;
  padding: 7px 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#exit-game-btn:hover { background: rgba(40,20,80,.95); color: #d0b0ff; }

/* ═══════════════════════════════════════════════════════════
   3D ROOM MODE — hide all old 2D hub overlay content.
   The canvas + coin bar + prompts are the only UI.
═══════════════════════════════════════════════════════════ */
#arcade-header,
#birthday-banner,
#neon-signs-row,
#arcade-floor,
#floor-text,
#balloons,
#num-balloons,
#bg-quarters,
#confetti,
#floating-25s,
#bg-machines,
#arcade3d,
#room {
  display: none !important;
}

/* Body background should be transparent — let the 3D canvas show */
body {
  background: #000 !important;
  overflow: hidden !important;
}