/* ---------- Fonts (self-hosted) ----------
   Inter and Space Grotesk are served from this site rather than Google Fonts,
   so no visitor's IP reaches a third party just to load type. Both are variable
   fonts: one file per family covers every weight we use, split latin /
   latin-ext so a page only downloads the accents it actually needs.
   Licences: fonts/Inter-OFL.txt, fonts/SpaceGrotesk-OFL.txt (SIL OFL 1.1). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #f7f5f0;          /* warm off-white */
  --bg-soft: #efece4;
  --surface: #ffffff;
  --ink: #16130f;         /* near-black text */
  --ink-soft: #5d574e;    /* muted text */
  --line: #e1ddd3;        /* hairline borders */
  --line-strong: #16130f;

  --red: #d83a2c;         /* Portuguese red — primary accent */
  --red-dark: #bd2c20;
  --green: #0e7549;       /* secondary accent */
  --yellow: #e7a92c;      /* warm gold — trading-card accent */
  --blue: #1f5d8c;

  --radius: 10px;
  --maxw: 1140px;

  --shadow-sm: 0 1px 2px rgba(22, 19, 15, 0.05), 0 4px 14px rgba(22, 19, 15, 0.06);
  --shadow-md: 0 6px 20px rgba(22, 19, 15, 0.1), 0 2px 6px rgba(22, 19, 15, 0.06);
  --shadow-lg: 0 18px 44px rgba(22, 19, 15, 0.14);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  /* warm paper: a soft highlight from the top + a faint film grain */
  background-image:
    radial-gradient(120% 75% at 50% -8%, rgba(231, 169, 44, 0.08), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* thin accent strip across the very top — the 3-bar motif */
body::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--green) 0 33.33%,
    var(--yellow) 33.33% 66.66%,
    var(--red) 66.66% 100%
  );
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Body copy ----------
   Running text across the site is justified. Hyphenation is what keeps that
   readable — without it the word spacing opens up into rivers — and it keys
   off <html lang>, which i18n.js rewrites on every switch, so EN and PT each
   break by their own rules. Only wrapped lines are touched, so labels and
   one-liners look exactly as they did. break-word stops a long url or handle
   from stretching a line past its column. */
p,
li,
.hero-goal-text {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* One block opts out of the justification above: see .empty p, under Empty
   state. */

.muted {
  color: var(--ink-soft);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 240, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(22, 19, 15, 0.02), 0 6px 20px rgba(22, 19, 15, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

/* 3-bar identity mark (matches the favicon + top strip) */
.brand-mark {
  width: 22px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 2px;
  background:
    linear-gradient(var(--green) 0 0) left / 5px 100% no-repeat,
    linear-gradient(var(--yellow) 0 0) center / 5px 100% no-repeat,
    linear-gradient(var(--red) 0 0) right / 5px 100% no-repeat;
}

/* language switcher (flags) */
.lang-switch {
  display: inline-flex;
  gap: 6px;
}

.lang-btn {
  display: inline-flex;
  padding: 3px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.45;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lang-btn img {
  display: block;
  width: 26px;
  height: 20px;
  border-radius: 2px;
  object-fit: cover;
}

.lang-btn:hover {
  opacity: 0.85;
}

.lang-btn.active {
  opacity: 1;
  border-color: var(--ink);
}

.nav {
  display: flex;
  gap: 30px;
  font-size: 0.92rem;
  font-weight: 600;
}

.nav a {
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.18s ease;
}

.nav a:hover::after {
  width: 100%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 2px solid var(--ink);
  transition: transform 0.14s ease, box-shadow 0.18s ease,
    background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(226, 58, 46, 0.28);
}

.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(226, 58, 46, 0.34);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-2px);
}

/* ---------- Hero ---------- */
.hero {
  padding: 110px 0 80px;
}

.hero-inner {
  max-width: 920px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--red);
  margin: 0 0 22px;
}

.hero h1 {
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 700;
}

.hero h1 .hl {
  color: var(--red);
  position: relative;
  white-space: nowrap;
}

.lede {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--ink-soft);
  margin: 28px 0 36px;
  max-width: 640px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Landing goal (editable in the admin) ---------- */
.hero-goal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  margin: 48px 0 0;
}

/* the class's display:flex would otherwise beat the [hidden] attribute */
.hero-goal[hidden] {
  display: none;
}

/* each goal (main / title) is its own stacked group */
.goal-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-goal-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
}

.hero-goal-text {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--ink);
  line-height: 1.5;
}

.hero-goal-deadline {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* the title goal's date sits just under its progress bar */
.goal-progress + .hero-goal-deadline {
  margin-top: 8px;
}

/* the "X / Y titles documented" line sits slightly above the bar */
.goal-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.goal-progress-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.goal-progress-pct {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
}

.goal-bar {
  height: 24px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.goal-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--red);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .goal-bar-fill {
    transition: none;
  }
}

/* ---------- One-screen landing ---------- */
.landing {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
}

.landing .hero {
  width: 100%;
  padding: 32px 0;
}

/* fill the framed column: the narrower caps the hero uses elsewhere leave
   the right half empty here, which reads as content shifted to the left.
   the inner wrapper stays at --maxw so it still lands on the frame lines */
.landing .hero-inner {
  max-width: var(--maxw);
}

.landing .lede,
.landing .hero-goal {
  max-width: none;
}

.landing .hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
}

.landing .lede {
  margin: 20px 0 30px;
}

.landing-stats {
  margin-top: 48px;
  max-width: none;
}

@media (max-height: 720px) {
  .landing .hero {
    padding: 20px 0;
  }
  .landing-stats {
    margin-top: 28px;
  }
  .landing .hero-goal {
    margin-top: 28px;
  }
}

/* ---------- About page ---------- */
/* (also privacy, contact and costs — they share this layout) */
.about-page {
  padding: 12px 0 72px;
}

/* fill the framed column instead of stopping at the 720px prose measure,
   which leaves the right side empty and reads as content shifted left */
.about-page .prose {
  max-width: var(--maxw);
}

.page-head:has(+ .about-page) .lede {
  max-width: none;
}

.about-page .prose p {
  color: var(--ink-soft);
}

.about-page .prose strong {
  color: var(--ink);
}

/* each about section is a clearly separated block */
.about-block + .about-block {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 2px solid var(--line);
}

/* section headings on the about page */
.about-h {
  margin: 0 0 16px;
  font-size: 1.5rem;
  color: var(--ink);
}

/* a subordinate heading within an about block (e.g. the first-party note) */
.about-subh {
  margin-top: 40px;
  font-size: 1.2rem;
}

/* the three verification steps, as numbered cards */
.about-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

.about-step-n {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-steps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}

.about-step-desc {
  display: block;
  margin-top: 3px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* transparency commitments */
.about-list {
  margin: 0 0 22px;
  padding-left: 20px;
  color: var(--ink-soft);
}

.about-list li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.about-muted {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1.5px solid var(--line);
  padding-top: 16px;
}

/* link out to a related page from within a prose block */
.about-cta {
  color: var(--red);
  font-weight: 600;
}
.about-cta:hover {
  color: var(--red-dark);
  text-decoration: underline;
}

/* running-costs ledger */
.ledger {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.ledger-row:first-child {
  border-top: none;
}

.ledger-label {
  color: var(--ink-soft);
}

.ledger-amount {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ledger-total {
  background: var(--bg-soft);
  border-top: 2px solid var(--line);
}
.ledger-total .ledger-label,
.ledger-total .ledger-amount {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- The costs graph ----------
   A line chart drawn by hand in costs.js — one line for costs, one for what
   comes in. The SVG carries a viewBox and no width, so it takes the column's
   width and scales to it: every length below is in drawing units, not screen
   pixels. That's why the labels are bumped up on a narrow screen — the whole
   picture is being shrunk to fit, and would take the writing down with it. */

.chart {
  margin: 0;
  padding: 18px 18px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-label {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.chart-label-y {
  text-anchor: end;
}
.chart-label-x {
  text-anchor: middle;
}

/* A series names its colour once and the line and its dots both take it. Only
   inside the drawing: in the legend the same class marks the swatch, and the
   words beside it stay the colour of ordinary muted text. */
.chart-svg .s-cost {
  color: var(--red);
}
.chart-svg .s-earning {
  color: var(--green);
}

.chart-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-dot {
  fill: currentColor;
  stroke: var(--surface);
  stroke-width: 2;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}
.chart-key.s-cost .chart-swatch {
  background: var(--red);
}
.chart-key.s-earning .chart-swatch {
  background: var(--green);
}

@media (max-width: 640px) {
  .chart {
    padding: 14px 12px 8px;
  }
  .chart-label {
    font-size: 20px;
  }
}

/* ---------- The timeline ----------
   A record read as a column: entries broken up by month, newest first, hanging
   off a single rule. An entry that arrives while the page is open is marked
   .is-new and given one short flash — long enough to notice, gone before it
   becomes decoration.

   The archive history is the only page built this way now, and the rules below
   are written as if for it. They stay general because a second record read the
   same way would want them unchanged, and because the ghosts that stand in for
   the stretch not yet drawn are built from .dev-entry too. */

.dev-when {
  flex: none;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* the month a run of entries belongs to — the only thing that breaks the rule */
.dev-month {
  font-size: 1.15rem;
  margin: 26px 0 12px;
  color: var(--ink-soft);
}
.dev-timeline > .dev-month:first-child {
  margin-top: 6px;
}

/* the log itself, as a timeline hanging off a single rule */
.dev-log {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--line);
}

.dev-entry {
  position: relative;
  padding: 0 0 26px;
}
.dev-entry:last-child {
  padding-bottom: 0;
}
/* the node on the rule */
.dev-entry::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
}

.dev-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.dev-entry-title {
  font-size: 1.1rem;
  margin: 0 0 4px;
}

.dev-entry-body {
  margin: 0;
  color: var(--ink-soft);
}

/* what kind of change an entry was */
.dev-tag {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* written while you were reading */
.dev-entry.is-new {
  animation: dev-flash 2.6s ease-out 1;
}

@keyframes dev-flash {
  0% { background-color: rgba(231, 169, 44, 0.35); }
  100% { background-color: transparent; }
}

/* the flash is the only thing here that moves */
@media (prefers-reduced-motion: reduce) {
  .dev-entry.is-new {
    animation: none;
  }
}

/* ---------- Archive history ----------
   The record of what was added, changed and removed in the catalogue. It takes
   the timeline above wholesale — same rule, same nodes, same months, same flash
   for an entry that lands while you're reading — and adds only what is its own:
   the day headings it groups by, and its own tags. */

.hist-filters {
  margin: 0 0 18px;
}

/* Each day is its own block with its own heading and its own rule, so where one
   day stops and the next begins is the first thing you see rather than
   something you work out from the stamps. */
.hist-day-block {
  margin: 0 0 30px;
}
.hist-day-block:last-child {
  margin-bottom: 0;
}

.hist-day {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

/* "today" / "yesterday" — a hint beside the date, never instead of it */
.hist-day-rel {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the hour, under a heading that already carries the day */
.hist-day-block .dev-when {
  font-variant-numeric: tabular-nums;
}

/* The end of the drawn part of a list — the catalogue, studios, people and this
   page all leave one. Nothing to see: it is a mark for the script that grows the
   list to watch, and it has a height only because an element with no box at all
   is a shaky thing to ask a browser to notice arriving. The space above it is
   the gap the ghosts sit in. */
.listing-sentinel {
  height: 1px;
  margin-top: 28px;
}

/* ---- the one-line summary of the same thing, in the landing hero ----
   It sits with the stats band rather than with the lede above it, which is why
   it takes the band's spacing and hands the band a smaller one back. */
.hist-summary {
  margin: 46px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.hist-summary:not([hidden]) + .landing-stats {
  margin-top: 14px;
}
.hist-summary-link {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid var(--line);
}
.hist-summary-link:hover {
  border-bottom-color: currentColor;
}

/* what happened, in the same colours the site uses everywhere else for
   something gained, something in flight, and something gone */
.hist-tag-added { border-color: var(--green); color: var(--green); }
.hist-tag-changed { border-color: var(--blue); color: var(--blue); }
.hist-tag-removed { border-color: var(--red); color: var(--red); }

/* what it happened to — deliberately quiet, so the eye reads the verb first */
.hist-tag-kind {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
}

/* an entry with no name kept: the removal is the record, not the name */
.hist-unnamed {
  color: var(--ink-soft);
  font-style: italic;
}

/* the archive still holds it, so it is worth going to look at */
.dev-entry-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid var(--line);
}
.dev-entry-title a:hover {
  border-bottom-color: currentColor;
}

/* ---- worked example: where the verification dots sit on a card ---- */
.verify-example {
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* a miniature card front, using the real dot components */
.ve-card {
  --tc: hsl(150, 40%, 34%);
  flex: 0 0 auto;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  background: var(--tc);
  border: 2px solid var(--ink);
  border-radius: 16px;
}

.ve-header {
  padding: 1px 3px 0;
}

.ve-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.ve-art {
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background-color: var(--tc);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 19, 15, 0.07) 1px, transparent 0),
    linear-gradient(rgba(247, 245, 240, 0.87), rgba(247, 245, 240, 0.87));
  background-size: 12px 12px, auto;
}

/* ring the dots so the eye lands on them */
.verify-example .tc-verify {
  outline: 2px dashed var(--red);
  outline-offset: 6px;
  border-radius: 999px;
}

/* the same dashed ring on the example's first-party star */
.ve-star {
  outline: 2px dashed var(--red);
  outline-offset: 4px;
}

/* legend swatch: sits inline in the list, not overlaid on a cover */
.ve-legend .fp-star {
  position: static;
  flex-shrink: 0;
}

.ve-tag {
  position: absolute;
  top: 0;
  right: 76px;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ve-typeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
}

.ve-caption {
  flex: 1 1 260px;
  min-width: 240px;
  font-size: 1rem;
}

.ve-caption p {
  margin: 0 0 14px;
  color: var(--ink-soft);
}

.ve-legend {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ve-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.ve-legend .tc-vdot {
  flex-shrink: 0;
}

.ve-read {
  font-size: 0.95rem;
}

/* the pointer tag has no room on a narrow card */
@media (max-width: 420px) {
  .ve-tag { display: none; }
}

/* ---------- Sections ---------- */
section {
  padding: 80px 0;
}

.section-head {
  margin-bottom: 40px;
  padding-bottom: 18px;
  position: relative;
}

.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}

/* short coloured accent above the hairline */
.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 3px;
  background: var(--red);
  border-radius: 3px;
  z-index: 1;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.section-head h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.section-head p {
  margin: 12px 0 0;
}

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}

.search {
  flex: 1 1 280px;
  min-width: 220px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search::placeholder {
  color: var(--ink-soft);
}

.search:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(226, 58, 46, 0.15);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 9px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all 0.14s ease;
}

.chip:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.results-count {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 22px;
}

/* verified-only toggle (looks like a chip) */
.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.toggle-chip input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  cursor: pointer;
  margin: 0;
}

/* "Filters" button — hidden on desktop; on mobile it reveals all the
   sort/filter options (see the mobile media query below) */
.filters-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.filters-toggle::after {
  content: "▾";
  font-size: 0.85em;
  color: var(--ink-soft);
}
.filters-toggle.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.filters-toggle.active::after {
  content: "▴";
  color: var(--bg);
}

/* labelled filter controls (platform / tags), side by side */
.filter-groups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 24px;
}

/* a listing whose facets are all empty hides the whole group, so it doesn't
   leave a gap where the controls would be — display: flex would otherwise
   win over the [hidden] attribute */
.filter-groups[hidden] {
  display: none;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-label {
  flex-shrink: 0;
  min-width: 64px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.filter-select {
  min-width: 180px;
}

/* multi-select dropdown (tags) */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dropdown-toggle::after {
  content: "▾";
  font-size: 0.85em;
  color: var(--ink-soft);
}

.dropdown-toggle:hover {
  border-color: var(--ink);
}

.dropdown-toggle.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.dropdown-toggle.active::after {
  color: var(--bg);
}

.dropdown-toggle[aria-expanded="true"] {
  border-color: var(--red);
}

.dropdown-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  max-width: calc(100vw - 40px);
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* the class's display:flex would otherwise beat the [hidden] attribute and
   keep the panel permanently open */
.dropdown-panel[hidden] {
  display: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--bg-soft);
}

.dropdown-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

/* card / list view toggle */
.view-toggle {
  display: inline-flex;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.view-btn {
  padding: 9px 16px;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
}

.view-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- List view ---------- */
.list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s ease;
}
.list-row:last-child {
  border-bottom: none;
}
.list-row:hover {
  background: var(--bg-soft);
}

.list-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.list-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.list-meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* the trailing note on a row: a game's platforms, a studio's title count, a
   person's credit count */
.list-aside {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .list-aside {
    display: none;
  }
}

/* ---------- Grid + cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}

/* A card, all of it in one place. It is an <a>, it fades in when the grid is
   drawn, and it replays that fade on a filter or sort — three separate ideas
   that used to be three separate .card blocks scattered down this file, each
   quietly relying on being further down than the last. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* it's an anchor: drop the link styling, keep the pointer */
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  /* entrance — starts invisible, animation brings it in */
  opacity: 0;
  animation: cardIn 0.4s ease forwards;
}

.card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-cover {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: #fff;
}

/* rotate accent colors so the grid feels lively */
.card:nth-child(4n + 1) .card-cover { background: var(--red); }
.card:nth-child(4n + 2) .card-cover { background: var(--green); }
.card:nth-child(4n + 3) .card-cover { background: var(--blue); }
.card:nth-child(4n + 4) .card-cover { background: var(--ink); }

.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}

.tag {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 48px 0;
}

/* ---------- About ---------- */
.about {
  background: var(--ink);
  color: var(--bg);
}

.about .section-head::after {
  background: rgba(247, 245, 240, 0.2);
}

.about .section-head h2,
.about .prose strong {
  color: var(--bg);
}

.prose {
  max-width: 720px;
  font-size: 1.15rem;
}

.prose p {
  margin: 0 0 20px;
  color: #d8d3c8;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 40px;
  background: var(--ink);
  color: #d8d3c8;
  font-size: 0.9rem;
}

/* brand, then the two link columns */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding: 60px 28px 44px;
}

.footer-brand .brand {
  color: var(--bg);
  margin-bottom: 14px;
}

.footer-brand p {
  margin: 0;
  max-width: 380px;
  color: #a9a297;
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bg);
}

.footer-col a {
  color: #b8b1a6;
  width: fit-content;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--yellow);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 28px;
  border-top: 1px solid rgba(247, 245, 240, 0.12);
  font-size: 0.84rem;
  color: #a9a297;
}

.footer-bottom a {
  color: #b8b1a6;
  transition: color 0.15s ease;
}

.footer-bottom a:hover {
  color: var(--yellow);
}

/* the footer container overrides */
.site-footer .container.footer-grid,
.site-footer .container.footer-bottom {
  max-width: var(--maxw);
}

/* ---------- Admin / forms ---------- */
.admin {
  padding: 64px 0 90px;
}

/* the admin is a desktop-only local tool — let it use the full page width */
.admin-narrow {
  max-width: 1500px;
}

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
  box-shadow: var(--shadow-sm);
}

.notice code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* grouped form sections with a labelled divider */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-section + .form-section {
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.form-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.form .hint {
  font-weight: 500;
  font-size: 0.78em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.form .check-label {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  align-self: center;
}

.form .check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  cursor: pointer;
}

.verify-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.verify-steps-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* per-step source link: sits on its own full-width row inside .verify-steps */
.verify-source {
  flex: 1 1 100%;
  max-width: 520px;
}
.verify-source:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* simple string lists (platforms, tags): add one at a time, then edit/remove */
.list-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.list-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}
.list-add .btn {
  align-self: end;
}
.pair-add {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 12px;
  align-items: end;
}
.pair-add .btn {
  align-self: end;
}
/* video row carries an extra field (EN + PT title) before the URL */
.pair-add-trio {
  grid-template-columns: 1fr 1fr 2fr auto;
}

/* credits: add one person at a time, then edit/remove from the list */
.credit-add {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.credit-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
}
.credit-roles-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credit-roles-caption {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.credit-roles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credit-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.credit-role-row .credit-role-input {
  flex: 1 1 auto;
  min-width: 0;
}
.credit-role-remove {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.credit-role-remove:hover {
  border-color: var(--red);
  color: var(--red);
}
.credit-role-remove[hidden] {
  display: none;
}
.credit-role-add {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}
.credit-role-add:hover {
  text-decoration: underline;
}

/* o aviso de nome repetido fica junto ao botão, mas só ocupa espaço quando há
   alguma coisa para dizer. Pelo sítio, não por classe: setMsg/clearMsg
   reescrevem o className do elemento */
.credit-add .form-msg:empty {
  display: none;
}

/* quem o arquivo já conhece com o nome que está a ser escrito */
.credit-known {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.credit-known[hidden] {
  display: none; /* a classe põe display: flex e ganhava ao atributo */
}
.credit-known strong {
  color: var(--ink);
}

.credit-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* One credit: who, and what they did. The same row is used by the admin editor
   and by a game's page, so it's described once, here. */
.credit-item {
  display: flex;
  /* baseline, so a role that wraps still sits level with the name it belongs to */
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.credit-text {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  min-width: 0;
}
.credit-text strong {
  font-weight: 700;
}
.credit-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.credit-actions .chip {
  padding: 5px 12px;
  font-size: 0.76rem;
}

.form input,
.form textarea {
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(226, 58, 46, 0.15);
}

.form .btn {
  align-self: flex-start;
}

.form-msg {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.2em;
}

.form-msg.error {
  color: var(--red-dark);
}

.form-msg.success {
  color: var(--green);
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}

.admin-row:hover {
  box-shadow: var(--shadow-md);
}

.admin-row .chip {
  padding: 6px 14px;
  font-size: 0.78rem;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.chip-danger:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ---------- Admin overview (browse + triage) ---------- */
.overview {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* the one search box above the three overview lists */
.ov-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* sub-tabs inside the overview: games / studios */
.subtabs {
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--line);
}

.subtab {
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.subtab:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.subtab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* .admin-list is display:flex, so [hidden] needs help to actually hide it */
.admin-list[hidden] {
  display: none;
}

/* title + meta + the completeness badges */
.row-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

/* An entry with fields still to fill in, tinted by the worst level missing:
   red for what the public page needs, gold for what's expected of every entry,
   blue for the optional extras. */
.admin-row.miss-essential {
  background: rgba(216, 58, 44, 0.06);
  border-color: rgba(216, 58, 44, 0.5);
}
.admin-row.miss-recommended {
  background: rgba(231, 169, 44, 0.07);
  border-color: rgba(231, 169, 44, 0.55);
}
.admin-row.miss-optional {
  background: rgba(31, 93, 140, 0.05);
  border-color: rgba(31, 93, 140, 0.35);
}

/* A reader-submitted correction: taller than a normal row, since it carries a
   message written by a person rather than a line of fields. */
.report-entry {
  align-items: flex-start;
}
.report-entry .row-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.report-text {
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.report-meta-link {
  font-size: 0.82rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--red);
  overflow-wrap: anywhere;
}
/* dealt with: still readable, no longer demanding attention */
.report-entry.report-resolved {
  opacity: 0.62;
}
/* a chip that's a link rather than a button */
a.chip {
  display: inline-block;
  text-decoration: none;
}

/* the badges: one per level on a row, and the per-list summary above it */
.ov-flag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(93, 87, 78, 0.12);
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  cursor: help;
}

.ov-flag-essential {
  background: rgba(216, 58, 44, 0.14);
  border-color: var(--red);
  color: #91231a;
}

.ov-flag-recommended {
  background: rgba(231, 169, 44, 0.18);
  border-color: var(--yellow);
  color: #7a5a10;
}

.ov-flag-optional {
  background: rgba(31, 93, 140, 0.12);
  border-color: var(--blue);
  color: #164461;
}

.ov-flag-done {
  background: rgba(14, 117, 73, 0.12);
  border-color: var(--green);
  color: var(--green);
  cursor: default;
}

/* the tally at the top of each overview list, which doubles as the colour key */
.ov-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 4px;
}
.ov-summary .ov-flag {
  cursor: default;
  font-size: 0.72rem;
  padding: 4px 11px;
}

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-row .chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------- Motion ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* hero entrance */
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .hero-actions {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero .eyebrow      { animation-delay: 0.05s; }
.hero h1            { animation-delay: 0.15s; }
.hero .lede         { animation-delay: 0.32s; }
.hero .hero-actions { animation-delay: 0.46s; }

/* the card's own entrance is up with the rest of .card; cardIn is defined below */

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  .hero .eyebrow,
  .hero h1,
  .hero .lede,
  .hero .hero-actions,
  .card,
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Stats band ---------- */
.stats {
  padding: 0;
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.stat {
  padding: 36px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: none;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--red);
  letter-spacing: -0.02em;
}

.stat-label {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* how much of a count has been checked against a source, in the same green the
   verified badges use everywhere else. Deliberately quieter than the figure
   above it: it qualifies that number rather than competing with it. */
.stat-verified {
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.stat-verified-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green);
}

/* each count that has a page behind it carries the link to it, so the hero's
   separate button row is gone. Tighter than a standalone .btn — it has a cell
   to fit into, not a full-width row. */
.stat-cta {
  margin-top: 22px;
  padding: 10px 20px;
  font-size: 0.82rem;
}

/* ---------- Sort select ---------- */
.sort {
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}

.sort:focus {
  outline: none;
  border-color: var(--red);
}

/* ---------- Card cover image ---------- */
.card-cover.has-image {
  padding: 0;
}

.card-cover.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Trading-card game cards (flip) ---------- */
.game-card {
  /* frame colour is derived per-card from the release year in ui.js (set
     inline as --tc); undated cards fall back to this neutral slate */
  --tc: #6b6a66;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  aspect-ratio: 13 / 21;
  perspective: 1200px;
}

/* flip mechanics */
.tc-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.game-card.flipped .tc-flip {
  transform: rotateY(180deg);
}

.tc-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--tc, var(--red));
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tc-back {
  transform: rotateY(180deg);
}

/* back of the card: a "rules text" panel — fixed sections, never scrolls */
.tc-back-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 14px;
  overflow: hidden;
  color: var(--ink);
}
.tc-back-title {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* description takes all the space the sections below don't need, then clamps
   so the back never scrolls; the "more" button signals the full text */
.tc-back-desc {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* credited games on the back of a person card — a bulleted list that still
   clamps to whatever fits (it carries .tc-back-desc). The clamp sets
   display:-webkit-box, which drops native markers, so draw the bullets. */
.tc-credit-list {
  padding: 0;
  list-style: none;
}

.tc-credit-list li {
  position: relative;
  padding-left: 14px;
}

.tc-credit-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--ink-soft);
}

.tc-back-row {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tc-back-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.tc-back-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
/* "more on the page" indicator pinned to the bottom of the back */
.tc-back-link {
  flex-shrink: 0;
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  transition: background 0.2s ease, color 0.2s ease;
}
.tc-back-link:hover {
  color: #fff;
  background: var(--ink);
}

/* flip affordance in the lower-right corner */
.tc-flip-badge {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  /* it's a real <button> (the card's flip control) — undo the browser's */
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease;
}
.game-card:hover .tc-flip-badge {
  transform: rotate(180deg);
}
.tc-flip-badge:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* type-line year (replaces platforms on the front) */
.tc-year {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  white-space: nowrap;
}

.tc-frame {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
}

.tc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 3px 0;
}


.tc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* bright (light) year frames need a dark title + initials to stay readable;
   studio cards keep their white initials (their art window is always black) */
.tc-light .tc-name {
  color: var(--ink);
}
.tc-light:not(.studio-card) .tc-initials {
  color: var(--ink);
}

.tc-art {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* description panel on the front — grows to fill, same size as before the
   flip redesign (art keeps its fixed 4:3 size above it) */
.tc-frontdesc {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 11px 12px;
  min-height: 56px;
  overflow: hidden;
}
.tc-frontdesc .tc-flavor {
  -webkit-line-clamp: 3;
}

/* a few tag chips on the front, below the description; the flip badge sits
   at the right, vertically centred with the tag row */
.tc-fronttags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  min-height: 30px;
  max-height: 56px;
  padding-right: 34px;
}
.tc-fronttags .tag {
  font-size: 0.66rem;
  padding: 2px 8px;
}
.tc-fronttags .tc-flip-badge {
  top: 50%;
  right: 0;
  bottom: auto;
  transform: translateY(-50%);
}
.game-card:hover .tc-fronttags .tc-flip-badge {
  transform: translateY(-50%) rotate(180deg);
}

.tc-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.7rem;
  letter-spacing: -0.02em;
  color: var(--tc, var(--red));
}

/* richer empty covers: a soft tint of the frame colour + dot texture */
.tc-art:not(.has-image) {
  background-color: var(--tc, var(--red));
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 19, 15, 0.07) 1px, transparent 0),
    linear-gradient(rgba(247, 245, 240, 0.87), rgba(247, 245, 240, 0.87));
  background-size: 12px 12px, auto;
}

/* studio empty covers stay on black, with a faint light texture */
.studio-card .tc-art:not(.has-image) {
  background-color: #000;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
  background-size: 11px 11px;
}

.tc-typeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 7px;
  padding: 5px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
}

.tc-type {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-flavor {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* holographic sheen on hover (front face) */
.tc-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 58%
  );
  background-size: 250% 250%;
  background-position: 100% 100%;
  opacity: 0;
}

.game-card:hover .tc-front::after {
  opacity: 1;
  animation: holo 1.1s ease forwards;
}

@keyframes holo {
  from { background-position: 100% 100%; }
  to   { background-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card:hover .tc-front::after {
    animation: none;
    opacity: 0;
  }
  .tc-flip {
    transition: none;
  }
  /* keep the 3D face positioning (the global `* { transform: none }` above
     would otherwise un-rotate the back face and show it on top of the front) —
     flipping still works, just without the animation */
  .tc-back {
    transform: rotateY(180deg) !important;
  }
  .game-card.flipped .tc-flip {
    transform: rotateY(180deg) !important;
  }
}

/* verification dots — sit on the line between the header and the art */
.tc-artwrap {
  position: relative;
}

.tc-verify {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tc-artwrap .tc-verify {
  position: absolute;
  top: 0;
  right: 8px;
  transform: translateY(-50%);
  z-index: 3;
}

/* empty step: small dot, no number */
.tc-vdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(22, 19, 15, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0;
  line-height: 1;
}

/* filled step: larger white dot with the number */
.tc-vdot.filled {
  width: 18px;
  height: 18px;
  background: #fff;
  color: var(--ink);
  font-size: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* list view: same idea, scaled down */
.list-verify {
  align-self: center;
}
.list-verify .tc-vdot {
  width: 8px;
  height: 8px;
}
.list-verify .tc-vdot.filled {
  width: 14px;
  height: 14px;
  font-size: 7px;
}

/* ---------- First-party comment star ---------- */
/* A link overlaid on the cover pointing to where the subject of an entry
   publicly commented on it. Sits in the lower-left, opposite the verification
   dots — a separate mark, not a rung of the verify ladder. A gold star with a
   black contour, matching the ink border on the verification dots. */
.fp-star {
  position: absolute;
  left: -4px;
  bottom: 4px;
  z-index: 3;
  /* straddle the bottom edge of the art, the way the dots straddle the top */
  transform: translateY(50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  font-size: 34px;
  line-height: 1;
  text-decoration: none;
  /* black contour, like the ink border on the verification dots */
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
/* just an indicator on cards — not interactive, so no hover affordance */
.fp-star-mark {
  display: block;
}

/* person portraits clip their overflow, so the star sits inside the corner
   (like the dots on a person card) rather than straddling the edge */
.person-card .tc-photo .fp-star {
  bottom: 12px;
  transform: none;
}

/* detail covers also clip; keep the (bigger) star inside the corner */
.detail-cover .fp-star {
  left: 0;
  bottom: 12px;
  transform: none;
  font-size: 48px;
  -webkit-text-stroke: 5px var(--ink);
}

/* ---------- Person cards: football-card layout (face, then a nameplate) ---------- */
.person-frame {
  gap: 8px;
}

/* the portrait fills the card; the nameplate sits under it */
.person-card .tc-photo {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 2px solid var(--ink);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}

.person-card .tc-photo.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* no photo: a tinted window with the silhouette "prefab" */
.person-card .tc-photo:not(.has-image) {
  background-color: var(--tc);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 19, 15, 0.07) 1px, transparent 0),
    linear-gradient(rgba(247, 245, 240, 0.87), rgba(247, 245, 240, 0.87));
  background-size: 12px 12px, auto;
}

.tc-silhouette {
  width: 76%;
  height: 76%;
  align-self: flex-end;
  color: var(--tc, var(--ink));
  opacity: 0.4;
  fill: currentColor;
}

/* dots sit inside the portrait, not straddling its edge */
.person-card .tc-photo .tc-verify {
  top: 8px;
  right: 8px;
  transform: none;
}

.tc-nameplate {
  flex-shrink: 0;
  padding: 8px 10px;
  text-align: center;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 7px;
}

.tc-person-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tc-person-role {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* studio trading cards: logo on a black window, fit fully (not cropped) */
.studio-card .tc-art {
  background: #000;
}

.studio-card .tc-art img {
  object-fit: contain;
  padding: 10px;
}

.game-card.studio-card .tc-initials {
  color: #fff;
}

/* ---------- Detail page ---------- */
.detail {
  padding: 48px 0 90px;
}

.back-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 28px;
  color: var(--ink);
}
.back-link:hover {
  color: var(--red);
}

.detail-body {
  max-width: 720px;
}

.detail-cover {
  position: relative; /* anchors the first-party star in the corner */
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  margin-bottom: 32px;
  box-shadow: var(--shadow-md);
  animation: fadeUp 0.5s ease both;
}

.detail-cover.has-image {
  background: var(--bg-soft);
}

/* dot texture on solid (no-image) detail covers */
.detail-cover:not(.has-image):not(.studio-cover) {
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.1) 1.5px, transparent 0);
  background-size: 16px 16px;
}
.detail-cover.studio-cover:not(.has-image) {
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.08) 1.5px, transparent 0);
  background-size: 16px 16px;
}

.detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* studio profile logo: black window, logo fit fully (not cropped) */
.detail-cover.studio-cover,
.detail-cover.studio-cover.has-image {
  background: #000;
  color: #fff;
}

.detail-cover.studio-cover img {
  object-fit: contain;
  padding: 24px;
}

.detail-title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  letter-spacing: -0.02em;
}

.detail-meta {
  margin: 14px 0 26px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* small pill marking that a physical edition exists, sits in the meta line */
.detail-edition-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.detail-summary {
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

/* compact "watch" button that lives inline in the meta line, opens the modal */
.detail-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  margin-left: 14px;
  padding: 6px 14px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.detail-video-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.dv-play-ic {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
}

/* the same buttons as their own field (person pages: interviews and talks),
   where the inline margin would push the first one off the label's edge */
.detail-videos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.detail-videos .detail-video-btn {
  margin-left: 0;
}

/* video modal / lightbox */
body.modal-open {
  overflow: hidden;
}
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 19, 15, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: vm-fade 0.16s ease;
}
@keyframes vm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 980px;
}
.video-modal-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-modal-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal-close,
.report-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.video-modal-close:hover,
.report-close:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
@media (max-width: 560px) {
  .video-modal-close { top: 8px; right: 8px; }
  .report-close { top: 8px; right: 8px; }
}

/* ===================== Card packs (TCG-style reveal) ===================== */
.pack-strip {
  margin: 0 0 34px;
  padding: 22px 22px 24px;
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(14, 117, 73, 0.06), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(216, 58, 44, 0.07), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.pack-strip-head {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.pack-strip-headings {
  min-width: 0;
}
/* Open-everything button: reads as an aside to the heading, not a rival to the
   packs themselves — the tiles are what should be asking to be clicked. */
.pack-open-all {
  flex: 0 0 auto;
  padding: 9px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease,
    transform 0.14s ease;
}
.pack-open-all:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  transform: translateY(-1px);
}
.pack-open-all:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.pack-strip-title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.pack-strip-sub {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 60ch;
}
.pack-strip-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}

/* Sealed booster tile */
.pack-tile {
  position: relative;
  flex: 0 0 auto;
  width: 156px;
  height: 208px;
  border: 0;
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(158deg, #2b2620 0%, #17130e 52%, #0b0906 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.pack-tile::before {
  /* accent stripe down the left edge: red / yellow / green */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, #e23a2e 0 33.34%, #f3b51c 33.34% 66.67%, #0c7a4b 66.67%);
}
.pack-tile:hover,
.pack-tile:focus-visible {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
  outline: none;
}
.pack-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.42) 47%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.pack-tile:hover .pack-foil,
.pack-tile:focus-visible .pack-foil {
  transform: translateX(120%);
}
/* centre emblem = the website symbol (three bars on a dark rounded square) */
.pack-seal {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background:
    linear-gradient(#0c7a4b 0 0) 25% 50% / 6px 56% no-repeat,
    linear-gradient(#f3b51c 0 0) 50% 50% / 6px 56% no-repeat,
    linear-gradient(#e23a2e 0 0) 75% 50% / 6px 56% no-repeat,
    #16130f;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), 0 4px 10px rgba(0, 0, 0, 0.45);
}
.pack-count {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack-tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), transparent);
}
.pack-tile-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.64rem;
  opacity: 0.86;
}
.pack-tile-date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.12;
}
.pack-tile-cta {
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  opacity: 0.92;
}

/* ---- Opening modal ---- */
.pack-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 19, 15, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: vm-fade 0.16s ease;
}
.pack-modal-inner {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px 28px 34px;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lg);
}
.pack-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}
.pack-modal-close:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.pack-modal-head {
  text-align: center;
  margin-bottom: 22px;
}
.pack-modal-date {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--red);
}
.pack-modal-title {
  font-size: 1.5rem;
  margin-top: 4px;
}
.pack-stage {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the animated sealed pack shown centre-stage before it tears */
.pack-open {
  position: relative;
  width: 190px;
  height: 254px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(158deg, #2b2620 0%, #17130e 52%, #0b0906 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  animation: pack-shake 0.44s ease-in-out;
}
.pack-open::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background: linear-gradient(180deg, #e23a2e 0 33.34%, #f3b51c 33.34% 66.67%, #0c7a4b 66.67%);
}
.pack-open-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.4) 50%, transparent 66%);
  animation: pack-sheen 1s ease;
}
.pack-open-seal {
  position: absolute;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background:
    linear-gradient(#0c7a4b 0 0) 25% 50% / 7px 56% no-repeat,
    linear-gradient(#f3b51c 0 0) 50% 50% / 7px 56% no-repeat,
    linear-gradient(#e23a2e 0 0) 75% 50% / 7px 56% no-repeat,
    #16130f;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16), 0 5px 12px rgba(0, 0, 0, 0.5);
}
.pack-open-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}
.pack-open.tearing {
  animation: pack-tear 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* revealed cards grid — fixed-width columns so cards stay their regular size
   (centred) instead of stretching to fill the modal like auto-fit would */
.pack-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  justify-content: center;
  gap: 18px;
  align-items: start;
}
.pack-reveal {
  position: relative;
  perspective: 1100px;
}
.pack-reveal.armed .card {
  opacity: 0;
}
.pack-reveal.revealed .card {
  opacity: 1;
  animation: pack-pop 0.4s ease both;
}
.pack-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(158deg, #2b2620 0%, #17130e 52%, #0b0906 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
  backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, #e23a2e 0 33.34%, #f3b51c 33.34% 66.67%, #0c7a4b 66.67%);
}
.pack-cover-seal {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background:
    linear-gradient(#0c7a4b 0 0) 25% 50% / 6px 56% no-repeat,
    linear-gradient(#f3b51c 0 0) 50% 50% / 6px 56% no-repeat,
    linear-gradient(#e23a2e 0 0) 75% 50% / 6px 56% no-repeat,
    #16130f;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), 0 4px 10px rgba(0, 0, 0, 0.45);
}
.pack-reveal.revealed .pack-cover {
  transform: rotateY(-180deg);
}

@keyframes pack-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2.5deg); }
}
@keyframes pack-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes pack-tear {
  to { transform: scale(1.14) translateY(-10px); opacity: 0; }
}
@keyframes pack-pop {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pack-tile,
  .pack-open-all,
  .pack-foil,
  .pack-open,
  .pack-open-foil,
  .pack-cover,
  .pack-reveal.revealed .card {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 560px) {
  .pack-modal-inner { padding: 24px 16px 26px; }
  .pack-modal-close { top: 8px; right: 8px; }
}

.detail-field {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1.5px solid var(--line);
}

.detail-field-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  color: var(--ink);
  min-width: 96px;
}

/* Cited sources — one per row; URLs link out, references stay as text */
.detail-sources {
  align-items: flex-start;
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 320px;
}

.source-item {
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Portuguese credits — name + role, one per row */
.detail-credits {
  align-items: flex-start;
}

.credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 320px;
}

.credit-name {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
}

.credit-name:hover {
  color: var(--red);
}

/* ---- Person detail page ---- */
.person-cover {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-soft);
}

.person-cover .tc-silhouette {
  width: 46%;
  height: 86%;
  color: var(--ink);
  opacity: 0.18;
}

.person-cover.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* work on games that aren't (and shouldn't be) in the catalogue */
.other-credits {
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

.other-credits-title {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.other-credits-note {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.other-credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.other-credits-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.oc-title {
  font-weight: 600;
  color: var(--ink);
}

.oc-meta {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.oc-meta::before {
  content: "·";
  margin-right: 12px;
  color: var(--line);
}

.credit-role {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.credit-role::before {
  content: "·";
  margin-right: 12px;
  color: var(--line);
}

.detail-link {
  margin-top: 28px;
}

/* "Get the game at:" — a row of external store buttons (Steam, itch.io, …) */
.detail-stores {
  align-items: center;
}
.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 320px;
}

/* Expansions & DLC — one small card each, laid out like a shelf of add-ons.
   A card with a known page is an <a> and lifts on hover; one without is a
   <div> that sits still, so a dead end never looks clickable. */
.detail-dlc {
  align-items: flex-start;
}
.dlc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  flex: 1 1 320px;
}
.dlc-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
a.dlc-card {
  border-color: var(--red);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.dlc-card:hover,
a.dlc-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.dlc-title {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.dlc-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* Share — a row of icon buttons to copy the URL or post the page elsewhere */
.detail-share {
  align-items: center;
}
.share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 320px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease,
    background 0.14s ease, color 0.14s ease;
}
.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  background: var(--ink);
  color: #fff;
}
.share-ic {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* Report an error — a quiet control under the share row, and the form it opens */
.detail-report {
  align-items: center;
}
.report-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 1 1 320px;
}
.report-btn {
  padding: 8px 16px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.report-btn:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
}
.report-note {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.report-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(22, 19, 15, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: vm-fade 0.16s ease; /* shared with the video modal */
}
.report-modal-inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
}
.report-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.report-title {
  margin: 0;
  font-size: 1.35rem;
}
.report-about {
  margin: -12px 0 0;
  color: var(--ink-soft);
  font-weight: 700;
}
.report-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-row-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.report-row-hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.report-input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 10px;
}
.report-input:focus {
  outline: none;
  border-color: var(--ink);
}
textarea.report-input {
  resize: vertical;
  min-height: 96px;
}
/* the honeypot: never seen, never tabbed to, only ever filled by a bot */
.report-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.report-privacy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.report-privacy a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--red);
}
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.report-thanks {
  margin: 0;
  color: var(--ink-soft);
}
.report-form .form-msg:empty {
  display: none;
}
@media (max-width: 560px) {
  .report-form {
    padding: 22px;
  }
}

.detail-studio-link {
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
  transition: color 0.12s ease;
}
.detail-studio-link:hover {
  color: var(--red);
}

/* source link on detail pages */
.detail-source-link {
  color: var(--ink);
  border-bottom: 2px solid var(--green);
  padding-bottom: 1px;
  transition: color 0.12s ease;
}
.detail-source-link:hover {
  color: var(--green);
}

/* ---------- Verification breakdown (detail pages) ---------- */
.verify-breakdown {
  padding: 16px 0;
  border-top: 1.5px solid var(--line);
}
.vb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.vb-head::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex-shrink: 0;
}
.vb-level-1 .vb-head::before { background: var(--ink); }
.vb-level-2 .vb-head::before { background: var(--yellow); }
.vb-level-3 .vb-head::before { background: var(--green); }
.vb-tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.vb-count {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.vb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.vb-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.vb-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--surface);
}
.vb-step.done .vb-mark {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.vb-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vb-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.vb-step.done .vb-label {
  color: var(--ink);
}
.vb-desc {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
/* the source backing this step, tucked directly under its description */
.vb-source {
  margin-top: 6px;
  font-size: 0.82rem;
}

/* first-party comment block (detail pages) — the readable form of the cover
   star: who commented, the quote, and a link to where they said it */
.first-party-note {
  padding: 16px 0;
  border-top: 1.5px solid var(--line);
}
.fp-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-note-star {
  color: var(--yellow);
  -webkit-text-stroke: 1.5px var(--ink);
  font-size: 1.1rem;
  line-height: 1;
}
.fp-note-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  color: var(--ink);
}
.fp-note-quote {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--yellow);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.fp-note-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--ink);
  border-bottom: 2px solid var(--green);
  padding-bottom: 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  transition: color 0.12s ease;
}
.fp-note-link:hover {
  color: var(--green);
}

/* ---------- Page header (listing pages) ---------- */
.page-head {
  padding: 28px 0 8px;
}
.page-head .lede {
  margin-top: 10px;
  margin-bottom: 0;
}

/* tighten the gap between a page header and the content below it */
.page-head + section {
  padding-top: 28px;
}

/* ---------- Page frame (hairline rules flanking the container) ---------- */
.page-frame {
  position: relative;
}

.page-frame::before,
.page-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  /* fade the ends so the rules don't stop dead against the header/footer */
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--line) 56px,
    var(--line) calc(100% - 56px),
    transparent 100%
  );
}

.page-frame::before {
  left: max(0px, calc(50% - var(--maxw) / 2));
}

.page-frame::after {
  right: max(0px, calc(50% - var(--maxw) / 2));
}

/* once the container touches the viewport the rules would sit flush
   against the window edge — drop them instead */
@media (max-width: 1220px) {
  .page-frame::before,
  .page-frame::after {
    display: none;
  }
}

/* ---------- Admin tabs ---------- */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 36px;
}

.tab {
  padding: 12px 24px;
  background: transparent;
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: -2px;
}

.tab.active {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Hamburger / mobile nav ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Skeleton loading ---------- */
.skeleton {
  opacity: 1;
  animation: none;
  pointer-events: none;
}

.sk-cover {
  height: 130px;
  border-bottom: 2px solid var(--ink);
}

.sk-line {
  height: 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.sk-line-lg { height: 18px; width: 70%; }
.sk-line-sm { width: 45%; }

/* A ghost in the list view: the two lines a real row has, sitting where they
   sit, so a row being replaced doesn't move the rows above it. */
.sk-row-title { width: 170px; height: 14px; margin: 0; }
.sk-row-meta { width: 110px; height: 11px; margin: 0; }

/* And in the timeline: the kind tag and its time, then the title and the first
   line of the entry. The node on the rule comes from .dev-entry, which is
   right — the moment is already known, it's what happened in it that isn't. */
.sk-tag { width: 62px; height: 20px; border-radius: 999px; margin: 0; }
.sk-when { width: 96px; height: 11px; margin: 0; }

/* the last ghost is holding a place, not ending the list: it keeps its gap */
.dev-entry.skeleton:last-child {
  padding-bottom: 26px;
}

.skeleton .sk-cover,
.skeleton .sk-line {
  background: linear-gradient(
    90deg,
    var(--bg-soft) 25%,
    #e9e5db 37%,
    var(--bg-soft) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ---------- Empty state ---------- */
.empty p {
  margin: 0 0 18px;
  /* opt out of the justification set on every p: this one is centred, and a
     direct rule on the paragraph beats the alignment it inherits from .empty */
  text-align: inherit;
}

/* ---------- Responsive ---------- */
/* four abreast gets cramped before it gets narrow — "Years covered" starts
   wrapping — so the band folds to 2×2 well above the single-column break */
@media (max-width: 900px) and (min-width: 601px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(2n) {
    border-right: none;
  }
  .stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 600px) {
  .stats-inner {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: none;
    border-bottom: 2px solid var(--ink);
    padding: 22px;
  }
  .stat:last-child {
    border-bottom: none;
  }
}

/* collapse nav into a hamburger menu */
@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    display: none;
    background: var(--bg);
    border-bottom: 2px solid var(--ink);
    padding: 6px 0 10px;
    box-shadow: var(--shadow, 0 12px 24px rgba(0, 0, 0, 0.12));
  }
  .nav.open {
    display: flex;
  }
  .nav a {
    padding: 14px 28px;
  }
  .nav a::after {
    display: none;
  }
}

/* the brand drops to its own row and the two link columns share the one below */
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 70px 0 56px;
  }
  section {
    padding: 60px 0;
  }
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  /* in a column toolbar the 280px flex-basis would stretch the input's
     height into a square — reset it so it stays a normal field */
  .search {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .sort {
    width: 100%;
  }
  .filter-groups {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-select,
  .dropdown,
  .dropdown-toggle {
    width: 100%;
  }
  /* show the Filters button, and hide the options until it's toggled open */
  .filters-toggle {
    display: inline-flex;
    width: 100%;
  }
  .catalogue:not(.filters-open) #sort,
  .catalogue:not(.filters-open) .toggle-chip,
  .catalogue:not(.filters-open) .view-toggle,
  .catalogue:not(.filters-open) .filter-groups {
    display: none;
  }
  /* The two columns stay side by side even here — collapsing them would build
     back the eight-link stack they exist to avoid, and on the screen where a
     long scroll costs most. The labels are single words; they fit. */
  .footer-grid {
    padding: 44px 28px 32px;
  }
}

@media (max-width: 520px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .credit-add-grid {
    grid-template-columns: 1fr;
  }
  .list-add {
    grid-template-columns: 1fr;
  }
  .list-add .btn,
  .pair-add .btn {
    justify-self: start;
  }
  .pair-add {
    grid-template-columns: 1fr;
  }
  .brand {
    font-size: 1rem;
  }
  .header-left {
    gap: 10px;
  }
  .lang-btn img {
    width: 22px;
    height: 17px;
  }
}