/* ==========================================================================
   Antics site stylesheet: inner pages (guides, question lists, generators,
   game pages, blog). Variant: app-native.

   The idea: the site should feel like the app it sells. The card is the
   unit, used with restraint: one card per job (the generator, a tier of
   questions, the closing download box), never one card per line.

   Load order on every page:
     /js/generator.css   (the widget's own base styles, kept)
     /css/site.css       (this file, which overrides the widget where needed)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --bg: #0E0A1F;
  --surface: #1C1535;
  --pink: #FF2E7E;
  --action: #EA0059;
  --orange: #FFB02E;
  --lime: #B8FF3D;
  --cyan: #25E5FF;
  --purple: #9D6BFF;

  /* Derived surfaces: three steps up from the background, used by role */
  --surface-1: #150F2B;          /* quiet containers: tier stacks, rules */
  --surface-2: #1C1535;          /* raised: the generator panel, bars */
  --surface-3: #261D47;          /* hover and pressed */
  --well: #09061A;               /* sunken: code, embeds */
  --row-alt: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Text: every step passes WCAG AA on --bg and on --surface */
  --text-0: #FFFFFF;             /* headings, prompts, questions */
  --text-1: #D8D3EE;             /* running text, about 13:1 on --bg */
  --text-2: #BDB6E0;             /* standfirsts, intros, notes, about 10:1 */
  --text-3: #9C92C7;             /* small labels and metadata only */
  --on-tone: #0E0A1F;            /* text sitting on a brand colour */

  /* Section tone: each section sets one brand colour, default pink */
  --tone: var(--pink);

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale: mobile values, lifted with clamp() towards 1280px */
  --step--2: 0.75rem;                                    /* 12: labels */
  --step--1: 0.875rem;                                   /* 14: meta, crumbs */
  --step-0: 1.0625rem;                                   /* 17: body */
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);  /* 18 to 20: standfirst, h3 */
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);        /* 24 to 32: h2 */
  --step-3: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);       /* 34 to 56: h1 */
  --step-card: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 22 to 28: dealt card */

  --leading-tight: 1.08;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --tracking-label: 0.16em;

  /* Spacing scale (4px base) */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-s: 1rem;       /* 16 */
  --space-m: 1.5rem;     /* 24 */
  --space-l: 2rem;       /* 32 */
  --space-xl: 3rem;      /* 48 */
  --space-2xl: 4.5rem;   /* 72 */
  --space-3xl: 6rem;     /* 96 */

  /* Layout */
  --gutter: 20px;
  --page-max: 1160px;
  /* About 75 characters a line in the system font at any size. This was
     68ch until 5 Oct 2026, which ran to about 100 characters a line at 17px
     (a "0" in SF Pro is 0.63em wide, so ch is generous). */
  --measure: 34em;
  --rail: 420px;                 /* the tool column on wide screens */
  --toc: 220px;

  /* Shape: radius is spent by role, not sprinkled */
  --r-card: 24px;                /* dealt cards and stacks */
  --r-control: 16px;             /* buttons and inputs */
  --r-chip: 999px;               /* toggles and chips */
  --r-small: 8px;                /* inline code */

  /* The deck: two card edges peeking out below a dealt card */
  --deck-edge: 0 6px 0 -2px #1A1333, 0 12px 0 -5px #140E29;

  --tap: 48px;                   /* comfortable tap target */
  --tap-min: 44px;               /* the floor: nothing tappable is smaller */
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

strong { color: var(--text-0); font-weight: 700; }
em { font-style: italic; }

[id] { scroll-margin-top: var(--space-m); }

/* Keyboard focus: one loud, consistent ring everywhere */
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Running-text links: white text, underline in the section's tone */
a {
  color: var(--text-0);
  text-decoration: underline;
  text-decoration-color: var(--tone);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease;
}
a:hover { color: var(--tone); }
a.inline { font-weight: 700; }

/* Links inside running text: a hit area at least 44px tall, made of vertical
   padding on the inline box, so not one line of text moves. */
.prose p a,
p.copy a,
.prose ol:not([class]) li a,
.prose ul:not([class]) li a,
.stack li a,
.midcta a,
.tool-note a,
.note a {
  padding-block: max(0.75em, calc(23px - 0.6em));
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-small);
  padding: 0.1em 0.4em;
  color: var(--text-0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Section tones: set once on a section, inherited by everything inside */
.tone-pink   { --tone: var(--pink); }
.tone-lime   { --tone: var(--lime); }
.tone-cyan   { --tone: var(--cyan); }
.tone-orange { --tone: var(--orange); }
.tone-purple { --tone: var(--purple); }


/* --------------------------------------------------------------------------
   3. Page frame
   -------------------------------------------------------------------------- */
.page {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-m) var(--gutter) var(--space-2xl);
}
@media (min-width: 1024px) {
  .page { padding-top: var(--space-l); }
}


/* --------------------------------------------------------------------------
   4. Breadcrumb
   -------------------------------------------------------------------------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--text-2);
  margin-bottom: var(--space-l);
}
.crumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.crumb a:hover { color: var(--text-0); }
.crumb img {
  width: 32px; height: 32px;
  border-radius: 9px;
  flex: none;
}
/* Phones: the trail fits one line. The home link keeps its name for screen
   readers and search, but shows only the app icon (the install bar already
   says "Antics" at the bottom of the screen). */
@media (max-width: 559px) {
  .crumb { margin-bottom: var(--space-m); }
  .crumb a:first-child {
    min-width: var(--tap-min);
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
}


/* --------------------------------------------------------------------------
   5. Page header: h1 plus standfirst
   -------------------------------------------------------------------------- */
.page-head { max-width: 34em; }

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-0);
  text-wrap: balance;
  margin-bottom: var(--space-s);
}

.standfirst,
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 36em;
  text-wrap: pretty;
}

/* Hero with a tool: header and generator side by side on wide screens */
.hero {
  display: grid;
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}
/* Phones: the tool's first button belongs on the first screen */
@media (max-width: 559px) {
  .hero { gap: var(--space-m); }
}
@media (min-width: 1024px) {
  /* Top-aligned (was centred until 5 Oct 2026): a centred header jumped
     down every time a long card made the generator beside it taller, and
     sat in a gap under the breadcrumb; this matches the Imposter pages */
  .hero {
    grid-template-columns: minmax(0, 1fr) var(--rail);
    align-items: start;
    column-gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
  }
}


/* --------------------------------------------------------------------------
   6. Section headings and running text
   -------------------------------------------------------------------------- */
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--text-0);
  text-wrap: balance;
  margin: var(--space-2xl) 0 var(--space-s);
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--text-0);
  margin: var(--space-l) 0 var(--space-2xs);
}

/* Rhythm: tight inside a section, wide between sections */
.section > h2:first-child { margin-top: var(--space-2xl); }
.section + .section > h2:first-child { margin-top: var(--space-2xl); }

.prose p,
p.copy {
  max-width: var(--measure);
  margin-bottom: var(--space-s);
  text-wrap: pretty;
}
.prose ul:not([class]),
.prose ol:not([class]) {
  max-width: var(--measure);
  margin: 0 0 var(--space-s) 1.25em;
}
.prose li:not([class]) { margin-bottom: var(--space-3xs); }

/* Small print that sits under a tool or above a section */
.note {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-2);
  max-width: var(--measure);
}

/* Labels: the app's small-caps kicker */
.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--text-3);
}


/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn,
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding: 0 var(--space-m);
  border-radius: var(--r-control);
  background: var(--action);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover, .cta:hover { color: #FFFFFF; filter: brightness(1.1); }
.btn:active, .cta:active { transform: scale(0.98); }
.btn--sm { min-height: var(--tap); padding: 0 var(--space-s); font-size: var(--step--1); }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
}


/* --------------------------------------------------------------------------
   8. Section navigation ("On this page")
   Mobile: a swipeable row of chips. Wide: a sticky rail beside the text.
   -------------------------------------------------------------------------- */
.toc { margin-bottom: var(--space-l); }
.toc .label { margin-bottom: var(--space-xs); }
.toc ol {
  list-style: none;
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.toc ol::-webkit-scrollbar { display: none; }
.toc a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding: 0 var(--space-s);
  border-radius: var(--r-chip);
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-size: var(--step--1);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.toc a::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tone);
  flex: none;
}
.toc a:hover { color: var(--text-0); border-color: var(--line-strong); }

@media (min-width: 1024px) {
  .toc {
    position: sticky;
    top: var(--space-l);
    align-self: start;
    margin: 0;
  }
  .toc ol {
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-left: 1px solid var(--line);
  }
  .toc a {
    width: 100%;
    min-height: var(--tap-min);
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0 var(--space-s);
    color: var(--text-2);
  }
  .toc a:hover { color: var(--text-0); background: var(--row-alt); }
}


/* --------------------------------------------------------------------------
   9. Two-column bodies
   -------------------------------------------------------------------------- */
/* Guide: text column plus the "On this page" rail */
.guide-body { display: block; }
.guide-body > .prose { min-width: 0; }
@media (min-width: 1024px) {
  .guide-body {
    display: grid;
    grid-template-columns: minmax(0, 760px) var(--toc);
    justify-content: space-between;
    column-gap: var(--space-2xl);
  }
  .guide-body > .prose { grid-column: 1; grid-row: 1; }
  .guide-body > .toc { grid-column: 2; grid-row: 1; }
}

/* Tool page: text on the left, the generator stays in view on the right */
.tool-layout { display: block; }
.tool-layout > * { min-width: 0; }
.tool-wrap { margin: var(--space-l) 0 var(--space-s); }
@media (min-width: 1024px) {
  .tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) var(--rail);
    justify-content: space-between;
    column-gap: var(--space-2xl);
  }
  .tool-layout > .crumb { grid-column: 1 / -1; }
  .tool-layout > .page-head { grid-column: 1; grid-row: 2; align-self: end; }
  .tool-layout > .tool-wrap {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    top: var(--space-l);
    margin: 0;
  }
  .tool-layout > .tool-body { grid-column: 1; grid-row: 3; }
}


/* --------------------------------------------------------------------------
   10. How-to-play summary (the rules, in three lines)
   -------------------------------------------------------------------------- */
.rules {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--space-2xs) var(--space-m);
  margin: var(--space-l) 0 0;
}
.rules p {
  padding: var(--space-s) 0;
  margin: 0;
  max-width: var(--measure);
}
.rules p + p { border-top: 1px solid var(--line); }
.rules p > strong:first-child {
  display: block;
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tone);
  margin-bottom: var(--space-3xs);
}


/* --------------------------------------------------------------------------
   11. The stack: a list of questions dealt as one card you can scan.
   Alternate row fills, no box per line. Works on <ol> (numbered) and <ul>.
   -------------------------------------------------------------------------- */
.stack {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.stack > li {
  position: relative;
  min-height: 52px;
  padding: 14px var(--space-m) 14px var(--space-m);
  color: var(--text-0);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.45;
}
.stack > li:nth-child(even) { background: var(--row-alt); }

/* A numbered stack counts from 1. Inside .count-run every stack carries
   on from the one before, so a guide numbers all its questions in one run
   (the start="" attribute says the same thing without CSS). */
ol.stack { counter-reset: q; }
.count-run { counter-reset: q; }
.count-run ol.stack { counter-reset: none; }
ol.stack > li {
  counter-increment: q;
  padding-left: 56px;
}
ol.stack > li::before {
  content: counter(q);
  position: absolute;
  left: 8px;
  top: 14px;
  width: 36px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  color: var(--tone);
}

.stack > li { padding-inline: 20px; }
ol.stack > li { padding-left: 56px; }

@media (min-width: 768px) {
  .stack > li { padding: 16px var(--space-m); }
  ol.stack > li { padding-left: 68px; }
  ol.stack > li::before { top: 16px; left: var(--space-s); width: 36px; }
}


/* Text that follows a stack inside the same section */
.stack + p { margin-top: var(--space-m); }

/* A Would You Rather line: the "or" ("o", "ou") between the two options is
   the app's divider, set in the section's tone so the choice reads in one go */
.stack em { font-style: normal; font-weight: 800; color: var(--tone); }


/* --------------------------------------------------------------------------
   12. Tier cards: a heading, an intro and its stack, as one dealt card.
   The tier name sits in the card's top-left corner like the app's label.
   -------------------------------------------------------------------------- */
.tier-card {
  position: relative;
  margin-top: var(--space-2xl);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.tier-card > h2 {
  margin: 0;
  padding: 56px 20px 0;
}
.tier-card > h2 .tier {
  max-width: calc(100% - var(--space-m));
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 10px var(--space-s) 10px var(--space-m);
  background: var(--tone);
  color: var(--on-tone);
  border-bottom-right-radius: var(--r-control);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
}
.tier-card > p {
  padding: var(--space-2xs) 20px var(--space-m);
  margin: 0;
  color: var(--text-2);
  max-width: var(--measure);
}
.tier-card > .stack {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .tier-card > h2 { padding-inline: var(--space-m); }
  .tier-card > p { padding-inline: var(--space-m); }
}

/* A tier card with no intro goes straight from heading to stack */
.tier-card > h2 + .stack { margin-top: var(--space-m); }

/* The corner label takes its colour from the card's tone-* class */


/* --------------------------------------------------------------------------
   12b. Divider intro: the sentence that opens a new run of tier cards
   -------------------------------------------------------------------------- */
.divider-intro {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-strong);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-1);
  max-width: 40em;
}
.divider-intro + .tier-card { margin-top: var(--space-l); }


/* --------------------------------------------------------------------------
   13. Mid-page nudge: a quiet row between tiers, not another box
   -------------------------------------------------------------------------- */
.midcta {
  margin: var(--space-xl) 0 0;
  padding: var(--space-s) 0;
  border-block: 1px solid var(--line);
  color: var(--text-2);
  max-width: var(--measure);
}
.midcta a { font-weight: 700; white-space: nowrap; }
.section > .midcta { margin-top: var(--space-m); }


/* --------------------------------------------------------------------------
   14. FAQ: hairlines between questions, no boxes
   -------------------------------------------------------------------------- */
.faq h3 {
  margin: 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.faq h2 + h3 { margin-top: var(--space-m); }
.faq h3 + p {
  margin-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}


/* --------------------------------------------------------------------------
   15. Safety line
   -------------------------------------------------------------------------- */
.safety {
  margin: var(--space-xl) 0 0;
  padding: var(--space-s) var(--space-m);
  border: 1px solid rgba(255, 176, 46, 0.35);
  border-radius: var(--r-control);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-1);
  max-width: var(--measure);
}
.safety strong { color: var(--orange); }


/* --------------------------------------------------------------------------
   16. Closing download box: the page's one loud card
   -------------------------------------------------------------------------- */
.cta-block {
  margin-top: var(--space-2xl);
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--surface-2);
  border: 1px solid rgba(255, 46, 126, 0.35);
  border-radius: var(--r-card);
  box-shadow: var(--deck-edge);
}
.cta-block .cta-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  margin-bottom: var(--space-m);
}
.cta-block h2 { margin: 0 0 var(--space-xs); color: var(--text-0); }
.cta-block p {
  color: var(--text-1);
  max-width: 44ch;
  margin-bottom: var(--space-m);
}
.cta-block .cta {
  width: 100%;
  padding-block: var(--space-3xs);   /* a long label takes two clean lines */
  line-height: 1.25;
  text-align: center;
}
@media (min-width: 560px) {
  .cta-block { padding: var(--space-xl); }
  .cta-block .cta { width: auto; min-width: 240px; }
}


/* --------------------------------------------------------------------------
   17. Link lists: "More party game guides", "More free generators"
   -------------------------------------------------------------------------- */
.guides { margin-top: var(--space-2xl); }
.section.guides { margin-top: 0; }
.guides > .label,
.guides > strong { display: block; margin-bottom: var(--space-xs); }
.guides > strong {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.link-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 52px;
  padding: var(--space-xs) var(--space-2xs) var(--space-xs) 0;
  color: var(--text-1);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-decoration: none;
}
.link-list a::after {
  content: "\2197";
  content: "\2197" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-0);
  font-size: 14px;
  font-weight: 800;
  transition: background 0.15s ease, color 0.15s ease;
}
.link-list a:hover { color: var(--text-0); }
.link-list a:hover::after { background: var(--tone); color: var(--on-tone); }

@media (min-width: 768px) {
  .link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
    border-top: 0;
  }
  .link-list li:nth-child(-n + 2) { border-top: 1px solid var(--line); }
}


/* --------------------------------------------------------------------------
   18. Code blocks (embed snippets)
   -------------------------------------------------------------------------- */
.embed-box {
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--space-s) var(--space-m);
  margin: 0 0 var(--space-m);
  overflow-x: auto;
  max-width: 100%;
}
.embed-box code {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
  white-space: pre;
}


/* --------------------------------------------------------------------------
   19. Tables (game rules, card meanings, comparisons)
   -------------------------------------------------------------------------- */
.table-wrap {
  margin: var(--space-m) 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.5;
}
caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}
th {
  text-align: left;
  vertical-align: bottom;
  padding: var(--space-xs) var(--space-s);
  background: var(--surface-1);
  color: var(--text-2);
  font-weight: 800;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: var(--space-xs) var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--text-1);
  vertical-align: top;
}
td:first-child { color: var(--text-0); font-weight: 700; }
tbody tr:nth-child(even) td { background: var(--row-alt); }


/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-foot,
.foot {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-2);
}
.site-foot a,
.foot a { color: var(--text-1); }
/* Every footer link is a 44px target. The side padding keeps the gaps even
   and pulls the first link back to the text edge. */
.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-2xs);
}
.site-foot a:first-child { margin-left: calc(-1 * var(--space-2xs)); }
.site-foot a:hover,
.foot a:hover { color: var(--text-0); }


/* --------------------------------------------------------------------------
   21. Install bar: phones only, pinned to the bottom like an app tab bar
   -------------------------------------------------------------------------- */
.installbar {
  position: fixed;
  z-index: 20;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 8px 8px 10px;
  background: rgba(28, 21, 53, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .installbar {
    background: rgba(28, 21, 53, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
.installbar img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.installbar p {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: var(--step--1);
  color: var(--text-2);
}
.installbar p strong { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.installbar p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.installbar .btn { flex: none; }
/* "The party games app" was clipped to "The party games ..." at 375px */
@media (max-width: 400px) {
  .installbar { gap: 10px; }
  .installbar p span { font-size: 13px; }
  .installbar .btn--sm { padding-inline: 14px; }
}
@media (max-width: 359px) {
  .installbar p span { display: none; }
}

/* Room for the bar so it never covers the footer */
body.has-installbar { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) {
  .installbar { display: none; }
  body.has-installbar { padding-bottom: 0; }
}


/* --------------------------------------------------------------------------
   22. Generator widget overrides (/js/generator.js markup)
   The widget becomes a small app screen: a raised panel, a segmented deck
   switch, one dealt card with the app's lime label, big thumb buttons.
   -------------------------------------------------------------------------- */
.agen {
  max-width: none;
  margin: 0;
  padding: var(--space-s);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 28px;
  text-align: center;
  font-family: var(--font-body);
}

/* Deck switch: a full-width segmented control */
.agen .agen-modes {
  display: flex;
  width: 100%;
  margin: 0 0 var(--space-s);
  padding: 4px;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
}
.agen .agen-mode {
  flex: 1;
  min-height: var(--tap-min);
  padding: 0 var(--space-s);
  border-radius: var(--r-chip);
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.agen .agen-mode:hover { color: var(--text-0); }
.agen .agen-mode.is-on { background: var(--action); color: #FFFFFF; }
.agen .agen-mode:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* The dealt card, as the app draws it */
.agen .agen-card {
  position: relative;
  flex-direction: column;
  gap: var(--space-s);
  min-height: 250px;
  margin-bottom: 12px;           /* room for the deck edges */
  padding: var(--space-xl) var(--space-m) var(--space-l);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--deck-edge);
}
/* The app's card kicker. Decorative only: hidden from screen readers. */
.agen .agen-card::before {
  content: "Everyone";
  content: "Everyone" / "";
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lime);
}
.agen[data-game="mlt"] .agen-card::before  { content: "Vote";      content: "Vote" / ""; }
.agen[data-game="tod"] .agen-card::before,
.agen[data-game="odds"] .agen-card::before { content: "Challenge"; content: "Challenge" / ""; }

.agen .agen-q {
  font-family: var(--font-display);
  font-size: var(--step-card);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-0);
  text-wrap: balance;
}
.agen .agen-q.agen-q-empty {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-2);
}

/* Thumb-sized controls */
.agen .agen-controls {
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  margin: var(--space-s) 0 var(--space-2xs);
}
.agen .agen-next {
  flex: 1;
  min-height: 56px;
  padding: 0 var(--space-m);
  border-radius: var(--r-control);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 800;
}
.agen .agen-copy {
  min-height: 56px;
  padding: 0 var(--space-m);
  border-radius: var(--r-control);
  background: transparent;
  border: 1px solid var(--line-strong);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
}
.agen .agen-copy:hover { background: var(--surface-3); }
/* Before the first draw the script hides Copy; let Draw take the full row */
.agen .agen-copy[style*="hidden"] { display: none; }
.agen .agen-next:focus-visible,
.agen .agen-copy:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.agen .agen-count {
  color: var(--text-3);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* The widget's own install nudge: two equal buttons under a hairline */
.agen .agen-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.agen .agen-cta-h {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-3xs);
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.45;
}
.agen .agen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin: 0;
  padding: 0 var(--space-xs);
  border-radius: 14px;
  font-size: var(--step--1);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  text-decoration: none;
}
.agen .agen-btn:first-of-type,
.agen .agen-btn-get { background: var(--action); border-color: transparent; }
.agen .agen-btn-alt,
.agen .agen-btn:last-of-type:not(.agen-btn-get) { background: transparent; border: 1px solid var(--line-strong); }
.agen .agen-btn:hover { color: #FFFFFF; filter: brightness(1.1); }

/* Small print under the widget */
.tool-note {
  margin-top: var(--space-s);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-2);
}

/* Phones: a shorter empty card, so "Draw a card" ("Sacar una carta",
   "Tirar uma carta") sits on the first screen above the install bar */
@media (max-width: 559px) {
  .agen .agen-card {
    min-height: 196px;
    padding: var(--space-l) var(--space-s) var(--space-m);
  }
}

/* 22b. The generator in Spanish and Portuguese (/js/generator.js with
   data-lang; the /es/ and /pt/ question pages). The English kicker is CSS
   content ("Everyone", "Vote"); here it is a real element holding the app's
   own label, so it is translated and a screen reader hears the frame the
   card is written to sit under. */
.agen[data-lang] .agen-card::before { content: none; }
.agen[data-lang] .agen-k {
  margin: 0;
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--lime);
}
/* A "¿Qué prefieres?" card: the two options with the app's "· o ·" divider
   on its own line between them */
.agen[data-lang] .agen-or {
  display: block;
  margin: 0.35em 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.agen[data-lang] .agen-or::before,
.agen[data-lang] .agen-or::after { content: "\00B7"; margin: 0 0.5em; }
.agen[data-lang] .agen-next { line-height: 1.25; }
.agen[data-lang] .agen-btn {
  padding-block: var(--space-3xs);
  text-align: center;
  text-wrap: balance;
}
/* "Descarga Antics gratis" and "Juega al impostor gratis" do not fit side
   by side on a phone or in the laptop rail: there they stack, one line each,
   rather than squeeze into two uneven two-line buttons */
@media (max-width: 559px), (min-width: 1024px) {
  .agen[data-lang] .agen-cta { grid-template-columns: minmax(0, 1fr); }
}

/* Iframe embeds: tighter, and a steady height (iframes cannot resize) */
.agen.agen-embed { padding: var(--space-xs); border-radius: 22px; }
.agen.agen-embed .agen-modes { margin-bottom: var(--space-xs); }
.agen.agen-embed .agen-card {
  min-height: 190px;
  padding: var(--space-l) var(--space-s) var(--space-m);
}
.agen.agen-embed .agen-q { font-size: 1.25rem; }
.agen.agen-embed .agen-q.agen-q-empty { font-size: var(--step--1); }


/* --------------------------------------------------------------------------
   23. Embed mode: the generator page inside somebody else's iframe
   -------------------------------------------------------------------------- */
body.embed,
body.embed.has-installbar { padding: 12px; }
body.embed .page { padding: 0; max-width: 600px; }
body.embed .site-chrome { display: none; }
body.embed .tool-layout { display: block; }
body.embed .tool-wrap { position: static; margin: 0; }


/* --------------------------------------------------------------------------
   24. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .installbar, .toc, .agen-controls, .agen-cta, .agen-modes, .idl, .ilang { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
}


/* --------------------------------------------------------------------------
   25. Imposter dealer (/imposter-game/, /es/juego-del-impostor/ and
   /pt/jogo-do-impostor/, all three driven by /imposter-game/dealer.js),
   then the language switcher every bilingual page shares
   One phone, passed round: the app's pass screen, role card, talk screen
   and reveal, drawn as one raised panel like the generator widget.
   Phones (5 Oct 2026 design pass): the setup is denser (players on one row,
   the categories in one swipeable row) so Deal sits on the first screen,
   and once a round starts dealer.js brings the panel to the top of the
   screen so every turn plays without scrolling.
   -------------------------------------------------------------------------- */
.page-head .note { margin-top: var(--space-s); }
.link-list + .copy { margin-top: var(--space-m); }

.idl {
  padding: var(--space-m) var(--space-s);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 28px;
  touch-action: manipulation;    /* no double-tap zoom mid-game */
}
@media (min-width: 560px) {
  .idl { padding: var(--space-m); }
}
.idl [hidden] { display: none !important; }

.idl-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-s);
  text-align: center;
}
.idl-screen [tabindex="-1"]:focus { outline: none; }

.idl-field { border: 0; min-width: 0; }
.idl-field > .label,
.idl-field > legend { margin: 0 auto var(--space-xs); padding: 0; }

/* Player count: the app's stepper */
.idl-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}
.idl-step {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.idl-step:hover { background: var(--surface-3); }
.idl-step:active:not(:disabled) { background: var(--surface-3); transform: scale(0.94); }
.idl-step:disabled { opacity: 0.35; cursor: default; background: var(--bg); }
.idl-count {
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}

/* Category: radio chips */
.idl-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}
.idl-chip { position: relative; }
.idl-chip input,
.idl-switch input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.idl-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-s);
  border-radius: var(--r-chip);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--text-1);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.idl-chip span:hover { color: var(--text-0); border-color: rgba(255, 255, 255, 0.3); }
.idl-chip:active input:not(:checked) + span { background: var(--surface-3); }
.idl-chip input:checked + span { background: var(--action); border-color: transparent; color: #FFFFFF; }
.idl-chip input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }

/* Imposter hint: an on/off switch */
.idl-switch {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  text-align: left;
  cursor: pointer;
}
.idl-switch:hover { border-color: var(--line-strong); }
.idl-track {
  position: relative;
  flex: none;
  width: 52px; height: 32px;
  border-radius: var(--r-chip);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  transition: background 0.15s ease;
}
.idl-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.15s ease;
}
.idl-switch input:checked + .idl-track { background: var(--lime); border-color: transparent; }
.idl-switch input:checked + .idl-track::after { transform: translateX(20px); background: var(--on-tone); }
.idl-switch input:focus-visible + .idl-track { outline: 3px solid var(--lime); outline-offset: 3px; }
.idl-switch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--text-2);
}
.idl-switch-text strong { font-size: var(--step-0); }
.idl-switch-text span { text-wrap: pretty; }

/* Buttons fill the panel; a long label (Spanish "Repartir la ronda
   (12 jugadores)") takes two balanced lines rather than overflowing */
.idl .btn {
  width: 100%;
  padding-block: var(--space-2xs);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.idl .btn:disabled { opacity: 0.6; cursor: progress; }
.idl .btn--ghost:hover { background: var(--surface-3); filter: none; }
.idl-err { margin: 0 auto; color: var(--orange); }

/* Pass screen, talk screen and reveal */
.idl-sub { color: var(--text-2); font-size: var(--step-1); line-height: 1.3; }
.idl-name,
.idl-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-0);
  text-wrap: balance;
}
.idl-name { font-size: var(--step-3); }
.idl-title { font-size: var(--step-2); }
.idl-body { color: var(--text-1); line-height: 1.5; text-wrap: pretty; }
.idl .note { text-wrap: pretty; }
/* On a wide single-column panel (iPad portrait) running text keeps a
   readable line instead of spanning the whole card */
.idl-body,
.idl .note { max-width: 32em; margin-inline: auto; }
.idl-starter { color: var(--lime); font-size: var(--step-1); font-weight: 800; }

/* The role card */
.idl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 260px;
  margin-bottom: 12px;           /* room for the deck edges */
  padding: var(--space-l) var(--space-m);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--deck-edge);
}
.idl-card.is-imposter { border-color: rgba(255, 46, 126, 0.6); }
.idl-word {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-0);
  text-wrap: balance;
}
.idl-imp {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--pink);
}
/* A long word wraps inside the card, never pushes it wider */
.idl-word,
.idl-name,
.idl-title,
.idl-imp { overflow-wrap: break-word; min-width: 0; max-width: 100%; }
.idl-emoji { font-size: 2.75rem; line-height: 1; }
.idl-card .label + .label { margin-top: var(--space-2xs); }

/* The wall: the QR only where there is no phone in hand */
.idl-qr { display: none; }
.idl-qr img {
  width: 160px; height: 160px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 12px;
  background: #FFFFFF;
}
.idl-qr p {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-2);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .idl-qr { display: block; }
}

/* Phones: everything to Deal on the first screen */
@media (max-width: 559px) {
  .idl { padding: var(--space-s) var(--space-s) var(--space-m); }
  .idl-screen { gap: var(--space-xs); }

  /* Players: the label and the stepper share one row (the label takes two
     lines in Spanish and Portuguese) */
  .idl-players {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
  }
  .idl-players > .label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
    line-height: 1.35;
    text-wrap: balance;
  }
  .idl-players .idl-stepper { flex: none; gap: var(--space-2xs); }
  .idl-players .idl-step { width: 48px; height: 48px; font-size: 1.5rem; }
  .idl-players .idl-count { font-size: 2rem; }

  /* Categories: one swipeable row that runs to the panel's edges, the
     way the "On this page" chips do; the fade says there is more */
  /* A floated legend leaves the fieldset's own centring and sits left,
     in line with the players label */
  .idl-field > legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-3xs);
    text-align: left;
  }
  .idl-field > legend + .idl-chips { clear: both; }
  .idl-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--space-s));
    padding: 6px var(--space-s);          /* room for the focus ring */
    scroll-padding-inline: var(--space-s);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 28px), transparent);
  }
  .idl-chips::-webkit-scrollbar { display: none; }
  .idl-chip { flex: none; }
  .idl-chip span { white-space: nowrap; }

  .idl-switch { padding: var(--space-2xs) var(--space-xs); gap: var(--space-xs); }

  .idl-card {
    min-height: 220px;
    padding: var(--space-m) var(--space-s);
  }
}
/* The narrowest phones (320px): the stepper goes back under its label */
@media (max-width: 359px) {
  .idl-players { display: block; padding-left: 0; }
  .idl-players > .label { margin: 0 auto var(--space-2xs); text-align: center; }
}
/* Short phones (an iPhone SE): the role card and the reveal still fit
   above the install bar */
@media (max-width: 559px) and (max-height: 700px) {
  .idl-screen { gap: var(--space-2xs); }
  .idl-card { min-height: 0; gap: var(--space-2xs); padding: var(--space-s); }
  .idl-emoji { font-size: 2.25rem; }
  .idl-name { font-size: 2rem; }
  .idl-word { font-size: 1.625rem; }
  .idl-imp { font-size: 1.5rem; }
}

/* Language switcher: under the dealer or the generator on every page with
   translated versions, and under the header on each language's home */
.ilang {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}
.ilang a,
.ilang span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-s);
  border-radius: var(--r-chip);
  border: 1px solid var(--line-strong);
  color: var(--text-1);
  font-size: var(--step--1);
  font-weight: 700;
  text-decoration: none;
}
.ilang a:hover { color: var(--text-0); background: var(--surface-3); }
.ilang [aria-current] {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text-0);
}
/* Under a page header (each language's home) it lines up with the text */
.page-head + .ilang {
  justify-content: flex-start;
  margin: var(--space-m) 0 0;
}

/* Example words by category (es/pt pages): hairlines like the link lists */
.iwords {
  list-style: none;
  max-width: var(--measure);
  border-top: 1px solid var(--line);
}
.iwords li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-1);
  line-height: var(--leading-snug);
}
.iwords strong {
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--text-0);
}
.iwords + h3 { margin-top: var(--space-xl); }
/* The word-and-hint table under it: headers may wrap on a small phone */
.iwords ~ .table-wrap th { white-space: normal; }


/* --------------------------------------------------------------------------
   26. Facts table: a key and value table ("Antics at a glance"). Two columns
   from 560px; on phones each row stacks so nothing scrolls sideways.
   -------------------------------------------------------------------------- */
.page-head + .guide-body { margin-top: var(--space-l); }

.facts { margin-top: 0; }
.facts th[scope="row"] {
  width: 9rem;
  vertical-align: top;
  white-space: normal;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  padding-top: calc(var(--space-xs) + 3px);   /* sits on the value's first line */
}
.facts td { color: var(--text-1); }
.facts td strong { color: var(--text-0); }

@media (max-width: 559px) {
  .facts table,
  .facts tbody,
  .facts tr,
  .facts th[scope="row"],
  .facts td {
    display: block;
    width: auto;
  }
  .facts tr { border-top: 1px solid var(--line); }
  .facts th[scope="row"] {
    padding: var(--space-xs) var(--space-s) 0;
    border-top: 0;
    background: transparent;
  }
  .facts caption { display: block; }
  .facts td { padding: var(--space-3xs) var(--space-s) var(--space-xs); border-top: 0; }
  .facts tbody tr:nth-child(even) { background: var(--row-alt); }
  .facts tbody tr:nth-child(even) td { background: transparent; }
}


/* --------------------------------------------------------------------------
   27. Game tiles: the nine games as the app draws them, the app's own
   gradient on the icon (src/gamesConfig.ts in the app repo) and readable
   text on the card. One column on phones, two from 560px.
   -------------------------------------------------------------------------- */
.game-tiles {
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-m) 0 var(--space-s);
}
@media (min-width: 560px) {
  .game-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
}
.game-tiles li { display: flex; min-width: 0; }
.game-tiles a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: 80px;
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text-1);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.game-tiles a:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--text-1); }
.game-tiles a:active { transform: scale(0.985); }
.game-tile-art {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 28px;
  line-height: 1;
  background: linear-gradient(140deg, var(--a), var(--b));
}
.game-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game-tile-text strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-0);
}
.game-tile-text span { font-size: var(--step--1); line-height: 1.4; color: var(--text-2); }
.game-tiles + p { margin-top: var(--space-m); }

.tile-antics   { --a: #7A3CFF; --b: #FF2E7E; }
.tile-spicy    { --a: #8A1242; --b: #FF4E2E; }
.tile-imposter { --a: #FF5C5C; --b: #C13BFF; }
.tile-nhie     { --a: #37B6FF; --b: #9D6BFF; }
.tile-tod      { --a: #B8FF3D; --b: #2EE6A8; }
.tile-mlt      { --a: #FF5AC8; --b: #9D6BFF; }
.tile-wyr      { --a: #2E8CFF; --b: #25E5FF; }
.tile-kings    { --a: #FF2E7E; --b: #FFB02E; }
.tile-odds     { --a: #FFB627; --b: #FF5C5C; }


/* --------------------------------------------------------------------------
   28. The closing download box's QR, laptops and tablets only (a phone
   already has the buttons and the install bar), and two buttons side by side
   -------------------------------------------------------------------------- */
.cta-qr { display: none; }
@media (min-width: 768px) {
  .cta-qr {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line);
  }
  .cta-qr img {
    flex: none;
    width: 120px;
    height: 120px;
    padding: 6px;
    border-radius: 12px;
    background: #FFFFFF;
  }
  .cta-block .cta-qr p { margin: 0; max-width: 30ch; color: var(--text-2); font-size: var(--step--1); }
}
.cta-block .cta + .cta { margin-top: var(--space-2xs); }
@media (min-width: 560px) {
  .cta-block .cta + .cta { margin-top: 0; margin-left: var(--space-2xs); }
}


/* --------------------------------------------------------------------------
   29. Comparison table: several apps side by side (/best-party-game-apps/,
   /best-imposter-game-apps/). A normal table from 560px. On phones each app
   becomes its own block and every value is labelled from its cell's
   data-label, so nothing scrolls sideways. The row marked .is-ours is ours.
   -------------------------------------------------------------------------- */
.compare th[scope="row"] {
  vertical-align: top;
  white-space: normal;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text-0);
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
}
.compare th[scope="row"] a { color: var(--text-0); }
.compare td { color: var(--text-1); }
.compare tbody tr:nth-child(even) th[scope="row"] { background: var(--row-alt); }
.compare tbody tr.is-ours th[scope="row"],
.compare tbody tr.is-ours td { background: rgba(255, 46, 126, 0.07); }
.compare th[scope="row"] .label { margin-top: var(--space-3xs); color: var(--pink); }

@media (max-width: 559px) {
  .compare thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .compare table,
  .compare tbody,
  .compare tr,
  .compare th[scope="row"],
  .compare td {
    display: block;
    width: auto;
  }
  .compare caption { display: block; }
  .compare tr {
    padding: var(--space-xs) var(--space-s);
    border-top: 1px solid var(--line);
  }
  .compare th[scope="row"] {
    padding: 0 0 var(--space-3xs);
    border-top: 0;
    font-size: var(--step-0);
  }
  .compare td { padding: var(--space-3xs) 0; border-top: 0; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step--2);
    font-weight: 800;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-3);
  }
  .compare tbody tr:nth-child(even) { background: var(--row-alt); }
  .compare tbody tr:nth-child(even) td,
  .compare tbody tr:nth-child(even) th[scope="row"] { background: transparent; }
  .compare tbody tr.is-ours { background: rgba(255, 46, 126, 0.07); }
  .compare tbody tr.is-ours th[scope="row"],
  .compare tbody tr.is-ours td { background: transparent; }
}


/* --------------------------------------------------------------------------
   30. Reasons: "Why Antics is our pick" (/best-party-game-apps/,
   /best-imposter-game-apps/). Plain cards, a bold short line and one
   sentence each, with the section tone on the top edge as on the party-data
   stat tiles. One column on phones, two from 560px. Then one loud button.
   -------------------------------------------------------------------------- */
.reasons {
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-m) 0 0;
}
@media (min-width: 560px) {
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
}
.reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
  padding: var(--space-s);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tone);
  border-radius: var(--r-control);
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.45;
}
.reason strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-0);
}
.reason a { color: var(--text-1); font-weight: 700; }
.reasons-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin-top: var(--space-m);
}
.reasons-cta p { margin: 0; color: var(--text-2); font-size: var(--step--1); }
@media (max-width: 559px) {
  .reasons-cta .cta { width: 100%; }
}


/* --------------------------------------------------------------------------
   31. Imposter word lists in Spanish and Portuguese
   (/es/palabras-juego-del-impostor/, /pt/palavras-jogo-do-impostor/, body
   class wl-page). On screen they reuse the tables above, with headers that
   may wrap so a phone needs no sideways scroll. In print, every rule is
   scoped to .wl-page so no other page changes: a named page with margins
   but no fixed size (so A4 and Letter both work, whatever the printer's
   default), black on white, and each category starts its own sheet with
   its words in two columns (the longest list, Places, fits one sheet of
   either size). The first category shares its sheet with the page title
   only; the paper and three-player rules print after the last category.
   -------------------------------------------------------------------------- */
.wl-page .ilang + .guide-body { margin-top: var(--space-l); }
.wl-page .wl-table th { white-space: normal; }

@media print {
  @page wl-sheet { margin: 14mm; }
  html:has(> body.wl-page) { background: #FFFFFF; }
  body.wl-page { page: wl-sheet; padding: 0; background: #FFFFFF; }
  .wl-page .page { max-width: none; padding: 0; }
  .wl-page * {
    color: #000000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .wl-page .crumb,
  .wl-page .page-head .note,
  .wl-page .wl-print-tip,
  .wl-page .cta-block,
  .wl-page .guides,
  .wl-page .site-foot { display: none !important; }
  .wl-page h1 { font-size: 22pt; margin: 0 0 3mm; }
  .wl-page .standfirst { font-size: 11pt; max-width: none; }
  .wl-page h2 { font-size: 16pt; margin: 0 0 3mm; }
  .wl-page .section > h2:first-child { margin-top: 6mm; }
  .wl-page .prose p,
  .wl-page .steps li { font-size: 10.5pt; max-width: none; }
  .wl-page ol.stack > li::before { color: #000000 !important; top: 2mm; }
  /* Tight rule steps, so the paper and three-player rules share one sheet
     on Letter as well as A4 */
  .wl-page ol.stack > li { min-height: 0; padding-top: 2mm; padding-bottom: 2mm; }
  .wl-page .wl-cat + .wl-cat,
  .wl-page .wl-after { break-before: page; }
  .wl-page .wl-cat + .wl-cat > h2:first-child,
  .wl-page .wl-after > h2:first-child { margin-top: 0; }
  .wl-page .wl-cat .table-wrap { margin: 0; border: 0; overflow: visible; }
  .wl-page .wl-table,
  .wl-page .wl-table thead,
  .wl-page .wl-table tbody { display: block; }
  .wl-page .wl-table thead tr {
    display: flex;
    justify-content: space-between;
    width: calc(50% - 4mm);
    border-bottom: 0.4mm solid #000000;
  }
  .wl-page .wl-table th { padding: 0 0 1mm; font-size: 8pt; white-space: normal; }
  .wl-page .wl-table tbody { columns: 2; column-gap: 8mm; }
  .wl-page .wl-table tr {
    display: flex;
    justify-content: space-between;
    gap: 3mm;
    break-inside: avoid;
    border-bottom: 0.2mm solid #999999;
  }
  .wl-page .wl-table td { padding: 1.3mm 0; border: 0; font-size: 10.5pt; line-height: 1.25; }
  .wl-page .wl-table td + td { color: #444444 !important; text-align: right; }
}


/* --------------------------------------------------------------------------
   32. Chart downloads (/party-data/#charts and /press/). A preview of each
   press chart with its two files, landscape and portrait, and their sizes.
   The list between the charts markers is written by
   .tools/render-party-charts.mjs; edit the script, not the list. One
   column on phones, two from 640px.
   -------------------------------------------------------------------------- */
.chart-dl-credit {
  padding: var(--space-xs) var(--space-s);
  border-left: 3px solid var(--tone);
  background: var(--surface-1);
  border-radius: 0 var(--r-small) var(--r-small) 0;
  color: var(--text-0);
  font-weight: 700;
}
.chart-dl {
  list-style: none;
  display: grid;
  gap: var(--space-s);
  margin: var(--space-m) 0 var(--space-s);
}
@media (min-width: 640px) {
  .chart-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chart-dl li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-xs) var(--space-xs) var(--space-3xs);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}
.chart-dl .chart-dl-img {
  display: block;
  margin-bottom: var(--space-xs);
  border-radius: var(--r-small);
  overflow: hidden;
}
.chart-dl .chart-dl-img img { width: 100%; height: auto; }
.chart-dl strong {
  padding-inline: var(--space-3xs);
  margin-bottom: var(--space-3xs);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
}
.chart-dl li > a:not(.chart-dl-img) {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3xs);
  border-top: 1px solid var(--line);
  color: var(--text-1);
  font-size: var(--step--1);
  font-weight: 600;
}
.chart-dl li > a:not(.chart-dl-img):hover { color: var(--text-0); }

/* Logo and image downloads on /press/: the image on a quiet tile */
.press-assets .chart-dl-img {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--well);
}
.press-assets .chart-dl-img img { width: auto; max-width: 100%; max-height: 100%; }
.press-assets .is-icon img { width: 40%; max-width: 160px; border-radius: 22%; }