/* ============================================================================
   game-dash.css — visual layer owned exclusively by dash.
   Loaded only on dash pages, after site.css / themes.css / games.css, so rules
   here win without touching any shared stylesheet.
   AUCKLAND RUN: an arcade driving game. The stage reads as a lit cabinet —
   headlight-warm at the sill, harbour-teal in the halo.
   ========================================================================== */

/* the canvas is a windscreen: teal instrument glow with a warm underlight */
#gamecanvas {
  box-shadow:
    0 0 0 1px oklch(0.55 0.11 210 / .55),
    0 0 44px -8px oklch(0.68 0.16 210 / .45),
    0 18px 60px -20px oklch(0.5 0.14 250 / .5);
  border-radius: 12px;
  touch-action: none;              /* drag steering must not scroll the page */
}

/* stage ambience — headlight spill bleeding out beneath the canvas */
#stage {
  position: relative;
}
#stage::after {
  content: "";
  position: absolute;
  inset: auto 8% -14px 8%;
  height: 26px;
  background: radial-gradient(60% 100% at 50% 0%,
      oklch(0.72 0.15 85 / .34), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Camera view switch — floats over the top-right of the playfield. Injected by
   dash.js so no shared template changes. Keyboard users get the same job done
   with V, so this is a convenience, not the only route.
   ------------------------------------------------------------------------- */
.cam-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .4ch;
  padding: .42rem .72rem;
  min-height: 34px;
  border: 1px solid oklch(0.72 0.11 210 / .55);
  border-radius: 999px;
  background: oklch(0.18 0.03 250 / .72);
  color: oklch(0.94 0.03 210);
  font: 600 .78rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px -4px oklch(0.2 0.05 250 / .8);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.cam-btn:hover,
.cam-btn:focus-visible {
  background: oklch(0.26 0.06 210 / .85);
  border-color: oklch(0.8 0.14 210 / .8);
}
.cam-btn:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .cam-btn { top: 8px; right: 8px; padding: .4rem .6rem; font-size: .7rem; }
}

/* no motion? no transitions. */
body[data-fx="off"] .cam-btn { transition: none; }

/* HUD chain readout pops in game gold when a chain is live */
#s-chain {
  color: var(--gold, #fc3);
  text-shadow: 0 0 10px color-mix(in oklch, var(--gold, #fc3), transparent 55%);
  font-variant-numeric: tabular-nums;
}

/* respect the site-wide fx kill-switch: no glow theatrics when fx are off */
body[data-fx="off"] #gamecanvas { box-shadow: 0 0 0 1px oklch(0.45 0.06 285 / .5); }
body[data-fx="off"] #stage::after { display: none; }