/* Bühnenbild: dunkel, hoher Kontrast, aus zehn Metern lesbar.
   Alles skaliert über clamp() mit der Viewportbreite -- Laptop wie Beamer. */

:root {
  --bg: #08070d;
  --ink: #f4f1ff;
  --muted: #8f88b5;
  --line: #241f3d;
  --accent: #ff2e7e;
  --accent-2: #26e0c0;
  --hit: #ffd447;
  --panel: #100d1e;
}

/* Jede Spielweise hat ihre Farbe. Sie färbt den Segmentschalter, den
   Fortschrittsbalken, den Start-Knopf, die Saatzeile und den Streak -- und mit
   `--glow` den Schimmer über der ganzen Bühne. So sieht man aus zehn Metern,
   welches Spiel läuft, ohne die Leiste zu lesen.

   Der Wechsel ist ein harter Schnitt ohne Übergang. Das ist Absicht: im Spiel
   ist er auch einer (neue Runde, neue Wolkengröße, Streak auf null). */
:root,
body[data-mode="wolke"]     { --mode: #26e0c0; --mode-2: #7af0d4; --mode-soft: #26e0c066; --glow: #17123a; }
body[data-mode="liste"]     { --mode: #8b5cff; --mode-2: #c6a6ff; --mode-soft: #8b5cff66; --glow: #1d1348; }
body[data-mode="stress"]    { --mode: #ff2e7e; --mode-2: #ff86b8; --mode-soft: #ff2e7e66; --glow: #34112b; }

* { box-sizing: border-box; }

/* `el.hidden = true` muss wirken, auch wenn der Selektor selbst ein display
   setzt. #countdown und #streak sind flex-Boxen -- und eine Autorenregel
   schlägt das display:none, das der Browser dem hidden-Attribut gibt. Ohne
   diese Zeile stand der Zähler dauerhaft auf der Bühne und der Streak in jeder
   Spielweise. Festgeschrieben in tests/test_static.py. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
html { background: var(--bg); }
body { background: radial-gradient(120% 90% at 50% -10%, var(--glow) 0%, var(--bg) 60%); }

body { display: flex; flex-direction: column; }

/* ------------------------------------------------------------- Fortschritt */

#progress { position: fixed; inset: 0 0 auto 0; height: 4px; background: #ffffff10; z-index: 20; }
#progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--mode), var(--mode-2));
  box-shadow: 0 0 .6rem -.1rem var(--mode);
  transition: width .12s linear;
}
/* Der Wechsel-Countdown ist laut -- in jeder Spielweise dieselbe Warnfarbe. */
body[data-phase="countdown"] #progress-fill { background: linear-gradient(90deg, var(--hit), var(--accent)); }

/* -------------------------------------------------------------- Kopfleiste */

#bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--line);
  background: #0b0916cc; backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.brand { font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; }
.brand span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

#topic-form { display: flex; gap: .5rem; align-items: center; flex: 1 1 320px; }
#topic {
  flex: 1 1 auto; min-width: 8rem; max-width: 22rem;
  padding: .55rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: .95rem;
}
#topic:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }

button {
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: transform .08s ease, border-color .15s, background .15s;
}
button:hover { border-color: var(--accent-2); }
button:active { transform: scale(.96); }
#start {
  background: linear-gradient(90deg, var(--accent), #b32fff);
  border-color: transparent; font-weight: 800;
}
#start:hover { filter: brightness(1.15); border-color: transparent; }

/* Die Spielweise: ein Segmentschalter, drei Knöpfe in einer Schiene. Er steht
   links neben Start/Neue Wolke/Stopp, weil er die erste Entscheidung des Abends
   ist -- und weil man auf einer Bühne kein Menü aufklappt.
   Jeder Knopf trägt seinen Punkt in der Farbe seiner Spielweise, auch wenn er
   nicht gewählt ist; der gewählte ist die gefüllte Pille. */
#modes {
  display: flex; gap: .2rem; flex: 0 0 auto;
  padding: .22rem; border-radius: 999px;
  border: 1px solid var(--line); background: #09071299;
  box-shadow: inset 0 1px 0 #ffffff0a;
}
button.mode {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .9rem; border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: .82rem; font-weight: 700;
  transition: color .18s, background .18s, box-shadow .3s, transform .08s ease;
}
button.mode::before {
  content: ""; width: .48rem; height: .48rem; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 .45rem -.05rem var(--dot);
  transition: transform .2s, background .2s, box-shadow .3s;
}
#modes button[data-mode="wolke"]  { --dot: #26e0c0; }
#modes button[data-mode="liste"]     { --dot: #8b5cff; }
#modes button[data-mode="stress"]    { --dot: #ff2e7e; }

button.mode:hover { color: var(--ink); background: #ffffff0f; }
button.mode:focus-visible { outline: 2px solid var(--dot); outline-offset: 2px; }

/* Der gewählte Modus: gefüllte Pille in seiner Farbe, dunkle Schrift, Schein
   nach außen. Er ist die einzige Stelle in der Leiste, die leuchtet. */
button.mode[aria-pressed="true"] {
  color: #08070d;
  background: linear-gradient(135deg, var(--dot), #ffffffcc);
  box-shadow: 0 0 1rem -.15rem var(--dot), inset 0 1px 0 #ffffff88;
}
button.mode[aria-pressed="true"]::before {
  background: #08070d; box-shadow: none; transform: scale(1.2);
}

/* Die Regler. Bewusst klein und in der Leiste -- sie werden zwischen zwei
   Runden angefasst, nicht während einer Zeile. Welche davon sichtbar sind,
   hängt am Modus: app.js blendet die aus, die in dieser Spielweise nichts
   bedeuten (ein Vorlauf-Regler im Stress-Modus wäre eine Lüge). */
.dials { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.dial { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.dial > span { letter-spacing: .04em; text-transform: uppercase; }
.dial output { min-width: 1.1rem; text-align: center; color: var(--ink); font-weight: 700; font-size: .9rem; }

.dial input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: clamp(4rem, 8vw, 7rem); height: 1.1rem; background: transparent; cursor: pointer;
}
.dial input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: var(--line);
}
.dial input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); }
.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .85rem; height: .85rem; border-radius: 50%; margin-top: -.28rem;
  background: var(--accent-2); border: none;
}
.dial input[type="range"]::-moz-range-thumb {
  width: .85rem; height: .85rem; border-radius: 50%; background: var(--accent-2); border: none;
}
.dial input[type="range"]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }

.right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.pill { font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .7rem; white-space: nowrap; }
.pill.ok { color: var(--accent-2); border-color: #26e0c055; }

.mic .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #55506e; margin-right: .45rem; vertical-align: middle; }
.mic[aria-pressed="true"] { border-color: var(--accent); }
.mic[aria-pressed="true"] .dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 #ff2e7e88; } 50% { box-shadow: 0 0 0 .5rem #ff2e7e00; } }

/* ------------------------------------------------------------------ Bühne */

/* Stapelreihenfolge auf der Bühne. Die Wörter stehen ganz oben: sie sind das
   Spiel, alles andere ist Beiwerk. Ohne diese Ordnung malt der Browser die
   Karte über sie, weil sie absolut positioniert ist und die Wolke nicht --
   und dann liegt ein halbdurchsichtiges Panel auf dem Wort, das gerappt
   werden soll.

     6  Hinweistext (eine Meldung, die niemand übersieht)
     5  die Wörter
     4  Thema/Saatwort
     3  Zahlen rechts unten (Streak, Countdown)
     2  QR-Code und Wunschliste
     1  Karte

   Alles außer den Wörtern trägt `pointer-events: none`: kein Panel darf
   einen Klick auf ein Wolkenwort abfangen.
*/
#stage {
  flex: 1 1 auto; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem 2rem; min-height: 0;
}

#seedline { position: relative; z-index: 4; display: flex; align-items: baseline; gap: .7rem; color: var(--muted); font-size: clamp(.8rem, 1.4vw, 1.1rem); margin-bottom: clamp(.5rem, 2vh, 2rem); }
/* „Thema" / „Aufgegriffen" in der Farbe der Spielweise -- der einzige Ort auf
   der Bühne, an dem sie beschriftet ist. */
#seed-label { color: var(--mode); letter-spacing: .12em; text-transform: uppercase; font-size: .78em; }
#seedline strong { color: var(--ink); font-size: clamp(1rem, 2.2vw, 1.8rem); letter-spacing: .01em; }

#cloud {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(.6rem, 2.2vw, 2.6rem);
  max-width: 92vw;
}

.word {
  --size: 1;
  font-size: calc(clamp(1.7rem, 4.6vw, 5.2rem) * var(--size));
  font-weight: 800; line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink); cursor: pointer; user-select: none;
  /* Dunkler Saum: oben liegen reicht nicht, wenn darunter der helle Punktnebel
     der Karte sitzt. Der Saum trägt das Wort über jedem Untergrund. */
  text-shadow: 0 0 .28em rgba(8, 7, 13, .95), 0 .04em .12em rgba(8, 7, 13, .8);
  transform: rotate(var(--tilt)) translateY(var(--drift));
  transition: color .2s, text-shadow .2s, transform .25s, opacity .3s ease;
  animation: enter .45s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay: var(--delay);
}
.word[data-tier="1"] { color: #d9d3f5; }
.word[data-tier="2"] { color: var(--muted); font-weight: 700; }
.word:hover { color: var(--accent-2); }

.word.hit {
  color: var(--hit);
  text-shadow: 0 0 .28em rgba(8, 7, 13, .95), 0 0 .12em #ffd44755, 0 0 .5em #ffd44766, 0 0 1.2em #ff2e7e55;
  animation: flare .5s ease-out;
  transform: rotate(0deg) scale(1.06);
}

/* Stress-Modus: nach der Einblendzeit verschwindet das Wort -- gerappt wird
   aus dem Gedächtnis. Was getroffen wurde, bleibt stehen; das ist die
   Belohnung und die Rückmeldung in einem. */
body.veiled .word:not(.hit) { opacity: 0; }

@keyframes enter { from { opacity: 0; transform: rotate(var(--tilt)) translateY(1.4rem) scale(.92); } }
@keyframes flare { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: rotate(0) scale(1.06); } }

/* Rechts unten, eine Spalte: Streak über Countdown. Die Spalte ist der
   Grund, warum keiner von beiden einen gerechneten Abstand braucht. */
#hud {
  position: absolute; z-index: 3;
  right: clamp(1rem, 4vw, 4rem); bottom: clamp(1rem, 4vh, 3rem);
  display: flex; flex-direction: column; align-items: center; gap: clamp(.5rem, 2vh, 1.5rem);
  pointer-events: none;
}

#countdown {
  display: flex; flex-direction: column; align-items: center;
  /* Vorlauf ist ruhig, der Wechsel-Countdown ist laut. */
  color: var(--muted); transition: color .3s;
}
body[data-phase="countdown"] #countdown { color: var(--hit); }
/* Im Stress-Modus ist der Zähler die Uhr des Spiels -- er gehört zur Farbe. */
body[data-mode="stress"] #countdown { color: var(--mode); }
#countdown-num { font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 900; line-height: 1; }
#countdown small { color: var(--muted); font-size: clamp(.7rem, 1.2vw, .95rem); letter-spacing: .12em; text-transform: uppercase; }

/* Der Streak: im Stress-Modus die einzige Zahl, die zählt. Er sitzt über dem
   Countdown, weil rechts oben die Wunschliste steht. */
#streak {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
#streak strong {
  font-size: clamp(2rem, 5.5vw, 4.5rem); font-weight: 900; color: var(--mode);
  text-shadow: 0 0 .5em var(--mode-soft);
  transition: color .25s, text-shadow .25s;
}
#streak small { color: var(--muted); font-size: clamp(.6rem, 1vw, .8rem); letter-spacing: .14em; text-transform: uppercase; }
/* Bei null gibt es nichts zu feiern. */
#streak[data-cold="true"] strong { color: var(--muted); text-shadow: none; }

/* ------------------------------------------------- QR-Code und Wünsche */

/* Links oben, über der Karte: die Einladung an die Gäste. Weißer Grund ist
   keine Geschmacksfrage -- ein QR-Code auf dunklem Untergrund wird von vielen
   Kameras nicht gelesen. */
#qr {
  position: absolute; z-index: 2;
  left: clamp(.8rem, 3vw, 2.5rem); top: clamp(.5rem, 3vh, 2rem);
  margin: 0; padding: .5rem .5rem .35rem;
  width: clamp(7rem, 12vw, 11rem);
  border: 1px solid var(--line); border-radius: .9rem;
  background: #0d0a1acc; backdrop-filter: blur(6px);
  pointer-events: none;
}
#qr img { display: block; width: 100%; height: auto; border-radius: .4rem; background: #fff; }
#qr figcaption { margin-top: .4rem; text-align: center; }
/* Der einzige Teil der Einladung, den man anklicken kann -- der Rest lässt
   Klicks durch (pointer-events: none am Kasten). */
/* Kaffeegelb auf der dunklen Bühne: die einzige warme Fläche im Kasten, damit
   man den Link findet, ohne dass er dem QR-Code die Schau stiehlt. */
#coffee {
  display: block; margin-top: .45rem; padding: .3rem .4rem; border-radius: 999px;
  text-align: center; font-size: clamp(.55rem, .7vw, .7rem); font-weight: 700;
  background: #ffdd00; color: #1a1430;
  text-decoration: none; white-space: nowrap; pointer-events: auto;
}
#coffee:hover, #coffee:focus-visible { background: #fff; }
.qr-title {
  display: block; font-size: clamp(.6rem, .78vw, .74rem); letter-spacing: .09em;
  text-transform: uppercase; color: var(--mode);
}
.qr-url {
  display: block; margin-top: .1rem; font-size: clamp(.5rem, .62vw, .62rem); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rechts oben: die Kandidaten. Der oberste ist der nächste -- deshalb steht
   er auch optisch vorn und die übrigen treten zurück. */
#wishes {
  position: absolute; z-index: 2;
  right: clamp(.8rem, 3vw, 2.5rem); top: clamp(.5rem, 3vh, 2rem);
  max-width: clamp(9rem, 18vw, 15rem);
  padding: .55rem .8rem .6rem;
  border: 1px solid var(--line); border-radius: .9rem;
  background: linear-gradient(160deg, #0d0a1acc, #08070dcc);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.wishes-title {
  display: block; font-size: clamp(.6rem, .78vw, .74rem); letter-spacing: .09em;
  text-transform: uppercase; color: var(--mode);
}
#wishes ol {
  margin: .35rem 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .12rem;
}
#wishes li {
  font-size: clamp(.78rem, 1.15vw, 1rem); font-weight: 700; color: #a49cc8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Der nächste Wunsch, hell und in der Farbe der Spielweise. */
#wishes li:first-child { color: var(--ink); font-size: clamp(.95rem, 1.5vw, 1.35rem); }
#wishes li:first-child::before {
  content: "▸ "; color: var(--mode);
}

/* Schmale oder flache Bildschirme: dieselbe Überlegung wie bei der Karte --
   dort nimmt beides der Wolke die Bühne. */
@media (max-width: 880px), (max-height: 560px) {
  #qr, #wishes { display: none; }
}

/* ------------------------------------------------------------------ Karte */

/* Unten links, klar abseits der Wolke: die Wolke lebt in der Mitte, die Karte
   sitzt in der Ecke und drängt sich nicht auf. */
#map {
  position: absolute; left: clamp(.8rem, 3vw, 2.5rem); bottom: clamp(.8rem, 3vh, 2.2rem);
  margin: 0; padding: .55rem .55rem .35rem;
  width: clamp(13rem, 26vw, 24rem);
  border: 1px solid var(--line); border-radius: .9rem;
  background: linear-gradient(160deg, #0d0a1acc, #08070dcc);
  backdrop-filter: blur(6px);
  z-index: 1;
  opacity: .72; transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;                 /* nie im Weg beim Klick auf ein Wort */
}
body[data-phase="countdown"] #map { opacity: .95; }

#map canvas { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: .55rem; }

#map figcaption { margin-top: .4rem; }
.map-title {
  display: block; font-size: clamp(.62rem, .8vw, .74rem); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* Der Verlauf als lesbare Kette. Eine Zeile, Rest wird abgeschnitten -- das
   Bild darüber zeigt den ganzen Weg, hier stehen nur die letzten Stationen. */
.map-chain {
  display: block; margin-top: .15rem;
  font-size: clamp(.68rem, 1.05vw, .88rem); line-height: 1.3; color: #cfc7f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: .9rem;
}
.map-chain:empty { min-height: 0; }

/* Auf schmalen oder flachen Bildschirmen nimmt die Karte in dieser Größe der
   Wolke die Bühne weg -- dann lieber gar nicht. */
@media (max-width: 880px), (max-height: 560px) {
  #map { display: none; }
}

#notice {
  position: absolute; z-index: 6; bottom: 8%; max-width: 42rem; text-align: center;
  color: var(--hit); background: #ffd4470f; border: 1px solid #ffd44733;
  border-radius: .8rem; padding: .7rem 1.1rem; font-size: .95rem;
}

/* ------------------------------------------------------------------- Fuß */

#foot {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .6rem 1.2rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .8rem; min-height: 2.6rem;
}
/* Was eng wird, ist der Tastenhinweis -- nicht das Gehörte und nicht die
   Pflichtlinks. Ohne das schob der Hinweis beides aus dem Bild. */
#heard { flex: 1 1 8rem; min-width: 8rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .8; font-style: italic; }
#hint { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .6; }
#mic-note { flex: 0 0 auto; white-space: nowrap; color: var(--hit); }
#legal { flex: 0 0 auto; white-space: nowrap; opacity: .6; }
#legal a { color: inherit; }
kbd { border: 1px solid var(--line); border-radius: .3rem; padding: 0 .3rem; font-family: inherit; }

/* ------------------------------------------------- Das Fenster vorab */

:is(#intro, #gate) {
  width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 1.6rem 1.8rem; border: 1px solid var(--line); border-radius: 1.2rem;
  background: #100d1e; color: var(--ink); line-height: 1.5;
}
:is(#intro, #gate)::backdrop { background: #05040acc; backdrop-filter: blur(4px); }
:is(#intro, #gate) h2 { margin: 0 0 .6rem; font-size: 1.5rem; }
:is(#intro, #gate) h3 { margin: 1.3rem 0 .3rem; font-size: 1rem; color: var(--mode-2); }
:is(#intro, #gate) h4 { margin: 0 0 .4rem; font-size: 1rem; }
:is(#intro, #gate) p { margin: .3rem 0 .7rem; }
:is(#intro, #gate) a { color: var(--mode-2); }
:is(#intro, #gate) .weg { margin-top: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .9rem; background: #ffffff06; }
:is(#intro, #gate) .consent { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0 .8rem; cursor: pointer; }
:is(#intro, #gate) .consent input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
:is(#intro, #gate) button { font: inherit; font-weight: 700; padding: .65rem 1.1rem; border-radius: .7rem; border: 1px solid var(--mode); background: var(--mode); color: #08070d; cursor: pointer; }
:is(#intro, #gate) button:disabled { opacity: .4; cursor: not-allowed; }
#intro #intro-local-go { background: transparent; color: var(--mode-2); }
#intro .intro-foot { margin-top: 1.2rem; font-size: .85rem; opacity: .7; }

/* Die Zeichenprobe: schmaler als das Fenster davor, Bild und Feld untereinander. */
#gate { width: min(30rem, calc(100vw - 2rem)); }
#gate-form { display: grid; gap: .8rem; justify-items: start; margin-top: 1rem; }
#gate-img { width: min(100%, 22rem); height: auto; border-radius: .6rem; border: 1px solid var(--line); background: #12101c; }
#gate-answer {
  font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  width: min(100%, 22rem); padding: .5rem .8rem; border-radius: .7rem;
  border: 1px solid var(--line); background: #ffffff0a; color: var(--ink);
}
#gate .gate-buttons { display: flex; gap: .6rem; flex-wrap: wrap; }
#gate #gate-new { background: transparent; color: var(--mode-2); }
#gate-status { color: var(--mode-2); }

/* Zuschauer: dieselbe Bühne ohne Regiepult. Der Server nimmt von ihnen
   ohnehin nichts an -- ein Knopf, der nichts tut, ist schlimmer als keiner. */
body.zuschauer #topic-form, body.zuschauer .dials, body.zuschauer #mic, body.zuschauer #hint { display: none; }

body.playing #bar { opacity: .35; transition: opacity .4s; }
body.playing #bar:hover, body.playing #bar:focus-within { opacity: 1; }

@media (max-width: 900px) {
  .dial > span { display: none; }
  /* Der Schalter schrumpft auf seine Punkte -- die Farbe trägt die Auskunft. */
  button.mode { padding: .42rem .55rem; font-size: 0; gap: 0; }
}

@media (max-width: 720px) {
  #hint { display: none; }
  #foot { font-size: .72rem; }
}