/* =============================================================================
   Riddle Night — a two-team riddle and proverb game for a table or a car.

   One prefix, `rd-`, that no shared sheet defines. Colour has one job each:
   blue and amber are the two teams (a pair that stays apart for colour-blind
   players, and each team also has its own shape), green marks an answer once
   it is shown, and everything else is neutral so the card is what you read.

   The card is the one big thing on the page. Type on it is large on purpose:
   it is read aloud across a table or from the back seat.
   ========================================================================== */

.rd-page {
  --rd-ink: var(--text);
  --rd-soft: var(--text-soft);
  --rd-muted: var(--text-muted);
  --rd-dim: var(--text-dim);
  --rd-panel: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  --rd-field: rgb(255 255 255 / 4%);
  --rd-track: rgb(255 255 255 / 9%);
  --rd-a: var(--brand-400);
  --rd-b: var(--warn-400);
  --rd-answer: var(--ok-400);
  --rd-danger: var(--danger-400);

  /* The header is fixed, so the page has to start below it. */
  padding-block-start: calc(var(--header-h) + var(--space-8));
}

/* --- Hero ----------------------------------------------------------------- */
.rd-hero { padding-block: var(--space-4) var(--space-6); }
.rd-hero .h1 { max-inline-size: 22em; font-size: var(--text-4xl); text-wrap: balance; letter-spacing: -0.02em; }
.rd-hero .lede { margin-block-start: var(--space-4); color: var(--rd-soft); }
.rd-back {
  display: flex;
  inline-size: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  color: var(--rd-muted);
  font-size: var(--text-sm);
  transition: color var(--dur-base) var(--ease-out);
}
.rd-back:hover { color: var(--rd-ink); }
ul.rd-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
.rd-noscript { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--rd-danger); border-radius: var(--r-md); color: var(--rd-danger); }

/* --- The game area ---------------------------------------------------------- */
.rd-game { display: grid; gap: var(--space-4); padding-block-end: var(--space-8); }
.rd-chrome { display: flex; justify-content: flex-end; }
.rd-chrome[hidden] { display: none; }
.rd-stage { display: grid; gap: var(--space-5); min-inline-size: 0; }

.rd-panel {
  min-inline-size: 0;
  padding: clamp(1.125rem, 2.6vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--rd-panel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), var(--shadow-md);
}

/* --- Setup -------------------------------------------------------------------- */
.rd-setup__title { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.rd-setup__intro { margin-block-start: var(--space-2); max-inline-size: 40rem; color: var(--rd-soft); }
.rd-form { display: grid; gap: var(--space-6); margin-block-start: var(--space-6); }
.rd-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.rd-group__legend { padding: 0; margin-block-end: var(--space-3); color: var(--rd-ink); font-size: var(--text-base); font-weight: 700; }
.rd-group__help { margin: calc(var(--space-2) * -1) 0 var(--space-3); color: var(--rd-dim); font-size: var(--text-xs); line-height: 1.7; }

.rd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.rd-field { display: grid; gap: var(--space-2); }
.rd-field__label { display: flex; align-items: center; gap: var(--space-2); color: var(--rd-soft); font-size: var(--text-sm); font-weight: 600; }
.rd-field__label::before { content: ''; flex: none; inline-size: 0.7rem; block-size: 0.7rem; background: var(--rd-a); border-radius: var(--r-full); }
.rd-field[data-team='1'] .rd-field__label::before { background: var(--rd-b); border-radius: 0.12rem; transform: rotate(45deg); }
.rd-field__input {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--rd-field);
  color: var(--rd-ink);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rd-field__input::placeholder { color: var(--rd-dim); }
.rd-field__input:hover { border-color: rgb(255 255 255 / 24%); }
.rd-field__input:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; border-color: var(--brand-400); }

.rd-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
.rd-choice { position: relative; display: block; min-inline-size: 0; cursor: pointer; }
.rd-choice__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rd-choice__box {
  display: grid;
  gap: 0.2rem;
  block-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--rd-field);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.rd-choice:hover .rd-choice__box { border-color: rgb(255 255 255 / 24%); }
.rd-choice__input:checked + .rd-choice__box { border-color: var(--brand-400); background: rgb(30 133 230 / 12%); }
.rd-choice__input:focus-visible + .rd-choice__box { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.rd-choice__label { color: var(--rd-ink); font-weight: 700; line-height: var(--leading-snug); }
.rd-choice__hint { color: var(--rd-dim); font-size: var(--text-xs); line-height: 1.7; }
.rd-note { padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--warn-400); background: rgb(251 191 36 / 6%); color: var(--rd-soft); font-size: var(--text-sm); }
.rd-note[hidden] { display: none; }
.rd-start { justify-self: start; }

.rd-resume { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line-brand); border-radius: var(--r-lg); background: rgb(30 133 230 / 8%); }
.rd-resume__title { color: var(--rd-ink); font-weight: 700; }
.rd-resume__note { color: var(--rd-soft); font-size: var(--text-sm); }
.rd-resume__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }

/* --- Play: progress and the end control ------------------------------------------ */
.rd-play { display: grid; gap: var(--space-4); min-inline-size: 0; scroll-margin-block-start: calc(var(--header-h) + var(--space-3)); }
.rd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.rd-bar__count { color: var(--brand-300); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.rd-bar__track { block-size: 0.35rem; border-radius: var(--r-full); background: var(--rd-track); overflow: hidden; }
.rd-bar__fill { display: block; inline-size: calc(var(--w, 0) * 100%); block-size: 100%; border-radius: inherit; background: var(--brand-400); transition: inline-size var(--dur-slow) var(--ease-out); }
.rd-endctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.rd-endctl__confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.rd-endctl__confirm[hidden] { display: none; }
.rd-endctl__ask { color: var(--rd-soft); font-size: var(--text-sm); }

/* --- Scores ---------------------------------------------------------------------- */
.rd-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rd-team {
  --team: var(--rd-a);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.rd-team[data-team='1'] { --team: var(--rd-b); }
.rd-team.is-turn { border-color: var(--team); background: color-mix(in srgb, var(--team) 10%, var(--surface-1)); }
.rd-team__mark { inline-size: 0.8rem; block-size: 0.8rem; border-radius: var(--r-full); background: var(--team, var(--rd-a)); }
.rd-team[data-team='1'] .rd-team__mark,
.rd-final__team[data-team='1'] .rd-team__mark { border-radius: 0.14rem; transform: rotate(45deg); background: var(--rd-b); }
.rd-final__team[data-team='0'] .rd-team__mark { background: var(--rd-a); }
.rd-team__text { display: grid; min-inline-size: 0; }
.rd-team__name { overflow: hidden; color: var(--rd-ink); font-weight: 700; line-height: var(--leading-snug); text-overflow: ellipsis; white-space: nowrap; }
.rd-team__turn { color: var(--team); font-size: var(--text-xs); font-weight: 700; }
.rd-team__turn[hidden] { display: none; }
.rd-team__score { color: var(--rd-ink); font-size: var(--text-3xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.rd-team__pop {
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-end: 0.9rem;
  color: var(--team);
  font-size: var(--text-lg);
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
  opacity: 0;
  pointer-events: none;
}
.rd-team__pop.is-popping { animation: rd-pop 1.1s var(--ease-out); }
@keyframes rd-pop {
  0% { opacity: 0; transform: translateY(0.6rem); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-1.6rem); }
}

/* --- The card ----------------------------------------------------------------------- */
.rd-card {
  display: grid;
  gap: var(--space-5);
  min-inline-size: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2xl);
  background: var(--rd-panel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), var(--shadow-lg);
}
.rd-card.is-enter { animation: rd-enter var(--dur-slow) var(--ease-out); }
@keyframes rd-enter {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}
.rd-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rd-card__kind { padding: 0.15rem 0.75rem; border: 1px solid var(--line-brand); border-radius: var(--r-full); color: var(--brand-200); font-size: var(--text-sm); font-weight: 700; }
.rd-card__prompt { color: var(--rd-muted); font-size: var(--text-sm); }
.rd-worth { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; color: var(--rd-soft); font-size: var(--text-sm); }
.rd-worth__pips { display: inline-flex; gap: 0.3rem; }
.rd-worth__pip { inline-size: 0.65rem; block-size: 0.65rem; border-radius: var(--r-full); background: var(--brand-300); transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.rd-worth__pip.is-lost { background: var(--rd-track); transform: scale(0.8); }

.rd-card__body { display: grid; gap: var(--space-5); min-inline-size: 0; outline: none; }
.rd-card__text {
  color: var(--rd-ink);
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.75;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.rd-card__text:lang(en) { line-height: 1.4; }
.rd-hint__text:lang(en),
.rd-answer__meaning:lang(en) { line-height: 1.5; }
.rd-gap {
  display: inline-block;
  min-inline-size: 5ch;
  padding-inline: 0.35em;
  border-block-end: 3px dashed var(--line-strong);
  color: var(--rd-answer);
  line-height: 1.5;
}
.rd-gap.is-filled { border-block-end-style: solid; border-block-end-color: var(--rd-answer); animation: rd-fill var(--dur-slow) var(--ease-out); }
@keyframes rd-fill { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }

.rd-hints { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rd-hints[hidden] { display: none; }
.rd-hint { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--warn-400); border-radius: var(--r-sm); background: rgb(251 191 36 / 7%); animation: rd-enter var(--dur-base) var(--ease-out); }
.rd-hint__label { color: var(--warn-400); font-size: var(--text-sm); font-weight: 700; }
.rd-hint__text { color: var(--rd-ink); font-size: var(--text-lg); line-height: var(--leading-normal); }

.rd-answer { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-inline-start: 4px solid var(--rd-answer); border-radius: var(--r-sm); background: rgb(52 211 153 / 8%); }
.rd-answer[hidden] { display: none; }
.rd-answer.is-shown { animation: rd-enter var(--dur-slow) var(--ease-out); }
.rd-answer__label { color: var(--rd-answer); font-size: var(--text-sm); font-weight: 700; }
.rd-answer__text { color: var(--rd-ink); font-size: var(--text-2xl); font-weight: 800; line-height: var(--leading-snug); }
.rd-answer__meaning { color: var(--rd-soft); font-size: var(--text-lg); line-height: var(--leading-normal); }
.rd-answer__meaning[hidden] { display: none; }

/* --- Timer ------------------------------------------------------------------------ */
.rd-timer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.rd-timer__label { color: var(--rd-muted); font-size: var(--text-sm); }
.rd-timer__track { block-size: 0.5rem; border-radius: var(--r-full); background: var(--rd-track); overflow: hidden; }
.rd-timer__fill { display: block; inline-size: calc(var(--left, 1) * 100%); block-size: 100%; border-radius: inherit; background: var(--brand-400); transition: inline-size 220ms linear; }
.rd-timer.is-low .rd-timer__fill { background: var(--warn-400); }
.rd-timer.is-over .rd-timer__fill { background: var(--rd-danger); }
.rd-timer__left { min-inline-size: 2.5ch; color: var(--rd-ink); font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.rd-timer.is-over .rd-timer__left { color: var(--rd-danger); }

/* --- Actions and the judge --------------------------------------------------------- */
.rd-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rd-actions[hidden] { display: none; }
.rd-actions > * { flex: 1 1 12rem; }
.rd-judge { display: grid; gap: var(--space-3); }
.rd-judge[hidden] { display: none; }
.rd-judge__title { color: var(--rd-ink); font-size: var(--text-lg); font-weight: 700; outline: none; }
.rd-judge__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rd-pick {
  --team: var(--rd-a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 3.5rem;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--team);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--team) 10%, var(--surface-1));
  color: var(--rd-ink);
  font: inherit;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rd-pick[data-team='1'] { --team: var(--rd-b); }
.rd-pick:hover { background: color-mix(in srgb, var(--team) 22%, var(--surface-1)); }
.rd-pick:active { transform: scale(0.985); }
.rd-pick:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 3px; }
.rd-pick__name { min-inline-size: 0; overflow-wrap: anywhere; }
.rd-pick__pts { flex: none; color: var(--team); font-size: var(--text-xl); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.rd-pick--none { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 0.1rem; border: 1px solid var(--line-strong); background: var(--surface-1); }
.rd-pick--none:hover { background: var(--surface-3); }
.rd-pick__note { color: var(--rd-dim); font-size: var(--text-xs); font-weight: 400; }
.rd-keys { color: var(--rd-dim); font-size: var(--text-xs); line-height: 1.8; }

/* --- The end ------------------------------------------------------------------------- */
.rd-end { display: grid; gap: var(--space-6); }
.rd-end__title { font-size: var(--text-4xl); letter-spacing: -0.02em; line-height: var(--leading-snug); text-wrap: balance; outline: none; }
.rd-final { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rd-final__team { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface-1); }
.rd-final__team.is-winner { border-color: var(--rd-answer); background: rgb(52 211 153 / 8%); }
.rd-final__name { overflow-wrap: anywhere; font-weight: 700; }
.rd-final__score { font-size: var(--text-4xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.rd-tie { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-inline-start: 3px solid var(--warn-400); background: rgb(251 191 36 / 6%); }
.rd-tie__text { color: var(--rd-ink); font-weight: 700; }
.rd-tie__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rd-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; color: var(--rd-soft); font-size: var(--text-sm); list-style: none; }
.rd-recap { display: grid; gap: var(--space-3); }
.rd-recap__title { font-size: var(--text-lg); }
.rd-recap__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rd-recap__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-1); }
.rd-recap__item[data-team='0'] { border-inline-start-color: var(--rd-a); }
.rd-recap__item[data-team='1'] { border-inline-start-color: var(--rd-b); }
.rd-recap__main { display: grid; gap: 0.2rem; min-inline-size: 0; }
.rd-recap__kind { color: var(--rd-dim); font-size: var(--text-xs); }
.rd-recap__text { color: var(--rd-ink); line-height: var(--leading-normal); }
.rd-recap__answer { color: var(--rd-answer); font-size: var(--text-sm); font-weight: 700; }
.rd-recap__who { color: var(--rd-soft); font-size: var(--text-sm); text-align: end; }
.rd-end__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rd-end__status { min-block-size: 1.5em; color: var(--rd-soft); font-size: var(--text-sm); }

/* --- Method ---------------------------------------------------------------------------- */
.rd-method { display: grid; gap: var(--space-5); padding-block: var(--space-8) var(--space-12); }
.rd-method__title { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.rd-method__intro { max-inline-size: 46rem; color: var(--rd-muted); }
ol.rd-method__steps { display: grid; gap: var(--space-3); max-inline-size: 52rem; padding-inline-start: 1.4rem; color: var(--rd-soft); line-height: var(--leading-normal); list-style: decimal; }
.rd-method__steps li::marker { color: var(--brand-300); font-weight: 700; }
.rd-method__tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-4); max-inline-size: 52rem; }
.rd-table { min-inline-size: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); }
.rd-table__grid { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rd-table__caption { padding-block-end: var(--space-3); color: var(--rd-soft); font-weight: 700; text-align: start; }
.rd-table__grid th,
.rd-table__grid td { padding-block: var(--space-2); border-block-start: 1px solid var(--line); text-align: start; font-variant-numeric: tabular-nums; }
.rd-table__grid thead th { color: var(--rd-dim); font-size: var(--text-xs); font-weight: 600; }
.rd-table__grid tbody th { color: var(--rd-muted); font-weight: 400; }
.rd-table__grid td { color: var(--rd-ink); font-weight: 700; }
.rd-table__note { margin-block-start: var(--space-3); color: var(--rd-dim); font-size: var(--text-xs); line-height: 1.8; }
.rd-method__line { max-inline-size: 52rem; color: var(--rd-soft); line-height: var(--leading-normal); }
.rd-method__basis { max-inline-size: 52rem; padding: var(--space-4) var(--space-5); border-inline-start: 3px solid var(--warn-400); background: rgb(251 191 36 / 6%); color: var(--rd-soft); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* --- Full screen: for a TV, or a phone leaned against a bowl ------------------------------------- */
.rd-game:fullscreen {
  align-content: start;
  max-inline-size: none;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 3rem);
  background: var(--bg);
}
.rd-game:fullscreen .rd-stage { inline-size: min(100%, 80rem); margin-inline: auto; }
.rd-game:fullscreen .rd-chrome { inline-size: min(100%, 80rem); margin-inline: auto; }
.rd-game:fullscreen .rd-card__text { font-size: clamp(1.75rem, min(3.4vw, 5.6vh), 3.5rem); }
.rd-game:fullscreen .rd-card { gap: var(--space-4); }
.rd-game:fullscreen .rd-hint__text,
.rd-game:fullscreen .rd-answer__meaning { font-size: var(--text-xl); }
.rd-game:fullscreen .rd-answer__text { font-size: var(--text-3xl); }
.rd-game:fullscreen .rd-team__score { font-size: var(--text-4xl); }
.rd-game:fullscreen .rd-pick { min-block-size: 4.5rem; font-size: var(--text-xl); }

/* --- Narrow screens ----------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .rd-hero .h1 { font-size: var(--text-3xl); }
  .rd-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .rd-bar__track { grid-column: 1 / -1; grid-row: 2; }
  .rd-scores { gap: var(--space-2); }
  .rd-team { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-3); }
  .rd-team__score { grid-column: 2; font-size: var(--text-2xl); }
  .rd-judge__picks { grid-template-columns: minmax(0, 1fr); }
  .rd-timer { grid-template-columns: minmax(0, 1fr) auto auto; }
  .rd-timer__label { display: none; }
  .rd-final { grid-template-columns: minmax(0, 1fr); }
  .rd-end__title { font-size: var(--text-3xl); }
  .rd-recap__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .rd-recap__who { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-card.is-enter,
  .rd-hint,
  .rd-answer.is-shown,
  .rd-gap.is-filled,
  .rd-team__pop.is-popping { animation: none; }
  .rd-bar__fill,
  .rd-timer__fill,
  .rd-worth__pip,
  .rd-pick { transition: none; }
}