/*
 * 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);
  --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-family: var(--ap-font-mono);
  font-size: var(--ap-label-small-size);
  letter-spacing: var(--ap-tracking-mono);
  text-transform: uppercase;
  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-family: var(--ap-font-mono);
  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-family: var(--ap-font-mono);
  font-size: var(--ap-label-chip-size);
  letter-spacing: var(--ap-tracking-mono);
  text-transform: uppercase;
  background: var(--game-ai);
  color: var(--game-on-ai);
  padding: var(--ap-space-1) var(--ap-space-4);
}

.specimen__category {
  font-family: var(--ap-font-mono);
  font-size: var(--ap-label-small-size);
  letter-spacing: var(--ap-tracking-mono);
  text-transform: uppercase;
  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);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ap-color-border);
  margin: var(--ap-space-7) 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: var(--ap-space-6) var(--ap-space-6) 0 0;
  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-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-family: var(--ap-font-mono);
  font-size: var(--ap-label-size);
  font-weight: 400;
  letter-spacing: var(--ap-tracking-mono);
  text-transform: uppercase;
  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 ---- */
.brief {
  display: grid;
  gap: var(--ap-space-3);
  max-width: var(--ap-prose-measure);
  margin-bottom: var(--ap-space-7);
}

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

.tell-count {
  font-weight: 700;
}

.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);
}

.passage__meta {
  display: flex;
  gap: var(--ap-space-4) var(--ap-space-7);
  flex-wrap: wrap;
  font-family: var(--ap-font-mono);
  font-size: var(--ap-label-small-size);
  letter-spacing: var(--ap-tracking-mono);
  text-transform: uppercase;
  color: var(--ap-color-text-muted);
  margin-bottom: var(--ap-space-6);
}

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

/* 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-family: var(--ap-font-mono);
  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-family: var(--ap-font-mono);
  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-family: var(--ap-font-mono);
  font-weight: 700;
  font-size: var(--ap-text-sm);
  letter-spacing: var(--ap-tracking-mono);
  text-transform: uppercase;
  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);
}

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

/* ---- the reveal: the editor's mark-up ---- */
.markup {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--ap-space-8);
}

@media (min-width: 60rem) {
  /* The margin the notes sit in, with room between for the leaders. */
  .markup {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    column-gap: var(--ap-space-10);
  }

  .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%;
}

.tell__number {
  font-family: var(--ap-font-mono);
  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-family: var(--ap-font-mono);
  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);
}

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

.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);
}

.note--fine {
  background: transparent;
  border-style: dashed;
}

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

/* 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);
}

.leader--missed path {
  stroke-dasharray: 0.012 0.008;
}

.leader--fine path {
  stroke: var(--ap-color-text-muted);
  stroke-dasharray: 0.006 0.01;
}

.leader--fine circle {
  fill: var(--ap-color-text-muted);
}

.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 {
  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,
.reveal.is-playing .leader--fine 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);
}

.takeaway__text {
  font-size: var(--ap-text-xl);
  font-weight: var(--ap-section-heading-weight);
  letter-spacing: var(--ap-tracking-heading);
  line-height: var(--ap-leading-heading);
  max-width: 34ch;
  text-wrap: balance;
}

/* ---- the end: the player first ---- */
.end {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-block: clamp(1rem, 4vw, 3rem) var(--ap-space-9);
}

.end__score {
  display: grid;
  gap: var(--ap-space-5);
  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);
}

/* What was found, as large as the score's words: what people feel they did. */
.end__found {
  font-size: var(--ap-text-xl);
  font-weight: 700;
  letter-spacing: var(--ap-tracking-heading);
  line-height: var(--ap-leading-heading);
  max-width: 30ch;
}

/* The band, knocked off the grid like the start's "AI?". */
.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.25em;
  transform: rotate(-2.5deg);
  margin-block: var(--ap-space-4);
}

.end__tier-text {
  max-width: 42ch;
}

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

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

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

.recap li {
  display: grid;
  grid-template-columns: 4.5rem 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 mark per tell in the round, filled for each found. */
.recap__pips {
  display: flex;
  gap: var(--ap-space-2);
}

.recap__pips i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.12rem;
  box-shadow: inset 0 0 0 1.5px var(--game-quiet);
}

.recap__pips i.is-found {
  background: var(--game-ai);
  box-shadow: none;
}

.recap__what {
  color: var(--ap-color-text-muted);
  font-family: var(--ap-font-mono);
  font-size: var(--ap-label-size);
  text-align: end;
}

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--ap-space-7);
}

.card {
  display: grid;
  gap: var(--ap-space-5);
  align-content: start;
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-radius-sm);
  padding: clamp(1.25rem, 3vw, 1.875rem);
  min-width: 0;
}

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

/* The end's climax: the score card beside the words that go with it. */
.card--share {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
  align-items: center;
  gap: var(--ap-space-8);
  border-color: var(--game-ai);
}

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

.share-card {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--ap-radius-sm);
  box-shadow: var(--ap-shadow-lg);
  transform: rotate(1.5deg);
}

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

  .share-card {
    max-width: 20rem;
    justify-self: center;
  }
}

.sharebox {
  font-family: var(--ap-font-mono);
  font-size: var(--ap-text-sm);
  background: var(--ap-color-background);
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-space-2);
  padding: var(--ap-space-6);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.signup {
  display: flex;
  gap: var(--ap-space-5);
  flex-wrap: wrap;
}

.signup input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  background: var(--ap-color-background);
  border: 1px solid var(--ap-color-border);
  border-radius: var(--ap-radius-button);
  color: var(--ap-color-text);
  padding: 0 var(--ap-space-6);
  font: inherit;
}

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

.signup input:focus {
  border-color: var(--game-ai);
}

.signup input[aria-invalid="true"] {
  border-color: var(--game-miss);
  border-style: dashed;
}

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

.game > .btn-row {
  margin-top: var(--ap-space-7);
}

.about {
  margin-top: var(--ap-space-10);
  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);
}

/* ---- narrower screens ---- */
@media (max-width: 51.25rem) {
  .hero__grid,
  .end,
  .about {
    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;
  }
}