/* ══════════════ 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 ═════════════════ */
/* ══════════════ Gemeinsamer Rahmen ══════════════ Anfang ═════════════════ */
/* ERZEUGT - NICHT HIER AENDERN. Quelle: /var/www/html/werkzeug/rahmen.css
   Aendern, dann `node werkzeug/verteilen.mjs` - das schreibt den Abschnitt in
   jedes Spiel, das ihn fuehrt. Alles unterhalb des Endmarkers bleibt stehen:
   dort steht das Eigene des Spiels. */

/* ── Rahmen: Grundgeruest fuer alle Bildschirme ───────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: radial-gradient(1200px 800px at 50% -10%, var(--bg2), var(--bg));
  color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.screen { display: none; min-height: 100%; padding: 18px 14px 28px; justify-content: center; }
.home, .lobby, .game, .final {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.game { max-width: 640px; }
h1, h2, h3 { margin: 0; }
.field-label { color: var(--muted); font-size: 13px; }
.hintline { color: var(--muted); font-size: 13px; text-align: center; margin: 6px 0 0; }
.lobby-head h2 { font-size: 18px; }
.lobby-head span { color: var(--muted); font-weight: 400; font-size: 15px; }

#status {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; text-align: center;
  font-size: 13px; color: var(--bg); background: var(--gold);
}
#status:empty { display: none; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 16px; opacity: 0; pointer-events: none; transition: .2s; z-index: 60;
  backdrop-filter: blur(8px);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.topbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.tb-runde { font-size: 14px; color: var(--muted); }
.tb-runde strong { color: var(--ink); font-size: 18px; }
.tb-modus {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--akzent2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.buehne { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fussbereich { display: flex; flex-direction: column; gap: 8px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aktionen .btn { flex: 1 1 40%; }

.panelbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; box-shadow: var(--shadow);
}

.podium { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.podium li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
}
.podium li:first-child { border-color: var(--gold); }
.pd-name { font-weight: 700; }
.pd-pt { color: var(--muted); }
.final-title { text-align: center; font-size: 26px; }

#help {
  position: fixed; inset: 0; background: rgba(6, 3, 14, .86); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
}
#help[hidden] { display: none; }
.help-inner {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; max-width: 520px; backdrop-filter: blur(10px);
}
.help-inner li { margin-bottom: 8px; }
.help-inner h2 { margin-bottom: 10px; }
/* ══════════════ Gemeinsamer Rahmen ══════════════ Ende ═══════════════════ */

/* ── Allein spielen: gemeinsamer Rahmen der Solo-Spiele ───────────────── */
.solo {
  width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 12px 30px;
  display: flex; flex-direction: column; gap: 12px; min-height: 100%;
}
.solokopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.solometa { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
#stand { font-size: 15px; color: var(--muted); }
#stand b { color: var(--ink); }
.tag.klein { font-size: 12px; margin: 0; text-align: left; letter-spacing: .08em; }
.soloeinstellung { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.solobuehne { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zurueck { color: var(--muted); }
.fertigbox {
  background: var(--panel); border: 1px solid var(--akzent); border-radius: var(--r);
  padding: 14px; text-align: center; width: 100%;
}
.fertigbox h2 { font-size: 22px; margin-bottom: 6px; }

/* ── Schafstall ───────────────────────────────────────────────────────── */
:root { --akzent: #8fe04a; --akzent2: #ffd447; --wiese: #16351f; --holz: #8a5a33; }

/* Der Deckel für „Wer spielt?" – dieselbe Machart wie die Hilfe. `#help`
   steht im gemeinsamen Rahmen darüber und darf hier nicht angefasst werden,
   deshalb stehen die Regeln für `#leute` noch einmal. */
#leute {
  position: fixed; inset: 0; background: rgba(6, 3, 14, .86); z-index: 71;
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
}
#leute[hidden] { display: none; }
#leute .help-inner { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#leute .hintline { text-align: left; margin: 0; }

.leuteliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.leutezeile { display: flex; align-items: stretch; gap: 8px; }
.leutewahl {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.leutezeile.dran .leutewahl { border-color: var(--akzent); background: rgba(143, 224, 74, .12); }
.leutewahl .klein { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Auf einem schmalen Handy bricht „Name · 80 Punkte" um. Rechtsbündig sieht
   der Umbruch nach Absicht aus und nicht nach Unfall. */
#stand { text-align: right; }
.namensknopf {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--akzent); cursor: pointer;
}
.namensknopf:hover { text-decoration: underline; }

/* Drei Knöpfe, eine Zeile - der gemeinsame Rahmen rechnet mit zweien. */
.aktionen .btn { flex: 1 1 28%; }

.schild {
  font-size: 13px; color: var(--muted); background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  font-variant-numeric: tabular-nums;
}

/* Festgefahren: dann ist „Von vorn" der einzige Knopf, der noch weiterhilft. */
.btn.dringend {
  border-color: var(--akzent2); color: var(--akzent2);
  animation: dringend 1.6s ease-in-out infinite;
}
@keyframes dringend {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 71, 0); }
  50% { box-shadow: 0 0 0 3px rgba(255, 212, 71, .25); }
}

/* Die Weide: Stall oben, darunter das Gitter. */
.weide { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.stall {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(138, 90, 51, .45), rgba(138, 90, 51, .18));
  border: 1px solid var(--holz); border-radius: 12px 12px 4px 4px;
  padding: 6px 18px; font-variant-numeric: tabular-nums;
}
.stalldach { font-size: 24px; line-height: 1; }
.stallzahl { font-weight: 800; color: var(--akzent2); }
.stall.voll { animation: stallpuls .45s ease-out; }
@keyframes stallpuls {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); border-color: var(--akzent2); }
  100% { transform: scale(1); }
}

/* Ein Gitter aus Weide **und** Zaunring: die äußere Reihe und Spalte sind
   der Rand. Deshalb sitzt ein Tier auf Feld (x,y) in Spalte x+2, Zeile y+2. */
.gitter {
  --luecke: 4px;
  --rand: 9px;
  --zelle: min(58px, calc(
    (min(100vw, 560px) - 30px - 2 * var(--rand) - (var(--b) + 1) * var(--luecke)) / var(--b)));
  display: grid; gap: var(--luecke);
  grid-template-columns: var(--rand) repeat(var(--b), var(--zelle)) var(--rand);
  grid-template-rows: var(--rand) repeat(var(--h), var(--zelle)) var(--rand);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 8px, transparent 8px 16px),
    var(--wiese);
  border-radius: var(--r); padding: 6px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
}

/* Zaunlatte am Rand. Ein Tor ist einfach keine Latte - die Lücke ist der Weg,
   und deshalb muss die Latte auffallen und das Tor nicht: wer aufs Holz zuläuft,
   bleibt stehen. */
.randstueck.zu {
  background: linear-gradient(180deg, #b07a45, var(--holz));
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.randstueck.tor { background: rgba(0, 0, 0, .3); border-radius: 3px; }

.fels, .wolf {
  display: grid; place-items: center; font-size: calc(var(--zelle) * .55);
  background: rgba(0, 0, 0, .35); border-radius: 10px;
}
/* Der Wolf rührt sich nicht - er ist trotzdem das Gefährlichste auf der Weide
   und muss auf den ersten Blick anders aussehen als ein Felsen. */
.wolf {
  background: rgba(120, 12, 30, .5); box-shadow: 0 0 0 2px rgba(255, 77, 109, .55);
  animation: wolfatmen 2.4s ease-in-out infinite;
}

/* Seine Reichweite: die vier geraden Nachbarfelder, nicht über Eck. Sie liegt
   **unter** den Tieren - wichtig ist, wo eines zum Stehen kommt, und das sieht
   man auf den freien Feldern. */
.reichweite {
  pointer-events: none; border-radius: 10px;
  background: repeating-linear-gradient(45deg,
    rgba(255, 77, 109, .22) 0 5px, rgba(255, 77, 109, .07) 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(255, 77, 109, .25);
}
@keyframes wolfatmen {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 77, 109, .5), 0 0 6px rgba(255, 77, 109, .2); }
  50% { box-shadow: 0 0 0 2px rgba(255, 77, 109, .9), 0 0 18px rgba(255, 77, 109, .55); }
}
.wolf.satt { animation: satt .5s ease-out 2; }
@keyframes satt {
  0%, 100% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.25) rotate(-8deg); }
  70% { transform: scale(1.1) rotate(8deg); }
}

.tier {
  position: relative; display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; cursor: pointer; color: var(--ink);
  transition: transform var(--dauer, .18s) cubic-bezier(.35, 0, .3, 1),
              opacity .25s, background .15s, box-shadow .15s;
}
.tier:hover { background: rgba(255, 255, 255, .18); }
.tier:active { background: rgba(255, 255, 255, .24); }

/* Der Körper liegt in Laufrichtung: zwei Schafe im Gespann stehen
   hintereinander, nicht nebeneinander. */
.koerper {
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 100%; height: 100%;
}
.r0 .koerper, .r2 .koerper { flex-direction: column; }

.figur { font-size: calc(var(--zelle) * .6); line-height: .95; }
/* Der Elefant füllt seinen Viererblock - ein Schaf in Elefantengröße wäre
   dasselbe Bild, nur größer; er soll wie ein Brocken wirken. */
.elefant .figur { font-size: calc(var(--zelle) * 1.5); }
/* Die Emoji schauen von Haus aus nach links - nach rechts muss gespiegelt
   werden, sonst läuft das Tier rückwärts. */
.r1 .figur { transform: scaleX(-1); }

/* Der Pfeil sitzt an der Kante, in die das Tier schaut - er ist die einzige
   Auskunft, die zählt, und darf deshalb nicht in der Wolle untergehen. */
.pfeil {
  position: absolute; font-size: calc(var(--zelle) * .3); line-height: 1;
  color: var(--akzent2); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); font-weight: 700;
}
.r0 .pfeil { top: 1px; left: 50%; transform: translateX(-50%); }
.r1 .pfeil { right: 1px; top: 50%; transform: translateY(-50%); }
.r2 .pfeil { bottom: 1px; left: 50%; transform: translateX(-50%); }
.r3 .pfeil { left: 1px; top: 50%; transform: translateY(-50%); }

/* Laufen: um --felder Zellen in Blickrichtung, Lücke mitgerechnet. Ein Tier,
   das mehrere Zellen lang ist, misst 100 % seiner eigenen Länge - deshalb
   rechnen die Regeln unten mit var(--zelle) und nicht mit Prozent. */
.tier.laeuft { z-index: 3; pointer-events: none; }
.tier.weg.r0 { transform: translateY(calc(-1 * var(--felder) * (var(--zelle) + var(--luecke)))); }
.tier.weg.r1 { transform: translateX(calc(var(--felder) * (var(--zelle) + var(--luecke)))); }
.tier.weg.r2 { transform: translateY(calc(var(--felder) * (var(--zelle) + var(--luecke)))); }
.tier.weg.r3 { transform: translateX(calc(-1 * var(--felder) * (var(--zelle) + var(--luecke)))); }
/* Nach dem Laufen wird der neue Platz gesetzt und die Verschiebung entfernt -
   beides im selben Augenblick, und dabei darf nichts übergehen. */
.tier.sofort { transition: none; }

.tier.gefressen { opacity: 0; transform: scale(.3) rotate(20deg); }

/* Der Flug in den Stall, erster Zug: der Absprung, hoch und langsam raus. */
.flugschaf {
  position: fixed; z-index: 65; display: grid; place-items: center; pointer-events: none;
  font-size: 26px; transition: transform .28s cubic-bezier(.2, .7, .4, 1);
}
/* Zweiter Zug: hinein, schneller und mit Zug nach unten. */
.flugschaf.hinein {
  transition: transform .3s cubic-bezier(.5, 0, .8, .6), opacity .3s ease-in;
}

/* Angekommen: ein Schaf steigt über dem Dach auf. Ohne das ist der Flug zu
   Ende, bevor man ihn gesehen hat. */
.stallquittung {
  position: absolute; left: 50%; top: -4px; font-size: 20px; pointer-events: none;
  animation: quittung .9s ease-out forwards;
}
@keyframes quittung {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  30% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(.9); }
}
.stall { position: relative; }

/* Hinaus heißt: aus der Weide heraus - dabei wird das Tier kleiner, sonst
   sieht es aus, als bliebe es auf dem Zaun liegen. */
.tier.hinaus { opacity: .95; }

.tier.stoss { animation: stoss .32s; }
@keyframes stoss {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-3px, 0) rotate(-5deg); }
  50% { transform: translate(3px, 0) rotate(5deg); }
  80% { transform: translate(-2px, 0) rotate(-3deg); }
}

/* Wer im Weg stand, leuchtet kurz auf - sonst bleibt der Fehlgriff ein Rätsel. */
.tier.schuld {
  box-shadow: 0 0 0 2px #ff4d6d, 0 0 16px rgba(255, 77, 109, .6);
  background: rgba(255, 77, 109, .18);
}
.tier.tipp { animation: tippuls 1.8s ease-out; }
@keyframes tippuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 71, 0); }
  25%, 75% { box-shadow: 0 0 0 3px var(--akzent2), 0 0 18px rgba(255, 212, 71, .7); }
}

.sterne { font-size: 30px; letter-spacing: .1em; margin: 2px 0 4px; }
.stern { color: var(--akzent2); }
.stern.leer { color: rgba(255, 255, 255, .2); }

.punktegewinn {
  margin: 8px 0 12px; font-size: 26px; font-weight: 800;
  background: linear-gradient(100deg, var(--akzent), var(--akzent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tier, .flugschaf { transition: none; }
  .stallquittung { display: none; }
  .tier.stoss, .tier.tipp, .stall.voll, .wolf, .btn.dringend { animation: none; }
}