/* ─────────────────────────────────────────────────────────────────────────
   unort — a German Ortstafel standing in the dark.

   The whole page is one world: warm asphalt, a single light source from the
   upper left, and one lit yellow object in the middle of it. Every colour
   here is either the sign, the road, or the light falling between them.

   Type: D-DIN (Monotype, open-sourced by Datto under SIL OFL 1.1). It is the
   DIN 1451 lineage that German road signage actually uses, so it is the one
   correct choice here rather than a taste call.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("fonts/D-DIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("fonts/D-DINCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* The road */
  --asphalt: #141310;
  --asphalt-lit: #1e1c17;
  --ink: #eae5d8;
  --ink-dim: #a09a8a;
  /* 5.0:1 on the asphalt. The quietest text on the page still has to clear
     WCAG AA at 13px, and the obvious dimmer value only managed 4.06. */
  --ink-faint: #8b8478;

  /* The sign */
  --sign-yellow: #efb81a;
  --sign-yellow-top: #f5c53c;
  --sign-black: #14130e;
  --sign-rim: #ded9cc;
  --post: #63625b;

  /* Verdicts. Earthy and desaturated so they sit inside the same world
     instead of arriving as a stock red/green pair. */
  --moss: #9aa76d;
  --brick: #c4744f;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* {
  box-sizing: border-box;
}

/* Flex and grid children ignore the `hidden` attribute unless told otherwise,
   which silently showed the end-of-round panel during play. */
[hidden] {
  display: none !important;
}

/* Present for search engines and screen readers, absent visually. Clipped
   rather than display:none, which would take it out of the accessibility tree
   as well. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "D-DIN", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  /* Atmosphere: fine grain over one directional wash from the upper left, so
     the large dark field reads as a surface instead of banding.

     Both live on the body's own background rather than in fixed-position
     pseudo-elements. Fixed pseudo-elements sit in the same stacking context as
     the content and painted straight over it once the page scrolled, which
     blanked the whole details page below the fold. */
  background-color: var(--asphalt);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
    linear-gradient(148deg, var(--asphalt-lit) 0%, var(--asphalt) 55%);
  background-repeat: repeat, no-repeat;
  background-size:
    160px 160px,
    cover;
  background-attachment: fixed, fixed;
}

.road {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1rem, 2.5vw, 1.6rem) var(--gutter);
  gap: clamp(1rem, 3vw, 2rem);
}

/* ── bars ──────────────────────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
}

.wordmark {
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}

.quiet-link {
  font-size: 0.95rem;
  color: var(--ink-dim);
  text-decoration: none;
  text-underline-offset: 0.25em;
  transition: color 0.18s var(--ease);
}

.quiet-link:hover,
.quiet-link:focus-visible {
  color: var(--sign-yellow);
}

.bar-foot {
  align-items: flex-end;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.colophon,
.legal {
  margin: 0;
}

.legal a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--ink-dim);
}

.legal span {
  margin: 0 0.4em;
}

/* ── main ──────────────────────────────────────────────────────────────── */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

/* ── the Ortstafel ─────────────────────────────────────────────────────── */

.tafel-mount {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.tafel {
  /* The white rim is the raw edge of the sheeting, not a drawn border. */
  background: var(--sign-rim);
  border-radius: 7px;
  padding: clamp(7px, 1vw, 11px);
  /* A fixed width rather than one that shrinks to the name. Letting the sign
     resize per name made the whole page jump between rounds; holding the sign
     steady and scaling the lettering instead is also what real signage does,
     since a sign is a manufactured panel and the type is set to fit it. */
  width: min(52rem, 100%);
  /* Cast from the light in the upper left: a tight contact shadow where the
     sign meets nothing, and one long soft throw down and right. Both carry
     far enough out that no rounded-rectangle silhouette is traceable. */
  box-shadow:
    2px 3px 6px rgba(0, 0, 0, 0.4),
    14px 26px 60px -18px rgba(0, 0, 0, 0.8);
  transform: translateZ(0);
}

.tafel-field {
  position: relative;
  background: linear-gradient(
    172deg,
    var(--sign-yellow-top) 0%,
    var(--sign-yellow) 55%,
    #e5ac10 100%
  );
  border-radius: 4px;
  padding: clamp(9px, 1.6vw, 15px);
}

/* Real Ortstafeln are retroreflective: the sheeting catches light and the
   bright patch moves with the viewer. So the sheen follows the pointer rather
   than looping on its own, and it sits UNDER the lettering so it can never
   cost the text any contrast. Off by default, so a page with no pointer and
   no JS looks exactly as intended. */
.tafel-field::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: radial-gradient(
    38rem 26rem at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0) 62%
  );
  opacity: var(--sheen, 0);
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

.tafel-keyline {
  position: relative; /* keeps the lettering above the sheen */
}

.tafel-keyline {
  border: clamp(3px, 0.5vw, 5px) solid var(--sign-black);
  border-radius: 2px;
  padding: clamp(0.9rem, 2.6vw, 2rem) clamp(1.1rem, 4.5vw, 3.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  min-height: clamp(7.5rem, 22vw, 13rem);
}

.tafel-top,
.tafel-name {
  margin: 0;
  color: var(--sign-black);
  font-family: "D-DIN", sans-serif;
  width: 100%;
  /* Long invented names must never be sliced by the keyline. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.tafel-top {
  font-size: clamp(0.85rem, 2.4vw, 1.5rem);
  line-height: 1.1;
  /* Holds its slot whether or not there is a region to show, so revealing one
     never shifts the sign. */
  min-height: 1.1em;
}

/* Matching spacer below, so the name sits dead centre in the keyline instead
   of being pushed down by the reserved line above it. */
.tafel-keyline::after {
  content: "";
  display: block;
  min-height: clamp(0.94rem, 2.64vw, 1.65rem);
}

.tafel-name {
  font-weight: 700;
  font-size: var(--name-size, clamp(2rem, 8.5vw, 5rem));
  line-height: 1.02;
  letter-spacing: -0.005em;
}

/* Authored swap: the new name arrives from below and settles. The resting
   state is the default, so if this animation never runs the name is simply
   there, fully visible. Nothing is gated on it. */
.tafel-name.is-swapping {
  animation: swap-in 0.34s var(--ease) both;
}

@keyframes swap-in {
  from {
    opacity: 0;
    transform: translateY(0.42em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Wrong answer: the sign takes a short knock. */
.tafel.is-wrong {
  animation: knock 0.42s var(--ease);
}

@keyframes knock {
  20% {
    transform: rotate(-0.65deg);
  }
  55% {
    transform: rotate(0.4deg);
  }
  80% {
    transform: rotate(-0.15deg);
  }
}

/* The post. It descends and fades into the dark rather than being chopped
   off by a hard edge or colliding with the controls underneath. */
.post {
  display: flex;
  gap: clamp(5rem, 16vw, 10rem);
  height: clamp(3rem, 8vw, 5.5rem);
  margin-top: -2px;
  -webkit-mask-image: linear-gradient(to bottom, #000 22%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 22%, transparent 100%);
}

.post span {
  width: clamp(12px, 1.5vw, 18px);
  border-radius: 1px;
  /* Lit from the same upper-left source as everything else. */
  background: linear-gradient(
    100deg,
    #85847c 0%,
    var(--post) 42%,
    #3f3e39 100%
  );
}

/* ── the stage under the sign ──────────────────────────────────────────── */

.stage {
  width: 100%;
  max-width: 42rem;
  /* Holds height across views so the sign does not shift when the copy
     under it changes length. */
  min-height: 9.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.view {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.view.is-active {
  display: flex;
}

.prompt {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink-dim);
}

.answers {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  /* The two answers are equal choices, so they are the same control at the
     same height. Stretch keeps them level even if one label wraps. */
  align-items: stretch;
}

/* ── plate buttons ─────────────────────────────────────────────────────── */

/* Built as small sign plates: a light rim, a dark face, a keyline inside.
   Same construction as the Ortstafel, one size down, so the controls belong
   to the object rather than arriving from a component kit. */
.plate-button {
  appearance: none;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--ink);
  background: #26241e;
  border: 2px solid #3a382f;
  border-radius: 4px;
  padding: 3px;
  transition:
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.plate-button > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1.5px solid #4a473c;
  border-radius: 2px;
  padding: 0.62rem 1.6rem;
  font-size: 1.05rem;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease);
}

.plate-button:hover:not(:disabled),
.plate-button:focus-visible:not(:disabled) {
  background: var(--sign-yellow);
  border-color: var(--sign-yellow-top);
  color: var(--sign-black);
}

.plate-button:hover:not(:disabled) > span,
.plate-button:focus-visible:not(:disabled) > span {
  border-color: var(--sign-black);
}

.plate-button:active:not(:disabled) {
  background: #d9a412;
}

.plate-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.bar-right {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.quiet-button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.18s var(--ease);
}

.quiet-button:hover,
.quiet-button:focus-visible {
  color: var(--sign-yellow);
}

.quiet-button.is-off {
  color: var(--ink-faint);
}

/* ── language switch ───────────────────────────────────────────────────── */

/* Two plates side by side, the lit one being the language you are reading.
   Same construction as the Bundesland rail, so the page keeps one object
   language throughout. */
.lang-switch {
  display: flex;
  border: 1.5px solid #38352c;
  border-radius: 3px;
  overflow: hidden;
}

.lang-switch button {
  appearance: none;
  border: 0;
  background: #221f1a;
  color: var(--ink-faint);
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  position: relative;
  transition: color 0.2s var(--ease);
}

.lang-switch button + button {
  border-left: 1.5px solid #38352c;
}

/* The light sweeps in from the left, clipped rather than scaled so the edges
   stay square for the whole transition. */
.lang-switch button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    172deg,
    var(--sign-yellow-top) 0%,
    var(--sign-yellow) 100%
  );
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s var(--ease);
}

.lang-switch button > span {
  position: relative;
}

.lang-switch button:hover:not([aria-pressed="true"]),
.lang-switch button:focus-visible:not([aria-pressed="true"]) {
  color: var(--ink);
}

.lang-switch button[aria-pressed="true"] {
  color: var(--sign-black);
}

.lang-switch button[aria-pressed="true"]::before {
  clip-path: inset(0 0 0 0);
}

/* ── the run of rounds ─────────────────────────────────────────────────── */

/* One mark per round. Progress and streak in the same object: a run of hits
   reads as a solid yellow bar building up. */
.run {
  display: flex;
  gap: 5px;
  height: 6px;
  /* Centre the marks inside the row, not just the row inside the column. The
     row stretches to full width during a reveal, and without this the marks
     packed to flex-start and the whole bar visibly snapped to the left edge. */
  justify-content: center;
  align-self: center;
  width: 100%;
  margin-bottom: 0.55rem;
}

.mark {
  width: 18px;
  height: 100%;
  border-radius: 1px;
  background: #2b2822;
  transition:
    background 0.28s var(--ease),
    transform 0.28s var(--ease);
}

.mark.hit {
  background: var(--sign-yellow);
}

.mark.miss {
  background: #4a4038;
}

/* The round you are on: a dimmer, taller tick so the eye knows where it is. */
.mark.now {
  background: #6b6355;
  transform: scaleY(1.6);
}

/* ── invent controls ───────────────────────────────────────────────────── */

.invent-controls {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.plate-button.step > span {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  font-size: 0.92rem;
}

.kbd-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

kbd {
  font: inherit;
  font-size: 0.95em;
  color: var(--ink-dim);
  border: 1px solid #3d3a31;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0.05em 0.4em;
}

/* ── verdict and tally ─────────────────────────────────────────────────── */

.verdict {
  margin: 0;
  min-height: 3em; /* reserves its slot so nothing below jumps on reveal */
  font-size: 1rem;
  max-width: 30rem;
  color: var(--ink-dim);
}

.verdict b {
  color: var(--moss);
  font-weight: 700;
}

.verdict b.no {
  color: var(--brick);
}

.tally,
.final-note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.final {
  margin: 0;
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.final-note {
  max-width: 28rem;
}

.final-head {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.final-head.is-best {
  color: var(--sign-yellow);
}

#raten-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* ── the Bundesland rail ───────────────────────────────────────────────── */

.rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 40rem;
}

/* Unlit plates: the same object as the sign, just with no light on it.
   Selecting one lights it. */
.plate {
  appearance: none;
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--ink-dim);
  background: #221f1a;
  border: 1.5px solid #38352c;
  border-radius: 3px;
  padding: 0.32rem 0.6rem;
  position: relative;
  overflow: hidden;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

/* The light wipes across the plate from the left. A clip-path animation, so
   the edges stay square through the whole sweep instead of rounding off
   partway like a scaled shape would. */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    172deg,
    var(--sign-yellow-top) 0%,
    var(--sign-yellow) 100%
  );
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.34s var(--ease);
}

.plate > span {
  position: relative; /* rides above the sweep */
}

.plate:hover:not([aria-pressed="true"]),
.plate:focus-visible:not([aria-pressed="true"]) {
  color: var(--ink);
  border-color: #55503f;
}

.plate[aria-pressed="true"] {
  color: var(--sign-black);
  border-color: var(--sign-yellow-top);
}

.plate[aria-pressed="true"]::before {
  clip-path: inset(0 0 0 0);
}

/* ── mode switch ───────────────────────────────────────────────────────── */

.modes {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--ink-faint);
}

.mode {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.2rem 0.1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.18s var(--ease);
}

.mode:hover,
.mode:focus-visible {
  color: var(--ink);
}

.mode.is-active {
  color: var(--sign-yellow);
}

/* ── the details page ──────────────────────────────────────────────────── */

/* The reading page's bars share the prose column's width, so the wordmark and
   the legal links line up with the text rather than floating wider than it. */
.reading .bar {
  max-width: 40rem;
}

.prose {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(2rem, 6vw, 4rem);
  text-align: left;
}

.prose h1 {
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0 0 1rem;
}

.lede {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--ink-dim);
  margin: 0 0 1rem;
  max-width: 34rem;
}

.prose section {
  padding-top: clamp(2rem, 6vw, 3.25rem);
}

.prose h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
}

/* The section number set as a small sign plate, so the page carries the same
   object language as the front. */
.num {
  flex: none;
  font-family: "D-DIN Condensed", "D-DIN", sans-serif;
  font-size: 0.82rem;
  color: var(--sign-black);
  background: var(--sign-yellow);
  border-radius: 2px;
  padding: 0.1em 0.5em;
  transform: translateY(-0.14em);
}

.prose p {
  margin: 0 0 1rem;
  color: #cfc9ba;
}

.prose b {
  color: var(--ink);
}

/* German terms and name endings only, never plain emphasis. Set a step down
   from the sign's yellow so a page carrying a dozen of them reads as a tonal
   tint rather than a saturated highlight sprayed through the text. */
.prose i {
  font-style: normal;
  color: #d3ae61;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  color: var(--ink);
}

.prose a {
  color: var(--sign-yellow);
  text-underline-offset: 0.22em;
}

/* Secondary, but still has to clear the background by a real value gap. */
.caveat,
.outro {
  color: #9d968a !important;
  font-size: 0.92rem;
}

/* Forest vs village, side by side. Both columns share one baseline grid so
   the lists start on the same line regardless of label length. */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 0 0 1.25rem;
  align-items: start;
}

.pair-label {
  font-size: 0.8rem;
  color: var(--ink-faint) !important;
  margin: 0 0 0.35rem !important;
}

.pair-list {
  margin: 0 !important;
  font-weight: 700;
  line-height: 1.5;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-variant-numeric: tabular-nums;
}

.prose th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-faint);
  padding: 0 0.6rem 0.5rem 0;
}

.prose td {
  padding: 0.42rem 0.6rem 0.42rem 0;
  border-top: 1px solid #2a2822;
  color: #cfc9ba;
}

.prose th:last-child,
.prose td:last-child {
  text-align: right;
  padding-right: 0;
}

.dim {
  color: var(--ink-faint);
  font-size: 0.85em;
}

/* Region scores. Bars are real data, sized to the numbers beside them. */
.scores {
  margin: 0 0 1.25rem;
}

.scores p {
  display: grid;
  grid-template-columns: 11rem 1fr 2.6rem;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.4rem !important;
  font-size: 0.9rem;
}

.bar-track {
  height: 7px;
  background: #26241e;
  border-radius: 3.5px;
}

.bar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--sign-yellow);
  border-radius: 3.5px;
}

.pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (max-width: 34rem) {
  .pair {
    grid-template-columns: 1fr;
  }

  .scores p {
    grid-template-columns: 8.5rem 1fr 2.4rem;
    gap: 0.5rem;
    font-size: 0.82rem;
  }
}

/* ── focus ─────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--sign-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 34rem) {
  .bar-foot {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }

  /* Thumb zone. The controls sit at the bottom of the screen where a thumb
     actually rests, and the sign centres itself in whatever space is left
     above them, so pushing the buttons down does not leave a void in the
     middle. */
  main {
    display: grid;
    grid-template-rows: 1fr auto auto;
    justify-items: center;
    align-items: center;
    gap: 0.75rem;
  }

  .stage {
    min-height: 0;
    align-items: flex-end;
  }

  .view {
    gap: 0.75rem;
  }

  .verdict {
    min-height: 4.2em;
  }

  .answers {
    width: 100%;
  }

  .answers .plate-button {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Comfortable thumb targets: both answers get the same generous height,
     well past the 44px minimum, since these are the only two controls that
     matter on a phone. */
  .answers .plate-button > span {
    padding: 0.95rem 0.5rem;
    font-size: 1.12rem;
    min-height: 3.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}