/* ══════════════ Gemeinsame Lobby-Basis ══════════════ Anfang ═══════════════
   ERZEUGT – NICHT HIER ÄNDERN. Quelle: /var/www/html/gemeinsam/lobby.css
   Ändern, dann `node werkzeug/verteilen.mjs` – das schreibt diesen Block in
   jedes Spiel. `--pruefen` meldet, wo er abgewichen ist.

   --akzent/--akzent2 setzt jedes Spiel unterhalb des Endmarkers selbst;
   alles davon oberhalb ist in allen Spielen gleich.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0a0612;
  --bg2: #140b23;
  --panel: rgba(30, 18, 52, .72);
  --line: rgba(160, 120, 255, .18);
  --ink: #f2ecff;
  --muted: #9c8fc2;
  --hot: #ff2e88;
  --hot2: #ff8a3d;
  --cool: #35e6ff;
  --gold: #ffd447;
  --good: #52ffa8;
  --bad: #ff4d5e;
  --r: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);

  /* Voreinstellung, wird je Spiel überschrieben */
  --akzent: var(--hot);
  --akzent2: var(--gold);
}

/* Screens: beide Schaltklassen, damit jedes Spiel seinen bisherigen
   Umschalter behalten kann (.on in Card Chaos, .active in den anderen). */
.screen.on, .screen.active, .view.active { display: flex; }

/* ── Typo ─────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; flex-wrap: wrap; justify-content: center; }

.logo {
  font-size: clamp(38px, 8vw, 76px); font-weight: 900;
  letter-spacing: -.03em; line-height: .92; text-align: center;
  background: linear-gradient(100deg, #fff 10%, var(--akzent) 45%, var(--akzent2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(255, 46, 136, .35));
}
.logo span {
  display: block;
  background: linear-gradient(100deg, var(--cool), #a06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo.sm { font-size: 20px; line-height: 1; }
.logo.sm span { display: inline; }
.tag {
  color: var(--muted); margin-top: 10px; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; backdrop-filter: blur(14px); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.panel.narrow { max-width: 380px; }
.panel.wide { max-width: 700px; }

/* ── Formulare ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field span {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
}
input, select {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 13px 15px; font-family: inherit; width: 100%;
  /* 16px ist Pflicht: darunter zoomt iOS Safari beim Fokus in das Feld hinein. */
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(255, 46, 136, .18);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink);
  border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; user-select: none;
  transition: transform .12s, filter .15s, background .15s;
}
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn:active { transform: scale(.96); }
.btn.big { padding: 16px 26px; font-size: 17px; }
/* .sm und .small sind dasselbe – die vier Spiele hatten je eine der beiden
   Schreibweisen, beide bleiben gültig, damit kein Markup umgeschrieben wird. */
.btn.sm, .btn.small { padding: 8px 12px; font-size: 13px; width: auto; }
.btn.ghost { background: transparent; }
.btn.primary {
  background: linear-gradient(100deg, var(--akzent), var(--akzent2));
  border-color: transparent; color: #180a12;
  box-shadow: 0 6px 22px rgba(255, 46, 136, .3);
}
.btn.primary:hover { filter: brightness(1.12); }
.btn.on { background: linear-gradient(100deg, #1ec98a, var(--good)); color: #04220f; border-color: transparent; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ── Trenner „oder beitreten" ─────────────────────────────────────────── */
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Einstellungszeile: Beschriftung links, Schalter rechts ───────────── */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-label {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}

/* ── Sichtbarkeit: Öffentlich | Privat ────────────────────────────────── */
.segmented {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px;
}
.seg {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  font: 700 14px/1 inherit; font-family: inherit; padding: 10px 8px;
  border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.seg.sel { background: rgba(255, 255, 255, .1); color: var(--ink); }

/* ── Raumcode + Teilen ────────────────────────────────────────────────── */
.codebox {
  text-align: center; background: var(--panel);
  border: 2px dashed var(--line); border-radius: var(--r); padding: 16px;
}
.codebox-label {
  display: block; font-size: 11px; letter-spacing: .18em;
  color: var(--muted); text-transform: uppercase;
}
.codebox strong {
  display: block; font-size: clamp(34px, 11vw, 46px); font-weight: 900;
  letter-spacing: .22em; color: var(--gold); margin: 4px 0 10px;
  /* Der Code wird abgetippt und vorgelesen – Ziffern gleich breit. */
  font-variant-numeric: tabular-nums;
}
.codebox-vis { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.codebox .btn { margin: 0 auto; }

.joinrow { display: flex; gap: 10px; }
.joinrow input { text-align: center; letter-spacing: .3em; font-weight: 800; }
.joinrow .btn { width: auto; flex: 0 0 auto; }

/* ── Offene Räume ─────────────────────────────────────────────────────── */
.rooms-head {
  font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.rooms-head span { color: var(--cool); }
.roomlist { display: flex; flex-direction: column; gap: 8px; }
.rooms-empty {
  font-size: 13px; color: var(--muted); line-height: 1.45;
  padding: 12px 14px; border: 2px dashed var(--line); border-radius: var(--r);
}
.roomrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
  cursor: pointer; text-align: left; color: inherit;
  font-family: inherit; font-size: 15px;
  transition: transform .14s, border-color .15s, background .15s;
}
.roomrow:hover { transform: translateY(-2px); border-color: var(--akzent); background: rgba(255, 46, 136, .1); }
.roomrow:active { transform: scale(.98); }
.roomrow-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomrow-meta { font-size: 12px; color: var(--muted); }
.roomrow-code { font-weight: 900; letter-spacing: .12em; color: var(--gold); font-variant-numeric: tabular-nums; }
.roomrow-count { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }

.pill {
  font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.pill.live { background: rgba(255, 46, 136, .22); color: var(--hot); }
.pill.open { background: rgba(82, 255, 168, .18); color: var(--good); }

/* ── Warteraum: Sitze ─────────────────────────────────────────────────── */
/* 110px, nicht 140: bei 360px Displaybreite bleiben nach Screen- und
   Panel-Polsterung nur ~276px übrig – mit 140px stünden die Sitze
   untereinander und der Warteraum wäre doppelt so hoch. */
.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.seat {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 12px;
  text-align: center; background: rgba(0, 0, 0, .28);
  transition: border-color .2s, box-shadow .2s;
}
.seat.ready { border-color: var(--good); box-shadow: 0 0 0 3px rgba(82, 255, 168, .12); }
.seat.off { opacity: .45; }
.seat .av { font-size: 30px; }
.seat .nm { font-weight: 800; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .st { font-size: 12px; color: var(--muted); margin-top: 3px; }
.seat.ready .st { color: var(--good); }
.seat .host { font-size: 11px; color: var(--gold); letter-spacing: .1em; }
.seat.empty { border-style: dashed; opacity: .4; }

/* ── Tippen statt Zoomen ─────────────────────────────────────────────────
   `user-scalable=no` im Viewport steht in jedem Spiel – und iOS Safari hält
   sich seit Version 10 nicht mehr daran. Der Doppeltipp-Zoom bleibt damit an,
   und mit ihm die Wartezeit: der Browser hält jeden Tipp erst zurück, um zu
   sehen, ob ein zweiter folgt. Wer schnell hintereinander tippt – und genau
   das tut man in einem Spiel –, dessen zweiter Tipp verschwindet dann im
   Zoomversuch. „Am Handy geht es manchmal nicht, Karten lassen sich nicht
   anklicken" (Bugreport 13).

   `manipulation` schaltet genau diese Gesten ab und lässt Scrollen und
   Aufziehen in Ruhe. */
html, body, button, .btn, .seat, .roomrow, .seg { touch-action: manipulation; }

/* ── Der Weg zurück ──────────────────────────────────────────────────────
   Jeder Bildschirm braucht einen sichtbaren Ausgang: von der Startseite eines
   Spiels zur Übersicht, aus Runde und Endstand aus dem Raum. Vorher hatten nur
   die fünf Spiele ohne Lobby einen solchen Link, und aus dem Spielbildschirm
   führte für alle ausser dem Host gar nichts heraus – Bugreport 10. */
.zurueckzeile { text-align: center; margin-top: 12px; }
.zurueck {
  display: inline-block; padding: 6px 4px;
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.zurueck:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .btn, .roomrow, .seat { transition: none; }
  /* Auch Einblend-Animationen aus: sie starten bei opacity 0, und wer
     Bewegung abgeschaltet hat, soll den Inhalt sofort sehen – nicht erst
     nach der Animation. Nebenbei trifft so auch der Layout-Screenshot
     nicht mehr Frame 0. */
  .screen, .screen.on { animation: none !important; }
}


/* --- Sprachwahl ---------------------------------------------------------- */
/* Der Umschalter wird von sprache.js gefuellt und bleibt ohne JavaScript leer
   – deshalb :empty, sonst stuende dort ein leerer Kasten. Er steht auf dem
   Startbildschirm: gewaehlt wird vor dem Spielen, und die Wahl gilt
   geraeteweit fuer alle Spiele. */
.sprachwahl {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin: 10px auto 0;
  width: fit-content;
  border: 1px solid var(--linie, rgba(255, 255, 255, .14));
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.sprachwahl:empty { display: none; }

.sprachknopf {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--leise, #9c8fc2);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.sprachknopf:hover { color: #fff; }
.sprachknopf.sel { background: rgba(255, 255, 255, .12); color: #fff; }
.sprachknopf:focus-visible { outline: 2px solid var(--akzent, #52ffa8); outline-offset: 2px; }

/* ══════════════ Gemeinsame Lobby-Basis ══════════════ Ende ═════════════════ */

/* Lucky Reflex: eigener Akzent + Altnamen, die der Rest dieser Datei und
   render.js weiterbenutzen. So aendert sich die Farbe an einer Stelle. */
:root {
  --akzent: var(--hot);
  --akzent2: var(--cool);
  --dim: var(--muted);
  --pink: var(--hot);
  --cyan: var(--cool);
  --purple: #7a3dff;
  --radius: var(--r);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(90vw 60vh at 15% -10%, #2a1150 0%, transparent 60%),
    radial-gradient(80vw 50vh at 100% 110%, #12324d 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button, input { font: inherit; color: inherit; }

/* --- Bildschirme --------------------------------------------------------- */

.screen {
  position: fixed;
  inset: 0;
  display: none;
  overflow-y: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: block; }
#screen-game.active { display: block; overflow: hidden; }

/* --- Bausteine ----------------------------------------------------------- */

.hintline { color: var(--dim); font-size: .85rem; text-align: center; margin-top: 10px; }

#status, #toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: #000c;
  border: 1px solid var(--line);
  font-size: .82rem;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#status { top: calc(8px + env(safe-area-inset-top)); }
#toast { bottom: calc(18px + env(safe-area-inset-bottom)); }
#status.show, #toast.show { opacity: 1; }

/* --- Startseite ---------------------------------------------------------- */

.home, .lobby, .final {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100dvh;
  justify-content: center;
}

.tagline { text-align: center; color: var(--muted); margin-bottom: 10px; }
.field-label { font-size: .8rem; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }

/* --- Lobby --------------------------------------------------------------- */

.lobby-head h2 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lobby-head span { color: var(--ink); }

/* Die Steuerblöcke im Warteraum sind Flex-Spalten, damit die Knöpfe darin
   auf volle Breite gehen – so wie in den Panels der anderen Spiele. */
#hostControls, #guestControls { display: flex; flex-direction: column; gap: 10px; }
#hostControls[hidden], #guestControls[hidden] { display: none; }

/* --- Spielbildschirm ----------------------------------------------------- */
/* Drei gestapelte Zeilen: Kopf und Fuß nehmen, was sie brauchen, die Bühne
   bekommt exakt den Rest. Deshalb min-height:0 – ohne das weigert sich ein
   Flex-Kind zu schrumpfen und die Bühne wächst aus dem Bild heraus. */

.game {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.tb-round { font-weight: 900; font-size: 1.1rem; }
.tb-round small { color: var(--dim); font-weight: 700; }
/* Die Serie ist das, was sich über Runden aufbaut und was man verlieren
   kann – sie steht deshalb mittig oben statt am Rand. */
.tb-combo {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5em;
  opacity: 0;
  transition: opacity .25s;
}
.tb-combo.show { opacity: 1; }
.combo-x { font-weight: 900; font-size: 1.15rem; color: var(--gold); }
.combo-n { font-size: .72rem; color: var(--dim); font-weight: 700; }
.tb-combo.hot .combo-x { color: var(--pink); animation: blink .8s infinite; }
.tb-combo.hot .combo-n { color: var(--gold); }
.tb-sound {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
}

.timerbar {
  flex: 0 0 auto;
  height: 10px;
  transition: opacity .2s;
  margin: 0 12px 8px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
#timerFill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--good));
}
#timerFill.low { background: linear-gradient(90deg, var(--gold), var(--bad)); }
.timerbar.off { opacity: 0; }

.stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  margin: 0 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, #170f2b, #0d091a);
  border: 2px solid var(--line);
  overflow: hidden;
  container-type: size;
  touch-action: none;
}
.stage.live { cursor: pointer; }
.stage.live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px #29e7ff30;
  pointer-events: none;
}
/* Kurz nach dem Druck deutlich abgedunkelt, danach nur noch angedeutet: die
   Runde läuft weiter und wer daneben griff, will trotzdem zusehen können. */
.stage.pressed { filter: saturate(.55) brightness(.75); }
.stage.spent { filter: saturate(.85) brightness(.93); }
.stage { transition: filter .35s; }

.press-tag {
  position: absolute;
  bottom: 2.5cqmin;
  right: 3cqmin;
  z-index: 4;
  padding: .9cqmin 2.4cqmin;
  border-radius: 999px;
  font-size: 3cqmin;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.press-tag.show { opacity: 1; }
.press-tag.good { background: #2bf58a1f; border: 1px solid #2bf58a66; color: var(--good); }
.press-tag.bad { background: #ff4d5e1f; border: 1px solid #ff4d5e66; color: var(--bad); }

.stage-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqmin;
  padding: 9cqmin 3cqmin 3cqmin;
  text-align: center;
}

/* Die Frage steht die ganze Runde über oben – aus dem Fluss genommen,
   damit der eigentliche Inhalt in der Bühne mittig bleibt. */
.stage-prompt {
  position: absolute;
  top: 2.5cqmin;
  left: 3cqmin;
  right: 3cqmin;
  z-index: 3;
  font-size: 3.6cqmin;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}

.scorebar {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}
.chip {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 7px 8px;
  line-height: 1.15;
}
.chip.me { border-color: var(--cyan); }
.chip.gone { opacity: .35; }
.chip-name {
  font-size: .72rem;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-streak { color: var(--gold); font-weight: 800; }
.chip-score { font-weight: 900; font-size: 1.05rem; }
.chip.hit { animation: chipHit .45s ease-out; }

@keyframes chipHit {
  0% { transform: scale(1); border-color: var(--gold); }
  40% { transform: scale(1.09); border-color: var(--gold); }
  100% { transform: scale(1); }
}

/* --- Rückmeldung beim Drücken -------------------------------------------- */

.feedback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11cqmin;
  letter-spacing: .04em;
  z-index: 20;
  pointer-events: none;
  text-shadow: 0 4px 24px #000;
}
.feedback.show { display: flex; animation: fbPop .35s ease-out; }
.feedback small { font-size: 5cqmin; opacity: .8; font-weight: 700; }
.fb-hit, .fb-perfect { color: var(--good); }
.fb-early, .fb-wrong, .fb-off { color: var(--bad); }
/* „X war schneller" ist länger als die anderen Meldungen und lag quer über
   dem Rundeninhalt. Eigener Hintergrund – die Runde ist für einen selbst
   ohnehin vorbei, es gibt darunter nichts mehr zu sehen. */
.feedback.fb-locked {
  color: #ff9d3b;
  font-size: 7.5cqmin;
  line-height: 1.15;
  padding: 0 6cqmin;
  background: #0a0713d9;
  backdrop-filter: blur(3px);
}
.feedback.fb-locked small { color: var(--dim); margin-top: 1cqmin; }

@keyframes fbPop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* --- Überblendung: Walzen, Vorlauf, Ergebnis ----------------------------- */

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5cqmin;
  padding: 4cqmin;
  background: #0a0713e8;
  backdrop-filter: blur(3px);
  z-index: 30;
  text-align: center;
}
.overlay.show { display: flex; }

.overlay .prompt {
  font-size: 7cqmin;
  font-weight: 900;
  line-height: 1.15;
  max-width: 92%;
}
.overlay .hint { font-size: 3.8cqmin; color: var(--dim); max-width: 88%; line-height: 1.35; }
.overlay .countdown {
  position: relative;
  font-size: 13cqmin;
  font-weight: 900;
  color: var(--cyan);
  min-height: 1em;
}
.countdown.beat { animation: fbPop .3s ease-out; }
/* „Noch nicht …", wenn jemand schon im Vorlauf tippt. Kostet nichts, sagt
   aber, dass der Druck nicht gezählt hat. */
.countdown.nudge::after {
  content: attr(data-nudge);
  position: absolute;
  left: 50%;
  top: 105%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 3.4cqmin;
  font-weight: 700;
  color: var(--dim);
  animation: fadeOut 1.1s ease-out forwards;
}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes blink { 50% { opacity: .35; } }

/* --- Kurze Rückmeldung nach der Runde ------------------------------------ */
/* Bewusst keine Tabelle: der Punktestand steht durchgehend unten in der
   Leiste, ein Zwischenstand nach jeder Runde bremst nur. */

.overlay.flash { gap: 1.5cqmin; }
.fl-delta {
  font-size: 16cqmin;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  animation: fbPop .3s ease-out;
}
.fl-delta.plus { color: var(--good); text-shadow: 0 0 30px #2bf58a55; }
.fl-delta.zero { color: var(--dim); }
.fl-badges { display: flex; flex-wrap: wrap; gap: 1.5cqmin; justify-content: center; }
.fl-badge {
  padding: .9cqmin 2.4cqmin;
  border-radius: 999px;
  background: #ffd40022;
  border: 1px solid #ffd40055;
  color: var(--gold);
  font-size: 3.2cqmin;
  font-weight: 800;
  letter-spacing: .06em;
}
.fl-badge.mult { background: #ff2e8822; border-color: #ff2e8855; color: var(--pink); }
.fl-win { font-size: 5cqmin; font-weight: 900; color: var(--dim); min-height: 1em; }
.fl-win.mine { color: var(--gold); text-shadow: 0 0 22px #ffd4004d; }
.fl-truth { font-size: 3.4cqmin; color: var(--dim); max-width: 90%; }

/* Wer hat wie viele der fünf Aufgaben geholt – die Bilanz der Runde. */
.fl-tallies { display: flex; flex-wrap: wrap; gap: 2cqmin; justify-content: center; }
.fl-tally {
  padding: 1cqmin 2.6cqmin;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff0d;
  font-size: 3.2cqmin;
  color: var(--dim);
}
.fl-tally b { color: var(--ink); font-size: 1.25em; }
.fl-tally.me { border-color: #29e7ff66; }
.fl-tally.won { border-color: #ffd40088; background: #ffd4001a; color: var(--gold); }
.fl-tally.won b { color: var(--gold); }

/* Zähler unter dem Timing-Balken: die wievielte der fünf Markierungen. */
.track-count {
  font-size: 3.4cqmin;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--dim);
}

/* --- Rundeninhalte ------------------------------------------------------- */

.cmp { display: flex; align-items: center; justify-content: center; gap: 3cqmin; width: 100%; }
.cmp-side {
  flex: 1;
  font-size: 7cqmin;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.cmp-op {
  flex: 0 0 auto;
  font-size: 9cqmin;
  font-weight: 900;
  color: var(--gold);
}
.cmp-legend { font-size: 3.4cqmin; color: var(--dim); }

.bignum { font-size: 12cqmin; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bigword { font-size: 10cqmin; font-weight: 900; overflow-wrap: anywhere; }
.bigsym { font-size: 26cqmin; line-height: 1; }
.stroop { font-size: 15cqmin; font-weight: 900; letter-spacing: .04em; }

.pop { animation: popIn .16s ease-out; }
@keyframes popIn {
  from { transform: scale(.72); }
  to { transform: scale(1); }
}

.target-chip {
  display: flex;
  align-items: center;
  gap: 1.6cqmin;
  padding: 1.4cqmin 3cqmin;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #ffffff0d;
}
.target-chip-label { font-size: 2.8cqmin; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }
.target-chip-name { font-size: 4.4cqmin; font-weight: 900; color: var(--gold); }
.target-chip-sym { font-size: 6cqmin; }
.swatch { width: 5cqmin; height: 5cqmin; border-radius: 50%; border: 2px solid #fff4; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 1.6cqmin;
  place-content: center;
}
.grid .cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7cqmin;
  line-height: 1;
}
/* 5×4-Raster: an der Bühnenhöhe ausrichten, sonst läuft es unten raus. */
.faces, .hunt, .arrows { width: min(96cqw, 108cqh); }
.arrows .cell { color: var(--cyan); font-size: 8cqmin; }
.arrows { transition: none; }

/* Die beiden Muster brauchen einen sichtbaren Rahmen, sonst liest man sie
   als ein einziges 6×3-Raster und die Aufgabe ergibt keinen Sinn. */
.twin { display: flex; gap: 5cqmin; align-items: center; justify-content: center; }
.twin-grid {
  width: min(38cqw, 46cqh);
  padding: 2cqmin;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #ffffff0a;
}
.twin-grid .cell { font-size: 8cqmin; }

.field {
  position: relative;
  width: min(94cqw, 94cqh);
  aspect-ratio: 1;
  container-type: size;
}
.dot {
  position: absolute;
  width: 9cqmin;
  height: 9cqmin;
  margin: -4.5cqmin 0 0 -4.5cqmin;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px #29e7ff70;
}

.geo { background: #0c0818; border-radius: 14px; overflow: hidden; }
.redtri {
  position: absolute;
  background: #ff2f2f;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 8px #ff2f2f80);
  z-index: 1;
}
.block {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px;
  z-index: 2;
  will-change: transform;
}
.block-circle { border-radius: 50%; }
.block-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }

.flash-surface { position: absolute; inset: 0; transition: background .04s linear; }
.type-colorflash .target-chip { position: relative; z-index: 2; background: #000000a8; }

.light {
  display: flex;
  flex-direction: column;
  gap: 2cqmin;
  padding: 3cqmin;
  border-radius: 6cqmin;
  background: #0c0818;
  border: 2px solid var(--line);
}
.lamp {
  width: 16cqmin;
  height: 16cqmin;
  border-radius: 50%;
  background: #ffffff12;
  transition: none;
}
.lamp-red.on { background: #ff3b3b; box-shadow: 0 0 6cqmin #ff3b3b90; }
.lamp-yellow.on { background: #ffd400; box-shadow: 0 0 6cqmin #ffd40090; }
.lamp-green.on { background: #2bf58a; box-shadow: 0 0 8cqmin #2bf58aa0; }

.track {
  position: relative;
  width: 88cqw;
  max-width: 900px;
  height: 12cqmin;
  border-radius: 999px;
  background: #ffffff12;
  overflow: hidden;
}
.track-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.track-mark {
  position: absolute;
  top: -12%;
  height: 124%;
  width: 1.4cqmin;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  transform: translateX(-50%);
}
.track-mark.hot { background: #fff; box-shadow: 0 0 22px #fff; }

/* --- Endstand ------------------------------------------------------------ */

.final-title { text-align: center; font-size: 2rem; font-weight: 900; color: var(--gold); }
.podium { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pod {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "medal name score" "medal meta score";
  align-items: center;
  gap: 2px 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 2px solid var(--line);
}
.pod-0 { border-color: var(--gold); box-shadow: 0 0 26px #ffd40030; }
.pod.me { background: #29e7ff14; }
.pod-medal { grid-area: medal; font-size: 1.7rem; }
.pod-name { grid-area: name; font-weight: 900; }
.pod-meta { grid-area: meta; font-size: .78rem; color: var(--dim); }
.pod-score { grid-area: score; font-weight: 900; font-size: 1.3rem; color: var(--gold); }

/* --- Hilfe --------------------------------------------------------------- */

#help {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #06040ceb;
  overflow-y: auto;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.help-inner { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.help-inner h2 { color: var(--cyan); }
.help-inner ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.help-inner li { line-height: 1.45; }
.help-inner b { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}