/* ══════════════════════════════════════════════════════════════════════════
   Länderkunde
   Gleiche Farbwelt wie die Flaggenkunde: heraldische Tinkturen auf Tiefengrau.
   Der Umriss ist das einzige gesättigte Element, alles andere hält sich raus.
   ══════════════════════════════════════════════════════════════════════════ */

@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;

  /* Deutschland als Kulisse: sichtbar genug für die Lage, stumpf genug, dass
     das gesuchte Land 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));
}

/* Wappen: eigenes Element, weil es ein Seitenverhältnis braucht, wo das SVG
   einen viewBox braucht. --ratio setzt js/app.js je Wappen, bevor das Bild da
   ist, damit die Bühne beim Wechsel nicht springt. Die Spanne ist groß: Berlin
   0,61 hochkant, das große Wappen Baden-Württembergs 1,80 breit. */
/* Dasselbe Muster wie beim Flaggenspiel, und aus demselben Grund: die Breite
   aus Bühnenhöhe × Verhältnis ableiten und bei 100 % deckeln, die Höhe folgt
   über aspect-ratio. Mit `height: 100%` plus `max-width: 100%` bekäme ein
   breites Wappen (BW 1,80) einen quadratischen Kasten, weil die Breite gedeckelt
   wird, die Höhe aber stehen bleibt. */
/* Das Wappen bekommt die Bühne, `object-fit` wahrt das Seitenverhältnis.
 *
 * Bewusst OHNE `max-height`. Der frühere Versuch
 *     width: min(100%, calc(var(--stage-h) * var(--ratio)));
 *     height: auto; max-height: 100%;
 * ließ zwei der 16 Wappen deutlich kleiner erscheinen als die anderen
 * vierzehn (Hamburg 225 statt 283 px, Sachsen-Anhalt 179 statt 327): deren
 * SVG-Wurzel bringt eigene width/height mit, eine davon in Millimetern, und
 * zusammen mit max-height klemmte die Höhe darauf fest. Rechnerisch war die
 * Zeile ohnehin überflüssig.
 *
 * Diese Fassung braucht das Seitenverhältnis gar nicht mehr und ist damit
 * unabhängig davon, was die einzelne Datei über ihre Größe behauptet. Nachge-
 * messen für alle 16 Wappen bei 430×900, 430×560, 1440×900 und 820×420: das
 * Verhältnis stimmt, eine Achse füllt die Bühne aus, nichts läuft über. */
.specimen__wappen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.6));
}

.specimen--raise .specimen__map,
.specimen--raise .specimen__wappen { 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; }
}