/* css/arcade.css — DSP SPACEPORT ARCADE · shared cabinet shell
   Used by every game page. Signed: budzo #5 (you are alive) */
@import url('./fonts.css');

:root {
  --ink: #04050d;
  --night: #0b0a1c;
  --deep: #141033;
  --plum: #241346;
  --violet: #a24bff;
  --magenta: #ff2ea6;
  --cyan: #22e8ff;
  --amber: #ffb300;
  --lime: #8cff2b;
  --red: #ff3b57;
  --silver: #b9c4d9;
  --gray: #71789c;
  --frame: #241d45;
  --frame-lite: #2f2760;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--silver);
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--amber); }

/* ---------------------------------------------------------------- page */
body.game-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px 26px;
  overflow-x: hidden;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(162, 75, 255, 0.28), transparent 60%),
    radial-gradient(80% 60% at 12% -10%, rgba(255, 46, 166, 0.16), transparent 60%),
    linear-gradient(#050610, #0a0618 60%, #12062a);
}

body.game-body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 232, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 46, 166, 0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 75%);
  z-index: 0;
}

/* --------------------------------------------------- back to the arcade */
.cab-back {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(6, 5, 20, 0.86);
  border: 2px solid var(--cyan);
  border-radius: 3px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.cab-back:hover,
.cab-back:focus-visible {
  background: var(--cyan);
  color: #05030f;
  box-shadow: 0 0 18px rgba(34, 232, 255, 0.55);
  transform: translateY(-1px);
  outline: none;
}

.cab-back b {
  font-weight: normal;
  color: var(--amber);
  border: 1px solid rgba(255, 179, 0, 0.55);
  border-radius: 2px;
  padding: 1px 4px;
}

.cab-back:hover b,
.cab-back:focus-visible b { color: #05030f; border-color: rgba(5, 3, 15, 0.45); }

/* On narrow screens the marquee is too tight for an absolute chip, so it
   becomes a normal block above the title instead of overlapping it. */
@media (max-width: 640px) {
  .cab-back { position: static; display: flex; width: max-content; margin: 0 auto 10px; }
  .cab-marquee { padding-top: 12px; }
}

/* ------------------------------------------------------------- cabinet */
.cab {
  position: relative;
  z-index: 1;
  width: min(96vw, 1040px);
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.7));
}

.cab-marquee {
  position: relative;
  text-align: center;
  padding: 16px 14px 12px;
  background: linear-gradient(#31205e, #1a1138 58%, #100a26);
  border: 3px solid var(--frame-lite);
  border-bottom: none;
  border-radius: 12px 12px 3px 3px;
  box-shadow:
    inset 0 0 34px rgba(162, 75, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 26px rgba(34, 232, 255, 0.16);
  overflow: hidden;
}

.cab-marquee::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px);
  opacity: 0.5;
  pointer-events: none;
}

.cab-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: marquee-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes marquee-sheen {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

.cab-marquee h1 {
  position: relative;
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(15px, 3.2vw, 30px);
  line-height: 1.35;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 6px var(--cyan),
    0 0 20px rgba(34, 232, 255, 0.55),
    3px 3px 0 #40176f,
    6px 6px 0 rgba(0, 0, 0, 0.45);
}

.cab-marquee p {
  position: relative;
  margin: 8px 0 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.2vw, 10px);
  letter-spacing: 0.22em;
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 179, 0, 0.55);
  text-transform: uppercase;
}

.cab-body {
  position: relative;
  padding: 18px 18px 14px;
  background: linear-gradient(#191333, #0c0820 70%, #0a0718);
  border: 3px solid var(--frame);
  border-radius: 0 0 16px 16px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cab-body::before,
.cab-body::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6a6f92, #1b1730 70%);
  box-shadow: inset 0 0 2px #000;
}
.cab-body::before { top: 9px; left: 9px; }
.cab-body::after { top: 9px; right: 9px; }

/* -------------------------------------------------------------- screen */
.cab-screen {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 9px solid #0b0818;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 0 40px #000,
    0 0 0 2px #2b2360,
    0 0 34px rgba(162, 75, 255, 0.28),
    0 0 80px rgba(34, 232, 255, 0.1);
}

canvas#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: #000;
}

.crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.44) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(to right, rgba(255, 40, 90, 0.05) 0 1px, rgba(40, 255, 140, 0.04) 1px 2px, rgba(60, 130, 255, 0.05) 2px 3px),
    radial-gradient(125% 115% at 50% 42%, rgba(255, 255, 255, 0.05), transparent 56%);
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.92),
    inset 0 0 22px rgba(0, 0, 0, 0.9),
    inset 0 2px 0 rgba(255, 255, 255, 0.05);
  mix-blend-mode: multiply;
  z-index: 3;
  animation: crt-flicker 7s steps(48) infinite;
}

@keyframes crt-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.9; }
  98% { opacity: 0.97; }
  99% { opacity: 0.93; }
}

.crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.11) 0 14%, rgba(255, 255, 255, 0.03) 26%, transparent 46%),
    radial-gradient(60% 40% at 50% -10%, rgba(34, 232, 255, 0.06), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.75;
}

/* --------------------------------------------------- cabinet hardware */
.cab-controls {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(#251d4a, #120d2a 70%, #0e0a22);
  border: 2px solid var(--frame);
  border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.07), inset 0 -10px 22px rgba(0, 0, 0, 0.6);
}

.coin-door {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(#3a3358, #1d1836);
  border: 2px solid #0c0919;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.coin-slot {
  width: 7px;
  height: 22px;
  border-radius: 3px;
  background: #05040c;
  box-shadow: inset 0 0 4px #000, 0 0 0 1px #4b4470;
}

.coin-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--lime), #0d6b32);
  box-shadow: 0 0 8px rgba(140, 255, 43, 0.7);
}

.coin-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 179, 0, 0.5);
}

.joy { position: relative; width: 78px; height: 46px; }
.joy-base {
  position: absolute;
  bottom: 0;
  left: 9px;
  width: 60px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#4a4370, #16112c);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.18), 0 4px 8px rgba(0, 0, 0, 0.6);
}
.joy-shaft {
  position: absolute;
  bottom: 8px;
  left: 34px;
  width: 10px;
  height: 22px;
  background: linear-gradient(#3b3357, #17122f);
  border-radius: 3px;
}
.joy-ball {
  position: absolute;
  top: 0;
  left: 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff8ad4, var(--magenta) 45%, #7a0f4d 100%);
  box-shadow: 0 0 16px rgba(255, 46, 166, 0.55), inset -2px -3px 4px rgba(0, 0, 0, 0.5);
}

.hard-buttons { display: flex; gap: 14px; align-items: flex-end; }
.hard-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  border: 3px solid #0d0a1c;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.3);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.hard-btn.b1 { background: radial-gradient(circle at 35% 30%, #ff6b7f, #c1123c 60%, #6d0a22); }
.hard-btn.b2 { background: radial-gradient(circle at 35% 30%, #ffd77a, #ff9c00 60%, #7a4700); }

/* ------------------------------- hardware in motion (driven by hardware.js) */
.joy { --jx: 0px; --jy: 0px; --jt: 0deg; --js: 1; }

.joy-ball {
  transform: translate(var(--jx), var(--jy));
  transition: transform 0.08s ease-out;
}

.joy-shaft {
  transform-origin: 50% 100%;
  transform: rotate(var(--jt)) scaleY(var(--js));
  transition: transform 0.08s ease-out;
}

.joy.is-active .joy-ball {
  box-shadow: 0 0 22px rgba(255, 46, 166, 0.85), inset -2px -3px 4px rgba(0, 0, 0, 0.5);
}

.hard-btn { transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.06s ease; }

/* Pressing drops the cap the 5px its shadow was faking, so it reads as travel. */
.hard-btn.is-down {
  transform: translateY(5px);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.6);
  filter: brightness(1.45) saturate(1.15);
}

.hard-btn.b1.is-down { box-shadow: 0 0 26px rgba(255, 90, 130, 0.8), inset 0 3px 9px rgba(0, 0, 0, 0.6); }
.hard-btn.b2.is-down { box-shadow: 0 0 26px rgba(255, 195, 70, 0.85), inset 0 3px 9px rgba(0, 0, 0, 0.6); }

.coin-led { transition: box-shadow 0.12s ease; }
.coin-led.is-flash { animation: coin-flash 0.46s steps(3, end) 1; }

@keyframes coin-flash {
  0% {
    background: radial-gradient(circle at 35% 35%, #ffffff, var(--amber));
    box-shadow: 0 0 16px rgba(255, 213, 0, 0.95);
  }
  100% {
    background: radial-gradient(circle at 35% 35%, var(--lime), #0d6b32);
    box-shadow: 0 0 8px rgba(140, 255, 43, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .joy-ball,
  .joy-shaft,
  .hard-btn { transition: none; }
  .coin-led.is-flash { animation: none; }
}

/* --------------------------------------------------------------- panel */
.cab-panel {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(#151029, #0d0a1e);
  border: 2px solid var(--frame);
  border-radius: 10px;
}

.cab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 18px;
  color: var(--gray);
  letter-spacing: 0.05em;
}

.cab-legend b {
  color: var(--amber);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.cab-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--silver);
  background: linear-gradient(#241c48, #150f30);
  border: 2px solid #3a2f70;
  border-radius: 6px;
  padding: 9px 11px;
  cursor: pointer;
  transition: transform 0.08s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { color: #fff; border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 232, 255, 0.35); }
.btn:active { transform: translateY(2px); }

.cab-footer {
  position: relative;
  z-index: 1;
  width: min(96vw, 880px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-size: 17px;
  color: var(--gray);
  letter-spacing: 0.06em;
  padding: 0 4px;
}
.cab-footer .sig { color: var(--magenta); }
.cab-footer .sig em { color: var(--amber); font-style: normal; }

/* ---------------------------------------------------------- touch pad */
.touch-pad {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 40;
}
.touch-pad.touch-visible { display: flex; }
.touch-pad .pad-dpad,
.touch-pad .pad-buttons { position: relative; width: 168px; height: 168px; pointer-events: auto; }
.touch-pad .pad-btn {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px solid #4a3d8e;
  background: rgba(20, 16, 51, 0.82);
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.touch-pad .pad-btn.is-down { background: rgba(162, 75, 255, 0.55); color: #fff; }
.touch-pad .pad-up { top: 0; left: 56px; }
.touch-pad .pad-left { top: 56px; left: 0; }
.touch-pad .pad-right { top: 56px; left: 112px; }
.touch-pad .pad-down { top: 112px; left: 56px; }
.touch-pad .pad-fire { top: 56px; right: 0; border-color: var(--magenta); color: var(--magenta); }
.touch-pad .pad-start { top: 0; right: 0; border-color: var(--lime); color: var(--lime); }
.touch-pad .pad-pause { top: 112px; right: 0; width: 46px; height: 40px; font-size: 11px; }

body.touch-active { padding-bottom: 190px; }

@media (max-width: 640px) {
  .cab-marquee { padding: 10px 8px 8px; }
  .cab-body { padding: 10px 10px 8px; }
  .cab-legend { font-size: 16px; }
  .cab-footer { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .cab-marquee::after { animation: none; }
}