/* ============================================================
   Browser Classic Games Hub — v2 RESET
   Tokens & component specs from deliverables/09-design-v2-reset.md §3–§5.
   v1 (Route A "The Index") variable names kept; values replaced wholesale.
   Rules enforced here: hairline separation instead of color blocks,
   accent color only on text links / primary CTA / focus states,
   mono font only at the --fs-meta level, no gradients, no shadows.
   ============================================================ */

:root {
  /* color — neutral warm-white base + single accent */
  --bg: #FAF8F4;            /* warm white page base */
  --surface: #FFFFFF;       /* cards / inputs */
  --surface-2: #F2EEE7;     /* sparse: notice blocks, hover fills */
  --ink: #201D18;           /* body text (warm black) */
  --muted: #6E675B;         /* secondary text */
  --accent: #1F4FA3;        /* deep cobalt: links / CTA / focus only */
  --accent-ink: #FFFFFF;
  --accent-soft: #EBF0F9;   /* link hover wash, minimal dose */
  --ok: #2F7D4F;            /* status dots only */
  --warn: #A05A10;          /* status dots only */
  --risk: #A32B2B;          /* status dots only */
  --hairline: #E3DED4;      /* primary divider / outline */
  --hairline-strong: #CFC8BA; /* inputs, emphasized outlines */

  /* type — serif display × sans body × mono for meta only */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;   /* meta text only */
  --fs-h1: clamp(30px, 5vw, 42px);
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-meta: 12.5px;        /* mono meta: dates / counts / status lines */
  --fs-eyebrow: 12px;
  --lh-body: 1.6;
  --lh-title: 1.2;
  --tracking-eyebrow: 0.12em;

  /* space / shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --radius: 4px;            /* restrained near-square corners */
  --radius-chip: 999px;
  --border: 1px solid var(--hairline);
  --border-strong: 1px solid var(--hairline-strong);
  --shadow-card: none;      /* v2: paper feel comes from hairlines */

  /* layout */
  --container: 1080px;
  --measure: 68ch;          /* reading measure */
  --list-measure: 880px;    /* directory list width */
  --topbar-h: 56px;
  --icon-box: 40px;         /* entry icon box */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Single global focus style: accent ring, offset 2px (09 §5.2-A2 pattern). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-title);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); text-wrap: balance; /* avoids one-word orphan lines at 390px */ }
h2 { font-size: var(--fs-h2); margin-top: var(--sp-12); }
h3 { font-size: var(--fs-h3); }

/* QA-P2-1: anchor/scroll targets must clear the 56px sticky topbar.
   72px = var(--topbar-h) 56 + 16px breathing room (kept literal: smoke greps it). */
[data-bc-card], h2, h3, .bc-cards { scroll-margin-top: 72px; }

p { margin: 0 0 var(--sp-4); }
ul { margin: 0 0 var(--sp-4); padding-left: 1.2em; }
li { margin-bottom: var(--sp-2); }

.bc-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* ---------- top bar ---------- */
.bc-topbar {
  height: var(--topbar-h);
  border-bottom: var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.bc-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
/* Static serif wordmark — the v1 blinking cursor block was deleted (09 §5.1-D6). */
.bc-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.bc-wordmark:hover { color: var(--ink); }
.bc-wordmark__full {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--muted);
  border-left: var(--border);
  padding-left: var(--sp-3);
  margin-left: var(--sp-3);
}
.bc-nav { display: flex; gap: var(--sp-4); margin-left: auto; align-items: center; }
.bc-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.bc-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* Version stamp (09 §5.2-A3): mono meta, data-driven, two placements
   (topbar right end + above the directory list). */
.bc-stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  white-space: nowrap;
}
.bc-topbar .bc-stamp {
  border-left: var(--border);
  padding-left: var(--sp-6);
}
.bc-stamp--list { margin: 0 0 var(--sp-2); }

/* ---------- hero ---------- */
.bc-hero { max-width: 720px; padding: var(--sp-12) 0 var(--sp-8); }
.bc-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
  margin: 0 0 var(--sp-3);
  text-wrap: balance; /* 390px: wraps as two even lines, no orphan word */
}
.bc-hero__sub {
  max-width: 56ch;
  color: var(--ink);
  font-size: 17px;
  margin: 0 0 var(--sp-6);
}
.bc-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.bc-hero__cta { min-height: 48px; padding: 0 var(--sp-6); }
.bc-hero__secondary {
  font-size: var(--fs-small);
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target floor, 09 §4.2 */
}

/* ---------- search ---------- */
.bc-search {
  flex: 1 1 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--surface);
  border: var(--border-strong);
  border-radius: var(--radius);
  padding: 0 var(--sp-4);
  gap: var(--sp-3);
  color: var(--muted);
}
.bc-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bc-search__icon { display: inline-flex; flex: 0 0 auto; }
.bc-search__input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  width: 100%;
  height: 100%;
  color: var(--ink);
}
.bc-search__input::placeholder { color: var(--muted); }

/* ---------- filter chips ----------
   Selected state is solid ink (accent stays reserved for links/CTA). */
.bc-chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) 0 var(--sp-4);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* the cut-off chip + fade are the scroll affordance */
}
.bc-chips::-webkit-scrollbar { display: none; }
/* QA-P2-2: right-edge fade hints that the chip row scrolls horizontally.
   app.js toggles --more from real overflow measurements, so the fade only
   exists while chips are actually hidden (works at 390px and 1280px alike);
   with JS off the row still scrolls, just without the hint (PE baseline).
   prefers-reduced-motion: the global reduce block above kills the transition. */
.bc-chips-wrap { position: relative; }
.bc-chips-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgb(250 248 244 / 0), var(--bg) 90%);
  opacity: 0;
  transition: opacity 160ms ease;
}
.bc-chips-wrap--more::after { opacity: 1; }

.bc-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  border: var(--border);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  cursor: pointer;
  scroll-snap-align: start;
}
.bc-chip:hover { border-color: var(--hairline-strong); }
.bc-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}

/* ---------- GameCard shelf (Direction A, brief 12) ----------
   3-col card grid; each card = original 16:10 SVG artwork + serif title +
   one-liner + mono meta + hairline footer (status dot + Open ↗).
   Spec values from mockups/direction-a-game-cards.html (the visual source);
   colors/type stay on the v2 tokens above. */
.bc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: var(--sp-4) 0 var(--sp-6);
}
.bc-card {
  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: 10px; /* card-layer radius per Direction A source (v2 chrome stays 4px) */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 150ms ease, border-color 150ms ease;
}
.bc-card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); }
.bc-card__art { aspect-ratio: 16/10; display: block; width: 100%; }
.bc-card__art svg { display: block; width: 100%; height: 100%; }
.bc-card__body {
  padding: var(--sp-4) 18px var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.bc-card__title {
  font-size: 19px;
  font-weight: 600;
  line-height: var(--lh-title);
  margin: 0;
}
.bc-card__title a { color: var(--ink); text-decoration: none; }
/* Stretched link: the whole card points at the landing page while the
   external "Open ↗" link stays independently clickable above it. */
.bc-card__title a::after { content: ""; position: absolute; inset: 0; }
.bc-card:hover .bc-card__title,
.bc-card:hover .bc-card__title a { color: var(--accent); }
.bc-card__desc { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.bc-card__meta {
  font-family: var(--font-mono);
  font-size: 11.5px; /* card-layer meta per Direction A source */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
.bc-card__foot {
  border-top: var(--border);
  margin-top: 6px;
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.bc-card__open {
  position: relative;
  z-index: 1; /* above the stretched card link */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.bc-card__nolink { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 860px) { .bc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bc-cards { grid-template-columns: 1fr; } }

/* ---------- status dots (09 §5.2-A4) ---------- */
.bc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--ink);
  white-space: nowrap;
}
.bc-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.bc-status--ok i { background: var(--ok); }
.bc-status--warn i { background: var(--warn); }
.bc-status--risk i { background: var(--risk); }
.bc-status--muted { color: var(--muted); }
.bc-status--muted i { background: transparent; border: 1.5px solid var(--muted); box-sizing: border-box; }

/* ---------- buttons ---------- */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: var(--border);
}
.bc-btn:hover { text-decoration: none; }
.bc-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bc-btn--primary:hover { filter: brightness(0.92); color: var(--accent-ink); }
.bc-btn--ghost { background: var(--surface); color: var(--ink); }
.bc-btn--ghost:hover { border-color: var(--ink); }
.bc-btn--disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-style: dashed;
  cursor: not-allowed;
}

/* ---------- first-screen disclaimer strip (09 §5.2-A8) ----------
   Hairline top + bottom, muted small text. Position logic unchanged;
   the v1 color block with the 4px accent bar is gone (09 §5.1-D5). */
.bc-disclaimer {
  border-top: var(--border);
  border-bottom: var(--border);
  padding: var(--sp-3) 0;
  margin: var(--sp-4) 0 var(--sp-6);
  color: var(--muted);
  font-size: var(--fs-small);
}
.bc-disclaimer p { margin: 0; font-size: inherit; }

/* ---------- sections ---------- */
.bc-section { padding: var(--sp-8) 0; border-top: var(--border); }

/* Trust block (merged value props + house rules, per project-control):
   hairline-separated text rows, small-caps title + one body line. */
.bc-trust { border-bottom: var(--border); margin: var(--sp-6) 0; }
.bc-trust__row {
  border-top: var(--border);
  padding: var(--sp-4) 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-6);
}
.bc-trust__row h3 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}
.bc-trust__row p { margin: 0; color: var(--ink); }

/* How it works — large serif numerals, hairline-topped columns, no icon cards. */
.bc-steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); margin: var(--sp-6) 0; }
.bc-step { border-top: var(--border); padding-top: var(--sp-4); }
.bc-step__num {
  counter-increment: step;
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.bc-step__num::before { content: counter(step); }
.bc-step h3 { margin: 0 0 var(--sp-1); }
.bc-step p { margin: 0; font-size: var(--fs-small); color: var(--muted); }

/* ---------- TopicCard: browse by genre (09 §5.2-A6) ----------
   Outlined cards (border, no fill): serif count + name + one-line
   description + arrow. Click behaviour lives in app.js (chip wiring). */
.bc-topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-6);
}
.bc-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border: var(--border);
  border-radius: var(--radius);
  background: transparent;
  padding: var(--sp-4);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease;
}
.bc-topic:hover { border-color: var(--hairline-strong); }
.bc-topic__count { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: var(--lh-title); }
.bc-topic__name { font-weight: 500; font-size: var(--fs-small); }
.bc-topic__desc { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.bc-topic__go { position: absolute; top: var(--sp-4); right: var(--sp-4); color: var(--muted); }
.bc-topic:hover .bc-topic__go { color: var(--accent); }
@media (max-width: 1024px) { .bc-topics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bc-topics { grid-template-columns: 1fr; } }

/* ---------- FAQ ----------
   Serif question, hairline separation, "+" marker (sans) — no accordion
   color blocks, no mono chevron (09 §4.3-4). */
.bc-faq details { border-top: var(--border); }
.bc-faq details:last-child { border-bottom: var(--border); }
.bc-faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}
.bc-faq summary::-webkit-details-marker { display: none; }
.bc-faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--muted);
  transition: transform 150ms ease;
  flex: 0 0 auto;
}
.bc-faq details[open] summary::after { transform: rotate(45deg); }
.bc-faq details p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

/* ---------- landing layout ---------- */
/* QA-P2-3: short-viewport compression — top padding 32→24, eyebrow 12→8,
   H1→strip gap 16→12, strip margins 24→16. Gains ~32px of first screen at
   577px-tall viewports. Mobile keeps its own ≤640px strip override (sp-4),
   which now matches — no behaviour change there. */
.bc-landing {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8);
}
.bc-landing .bc-eyebrow { margin-bottom: var(--sp-2); }
.bc-landing h1 { margin-bottom: var(--sp-3); }
.bc-landing .bc-disclaimer { margin: var(--sp-4) 0; }
.bc-landing article p, .bc-landing article li { max-width: var(--measure); }
@media (max-width: 900px) { .bc-landing { grid-template-columns: 1fr; } }

/* Fact panel as "spec sheet" (09 §5.3): outlined box, hairline rows,
   small-caps dt, ink dd, mono for dates and load times. */
/* Direction A (brief 12): the rail also carries the entry's card artwork as
   the landing hero anchor. It sits OUTSIDE the sticky fact card so short
   viewports never trap the spec rows below the fold; disclaimer/CTA/fact
   positions in the article column are untouched. */
.bc-rail { min-width: 0; }
.bc-railart {
  border: var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: var(--sp-4);
}
.bc-railart svg { display: block; width: 100%; height: auto; }
.bc-factcard {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-6);
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-4));
  align-self: start;
}
@media (max-width: 900px) { .bc-factcard { position: static; } }
.bc-factcard dl { margin: 0; }
.bc-factcard__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: var(--border);
}
.bc-factcard__row:first-child { border-top: 0; }
.bc-factcard dt {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
}
.bc-factcard dd { margin: 0; font-size: var(--fs-small); text-align: right; overflow-wrap: anywhere; }

.bc-mono-meta { font-family: var(--font-mono); font-size: var(--fs-meta); }

/* Landing CTA — the one solid accent block allowed per page (09 §3 rule). */
.bc-ctabox {
  border-top: var(--border);
  border-bottom: var(--border);
  padding: var(--sp-6) 0;
  margin: var(--sp-8) 0;
}
.bc-ctabox .bc-btn--primary { min-height: 48px; padding: 0 var(--sp-6); font-size: 16px; }
.bc-ctabox__note { font-size: var(--fs-small); color: var(--muted); margin: var(--sp-3) 0 0; }

.bc-nolink {
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin: var(--sp-6) 0;
  background: var(--surface-2);
}

/* ---------- notice block (About these links / Unofficial notice) ---------- */
.bc-notice {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--sp-6);
  margin: var(--sp-8) 0;
}
.bc-notice h2 {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bc-notice p { max-width: var(--measure); font-size: var(--fs-small); }
.bc-notice p:last-child { margin-bottom: 0; }
/* Hairline-separated items inside one notice container (home "About these
   links" keeps its four v1 copy blocks, restyled per 09 §5.3). */
.bc-notice__item { border-top: var(--border); padding: var(--sp-4) 0; }
.bc-notice__item:first-of-type { border-top: 0; padding-top: 0; }
.bc-notice__item h3 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--sp-1);
}
.bc-notice__item p { margin: 0; }

/* ---------- footer ---------- */
.bc-footer {
  border-top: var(--border);
  margin-top: var(--sp-12);
  padding: var(--sp-8) 0 var(--sp-12);
}
.bc-footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.bc-footer nav a { color: var(--ink); font-size: var(--fs-small); }
.bc-footer__legal {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 80ch;
  margin: 0;
}

/* ---------- text pages (legal/about) ---------- */
.bc-pagehead { padding: var(--sp-12) 0 var(--sp-4); }
.bc-pagehead__sub { max-width: 56ch; color: var(--muted); margin: 0; }

.bc-prose { max-width: var(--measure); padding: var(--sp-8) 0; }
.bc-prose h2 { font-size: 20px; }
.bc-prose h3 { font-size: var(--fs-h3); }
.bc-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.bc-callout {
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-4) 0;
}
.bc-callout strong { color: var(--ink); }

/* ---------- misc ---------- */
.bc-muted { color: var(--muted); }
.bc-note { font-size: var(--fs-small); color: var(--muted); }
.bc-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;
}
.bc-grid-empty {
  font-size: var(--fs-small);
  color: var(--muted);
  padding: var(--sp-6);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius);
  display: none;
}
.bc-grid-empty.is-visible { display: block; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .bc-topbar .bc-stamp { display: none; }
  .bc-steps { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 640px) {
  .bc-wordmark__full { display: none; }
  .bc-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .bc-hero__actions { flex-direction: column; align-items: stretch; }
  .bc-hero__cta { width: 100%; }
  .bc-search { max-width: none; }
  .bc-chip { min-height: 44px; }
  .bc-disclaimer { margin: var(--sp-4) 0; }
  .bc-trust__row { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* GameCard mobile: the footer link keeps a 44px touch target
     (the grid itself collapses to one column at 560px, above). */
  .bc-card__open { min-height: 44px; }
}