/* ============================================================
   sega.css: the site's retro 16-bit arcade skin.

   CORRECTION. An earlier version of this header claimed Headbox
   ships no CSS and no design system. That was wrong: it was read
   from the CLI repo alone. The Console has a real, disciplined
   system, and it lives in assets/product.css, copied verbatim.

   So the split is: THIS file is the site's own chrome (nav, hero,
   cards, roadmap board). product.css is the PRODUCT's design system.
   The two never mix. Every reproduction sits inside a .product
   scope where the Console's tokens win. The cabinet is the site's;
   the screen is the product's.

   The arcade skin is invented for this gallery. It is not, and must
   never be read as, Headbox's visual design.

   This file loads no webfonts: its own type is the system stack, so
   the chrome stays CSP-clean and free. The Console's Inter and
   JetBrains Mono are loaded only for the .product reproductions,
   because that is what the real product renders in.
   ============================================================ */

:root {
  /* Mega Drive / Genesis-era palette. Hard, saturated, few steps. */
  --void:    #07091A;
  --deep:    #0B1026;
  --panel:   #121A38;
  --panel-2: #0E1430;
  --border:  rgba(120, 160, 255, .22);

  --blue:    #2038EC;   /* cabinet blue */
  --cyan:    #00D2FF;   /* consumed by site.css */
  --red:     #E62020;
  --gold:    #FFD700;   /* consumed by site.css */
  --green:   #00E676;
  --magenta: #FF3E9D;
  --purple:  #7C4DFF;

  --text:    #F2F5F7;
  --muted:   #8FA0C0;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", monospace;
  --disp: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, system-ui, sans-serif;

  /* Hard 16-bit corners: pixels don't round. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--disp);
  font-size: 15px;
  line-height: 1.55;
  /* Starfield + horizon glow, painted not imported (CSP-safe, no assets). */
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 8%,  rgba(255,255,255,.40) 50%, transparent 50%),
    radial-gradient(1px 1px at 84% 32%, rgba(255,255,255,.50) 50%, transparent 50%),
    radial-gradient(1px 1px at 34% 42%, rgba(255,255,255,.30) 50%, transparent 50%),
    radial-gradient(1200px 420px at 50% -8%, rgba(32,56,236,.30), transparent 70%);
  background-attachment: fixed;
}

/* ── pixel-step bevel: the one primitive everything reuses ───── */
.px {
  border: 2px solid var(--border);
  box-shadow:
    0 0 0 2px var(--void),
    0 4px 0 0 rgba(0,0,0,.55);
}

/* ── arcade display type ─────────────────────────────────────── */
.arcade {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Stacked hard shadow = 16-bit title lettering. No blur. */
  text-shadow: 2px 2px 0 var(--blue), 4px 4px 0 rgba(0,0,0,.65);
}

/* ── header ──────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: linear-gradient(180deg, var(--deep), var(--panel-2));
  border-bottom: 3px solid var(--blue);
  box-shadow: 0 3px 0 rgba(0,0,0,.6);
}
.nav .brand {
  font-family: var(--disp); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; font-size: 16px; color: var(--text);
  text-shadow: 2px 2px 0 var(--red);
  text-decoration: none; flex: none;
}
.nav .brand .sub {
  display: block; font-size: 8.5px; letter-spacing: .28em;
  color: var(--gold); text-shadow: none; font-weight: 700;
}
.nav .navlinks { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav .navlinks a {
  font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 7px 9px; border: 2px solid transparent;
}
.nav .navlinks a:hover { color: var(--text); border-color: var(--border); background: rgba(32,56,236,.22); }
.nav .navlinks a[aria-current="page"] { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,.10); }

.verbadge {
  font: 700 10px var(--mono); letter-spacing: .1em; color: var(--green);
  border: 2px solid rgba(0,230,118,.4); background: rgba(0,230,118,.10);
  padding: 5px 8px; flex: none;
}

/* site.css chrome, re-cut square and arcade-lettered */
.searchbtn, .reqbtn, .cardfb button, .btn { border-radius: 0 !important; font-family: var(--mono); }
.searchbtn kbd { border-radius: 0; }
.ovl-box { border-radius: 0 !important; border: 3px solid var(--blue) !important; box-shadow: 0 0 0 3px var(--void), 0 12px 0 rgba(0,0,0,.5) !important; }
.sx-item { border-radius: 0 !important; }
.sx-kind { border-radius: 0 !important; font-family: var(--mono); }

/* ── layout ──────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 30px 20px 90px; }

.phead { margin: 26px 0 30px; }
.phead h1 {
  font-family: var(--disp); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; font-size: 30px; margin: 0 0 10px;
  text-shadow: 3px 3px 0 var(--blue), 6px 6px 0 rgba(0,0,0,.6);
}
.phead p { margin: 0; color: var(--muted); max-width: 74ch; font-size: 14.5px; }

section { margin: 44px 0; }
section > h2 {
  font-family: var(--disp); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; font-size: 15px; margin: 0 0 8px;
  color: var(--gold); text-shadow: 2px 2px 0 rgba(0,0,0,.7);
  display: flex; align-items: center; gap: 10px;
}
section > h2::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background: var(--red); box-shadow: 3px 0 0 var(--gold), 6px 0 0 var(--green);
}
.sec-purpose { color: var(--muted); max-width: 78ch; margin: 0 0 20px; font-size: 13.5px; }

/* ── CRT screen: the product imagery lives in here ───────────── */
.crt {
  position: relative;
  background: #05060F;
  border: 2px solid var(--border);
  box-shadow: inset 0 0 60px rgba(32,56,236,.22), 0 4px 0 rgba(0,0,0,.55);
  padding: 14px 16px;
  overflow: hidden;
}
/* Scanlines. Decorative only: never obscures the text. */
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .55;
}
.crt pre {
  margin: 0; font: 12.5px/1.65 var(--mono);
  color: #C8FFD9; white-space: pre-wrap; word-break: break-word;
  text-shadow: 0 0 6px rgba(0,230,118,.35);
}
.crt .cmd { color: var(--gold); font-weight: 700; }
.crt .dim { color: #5C7A8C; }
.crt .ok  { color: var(--green); }
.crt .warn{ color: var(--gold); }
.crt .err { color: #FF6B6B; }
.crt .key { color: var(--cyan); }

/* Cabinet bar above a CRT */
.cabtop {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 2px solid var(--border); border-bottom: 0;
  padding: 7px 12px;
  font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.cabtop .dot { width: 9px; height: 9px; flex: none; }
.cabtop .dot.r { background: var(--red); }
.cabtop .dot.y { background: var(--gold); }
.cabtop .dot.g { background: var(--green); }
.cabtop .grow { flex: 1; }

/* ── component cards ─────────────────────────────────────────── */
/* align-items:start so a card sizes to its own content. Without it every card
   in a row stretches to the tallest one, which left short cards (a status line,
   a single pill) as mostly dead space next to a tall one. */
.lib { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }

.libcard {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 2px solid var(--border);
  box-shadow: 0 4px 0 rgba(0,0,0,.5);
  padding: 15px;
  transition: transform .08s steps(2), border-color .08s;
}
.libcard:hover { transform: translateY(-3px); border-color: rgba(0,210,255,.55); }

.libcap { margin-bottom: 12px; }
.libcap .e { font-size: 17px; }
.libcap .t {
  font-family: var(--disp); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; font-size: 13px; margin-top: 4px;
}
.libcap .d { color: var(--muted); font-size: 12.5px; margin-top: 5px; line-height: 1.5; }
.libcap .src {
  font: 10.5px var(--mono); color: #6C7FA8; margin-top: 7px;
  border-left: 3px solid var(--blue); padding-left: 7px; word-break: break-all;
}

.variants { display: grid; gap: 10px; }
.vlabel {
  font: 700 9px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.vbody { background: var(--void); border: 2px solid rgba(120,160,255,.14); padding: 10px; }

/* ── status chips: the honesty markers ──────────────────────── */
.chip {
  display: inline-block; font: 700 9px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 7px; border: 2px solid;
  vertical-align: middle;
}
.chip.shipped { color: var(--green);   border-color: rgba(0,230,118,.5);  background: rgba(0,230,118,.12); }
.chip.planned { color: var(--gold);    border-color: rgba(255,215,0,.5);  background: rgba(255,215,0,.12); }
.chip.progress{ color: var(--cyan);    border-color: rgba(0,210,255,.5);  background: rgba(0,210,255,.12); }
.chip.gap     { color: var(--red);     border-color: rgba(230,32,32,.55); background: rgba(230,32,32,.14); }
.chip.team    { color: var(--magenta); border-color: rgba(255,62,157,.5); background: rgba(255,62,157,.12); }
.chip.super   { color: var(--muted);   border-color: var(--border);       background: rgba(255,255,255,.05); }

/* ── hub stage-select cards ─────────────────────────────────── */
.shots { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.shotcard {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 2px solid var(--border); box-shadow: 0 4px 0 rgba(0,0,0,.5);
  overflow: hidden; transition: transform .08s steps(2), border-color .08s;
}
.shotcard:hover { transform: translateY(-3px); border-color: var(--gold); }
.shotcard.lead { grid-column: span 2; }
@media (max-width: 760px) { .shotcard.lead { grid-column: span 1; } }
.shotcard .thumb {
  height: 190px; overflow: hidden; background: #05060F;
  border-bottom: 2px solid var(--border); position: relative;
}
.shotcard .thumb iframe {
  width: 1280px; height: 800px; border: 0;
  transform: scale(.29); transform-origin: 0 0; pointer-events: none;
}
.shotcard.lead .thumb iframe { transform: scale(.58); }
.shotcard .cap { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.shotcard .cap .num {
  font: 800 15px var(--mono); color: var(--gold); flex: none;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7);
}
.shotcard .cap .t {
  font-family: var(--disp); font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; font-size: 12.5px;
}
.shotcard .cap .d { color: var(--muted); font-size: 12px; margin-top: 3px; }
.shotcard .cap .arrow { margin-left: auto; color: var(--cyan); flex: none; }

/* ── the stack ───────────────────────────────────────────────
   Replaces two separate sections that were doing the same job: a
   "four layers" explainer grid and a "component select" nav grid,
   both linking to the same four pages. One section now explains the
   architecture AND navigates it.

   Rendered as a real vertical stack rather than a card grid, for two
   reasons: the product genuinely IS layered (rules underneath, Live
   on top), and the page already spends three sections on grids. Rows
   read top-down as the stack reads: Live on top, Rules at the base. */
.stack { display: flex; flex-direction: column; }
.stack-row {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px; text-decoration: none; color: inherit;
  background: linear-gradient(90deg, var(--panel), var(--panel-2));
  border: 2px solid var(--border); border-bottom-width: 0;
  border-left: 5px solid var(--l, var(--blue));
  transition: background .1s, transform .08s steps(2);
}
.stack-row:last-child { border-bottom-width: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.5); }
.stack-row:hover { background: linear-gradient(90deg, #1A2450, var(--panel)); transform: translateX(3px); }
.stack-row:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.stack-row .t {
  font-family: var(--disp); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; font-size: 14px; color: var(--l, var(--text));
  flex: none; width: 92px;
}
.stack-row .d { color: var(--muted); font-size: 12.5px; line-height: 1.5; flex: 1; }
.stack-row .n {
  font: 700 10px var(--mono); color: var(--text); letter-spacing: .08em;
  flex: none; text-align: right;
}
.stack-row .arrow { color: var(--l, var(--cyan)); flex: none; font-size: 13px; }
@media (max-width: 640px) {
  .stack-row { flex-wrap: wrap; gap: 6px 12px; }
  .stack-row .t { width: auto; }
  .stack-row .d { flex: 1 0 100%; order: 3; }
}

/* ── callout: used for the honesty notices ──────────────────── */
.callout {
  border: 2px solid var(--gold); background: rgba(255,215,0,.07);
  padding: 14px 16px; margin: 22px 0;
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.callout.red { border-color: var(--red); background: rgba(230,32,32,.08); }
.callout h3 {
  margin: 0 0 7px; font: 800 11px var(--disp); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.callout.red h3 { color: #FF8A80; }
.callout p { margin: 0; color: #C4D2E8; font-size: 13px; }
.callout p + p { margin-top: 8px; }
.callout code { font: 11.5px var(--mono); color: var(--cyan); }

/* ── stat row ───────────────────────────────────────────────── */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 24px 0; }
.stat {
  background: var(--panel-2); border: 2px solid var(--border);
  box-shadow: 0 4px 0 rgba(0,0,0,.5); padding: 13px; text-align: center;
}
.stat .n {
  font: 800 26px var(--mono); color: var(--gold); line-height: 1;
  text-shadow: 2px 2px 0 var(--blue);
}
.stat .l {
  font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 7px;
}

/* ── roadmap board ──────────────────────────────────────────── */
.board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.col { background: var(--panel-2); border: 2px solid var(--border); box-shadow: 0 4px 0 rgba(0,0,0,.5); }
.col > h3 {
  margin: 0; padding: 11px 13px; border-bottom: 2px solid var(--border);
  font: 800 10.5px var(--disp); letter-spacing: .13em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.col > h3 .n { margin-left: auto; font: 700 10px var(--mono); color: var(--muted); }
.col .items { padding: 11px; display: grid; gap: 10px; }
.rcard { background: var(--panel); border: 2px solid var(--border); padding: 11px; }
.rcard:hover { border-color: rgba(0,210,255,.45); }
.rcard .t { font: 800 12px var(--disp); letter-spacing: .04em; }
.rcard .d { color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.5; }
.rcard .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tag { font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
       color: var(--muted); border: 1px solid var(--border); padding: 2px 5px; }
.col-empty { color: var(--muted); font: 11px var(--mono); padding: 14px; text-align: center; }

/* ── footer ─────────────────────────────────────────────────── */
.foot {
  border-top: 3px solid var(--blue); margin-top: 60px; padding: 22px 20px;
  color: var(--muted); font-size: 12px; text-align: center;
}
.foot .arcade { font-size: 10px; color: var(--gold); letter-spacing: .2em; }

/* ── motion ──────────────────────────────────────────────────
   Restrained on purpose. Two pieces, each with a reason:

   1. The blink on the hero CTA. One only, and it is the genre's own
      signature (a title screen waiting for input).
   2. A staggered reveal on the stack rows. Motivated by hierarchy:
      the rows ARE a stack, and revealing them in order says so. It
      runs on a scroll timeline so it needs no JS (the CSP forbids
      inline script) and no library.

   Nothing else moves. 154 component cards fading in on scroll would
   fight the one job this page has, which is letting you scan them. */
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.blink { animation: blink 1.05s steps(1, end) infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Only where the timeline is supported. Everywhere else the rows are
   simply visible, which is the correct fallback, not a broken one. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stack-row {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  .libcard, .shotcard, .stack-row, .layer { transition: none; }
}

/* Focus visibility survives the skin. */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}