/* ══════════════════════════════════════════════════════════════════════════
   US-Staaten
   Gleiche Farbwelt wie die Schwesterspiele: heraldische Tinkturen auf
   Tiefengrau. Der Umriss ist das einzige gesättigte Element.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dmmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dmmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dmmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #10141a;
  --plate: #171d25;
  --raise: #212a35;
  --line: #2f3947;
  --line-soft: #232c37;
  --paper: #ecede8;
  --muted: #939fae;
  --or: #d9a441;
  --or-dim: #8a6a2c;
  --vert: #46997a;
  --gules: #cf4f45;

  /* Die USA als Kulisse: sichtbar genug für die Lage, stumpf genug, dass der
     gesuchte Staat davor nicht untergeht. */
  --context: #2a3340;

  --sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', monospace;

  --pad: clamp(1rem, 4vw, 2rem);
  --stage-h: min(44vh, 25rem);
  --radius: 3px;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Klassen wie .screen--play setzen display und würden das UA-Stylesheet für
   [hidden] sonst überstimmen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

.mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.02em;
}

:where(button, input, a):focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* ── Bildschirme ─────────────────────────────────────────────────────────── */

.screen {
  max-width: 46rem;
  margin: 0 auto;
  padding: max(var(--pad), env(safe-area-inset-top)) var(--pad)
           max(var(--pad), env(safe-area-inset-bottom));
}

.screen--scroll { min-height: 100%; }

.screen--play {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2vh, 1.25rem);
  height: 100%;
  height: 100dvh;
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
}

.masthead { padding: clamp(1rem, 6vh, 3rem) 0 clamp(1.5rem, 4vh, 2.5rem); }

.masthead__title {
  margin: 0;
  font-size: clamp(3rem, 17vw, 6.5rem);
  font-stretch: 70%;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  hyphens: manual;
}

.masthead__lead {
  max-width: 34ch;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.colophon {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: #6d7887;
  font-size: 0.75rem;
}
.colophon p { margin: 0; }
.colophon a { color: #7f8b9a; }

/* ── Panels ──────────────────────────────────────────────────────────────── */

.panel {
  margin: 0 0 1rem;
  padding: 1.1rem 1.1rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--plate);
}

.panel__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel__note { color: #6d7887; letter-spacing: 0.04em; text-transform: none; }

.panel--start {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: none;
  border: none;
  padding-inline: 0;
}

.panel .hint { margin-top: 0.75rem; }

/* ── Chips ───────────────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur), border-color var(--dur), background-color var(--dur);
}
.chip:hover:not(:disabled) { border-color: var(--or-dim); color: var(--paper); }
.chip:disabled { opacity: 0.42; cursor: not-allowed; }
.chip__count { font-family: var(--mono); font-size: 0.78rem; opacity: 0.7; }
.chip[aria-pressed='true'],
.chip[aria-checked='true'] {
  background: var(--or);
  border-color: var(--or);
  color: var(--ink);
  font-weight: 600;
}
.chip[aria-pressed='true'] .chip__count,
.chip[aria-checked='true'] .chip__count { opacity: 0.75; }

/* Die Hilfestellung ist eine Entweder-oder-Wahl, deshalb eckig statt Pille:
   die Form sagt schon, dass sich hier nur eins von beiden anfühlen lässt. */
.chips--level { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.chips--level .chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.chips--level .chip small {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  font-weight: 400;
}
@media (max-width: 26rem) {
  .chips--level { grid-template-columns: 1fr; }
}

/* ── Schalter ────────────────────────────────────────────────────────────── */

.switch {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.65rem 0;
  cursor: pointer;
}
.switch + .switch { border-top: 1px solid var(--line-soft); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch__box {
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink);
  position: relative;
  transition: background-color var(--dur), border-color var(--dur);
}
.switch__box::after {
  content: '';
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--dur) var(--ease), background-color var(--dur);
}
.switch input:checked + .switch__box { background: var(--or-dim); border-color: var(--or); }
.switch input:checked + .switch__box::after { transform: translateX(18px); background: var(--or); }
.switch input:focus-visible + .switch__box { outline: 2px solid var(--or); outline-offset: 2px; }
.switch input:disabled + .switch__box { opacity: 0.4; }

.switch__text { font-size: 0.95rem; }
.switch__text small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  min-height: 52px;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.btn--primary { background: var(--or); color: var(--ink); }
.btn--primary:hover { background: #eab557; }
.btn--primary:disabled { background: var(--raise); color: #6d7887; cursor: not-allowed; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--paper); }
.btn--ghost:hover { border-color: var(--or-dim); }
.btn--quiet {
  background: none;
  border: none;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9rem;
  min-height: 44px;
}
.btn--quiet:hover { color: var(--paper); }

.hint { margin: 0; color: var(--muted); font-size: 0.8rem; min-height: 1.2em; }

.tally-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.tally-line__num {
  font-size: 2rem;
  font-stretch: 75%;
  font-weight: 700;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* ── HUD: Zählstreifen ───────────────────────────────────────────────────── */

.hud { flex: 0 0 auto; }

.hud__strip {
  display: flex;
  gap: 2px;
  height: 10px;
  margin-bottom: 0.55rem;
}
.hud__strip i {
  flex: 1 1 0;
  min-width: 1px;
  background: var(--line-soft);
  transition: background-color 180ms;
}
.hud__strip i[data-s='ok'] { background: var(--vert); }
.hud__strip i[data-s='no'] { background: var(--gules); }
.hud__strip i[data-s='now'] { background: var(--or); }

.hud__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hud__quit {
  margin-left: auto;
  padding: 0.35rem 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.hud__quit:hover { color: var(--paper); }

/* ── Bühne: der Umriss ───────────────────────────────────────────────────── */

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vh, 1.2rem);
  min-height: 0;
}

.prompt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.specimen {
  margin: 0;
  width: 100%;
  max-width: min(100%, 34rem);
  height: var(--stage-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ein SVG-Feld, zwei Spielstufen: `viewBox` entscheidet, ob der Ausschnitt das
   einzelne Land zeigt (schwer, kein Größen- und Lagebezug) oder ganz
   Deutschland (leicht, Lage sichtbar). preserveAspectRatio passt beides ein,
   ohne zu verzerren, egal ob hochkantes Bremen oder breites Sachsen. */
/* overflow MUSS hidden bleiben (der Vorgabewert für ein SVG-Wurzelelement).
   Mit `visible` fällt das Clipping am viewBox weg, und dann ragen genau die
   Exklaven ins Bild, die `framingBox` in build-data.mjs bewusst aus dem
   Ausschnitt hält: Neuwerk bei Hamburg, Helgoland bei Schleswig-Holstein.
   Für den Schatten sorgt stattdessen die Luft aus VIEW_PAD. */
.specimen__map {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.map__context {
  fill: var(--context);
  /* Ohne Kontur verschmelzen die Teilflächen zu einer Silhouette. Genau das ist
     gewollt: die Lage verraten, nicht die Nachbargrenzen mitliefern.
     
     Die Kontur ist trotzdem nötig, und zwar in der FÜLLFARBE. Jeder Umriss wird
     einzeln vereinfacht, deshalb behält die gemeinsame Grenze zweier Nachbarn
     unterschiedliche Punkte und es bleiben haarfeine Lücken. Nachgemessen: ohne
     Kontur 3869 Nahtpixel im Inneren, mit stroke-width 2 nur noch 207 – und die
     ändern sich bei 3 und 4 nicht mehr, sind also echtes Küstendetail. Die
     Silhouette wird dadurch 2,4 % fetter, was nicht auffällt. */
  stroke: var(--context);
  stroke-width: 2;
}

.map__shape {
  fill: var(--or);
  stroke: #f0c477;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.6));
}

/* Die Flagge bekommt die ganze Bühne, `object-fit` wahrt das Seitenverhältnis.
 *
 * Bewusst OHNE `max-height` und ohne das Verhältnis in der Rechnung. In der
 * Länderkunde stand hier einmal
 *     width: min(100%, calc(var(--stage-h) * var(--ratio)));
 *     height: auto; max-height: 100%;
 * und zwei Wappen erschienen deutlich kleiner als die anderen, weil ihre
 * SVG-Wurzel eigene width/height mitbrachte und max-height die Höhe darauf
 * festklemmte. Diese Fassung ist unabhängig davon, was die Datei über ihre
 * Größe behauptet.
 *
 * Der zweite, helle Schatten liegt am dunklen Ende des Materials. Nachgemessen
 * als WCAG-Kontrast zwischen der äußersten Bildzeile und der Bühnenfarbe
 * (#10141a), je Flagge der schlechteste ihrer vier Ränder: 29 der 51 liegen
 * unter 1,5:1, am tiefsten Kentucky mit 1,05:1, wo 1,0 rechnerisch unsichtbar
 * wäre. Das sind die dunkelblauen Felder, von denen es hier viele gibt. Die
 * weißen Flaggen (Illinois, Massachusetts, Rhode Island) liegen bei 18:1 und
 * brauchen nichts.
 *
 * Ehrlich dazu: der Kontrastwert ist gemessen, der Nutzen fürs Auge ist es
 * nicht. Im Vergleichsbild ist der Unterschied klein. Die Zeile bleibt, weil sie
 * am Layout nichts ändert und im Zweifel hilft, nicht weil belegt wäre, dass man
 * sie braucht.
 *
 * Ein Rahmen über `border` ginge hier nicht: mit `object-fit: contain` ist der
 * Elementkasten die ganze Bühne, das Bild darin nur ein Teil. Ein `drop-shadow`
 * folgt dagegen dem GEZEICHNETEN Bild und damit genau der Kante des Tuchs. */
.specimen__flag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.6))
          drop-shadow(0 0 1px rgb(255 255 255 / 0.45));
}

.specimen--raise .specimen__map,
.specimen--raise .specimen__flag { animation: rise 260ms var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Auflösung ───────────────────────────────────────────────────────────── */

.verdict {
  width: 100%;
  max-width: min(100%, 34rem);
  padding: 0.85rem 1rem 0.9rem;
  border-left: 3px solid var(--line);
  background: var(--plate);
  animation: stamp 160ms var(--ease) both;
}
.verdict[data-ok='1'] { border-left-color: var(--vert); }
.verdict[data-ok='0'] { border-left-color: var(--gules); }

@keyframes stamp {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.verdict__mark {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.verdict[data-ok='1'] .verdict__mark { color: var(--vert); }
.verdict[data-ok='0'] .verdict__mark { color: var(--gules); }

.verdict__name {
  margin: 0;
  font-size: clamp(1.35rem, 5.5vw, 2.1rem);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.verdict__capital {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--paper);
}
.verdict__label {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

.verdict__facts { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--muted); }
.verdict__said { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); }

.verdict__timer { height: 2px; margin-top: 0.7rem; background: var(--line-soft); }
.verdict__timer i {
  display: block;
  height: 100%;
  background: var(--or-dim);
  transform-origin: left;
  animation: countdown var(--advance, 1800ms) linear both;
}
@keyframes countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Eingabe ─────────────────────────────────────────────────────────────── */

.controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.heard {
  margin: 0;
  min-height: 1.3em;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.answer { display: flex; gap: 0.5rem; }

.answer__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--plate);
  color: var(--paper);
  font: inherit;
  font-size: 1.15rem;
  font-stretch: 90%;
}
.answer__input::placeholder { color: #6d7887; }

/* type="search" ist keine Kosmetik, sondern der Grund, warum ueber dem Feld
   auf dem Handy keine Passwort- und Kreditkartenleiste mehr aufgeht. Der
   Vergleich, der es gezeigt hat: Wikipedias Suchfeld loest sie auf demselben
   Geraet nicht aus, obwohl es GENAUSO in einem <form> steckt. Das Formular ist
   also nicht die Ursache, der Feldtyp ist der Unterschied.

   Ein Suchfeld bringt zwei Eigenheiten mit, die hier weg sollen: das runde
   Aussehen der Plattform (appearance) und den Loeschknopf, der mit dem
   Mikrofonknopf daneben um denselben Platz konkurriert. */
.answer__input { appearance: textfield; -webkit-appearance: textfield; }
.answer__input::-webkit-search-cancel-button,
.answer__input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
.answer__input:focus { border-color: var(--or); outline: none; }
.answer__input:disabled { opacity: 0.5; }

.answer__mic {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 72px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--plate);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
}
.answer__mic-text { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
.answer__mic[hidden] { display: none; }
.mic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--muted);
}
.answer__mic[aria-pressed='true'] { border-color: var(--gules); color: var(--paper); }
.answer__mic[aria-pressed='true'] .mic-dot {
  background: var(--gules);
  border-color: var(--gules);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.controls__row { display: flex; gap: 0.5rem; }
.controls__row .btn { flex: 1 1 0; }

/* ── Ergebnis ────────────────────────────────────────────────────────────── */

.masthead--result { padding-bottom: 1.5rem; }

.score {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-stretch: 70%;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}
.score__num { font-size: clamp(3.5rem, 18vw, 7rem); font-variant-numeric: tabular-nums; }
.score__num--total { color: var(--muted); }
.score__of { font-size: 1rem; font-stretch: 100%; font-weight: 400; color: var(--muted); }
.score__pct { margin: 0.5rem 0 0; color: var(--or); font-size: 0.95rem; letter-spacing: 0.1em; }

.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 4px;
}

.sheet__chip {
  position: relative;
  display: block;
  padding: 3px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  transition: transform 120ms var(--ease), border-color 120ms;
}
.sheet__chip svg { display: block; width: 100%; height: 100%; }
.sheet__chip path { fill: var(--muted); }
.sheet__chip[data-ok='1'] path { fill: var(--vert); }
.sheet__chip[data-ok='0'] { border-color: var(--gules); }
.sheet__chip[data-ok='0'] path { fill: var(--gules); }
.sheet__chip:hover, .sheet__chip[aria-current='true'] { transform: scale(1.12); z-index: 1; }
.sheet__chip[aria-current='true'] { border-color: var(--or); }
.sheet__chip[aria-current='true'] path { fill: var(--or); }

/* Im Bogen steht immer der UMRISS, auch bei Wappen-Fragen. Zwei Gründe: die
   Einfärbung nach Ergebnis geht nur über `fill` auf einem Pfad, nicht auf einem
   eingebetteten Bild, und ein gemischtes Raster aus Umrissen und Wappen wäre
   unruhig. Was gezeigt und was gefragt war, sagt die Marke ("UB", "WH" …). */
.sheet__chip::after {
  content: attr(data-ask);
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--muted);
  opacity: 0.85;
}

.sheet__detail {
  margin: 1rem 0 0;
  min-height: 3.6em;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--muted);
}
.sheet__detail strong {
  display: block;
  font-size: 1.15rem;
  font-stretch: 80%;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--paper);
}
.sheet__detail .mono { font-size: 0.82rem; display: block; }

/* ── Breite Fenster ──────────────────────────────────────────────────────── */

@media (min-width: 56rem) and (min-height: 40rem) {
  .screen--play { max-width: 54rem; }
  .specimen { max-width: 40rem; }
  :root { --stage-h: min(48vh, 27rem); }
  .verdict { max-width: 40rem; }
  .answer { max-width: 40rem; margin: 0 auto; width: 100%; }
  .controls__row { max-width: 40rem; margin: 0 auto; width: 100%; }
  .heard { max-width: 40rem; margin: 0 auto; width: 100%; }
}

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

/* ── Rückweg zur Spielauswahl ────────────────────────────────────────────── */

.backlink {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.backlink a {
  display: inline-block;
  min-height: 44px;
  padding: 0.7rem 0 0.3rem;
  color: var(--muted);
  text-decoration: none;
}
/* Als CSS-Escape und nicht als Zeichen, damit der Pfeil nicht davon abhängt,
   ob der Server für .css ein charset mitschickt. */
.backlink a::before { content: "\2190"; margin-right: 0.5em; }
.backlink a:hover { color: var(--paper); }

/* In der installierten App gibt es keine Spielauswahl zu erreichen, ohne den
   Scope zu verlassen und den Browser aufzureißen. Dort also weg damit. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .backlink { display: none; }
}