/* Arcade skin for the game pages only (play.html hub, market-run.html, traders-trail.html).
   The rest of the site keeps the Tallowmere look from styles.css. Load this AFTER styles.css,
   plus the Google Fonts link for "Press Start 2P" and "Pixelify Sans" (see build-spec-v4.md).
   Everything here is scoped under .arcade so it never leaks into the shared header or footer. */

/* Pixelify Sans draws "5" like "S" and "2" like "Z", so "Finish in 50 s" read as "S0 s".
   Game copy borrows its digits 0-9 from Jersey 15, a pixel face with clear digits (same Google
   Fonts host). unicode-range keeps it to digits only; size-adjust lines them up with Pixelify's
   capitals; the weight range stops the browser smearing a fake bold onto the one weight. */
@font-face {
  font-family: "Arcade Digits";
  src: url(https://fonts.gstatic.com/s/jersey15/v4/_6_9EDzuROGsUuk2TWjiZYAg.woff2) format("woff2");
  unicode-range: U+0030-0039;
  size-adjust: 114%;
  font-weight: 100 900;
  font-display: swap;
}

.arcade {
  --arc-sky-1: #140f33;      /* deep indigo, top of the cabinet */
  --arc-sky-2: #2a1c6b;      /* violet, bottom of the cabinet */
  --arc-ink: #0b0820;        /* darkest panel fill */
  --arc-panel: #1d1650;      /* panel fill */
  --arc-panel-2: #2b2275;    /* raised panel */
  --arc-line: #5b4bd6;       /* pixel border */
  --arc-text: #fff6e0;       /* cream text */
  --arc-dim: #b9b0e8;        /* secondary text */
  --arc-up: #3dff8a;         /* green candle, rising */
  --arc-down: #ff3b5c;       /* red candle, sinking */
  --arc-sauce: #ff8a1f;      /* sauce orange, the one main action */
  --arc-sauce-hot: #ffb347;
  --arc-gold: #ffd23f;       /* coins, tendies, stars */
  --arc-cyan: #3fd8ff;       /* accents, links */
  --arc-px: 4px;             /* one chunky "pixel" for borders */
  --f-pixel: "Press Start 2P", "Courier New", monospace;   /* titles, buttons, HUD numbers */
  --f-ui: "Arcade Digits", "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;  /* readable game copy */

  color: var(--arc-text);
  font-family: var(--f-ui);
  font-size: 1.125rem;
  line-height: 1.5;
}
/* Pixelify Sans joins "fi" and "fl" into one glyph that looks like a capital A ("Reach the Aag",
   "You Anished"), so ligatures stay off everywhere in the arcade. !important because any page rule
   that sets type with the font shorthand would otherwise switch them back on for that element. */
.arcade,
.arcade * { font-variant-ligatures: none !important; }
/* styles.css turns "liga" on for headings; that low-level setting would win over the line above. */
.arcade :is(h1, h2, .display) { font-feature-settings: "liga" 0, "clig" 0, "dlig" 0; }

/* The cabinet: a bright section that sits on the dark page. */
.arc-cabinet {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(63, 216, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--arc-sky-1), var(--arc-sky-2));
  isolation: isolate;
}
/* Faint static scanlines; no animation, so reduced motion is unaffected. */
.arc-cabinet::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px);
}
.arc-cabinet > * { position: relative; z-index: 1; }

/* Chunky pixel panel: a stepped border drawn with box-shadow, no images. */
.arc-panel {
  background: var(--arc-panel);
  box-shadow:
    0 calc(var(--arc-px) * -1) 0 0 var(--arc-line),
    0 var(--arc-px) 0 0 var(--arc-line),
    calc(var(--arc-px) * -1) 0 0 0 var(--arc-line),
    var(--arc-px) 0 0 0 var(--arc-line),
    0 0 0 var(--arc-px) var(--arc-ink) inset;
  margin: var(--arc-px);
}
.arc-panel--raised { background: var(--arc-panel-2); }

.arc-title {
  font-family: var(--f-pixel);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--arc-text);
  text-shadow: 0 var(--arc-px) 0 var(--arc-ink);
}
.arc-kicker {
  font-family: var(--f-pixel);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--arc-gold);
}

/* Arcade button: the main action is sauce orange; .arc-btn--alt is the quieter one. */
.arc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; min-width: 48px;
  padding: .85em 1.3em;
  border: 0; border-radius: 0;
  font-family: var(--f-pixel);
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a0d02;
  background: var(--arc-sauce);
  box-shadow:
    0 calc(var(--arc-px) * -1) 0 0 var(--arc-ink),
    0 var(--arc-px) 0 0 var(--arc-ink),
    calc(var(--arc-px) * -1) 0 0 0 var(--arc-ink),
    var(--arc-px) 0 0 0 var(--arc-ink),
    0 calc(var(--arc-px) * -1) 0 0 rgba(255, 255, 255, .35) inset,
    0 var(--arc-px) 0 0 rgba(0, 0, 0, .25) inset;
  cursor: pointer;
  transition: transform .08s steps(2), background-color .12s;
}
.arc-btn:hover { background: var(--arc-sauce-hot); }
.arc-btn:active { transform: translateY(2px); }
.arc-btn:focus-visible { outline: 3px solid var(--arc-cyan); outline-offset: 6px; }
.arc-btn--alt { background: var(--arc-panel-2); color: var(--arc-text); }
.arc-btn--alt:hover { background: var(--arc-line); }
.arc-btn[disabled], .arc-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.arc-link { color: var(--arc-cyan); text-underline-offset: .2em; }
.arc-link:hover { color: var(--arc-text); }

.arc-up { color: var(--arc-up); }
.arc-down { color: var(--arc-down); }
.arc-gold { color: var(--arc-gold); }

/* Pixel art canvases stay crisp when scaled. */
.arc-pixels { image-rendering: pixelated; image-rendering: crisp-edges; }

@media (prefers-reduced-motion: reduce) {
  .arc-btn { transition: none; }
}