/* ==========================================================================
   GameZone Catalog — single stylesheet. Mobile-first, no framework.

   The idea is a well-kept catalogue: a deep blue-petrol ink for the structural
   bands, warm paper for reading, one teal accent for actions and markers.
   Every entry carries an accession number set in mono; a barcode-style tick
   strip does the structural dividing; navigation and genres are index tabs.

   Typefaces (self-hosted, SIL OFL, see assets/fonts/LICENSE-*.txt):
     Archivo (variable wght + wdth) — display, condensed for headings
     IBM Plex Mono — accession numbers, labels, spec sheets
     Inter — body text
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.woff2?v=a88bc88e") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-500.woff2?v=6c54e3eb") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-600.woff2?v=15f06984") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700.woff2?v=404543f3") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url("/assets/fonts/archivo-var.woff2?v=613601f4") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/plex-mono-500.woff2?v=63f9851e") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/plex-mono-600.woff2?v=e42bd72e") format("woff2"); }

:root {
  color-scheme: light;

  /* structure */
  --ink: #10323d;
  --ink-deep: #0a222b;
  --ink-line: #225666;
  --ink-line-soft: #1a4453;

  /* paper */
  --paper: #f4f1ea;
  --paper-2: #ebe6db;
  --card: #fffdf8;
  --line: #ddd6c7;
  --line-2: #c4baa5;

  /* text */
  --text: #15262d;
  --muted: #56656d;
  --on-dark: #edf3f2;
  --on-dark-mu: #a9bfc5;

  /* accent */
  --accent: #0a7c74;
  --accent-dark: #055c55;
  --accent-bright: #3cc0b2;
  --accent-soft: #d9ece9;
  --warn: #92491a;
  --warn-soft: #f5e7da;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(16, 50, 61, 0.07), 0 10px 28px -14px rgba(16, 50, 61, 0.28);
  --shadow-lg: 0 2px 4px rgba(16, 50, 61, 0.08), 0 24px 48px -24px rgba(16, 50, 61, 0.4);
  --container: 1160px;
  --measure: 700px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.12;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.1rem, 1.45rem + 2.9vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.05rem); }
h3 { font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem); }
h4 { font-size: 1.0625rem; }

p, ul, ol, dl { margin: 0; }
p + p { margin-top: var(--s4); }
a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); text-decoration-thickness: 2px; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
small, .small { font-size: 0.875rem; line-height: 1.45; }
.muted { color: var(--muted); }
strong { font-weight: 600; }
time { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.masthead :focus-visible, .section--method :focus-visible, .cta :focus-visible,
.footer :focus-visible, .game-top :focus-visible, .header :focus-visible,
.verdict :focus-visible { outline-color: var(--accent-bright); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: var(--s3) var(--s5); background: var(--accent); color: #fff; font-weight: 600; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: var(--s3); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--s5)); margin-inline: auto; padding-inline: var(--s4); }
.container--narrow { max-width: calc(var(--measure) + 2 * var(--s5)); }
@media (min-width: 768px) { .container { padding-inline: var(--s5); } }

/* ---------- The tick strip: the structural barcode motif ---------- */
.tick-strip {
  --tick: var(--accent);
  height: 8px;
  width: 100%;
  background-image: repeating-linear-gradient(90deg,
    var(--tick) 0 3px, transparent 3px 8px,
    var(--tick) 8px 9px, transparent 9px 14px,
    var(--tick) 14px 17px, transparent 17px 19px,
    var(--tick) 19px 20px, transparent 20px 27px,
    var(--tick) 27px 29px, transparent 29px 33px,
    var(--tick) 33px 34px, transparent 34px 40px);
}
.tick-strip--flip { transform: scaleX(-1); }
.tick-strip--inline { display: block; height: 7px; --tick: var(--line-2); margin-top: var(--s4); }

/* ---------- Shared type devices ---------- */
.kicker {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--s3);
}
.kicker--light { color: var(--accent-bright); }

.tab {
  display: inline-block;
  padding: 5px var(--s3) 4px;
  border: 1px solid var(--line-2);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card);
  box-shadow: 0 1px 0 var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
  max-width: 100%;
}
.tab--solid { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 0 var(--accent-dark); }

.badge {
  display: inline-block;
  padding: 4px var(--s3);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid rgba(146, 73, 26, 0.3);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the accession-number plate that sits on a cover */
.entry__no {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--paper);
  border-top: 3px solid var(--accent);
  border-radius: 0 var(--radius) 0 var(--radius-lg);
  font-family: var(--mono);
  line-height: 1;
}
.entry__no span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.entry__no strong { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 600; letter-spacing: 0.02em; color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px; padding: var(--s2) var(--s5);
  border-radius: var(--radius); border: 2px solid transparent;
  font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: 0.95rem;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.btn--outline { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); background: rgba(16, 50, 61, 0.05); }
.btn--ghost { background: transparent; border-color: var(--ink-line); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); background: rgba(60, 192, 178, 0.1); }
.btn--large { min-height: 54px; padding-inline: var(--s6); font-size: 1.0625rem; }
.btn--sm { min-height: 44px; padding-inline: var(--s4); font-size: 0.875rem; }
.btn--block { width: 100%; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 0.16em; }

/* ---------- Tags ---------- */
.tags { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  display: inline-block; padding: 3px var(--s3);
  border: 1px solid var(--ink-line); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--on-dark-mu);
}

/* ---------- Spec sheets (the shared "same facts, same place" device) ---------- */
.spec { display: grid; gap: 0; font-size: 0.875rem; }
.spec > div { display: grid; gap: 1px; padding-block: var(--s3); border-top: 1px solid var(--line); }
.spec > div:first-child { border-top: 0; padding-top: 0; }
.spec dt { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; overflow-wrap: break-word; line-height: 1.45; }
@media (min-width: 560px) {
  .spec--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .spec--row > div, .spec--row > div:first-child { border-top: 2px solid var(--ink); padding-top: var(--s3); }
}

/* ---------- Header ---------- */
.header { position: relative; background: var(--ink); color: var(--on-dark); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--on-dark); text-decoration: none; padding-block: var(--s2); }
.brand__mark { display: inline-flex; color: var(--accent); flex: none; }
.brand__text { display: grid; gap: 2px; min-width: 0; }
.brand__name { font-family: var(--display); font-weight: 800; font-stretch: 84%; font-size: 1.2rem; letter-spacing: -0.005em; line-height: 1.05; color: #fff; }
.brand__sub { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-mu); }
.brand:hover .brand__name { color: var(--accent-bright); }
.brand--footer .brand__name { font-size: 1.1rem; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s2); flex: none;
  min-height: 44px; min-width: 44px; padding: var(--s2) var(--s3);
  background: none; border: 1px solid var(--ink-line); border-radius: var(--radius);
  color: var(--on-dark); cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-toggle:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.nav-toggle__bar { position: relative; width: 17px; height: 2px; background: currentColor; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }
.nav-toggle__bar::before, .nav-toggle__bar::after { transition: transform 180ms ease, top 180ms ease; }

.js .nav { display: none; }
.no-js .nav-toggle { display: none; }
.no-js .header__inner { flex-wrap: wrap; }
.no-js .nav { flex-basis: 100%; }
.js .nav--open { display: block; }
.nav--open {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--ink-deep); border-top: 1px solid var(--ink-line);
  box-shadow: 0 20px 40px -16px rgba(10, 34, 43, 0.65);
  max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain;
}
.nav__list { list-style: none; margin: 0; padding: var(--s2) var(--s4) var(--s4); display: flex; flex-direction: column; }
.nav__link {
  display: flex; align-items: center; padding: var(--s3) var(--s2); min-height: 48px;
  color: var(--on-dark); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-stretch: 92%; font-size: 1.0625rem;
  border-bottom: 1px solid var(--ink-line-soft);
}
.nav__link:hover { color: var(--accent-bright); }
.nav__link[aria-current="page"] { color: var(--accent-bright); }
@media (min-width: 1024px) {
  .no-js .header__inner { flex-wrap: nowrap; }
  .no-js .nav { flex-basis: auto; }
  .header__inner { min-height: 78px; align-items: stretch; }
  .brand { align-self: center; }
  .nav-toggle { display: none; }
  .nav, .js .nav { display: flex; align-items: flex-end; position: static; box-shadow: none; border: 0; background: none; }
  .nav__list { flex-direction: row; gap: 2px; padding: 0; align-items: flex-end; }
  /* index tabs along the bottom edge of the header */
  .nav__link {
    border-bottom: 0;
    padding: var(--s3) var(--s4) 11px;
    min-height: 44px;
    font-size: 0.9375rem;
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid transparent;
    border-bottom: 0;
    position: relative;
    top: 1px;
  }
  .nav__link:hover { background: rgba(60, 192, 178, 0.12); border-color: var(--ink-line); }
  .nav__link[aria-current="page"], .nav__link[aria-current="page"]:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
}

/* ---------- Masthead ---------- */
.masthead { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.masthead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 120% at 88% 0%, rgba(60, 192, 178, 0.15), transparent 62%),
    repeating-linear-gradient(90deg, rgba(237, 243, 242, 0.04) 0 1px, transparent 1px 56px);
}
.masthead__inner { position: relative; z-index: 1; display: grid; gap: var(--s6); padding-block: var(--s7) var(--s8); }
.masthead__title { color: #fff; font-weight: 800; font-stretch: 82%; max-width: 15ch; }
.masthead__title, .section__title, .cta__title { text-wrap: balance; }
.masthead__lead { margin-top: var(--s4); font-size: 1.125rem; line-height: 1.62; color: var(--on-dark); max-width: 52ch; }
.masthead__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
@media (min-width: 980px) {
  .masthead__inner { grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.85fr); gap: var(--s8); align-items: center; padding-block: var(--s8) var(--s9); }
}

/* the site's own record card */
.record-card {
  background: var(--paper); color: var(--text);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--accent);
}
.record-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); margin-bottom: var(--s3); }
.record-card__label { font-family: var(--display); font-weight: 800; font-stretch: 84%; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; }
.record-card__code { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); }
.record-card__list { display: grid; font-size: 0.9rem; }
.record-card__list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding-block: var(--s3); border-bottom: 1px dashed var(--line-2); }
.record-card__list > div:last-child { border-bottom: 0; }
.record-card__list dt { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.record-card__list dd { margin: 0; line-height: 1.4; }
@media (min-width: 420px) {
  .record-card__list > div { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
}

/* Original editorial artwork, kept separate from the catalogue content. */
.masthead__record { min-width: 0; }
.masthead__art {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--ink-line); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 18px 60px -20px rgba(0, 0, 0, 0.5);
}
.masthead__record .record-card { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.masthead__record .record-card__list > div { padding-block: var(--s2); }
.masthead::before {
  content: ""; position: absolute; width: 36rem; height: 36rem; right: -12rem; top: -14rem;
  background: radial-gradient(circle, rgba(60, 192, 178, 0.16), transparent 68%);
  pointer-events: none;
}
.section--pick, .section--faq {
  background-image: radial-gradient(ellipse at 0 0, rgba(10, 124, 116, 0.045), transparent 65%);
}
.method-intro { display: grid; gap: var(--s6); align-items: center; }
.method-intro__art {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
}
.cta__art {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); margin-bottom: var(--s5);
}
@media (min-width: 900px) {
  .method-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s8); }
}
@media (prefers-reduced-motion: no-preference) {
  .masthead__text, .masthead__record { animation: catalogue-appear 650ms ease-out both; }
  .masthead__record { animation-delay: 100ms; }
  .masthead::before { animation: catalogue-glow 14s ease-in-out infinite alternate; }
  .index__row { transition: background-color 220ms ease; }
  .index__row:hover { background-color: rgba(255, 253, 248, 0.5); }
  .method-intro__art, .cta__art { transition: filter 250ms ease; }
  .method-intro__art:hover, .cta__art:hover { filter: brightness(1.05); }
  @keyframes catalogue-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes catalogue-glow { from { transform: translate(0, 0); } to { transform: translate(-40px, 30px); } }
}
@media print { .masthead__art, .method-intro__art, .cta__art { display: none; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--s7); }
@media (min-width: 1024px) { .section { padding-block: var(--s8); } }
.section--index { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--method { background: var(--ink); color: var(--on-dark); }
.section--method .section__title { color: #fff; }
.section__head { margin-bottom: var(--s6); }
.section__title { max-width: 22ch; }
.section__lead { margin-top: var(--s4); color: var(--muted); max-width: 60ch; font-size: 1.0625rem; }
.section__lead--light { color: var(--on-dark-mu); }
.section__note { margin-top: var(--s4); color: var(--muted); max-width: 46ch; font-size: 0.9375rem; }
.section--method .section__note { color: var(--on-dark-mu); }
@media (min-width: 900px) {
  .section__head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s7); align-items: end; }
  .section__head--split .section__note { margin-top: 0; padding-bottom: 6px; }
}

/* ---------- Featured entry (No. 001) ---------- */
.entry { display: grid; gap: var(--s5); }
.entry__plate { position: relative; }
.entry__plate img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
}
.entry__plate { overflow: hidden; border-radius: var(--radius-lg); }
.entry__plate img { aspect-ratio: 8 / 5; object-fit: cover; }
.entry__body { display: grid; gap: 0; align-content: start; }
.entry__body > .tab { justify-self: start; }
.entry__name { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.entry__name a { color: var(--text); text-decoration: none; }
.entry__name a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.1em; }
.entry__tagline { margin-top: var(--s3); font-family: var(--display); font-weight: 600; font-stretch: 92%; font-size: 1.2rem; line-height: 1.35; color: var(--accent-dark); }
.entry__summary { margin-top: var(--s3); color: #24363e; }
.entry .spec { margin-top: var(--s5); }
.entry__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.entry__note { margin-top: var(--s3); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
@media (min-width: 900px) {
  .entry { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: var(--s7); align-items: center; }
}

/* ---------- The index ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.index__row { display: grid; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--line-2); grid-template-areas: "no" "thumb" "main" "spec"; }
.index__no { grid-area: no; display: flex; align-items: baseline; gap: var(--s2); font-family: var(--mono); line-height: 1; }
.index__no span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.index__no strong { font-size: 1.5rem; font-weight: 600; color: var(--accent-dark); }
.index__no::after { content: ""; flex: 1; height: 1px; background: var(--line-2); align-self: center; }
.index__thumb { display: block; grid-area: thumb; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: var(--ink); }
.index__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.35s ease; }
.index__row:hover .index__thumb img { transform: scale(1.035); }
.index__main { grid-area: main; display: grid; gap: 0; align-content: start; }
.index__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.index__name { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.index__name a { color: var(--text); text-decoration: none; }
.index__name a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 0.1em; }
.index__summary { margin-top: var(--s3); color: #24363e; font-size: 0.9375rem; }
.index__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.index__spec { grid-area: spec; align-content: start; }
.index--full { margin-top: var(--s5); }
@media (min-width: 900px) {
  .index__row {
    grid-template-columns: 76px minmax(0, 212px) minmax(0, 1fr) minmax(0, 196px);
    grid-template-areas: "no thumb main spec";
    gap: var(--s5);
    align-items: start;
    padding-block: var(--s6);
  }
  .index__no { display: grid; gap: 3px; align-content: start; padding-top: 2px; }
  .index__no::after { display: none; }
  .index__no strong { font-size: 1.75rem; }
  .index__spec { border-left: 1px solid var(--line-2); padding-left: var(--s5); }
}

/* ---------- Disclosure / callouts ---------- */
.disclosure {
  margin-top: var(--s6); padding: var(--s4) var(--s5);
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem; line-height: 1.6; color: #33454d;
}
.disclosure--inline { margin-top: var(--s7); }
.callout { padding: var(--s5); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); }
.callout__title { font-family: var(--display); font-weight: 700; font-stretch: 90%; font-size: 1.1rem; margin-bottom: var(--s2); }
.callout--soft { background: var(--accent-soft); border-color: rgba(10, 124, 116, 0.25); border-left-color: var(--accent); }
.prose .callout { margin-top: var(--s5); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

/* ---------- Method band ---------- */
.method { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.method__step { padding-top: var(--s4); border-top: 2px solid var(--ink-line); }
.method__no { font-family: var(--mono); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.16em; color: var(--accent-bright); margin-bottom: var(--s3); }
.method__title { font-size: 1.1875rem; color: #fff; font-stretch: 92%; }
.method__text { margin-top: var(--s2); color: var(--on-dark-mu); font-size: 0.9375rem; }
.method__more { margin-top: var(--s6); }
@media (min-width: 700px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); } }
@media (min-width: 1024px) { .method { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s2); margin-top: var(--s5); }
.faq__item { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); }
.faq__item[open] { border-color: var(--line-2); box-shadow: var(--shadow); }
.faq__question {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s4); min-height: 54px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-stretch: 92%; font-size: 1.0625rem;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "+" / ""; flex: none; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-family: var(--mono); font-weight: 500; color: var(--accent-dark);
}
.faq__item[open] .faq__question::after { content: "–" / ""; background: var(--accent); border-color: var(--accent); color: #fff; }
.faq__answer { padding: 0 var(--s4) var(--s4); color: #33454d; }
.faq__answer p { max-width: 68ch; }

/* ---------- Closing call ---------- */
.cta { background: var(--ink-deep); color: var(--on-dark); }
.cta__inner { display: grid; gap: var(--s6); }
.cta__title { color: #fff; max-width: 16ch; font-weight: 800; font-stretch: 82%; }
.cta__text { margin-top: var(--s4); color: var(--on-dark-mu); max-width: 50ch; }
.cta .btn--primary { margin-top: var(--s6); }
.cta__aside { padding: var(--s5); border: 1px solid var(--ink-line); border-left: 4px solid var(--accent-bright); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.9375rem; color: var(--on-dark-mu); }
.cta__aside-title { font-family: var(--mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: var(--s3); }
.cta__aside a { color: #fff; }
.cta__aside a:hover { color: var(--accent-bright); }
@media (min-width: 900px) { .cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--s8); align-items: center; } }

/* ---------- Breadcrumb / page header / article ---------- */
.breadcrumb { padding-block: var(--s3); font-size: 0.8125rem; }
.breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); font-family: var(--mono); letter-spacing: 0.04em; }
.breadcrumb__list li + li::before { content: "/" / ""; margin-right: var(--s2); color: var(--line-2); }
.breadcrumb a { color: var(--muted); display: inline-block; padding-block: var(--s2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; }
.main--game > .breadcrumb { display: none; }

.page-header { padding-block: var(--s6); }
.page-header__title { max-width: 20ch; }
.page-header__lead { margin-top: var(--s4); font-size: 1.125rem; max-width: 58ch; color: #24363e; }
.page-header__meta { display: grid; gap: var(--s3); margin-top: var(--s5); font-size: 0.875rem; }
.page-header__meta > div { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.page-header__meta dt { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.page-header__meta dd { margin: 0; }
@media (min-width: 640px) { .page-header__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

.article { padding-bottom: var(--s8); }
.article__header { padding-block: var(--s5); border-bottom: 2px solid var(--ink); margin-bottom: var(--s6); }
.article__lead { margin-top: var(--s4); font-size: 1.125rem; max-width: 58ch; color: #24363e; }
.article__meta { margin-top: var(--s4); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.article__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.article__layout > * { min-width: 0; }
.toc { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: var(--s4) var(--s5) var(--s5); font-size: 0.9375rem; }
.toc__title { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; }
.toc__list li { counter-increment: toc; border-top: 1px dashed var(--line); padding-block: var(--s2); }
.toc__list li:first-child { border-top: 0; }
.toc__list li::before { content: counter(toc, decimal-leading-zero) "  " / ""; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--accent-dark); }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent-dark); text-decoration: underline; }
@media (min-width: 1024px) {
  .article__layout { grid-template-columns: 258px minmax(0, var(--measure)); gap: var(--s8); align-items: start; }
  .toc { position: sticky; top: var(--s4); }
}

/* ---------- Prose ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s7); scroll-margin-top: var(--s5); padding-top: var(--s4); border-top: 2px solid var(--ink); }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: var(--s2); }
.prose li { min-width: 0; overflow-wrap: anywhere; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--paper-2); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--s4); }
.list-check, .list-watch { list-style: none; padding-left: 0; }
.list-check li, .list-watch li { position: relative; padding-left: 1.9rem; }
.list-check li::before, .list-watch li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 600; }
.list-check li::before { content: "+" / ""; color: var(--accent); }
.list-watch li::before { content: "!" / ""; color: var(--warn); }
.steps { list-style: none; padding-left: 0; counter-reset: step; display: grid; gap: var(--s4); }
.steps li { position: relative; padding-left: 3.2rem; }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero) / "";
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-weight: 600; font-size: 0.95rem; color: var(--accent-dark);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

/* ---------- Game (catalogue entry) page ---------- */
.game-top { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.game-top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 100% at 14% 0%, rgba(60, 192, 178, 0.14), transparent 60%);
}
.game-head { position: relative; z-index: 1; display: grid; gap: var(--s5); padding-block: var(--s6) var(--s7); }
.game-head__plate { position: relative; }
.game-head__plate img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--ink-line); box-shadow: var(--shadow-lg); }
.game-head__plate .entry__no { background: var(--ink-deep); border-top-color: var(--accent-bright); }
.game-head__plate .entry__no span { color: var(--on-dark-mu); }
.game-head__plate .entry__no strong { color: #fff; }
.game-head__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.game-head__eyebrow .tab { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); }
.game-head__title { margin-top: var(--s4); color: #fff; font-weight: 800; font-stretch: 82%; }
.game-head__tagline { margin-top: var(--s3); font-family: var(--display); font-weight: 600; font-stretch: 92%; font-size: 1.2rem; line-height: 1.35; color: var(--accent-bright); }
.game-head__summary { margin-top: var(--s4); color: var(--on-dark); max-width: 56ch; }
.game-head__actions { margin-top: var(--s5); }
.game-head__note, .game-head__meta { margin-top: var(--s3); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--on-dark-mu); line-height: 1.55; }
@media (min-width: 900px) {
  .game-head { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); gap: var(--s7); align-items: center; padding-block: var(--s7) var(--s8); }
}

/* Layout: the record comes first in the DOM, so the facts and the primary action are
   near the top of a phone screen. The desktop sidebar is grid placement only. */
.game__layout { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s8); grid-template-areas: "rec" "main" "more"; }
.game__record { grid-area: rec; }
.game__main { grid-area: main; }
.game__more { grid-area: more; }
@media (min-width: 1040px) {
  .game__layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "main rec" "main more" "main .";
    gap: var(--s6) var(--s8);
    align-items: start;
    padding-block: var(--s7) var(--s9);
  }
}

.record { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow); position: relative; }
.record__tab {
  position: absolute; top: 0; right: var(--s5); transform: translateY(-100%);
  padding: 4px var(--s3); background: var(--accent); color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1em;
}
.record__title { font-size: 1.25rem; padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); }
.record__list { display: grid; font-size: 0.875rem; margin-top: var(--s2); }
.record__list > div { display: grid; gap: 1px; padding-block: var(--s3); border-bottom: 1px dashed var(--line); }
.record__list dt { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.record__list dd { margin: 0; overflow-wrap: break-word; line-height: 1.45; }
.record .btn { margin-top: var(--s5); }
.record__note { margin-top: var(--s3); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--muted); line-height: 1.55; }
@media (min-width: 520px) and (max-width: 1039px) {
  .record__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
}

.verdict { background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--s5); border-left: 5px solid var(--accent-bright); }
.verdict__kicker { font-family: var(--mono); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: var(--s2); }
.verdict h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.35rem; color: #fff; }
.verdict p { margin-top: var(--s3); color: var(--on-dark); }
.prose > .verdict + * { margin-top: var(--s6); }

.pros-cons { display: grid; gap: var(--s5); margin-top: var(--s7); }
.pros-cons__col { padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.pros-cons h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.2rem; }
.pros-cons ul { margin-top: var(--s3); }
@media (min-width: 700px) { .pros-cons { grid-template-columns: 1fr 1fr; } }

.more__title { font-size: 1.1rem; padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); }
.more__list { list-style: none; margin: 0; padding: 0; }
.more__list li { border-bottom: 1px solid var(--line); }
.more__list a { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; min-height: 48px; text-decoration: none; color: var(--text); }
.more__list a:hover .more__name { color: var(--accent-dark); text-decoration: underline; }
.more__num { font-family: var(--mono); font-weight: 600; font-size: 0.8rem; color: var(--accent-dark); flex: none; }
.more__body { display: grid; gap: 1px; min-width: 0; }
.more__name { font-family: var(--display); font-weight: 600; font-stretch: 92%; font-size: 1rem; }
.more__genre { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Forms ---------- */
.contact__layout { display: grid; gap: var(--s6); padding-bottom: var(--s8); }
@media (min-width: 1024px) { .contact__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: start; } }
.contact__aside { display: grid; gap: var(--s4); }
.form { display: grid; gap: var(--s5); max-width: 560px; }
.form__field { display: grid; gap: var(--s2); }
.form label { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text); }
.form__hint { color: var(--muted); font-family: var(--font); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.form input, .form textarea { width: 100%; min-height: 48px; padding: var(--s3); font-size: 1rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.form textarea { min-height: 170px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: #a3231b; }
.form__error { color: #8c1e17; font-size: 0.875rem; }
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__legal { font-size: 0.875rem; color: var(--muted); }
.notice { padding: var(--s4); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--s5); background: var(--card); }
.notice--success { background: var(--accent-soft); }
.notice--error { border-left-color: #a3231b; background: #fbeeec; }
.notice ul { margin: var(--s2) 0 0; padding-left: 1.25rem; }

.error-page { padding-block: var(--s8) var(--s9); }
.error-page__code { font-family: var(--mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--s4); }
.error-page .tick-strip--inline { margin-top: var(--s5); max-width: 260px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--on-dark-mu); padding-block: 0 var(--s6); font-size: 0.9375rem; }
.footer .container { padding-top: var(--s7); }
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2.2fr 1.2fr 1fr 1fr; gap: var(--s7); } }
.footer__tagline { margin-top: var(--s4); color: var(--on-dark-mu); font-size: 0.875rem; max-width: 40ch; line-height: 1.65; }
.footer__heading { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-bright); margin-bottom: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink-line); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list a, .footer__list .link-button { display: block; padding: var(--s3) 0; min-height: 46px; color: var(--on-dark); text-decoration: none; }
.footer__list a:hover, .footer__list .link-button:hover { color: var(--accent-bright); text-decoration: underline; }
.footer__list--index a { display: flex; align-items: baseline; gap: var(--s3); }
.footer__num { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--on-dark-mu); flex: none; }
.footer__legal { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--ink-line); display: grid; gap: var(--s3); font-size: 0.8125rem; line-height: 1.65; }
.footer__disclaimer { max-width: 95ch; }
.footer__copyright a { color: var(--on-dark); }
.footer__copyright a:hover { color: var(--accent-bright); }

/* ---------- Consent ---------- */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 4px solid var(--accent); box-shadow: 0 -10px 30px rgba(16, 50, 61, 0.22); padding-block: var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }
body.consent-open { padding-bottom: 15rem; }
.consent__inner { display: grid; gap: var(--s3); }
.consent__title { font-family: var(--display); font-weight: 700; font-stretch: 90%; font-size: 1.05rem; }
.consent__text { font-size: 0.9375rem; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.consent .btn--secondary { background: transparent; border-color: var(--line-2); color: var(--text); }
.consent .btn--secondary:hover { border-color: var(--ink); background: rgba(16, 50, 61, 0.05); }
@media (min-width: 768px) { .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s5); } .consent__actions { display: flex; } }

/* ---------- Motion, print ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .index__row:hover .index__thumb img { transform: none; }
  .btn:hover { transform: none; }
}
@media print {
  .header, .footer__grid, .consent, .nav-toggle, .skip-link, .breadcrumb, .btn, .cta, .tick-strip, .masthead__actions { display: none !important; }
  body { background: #fff; color: #000; }
  .masthead, .game-top, .section--method, .verdict, .footer { background: #fff !important; color: #000 !important; }
  .masthead__title, .game-head__title, .method__title, .verdict h2, .brand__name { color: #000 !important; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .article__layout, .game__layout, .game-head, .index__row { display: block; }
}