/* ==========================================================================
   ARCADE TSUNAMI — BASE
   Reset, typography, layout primitives, and the arcade motif primitives
   (scanlines, bezel, coin divider, pixel wave).
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections clear the sticky header */
  scroll-padding-top: 96px;
}
/* Product pages stack a second sticky bar under the header, so anchors need
   to clear both or the section eyebrow lands behind the nav. */
html:has(.product-nav) { scroll-padding-top: 150px; }

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* A very faint vertical vignette. Sells "dark arcade room" without
     touching legibility anywhere text actually sits. */
  background-image:
    radial-gradient(120% 60% at 50% 0%,  rgba(240, 23, 154, 0.055), transparent 60%),
    radial-gradient(100% 55% at 50% 100%, rgba(34, 211, 238, 0.045), transparent 60%);
  background-attachment: fixed;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* --- HEADINGS -------------------------------------------------------------
   Chakra Petch. Angular and techy, but with real weights and true legibility
   — unlike the pixel face, which is quarantined to --font-display uses.     */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl);  letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: 600; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-md);
  color: var(--ink-dim);
  line-height: 1.6;
}

a {
  color: var(--cyan);
  text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: #67E8F9; text-decoration-color: currentColor; }

strong { font-weight: 600; color: var(--ink); }
small  { font-size: var(--fs-sm); }

/* --- FOCUS ----------------------------------------------------------------
   One ring, everywhere, no exceptions. Cyan at 9.8:1 is visible against every
   surface in the system.                                                    */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--cyan); color: #04121A;
  padding: var(--s-3) var(--s-5);
  font-weight: 700; border-radius: var(--r-md);
  z-index: 999; transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* --- TYPE ROLE UTILITIES -------------------------------------------------- */

/* The pixel face. Quarantined: wordmark, score numerals, contest initials.
   Never body, never below 3 words. Letter-spacing is mandatory — Press Start
   2P has almost no natural sidebearing and clumps without it. */
.pixel {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Section eyebrow: small mono caps above a heading. Used to carry the
   "system readout" feel that this audience responds to. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px;
  background: currentColor; box-shadow: var(--glow-cyan);
}
.eyebrow--magenta { color: var(--magenta); }
.eyebrow--amber   { color: var(--amber); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim  { color: var(--ink-dim); }
.faint{ color: var(--ink-faint); }

/* --- LAYOUT --------------------------------------------------------------- */
.wrap       { width: 100%; max-width: var(--wrap);       margin-inline: auto; padding-inline: var(--s-5); }
.wrap-wide  { width: 100%; max-width: var(--wrap-wide);  margin-inline: auto; padding-inline: var(--s-5); }
.wrap-prose { width: 100%; max-width: var(--wrap-prose); margin-inline: auto; padding-inline: var(--s-5); }

.section        { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section--loose { padding-block: var(--s-9); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.section-head { margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: var(--s-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   ARCADE MOTIF PRIMITIVES
   Structural, not sprinkled. Each has a documented restraint rule.
   ========================================================================== */

/* --- SCANLINES ------------------------------------------------------------
   RESTRAINT RULE: hero panels and image frames only. NEVER over running text
   — horizontal banding across a serif-free 17px paragraph is exactly the kind
   of low-grade visual noise that fatigues a 45-year-old eye.                */
.scanlines { position: relative; isolation: isolate; }
.scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.30) 0px, rgba(0, 0, 0, 0.30) 1px,
    transparent 1px, transparent 3px
  );
  opacity: 0.55;   /* ~4% effective attenuation */
}

/* --- CRT BEZEL ------------------------------------------------------------
   All product imagery sits in one. Inner shadow + vignette does the work of
   a curved glass tube without literally warping the photo.                  */
.bezel {
  position: relative;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  box-shadow:
    inset 0 0 44px rgba(0, 0, 0, 0.9),
    var(--glow-soft);
  overflow: hidden;
}
.bezel > img,
.bezel .bezel-screen {
  border-radius: var(--r-sm);
  width: 100%;
  display: block;
}
.bezel::before {
  /* corner vignette — the tube's edge falloff */
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.bezel--flush { padding: 0; }

/* --- COIN-SLOT DIVIDER ----------------------------------------------------
   RESTRAINT RULE: max 3 per page. It marks major section boundaries only. */
.coin-divider {
  display: flex; align-items: center; gap: var(--s-4);
  margin-block: var(--s-7);
}
.coin-divider::before,
.coin-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.coin-slot {
  flex: none;
  width: 52px; height: 10px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  border: 1px solid var(--line-bright);
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.95), 0 0 10px rgba(255,176,32,0.10);
}

/* --- PIXEL WAVE (the "tsunami") -------------------------------------------
   Brand identity mark. A stepped, deliberately aliased crest — the wave
   rendered as if it were a 1982 sprite.                                     */
.pixel-wave {
  width: 100%; height: 26px;
  background-repeat: repeat-x;
  background-size: 96px 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' shape-rendering='crispEdges'%3E%3Cg fill='%2322D3EE' opacity='.55'%3E%3Crect x='0' y='18' width='12' height='4'/%3E%3Crect x='12' y='14' width='12' height='4'/%3E%3Crect x='24' y='10' width='12' height='4'/%3E%3Crect x='36' y='6' width='12' height='4'/%3E%3Crect x='48' y='10' width='12' height='4'/%3E%3Crect x='60' y='14' width='12' height='4'/%3E%3Crect x='72' y='18' width='12' height='4'/%3E%3Crect x='84' y='22' width='12' height='4'/%3E%3C/g%3E%3Cg fill='%23F0179A' opacity='.40'%3E%3Crect x='0' y='22' width='12' height='4'/%3E%3Crect x='12' y='18' width='12' height='4'/%3E%3Crect x='24' y='14' width='12' height='4'/%3E%3Crect x='36' y='10' width='12' height='4'/%3E%3Crect x='48' y='14' width='12' height='4'/%3E%3Crect x='60' y='18' width='12' height='4'/%3E%3Crect x='72' y='22' width='12' height='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- NEON RAIL ------------------------------------------------------------
   A lit strip. Used under the marquee header and as a section accent.       */
.neon-rail {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--magenta) 18%, var(--violet) 42%,
    var(--cyan) 62%, transparent);
  box-shadow: 0 0 12px rgba(240,23,154,0.45), 0 0 22px rgba(34,211,238,0.30);
}