/* DERBY 2000 - cabinet shell. Mobile first, no external fonts, no inline styles (strict CSP). */

:root {
  --cab-0: #050507;
  --cab-1: #0d0d12;
  --cab-2: #17171f;
  --cab-3: #24242e;
  --panel-0: #141419;
  --panel-1: #22222b;
  --panel-edge: #3a3a46;
  --trim: #c81818;
  --trim-hi: #ff4a3a;
  --label: #f2f0e6;
  --label-dim: #8d8a80;
  --yellow: #f8e018;
  --cyan: #20d0ff;
  --magenta: #f858f8;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* button sizes scale with the smaller viewport side */
  --btn: clamp(54px, 15.5vmin, 86px);
  --btn-big: calc(var(--btn) * 1.36);
  --gap: clamp(8px, 2.4vmin, 16px);
  --bz: clamp(6px, 2.2vmin, 14px);

  --font: "Lucida Console", "Courier New", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--cab-0);
  color: var(--label);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
}

button {
  font-family: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px dashed var(--yellow);
  outline-offset: 4px;
}

/* ------------------------------------------------------------------ */
/* Cabinet                                                             */
/* ------------------------------------------------------------------ */

.cabinet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 6px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 6px);
  gap: 6px;
  background:
    radial-gradient(120% 70% at 50% 0%, #1c1c26 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--cab-2) 0%, var(--cab-1) 45%, var(--cab-0) 100%);
}

/* ---------- monitor / bezel ---------- */

.monitor {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

.bezel {
  position: relative;
  width: 100%;
  padding: var(--bz);
  border-radius: clamp(8px, 2.4vmin, 18px);
  background:
    linear-gradient(180deg, #2a2a33 0%, #121218 18%, #0b0b10 82%, #1c1c24 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.8),
    0 0 0 1px #000,
    0 0 0 3px var(--trim),
    0 0 0 4px #300,
    0 10px 30px rgba(0, 0, 0, 0.7);
}

.crt {
  position: relative;
  width: 100%;
  aspect-ratio: 288 / 224;
  overflow: hidden;
  border-radius: clamp(4px, 1.4vmin, 10px);
  background: #000;
  box-shadow:
    0 0 0 2px #000,
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.crt {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* screen.js sizes the canvas (integer scale when possible); keep it centred */
.crt canvas {
  position: relative;
  z-index: 0;
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: pointer;
  -webkit-touch-callout: none;
}

/* scanlines are drawn by screen.js present(), aligned to the game's pixel rows */

/* glass: vignette, faint curvature shading and a soft reflection */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(140% 120% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.38) 88%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 28%);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.75),
    inset 0 0 3px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------------------------ */
/* Control deck                                                        */
/* ------------------------------------------------------------------ */

.deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
  padding: var(--gap) clamp(10px, 3vmin, 20px);
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 3px, rgba(0, 0, 0, 0.03) 3px 6px),
    linear-gradient(180deg, var(--panel-1) 0%, var(--panel-0) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.07),
    inset 0 -3px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px #000,
    0 0 0 3px var(--panel-edge),
    0 0 0 4px #000;
}

/* red T-molding stripe */
.deck::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 6px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--trim) 12%, var(--trim-hi) 50%, var(--trim) 88%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

.deck-util {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plate {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0a0e, #000);
  box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 0 2px #000, 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  white-space: nowrap;
}

.plate-title {
  color: var(--yellow);
  font-weight: 900;
  font-size: clamp(11px, 3.2vmin, 15px);
  letter-spacing: 0.18em;
  text-shadow: 1px 1px 0 #6a3a00;
}

.plate-sub {
  color: var(--cyan);
  font-size: clamp(8px, 2.2vmin, 10px);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* small square utility buttons (MUTE / FULL) */
.btn-small {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #d8d6cc;
  background: linear-gradient(180deg, #3a3a44 0%, #24242c 55%, #1a1a20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px #000,
    0 3px 0 #000;
  transform: translateY(0);
  transition: transform 40ms linear, box-shadow 40ms linear;
}

.btn-small.is-down,
.btn-small:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px #000,
    0 1px 0 #000;
}

.lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a1010;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 0 1px #000;
}

.btn-small[aria-pressed="true"] .lamp {
  background: #ff3a2a;
  box-shadow: 0 0 6px #ff3a2a, 0 0 0 1px #000;
}

.btn-small[data-btn="fullscreen"] .lamp {
  background: #102a38;
}

/* ---------- chunky arcade buttons ---------- */

.deck-buttons {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  grid-template-areas:
    "cancel repeat step start"
    "coin coin coin coin";
  align-items: center;
  justify-items: center;
  column-gap: var(--gap);
  row-gap: 6px;
}

.pb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pb-cancel { grid-area: cancel; }
.pb-repeat { grid-area: repeat; }
.pb-step { grid-area: step; }
.pb-start { grid-area: start; justify-self: end; }

.pb-label {
  padding: 1px 6px;
  border-radius: 2px;
  font-size: clamp(9px, 2.5vmin, 12px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #111;
  background: var(--label);
  box-shadow: 0 1px 0 #000;
  white-space: nowrap;
}

.pb-start .pb-label {
  background: var(--yellow);
}

.arc {
  --c-hi: #ffffff;
  --c-mid: #d0d0d0;
  --c-lo: #6a6a6a;
  --c-ring: #2a2a2a;
  position: relative;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  /* outer bezel ring + housing */
  background: radial-gradient(circle at 50% 50%, #0c0c0c 0 58%, #3b3b44 62%, #15151a 70%, #050507 72%);
  box-shadow:
    0 0 0 2px #000,
    0 4px 0 #000,
    0 6px 10px rgba(0, 0, 0, 0.6);
}

.arc-cap {
  position: absolute;
  inset: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, var(--c-hi) 0%, var(--c-mid) 34%, var(--c-lo) 92%);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.35),
    inset 0 3px 2px rgba(255, 255, 255, 0.45),
    0 4px 0 var(--c-ring),
    0 5px 0 #000;
  transform: translateY(-3px);
  transition: transform 45ms linear, box-shadow 45ms linear, filter 120ms linear;
}

.arc.is-down .arc-cap,
.arc:active:not(:disabled) .arc-cap {
  transform: translateY(1px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    0 1px 0 var(--c-ring),
    0 1px 0 #000;
}

.arc-square,
.arc-square .arc-cap {
  border-radius: 18%;
}

.arc-square {
  background: linear-gradient(180deg, #3b3b44, #0b0b0f);
}

.arc-value {
  font-weight: 900;
  font-size: clamp(14px, 4.4vmin, 22px);
  letter-spacing: 0.02em;
  color: #062a10;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.arc-red {
  --c-hi: #ff9a8a;
  --c-mid: #f02818;
  --c-lo: #7a0800;
  --c-ring: #4a0400;
}

.arc-white {
  --c-hi: #ffffff;
  --c-mid: #e6e2d4;
  --c-lo: #8a8678;
  --c-ring: #48463e;
}

.arc-blue {
  --c-hi: #a8d4ff;
  --c-mid: #2468f0;
  --c-lo: #0a2270;
  --c-ring: #061640;
}

.arc-green {
  --c-hi: #c8ffb0;
  --c-mid: #38d040;
  --c-lo: #0e5a14;
  --c-ring: #06300a;
}

.arc-big {
  width: var(--btn-big);
  height: var(--btn-big);
}

/* lit START lamp when it can be pressed */
.arc-red:not(:disabled) .arc-cap {
  animation: start-glow 1.06s steps(1, end) infinite;
}

@keyframes start-glow {
  0% {
    filter: brightness(1.18) saturate(1.1);
  }
  50% {
    filter: brightness(0.92);
  }
}

.arc:disabled {
  cursor: default;
}

.arc:disabled .arc-cap {
  filter: brightness(0.45) saturate(0.6);
}

.pb:has(.arc:disabled) .pb-label {
  opacity: 0.55;
}

/* ---------- coin slot ---------- */

.deck-coin {
  grid-area: coin;
  display: flex;
  justify-content: center;
  min-height: 0;
}

.coin-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 16px 6px 10px;
  border: 0;
  border-radius: 6px;
  font-size: clamp(12px, 3.4vmin, 15px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--yellow);
  background: linear-gradient(180deg, #4a4a52 0%, #2a2a30 50%, #1a1a1f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px #000,
    0 3px 0 #000;
  cursor: pointer;
}

.coin-slot .slot {
  width: 6px;
  height: 28px;
  border-radius: 3px;
  background: #000;
  box-shadow: 0 0 0 2px #77777f, 0 0 8px rgba(255, 60, 40, 0.9);
}

.coin-label {
  animation: coin-blink 0.9s steps(1, end) infinite;
}

@keyframes coin-blink {
  50% {
    opacity: 0.35;
  }
}

.coin-slot.is-down,
.coin-slot:active {
  transform: translateY(2px);
}

.noscript {
  position: fixed;
  inset: auto 0 40% 0;
  text-align: center;
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: 0.2em;
}

/* ------------------------------------------------------------------ */
/* Portrait sizing: screen gets full width but never squeezes the deck */
/* ------------------------------------------------------------------ */

@media (orientation: portrait) {
  :root {
    --btn: clamp(54px, min(18vw, 9dvh), 104px);
    --gap: clamp(8px, 2.8vw, 18px);
  }
  /* spread the controls over the whole deck instead of a centred clump */
  .deck {
    justify-content: space-evenly;
  }
  /* screen + bezel never taller than ~64% of the viewport, keeps 288:224 */
  .bezel {
    width: min(100%, calc((64dvh - 2 * var(--bz)) * 288 / 224 + 2 * var(--bz)));
  }
}

/* very narrow phones: wrap START onto its own centred row */
@media (orientation: portrait) and (max-width: 340px) {
  .deck-buttons {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "cancel repeat step"
      "start start start"
      "coin coin coin";
  }
  .pb-start {
    justify-self: center;
  }
}

/* ------------------------------------------------------------------ */
/* Landscape: screen fills height, deck becomes a right-hand column    */
/* ------------------------------------------------------------------ */

@media (orientation: landscape) {
  :root {
    --btn: clamp(46px, 14vh, 80px);
    --gap: clamp(6px, 2vh, 14px);
  }

  .cabinet {
    flex-direction: row;
    align-items: stretch;
  }

  .monitor {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    container-type: size;
  }

  /* fit 288:224 inside the monitor box (fills height unless width-bound) */
  .bezel {
    width: min(100cqw, calc((100cqh - 2 * var(--bz)) * 288 / 224 + 2 * var(--bz)));
  }

  .deck {
    flex: 0 0 clamp(150px, 24vw, 240px);
    justify-content: space-evenly;
    padding: 14px 10px 10px;
  }

  .deck-util {
    flex-wrap: wrap;
    justify-content: center;
  }

  .plate {
    flex-basis: 100%;
    align-items: center;
  }

  .deck-buttons {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "start start"
      "cancel repeat"
      "step step"
      "coin coin";
    row-gap: var(--gap);
  }

  .pb-start {
    justify-self: center;
  }
}

/* short landscape phones: tighter; the INSERT COIN slot shares the BET row so it
   always stays on screen (a broke player must be able to refill) */
@media (orientation: landscape) and (max-height: 420px) {
  :root {
    --btn: clamp(40px, 12vh, 64px);
  }
  .plate {
    display: none;
  }
  .deck-util {
    flex-wrap: nowrap;
  }
  .pb {
    gap: 3px;
  }
  .deck-buttons {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "start start"
      "cancel repeat"
      "step coin";
  }
  .pb-cancel,
  .pb-step {
    justify-self: start;
  }
  .pb-repeat {
    justify-self: end;
  }
  .coin-slot {
    gap: 6px;
    padding: 4px 8px 4px 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .coin-slot .slot {
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-red:not(:disabled) .arc-cap,
  .coin-label {
    animation: none;
  }
}