/*
 * Can you spot the AI?, on the brand's tokens (--ap-*, from brand.css): never
 * a colour or a font of its own (README rule 4). The world is the brand's
 * Broken Grid: a near-black ground on a faint grid, one hazard yellow, with
 * the odd element knocked off the grid (the "AI?" slab, the example card, the
 * stamp, the tier).
 *
 * Yellow means one thing in the game: the AI did this. A player's
 * highlighter, a tell's mark, the line to its note. Everything else is
 * quiet text on the dark.
 *
 * Motion is one authored sequence, the reveal: each mark is drawn, its line
 * runs out to its note, then the stamp lands. Nothing else moves except the
 * highlighter stroke as a sentence is picked. All of it stops for anyone who
 * asks for less motion.
 */

/*
 * The game's own roles, each named once and pointed at a brand token. A miss
 * is the brand's muted text (Lewis chose the brand's own colours over adding
 * one, 2026-10-09, master plan O2); every place that shows one also says it
 * with a mark or words, so nothing depends on colour alone.
 */
:root {
  --game-ai: var(--ap-color-primary);
  --game-on-ai: var(--ap-color-primary-contrast);
  --game-ai-wash: color-mix(in srgb, var(--ap-color-primary) 16%, var(--ap-color-background));
  --game-fine: color-mix(in srgb, var(--ap-color-text-muted) 38%, var(--ap-color-background));
  --game-miss: var(--ap-color-text-muted);
  /* "Suspicious, but not AI": the brand's cool second colour, set apart from the highlight's AI tells. */
  --game-suspicious: var(--ap-color-info);
  --game-suspicious-wash: color-mix(in srgb, var(--ap-color-info) 30%, var(--ap-color-background));
  --game-quiet: var(--ap-color-border);
  --game-grid: 6rem;
  /* The display sizes the brand has no token for: the start's title and the end's score. */
  --game-display: clamp(3rem, 9vw, 6rem);
  --game-score: clamp(4.5rem, 15vw, 6rem);
  /* One step of the reveal: a mark, its line, its note. */
  --game-step: 480ms;
  --game-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

/* The highlighter's colour, registered so it can fade: a picked stroke greys as the reveal shows it was fine. */
@property --stroke {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

/* ---- the page ---- */
body {
  background-color: var(--ap-color-background);
  background-image:
    linear-gradient(var(--ap-color-surface) 1px, transparent 1px),
    linear-gradient(90deg, var(--ap-color-surface) 1px, transparent 1px);
  background-size: var(--game-grid) var(--game-grid);
  font-size: var(--ap-prose-size);
  line-height: var(--ap-leading-intro);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--game-ai);
  scrollbar-color: var(--ap-color-border) var(--ap-color-background);
}

::selection {
  background: var(--game-ai);
  color: var(--game-on-ai);
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--game-ai);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.game {
  max-width: var(--ap-max-width);
  margin: 0 auto;
  padding: var(--ap-space-7) clamp(1rem, 4vw, 2.5rem) var(--ap-space-10);
}

.game h1:focus,
.game h2:focus {
  outline: none;
}

.game p {
  margin: 0;
}

.muted {
  color: var(--ap-color-text-muted);
}

/* ---- buttons, on the brand's button tokens ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ap-space-4);
  min-height: 2.75rem;
  border: 1px solid var(--game-ai);
  border-radius: var(--ap-radius-button);
  cursor: pointer;
  background: var(--game-ai);
  color: var(--game-on-ai);
  font-size: var(--ap-button-font-size);
  font-weight: var(--ap-button-weight);
  padding: var(--ap-button-padding-block) var(--ap-button-padding-inline);
  transition:
    transform var(--ap-motion-duration) var(--game-ease-out),
    box-shadow var(--ap-motion-duration) var(--game-ease-out),
    opacity var(--ap-motion-duration) var(--game-ease-out);
}

.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--ap-color-text);
  border-color: var(--ap-color-border);
}

@media (hover: hover) {
  .btn:not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
    box-shadow: var(--ap-shadow-md);
  }

  .btn--ghost:hover {
    border-color: var(--ap-color-text);
  }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-5);
  align-items: center;
}

.pill {
  min-height: 2.75rem;
  font-size: var(--ap-label-small-size);
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-radius-button);
  color: var(--ap-color-text-muted);
  padding: 0 var(--ap-space-6);
  background: var(--ap-color-background);
  cursor: pointer;
}

.pill.is-armed {
  border-color: var(--game-ai);
  color: var(--game-ai);
}

@media (hover: hover) {
  .pill:hover {
    border-color: var(--ap-color-text);
    color: var(--ap-color-text);
  }
}

/* ---- the start ---- */
.hero {
  padding-block: clamp(1.5rem, 6vw, 4rem) var(--ap-space-9);
}

.hero__title {
  font-size: var(--game-display);
  line-height: var(--ap-leading-display);
  letter-spacing: var(--ap-tracking-display);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  text-wrap: balance;
}

/* Knocked off the grid, like the square in the logo. */
.highlight {
  display: inline-block;
  background: var(--game-ai);
  color: var(--game-on-ai);
  padding: 0 0.1em;
  transform: translate(0.1em, 0.04em) rotate(-2.5deg);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}

.lede {
  font-size: var(--ap-text-lead);
  max-width: 40ch;
  margin-bottom: var(--ap-space-4);
  line-height: var(--ap-leading-lead);
}

.hero .btn {
  margin-top: var(--ap-space-7);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-4) var(--ap-space-7);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  margin: var(--ap-space-7) 0 0;
  padding: 0;
  list-style: none;
}

.facts li::before {
  content: "/ ";
  color: var(--game-ai);
}

.specimen {
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-radius-sm);
  padding: var(--ap-space-8) var(--ap-space-7) var(--ap-space-7);
  transform: rotate(1.2deg);
  position: relative;
  box-shadow: var(--ap-shadow-lg);
}

.specimen__tag {
  position: absolute;
  top: -0.75rem;
  right: var(--ap-space-6);
  font-size: var(--ap-label-chip-size);
  background: var(--game-ai);
  color: var(--game-on-ai);
  padding: var(--ap-space-1) var(--ap-space-4);
}

/* The kind of writing, as each round's passage shows it: sentence case, the body's type. */
.specimen__category {
  font-size: var(--ap-text-sm);
  font-weight: 700;
  color: var(--ap-color-text-muted);
}

.specimen__quote {
  font-size: var(--ap-text-lg);
  line-height: var(--ap-leading-intro);
  padding-block: var(--ap-space-5) var(--ap-space-6);
}

/* The example tell, highlighted the way a player's pick will be. */
.specimen mark {
  background: linear-gradient(100deg, transparent 0.1em, var(--game-ai) 0.25em calc(100% - 0.25em), transparent calc(100% - 0.1em)) 0 70% / 100% 78% no-repeat;
  color: var(--game-on-ai);
  padding: 0 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.specimen__note {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  border-top: 1px solid var(--ap-color-border);
  padding-top: var(--ap-space-5);
}

.specimen__note b {
  color: var(--ap-color-text);
}

/* Four steps with real gutters between them, so one column's words never run up against the next (Lewis, 2026-10-12). */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--ap-space-8);
  row-gap: var(--ap-space-7);
  border-top: 1px solid var(--ap-color-border);
  margin: var(--ap-space-7) 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding-top: var(--ap-space-6);
  min-width: 0;
}

.steps b {
  display: block;
  margin-bottom: var(--ap-space-2);
}

.steps span {
  color: var(--ap-color-text-muted);
  font-size: var(--ap-text-sm);
}

/* ---- a round: its head ---- */
.progress {
  display: grid;
  grid-template-columns: repeat(var(--rounds, 8), 1fr);
  gap: var(--ap-space-3);
  margin-bottom: var(--ap-space-6);
}

/* Brightest for a perfect round, dimmest for a miss, so the strip shows what went right. */
.progress i {
  height: 0.375rem;
  border-radius: var(--ap-space-1);
  background: var(--ap-color-surface);
}

.progress i.is-now {
  background: var(--ap-color-text);
}

.progress i.is-perfect {
  background: var(--game-ai);
}

.progress i.is-partial {
  background: color-mix(in srgb, var(--game-ai) 55%, var(--ap-color-surface));
}

.progress i.is-overpicked,
.progress i.is-cancelled,
.progress i.is-missed {
  background: var(--game-quiet);
}

.round-head__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ap-space-4) var(--ap-space-7);
  margin-bottom: var(--ap-space-7);
}

.round-head__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ap-space-2) var(--ap-space-6);
  margin-right: auto;
}

.round-label,
.score-mini {
  font-size: var(--ap-label-size);
  font-weight: 400;
  margin: 0;
}

.round-label {
  color: var(--ap-color-text-muted);
}

.score-mini {
  color: var(--ap-color-text);
}

/* ---- a round: the brief, the passage, the picks ---- */
/* A heading and one plain paragraph: nothing greyed, nothing in a third size (Lewis, 2026-10-12). */
.brief {
  display: grid;
  gap: var(--ap-space-4);
  max-width: var(--ap-prose-measure);
  margin-bottom: var(--ap-space-7);
}

.brief p {
  margin: 0;
}

.ask {
  margin: 0;
  font-size: var(--ap-text-2xl);
  letter-spacing: var(--ap-tracking-heading);
  line-height: var(--ap-leading-heading);
  text-wrap: balance;
}

.passage {
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-radius-sm);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

/* What kind of writing it is, in sentence case and the body's own type: a plain label, not a typewritten tag (Lewis, 2026-10-12). */
.passage__meta {
  font-size: var(--ap-text-sm);
  font-weight: 700;
  color: var(--ap-color-text-muted);
  margin-bottom: var(--ap-space-6);
}

/* Tall lines, so each sentence is an easy tap and a leader can run under a line without touching the next. */
.passage__body {
  font-size: var(--ap-text-lg);
  line-height: 1.9;
  max-width: 64ch;
}

.passage__body p {
  margin: 0 0 0.8em;
}

.passage__body p:last-child {
  margin-bottom: 0;
}

/*
 * A sentence's highlighter: a stroke across the lower three quarters of the
 * line, soft at its ends like a real pen. Drawn left to right as it is picked.
 */
.sentence {
  /* No stroke until there is one to draw: an unpicked sentence carries no colour at all. */
  --stroke: transparent;
  padding: 0.3em 0.12em;
  border-radius: 0.35em 0.15em 0.4em 0.2em;
  background: linear-gradient(100deg, transparent 0.08em, var(--stroke) 0.22em calc(100% - 0.22em), transparent calc(100% - 0.08em)) 0 68% / 0% 74% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sentence--pickable {
  cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--ap-color-text-muted) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: background-size 320ms var(--game-ease-out), color 160ms var(--game-ease-out);
}

@media (hover: hover) {
  .sentence--pickable:hover {
    --stroke: color-mix(in srgb, var(--game-ai) 20%, transparent);
    background-size: 100% 74%;
  }
}

.sentence--pickable[aria-pressed="true"] {
  --stroke: var(--game-ai);
  background-size: 100% 74%;
  color: var(--game-on-ai);
  text-decoration-color: transparent;
}

/* ---- the bar that holds the round's action ---- */
.actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ap-space-6);
  margin-top: var(--ap-space-7);
}

.count {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
}

/* On a phone the action stays within thumb reach, pinned to the bottom. */
@media (max-width: 47.99rem) {
  /* Whatever is scrolled to or focused stops above the bar, never under it. */
  html {
    scroll-padding-bottom: 6rem;
  }

  .actionbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    justify-content: space-between;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
    padding: var(--ap-space-5) clamp(1rem, 4vw, 2.5rem) calc(var(--ap-space-5) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ap-color-background) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ap-color-border);
  }

  .actionbar .btn {
    flex: 1;
    max-width: 16rem;
  }
}

/* ---- the reveal: verdict and stamp ---- */
.verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "stamp line"
    "stamp points";
  column-gap: var(--ap-space-7);
  row-gap: var(--ap-space-3);
  align-items: center;
  margin-bottom: var(--ap-space-8);
}

.verdict__line {
  grid-area: line;
  margin: 0;
  font-size: var(--ap-text-2xl);
  letter-spacing: var(--ap-tracking-heading);
  line-height: var(--ap-leading-heading);
  text-wrap: balance;
}

.verdict__points {
  grid-area: points;
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
}

@media (max-width: 30rem) {
  .verdict {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stamp"
      "line"
      "points";
    justify-items: start;
  }
}

/* The stamp, knocked off the grid: solid for a perfect round, outlined for points, dashed for none. */
.stamp {
  grid-area: stamp;
  position: relative;
  display: inline-flex;
  align-self: start;
  font-weight: 700;
  font-size: var(--ap-text-sm);
  padding: var(--ap-space-4) var(--ap-space-6);
  border: 2px solid currentColor;
  border-radius: var(--ap-space-2);
  transform: rotate(-4deg);
}

.stamp__word {
  position: relative;
  z-index: 1;
}

.stamp.is-perfect {
  color: var(--game-on-ai);
  background: var(--game-ai);
  border-color: var(--game-ai);
}

.stamp.is-partial {
  color: var(--ap-color-text);
}

/* Overly suspicious: every AI tell, and as much again that wasn't. In the suspicious blue. */
.stamp.is-overpicked {
  color: var(--game-suspicious);
  border-style: dashed;
}

.stamp.is-cancelled,
.stamp.is-missed {
  color: var(--game-miss);
  border-style: dashed;
}

/* ---- the reveal: the editor's mark-up ---- */
/* The key first on a phone, so the colours make sense before the passage; then the passage and its notes. */
.markup {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "legend" "passage" "notes";
  align-items: start;
  gap: var(--ap-space-8);
}

.markup > .legend {
  grid-area: legend;
  margin: 0;
}

.markup > .passage {
  grid-area: passage;
}

.markup > .markup__notes {
  grid-area: notes;
}

@media (min-width: 60rem) {
  /* The margin the notes sit in, with room between for the leaders, and the key at its top, above the notes. */
  .markup {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "passage legend" "passage notes";
    column-gap: var(--ap-space-10);
    row-gap: var(--ap-space-6);
  }

  .notes {
    position: relative;
  }

  .note {
    position: absolute;
    left: 0;
    right: 0;
  }
}

/* A tell found: the player's stroke stays, the tell itself underlined in ink. */
.sentence--found {
  --stroke: var(--game-ai);
  background-size: 100% 74%;
  color: var(--game-on-ai);
}

.tell {
  background: none;
  color: inherit;
}

.sentence--found .tell {
  text-decoration: underline 2px var(--game-on-ai);
  text-underline-offset: 0.18em;
}

/* A tell missed: no stroke, only the editor's wavy proof mark under the tell, in yellow. */
.sentence--missed .tell {
  color: var(--game-ai);
  text-decoration: underline wavy var(--game-ai);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}

/* A clean sentence picked: the stroke stays, greyed, because there was nothing there. */
.sentence--fine {
  --stroke: var(--game-fine);
  background-size: 100% 74%;
}

/*
 * Suspicious: a copywriting trick, not AI, but a little suspicious. Marked
 * for everyone in the brand's blue: underlined, and washed blue where the
 * player picked it (no point won or lost).
 */
.sentence--suspicious .tell {
  color: var(--game-suspicious);
  text-decoration: underline 2px var(--game-suspicious);
  text-underline-offset: 0.3em;
}

.sentence--suspicious.is-picked {
  --stroke: var(--game-suspicious-wash);
  background-size: 100% 74%;
}

.sentence--suspicious.is-picked .tell {
  color: var(--ap-color-text);
}

.sentence--suspicious .tell__number {
  color: var(--game-suspicious);
}

.tell__number {
  font-size: var(--ap-label-chip-size);
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.15em;
  color: var(--game-ai);
}

.sentence--found .tell__number {
  color: var(--game-on-ai);
}

.tell.is-lit {
  background: var(--game-ai);
  color: var(--game-on-ai);
  border-radius: 0.15em;
}

.notes__heading {
  font-size: var(--ap-text-lg);
  letter-spacing: var(--ap-tracking-heading);
  margin: 0 0 var(--ap-space-6);
}

@media (min-width: 60rem) {
  /* In the margin the notes speak for themselves; the heading is for a screen reader. */
  .notes__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

.notes {
  display: grid;
  gap: var(--ap-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.note {
  display: grid;
  gap: var(--ap-space-3);
  padding: var(--ap-space-6);
  border-radius: var(--ap-radius-sm);
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-border);
  transition: border-color 160ms var(--game-ease-out);
}

.note.is-lit {
  border-color: var(--game-ai);
}

.note__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ap-space-2) var(--ap-space-4);
  font-weight: 800;
  letter-spacing: var(--ap-tracking-heading);
}

.note__number {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--game-ai);
  color: var(--game-on-ai);
  font-size: var(--ap-label-chip-size);
}

.note--missed .note__number {
  background: transparent;
  color: var(--game-ai);
  box-shadow: inset 0 0 0 1.5px var(--game-ai);
}

.note--suspicious .note__number {
  background: var(--game-suspicious);
  color: var(--ap-color-background);
}

/* Moves to the next line whole on a narrow screen, never split in two. */
.note__missed,
.note__suspicious {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--ap-label-chip-size);
  font-weight: 400;
  color: var(--game-miss);
  padding: 0 var(--ap-space-3);
  border: 1px solid currentColor;
  border-radius: var(--ap-space-1);
}

.note__suspicious {
  color: var(--game-suspicious);
}

.note__quote q {
  color: var(--ap-color-text);
  font-style: italic;
}

.note__why {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
}

/*
 * The key to the marks, above the notes (Lewis, 2026-10-12): each line a
 * small sample of the mark itself, drawn the way the passage draws it, then
 * what it means.
 */
.legend {
  display: grid;
  gap: var(--ap-space-3);
  padding: var(--ap-space-5) var(--ap-space-6);
  list-style: none;
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-radius-sm);
  font-size: var(--ap-text-sm);
}

.legend li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--ap-space-4);
  align-items: center;
}

.legend__sample {
  display: block;
  height: 0.9rem;
  border-radius: 0.15rem;
}

.legend__sample--not-ai {
  background: var(--game-fine);
}

.legend__sample--suspicious {
  background: var(--game-suspicious);
}

.legend__sample--tell {
  background: var(--game-ai);
}

/* The squiggle itself: an empty run of text, underlined wavy as a missed tell is. */
/* A tight line box, so the underline sits level with the words beside it rather than below them. */
.legend__sample--missed {
  height: 0.9rem;
  line-height: 0.45rem;
  text-decoration: underline wavy var(--game-ai);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.1rem;
  white-space: pre;
  overflow: visible;
  border-radius: 0;
}

/* The leaders, drawn from each mark out to its note (wide screens only). */
.leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.leader path {
  fill: none;
  stroke: var(--game-ai);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.leader circle {
  fill: var(--game-ai);
}

/* Dashes in pixels: a dashed leader keeps its real length (reveal.ts), so every dash is the same size. */
.leader--missed path {
  stroke-dasharray: 6 5;
}

.leader--suspicious path {
  stroke: var(--game-suspicious);
}

.leader--suspicious circle {
  fill: var(--game-suspicious);
}

.leader.is-lit path {
  stroke-width: 2.5;
}

/* ---- the reveal played in sequence ---- */
@keyframes stroke-on {
  from {
    background-size: 0% 74%;
  }
}

@keyframes ink-on {
  from {
    text-decoration-color: transparent;
  }
}

/* A missed tell turns from plain text to the editor's yellow as its mark is drawn. */
@keyframes ink-missed {
  from {
    color: var(--ap-color-text);
    text-decoration-color: transparent;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
}

@keyframes note-in {
  from {
    opacity: 0;
    transform: translateX(-0.5rem);
  }
}

@keyframes stamp-land {
  0% {
    opacity: 0;
    transform: rotate(-14deg) scale(2.2);
  }

  55% {
    opacity: 1;
    transform: rotate(-3deg) scale(0.92);
  }

  100% {
    transform: rotate(-4deg) scale(1);
  }
}

/* The fine picks grey out first, then each tell in turn, then the stamp. */
.reveal.is-playing .sentence--fine {
  animation: fade-to-fine 360ms var(--game-ease-out) backwards;
}

@keyframes fade-to-fine {
  from {
    --stroke: var(--game-ai);
  }
}

.reveal.is-playing .sentence--found .tell,
.reveal.is-playing .sentence--missed .tell,
.reveal.is-playing .sentence--suspicious .tell {
  animation: ink-on 360ms var(--game-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--game-step));
}

.reveal.is-playing .sentence--missed .tell {
  animation-name: ink-missed;
}

.reveal.is-playing .tell__number,
.reveal.is-playing .leader circle {
  animation: appear 240ms var(--game-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--game-step) + 120ms);
}

.reveal.is-playing .leader path {
  animation: draw 420ms var(--game-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--game-step) + 140ms);
}

/* A dashed leader cannot be drawn by its dash, so it fades in on its turn instead. */
.reveal.is-playing .leader--missed path {
  animation-name: appear;
}

.reveal.is-playing .note {
  animation: note-in 380ms var(--game-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--game-step) + 260ms);
}

.reveal.is-playing .stamp {
  animation: stamp-land 520ms cubic-bezier(0.3, 0, 0.2, 1) backwards;
  animation-delay: var(--stamp-delay, 0ms);
}

/* ---- a perfect round: the brand's grid bursts from the stamp, one square knocked off ---- */
.burst {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  grid-template-columns: repeat(3, 0.7rem);
  gap: 0.25rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.burst__cell {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.12rem;
  background: var(--ap-color-secondary);
  opacity: 0;
}

.burst__cell--5 {
  background: var(--game-ai);
}

@keyframes burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--turn, 0deg));
  }
}

/* The knocked-off square lands and stays, like the one in the logo. */
@keyframes knock-off {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy)) rotate(18deg) scale(1.3);
  }
}

.burst__cell--0 { --dx: -3.2rem; --dy: -2rem; --turn: -40deg; }
.burst__cell--1 { --dx: 0rem; --dy: -2.8rem; --turn: 25deg; }
.burst__cell--2 { --dx: 3.4rem; --dy: -1.8rem; --turn: 60deg; }
.burst__cell--3 { --dx: -4rem; --dy: 0.4rem; --turn: -15deg; }
.burst__cell--4 { --dx: 0.6rem; --dy: 2.6rem; --turn: 35deg; }
.burst__cell--5 { --dx: 2.4rem; --dy: -2.2rem; }
.burst__cell--6 { --dx: -2.8rem; --dy: 2.2rem; --turn: 50deg; }
.burst__cell--7 { --dx: 1.8rem; --dy: 3rem; --turn: -30deg; }
.burst__cell--8 { --dx: 3.6rem; --dy: 1.8rem; --turn: 20deg; }

.reveal.is-playing .burst__cell {
  animation: burst 900ms var(--game-ease-out) backwards;
  animation-delay: calc(var(--stamp-delay, 0ms) + 260ms);
}

.reveal.is-playing .burst__cell--5,
.reveal.is-done .burst__cell--5 {
  opacity: 1;
  transform: translate(var(--dx), var(--dy)) rotate(18deg) scale(1.3);
}

.reveal.is-playing .burst__cell--5 {
  animation: knock-off 900ms var(--game-ease-out) backwards;
  animation-delay: calc(var(--stamp-delay, 0ms) + 260ms);
}

/* ---- after the mark-up: how other players did, and the takeaway ---- */
.after {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--ap-space-7);
  margin-top: var(--ap-space-9);
}

.crowd {
  background: var(--game-ai);
  color: var(--game-on-ai);
  border-radius: var(--ap-radius-sm);
  padding: clamp(1.25rem, 3vw, 1.875rem);
  display: grid;
  gap: var(--ap-space-5);
  min-width: 0;
}

.crowd__line {
  font-weight: 700;
}

.crowd__figure {
  display: block;
  font-size: var(--ap-text-5xl);
  font-weight: var(--ap-font-heading-weight);
  line-height: var(--ap-leading-display);
  letter-spacing: var(--ap-tracking-display);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--ap-space-3);
}

.crowd__bar {
  height: 0.5rem;
  border-radius: var(--ap-space-1);
  background: color-mix(in srgb, var(--game-on-ai) 20%, var(--game-ai));
  position: relative;
  overflow: hidden;
}

.crowd__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share, 0%);
  background: var(--game-on-ai);
}

.takeaway {
  display: grid;
  gap: var(--ap-space-4);
  align-content: center;
  padding: clamp(1.25rem, 3vw, 1.875rem);
  border-radius: var(--ap-radius-sm);
  border: 1px solid var(--ap-color-border);
}

/* The round's theme, heading the takeaway that explains it. */
.takeaway__theme {
  margin: 0;
  font-size: var(--ap-text-xl);
  letter-spacing: var(--ap-tracking-heading);
  line-height: var(--ap-leading-heading);
}

.takeaway__text {
  margin: 0;
  max-width: var(--ap-prose-measure);
}

/* ---- the end: four bands, in the order they matter (Lewis, 2026-10-13) ---- */
/*
 * Yellow is kept to the rating and the sign-up's button here, so the eye goes
 * where the action is. A wrong pick is the brand's warm red, where it has one.
 */
:root {
  --game-wrong: var(--ap-color-negative, var(--ap-color-text-muted));
  --game-section: clamp(2.5rem, 6vw, 4rem);
}

/* 1. The result: the score and what it means beside the rounds. */
.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 6vw, 4.5rem);
  align-items: start;
  padding-block: clamp(1rem, 4vw, 2.5rem) 0;
}

.result__score {
  display: grid;
  justify-items: start;
}

.score {
  display: flex;
  align-items: baseline;
  gap: var(--ap-space-3);
  margin: 0;
}

.score__number {
  font-size: var(--game-score);
  font-weight: var(--ap-font-heading-weight);
  line-height: var(--ap-leading-display);
  letter-spacing: var(--ap-tracking-display);
  font-variant-numeric: tabular-nums;
}

.score__out-of {
  font-size: var(--ap-text-xl);
  font-weight: 500;
  color: var(--ap-color-text-muted);
}

/* The rating, knocked off the grid like the start's "AI?", straight under the score. Spaced from inside .result__score, which outranks the game's reset of every paragraph's margin. */
.result__score > .tier {
  display: inline-block;
  background: var(--game-ai);
  color: var(--game-on-ai);
  font-size: var(--ap-text-3xl);
  font-weight: var(--ap-font-heading-weight);
  letter-spacing: var(--ap-tracking-display);
  line-height: var(--ap-leading-display);
  padding: 0.12em 0.3em;
  transform: rotate(-2deg);
  margin: var(--ap-space-7) 0 var(--ap-space-5);
}

.result__tier-text {
  font-size: var(--ap-text-lg);
  max-width: 36ch;
}

/* The two figures behind the score, as quiet outlined chips. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-4);
  margin: var(--ap-space-7) 0 0;
  padding: 0;
  list-style: none;
}

.stats li {
  border: 1px solid var(--ap-color-border);
  padding: var(--ap-space-3) var(--ap-space-5);
  font-size: var(--ap-text-sm);
}

.stats b {
  font-weight: 800;
}

.result__score > .small {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  max-width: 44ch;
  margin-top: var(--ap-space-4);
}

.result__score > .result__again {
  margin-top: var(--ap-space-6);
}

/* A quiet text link that acts: "Play again". */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-3);
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ap-color-text-muted);
  font-size: var(--ap-text-sm);
  text-decoration: underline 1px var(--ap-color-border);
  text-underline-offset: 0.3em;
  cursor: pointer;
}

@media (hover: hover) {
  .textlink:hover {
    color: var(--ap-color-text);
    text-decoration-color: var(--ap-color-text);
  }
}

/* Round by round. */
.recap__heading {
  font-size: var(--ap-text-base);
  font-weight: 700;
  margin: 0 0 var(--ap-space-4);
}

.recap {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ap-color-border);
}

.recap li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--ap-space-5);
  align-items: center;
  padding: var(--ap-space-4) 0;
  border-bottom: 1px solid var(--ap-color-border);
  font-size: var(--ap-text-sm);
}

/* One square per tell: filled for each spotted, outlined for each missed. */
.recap__pips {
  display: inline-flex;
  gap: var(--ap-space-2);
}

.recap__pips i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 0.1rem;
  box-shadow: inset 0 0 0 1px var(--ap-color-text-muted);
}

.recap__pips i.is-found {
  background: var(--ap-color-text);
  box-shadow: none;
}

.recap__what {
  color: var(--ap-color-text-muted);
  text-align: end;
  white-space: nowrap;
}

.recap__wrong {
  color: var(--game-wrong);
}

.recap-box > .recap__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-6);
  margin-top: var(--ap-space-4);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
}

.recap__key > span {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-3);
}

/* 2. Sharing: the score card as the picture, ruled off above and below. */
.share {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 6vw, 4rem);
  align-items: center;
  margin-top: var(--game-section);
  padding-block: clamp(1.75rem, 5vw, 3rem);
  border-block: 1px solid var(--ap-color-border);
}

.share-card {
  width: 100%;
  max-width: 21rem;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ap-color-border);
  transform: rotate(-2deg);
  box-shadow: 0.875rem 0.875rem 0 var(--ap-color-surface);
}

.share__words {
  display: grid;
  gap: var(--ap-space-5);
  justify-items: start;
}

.share h2,
.spotter h2 {
  margin: 0;
  font-size: var(--ap-text-3xl);
  letter-spacing: var(--ap-tracking-heading);
  line-height: var(--ap-leading-heading);
  text-wrap: balance;
}

.share__words .muted {
  max-width: 40ch;
}

/* The off-white button: the page's second action, under the one yellow one. */
.btn--light {
  background: var(--ap-color-text);
  color: var(--ap-color-background);
  border-color: var(--ap-color-text);
}

/* "Share my score": a button that opens a list of places, under it, over what follows. */
.share-menu {
  position: relative;
}

.share-menu__toggle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-left: var(--ap-space-2);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--ap-motion-duration) var(--game-ease-out);
}

.share-menu__toggle[aria-expanded="true"]::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.share-menu__list {
  position: absolute;
  z-index: 2;
  top: calc(100% + var(--ap-space-3));
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: var(--ap-space-3);
  list-style: none;
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-border);
  box-shadow: var(--ap-shadow-lg);
}

.share-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--ap-space-5);
  border: 0;
  background: none;
  color: var(--ap-color-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.share-menu__item:focus-visible {
  background: var(--ap-color-background);
}

@media (hover: hover) {
  .share-menu__item:hover {
    background: var(--ap-color-background);
  }
}

/* On a phone the list sits in the page, full width, rather than floating over it. */
@media (max-width: 30rem) {
  .share__words,
  .share-menu,
  .share-menu__toggle {
    width: 100%;
  }

  .share-menu__list {
    position: static;
    margin-top: var(--ap-space-3);
    box-shadow: none;
  }
}

.formnote {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  min-height: 1.4em;
}

/* 3. Ava-spotter: the words, then the form beside them. */
.spotter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: var(--game-section);
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-border);
  padding: clamp(1.375rem, 4vw, 2.75rem);
}

.spotter__words {
  display: grid;
  gap: var(--ap-space-5);
  align-content: start;
  justify-items: start;
}

.spotter__words p {
  max-width: 44ch;
}

/* What it costs, as a small outlined tag. */
.tag {
  border: 1px solid var(--ap-color-text-muted);
  color: var(--ap-color-text);
  font-size: var(--ap-text-sm);
  font-weight: 700;
  padding: var(--ap-space-1) var(--ap-space-4);
}

.spotter__works {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-3);
  margin: var(--ap-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.spotter__works li {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  border: 1px solid var(--ap-color-border);
  padding: var(--ap-space-1) var(--ap-space-4);
}

/* The form, as the form chosen in the Studio asks it (the kit's drawForm): two questions a row. */
.spotter__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ap-space-5) var(--ap-space-4);
  align-content: start;
}

.ap-field {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ap-field__label {
  font-size: var(--ap-text-sm);
  font-weight: 700;
}

.ap-field__control {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  background: var(--ap-color-background);
  border: 1px solid var(--ap-color-border);
  color: var(--ap-color-text);
  padding: var(--ap-space-4) var(--ap-space-5);
  font: inherit;
  font-size: 1rem;
}

.ap-field__control:focus {
  border-color: var(--ap-color-text);
  outline: none;
}

.ap-field__control[aria-invalid="true"] {
  border-color: var(--game-wrong);
}

/* Words between questions, a set of options and the consent each take the whole row. */
.ap-form-message,
.ap-field--choices,
.ap-field--tick,
.ap-consent,
.spotter__foot {
  grid-column: 1 / -1;
}

.ap-consent {
  display: grid;
  gap: var(--ap-space-4);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
}

.ap-consent p,
.ap-form-message p {
  margin: 0;
}

.ap-consent a {
  color: inherit;
  text-decoration: underline;
}

.ap-consent__tick,
.ap-field--tick,
.ap-field__choice {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ap-space-4);
  color: var(--ap-color-text);
  cursor: pointer;
}

.ap-consent__tick input,
.ap-field--tick input,
.ap-field__choice input {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin: 0.15em 0 0;
  accent-color: var(--ap-color-text);
}

.spotter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ap-space-4) var(--ap-space-6);
}

.spotter__foot .btn {
  box-shadow: 0.375rem 0.375rem 0 var(--ap-color-border);
}

.spotter__foot .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.spotter__done {
  display: grid;
  gap: var(--ap-space-5);
  align-content: center;
  justify-items: start;
}

/* 4. Who made it. */
.about {
  margin-top: var(--game-section);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--ap-color-border);
  padding-top: var(--ap-space-8);
}

.about h2 {
  margin: 0;
  font-size: var(--ap-text-4xl);
  line-height: var(--ap-leading-display);
  letter-spacing: var(--ap-tracking-display);
  text-wrap: balance;
}

.about p {
  margin: 0 0 var(--ap-space-6);
  max-width: var(--ap-prose-measure);
}

.about a {
  color: var(--ap-color-text);
  text-decoration: underline 1px;
  text-underline-offset: 0.2em;
}

/* Every two-column band stacks under about 800px; the score card centres. */
@media (max-width: 50rem) {
  .result,
  .share,
  .spotter,
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .share-card {
    justify-self: center;
  }
}

/* The form's questions stack on a phone. */
@media (max-width: 27.5rem) {
  .spotter__form {
    grid-template-columns: minmax(0, 1fr);
  }

  .spotter__foot .btn {
    width: 100%;
  }

  .recap li {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    gap: var(--ap-space-4);
  }
}

/* ---- narrower screens ---- */
@media (max-width: 51.25rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .specimen {
    transform: rotate(0.6deg);
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 27.5rem) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .btn {
    width: 100%;
  }
}

/* Less motion asked for: every state still changes, nothing travels. The reveal is never played (main.ts). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation: none !important;
  }
}