/* Brand tokens are mirrored from ~/unwellgames-site/src/styles/global.css so the arcade
   reads as the same studio as the parent site. These are duplicated in js/theme.js for
   canvas-side use — change both together, and never hardcode a colour past this block. */
:root {
  --ink: #1a1a1a;
  --ink-raised: #232323;
  --ink-border: #333331;
  --paper: #faf9f7;
  --paper-dim: #c9c8c4;
  --gray: #8a8a88;
  /* The parent site's accent is hot pink; the arcade had drifted to red, which is a large
     part of why it stopped feeling like the same company. Realigned. */
  --accent: #ff3d9e;
  --accent-dim: #b32e70;
  --accent-wash: #2b0e1d;

  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Shared motion vocabulary — mirrors MOTION in js/theme.js. */
  --dur-instant: 90ms;
  --dur-quick: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  width: 100%;
  padding: 56px clamp(1.5rem, 5vw, 5rem) 96px;
}

/* ---------------- header ---------------- */

.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.insert-coin {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.05em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1;
  margin: 16px 0 0;
  text-wrap: balance;
  max-width: 14ch;
}
.hero .sub {
  color: var(--paper-dim);
  font-size: 1.02rem;
  max-width: 36ch;
  margin-top: 16px;
  line-height: 1.55;
}

.coin-hud {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--ink-raised);
  border: 2px solid var(--ink-border);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink-border);
}
.coin-hud .seg { padding: 12px 18px; }
.coin-hud .seg + .seg { border-left: 2px solid var(--ink-border); }
.coin-num { font-family: var(--font-mono); font-weight: 700; font-size: 1.35rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.coin-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-top: 2px; }
.coin-icon { font-family: var(--font-pixel); font-size: 16px; color: var(--accent); display: flex; align-items: center; height: 100%; }

.strip {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  border-top: 2px solid var(--ink-border);
  border-bottom: 2px solid var(--ink-border);
  margin-bottom: 48px;
}
.strip span { padding: 11px 22px 11px 0; margin-right: 22px; }
.strip span:not(:last-child) { border-right: 1px solid var(--ink-border); }
.strip b { color: var(--paper); font-weight: 600; }

/* ---------------- cabinet grid ---------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

/* Cabinet cards, "attract screen" treatment: chrome is deliberately thin so the live
   attract-mode loop on the screen is what carries the card. Each card carries its game's
   hue as --hue (set from GAME_HUE in js/theme.js by shell.js) and spends it only on the
   marquee bulbs, the glass rim-light and the Play link — never as a fill, so the pink
   brand accent keeps owning every call to action. */
.card {
  --hue: 320; /* fallback ≈ brand pink, overridden per-card by shell.js */
  background: var(--ink-raised);
  border: 2px solid var(--ink-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0 var(--ink-border);
  transition: transform var(--dur-quick) var(--ease-spring),
              box-shadow var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}
.card:not(.is-soon):hover,
.card:not(.is-soon):focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink-border);
  border-color: hsl(var(--hue) 78% 62% / 0.55);
}
.card.is-soon { cursor: default; opacity: 0.6; }

/* Cards assemble rather than snapping in — stagger delay is set per card by shell.js. */
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: card-in var(--dur-slow) var(--ease-out) both; }

.marquee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
}
.marquee-title { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.02em; color: var(--paper-dim); line-height: 1.4; transition: color var(--dur-quick) var(--ease-out); }
.card:not(.is-soon):hover .marquee-title { color: var(--paper); }
.marquee-lights { display: flex; gap: 4px; }
.marquee-lights i {
  width: 5px; height: 5px; border-radius: 50%; display: block;
  background: hsl(var(--hue) 78% 62% / 0.45);
  transition: background var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.card.is-soon .marquee-lights i { background: var(--ink-border); }
.card:not(.is-soon):hover .marquee-lights i {
  background: hsl(var(--hue) 78% 62%);
  box-shadow: 0 0 5px hsl(var(--hue) 78% 62% / 0.8);
}
/* Second bulb pulses a beat behind the first, so the marquee reads as blinking, not lit. */
.card:not(.is-soon):hover .marquee-lights i:nth-child(2) { animation: bulb 1.1s steps(1) infinite; }
@keyframes bulb { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.25; } }

.screen {
  aspect-ratio: 4 / 3;
  background: #0b0b10;
  margin: 0 6px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px hsl(var(--hue) 78% 62% / 0.28);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card:not(.is-soon):hover .screen {
  box-shadow: inset 0 0 0 1px hsl(var(--hue) 78% 62% / 0.5),
              inset 0 0 26px hsl(var(--hue) 78% 62% / 0.16);
}
/* Idle attract loops sit back so ten of them read as a calm floor rather than noise;
   the hovered cabinet comes up to full brightness. */
.screen canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0.62;
  transition: opacity var(--dur-base) var(--ease-out);
}
.card:not(.is-soon):hover .screen canvas { opacity: 1; }

.card-foot { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }

.tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid;
}
.tag.solo, .tag.duo { background: transparent; color: var(--paper-dim); border-color: var(--ink-border); }
/* Multiplayer cabinets earn a marked tag — they're the point of the floor, and the ones
   the online layer will eventually plug into. */
.tag.party { background: transparent; color: hsl(var(--hue) 78% 62%); border-color: hsl(var(--hue) 78% 62% / 0.5); font-weight: 700; }
.tag.online { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }

.card-row2 { display: flex; justify-content: space-between; align-items: center; }
.best { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray); }
/* The one borrow from the colour-coded direction: the Play link wears the game's own hue.
   Small, consistent dose — enough to give each cabinet an identity without a colour block
   competing with the pink accent. */
.play {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: hsl(var(--hue) 78% 62%);
  text-decoration: none;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap var(--dur-quick) var(--ease-spring);
}
.play::before { content: "▶"; font-size: 0.7em; }
.card:not(.is-soon):hover .play { gap: 8px; }
.is-soon .play { color: var(--gray); }
.is-soon .play::before { content: ""; }

/* ---------------- fullscreen "gameboy" overlay ---------------- */

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  z-index: 100;
}
.fullscreen-overlay.is-open { display: block; }

/* Contain-fit: the canvas is sized to the largest 4:3 rect that fits entirely inside the
   viewport, so nothing is ever cropped (a paddle/ball near the edge of play stays fully
   visible). On a non-4:3 window this leaves a small black margin on one axis — but that
   margin is the same #000 as the rest of the overlay, so it reads as part of the screen
   rather than an empty gap. Cropping to avoid that margin previously cut off live
   gameplay near the top/bottom edge, which is worse. */
.fs-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slightly lighter than the game canvas's own #000 so the play field's edge is visible
     against the surrounding letterbox instead of black-on-black. */
  background: var(--ink);
}
.fs-screen-wrap {
  width: min(100vw, 100vh * 4 / 3);
  height: min(100vh, 100vw * 3 / 4);
  border: 2px solid var(--ink-border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
/* Smooth (bilinear) scaling is now the DEFAULT. It used to be the other way round —
   nearest-neighbour upscaling from a 480x360 logical canvas to ~1200px on screen is
   exactly what made the games read as "blocks moving around". Games are drawn as real
   shapes at higher logical resolution, which wants smooth filtering. A game that genuinely
   wants chunky pixel art can opt back in with meta.pixelated. */
.fs-screen-wrap canvas { width: 100%; height: 100%; display: block; }
.fs-screen-wrap canvas.pixelated,
.screen canvas.pixelated { image-rendering: pixelated; }

/* HUD text lives in its own full-viewport DOM layer, never on the low-res game canvas —
   real fonts at native screen resolution instead of stretched canvas pixels, and it's
   never subject to the cover-crop above. */
.fs-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-mono);
  color: var(--paper);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}
.hud-topbar {
  position: absolute;
  top: 20px;
  left: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: clamp(14px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.hud-note { font-size: 0.6em; font-weight: 500; opacity: 0.75; }
.hud-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  font-size: clamp(56px, 12vw, 140px);
  font-weight: 700;
  color: var(--hud-accent, var(--accent));
}
.hud-countdown:empty { display: none; }
.hud-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.68);
  text-align: center;
}
.hud-overlay.hidden { display: none; }
.hud-overlay-title {
  font-size: clamp(26px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--hud-accent, var(--accent));
}
.hud-overlay-sub { font-size: clamp(13px, 1.8vw, 17px); opacity: 0.85; }

.fs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink-border);
  background: var(--ink-raised);
  color: var(--paper);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 120;
}

.learn-toggle {
  position: absolute;
  top: 16px;
  right: 66px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink-border);
  background: var(--ink-raised);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 120;
}
.learn-toggle:hover { border-color: var(--accent-dim); }

/* "Learn" drawer — how-to-play + scoring for the open game, slides in from the right so
   it never covers the play field. Every game feeds it via its own meta.help. */
.learn-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--ink-raised);
  border-left: 2px solid var(--ink-border);
  padding: 24px 22px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 115;
  font-family: var(--font-body);
  color: var(--paper);
}
.learn-panel.is-open { transform: translateX(0); }

.learn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ink-border);
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.learn-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}
.learn-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 8px 0 16px;
  padding-right: 40px;
}
.learn-objective {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--paper-dim);
  margin-bottom: 22px;
}
.learn-heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.learn-controls, .learn-scoring {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learn-controls li, .learn-scoring li {
  font-size: 0.88rem;
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}
.learn-controls li::before, .learn-scoring li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

.dpad {
  display: none;
  position: fixed;
  inset: auto 0 24px 0;
  justify-content: space-between;
  padding: 0 24px;
  pointer-events: none;
}
.is-touch .dpad { display: flex; }

.dpad-btn {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 50%;
  border: 2px solid var(--ink-border);
  background: var(--ink-raised);
  color: var(--paper);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.dpad-a, .dpad-b { background: var(--accent-wash); border-color: var(--accent-dim); color: var(--accent); }

.dpad-left, .dpad-up, .dpad-right, .dpad-down {
  position: relative;
}
.dpad-cross {
  position: relative;
  width: 170px;
  height: 170px;
}
.dpad-cross .dpad-btn { position: absolute; }
.dpad-up { top: 0; left: 59px; }
.dpad-down { top: 118px; left: 59px; }
.dpad-left { top: 59px; left: 0; }
.dpad-right { top: 59px; left: 118px; }

.dpad-buttons { display: flex; flex-direction: column; gap: 12px; align-self: flex-end; }

/* ---------------- seat picker ---------------- */
/* Asked once before any multi-seat game so playing solo against CPUs is a real choice
   rather than something inferred from whichever key got pressed first. */
.seat-picker {
  position: absolute;
  inset: 0;
  z-index: 130;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(10, 10, 14, 0.9);
  backdrop-filter: blur(3px);
}
.seat-picker.is-open { display: flex; }
.seat-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--hue) 78% 62%);
}
.seat-options { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.seat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 108px;
  padding: 18px 20px;
  border-radius: 6px;
  border: 2px solid var(--ink-border);
  background: var(--ink-raised);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform var(--dur-quick) var(--ease-spring),
              border-color var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out);
}
.seat-btn:hover, .seat-btn:focus-visible {
  transform: translateY(-3px);
  border-color: hsl(var(--hue) 78% 62%);
  box-shadow: 0 6px 0 var(--ink-border);
  outline: none;
}
.seat-n { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: hsl(var(--hue) 78% 62%); }
.seat-l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--paper-dim); }
.seat-hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gray); }