/* ==========================================================================
   disrupt.games — site.css
   One stylesheet for the whole site. Sections:
   1 Base · 2 Header & footer · 3 Home · 4 Catalog · 5 Game pages
   6 Content pages · 7 Forms · 8 Table Talk · 9 Print
   Change colors and fonts in the :root block below; everything reads from it.
   ========================================================================== */

/* ---------- 1. Base ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color — brand accent/ink hues matched to the Disrupt Games brand package
     (Primary #50247D, Highlight #FFA13C, Outline/Shadow #22223B). The brand
     doc's "Website BG" Soft Lavender was tried full-bleed and rejected — it
     fights the clean/fast/flowing direction this site has been built toward
     all session. Background stays a near-white neutral; lavender/purple
     stays where it already earned its place (hero, footer, accents, links). */
  --paper: #f8f8fb;
  --card: #ffffff;          /* brand "Base" — White */
  --tint: #f3f0f9;          /* quiet panel tint — a light neutral with a whisper of the brand purple, not a wash of it */
  --tint-deep: #e9e4f4;
  --ink: #22223b;           /* brand "Outline/Shadow" — Near Black */
  --ink-soft: #55516e;
  --line: #e5e1f0;
  --violet: #50247d;        /* brand "Primary" — Deep Royal Purple */
  --violet-ink: #3b1a5f;    /* darker shade of Primary, for text/hover on light backgrounds */
  --violet-tint: #ece2f7;
  --felt: #3c1a66;          /* the "table": hero and footer — a darker Primary */
  --felt-deep: #290f49;
  --sun: #ffa13c;           /* brand "Highlight" — Bright Orange */
  --sun-ink: #a8560c;       /* darker shade of Highlight, for text/headings on light backgrounds */
  --gold-light: #ffe57a;    /* brand "Light Accent" — Warm Gold */
  --red: #cb2c33;           /* brand "Accent" — Blood Red */

  /* type */
  --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  /* Buttons, nav links, status badges, and filter chips were all fully
     pill-shaped (radius 999px). Repeated across a page — five nav links,
     two hero buttons, three status badges, a CTA — that reads as a field of
     bubbles rather than a considered shape language. One moderate rounded
     rectangle for all of them instead. */
  --r-chip: 10px;
  --lift: 0 18px 40px -18px rgba(42, 31, 107, 0.45);
  /* Content cards rest on a soft shadow, like the hero's fanned cards, instead
     of a hairline outline — a hard 1px edge reads as a bordered UI tile, a
     diffused shadow reads as a card sitting on the table. Used for anything
     that IS a card of content; small functional controls (search, filter
     chips) keep the crisp hairline since they're UI, not content. */
  --card-rest: 0 8px 20px -12px rgba(42, 31, 107, 0.28);

  --page: 1180px;
  --reading: 42rem;
  --header-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Sticky footer: on a short page (a filtered games list down to one result,
   a short article, an empty search) the page used to fall shorter than the
   viewport and the footer floated up into the middle of the screen instead
   of sitting at the bottom. main grows to fill any leftover space so the
   footer always lands at the bottom of the viewport at minimum. */
#main-content { flex: 1 0 auto; }

img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.55rem); }
h3 { font-size: 1.25rem; line-height: 1.2; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

a { color: var(--violet-ink); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--violet); }

strong { font-weight: 700; }

.shell,
.site-shell { width: min(var(--page), calc(100% - 3rem)); margin-inline: auto; }
@media (max-width: 600px) { .shell, .site-shell { width: calc(100% - 2rem); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-honeypot { display: none; }

/* keyboard */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip-link {
  position: fixed; z-index: 200; top: 10px; left: 10px;
  padding: 0.7rem 1rem; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* small labels (sentence case, not shouty) */
.eyebrow, .section-kicker {
  margin: 0 0 0.6rem;
  color: var(--violet-ink);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.lede { max-width: 38rem; color: var(--ink-soft); font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; }

/* buttons */
.button, button.button, .resource-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.5rem;
  border: 2px solid var(--violet); border-radius: var(--r-chip);
  background: var(--violet); color: #fff;
  font: 700 1rem/1.1 var(--body);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.button:hover, .resource-link:hover { background: var(--violet-ink); border-color: var(--violet-ink); color: #fff; }
.button:active, .resource-link:active { transform: translateY(1px); }
.button.secondary, .button-secondary, .resource-link:not(.resource-print) {
  background: transparent; color: var(--violet-ink); border-color: var(--tint-deep);
}
.button.secondary:hover, .button-secondary:hover, .resource-link:not(.resource-print):hover {
  background: var(--violet-tint); border-color: var(--violet); color: var(--violet-ink);
}
.button-row, .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* status pills — the one place status color lives */
.status-playtesting, .status-active-playtesting { --s-bg: #dff3e7; --s-fg: #14683f; --s-dot: #1f8a56; }
.status-in-development { --s-bg: #ffefc2; --s-fg: #6f4a00; --s-dot: #e0a100; }
.status-seeking-publisher { --s-bg: #dfeaff; --s-fg: #17469b; --s-dot: #2a6bdf; }
.status-self-published, .status-produced { --s-bg: #e9e2ff; --s-fg: #43279f; --s-dot: #6a4be6; }
.status-retired { --s-bg: #ebeaf0; --s-fg: #55516e; --s-dot: #8b88a0; }

/* A colored dot + bold label reads as a status, without the filled
   background/border-radius "bubble" chrome repeated on every card, row,
   and hero across the site. */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0; background: none; border-radius: 0;
  color: var(--s-fg, var(--ink-soft));
  font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.pill::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--s-dot, currentColor); flex: none;
}

/* ---------- 2. Header & footer ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  /* Tied to --paper (not a hardcoded near-white) so the sticky header always
     reads as the same surface as the page below it, on any background color. */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(31, 27, 58, 0.06);
}
.header-inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
  font: 800 1.3rem/1 var(--display); letter-spacing: -0.03em;
}
.brand:hover { color: var(--ink); }
.brand img { width: 32px; height: 32px; object-fit: contain; }

.primary-nav { display: flex; align-items: center; gap: 0.25rem; }
.primary-nav a {
  padding: 0.55rem 1rem; border-radius: var(--r-chip);
  color: var(--ink-soft); font-size: 0.98rem; font-weight: 600; text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.primary-nav a:hover { background: var(--tint); color: var(--ink); }
.primary-nav a[aria-current] { background: var(--violet-tint); color: var(--violet-ink); }

.mobile-nav { display: none; position: relative; }
.mobile-nav summary {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--tint); color: var(--ink);
  cursor: pointer; list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.menu-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-nav nav {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  display: grid; gap: 2px; width: min(280px, calc(100vw - 2rem)); padding: 0.6rem;
  border-radius: var(--r-md); background: var(--card);
  box-shadow: 0 24px 50px -16px rgba(31, 27, 58, 0.35), 0 0 0 1px var(--line);
}
.mobile-nav nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 1rem;
  border-radius: var(--r-sm); color: var(--ink); font-weight: 600; text-decoration: none;
}
.mobile-nav nav a:hover, .mobile-nav nav a[aria-current] { background: var(--violet-tint); color: var(--violet-ink); }
@media (max-width: 860px) {
  .primary-nav { display: none; }
  .mobile-nav { display: block; }
}

/* Kept deliberately small — a footer only needs to close the page out, not
   make another statement. Tagline, a nav that mirrors the header, one
   copyright line. No restated scripture block, no summary paragraph. */
.site-footer { margin-top: 5rem; padding: 2rem 0; background: var(--felt); color: #dcd7f5; }
/* When the page's last section is a full-bleed tinted band, that standing
   top margin shows up as a stray strip of the plain page background wedged
   between the band and the (differently-colored) footer — the band's own
   padding already gives it room to breathe, so the extra margin is only
   ever wrong here. */
main:has(> .publisher-followup:last-child) + .site-footer { margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand .brand { color: #fff; }
.footer-tagline { margin: 0; color: var(--sun); font: 700 0.95rem/1.3 var(--display); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-weight: 600; font-size: 0.95rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem; color: #a9a2d6;
}
.footer-bottom a { color: #a9a2d6; }
@media (max-width: 600px) {
  .site-footer { margin-top: 3.5rem; padding: 1.75rem 0; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

/* ---------- 3. Home ---------- */
/* A plain, open hero — headline, copy, a photo — rather than a dark full-
   bleed panel with a fanned hand of cards competing for attention. */
.home-hero { padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.hero-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.hero-copy h1 { max-width: 11ch; }
.hero-copy .hero-lede { max-width: 30rem; margin: 1.25rem 0 1.75rem; }
.hero-note { max-width: 30rem; margin: 1.5rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); }
@media (max-width: 860px) { .hero-intro { grid-template-columns: 1fr; } .hero-copy h1 { max-width: none; } .hero-photo { order: -1; } }

.home-section { padding: clamp(4rem, 9vw, 7rem) 0 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.section-head p { max-width: 26rem; margin: 0; color: var(--ink-soft); }
.text-link { color: var(--violet-ink); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* featured */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.feature-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.feature-card:hover { color: var(--ink); }
.feature-card .card-art { border-radius: var(--r-lg); aspect-ratio: 5 / 4; }
.feature-card h3 { margin: 1.1rem 0 0.4rem; font-size: 1.5rem; }
.feature-card p { margin: 0 0 0.6rem; color: var(--ink-soft); }
.feature-card .meta { margin-top: auto; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.feature-card .pill { align-self: flex-start; margin-top: 1.1rem; }
.feature-card:hover .card-art img { transform: scale(1.04); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } .feature-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0 1.5rem; align-items: center; } .feature-card .card-art { grid-row: 1 / span 4; } .feature-card .pill { margin-top: 0; } .feature-card h3 { margin-top: 0.6rem; } }
@media (max-width: 560px) { .feature-card { display: flex; } }

/* logo art tile — shared by home, catalog, related games.
   Kept plain (no tint fill, no ring) so a logo just sits on the card the way
   the homepage hero's fanned cards do, rather than framed in its own box. */
.card-art {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--card); padding: 9%;
}
.card-art img {
  display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform 0.35s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.card-art img.opaque { border-radius: 10px; mix-blend-mode: unset; }

/* Full-bleed logo art (its own background baked in) must never multiply — that
   washes a light background out to invisible. This beats every ".foo img"
   multiply rule above and below regardless of source order.
   NOTE: use `unset`, not `normal` — an explicit `normal` here triggers a
   headless-Chromium compositing bug (image paints blank) when the ancestor
   has `overflow: hidden`; `unset` renders correctly and is computationally
   identical (mix-blend-mode is not inherited, so unset == initial == normal). */
:is(.card-art, .play-card, .publisher-game-media, .status-guide-example-media, .related-list .card-art) img.opaque {
  mix-blend-mode: unset;
}
.card-art .initials { font: 800 clamp(2rem, 6vw, 3rem)/1 var(--display); color: var(--violet-ink); opacity: 0.7; letter-spacing: -0.04em; }

/* quick-jump list — a short list of a few more games, scannable at a glance
   without repeating the full catalog. */
.jump-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.jump-list li { margin: 0; }
.jump-row {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.jump-row:hover { color: var(--ink); }
.jump-row:hover .jump-name { color: var(--violet-ink); }
/* A fixed padding, not a percentage — inside a flex item, percentage
   padding resolves against the flex container's width (1180px), not this
   element's own 3rem, which was inflating the box to ~236px. */
/* These thumbnails intermittently painted fully blank — a real Chromium
   image-decode/first-paint race with mix-blend-mode, not a deterministic
   CSS bug (it reproduced and cleared across repeated identical loads).
   At icon size, a blended background isn't worth that risk: turn the
   blend off so the logo always paints on the first frame. */
.jump-row .card-art { width: 3rem; height: 3rem; padding: 0.25rem; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); flex: none; }
.jump-row .card-art.bg-art { background-repeat: no-repeat; background-position: center; background-size: contain; }
.jump-row .card-art .initials { font-size: 0.9rem; }
.jump-row-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.jump-name { font: 700 1rem/1.25 var(--display); transition: color 0.15s; }
.jump-meta { color: var(--ink-soft); font-size: 0.85rem; }

/* table talk */
/* Top-aligned, not centered: the intro column is naturally shorter than the
   story list, and centering it made the two columns start at different
   heights — the heading floated mid-page while the list started at the
   top, which read as broken rather than intentional. A short left column
   next to a longer list is a normal editorial layout. */
.talk { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.talk-intro p { color: var(--ink-soft); }
/* A flowing list of rows separated by a rule, like the games catalog list —
   not a stack of separate white cards. */
.talk-list { display: block; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.talk-list li { margin: 0; }
.talk-item {
  display: block; padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.talk-item:hover h3 { color: var(--violet-ink); }
.talk-item small { display: block; margin-bottom: 0.3rem; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }
.talk-item h3 { font-size: 1.25rem; margin-bottom: 0.3rem; transition: color 0.15s; }
.talk-item p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; }
@media (max-width: 860px) { .talk { grid-template-columns: 1fr; } }

/* publisher CTA — a filled dark band, matching the same dark-callout
   treatment used elsewhere on the site (footer, article closers). A
   deliberate break in the page's rhythm, not another flowing section. */
.pub-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(2rem, 4vw, 2.75rem); border-radius: var(--r-xl); background: var(--felt); color: #dcd7f5;
}
.pub-strip h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 30rem; color: #fff; }
.pub-strip p { margin: 0.6rem 0 0; color: #c9c3ea; max-width: 34rem; }
.pub-strip .button.secondary { background: #fff; color: var(--felt); border-color: #fff; }
.pub-strip .button.secondary:hover { background: var(--sun); border-color: var(--sun); color: var(--felt-deep); }

/* ---------- 4. Catalog ---------- */
.catalog-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; }
.catalog-hero h1 { max-width: 14ch; }
.catalog-hero p { margin: 1.25rem 0 0; max-width: 34rem; color: var(--ink-soft); font-size: 1.15rem; }
.catalog-tools { display: grid; gap: 1rem; margin: 1rem 0 2rem; }
.search { position: relative; display: block; max-width: 30rem; }
.search svg { position: absolute; left: 1.1rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.search input {
  width: 100%; min-height: 54px; padding: 0 1.25rem 0 3.1rem;
  border: 2px solid transparent; border-radius: var(--r-chip); background: var(--card);
  box-shadow: 0 0 0 1px var(--line); color: var(--ink); font: 500 1.05rem var(--body);
}
.search input::placeholder { color: #8a86a3; }
.search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-tint); }
/* A quieter filter bar — plain text + dot for the inactive options, and only
   the active filter gets a filled indicator. Same filtering, less visual
   noise sitting right under the page title. */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.filter {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0;
  border-radius: 0; background: none; box-shadow: none;
  color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; text-decoration: none;
  transition: color 0.15s;
}
.filter:hover { color: var(--ink); }
.filter[aria-current] { padding: 0 0.9rem; border-radius: var(--r-chip); background: var(--ink); color: #fff; min-height: 40px; }
.filter .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--s-dot, var(--violet)); }
.filter[aria-current] .dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
.filter .n { color: var(--ink-soft); font-weight: 600; font-size: 0.88rem; }
.filter[aria-current] .n { color: #cfcaf0; }
.result-count { margin: 0 0 1rem; color: var(--ink-soft); font-weight: 600; }
/* Shown only once a search term or a non-"All" status filter is active —
   a single, obvious way back to the full list instead of having to notice
   that re-clicking "All" or hand-clearing the search box does the same thing. */
.clear-filters { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; color: var(--violet-ink); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.clear-filters:hover { text-decoration: underline; }
.clear-filters[hidden] { display: none; }

/* Catalog: a fast single-column list — logo chip, name, then right-aligned
   facts columns — rather than a grid of framed cards. Scan speed over
   showcase; the game's own page is where artwork gets room to breathe. */
.game-list-head, .game-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 4.5rem 4.5rem 8.5rem 5.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
}
.game-list { border-top: 1px solid var(--line); }
.game-list-head {
  padding-bottom: 0.6rem;
  color: var(--ink-soft); font-size: 0.85rem; font-weight: 700;
}
.game-list-head .col-players, .game-list-head .col-time, .game-list-head .col-play { text-align: right; }
.game-list-head .col-status { text-align: left; }
.game-row {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s;
}
.game-row:hover { background: var(--tint); color: var(--ink); }
.game-row .row-mark.card-art {
  width: 2.5rem; height: 2.5rem; padding: 12%;
  border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line);
}
.game-row .row-mark.bg-art { background-repeat: no-repeat; background-position: center; background-size: contain; }
.game-row .row-mark .initials { font-size: 1rem; opacity: 1; }
.game-row .row-name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.game-row .row-title { font: 700 1.05rem/1.25 var(--display); color: var(--ink); }
.game-row .row-type { color: var(--ink-soft); font-size: 0.9rem; }
.game-row .row-players, .game-row .row-time { text-align: right; color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; }
/* Left-aligned in a fixed-width column so every row's dot lines up in one
   clean vertical line — right-aligning left the dots wobbling left and
   right as the status text length changed row to row. */
.game-row .pill { justify-self: start; width: 100%; justify-content: flex-start; text-align: left; }
.game-row .row-play { text-align: right; color: var(--violet-ink); font-weight: 700; font-size: 0.92rem; }
.game-row.retired .row-mark { filter: grayscale(0.9); opacity: 0.7; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-soft); font-size: 1.1rem; }
@media (max-width: 700px) {
  .game-list-head { display: none; }
  .game-row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .game-row .row-players, .game-row .row-time, .game-row .row-play { display: none; }
}

/* ---------- 5. Game pages ---------- */
.game-context { background: transparent; }
.game-context-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 1rem 0 0; }
.game-breadcrumb, .table-talk-breadcrumb, .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--ink-soft); }
.game-breadcrumb a, .table-talk-breadcrumb a, .crumbs a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.game-breadcrumb a:hover, .table-talk-breadcrumb a:hover, .crumbs a:hover { color: var(--violet-ink); text-decoration: underline; }
.crumb-separator { opacity: 0.5; }
.game-breadcrumb [aria-current], .crumbs [aria-current] { color: var(--ink); font-weight: 700; }
/* Generic breadcrumb sitting directly at the top of <main> on pages that
   don't already carry their own (about, contact, publishers, playtesting,
   copyright, table talk index, and the catalog). */
.crumbs { padding: 1.25rem 0 0; }
/* Plain jump links, not a segmented-control bubble sitting in its own
   tinted pill container. */
.game-local-nav { display: flex; gap: 1.25rem; }
.game-local-nav a { color: var(--ink-soft); font-size: 0.95rem; font-weight: 700; text-decoration: none; }
.game-local-nav a:hover { color: var(--violet-ink); text-decoration: underline; }
.game-status-ribbon { display: none; }

/* One neutral hero background across every game page, whatever its status —
   a status-tinted band made the header-to-hero seam look mismatched from
   page to page, and made colors feel arbitrary rather than consistent.
   Status is communicated by the dot + label only (.hero-status). */
.game-hero-band { padding: clamp(1.75rem, 4vw, 3rem) 0; background: var(--tint); }
.game-hero {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem);
}
.logo-stage {
  display: grid; place-items: center; aspect-ratio: 1; padding: 8%;
  border-radius: var(--r-lg); background: var(--card);
}
.logo-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-stage.no-logo { background: repeating-linear-gradient(-45deg, var(--card), var(--card) 12px, var(--paper) 12px, var(--paper) 24px); }
.logo-unavailable { margin: 0; padding: 0.5rem 1rem; border-radius: var(--r-chip); background: var(--card); color: var(--ink-soft); font-weight: 700; }
.hero-status { margin: 0 0 1rem; }
.game-title { font-size: clamp(2.4rem, 5vw, 4rem); }
.game-summary { max-width: 34rem; margin: 1rem 0 1.5rem; color: var(--ink-soft); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; }
/* Plain label/value pairs, dot-separated — not a row of small filled boxes. */
.fact-line { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0 0 1.75rem; }
.fact-line div { position: relative; min-width: 0; padding: 0; }
.fact-line div:not(:first-child)::before { content: "\2022"; position: absolute; left: -0.95rem; color: var(--ink-soft); }
.fact-line dt { color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; }
.fact-line dd { margin: 0; font: 700 1.15rem/1.3 var(--display); }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.hero-links a:first-child {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.7rem 1.5rem; border-radius: var(--r-chip);
  background: var(--violet); color: #fff; font-weight: 700; text-decoration: none;
}
.hero-links a:first-child:hover { background: var(--violet-ink); color: #fff; }
.hero-links a:not(:first-child) {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0.7rem 1.25rem; border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 2px var(--tint-deep); background: var(--card); color: var(--violet-ink); font-weight: 700; text-decoration: none;
}
.hero-links a:not(:first-child):hover { box-shadow: inset 0 0 0 2px var(--violet); }
.hero-links a.playtest-link { background: var(--s-bg); color: var(--s-fg); box-shadow: none; }
.retired-note { margin: 0; padding: 0.7rem 1rem; border-radius: var(--r-sm); background: var(--card); color: var(--ink-soft); font-weight: 600; }
@media (max-width: 800px) { .game-hero { grid-template-columns: 1fr; } .logo-stage { max-width: 22rem; margin-inline: auto; width: 100%; } }

.about-band { padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.about-copy { max-width: var(--reading); }
.about-copy h2 { margin-bottom: 1.25rem; }
.about-copy .eyebrow { display: none; }
.need-list { padding: 0 0 0 1.25rem; border-left: 3px solid var(--sun); }
.need-list h3 { margin-bottom: 0.6rem; font-size: 1.1rem; }
.component-list { margin: 0; padding-left: 1.1rem; }
.need-list p { margin: 0; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* rules */
.rules { padding-top: clamp(3rem, 6vw, 5rem); }
.rules-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* Grid items default to min-width: auto, so a wrapped flex nav's reported
   min-content width could still force this track wider than the viewport at
   narrow widths — override it explicitly on both columns. */
.rules-layout > * { min-width: 0; }
.rules-nav { position: sticky; top: calc(var(--header-h) + 1.25rem); max-height: calc(100vh - var(--header-h) - 2.5rem); overflow: auto; padding: 1.25rem; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--card-rest); }
.rules-nav h2 { margin-bottom: 0.75rem; font-size: 1.5rem; }
.rules-nav .section-kicker { margin-bottom: 0.2rem; font-size: 0.88rem; color: var(--ink-soft); }
.rules-nav nav { display: grid; gap: 1px; }
.rules-nav nav a { padding: 0.45rem 0.7rem; border-radius: var(--r-sm); color: var(--ink-soft); font-size: 0.95rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.rules-nav nav a:hover { background: var(--violet-tint); color: var(--violet-ink); }
.rule-content { max-width: 46rem; }
.rule-content > section { margin: 0 0 3rem; }
.rule-content h2 { margin: 0 0 1rem; padding-top: 0.25rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.rule-content h3 { margin: 1.75rem 0 0.6rem; font-size: 1.25rem; }
.rule-content li { line-height: 1.55; }
.rule-content ul { padding-left: 1.2rem; }
.rule-content li::marker { color: var(--violet); }
.table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; border-radius: var(--r-md); box-shadow: var(--card-rest); background: var(--card); }
.table-wrap table, .rule-content table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.rule-content th, .rule-content td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; }
.rule-content thead th { background: var(--tint); color: var(--ink); font: 700 0.95rem var(--body); white-space: nowrap; }
.rule-content tbody tr:nth-child(even) { background: var(--paper); }
.rule-figure, .game-supplemental-media { margin: 1.5rem 0; }
.rule-figure img, .game-supplemental-media > img { display: block; width: 100%; max-width: 32rem; height: auto; margin: 0 auto; border-radius: var(--r-md); box-shadow: var(--card-rest); }
/* A supplemental-media section can instead hold several captioned concept-art
   figures (.game-flow-gallery-item) — lay those out as a card grid rather than
   letting each full-size image stack alone at page width. */
.game-supplemental-media:has(.game-flow-gallery-item) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem;
}
.game-flow-gallery-item { margin: 0; }
.game-flow-gallery-image { overflow: hidden; border-radius: var(--r-md); box-shadow: var(--card-rest); }
.game-flow-gallery-image img { display: block; width: 100%; height: auto; }
.game-flow-gallery-item figcaption { margin-top: 0.6rem; }
.game-flow-gallery-item figcaption strong { display: block; margin-bottom: 0.2rem; font: 700 1.05rem var(--display); }
.game-flow-gallery-item figcaption span { display: block; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 560px) { .game-supplemental-media:has(.game-flow-gallery-item) { grid-template-columns: 1fr; } }

/* A plain divider list, not a stack of separate white cards — each question
   is a row with a bottom border, the same "flowing list" treatment used for
   Table Talk stories and status-guide sections elsewhere on the site. */
.faq-item, .about-questions details { margin: 0; border-bottom: 1px solid var(--line); }
.faq-item:first-of-type, .about-questions details:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary, .about-questions summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0;
  cursor: pointer; font: 700 1.05rem/1.35 var(--body); list-style: none;
}
.faq-item summary::-webkit-details-marker, .about-questions summary::-webkit-details-marker { display: none; }
.faq-item summary::after, .about-questions summary::after {
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--violet-tint);
  background-image: linear-gradient(var(--violet-ink), var(--violet-ink)), linear-gradient(var(--violet-ink), var(--violet-ink));
  background-size: 0.8rem 2px, 2px 0.8rem; background-position: center; background-repeat: no-repeat;
}
.faq-item[open] summary::after, .about-questions details[open] summary::after { background-size: 0.8rem 2px, 0 0; }
.faq-answer, .about-questions details > p { padding: 0 0 1.25rem; margin: 0; max-width: 46rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.rule-content > section#faq > p { color: var(--ink-soft); }

/* resources + related */
.resources-band { margin-top: clamp(2rem, 4vw, 3rem); }
.resources-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-xl); background: var(--tint); }
.resources-layout header { flex: 1 1 18rem; }
.resources-layout h2 { font-size: 1.75rem; }
.resources-layout header p { margin: 0.4rem 0 0; color: var(--ink-soft); }
.resources-layout .section-kicker { display: none; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.resource-downloads { flex: 1 1 100%; }
.resource-downloads h3 { margin-bottom: 0.6rem; font-size: 1.05rem; }
.resource-downloads ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.resource-downloads li { margin: 0; }
.resource-downloads a { display: inline-flex; gap: 0.4rem; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: var(--r-chip); background: var(--card); font-weight: 700; text-decoration: none; }
.resource-downloads a:hover { box-shadow: 0 0 0 2px var(--violet); }
.resource-downloads a span { color: var(--ink-soft); font-weight: 600; }
.source-resource-details:empty { display: none; }
.source-resource-details { margin-top: 1rem; }

.related-games { padding-top: clamp(3rem, 6vw, 5rem); }
.related-games h2 { margin-bottom: 1.5rem; }
.related-games .section-kicker { display: none; }
.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.related-list a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 0 1rem; align-items: center;
  padding: 0.8rem; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--card-rest); color: var(--ink); text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.related-list a:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--violet), var(--lift); color: var(--ink); }
.related-list .card-art { grid-row: 1 / span 2; width: 5.5rem; aspect-ratio: 1; border-radius: var(--r-md); padding: 0.4rem; }
.related-list strong { align-self: end; font: 700 1.1rem/1.2 var(--display); }
.related-list a > span:last-child { align-self: start; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.35; }
@media (max-width: 860px) { .related-list { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .rules-layout { grid-template-columns: 1fr; }
  .rules-nav { position: static; max-height: none; }
  .rules-nav nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .rules-nav nav a { padding: 0.5rem 0.9rem; background: var(--tint); border-radius: var(--r-chip); }
}

/* ---------- 6. Content pages ---------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0 0; }
.page-hero { padding: clamp(2.5rem, 7vw, 5rem) 0 0; }
/* Equal content width everywhere: the hero's reading-rail used to cap out
   narrower than the shell every other section uses, and a per-character
   h1 cap made a long title (an article headline) wrap into a tall, narrow
   tower instead of using the same width as the rest of the page. Both
   removed — a hero now uses the same width as everything else on the page. */
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.page-hero .lede { max-width: 46rem; margin: 1.25rem 0 0; }
.page-hero .eyebrow { font-size: 1rem; }
.soft, .section-soft { background: transparent; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.soft .split > div { padding: 0 0 0 clamp(1.25rem, 3vw, 1.75rem); border-left: 4px solid var(--sun); }
.soft .split > div:nth-child(2) { border-left-color: var(--violet); }
.soft .split h2 { margin-bottom: 0.9rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.soft .split p:last-child { margin-bottom: 0; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* about */
/* This mission section carried real weight on the old homepage — a plain
   page background here made it read as just another paragraph. A soft
   full-bleed band gives it the same presence the "Faith & Fun" section
   gets further down, and a wider photo gives it more visual room. */
.about-intro { background: var(--tint); padding: clamp(4rem, 9vw, 6.5rem) 0; }
.about-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-feature-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--lift); }
.about-feature-copy { max-width: 36rem; }
/* This is the section's real headline — sized and weighted like one, not a
   bolded paragraph — since it carries the page's most important point
   rather than a supporting detail. .mini-heading (see build.py) reliably
   flags a paragraph whose ENTIRE content is one <strong>, unlike a CSS
   :has(> strong:only-child) selector, which also matches an ordinary
   sentence with one bold word in it. */
.about-feature-copy .mini-heading:first-child {
  margin: 0 0 1rem; font: 800 clamp(1.75rem, 3.2vw, 2.5rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink);
}
.about-feature-copy .mini-heading:first-child strong { font-weight: inherit; }
.about-feature-copy p:nth-child(2) { font-size: 1.15rem; }
.about-feature-copy .mini-heading:not(:first-child) { margin: 1.75rem 0 0.35rem; font: 700 1.3rem/1.2 var(--display); }
@media (max-width: 800px) { .about-feature { grid-template-columns: 1fr; } .about-feature-media img { aspect-ratio: 4 / 3; } }

/* This is the page's real headline claim — what makes Disrupt Games
   different from ordinary game publishers. It gets real prominence from
   scale (a big full-bleed band, a large headline) and a light tint,
   explicitly NOT a dark background — a dark callout band is exactly the
   heavy treatment being removed everywhere else on this site. */
.about-content-promise { padding: clamp(3.5rem, 8vw, 5.5rem) 0; background: var(--tint); }
.content-promise-intro { max-width: 42rem; margin-bottom: 3rem; }
.content-promise-intro .eyebrow { display: block !important; color: var(--violet-ink); }
.content-promise-intro h2 { margin-bottom: 0.9rem; font-size: clamp(2.2rem, 4.5vw, 3.25rem); color: var(--ink); letter-spacing: -0.02em; }
.content-promise-intro p { color: var(--ink-soft); font-size: 1.2rem; }
.content-promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.content-promise-item { padding: 0 0 0 1.25rem; border-left: 4px solid var(--sun); }
.content-promise-item:nth-child(2) { border-left-color: var(--red); }
.content-promise-item:nth-child(3) { border-left-color: var(--violet); }
.content-promise-item h3 { margin-bottom: 0.5rem; font-size: 1.5rem; color: var(--sun-ink); }
.content-promise-item:nth-child(2) h3 { color: var(--red); }
.content-promise-item:nth-child(3) h3 { color: var(--violet-ink); }
.content-promise-item p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
@media (max-width: 800px) { .content-promise-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Equal content width, full stop: this used to cap at 46rem while the rest
   of the page (the mission section, the content-promise grid) ran the full
   shell width, so the page visibly narrowed and widened section to section.
   The Faith & Fun quotes and FAQ list now use the same width as everything
   else — only the blockquote's own type treatment still reads as content,
   not the column itself. */
.about-reading { max-width: none; }
.about-foundation blockquote.quote { max-width: 46rem; }
/* A full-bleed soft tint band breaks the page up the way a boxed callout
   would, without dropping a loud, contained, rounded panel into the middle
   of the page — the section itself carries the color, the text inside it
   stays plain content at the site's one standard width. */
.about-foundation { background: var(--tint-deep); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.about-foundation h2 { margin-bottom: 1.25rem; }
.about-foundation .eyebrow { color: var(--violet-ink); }
blockquote.quote { margin: 1.75rem 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--sun); }
blockquote.quote p { margin: 0; color: var(--ink); font: 700 clamp(1.3rem, 2.4vw, 1.75rem)/1.3 var(--display); letter-spacing: -0.02em; }
blockquote.quote cite { display: block; margin-top: 0.5rem; color: var(--violet-ink); font: 600 0.98rem var(--body); font-style: normal; }
.about-questions h2 { margin-bottom: 1.5rem; }
.about-questions .eyebrow { display: none; }

/* publishers */
.publisher-hero { padding: clamp(2.5rem, 7vw, 5rem) 0 0; }
.publisher-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 2rem 4rem; align-items: end; }
.publisher-hero h1 { max-width: 14ch; }
.publisher-hero .lede { margin-top: 1.25rem; }
/* A boxed stat callout, matching the live site's header treatment — the one
   place on this page a contained card is the right call, since it's meant
   to draw the eye as a distinct number, not another content section. */
/* A card-white fill, not the same tint as the band section right below it —
   matching colors made the box's rounded bottom corners look like a seam
   glitch where the two met. */
/* Plain text with an accent border, not a floating boxed card — a stat this
   small doesn't need a shadowed panel to earn attention. */
.publisher-proof { padding: 0 0 0 1.25rem; border-left: 4px solid var(--violet); }
.publisher-proof small { display: block; color: var(--ink-soft); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; }
.publisher-proof strong { display: block; margin: 0.4rem 0 0.4rem; font: 800 4rem/1 var(--display); letter-spacing: -0.05em; color: var(--violet-ink); }
.publisher-proof p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 800px) { .publisher-hero-grid { grid-template-columns: 1fr; } }
/* A full-bleed light band behind the game cards draws the eye to them, the
   way the live site's off-white section does against its white cards. */
.publisher-opportunities { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--tint); }
.publisher-opportunities-header { margin-bottom: 2rem; }
.publisher-opportunities-header h2 { margin-bottom: 0.75rem; }
.publisher-opportunities-header .eyebrow { display: none; }
/* A flowing, full-width row list — not a grid of separate boxed cards. Each
   game fills the whole section width instead of sitting in a shadowed
   bubble sized to half of it, matching the same divider-row treatment the
   catalog and homepage use for game listings. */
.publisher-grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.publisher-game {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.75rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.publisher-game:hover .publisher-game-copy h2 { color: var(--violet-ink); }
.publisher-game-media { width: 5.5rem; height: 5.5rem; border-radius: var(--r-md); background: var(--card); }
.publisher-game-media.bg-art { background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; padding: 10%; }
.publisher-game-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.publisher-game-copy .status { --s-dot: #2a6bdf; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; }
.publisher-game-copy .status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--s-dot); }
.publisher-game h2 { font-size: 1.5rem; }
.publisher-hook { margin: 0; max-width: 46rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.publisher-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.92rem; font-weight: 600; }
.publisher-cta { margin-top: 0.25rem; color: var(--violet-ink); font-weight: 700; }
@media (max-width: 480px) { .publisher-game { grid-template-columns: 1fr; } .publisher-game-media { width: 4rem; height: 4rem; } }
/* Mirrors the live site's closing section: a plain light full-bleed band,
   two plain columns, no border accents or boxes — not a styled callout. */
/* NOTE: the element in the page only carries class="publisher-followup" —
   a compound ".section.publisher-followup" selector here never matches,
   which silently dropped this whole rule (padding, background, all of it)
   on the real page even though it looked right in isolated testing. */
.publisher-followup { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--tint); }
.publisher-followup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.publisher-followup h2 { margin-bottom: 0.75rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.publisher-followup .eyebrow { display: block; color: var(--violet-ink); }
@media (max-width: 800px) { .publisher-followup-grid { grid-template-columns: 1fr; } }

/* copyright */
/* All page shells share one width (--page, 1180px, set in 01-base.css) so
   nothing visibly narrows or re-centers moving between pages. Prose-only
   pages just cap the readable text measure and left-align it flush with
   that shell's own edge, instead of shrinking + re-centering the whole
   container at a different width. */
.copyright-page, main > article.site-shell.reading-rail {
  max-width: 46rem;
  margin-left: max(1.5rem, calc((100% - var(--page)) / 2));
  margin-right: auto;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
main > article.site-shell.reading-rail h1 { margin-bottom: 1.5rem; font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* ---------- 7. Forms ---------- */
/* A form page's own content (the form itself) is naturally compact, so the
   generic oversized page-hero left a big void above it. Trim the hero on
   these pages specifically instead of shrinking it everywhere. */
body:has(.form-layout) .page-hero { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 0.5rem; }
body:has(.form-layout) .page-hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 4vw, 3rem); }
body:has(.form-layout) .page-hero + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* The form sits as ordinary page content — no card panel, shadow, or fill
   setting it apart from the copy beside it. */
.form-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.form-layout > .form-side { grid-column: 1; display: flex; flex-direction: column; gap: 1.5rem; align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.form-layout > form { grid-column: 2; }
.form-intro h2 { margin-bottom: 1rem; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.form-intro .eyebrow { display: none; }
.form-intro p { color: var(--ink-soft); }
.playtest-game-list { padding: 0 0 0 1.25rem; border-left: 4px solid var(--sun); }
.playtest-game-list h3 { margin-bottom: 0.75rem; font-size: 1.15rem; }
.playtest-game-list ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.playtest-game-list li { margin: 0; }
.playtest-game-list a { color: var(--violet-ink); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.playtest-game-list a:hover { text-decoration: underline; }
.playtest-game-list a:hover { box-shadow: 0 0 0 2px var(--violet); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label, fieldset { display: grid; gap: 0.45rem; font-weight: 700; font-size: 1rem; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 0.45rem; font-weight: 700; }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  width: 100%; min-height: 50px; padding: 0.75rem 1rem; border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); font: 500 1rem/1.4 var(--body);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 4px var(--violet-tint); }
.radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-group label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0.5rem 1.1rem; border-radius: var(--r-chip); background: var(--paper); box-shadow: 0 0 0 2px var(--line); font-weight: 600; cursor: pointer; }
.radio-group label:hover { box-shadow: 0 0 0 2px var(--violet); }
.radio-group label:has(input:checked) { background: var(--violet-tint); box-shadow: 0 0 0 2px var(--violet); color: var(--violet-ink); }
.radio-group input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--violet); }
.form-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 900px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-layout > .form-side { grid-column: 1; position: static; }
  .form-layout > form { grid-column: 1; }
}
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- 8. Table Talk ---------- */
/* The index page's intro (eyebrow/h1/lede) stays at reading width, but the
   story list itself gets its own wider column beside it instead of being
   nested inside that same narrow rail — a single ~46rem column left the rest
   of the page empty on desktop. */
.talk-index-hero { padding-bottom: 0; }
.talk-index-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.talk-index-layout .reading-rail { max-width: none; position: sticky; top: 1.5rem; }
@media (max-width: 860px) { .talk-index-layout { grid-template-columns: 1fr; } .talk-index-layout .reading-rail { position: static; } }
/* A flowing, numbered editorial list — not a stack of separate cards. The
   first (most recent) story gets a little more visual weight — a top rule
   and a slightly larger headline — so it reads as "start here" without
   turning into a separate boxed/offset card. */
.story-list { display: grid; gap: 2.25rem; max-width: none; }
.story { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--line); }
.story:last-child { padding-bottom: 0; border-bottom: 0; }
.story:first-child { padding-top: 1.75rem; border-top: 3px solid var(--sun); }
.story:first-child h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.story-number { display: block; color: var(--violet-ink); font: 800 1.05rem/1.6 var(--display); }
.story .eyebrow { margin-bottom: 0.4rem; color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; }
.story h2 { margin-bottom: 0.6rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.story h2 a { color: var(--ink); text-decoration: none; }
.story h2 a::after { content: ""; position: absolute; inset: 0; }
.story:hover h2 a { color: var(--violet-ink); }
.story p:last-child { margin: 0; color: var(--ink-soft); }
@media (max-width: 560px) { .story { grid-template-columns: 1fr; } .story-number { margin-bottom: 0.2rem; } }

/* The breadcrumb, hero, and content wrapper all use the site's standard
   1180px shell now, same as every other page — no page-specific width here.
   Only the actual reading text (.prose) caps itself to a comfortable
   measure and left-aligns within that shell, so headings and breadcrumbs
   sit at full width while paragraphs don't run edge-to-edge. */
.article-page .page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.table-talk-breadcrumb { padding-top: 1.25rem; }
.article-page .page-content { padding-top: 2rem; }
.prose {
  /* Equal content width on every page, full stop: no narrower cap here
     than the shell every other page uses. */
  font-size: 1.25rem; line-height: 1.8;
}
.prose > p:first-child.eyebrow, .prose .dd-opening-lead { display: none; }
.prose h2 { margin: 3rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.3rem); clear: both; }
.prose h3 { margin: 2rem 0 0.6rem; }
/* A section-kicker eyebrow directly before its heading must read as a
   pair. Adjacent vertical margins collapse to the LARGER of the two, so an
   eyebrow's small bottom margin sitting next to the heading's big top
   margin collapsed to the heading's 3rem gap — pulling the eyebrow visually
   toward the section ABOVE instead of the heading it labels. Move the big
   separating gap onto the eyebrow itself and zero the heading's own
   top margin so the pair stays tight regardless of collapsing. */
.prose .eyebrow:has(+ h2), .prose .eyebrow:has(+ h3) { margin-top: 3rem; }
.prose .eyebrow + h2, .prose .eyebrow + h3 { margin-top: 0; }
.prose p, .prose li { color: #2b2748; }
.prose .eyebrow { color: var(--violet-ink); }
.prose blockquote.quote, .dd-pullquote, .rights-guide-quote {
  margin: 2.25rem 0; padding: 1.5rem 1.75rem; border-left: 5px solid var(--sun);
  background: var(--tint); border-radius: var(--r-md);
}
.prose blockquote.quote p, .dd-pullquote p, .rights-guide-quote p { color: var(--ink); font: 700 clamp(1.4rem, 2.6vw, 1.9rem)/1.28 var(--display); letter-spacing: -0.02em; }
.rights-guide-quote-purple { border-left-color: var(--violet); }
.dd-breakout { width: min(64rem, 100vw - 3rem); margin-left: 50%; transform: translateX(-50%); }
.dd-pullquote.dd-breakout { width: min(46rem, 100%); margin-left: 0; transform: none; }
.dd-figure { margin: 2.25rem 0; }
/* .dd-figure's shorthand margin above resets margin-left, which would otherwise cancel
   .dd-breakout's centering offset on figures carrying both classes (equal specificity,
   later source order wins) — restore it here with a higher-specificity selector. */
.dd-figure.dd-breakout { margin-left: 50%; }
.dd-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.dd-figure-crest { max-width: 12rem; margin-inline: auto; }
/* Smaller reference images (a crest, a card, an icon) read better tucked
   beside the paragraph that discusses them than stretched full-width like a
   photograph — matches how these sit on the live site. */
@media (min-width: 640px) {
  .dd-figure-crest { float: right; width: 11rem; max-width: 11rem; margin: 0.25rem 0 1.25rem 2rem; }
}
.dd-figure figcaption { margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.dd-game-feature { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-block: 2.25rem; padding: 1.5rem; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--card-rest); transition: box-shadow 0.2s; }
.dd-game-feature:has(a:hover) { box-shadow: 0 0 0 2px var(--violet), var(--lift); }
.dd-game-feature.dd-breakout { width: min(46rem, 100%); margin-left: 0; transform: none; }
.dd-game-media img { display: block; width: 100%; border-radius: var(--r-md); }
.dd-game-copy h3 { margin: 0.25rem 0 0.5rem; }
.dd-game-copy p:not(.eyebrow) { margin: 0 0 1rem; line-height: 1.55; }
.dd-game-copy .eyebrow { margin: 0; font-size: 0.9rem; }
@media (max-width: 560px) { .dd-game-feature { grid-template-columns: 1fr; } .dd-game-media { max-width: 12rem; } }
.dd-mechanic-grid, .dd-triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 2rem 0; }
.dd-mechanic-grid.dd-breakout, .dd-triad.dd-breakout, .dd-source-grid.dd-breakout, .dd-image-credits.dd-breakout { width: 100%; margin-left: 0; transform: none; }
.dd-mechanic-card, .dd-triad > div, .dd-source-card { padding: 0 0 0 1.1rem; border-left: 3px solid var(--sun); }
.dd-triad > div:nth-child(2) { border-left-color: var(--violet); }
.dd-triad > div:nth-child(3) { border-left-color: var(--ink-soft); }
.dd-mechanic-card p, .dd-triad p { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.5; }
.dd-suit { display: block; margin-bottom: 0.25rem; font: 800 1.7rem/1 var(--display); color: var(--violet-ink); }
.dd-triad h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.dd-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.85rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.dd-source-card { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.dd-image-credits { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--card); box-shadow: var(--card-rest); font-size: 0.98rem; }
.dd-image-credits summary { cursor: pointer; font-weight: 700; }

/* status guide */
.status-guide-opening, .rights-guide-lead { font: 600 clamp(1.25rem, 2.2vw, 1.5rem)/1.5 var(--body); color: var(--ink) !important; }
/* A genuine callout (a real data snapshot the reader should notice) gets a
   light tinted panel, not just a border — the kind of true callout
   treatment that earns a background rather than the plain left-border
   pattern used for structural, non-callout content elsewhere. */
.status-guide-snapshot { margin: 2.5rem 0; padding: 1.75rem 2rem; border-radius: var(--r-lg); background: var(--tint); }
.status-guide-snapshot h3 { margin: 0 0 0.35rem; }
.status-guide-snapshot .eyebrow { display: block !important; margin-bottom: 0.2rem; color: var(--ink-soft); }
/* A flowing, accent-bordered row — matching the homepage's status stats —
   instead of five filled colored badges in a grid. */
.status-guide-map { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 1.25rem; }
.status-guide-chip { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 8rem; padding-left: 0.9rem; border-left: 3px solid var(--s-dot); color: var(--ink); text-decoration: none; }
.status-guide-chip strong { font-size: 1rem; color: var(--s-fg); }
.status-guide-chip span { font-size: 0.9rem; color: var(--ink-soft); }
.status-guide-chip:hover { color: var(--ink); }
.status-guide-chip:hover strong { text-decoration: underline; }
.status-guide-section { margin: 3rem 0; padding: 2rem 0 0; border-top: 1px solid var(--line); }
.status-guide-section:first-of-type { border-top: none; padding-top: 0; }
.status-guide-section h2 { margin: 0 0 0.9rem; }
.status-guide-label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--s-fg); font: 700 1.1rem/1.3 var(--body); letter-spacing: 0; }
.status-guide-label::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--s-dot); }
.status-guide-thesis { margin-bottom: 1rem; font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.25 var(--display); color: var(--ink) !important; letter-spacing: -0.02em; }
/* A callout that reads as one, but plain: colored left border and tinted
   label text, never a filled pastel box. */
.status-guide-reader { padding: 0 0 0 1.25rem; border-left: 3px solid var(--s-dot); background: none; color: var(--ink) !important; }
.status-guide-reader strong { color: var(--s-fg); }
.status-guide-example { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.25rem; align-items: center; margin-top: 1.25rem; padding: 0.9rem 0 0.9rem 1.1rem; border-left: 3px solid var(--line); border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-decoration: none; }
.status-guide-example:hover { border-left-color: var(--violet); color: var(--ink); }
.status-guide-example-media { display: grid; place-items: center; aspect-ratio: 1; padding: 0.4rem; border-radius: var(--r-md); background: transparent; }
.status-guide-example-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.status-guide-example-copy { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.98rem; line-height: 1.45; }
.status-guide-example-copy .eyebrow { display: block !important; margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.status-guide-example-copy strong { font: 700 1.2rem/1.2 var(--display); }
.status-guide-example-link { color: var(--violet-ink); font-weight: 700; }
.status-guide-change-list { display: grid; gap: 0.6rem; margin: 1.25rem 0; }
.status-guide-change-list > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; padding: 0.75rem 0 0.75rem 1.1rem; border-left: 3px solid var(--sun); }
@media (max-width: 560px) { .status-guide-change-list > div { grid-template-columns: 1fr; gap: 0.2rem; } .status-guide-example { grid-template-columns: 4.5rem minmax(0, 1fr); } }
.status-guide-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.status-guide-audience-grid > div { padding: 0 0 0 1.1rem; border-left: 3px solid var(--sun); }
.status-guide-audience-grid h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.status-guide-audience-grid p { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 640px) { .status-guide-audience-grid { grid-template-columns: 1fr; } }
/* A plain section closer, not a dark filled callout box. */
.status-guide-close, .rights-guide-close { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.status-guide-close h2, .rights-guide-close h2 { margin-top: 0; }
.rights-guide-close .button.secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.rights-guide-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* rights guide */
.rights-guide-values, .rights-guide-cc-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.5rem; margin: 1.75rem 0; }
.rights-guide-values > div, .rights-guide-cc-terms > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0 0 0.9rem; border-left: 3px solid var(--sun); }
.rights-guide-values > div:nth-child(2), .rights-guide-cc-terms > div:nth-child(2) { border-left-color: var(--violet); }
.rights-guide-values > div:nth-child(4), .rights-guide-cc-terms > div:nth-child(4) { border-left-color: var(--blue, #3d7cc9); }
.rights-guide-values > div:nth-child(3), .rights-guide-cc-terms > div:nth-child(3) { border-left-color: var(--ink-soft); }
.rights-guide-values strong, .rights-guide-cc-terms strong { font: 800 1.3rem/1.2 var(--display); }
.rights-guide-values span, .rights-guide-cc-terms span { font-size: 0.95rem; line-height: 1.45; }
.rights-guide-note { display: flex; flex-direction: column; gap: 0.3rem; margin: 1.75rem 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--violet); }
.rights-guide-path { display: grid; gap: 1.25rem; margin: 1.75rem 0; }
.rights-guide-path > div { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; padding: 0; }
.rights-guide-path-number { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--violet); color: #fff; font: 800 1.15rem var(--display); }
.rights-guide-path p { margin: 0.15rem 0 0; font-size: 1rem; line-height: 1.5; }
.rights-guide-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin: 1.75rem 0; }
.rights-guide-permission { padding: 0 0 0 1.25rem; border-left: 3px solid; }
.rights-guide-yes { border-left-color: #1c6b3d; }
.rights-guide-ask { border-left-color: var(--sun); }
.rights-guide-permission-kicker { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.95rem; }
.rights-guide-yes .rights-guide-permission-kicker { color: #1c6b3d; }
.rights-guide-ask .rights-guide-permission-kicker { color: var(--sun-ink); }
.rights-guide-permission h3 { margin: 0 0 0.75rem; }
.rights-guide-permission ul { margin-bottom: 0.75rem; }
.rights-guide-permission li { font-size: 1rem; line-height: 1.5; }
@media (max-width: 700px) { .rights-guide-permission-grid { grid-template-columns: 1fr; } }
.rights-guide-fineprint { color: var(--ink-soft) !important; font-size: 1rem; }
.rights-guide-notice details { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--card); box-shadow: var(--card-rest); }
.rights-guide-notice summary { cursor: pointer; font-weight: 700; }
.rights-guide-notice-copy { margin-top: 1rem; font-size: 1rem; }

/* ---------- 9. Print (the "Print / Save rules" button) ---------- */
@media print {
  .site-header, .site-footer, .game-context, .game-hero-band, .about-band, .resources-band, .related-games, .rules-nav, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .rules-layout { display: block; }
  .rule-content { max-width: none; }
  .rule-content > section { break-inside: avoid-page; }
  .faq-item { box-shadow: none; }
  a { color: inherit; text-decoration: none; }
}

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


/* per-game background art (kept out of inline style attributes for CSP: style-src 'self') */
.bg-pip-zero { background-image: url('/games/pip-zero/media/pip-zero-logo.svg'); }
.bg-pip-draw { background-image: url('/games/pip-draw/media/pip-draw-logo.svg'); }
.bg-pip-fall { background-image: url('/games/pip-fall/media/pip-fall-logo.svg'); }
.bg-pip-cycle { background-image: url('/games/pip-cycle/media/pip-cycle-logo.svg'); }
.bg-pip-crux { background-image: url('/games/pip-crux/media/pip-crux-logo.svg'); }
.bg-pip-armor { background-image: url('/games/pip-armor/media/pip-armor-logo.svg'); }
.bg-sgailstone-glen { background-image: url('/games/sgailstone-glen/media/sgailstone-glen-logo.jpg'); }
.bg-firewall { background-image: url('/games/firewall/media/firewall-logo.png'); }
.bg-divide { background-image: url('/games/divide/media/divide-logo.png'); }
.bg-forecasts { background-image: url('/games/forecasts/media/forecasts-logo.png'); }
.bg-lost-ranks { background-image: url('/games/lost-ranks/media/lost-ranks-logo.png'); }
.bg-b-grid-fortress-run { background-image: url('/games/b-grid-fortress-run/media/b-grid-fortress-run-logo.png'); }
.bg-dalrymple-cursed-diamonds { background-image: url('/games/dalrymple-cursed-diamonds/media/dalrymple-cursed-diamonds-logo.jpeg'); }
.bg-live-wire { background-image: url('/games/live-wire/media/live-wire-logo.png'); }
.bg-trick-shift { background-image: url('/games/trick-shift/media/trick-shift-logo.png'); }
.bg-ball-four { background-image: url('/games/ball-four/media/ball-four-logo.png'); }
.bg-tricks-and-stones { background-image: url('/games/tricks-and-stones/media/tricks-and-stones-logo.png'); }
.bg-midway-memories { background-image: url('/games/midway-memories/media/midway-memories-logo.jpg'); }
.bg-trick-tac-foe { background-image: url('/games/trick-tac-foe/media/trick-tac-foe-logo.png'); }
.bg-sewn { background-image: url('/games/sewn/media/sewn-logo.jpg'); }
.bg-kindling { background-image: url('/games/kindling/media/kindling-logo.png'); }
.bg-grand-bid { background-image: url('/games/grand-bid/media/grand-bid-logo.jpg'); }
.bg-seamless { background-image: url('/games/seamless/media/seamless-logo.png'); }
.bg-psalters-row { background-image: url('/games/psalters-row/media/psalters-row-logo.png'); }
.bg-blossom-ridge { background-image: url('/games/blossom-ridge/media/blossom-ridge-logo.png'); }
.bg-shifting-court { background-image: url('/games/shifting-court/media/shifting-court-logo.png'); }
.bg-zero-day-triage { background-image: url('/games/zero-day-triage/media/zero-day-triage-logo.png'); }
.bg-treats-and-tails { background-image: url('/games/treats-and-tails/media/treats-and-tails-logo.png'); }
.bg-kings-whist { background-image: url('/games/kings-whist/media/kings-whist-logo.png'); }
.bg-tricky-tactics { background-image: url('/games/tricky-tactics/media/tricky-tactics-logo.png'); }
.bg-crash-grid { background-image: url('/games/crash-grid/media/crash-grid-logo.png'); }
.bg-stack-gap-wall-builder { background-image: url('/games/stack-gap-wall-builder/media/stack-gap-wall-builder-logo.png'); }
.bg-hecka-tricky { background-image: url('/games/hecka-tricky/media/hecka-tricky-logo.png'); }
.bg-royal-family { background-image: url('/games/royal-family/media/royal-family-logo.png'); }
.bg-thats-my-floor { background-image: url('/games/thats-my-floor/media/thats-my-floor-logo.webp'); }
.bg-pip-rush { background-image: url('/games/pip-rush/media/pip-rush-logo.svg'); }
.bg-match-stick { background-image: url('/games/match-stick/media/match-stick-logo.png'); }
.bg-naoi { background-image: url('/games/naoi/media/naoi-logo.svg'); }
.bg-ennea { background-image: url('/games/ennea/media/ennea-logo.svg'); }
.bg-gylen-brooch-of-lorn { background-image: url('/games/gylen-brooch-of-lorn/media/gylen-brooch-of-lorn-logo.png'); }
.bg-pip-middle { background-image: url('/games/pip-middle/media/pip-middle-logo.svg'); }
.bg-cornerstone { background-image: url('/games/cornerstone/media/cornerstone-logo-stacked.png'); }