/* ==========================================================================
   V3 Game — Chrome Mirage
   assets/css/base.css
   Reset · typography · container & grid · focus · prose · surface primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

body {
  min-height: 100vh;
  background: var(--graphite);
  color: var(--chrome-mid);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: var(--iris-4); text-decoration: none; }
a:hover { color: var(--iris-1); }

hr { border: 0; height: 1px; background: var(--hairline); }

::selection { background: var(--iris-2); color: #0E1114; }

/* Ambient canvas sits behind everything, never intercepts pointer events */
#ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
}

/* Static fallback ground: brushed grain + one fixed sheen. Always painted,
   so the page reads as metal even when the canvas never starts. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      transparent 0%,
      rgba(255,255,255,.022) 34%,
      rgba(255,255,255,.045) 43%,
      rgba(255,255,255,.018) 52%,
      transparent 74%),
    var(--brushed);
}
body > * { position: relative; z-index: var(--z-base); }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--chrome-hi);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-stretch: 112%;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.28; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; font-stretch: 106%; }

strong, b { color: var(--chrome-hi); font-weight: 600; }

/* Kicker / eyebrow — mono, uppercase, wide track */
.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--chrome-lo);
  margin-bottom: var(--sp-3);
}

/* Section heading block */
.section-head { text-align: center; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head.is-left { text-align: left; }

.section-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-title);
  font-stretch: 118%;
}
.section-sub {
  margin: var(--sp-4) auto 0;
  max-width: 62ch;
  color: var(--chrome-mid);
  font-size: var(--fs-lead);
}
.section-head.is-left .section-sub { margin-left: 0; }

/* The single per-page iridescent headline. Solid colour declared first so a
   browser without background-clip:text still shows readable text. */
.iris-text {
  color: var(--chrome-hi);
  background: var(--iris-rim);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .iris-text { -webkit-text-fill-color: currentColor; background: none; }
}

/* Numeric readout face */
.readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--chrome-hi);
  letter-spacing: -0.01em;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 880px; }

section, .band { padding-block: var(--section-pad); }
.band-2 { background: var(--graphite-2); }
.band-flush { padding-block: 0; }

/* 12-column grid */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}
.col-12 { grid-column: span 12; }
@media (min-width: 900px) {
  .col-md-4 { grid-column: span 4; }
  .col-md-5 { grid-column: span 5; }
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
  .col-md-8 { grid-column: span 8; }
}

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.flow-center { display: flex; justify-content: center; }
.wrap-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wrap-center { justify-content: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: var(--z-progress);
  padding: 10px 18px; border-radius: var(--r-input);
  background: var(--plate); color: var(--chrome-hi);
  box-shadow: var(--bevel), var(--lift);
  transition: top var(--dur-ui) var(--ease-seat);
}
.skip-link:focus { top: var(--sp-4); }

/* ── Surface primitives ──────────────────────────────────────────────────── */

/* A raised, bevelled, brushed metal plate. The core of the whole system. */
.plate {
  position: relative;
  background-color: var(--plate);
  background-image: var(--brushed);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--bevel), var(--lift);
}

/* A channel milled into the surface — inverted bevel over the groove tone. */
.well {
  position: relative;
  background-color: var(--groove);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--bevel-in);
}

/* Chamfered plate — 14px 45° cut on two opposite corners. */
.chamfer {
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer));
}

/* ── Iridescent rim utility ──────────────────────────────────────────────────
   A 1px gradient ring drawn as a ::before with a mask composite that hollows
   the middle, so accent colour lives on the edge only — never as a fill.     */
.rim::before,
.rim-on-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--iris-rim);
  background-size: 240% 100%;
  background-position: var(--rim-shift, 0%) 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.rim-2::before { padding: 2px; }

.rim-on-hover::before {
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-seat),
              background-position var(--dur-slow) var(--ease-seat);
}
.rim-on-hover:hover::before,
.rim-on-hover:focus-within::before { opacity: 1; }

/* Hairline seam between bands — iridescent only in the centre stretch. */
.seam {
  height: 1px;
  border: 0;
  background: var(--seam);
  opacity: .85;
}

/* ── Focus ───────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--iris-4);
  outline-offset: 3px;
  border-radius: inherit;
}
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--iris-4);
  outline-offset: 3px;
}

/* ── Prose (long-form legal / guide copy) ────────────────────────────────── */
.prose { color: var(--chrome-mid); max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  margin-top: var(--sp-8);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: var(--track-title);
}
.prose h3 { margin-top: var(--sp-7); font-size: var(--fs-h3); }
.prose h4 { margin-top: var(--sp-6); color: var(--chrome-hi); }
.prose > :first-child { margin-top: 0; }
.prose p { line-height: var(--lh-body); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--iris-1); }

.prose blockquote {
  margin-left: 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-card);
  background-color: var(--groove);
  box-shadow: var(--bevel-in);
  color: var(--chrome-mid);
}

/* Tables scroll inside their own container — the page never scrolls sideways */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card);
  box-shadow: var(--bevel-in);
  background-color: var(--groove);
  border: 1px solid var(--hairline);
}
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}
th {
  color: var(--chrome-hi);
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  font-weight: 500;
}
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--chrome-hi); }