/* PokeNuzlocke — Oberfläche.

   Dreispaltig: Werbefläche, Kampf, Werbefläche. Die Flächen sind fest reserviert,
   damit die Kampfansicht beim Einblenden von Anzeigen nicht springt. Unter 1100 px
   fallen sie weg und der Kampf nimmt die volle Breite ein.

   Alle Bewegungen laufen über CSS-Keyframes. Eine Animationsbibliothek würde hier
   nichts hinzufügen, was Keyframes nicht können, aber den bundlerfreien Aufbau
   aufgeben. */

/* Farben, Schriften und Radien stammen aus der Entwurfsvorlage in Claude Design
   ("SolveNuzlocke Redesign"). Sie sind Marken-Vorgabe und nicht frei wählbar — wer sie
   ändert, ändert den Entwurf und nicht nur eine Zeile CSS.

   Die Aufteilung bleibt trotzdem streng: Gold ist die Marke, Grün/Rot/Bernstein sind
   die URTEILSFARBEN (gehalten, verloren, unbewiesen), Blau und Violett kommen nur als
   Raumlicht im Kampffeld vor und nie an einem Bedienelement. Diese Trennung ist der
   Grund, warum ein rotes Abzeichen im Rätsel eine Aussage ist und keine Zierde. */
:root {
  --bg: #080b16;
  --bg-2: #0e1220;
  --panel: #11162a;
  --panel-2: #171b30;
  --line: #232a44;
  --line-2: #2e355a;
  --text: #f5f7ff;
  --muted: #8891b8;
  /* Zwischenton für Fliesstext auf Panelflächen — im Entwurf durchgehend so. */
  --muted-2: #a8afd6;
  --dim: #6b729a;

  /* Die Marke. `--accent` ist Gold, `--accent-2` das Orange, in das es ausläuft. */
  --accent: #ffcb05;
  --accent-2: #ff9f1c;
  --accent-soft: #ffd93d;
  --on-accent: #151731;

  --good: #4fd88a;
  --good-2: #7cf0bc;
  --bad: #ff6b6b;
  --bad-2: #ff9494;
  --warn: #ffcb05;
  --gold: #ffcb05;

  /* Raumlicht des Kampffeldes — nur dort, nie an einem Bedienelement. */
  --arena-a: rgba(112, 88, 152, .30);
  --arena-b: rgba(104, 144, 240, .30);

  /* Die Rille, in der ein Balken läuft. Stand vorher an drei Stellen fest im Code —
     in der hellen Fassung ergab das schwarze Riegel auf weissen Karten. */
  --track: #232a44;
  /* Fläche eines neutralen Abzeichens. Stand als #1a2038 fest im Code — in der hellen
     Fassung ergab das dunkle Marken auf weissen Karten. */
  --chip: #1a2038;

  /* Die Fläche NEBEN dem Aufnahmerahmen der Hochkantansicht. Sie bleibt in beiden
     Modi dunkel und bekommt bewusst keine helle Fassung: Sie ist nicht Teil der
     Seite, sondern die Wand dahinter. Dunkel zeigt sie die Kante des Rahmens, und
     genau diese Kante sucht man, wenn man den Aufnahmebereich zieht. */
  --rec-void: #05070c;

  --font-display: 'Fredoka', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Der Entwurf arbeitet mit weichen, grossen Radien. Drei Stufen decken alles ab. */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}

/* Die Vorlage ist dunkel entworfen. Die helle Fassung leitet sich daraus ab, statt zu
   verschwinden: Wer sein Gerät auf Hell stellt, bekäme sonst eine Seite, die nie
   geprüft wurde. Gold bleibt Gold, wird aber abgedunkelt — auf Weiss ist der
   Originalton schlicht nicht lesbar. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f5fb;
    --bg-2: #e8ecf7;
    --panel: #ffffff;
    --panel-2: #f4f6fc;
    --line: #dde2f0;
    --line-2: #c9d1e6;
    --text: #151731;
    --muted: #5d6690;
    --muted-2: #3f4670;
    --dim: #767ea6;

    --accent: #b8860b;
    --accent-2: #a35f00;
    --accent-soft: #8a6508;
    --on-accent: #ffffff;

    --good: #12a065;
    --good-2: #0d8452;
    --bad: #d93a32;
    --bad-2: #b32a24;
    --warn: #b8860b;
    --gold: #b8860b;

    --arena-a: rgba(112, 88, 152, .16);
    --arena-b: rgba(104, 144, 240, .16);
    --track: #dde2f0;
    --chip: #eef1f8;
    --shadow: 0 30px 60px -24px rgba(21, 23, 49, .18);
  }
}

* { box-sizing: border-box; }

/* Das HTML-Attribut `hidden` wirkt nur über die eingebaute Browser-Regel
   `[hidden] { display: none }`. Jede eigene Regel, die `display` setzt, überstimmt
   sie — und mehrere Bausteine hier tun das. Ohne diese Zeile bleiben Ladebalken,
   Kampfansicht und Punktestand von der ersten Sekunde an sichtbar. */
[hidden] { display: none !important; }

/* Zwei warme Lichter oben, wie in der Vorlage: Gold links, Violett rechts. Sie geben
   der Seite eine Richtung, ohne dass irgendwo eine Fläche eingefärbt würde. */
body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 15% -5%, rgba(255, 203, 5, .09), transparent 60%),
    radial-gradient(900px 700px at 105% 10%, rgba(112, 88, 152, .16), transparent 55%),
    var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
@media (prefers-color-scheme: light) {
  body {
    background:
      radial-gradient(1100px 600px at 15% -5%, rgba(255, 203, 5, .16), transparent 60%),
      radial-gradient(900px 700px at 105% 10%, rgba(112, 88, 152, .10), transparent 55%),
      var(--bg);
  }
}

/* Fredoka trägt alles, was benannt wird: Überschriften, Pokemon-Namen, Attackennamen,
   grosse Zahlen. Manrope trägt alles, was gelesen wird. Die Trennung ist die halbe
   Anmutung der Vorlage — eine Seite in nur einer Schrift sieht daneben flach aus. */
h1, h2, h3, h4, .puz-title b, .pr-stats b, .res-grid .v, .score .v {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Zahlen laufen tabellarisch, damit ein herunterlaufender KP-Wert die Zeile daneben
   nicht bei jedem Bild verschiebt. Bewusst NICHT global: In Fredoka sind die
   Proportionalziffern die schöneren, und Überschriften zählen nichts mit. */
.hptext, .bm-hp, .rev-cost, .puz-timer b, .dist-label, .arch-day b { font-variant-numeric: tabular-nums; }

.layout {
  display: grid;
  grid-template-columns: 176px minmax(0, 940px) 176px;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  align-items: start;
}

/* Seiten ohne Werbeschienen (Rechtliches). Ohne diese Zeile landet das einzige Kind
   in der ersten Spalte und die Seite steht 176 px schmal da. */
.layout.solo { grid-template-columns: minmax(0, 940px); }

/* ---------- Werbeflächen ---------- */

/* Voreinstellung: KEINE Flächen. Sie erscheinen erst, wenn `app.js` der Seite
   `body.ads` gibt — also wenn Werbung eingeschaltet UND eine Kundennummer hinterlegt
   ist. Der Weg über CSS statt über nachträgliches Entfernen im Skript ist Absicht:
   Ein Kasten, der erst gezeichnet und dann weggenommen wird, blitzt bei jedem
   Seitenaufruf kurz auf.

   Ohne Flächen fällt auch das dreispaltige Gitter weg — sonst stünde der Inhalt
   zwischen zwei leeren 176-Pixel-Spalten und wäre auf mittelbreiten Fenstern grundlos
   schmal. */
.layout { grid-template-columns: minmax(0, 940px); }
body.ads .layout { grid-template-columns: 176px minmax(0, 940px) 176px; }

.ad-rail, .ad-inline { display: none; }

body.ads .ad-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }

.ad-box {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  min-height: 250px;
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.ad-box.tall { min-height: 500px; }

@media (max-width: 1100px) {
  .layout, body.ads .layout { grid-template-columns: minmax(0, 1fr); }
  body.ads .ad-rail { display: none; }
}

/* Flächen für schmale Bildschirme.

   Fallen die Schienen weg, bliebe sonst ausgerechnet der meistgegangene Weg ohne
   Inventar: Ein geteiltes Tagesergebnis wird am Telefon angetippt.

   Sie stehen nur dort, wo gerade nicht gespielt wird — Startbildschirm, unter der
   Auflösung, auf der Ergebnisseite. Zwischen Stellung und Attackenauswahl steht
   bewusst keine: Das ist der Weg von der Frage zur Antwort, und auf dem Telefon ist
   der ohnehin schon eine Wischbewegung lang.

   Die Höhe ist reserviert, nicht gewachsen. Eine Fläche, die beim Einblenden
   aufklappt, schiebt alles darunter weg — im Zweifel genau dann, wenn jemand zielt.
   Aus demselben Grund gibt es kein klebendes Banner am unteren Rand: Dort liegen die
   Attackenknöpfe. */
.ad-inline { display: none; }

@media (max-width: 1100px) {
  body.ads .ad-inline { display: block; width: 100%; }
  .ad-inline .ad-box { min-height: 260px; max-width: 360px; margin: 0 auto; }
}

/* ---------- Kopfzeile ---------- */

.stage { min-width: 0; }

.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
/* Die Wortmarke ist auf allen Seiten ein Verweis auf die Startseite. Farbe und
   Unterstreichung gehören deshalb hierher und nicht als `style`-Attribut an jede
   einzelne Seite — sonst sieht sie irgendwann auf einer davon anders aus. */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand:hover strong { color: var(--accent); }
.brand strong { font-size: 18px; letter-spacing: -.03em; font-weight: 800; display: block; }
.brand .sub { display: block; color: var(--muted); font-size: 12px; }

/* Pokéball als Wortmarke — reines CSS, kein Bild nötig. */
.logo-ball, .ball-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, #ee1515 0 48%, #0e1220 48% 52%, #fff 52% 100%);
  border: 2px solid #0e1220;
  /* Der Goldring ist die Marke, nicht der Ball allein — er wiederholt sich am
     Tagesrätsel, am aktiven Pokemon und am Hauptknopf. */
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(238, 21, 21, .35);
  position: relative;
}
.logo-ball::after, .ball-icon::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: #0e1220; border: 2px solid #f2f4ff;
}
.ball-icon { width: 20px; height: 20px; }
.ball-icon::after { width: 7px; height: 7px; }

.scoreboard { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.score {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 14px; text-align: center; min-width: 76px;
}
.score .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); font-weight: 800; }
.score .v { font-weight: 700; font-size: 17px; }
.score.alarm .v { color: var(--bad); }

/* ---------- Startbildschirm ---------- */

.intro { display: flex; flex-direction: column; gap: 18px; }

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #141a30 0%, #10142a 60%, #171225 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: center;
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: light) {
  .hero { background: linear-gradient(155deg, #ffffff 0%, #f4f6fc 60%, #f7f3fb 100%); }
}
/* Die Typenleiste über der Schlagzeile: Feuer, Gold, Pflanze, Wasser, Geist. Sie ist
   das Zeichen der Vorlage — die einzige Stelle, an der alle Typenfarben zugleich
   vorkommen dürfen, und deshalb sofort als Pokemon-Seite lesbar. */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, #ee1515, #ffcb05, #78c850, #6890f0, #705898);
}
/* Goldlicht hinter der rechten Ecke. */
.hero::after {
  content: ''; position: absolute; top: -120px; right: -100px;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 203, 5, .16), transparent 70%);
}
.hero-text { position: relative; }
/* Die Schlagzeile ist auf 33 px für eine breite Spalte gesetzt. In einer schmalen
   füllt sie damit den halben Bildschirm, bevor irgendetwas Spielbares zu sehen ist. */
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 26px 20px; }
  .hero-art { display: none; }
  .hero h1 { font-size: 25px; }
  .lead { font-size: 15px; margin-bottom: 18px; }
}

/* Die Rubrikzeile ist eine Pille mit Pokéball, kein loser Satz über der Schlagzeile. */
.kicker {
  margin: 0 0 18px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-soft); font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  padding: 7px 14px; border-radius: 999px;
}
.kicker::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, #ee1515 0 48%, #fff 48% 100%);
  border: 1.5px solid #fff;
}

.hero h1 { margin: 0 0 18px; font-size: 42px; line-height: 1.08; letter-spacing: .2px; }
/* Der Verlauf im Text ist Vorgabe der Vorlage. Er trägt keine Aussage — deshalb steht
   er ausschliesslich hier, in der Schlagzeile, und an keiner Urteilsfläche. */
.hero h1 .hl {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin: 0 0 26px; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 52ch; }
.lead strong { color: var(--text); }

/* Die beiden Sprites stehen sich schon auf dem Startbildschirm gegenüber — der
   Vorgeschmack auf das, was hinter dem Knopf liegt. Jeder steht in seinem eigenen
   Licht, in denselben zwei Farben wie später im Kampffeld. */
.hero-art { position: relative; align-self: stretch; min-height: 300px; }
.hero-side { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.hero-mon { image-rendering: pixelated; display: block; }

.hero-side.front { right: 2%; top: 2%; }
.hero-side.front .hero-mon {
  width: 118px;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)) brightness(.88);
  animation: float 4.5s ease-in-out infinite .3s;
}
.hero-side.back { left: 2%; bottom: 9%; }
.hero-side.back .hero-mon {
  width: 158px;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.55));
  animation: float 4s ease-in-out infinite;
}

/* Nur im Vorspiel. Ohne `body.hero-demo` steht das Titelbild wie zuvor da. */
.hero-hp { display: none; }
body.hero-demo .hero-hp {
  display: block; width: 76px; height: 5px; border-radius: 999px;
  background: var(--track); overflow: hidden;
}
body.hero-demo .hero-side.back .hero-hp { width: 96px; }
.hero-hp i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--good), #7ee7a8);
  transition: width .5s cubic-bezier(.2,.7,.3,1), background .3s;
}
.hero-hp i.low { background: linear-gradient(90deg, var(--warn), #ffd06b); }
.hero-hp i.crit { background: linear-gradient(90deg, var(--bad), #ff8f8f); }

/* Angriff, Treffer, Fallen, Auftritt. Jede Klasse ersetzt kurzzeitig das Schweben —
   dieselbe Eigenschaft, also gewinnt die zuletzt gesetzte — und wird danach wieder
   entfernt, worauf das Schweben von selbst zurückkommt. */
.hero-side.back .hero-mon.lunge { animation: hero-lunge-back .45s ease-out; }
.hero-side.front .hero-mon.lunge { animation: hero-lunge-front .45s ease-out; }
.hero-mon.hit { animation: hero-hit .34s ease-in-out; }
.hero-mon.faint { animation: hero-faint .6s ease-in forwards; }
.hero-mon.enter { animation: hero-enter .5s ease-out; }

@keyframes hero-lunge-back {
  0% { transform: none; } 45% { transform: translate(26px, -18px) scale(1.04); } 100% { transform: none; }
}
@keyframes hero-lunge-front {
  0% { transform: none; } 45% { transform: translate(-26px, 18px) scale(1.04); } 100% { transform: none; }
}
@keyframes hero-hit {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translateX(-7px); filter: brightness(2.2) saturate(.2); }
  55% { transform: translateX(6px); }
}
@keyframes hero-faint {
  0% { transform: none; opacity: 1; }
  100% { transform: translateY(38px) scale(.82); opacity: 0; }
}
@keyframes hero-enter {
  0% { transform: translateY(-26px) scale(.9); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.hero-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--glow, rgba(112,88,152,.5)), transparent 70%);
}
.hero-glow.top { top: 16%; right: 0; width: 110px; height: 26px; --glow: rgba(248, 88, 136, .45); }
.hero-glow.bottom { bottom: 6%; left: 0; width: 178px; height: 40px; --glow: rgba(120, 200, 80, .5); }
/* Das „VS" liegt hinter den beiden und ist fast nicht zu sehen — es soll die Fläche
   binden, nicht sich melden. */
.hero-art::before {
  content: 'VS'; position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  color: rgba(255, 255, 255, .10);
}
@media (prefers-color-scheme: light) { .hero-art::before { color: rgba(21, 23, 49, .09); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Modusauswahl ---------- */

/* Zwei Wege in dasselbe Spiel: zwei Minuten oder eine Viertelstunde. Das muss
   VOR dem ersten Klick klar sein — sonst landet jemand, der kurz reinschauen
   wollte, in einer langen Partie und geht wieder. */

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

.mode {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  padding: 22px 24px; border-radius: var(--radius-lg);
  background: var(--panel-2);
  border: 1px solid var(--line-2); color: var(--text);
  transition: border-color .14s, transform .08s, box-shadow .16s;
  position: relative; overflow: hidden;
}
.mode:hover { border-color: var(--gold); transform: translateY(-2px); }

/* Der Weg, den fast alle gehen, ist die HELLE Karte auf dunklem Grund — der stärkste
   Kontrast, den die Seite hat, und in der Vorlage genau dafür vorgesehen. */
.mode.primary {
  border-color: transparent;
  background: #f5f7ff; color: var(--on-accent);
  box-shadow: 0 20px 44px -18px rgba(255, 203, 5, .35);
}
.mode.primary:hover { border-color: transparent; }
/* Der Lichtstreif, der einmal langsam über die Karte wandert. Er ist der einzige
   Blickfang auf dem Startbildschirm und zeigt auf die Hauptaktion. */
.mode.primary::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 203, 5, .30) 50%, transparent 60%);
  background-size: 220% 100%;
  animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.mode > * { position: relative; }

.mode strong { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; }
.mode em { font-style: normal; font-size: 13px; color: var(--muted); font-weight: 600; }
.mode.primary em { color: #565b85; }
.mode-badge {
  align-self: flex-start; font-size: 11px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--on-accent); color: var(--accent-soft);
}
.mode-badge.alt {
  background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.mode-go {
  margin-top: 12px; font-weight: 800; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 11px 20px; border-radius: var(--radius);
  color: var(--accent-soft); border: 1.5px solid color-mix(in srgb, var(--accent-soft) 40%, transparent);
}
.mode.primary .mode-go { background: var(--on-accent); color: #fff; border-color: transparent; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Drei Karten mit je einer eigenen Farbkante oben — Gold, Blau, Grün, wie in der
   Vorlage. Die Farben zählen hier nur durch, sie behaupten nichts; deshalb sind es
   Kanten und keine Flächen. */
.step {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
  position: relative; overflow: hidden;
}
.step::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold); }
.step:nth-child(2)::before { background: #6890f0; }
.step:nth-child(3)::before { background: var(--good); }
.step-num {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--accent-soft); margin-bottom: 10px;
}
.step:nth-child(2) .step-num { color: #8fb0ff; }
.step:nth-child(3) .step-num { color: var(--good-2); }
/* „01" statt „1" — die führende Null macht aus einer Zahl eine Nummerierung. Sie steht
   hier und nicht im HTML, weil sie Schmuck ist und kein Inhalt. */
.step-num::before { content: '0'; }
.step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.settings { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.settings summary { cursor: pointer; padding: 14px 18px; font-size: 13px; color: var(--muted); font-weight: 600; }
.settings-body { padding: 0 18px 18px; }
.settings-body p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; max-width: 68ch; }

.setup-row { display: flex; gap: 14px; flex-wrap: wrap; }
.setup-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.setup-row input {
  width: 130px; padding: 8px 10px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}

/* ---------- Knöpfe ---------- */

.btn {
  font: inherit; cursor: pointer;
  border-radius: var(--radius); padding: 9px 18px;
  border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--muted-2); font-weight: 700;
  transition: border-color .12s, background .12s, transform .06s;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--accent-soft); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--on-accent); font-weight: 800;
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.big { padding: 14px 28px; font-size: 17px; }
.btn.ghost { background: transparent; }
/* Ein Ring, der atmet, statt eines Leuchtens — er zieht das Auge, ohne die Fläche
   grösser wirken zu lassen als sie ist. */
.btn.pulse { animation: btnPulse 2.6s ease-in-out infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 34%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 0%, transparent); }
}

/* Sichtbarer Fokus. Ohne diese Regel ist die Seite mit der Tastatur nicht zu bedienen —
   der Umriss des Browsers verschwindet auf dunklem Grund fast vollständig. */
:where(button, a, select, input, summary):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px;
}

/* ---------- Tagesrätsel ---------- */

.puz-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 20px;
}
/* Auf breiten Schirmen soll der Behälter nicht existieren: `display: contents` gibt
   Titel, Felder und Schrittanzeige direkt an `.puz-head` weiter, sodass deren
   Verteilung — und `margin-left: auto` an der Schrittanzeige — unverändert greift.
   Auf dem Telefon wird er dann zur eigenen Leiste. */
.puz-bar { display: contents; }

.puz-title { display: flex; align-items: baseline; gap: 8px; }
.puz-kicker { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-soft); font-weight: 800; }
.puz-title b { font-size: 18px; }
.puz-step { margin-left: auto; color: var(--muted); font-size: 13px; }

/* ---------- Zeigen und Aufnehmen ---------- */

.puz-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.puz-timer-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.puz-timer-pick select {
  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
}

/* Der Zeitgeber ist zum Mitraten da und muss aus drei Metern Abstand lesbar sein —
   auf einem Bildschirmfoto genauso wie in einem Video. */
.puz-timer { display: flex; align-items: center; gap: 14px; }
.puz-timer .pt-bar {
  flex: 1; height: 10px; border-radius: 6px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line);
}
.puz-timer .pt-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .1s linear;
}
.puz-timer b { font-size: 26px; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.puz-timer.done .pt-bar i { background: var(--bad); }
.puz-timer.done b { color: var(--bad); }

/* Die Pointe der Aufgabe, nicht ein Abzeichen am Rand. */
.rev-trap {
  margin: 0; font-size: 15.5px; font-weight: 650;
  color: var(--warn);
}

.puz-dots { display: flex; gap: 7px; }
.puz-dot {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.puz-dot.current { border-color: var(--gold); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
/* Die Klassen heissen wie das Ergebnis selbst (`held`/`lost`). Vorher stand hier
   `safe`/`doomed` — Regeln, die nie griffen, weil das Emoji die Farbe mitbrachte. */
.puz-dot.held { border-color: var(--good); color: var(--good); }
.puz-dot.lost { border-color: var(--bad); color: var(--bad); }
/* Übersprungen: gestrichelt und grau — weder Erfolg noch Misserfolg, sondern nichts
   gespielt. Eine der beiden Ergebnisfarben hier wäre eine Behauptung. */
.puz-dot.skipped { border-style: dashed; color: var(--muted); }

.puzzle { display: flex; flex-direction: column; gap: 12px; }
/* Die Aufgabe ist der Satz, den man lesen MUSS, bevor man klickt. Ein getönter Kasten
   unter vielen getönten Kästen ging darin unter; die goldene Kante links macht ihn zum
   Anfang der Zeile statt zu einer weiteren Fläche. */
/* Die Aufgabenzeile sagt, worum es gerade geht — einmal gelesen, ist sie erledigt.
   Sie trug denselben Goldrahmen wie ein Ergebnis und drängte sich damit stärker auf
   als die Züge darunter, um die es eigentlich geht. Jetzt nur noch die goldene Kante
   links als Merkzeichen, ohne Fläche und ohne Rahmen. */
.puz-task {
  margin: 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--gold);
  font-size: 13.5px; font-weight: 500; color: var(--muted-2); line-height: 1.5;
}

/* Die Auflösung ist der eigentliche Inhalt des Tagesrätsels: Sie zeigt für JEDE
   Option, ob sie hält oder verliert — und dass das nachgerechnet ist. */
.reveal {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  animation: fbPop .4s ease;
}
.reveal.safe { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.reveal.doomed { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.reveal h3 { margin: 0; font-size: 26px; }
.reveal.safe h3 { color: var(--good); }
.reveal.doomed h3 { color: var(--bad); }
.reveal p { margin: 0; color: var(--muted); font-size: 14px; max-width: 76ch; }
.reveal .btn { align-self: flex-start; }

/* Weiter und Weiterspielen. Steht ausserhalb der Auflösung, damit beides auch dann
   erreichbar bleibt, wenn im freien Spiel wieder die Auswahl oben steht. */
.puz-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Zugbilanz einer Stellung — eine Zeile je Zug, jede aufklappbar. */
.rev-turns { display: flex; flex-direction: column; gap: 5px; }
.rev-turn-block {
  border-radius: 12px; overflow: hidden;
  background: var(--panel-2); border-left: 3px solid var(--line);
}
/* Die Farbe hängt am Block selbst, nicht über `:has()` an seinem Kind — die Regel
   soll auch dort greifen, wo `:has()` fehlt. */
.rev-turn-block.safe { border-left-color: var(--good); }
.rev-turn-block.doomed { border-left-color: var(--bad); }
.rev-turn-block.unclear { border-left-color: var(--warn); }
.rev-turn {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 9px; font-size: 13.5px;
  background: var(--panel-2); border-left: 3px solid var(--line);
}
/* Innerhalb eines Blocks trägt der Rahmen schon die Farbe; die Zeile selbst braucht
   weder Rand noch eigene Fläche. */
.rev-turn-block > .rev-turn { border-left: 0; border-radius: 0; background: transparent; }

.rev-turn-options {
  padding: 2px 12px 12px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}
.rev-turn-options h4 { margin: 12px 0 9px; font-size: 13.5px; color: var(--muted); font-weight: 650; }
.rev-turn-options .rev-proof { margin-top: 10px; }
.rev-turn.safe { border-left-color: var(--good); }
.rev-turn.doomed { border-left-color: var(--bad); }
.rev-turn.unclear { border-left-color: var(--warn); }
.rev-turn b { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); min-width: 46px; }
.rev-turn-label { flex: 1 1 auto; min-width: 0; }


.rev-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 760px) { .rev-options { grid-template-columns: 1fr; } }
/* Der Kasten trägt jetzt zwei Dinge: die Zeile mit dem Urteil und darunter die
   aufgeklappte Linie. Deshalb Spalte statt Reihe — die Reihe ist ein Kind. */
.rev-opt {
  display: flex; flex-direction: column;
  padding: 9px 13px; border-radius: 12px; font-size: 13.5px;
  background: var(--panel-2); border: 1px solid transparent;
}
/* Umbrechen statt überlaufen. In der Zeile stehen im Extremfall vier Dinge
   nebeneinander: Zeichen, Name, „your pick", „most natural" und der Aufklapp-Knopf.
   Abzeichen brechen absichtlich nicht mitten im Wort um (`.badge`), also muss die
   ZEILE nachgeben — sonst schiebt sie ihren Inhalt aus dem Kasten heraus, und der
   Knopf, der die Beweislinie öffnet, landet ausserhalb des Sichtbaren. */
.rev-opt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }

/* „Warum?" — unaufdringlich, aber vorhanden. Wer nur das Ergebnis will, liest die
   Zeile; wer verstehen will, klickt. */
.rev-why {
  font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap;
  margin-left: auto; flex: none;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: border-color .12s, color .12s;
  display: inline-flex; align-items: center; gap: 5px;
}
/* Ein Dreieck macht aus einer Beschriftung einen Schalter. Ohne das las sich der
   Knopf wie ein weiteres Abzeichen — und wurde entsprechend nicht angeklickt. */
.rev-why::before { content: '▸'; font-size: 12px; line-height: 1; transition: transform .12s; }
.rev-why.open::before { transform: rotate(90deg); }
.rev-why:hover { border-color: var(--gold); color: var(--accent-soft); }

.rev-line {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px; line-height: 1.55;
}
.rl-step { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rl-step b {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); flex: none;
}
.rl-roll { color: var(--muted); padding-left: 14px; }
.rl-note { color: var(--warn); padding-left: 14px; font-weight: 600; }
.rev-opt.safe .rl-note { color: var(--good); }
.rev-opt.safe { background: color-mix(in srgb, var(--good) 13%, var(--panel-2)); }
.rev-opt.doomed { background: color-mix(in srgb, var(--bad) 13%, var(--panel-2)); }
/* „Weder bewiesen sicher noch bewiesen tödlich" ist eine eigene Kategorie — Risiko.
   Ungefärbt stand sie zwischen zwei gefärbten und sah aus wie eine fehlende Angabe.
   Schwächer getönt als die beiden anderen: Eine Wette ist keine Gewissheit. */
.rev-opt.unclear { background: color-mix(in srgb, var(--warn) 9%, var(--panel-2)); }
.rev-opt.chosen { border-color: var(--gold); }

/* Die Farben hängen am Zeichen selbst, nicht nur an der Zeile — die Legende zeigt
   dieselben Zeichen ohne Zeile drumherum. */
.rev-icon { font-weight: 800; font-style: normal; }
.rev-icon.safe, .rev-opt.safe .rev-icon { color: var(--good); }
.rev-icon.doomed, .rev-opt.doomed .rev-icon { color: var(--bad); }
.rev-icon.unclear, .rev-opt.unclear .rev-icon { color: var(--warn); }

.rev-legend {
  display: flex; flex-wrap: wrap; gap: 5px 16px;
  margin: 0; font-size: 12.5px; color: var(--muted);
}
.rev-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* `min-width: 0` erlaubt dem Namen zu schrumpfen; ohne das hält er seine
   Inhaltsbreite und drückt alles andere hinaus. */
.rev-label { flex: 1 1 auto; min-width: 0; }
.rev-proof { font-size: 12.5px; opacity: .8; }

/* ---------- Tagesrätsel: Ergebnis ---------- */

/* Der Ergebnisbildschirm des Tagesrätsels steht OHNE Rahmen auf der Seite — so die
   Entwurfsvorlage. Vorher lag er in einer gerahmten Goldfläche; die feierte den Tag
   auch dann, wenn keine einzige Stellung gehalten wurde. Was ihn jetzt
   zusammenhält, ist die Rubrikpille oben. */
.puz-result { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.puz-result h2 { margin: 0; font-size: 38px; }

/* Schlagzeile und Raster in einer Zeile. Untereinander brauchten sie zwei
   Bildschirmhöhen für eine Aussage, die in eine Zeile passt. */
.pr-headline { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.grid-big { display: flex; gap: 10px; }
/* Farbe UND Form. Ein Raster, das nur über Rot und Grün spricht, sagt einem Teil der
   Spieler gar nichts — und es ist das Einzige, was von einem Tag übrig bleibt. */
.grid-cell {
  width: 52px; height: 52px; border-radius: var(--radius);
  display: grid; place-items: center;
  font-size: 24px; font-weight: 800; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--line);
  animation: fbPop .5s ease backwards;
}
.grid-cell.held {
  background: linear-gradient(135deg, #4fd88a, #2fae68); border-color: transparent; color: #0c2417;
  box-shadow: 0 8px 20px -6px rgba(79, 216, 138, .5);
}
.grid-cell.lost {
  background: linear-gradient(135deg, #ff8080, #e5484d); border-color: transparent; color: #2b0a0a;
  box-shadow: 0 8px 20px -6px rgba(229, 72, 77, .5);
}
.grid-cell.skipped { border-style: dashed; color: var(--muted); }
.grid-cell:nth-child(2) { animation-delay: .12s; }
.grid-cell:nth-child(3) { animation-delay: .24s; }
.pr-note { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.pr-next { margin: 0; color: var(--dim); font-size: 13px; font-weight: 600; }

/* Der Teilkasten trägt die Typenleiste ein zweites Mal — er ist das Stück Seite, das
   nach draussen geht, und soll dieselbe Marke tragen wie der Startbildschirm. */
.share-box {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(155deg, #141a30, #10142a);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: 22px 24px; width: 100%;
}
@media (prefers-color-scheme: light) {
  .share-box { background: linear-gradient(155deg, #ffffff, #f4f6fc); }
}
.share-box::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, #ee1515, #ffcb05, #78c850, #6890f0, #705898);
}
/* Der Block bleibt EIN `<pre>`: Genau sein Text wandert in die Zwischenablage. Die
   Vorlage zeichnet das Raster als Kacheln nach — das sähe hier zwar besser aus, hiesse
   aber, das Teilformat ein zweites Mal zu bauen. Zwei Fassungen desselben Textes
   driften auseinander, und der Wert dieses Kastens liegt darin, dass überall
   dasselbe steht. */
.share-text {
  margin: 0; flex: 1; min-width: 220px;
  font: 14px/1.6 ui-monospace, SFMono-Regular, 'Fira Code', Menlo, monospace;
  color: var(--muted-2);
  /* Die Adresse steht mit im Block und kann länger sein als der Kasten. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Die erste Zeile ist die Überschrift des geteilten Ergebnisses. */
.share-text::first-line { color: var(--text); font-weight: 700; }
.share-said { color: var(--good); font-size: 13px; font-weight: 600; }

/* ---------- Serie und Verteilung ---------- */

/* Vier gerahmte Kacheln, Zahl oben, Beschriftung darunter — wie in der Vorlage.
   Vorher standen sie als lose Spalten nebeneinander und lasen sich wie eine
   Tabelle ohne Kopf. */
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; width: 100%; }
.pr-stats > div {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px;
}
.pr-stats b { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; }
.pr-stats .gold b { color: var(--accent-soft); }
.pr-stats .good b { color: var(--good); }
.pr-stats span { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); font-weight: 800; margin-top: 4px; }

.streak-flag {
  margin-top: 8px; font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; align-self: flex-start;
  background: var(--on-accent); color: var(--accent-soft);
}

.dist-block { width: 100%; }
.dist-block h3 { margin: 0 0 10px; font-size: 15px; }
.dist { display: flex; flex-direction: column; gap: 5px; max-width: 460px; }
.dist-row { display: flex; align-items: center; gap: 10px; }
.dist-label { width: 14px; text-align: right; color: var(--muted); font-size: 13px; }
.dist-track {
  flex: 1; position: relative; height: 24px; border-radius: 6px;
  background: var(--panel-2); display: flex; align-items: center;
}
.dist-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}
.dist-row.mine .dist-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dist-row.mine .dist-label { color: var(--text); font-weight: 700; }
.dist-track b { position: relative; margin-left: 9px; font-size: 12.5px; }
.pr-percentile { margin: 10px 0 0; font-size: 14px; }

/* ---------- Frühere Rätsel ---------- */

/* Ein Tag mit Ergebnis zeigt sein Raster, ein offener das Wort „offen". Beide sind
   gleich gross — sonst springt die Reihe, sobald einer gespielt wird. */
.pr-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.archive { width: 100%; }
.archive h3 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
/* Raster statt Reihe: Bei sieben Tagen bricht eine Flex-Reihe an einer beliebigen
   Stelle um, ein Raster verteilt sie gleichmässig. */
.arch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.arch-day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
  transition: border-color .12s, transform .1s;
}
.arch-day:hover { border-color: var(--gold); transform: translateY(-2px); }
.arch-day b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.arch-mark { font-size: 12px; line-height: 1.2; color: var(--dim); }
.arch-day.done .arch-mark { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--text); }
.arch-mark .am { font-style: normal; }
.arch-mark .am.lost { color: var(--bad-2); }
.arch-mark .am.skipped { color: var(--dim); }

/* ---------- Kampffeld ---------- */

/* Brett und Bedienung sind getrennte Abschnitte, weil beide Modi dasselbe Brett
   zeigen, aber unterschiedlich bedient werden. Der Abstand muss deshalb hier
   stehen — die Abschnitte sind Geschwister ohne gemeinsamen Flex-Abstand. */
.board { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.puz-head { margin-bottom: 14px; }
.battle { display: flex; flex-direction: column; gap: 14px; }

/* Die Gegenüberstellung ist das Herz der Seite — also darf sie auch so aussehen.

   Das Feld ist als BÜHNE gebaut, nicht als weitere Karte: dunkler Grund, ein Licht von
   oben, eine Horizontlinie zwischen den beiden Reihen. Die früheren zwei farbigen
   Lichtkegel taten dasselbe wie überall sonst auf der Seite und liessen das Feld wie
   einen beliebigen Kasten aussehen. */
.field {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 24px 20px;
  display: grid; gap: 0;
  /* Der Verlauf der Vorlage: violett oben links, blau unten rechts, dazu eine feine
     diagonale Schraffur über allem. Beide Lichter sind RAUM, kein Bedienelement —
     genau deshalb dürfen hier Farben stehen, die sonst nirgends vorkommen. */
  background:
    radial-gradient(ellipse at 10% 10%, var(--arena-a), transparent 65%),
    radial-gradient(ellipse at 90% 90%, var(--arena-b), transparent 65%),
    linear-gradient(165deg, #1a1030 0%, #100e22 45%, #0c1428 100%);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: light) {
  .field {
    background:
      radial-gradient(ellipse at 10% 10%, var(--arena-a), transparent 65%),
      radial-gradient(ellipse at 90% 90%, var(--arena-b), transparent 65%),
      linear-gradient(165deg, #f2eefb 0%, #eef1fb 45%, #e7edfa 100%);
  }
}
/* Die Schraffur liegt über den Lichtern und unter allem anderen. */
.field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 34px);
}
.field > * { position: relative; }

/* Die beiden Seiten sollen sich gegenüberstehen, nicht in den Ecken einer breiten
   Fläche verlieren. Bei 940 px Spaltenbreite lagen zwischen Namenskasten und Sprite
   sonst gut 200 px Leere — die Konfrontation, die den Reiz ausmacht, war darin nicht
   mehr zu erkennen. */
.field > .row { max-width: 800px; width: 100%; margin: 0 auto; }
.field-line { max-width: 800px; width: 100%; margin: 2px auto; }

/* Die Trennlinie ist die Kampflinie: Oben der Gegner, unten du. Sie kostet nichts und
   macht aus zwei gestapelten Reihen eine Konfrontation. */
.field-line {
  position: relative; height: 1px; margin: 4px 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 30%, transparent) 22%,
    color-mix(in srgb, var(--gold) 30%, transparent) 78%, transparent);
}
/* Die Raute in der Mitte ist der Kristall aus der Wortmarke — dieselbe Form wie am
   Tera-Schalter, nur kleiner. */
.field-line::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.row { display: flex; align-items: flex-end; gap: 18px; min-height: 158px; justify-content: space-between; }
.row .hpbox { flex: 0 1 360px; }

.mon-slot { position: relative; width: 190px; height: 158px; flex-shrink: 0; display: grid; place-items: end center; }

/* Elliptische Standfläche wie im Spiel — als Lichtkreis, nicht als gefärbte Scheibe.
   Der Gegner steht in warmem, du in kühlem Licht: Das trennt die beiden Seiten auch
   dann, wenn beide Sprites einander ähnlich sehen. */
.platform {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 168px; height: 38px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(112, 88, 152, .55), transparent 70%);
}
/* Violett beim Gegner, blau bei dir — die beiden Raumlichter der Vorlage, hier als
   Standfläche. Sie trennen die Seiten auch dann, wenn beide Sprites einander ähneln. */
.you-row .platform { background: radial-gradient(ellipse at center, rgba(104, 144, 240, .55), transparent 70%); }

.sprite {
  position: relative; z-index: 1; max-width: 172px; max-height: 148px;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}

.weather-tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }

/* ---------- KP-Kasten ---------- */

.hpbox {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: 14px 18px;
  backdrop-filter: blur(3px);
  transition: opacity .35s, filter .35s;
}
/* Ein gefallenes Pokemon steht nicht mehr da wie ein kampfbereites. Vorher blieb der
   Kasten in voller Farbe stehen, während das Sprite wegkippte — das las sich, als sei
   nichts passiert. */
.hpbox.down { opacity: .45; filter: grayscale(.7); }

.hpbox .row1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hpbox .ptypes { display: flex; gap: 6px; }
.hpbox .pname { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .2px; }
.hpbox .lvl { color: var(--dim); font-size: 12px; font-weight: 700; }

.hpbar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--track);
  margin: 8px 0 6px;
  position: relative;
}
/* Die Balkenbewegung läuft in `app.js` Bild für Bild, nicht über einen Übergang hier.
   Grund: Der Zahlenwert daneben muss MITLAUFEN. Ein CSS-Übergang bewegt nur die
   Breite — die Zahl stünde schon auf dem Endwert, während der Balken noch fällt, und
   genau das sah aus wie ein Sprung mit anschliessender Nachbewegung. */
.hpfill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--good), var(--good-2));
  transition: background .3s;
}
.hpfill.mid { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.hpfill.low { background: linear-gradient(90deg, #e04b4b, var(--bad)); }
/* Der zurückweichende Rest: Er steht dort, wo der Balken war, und verblasst. Ohne ihn
   ist bei kleinem Schaden gar nicht zu sehen, dass etwas passiert ist. */
.hpghost {
  position: absolute; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bad) 55%, transparent);
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.hptext { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.badge {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
  border: 1px solid transparent; background: var(--chip); color: var(--muted-2);
  display: inline-flex; align-items: center; gap: 5px;
  /* Ein Abzeichen ist eine Beschriftung, keine Textspalte. Ohne diese Zeile bricht
     „Heavy-Duty Boots" auf schmalen Bildschirmen auf drei Zeilen um — und weil der
     Umbruch die Mindestbreite des KP-Kastens drückt, schrumpft der Kasten immer
     weiter, statt dass die Reihe daneben nachgibt. */
  white-space: nowrap;
}
.badge.up { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.badge.down { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.badge.status { color: var(--on-accent); background: var(--warn); border-color: var(--warn); font-weight: 800; }
.badge.tera-ready {
  color: var(--accent-soft);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
.badge.tera-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); border-color: transparent; font-weight: 800;
}
.badge.hazard {
  color: var(--bad-2);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}

.item-icon {
  width: 24px; height: 24px; display: inline-block; vertical-align: middle;
  background-image: url("https://play.pokemonshowdown.com/sprites/itemicons-sheet.png");
  background-repeat: no-repeat;
  transform: scale(.8); margin: -4px -2px;
}

.type {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 999px; color: #fff; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* ---------- Kampffeld auf schmalen Bildschirmen ---------- */

/* Der Aufbau bleibt, was er ist: zwei Reihen, die sich gegenüberstehen. Nur alles
   darin schrumpft mit.

   Ohne diese Regeln behält die Standfläche ihre 190 px und gibt nichts ab
   (`flex-shrink: 0`). Auf einem Telefon bleiben dem KP-Kasten dann rund 140 px, die
   Abzeichen stapeln sich, und das Feld wird höher als der ganze Bildschirm — man
   sieht die Stellung nie zusammen mit der Auswahl, zu der sie gehört. Genau dieser
   Weg wird am häufigsten gegangen: Ein geteiltes Tagesergebnis wird am Telefon
   angetippt. */
@media (max-width: 700px) {
  .layout { padding: 12px; gap: 12px; }

  .field { padding: 12px 12px 14px; border-radius: 14px; }
  .row { gap: 9px; min-height: 104px; }
  .row .hpbox { flex: 1 1 auto; min-width: 0; padding: 9px 10px; }
  .mon-slot { width: 104px; height: 104px; }
  .platform { width: 92px; height: 24px; }
  .sprite { max-width: 98px; max-height: 96px; }

  .hpbox .row1 { gap: 6px; }
  .hpbox .pname { font-size: 14.5px; }
  .hpbar { height: 9px; margin: 6px 0 4px; }
  .badges { gap: 4px; margin-top: 6px; }
  .badge { font-size: 10px; padding: 2px 7px; }
  .item-icon { transform: scale(.62); margin: -6px -5px; }

  /* Die Schrittanzeige rutscht ohnehin in eine eigene Zeile; rechtsbündig wirkt sie
     dort wie versehentlich abgesetzt. */
  .puz-step { margin-left: 0; }

  /* Alles zwischen Kopfzeile und Auswahl wird flacher.
     Gemessen: Auf einem 390er-Telefon lagen zwischen dem Ende des Kampffelds und dem
     Beginn der Zugauswahl 210 px reine Rahmung — Aufgabentext, Uhr, Polsterung. Auf
     844 px Fensterhöhe ist das der Unterschied zwischen „ich sehe meine Züge" und
     „ich muss suchen, wo sie sind". */
  .puz-head { padding: 10px 12px; gap: 10px; }
  .puz-task { font-size: 13px; padding-left: 10px; }
  .puz-timer { margin: 8px 0; }
  .controls { padding: 12px; }
  .prompt { margin-bottom: 9px; }

}

/* ---------- Textbox ---------- */

/* Der Erzählkasten aus den Spielen: sagt während der Animation, was gerade
   passiert, und verschwindet danach wieder. */
.textbox {
  margin-top: 12px;
  background: color-mix(in srgb, #05070b 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 26%, transparent);
  /* Die weiche Innenkante ist der Kasten aus den Spielen — zwei Rahmen, der äussere
     dunkel, der innere hell. Mit zwei echten Rändern ginge das auch, aber dann
     springt die Höhe des Kastens um zwei Pixel. */
  box-shadow: inset 0 0 0 2px #05070b;
  color: #f2f5fa;
  border-radius: 10px; padding: 13px 17px;
  font-size: 15px; font-weight: 600; min-height: 46px;
  display: flex; align-items: center;
  animation: boxIn .18s ease-out;
}
@keyframes boxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Animationen ---------- */

/* Angriff: der Angreifer stösst kurz in Richtung Gegner. */
@keyframes lungeYou { 0% { transform: none; } 45% { transform: translate(34px, -22px) scale(1.06); } 100% { transform: none; } }
@keyframes lungeFoe { 0% { transform: none; } 45% { transform: translate(-34px, 22px) scale(1.06); } 100% { transform: none; } }
.sprite.lunge-you { animation: lungeYou .42s cubic-bezier(.4,0,.3,1); }
.sprite.lunge-foe { animation: lungeFoe .42s cubic-bezier(.4,0,.3,1); }

/* Treffer: zucken und kurz aufblitzen. */
@keyframes shake {
  0%,100% { transform: none; }
  15% { transform: translateX(-9px); } 30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); } 60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.sprite.hit { animation: shake .4s ease-in-out; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) brightness(1.9) saturate(.4); }

/* Fehlschlag: seitlich ausweichen. */
@keyframes dodge { 0%,100% { transform: none; } 50% { transform: translateX(26px) rotate(6deg); opacity: .65; } }
.sprite.dodge { animation: dodge .4s ease-in-out; }

/* KO: kippen, absacken, ausblenden. */
@keyframes faintAway { 0% { transform: none; opacity: 1; } 100% { transform: translateY(64px) rotate(18deg); opacity: 0; } }
.sprite.faint { animation: faintAway .7s ease-in forwards; }

/* Einwechseln: von der Seite hereinfliegen. */
@keyframes sendInYou { 0% { transform: translate(-90px, 40px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sendInFoe { 0% { transform: translate(90px, -40px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sprite.send-you { animation: sendInYou .45s cubic-bezier(.2,.9,.3,1.2); }
.sprite.send-foe { animation: sendInFoe .45s cubic-bezier(.2,.9,.3,1.2); }

/* Terakristallisierung: aufblitzen und leuchten bleiben. */
@keyframes teraFlash {
  0% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
  30% { filter: drop-shadow(0 0 26px var(--accent)) brightness(2.2); }
  100% { filter: drop-shadow(0 0 12px var(--accent)); }
}
.sprite.tera { animation: teraFlash .8s ease-out; }

/* Heilung: sanft grün pulsieren. */
@keyframes healGlow {
  0%,100% { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
  50% { filter: drop-shadow(0 0 20px var(--good)) brightness(1.35); }
}
.sprite.heal { animation: healGlow .6s ease-in-out; }

/* Schadenszahl über dem Getroffenen.

   Sie beantwortet die Frage, die der Balken allein nicht beantwortet: WIE VIEL. Bei
   einem Rätsel, in dem es auf zwei Kilopunkte ankommt, ist das keine Zierde — an ihr
   liest man ab, ob der Angriff gereicht hätte. */
.dmg-pop {
  position: absolute; left: 50%; top: 8px; z-index: 3;
  transform: translateX(-50%);
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  color: var(--bad); text-shadow: 0 2px 6px #000, 0 0 2px #000;
  pointer-events: none;
  animation: dmgFloat .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.dmg-pop.heal { color: var(--good); }
@keyframes dmgFloat {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.8); }
  22% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}

/* Kurzes Aufleuchten des Feldes bei "sehr effektiv". */
.field.shockwave::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 60%);
  animation: flash .3s ease-out;
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sprite, .btn.pulse, .hero-mon { animation: none !important; }
  .hpfill { transition: none; }
}

/* ---------- Bank ---------- */

.benches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Auf dem Telefon bleiben es ZWEI Spalten. Einspaltig waren die Leisten 580 px hoch —
   höher als das Kampffeld — und schoben alles darunter aus dem Bild. Die Karten
   verlieren dafür ihren Namen und zeigen nur noch das Bild mit KP-Streifen; wer mehr
   wissen will, tippt darauf. */
@media (max-width: 700px) {
  .benches { gap: 8px; }
  .bench-block { padding: 10px; border-radius: 14px; }
  .bench-block h3 { margin-bottom: 8px; font-size: 10px; }
  .bench-block h3 em { display: none; }
  .bench { gap: 5px; }
  .bench-mon { padding: 3px; gap: 0; flex-direction: column; }
  .bench-mon img { width: 34px; height: 34px; }
  .bench-mon .bm-name { display: none; }
  .bench-mon .bm-hp { font-size: 9.5px; }
}

.bench-block {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px;
  transition: border-color .2s, box-shadow .2s;
}
.bench-block h3 {
  margin: 0 0 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--dim); font-weight: 800;
}
.bench-block h3 em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; font-weight: 500; }

/* Wartet die Runde auf einen Pflichtwechsel, ist die Bank der einzige Bedienpunkt. */
.bench-block.awaiting {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent);
}

.bench { display: flex; gap: 8px; flex-wrap: wrap; }

.bench-mon {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid transparent;
  border-radius: 12px; padding: 5px 10px 5px 5px;
  transition: border-color .12s, background .12s, transform .1s;
}
.bench-mon img { width: 42px; height: 42px; image-rendering: pixelated; }
.bench-mon.fainted { opacity: .45; }
.bench-mon.fainted img { filter: grayscale(1); }
/* Durchgestrichen, nicht nur blass: „fainted" steht daneben, aber die Liste wird von
   oben nach unten überflogen und nicht gelesen. */
.bench-mon.fainted .bm-name { text-decoration: line-through; }
.bench-mon .bm-name { font-size: 12.5px; font-weight: 700; }
.bench-mon .bm-hp { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bench-mon .minibar { height: 4px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 3px; }
.bench-mon .minifill { height: 100%; border-radius: 999px; background: var(--good); }
.bench-mon .minifill.mid { background: var(--warn); }
.bench-mon .minifill.low { background: var(--bad); }

.bench-mon.pickable { cursor: pointer; }
.bench-mon.pickable:hover {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel-2));
  transform: translateY(-2px);
}
.bench-mon.locked { opacity: .55; }

/* Das aktive Pokemon steht mit in der Reihe — hervorgehoben, damit auf einen Blick
   klar ist, dass es kein Wechselziel ist, sondern der, der gerade draussen steht. */
.bench-mon.current {
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  cursor: default;
}
.bench-mon.current .bm-name { display: flex; align-items: center; gap: 6px; }
.bm-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}

/* ---------- Steuerung ---------- */

.controls { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.prompt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 14px; font-weight: 800; }

.tera-row { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; flex-wrap: wrap; }
.tera-toggle {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--radius);
  border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--accent-soft);
  font-weight: 800;
  transition: background .12s, color .12s, box-shadow .15s;
}
.tera-toggle em { font-style: normal; opacity: .75; margin-left: 6px; font-weight: 500; }
.tera-toggle:hover { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.tera-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  border-color: transparent;
}
/* Die Raute der Vorlage — dieselbe Form wie in der Mitte der Kampflinie. */
.tera-gem {
  width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: rotate(45deg);
}
.tera-note { font-size: 12px; color: var(--muted); }

.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 9px; }

/* Einwechsler in der Auswahlfläche. Sie tragen keine Typenkante oben wie die
   Attacken — die Farbe gehört dort zum Angriffstyp, und eine Karte, die dieselbe
   Kante trägt, ohne dasselbe zu bedeuten, verwischt genau diese Aussage. Stattdessen
   das Bild links, damit man sie auf einen Blick auseinanderhält. */
.switch-choice { display: flex; align-items: center; gap: 12px; border-top-color: var(--line-2); }
.switch-choice .sc-sprite { width: 46px; height: 46px; image-rendering: pixelated; flex: 0 0 auto; }
.switch-choice > div { min-width: 0; flex: 1; }

/* Die Typenfarbe sitzt als Kante OBEN, wie in der Vorlage. `app.js` setzt dafür
   `borderTopColor` — wer das auf `borderLeftColor` zurückdreht, färbt eine Kante, die
   es hier nicht mehr gibt, und alle Karten sehen gleich aus. */
.choice {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-top-width: 3px;
  border-radius: var(--radius); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .12s, background .12s, transform .1s;
}
.choice:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gold) 8%, var(--panel-2));
  transform: translateY(-2px);
}
.choice:disabled { cursor: default; transform: none; }
.choice .c-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.choice .c-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.choice .c-meta { font-size: 12px; color: var(--muted); }
.choice.tera-armed {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent);
}
.choice.locked { opacity: .48; }
.choice.locked:hover { background: var(--panel-2); }
.choice .c-lock { font-size: 11px; color: var(--accent-soft); }

.control-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 13px; flex-wrap: wrap; }
.hint-out { font-size: 12px; color: var(--muted); }
.hint-out .hrow { font-variant-numeric: tabular-nums; }
.hint-out .hrow.best { color: var(--good); font-weight: 650; }

/* ---------- Rückmeldung ---------- */

.feedback {
  border-radius: var(--radius-lg); padding: 14px 18px; border: 1px solid var(--line);
  font-size: 14px; display: flex; align-items: center; gap: 14px;
}
/* Die Waschung läuft aus, statt die ganze Fläche zu färben — der Text bleibt dadurch
   auch am rechten Rand auf ruhigem Grund lesbar. */
.feedback.blunder {
  border-color: color-mix(in srgb, var(--bad) 35%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 14%, transparent), color-mix(in srgb, var(--bad) 3%, transparent));
  color: #ffb4b4;
}
.feedback.good {
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 14%, transparent), color-mix(in srgb, var(--good) 3%, transparent));
}
.feedback.neutral { opacity: .82; }

/* Nennt den bewerteten Zug — sonst ist ein neues Urteil von einem alten nicht zu
   unterscheiden, wenn der Text zufällig derselbe ist. */
.fb-turn {
  flex: none; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  border: 0; color: inherit; font-weight: 800;
}
.fb-icon { flex: none; font-weight: 800; }
.feedback.blunder .fb-icon { color: var(--bad); }
.feedback.good .fb-icon { color: var(--good); }
.feedback.pop { animation: fbPop .45s ease; }
@keyframes fbPop {
  0% { transform: scale(.97); opacity: 0; }
  55% { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Protokoll ---------- */

.logbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.logbox summary {
  cursor: pointer; padding: 16px 20px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 800;
}
.log { padding: 0 20px 18px; max-height: 260px; overflow-y: auto; font-size: 13.5px; line-height: 1.7; }
.log div { color: var(--muted-2); }
.log div.head { color: var(--accent-soft); font-weight: 800; font-size: 12px; margin-top: 12px; letter-spacing: .5px; }

/* ---------- Ergebnis ---------- */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.result { display: flex; flex-direction: column; gap: 18px; }

/* Das Kopfband der Entwurfsvorlage: warmer Verlauf mit Punktraster, Zeichen links,
   Kennzahl rechts. Zwei Fassungen — Gold für den gewonnenen Kampf, kühles Rot für den
   verlorenen. Die Vorlage kennt nur die erste; ein Pokal über „Battle lost" wäre eine
   Aussage, die der Bildschirm gar nicht machen will. */
.res-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); padding: 32px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #2a2308 0%, #171225 60%, #0f1428 100%);
  border: 1px solid #3a3316;
}
.res-hero.lost {
  background: linear-gradient(135deg, #2a0f0f 0%, #1a1226 60%, #0f1428 100%);
  border-color: #3d1d1d;
}
@media (prefers-color-scheme: light) {
  .res-hero { background: linear-gradient(135deg, #fff8e2 0%, #f6f2fb 60%, #eef2fc 100%); border-color: #e8dcb0; }
  .res-hero.lost { background: linear-gradient(135deg, #fdeceb 0%, #f8f1fa 60%, #eef2fc 100%); border-color: #f0cfcd; }
}
.res-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent) 1.5px, transparent 1.5px);
  background-size: 26px 26px; opacity: .3;
}
.res-hero.lost::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--bad) 30%, transparent) 1.5px, transparent 1.5px); }
.res-hero > * { position: relative; }

.res-medal {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 42px; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 40px color-mix(in srgb, var(--gold) 55%, transparent);
  animation: pulseGlow 2.6s ease-in-out infinite;
}
.res-hero.lost .res-medal {
  background: linear-gradient(135deg, #e04b4b, var(--bad));
  box-shadow: 0 0 40px color-mix(in srgb, var(--bad) 45%, transparent);
  color: #fff; font-size: 38px; font-weight: 800;
  animation: none;
}
@keyframes pulseGlow { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

.res-headline { min-width: 0; }
.result h2 { margin: 0; font-size: 42px; line-height: 1.05; }
.verdict { font-size: 16px; font-weight: 700; margin: 6px 0 0; color: #ffe9a8; }
.res-hero.lost .verdict { color: #ffc9c9; }
@media (prefers-color-scheme: light) {
  .verdict { color: var(--muted-2); }
  .res-hero.lost .verdict { color: var(--muted-2); }
}

/* Die Kennzahl steht rechts und für sich — in einem Endspiel ist es die einzige, die
   über Erfolg entscheidet. */
.res-score {
  margin-left: auto; text-align: center; flex-shrink: 0;
  background: rgba(0, 0, 0, .25); border-radius: var(--radius-lg); padding: 12px 22px;
}
@media (prefers-color-scheme: light) { .res-score { background: rgba(255, 255, 255, .6); } }
.res-score .k { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.res-score b { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--accent-soft); }
.res-hero.lost .res-score b { color: var(--bad-2); }

/* Drei Kacheln, mittig gesetzt und mit grosser Zahl — wie in der Vorlage. Die Farbe
   der Zahl folgt ihrer Aussage, nicht dem Ausgang des Kampfes. */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.res-grid > div {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px; text-align: center;
}
.res-grid .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); font-weight: 800; margin-bottom: 8px; }
.res-grid .v { font-family: var(--font-display); font-size: 38px; font-weight: 700; }
.res-grid .v.good { color: var(--good); }
.res-grid .v.bad { color: var(--bad); }

/* Die beiden Wege vom Ergebnis weg stehen nebeneinander: ein neues Endspiel oder
   dasselbe noch einmal. */
.res-actions { display: flex; gap: 10px; flex-wrap: wrap; align-self: flex-start; }

/* ---------- Rückblick ---------- */

.review { margin: 0; }
.review h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.review-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.review-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.review-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.best { background: var(--good); }
.dot.good { background: var(--good-2); }
.dot.weak { background: var(--warn); }
.dot.blunder { background: var(--bad); }

.review-list { display: flex; flex-direction: column; gap: 6px; }
.rev-row {
  display: grid;
  grid-template-columns: 42px 44px minmax(0, 1fr) 18px minmax(0, 1fr) 116px;
  align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left-width: 6px; border-radius: var(--radius); padding: 11px 15px;
}
.rev-row.best { border-left-color: var(--good); }
.rev-row.good { border-left-color: var(--good-2); }
.rev-row.weak { border-left-color: var(--warn); }
.rev-row.blunder { border-left-color: var(--bad); }
.rev-turn { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rev-row img { width: 42px; height: 42px; image-rendering: pixelated; }
.rev-move { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rev-move span.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rev-arrow { color: var(--muted); text-align: center; }
.rev-row.best .rev-arrow, .rev-row.best .rev-best { visibility: hidden; }
.rev-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.rev-bar i { display: block; height: 100%; border-radius: 999px; background: var(--warn); }
.rev-row.blunder .rev-bar i { background: var(--bad); }
.rev-row.good .rev-bar i { background: var(--good-2); }
.rev-cost { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; }
.rev-note { grid-column: 1 / -1; font-size: 12px; color: var(--bad); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
/* Die Linie läuft im Rückblick über die ganze Zeile — die Spalten daneben sind für
   Zugnummer und Sprite gedacht, nicht für Fliesstext. */
.rev-row > .rev-line { grid-column: 1 / -1; }
.rev-costbox .rev-why { margin: 6px 0 0; }

/* Schmal: „dein Zug → bester Zug" nebeneinander lässt für beide je 40 px übrig, in
   denen nichts mehr lesbar ist. Untereinander bleibt der Vergleich erhalten. */
@media (max-width: 700px) {
  .rev-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 5px; padding: 9px 11px; }
  .rev-row > .rev-turn { grid-column: 1 / -1; }
  .rev-row img { grid-row: span 2; }
  .rev-arrow { display: none; }
  .rev-costbox { grid-column: 1 / -1; }
  .rev-move span.txt { white-space: normal; }
}
.review-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.review-summary div {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800;
}
.review-summary .best { background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good-2); }
.review-summary .good { background: color-mix(in srgb, var(--good-2) 10%, transparent); border-color: color-mix(in srgb, var(--good-2) 25%, transparent); color: var(--good-2); }
.review-summary .weak { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--accent-soft); }
.review-summary .blunder { background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad-2); }
.review-summary b { font-variant-numeric: tabular-nums; }

/* ---------- Bank-Vorschau und Wechsel-Abfrage ---------- */

.mon-tip {
  position: fixed; z-index: 60; pointer-events: none;
  width: 290px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); font-size: 13px;
}
.mon-tip h4 { margin: 0 0 3px; font-size: 15px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mon-tip .lvl { color: var(--muted); font-size: 12px; }
.tip-sub { color: var(--muted); font-size: 12px; margin-bottom: 9px; }
.tip-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; margin: 10px 0; font-variant-numeric: tabular-nums; }
.tip-stats span { color: var(--muted); font-size: 11px; }
.tip-stats b { color: var(--text); font-weight: 700; }
.tip-moves { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.tip-move { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.tip-move .ap { margin-left: auto; color: var(--muted); font-size: 11px; }

.modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: color-mix(in srgb, #000 66%, transparent);
  padding: 20px;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; width: min(430px, 100%);
  box-shadow: var(--shadow); animation: boxIn .2s ease-out;
}
.modal-card h3 { margin: 0; font-size: 20px; }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.modal-head img { width: 72px; height: 72px; image-rendering: pixelated; }
.modal-card .tip-moves { margin: 12px 0 20px; }
.modal-actions { display: flex; gap: 9px; }

/* ---------- Ladeanzeige ---------- */

.loading {
  position: fixed; inset: 0; display: grid; place-items: center; gap: 18px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(3px); z-index: 80; align-content: center;
}
.loading p { max-width: 46ch; text-align: center; color: var(--muted); }

/* Rotierender Pokéball statt eines nichtssagenden Kreises. */
.ball-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(180deg, var(--bad) 0 47%, #10141c 47% 53%, #f2f4f8 53% 100%);
  border: 3px solid #10141c; position: relative;
  animation: spin 1.1s cubic-bezier(.5,0,.5,1) infinite;
}
.ball-spinner::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border-radius: 50%;
  background: #f2f4f8; border: 3px solid #10141c;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hint-text { color: var(--bad); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
/* Sitzt in der Endspielkarte. Die reservierte Höhe steht auch dann, wenn der Text
   fehlt — sonst wüchse die Karte, sobald der Vorrat gemeldet wird, und die beiden
   Karten stünden verschieden hoch. */
.pool-note { display: block; color: var(--muted); font-size: 12.5px; margin: 6px 0 0; min-height: 17px; }
.pool-note.ready { color: var(--good); }
.pool-note.error { color: var(--bad); }


/* ---------- Fusszeile und Rechtsseite ---------- */

/* Die Fusszeile läuft über alle drei Spalten des Rasters — sie gehört zur Seite,
   nicht zur Kampfspalte. */
.sitefoot {
  grid-column: 1 / -1;
  display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: baseline;
  padding: 26px 4px 8px; margin-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px;
}
.sitefoot a { color: var(--muted-2); }

/* Ein Knopf, der aussieht wie ein Verweis. Muss ein Knopf sein, weil er nichts
   öffnet, sondern eine Entscheidung zurücknimmt. */
.linklike {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--muted-2); text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { color: var(--text); }

/* ---------- Einwilligung ---------- */

/* Klebt unten, aber nur so hoch wie nötig. Am Telefon liegen dort die
   Attackenknöpfe — deshalb erscheint es ausschliesslich auf dem Startbildschirm
   und nicht mitten im Kampf (siehe app.js). */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  padding: 12px;
  animation: consent-in .25s ease-out;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }

.consent-card {
  max-width: 940px; margin: 0 auto;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.consent-card > div:first-child { flex: 1 1 320px; }
.consent-card strong { display: block; font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; }
.consent-card p { margin: 0; color: var(--muted-2); font-size: 13.5px; line-height: 1.55; }
.consent-card a { color: var(--accent); }

/* Beide Knöpfe gleich gross und gleich auffällig: Eine Ablehnung, die schwerer zu
   finden ist als die Zustimmung, ist keine freiwillige Einwilligung. */
.consent-buttons { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-buttons .btn { min-width: 116px; justify-content: center; }

@media (max-width: 560px) {
  .consent-buttons { width: 100%; }
  .consent-buttons .btn { flex: 1; }
}

.legal { max-width: 74ch; }
.legal h1 { margin: 0 0 20px; font-size: 32px; }
.legal h2 { margin: 30px 0 10px; font-size: 20px; }
.legal h3 { margin: 22px 0 8px; font-size: 15.5px; color: var(--muted-2); }
.legal p { margin: 0 0 12px; color: var(--muted-2); line-height: 1.7; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
/* Was noch fehlt, soll auch danach aussehen — ein Platzhalter, den man übersieht,
   geht mit online. */
.legal .todo {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px; color: var(--text);
}

/* ---------- Posteransicht ---------- */

/* Dieselbe Seite, aufgeräumt und in einer schmalen Spalte: alles weg, was zur
   Bedienung gehört, aber nichts zur Aufgabe beiträgt. Die Spaltenbreite ist Absicht —
   aufgenommen wird meist am Rechner und danach hochkant zugeschnitten; eine 940 px
   breite Kampfansicht lässt sich so nicht verwenden.

   Ein echter Bildexport wäre der direktere Weg, geht aber nicht: Die Sprites kommen
   von einem fremden Server ohne CORS-Freigabe, und eine Leinwand, die sie zeichnet,
   ist danach nicht mehr auslesbar. */
body.poster .layout { grid-template-columns: minmax(0, 560px); padding: 14px; }
body.poster .ad-rail,
body.poster .sitefoot,
body.poster .ad-inline,
body.poster .logbox,
body.poster .puz-timer-pick,
body.poster .settings,
body.poster #btn-restart,
body.poster .bench-block h3 em,
body.poster #puz-feedback { display: none !important; }

/* Der Ausstieg bleibt sichtbar. Ein Modus, den man nur mit Esc wieder verlässt, ist
   für den, der Esc nicht probiert, eine Sackgasse. */
body.poster #btn-poster { padding: 4px 10px; font-size: 12px; }

body.poster .brand .sub { display: none; }
body.poster .topbar { margin-bottom: 10px; }

/* Die Aufgabe und die Auswahl sind das, was gelesen werden soll. */
body.poster .puz-task { font-size: 17px; padding: 15px 18px; }
body.poster .choice .c-name { font-size: 17px; }
body.poster .choice .c-meta { font-size: 12.5px; }
body.poster .choices { grid-template-columns: 1fr 1fr; gap: 10px; }
body.poster .puz-timer b { font-size: 34px; }

/* Das Kampffeld verhält sich wie auf einem schmalen Bildschirm — die Regeln dafür
   gibt es schon, sie hängen nur an der Fensterbreite statt an dieser Ansicht. */
body.poster .row { gap: 9px; min-height: 108px; }
body.poster .row .hpbox { flex: 1 1 auto; min-width: 0; padding: 9px 10px; }
body.poster .mon-slot { width: 110px; height: 110px; }
body.poster .platform { width: 96px; height: 25px; }
body.poster .sprite { max-width: 104px; max-height: 100px; }
body.poster .field { padding: 12px 12px 14px; }
body.poster .badge { font-size: 10px; padding: 2px 7px; }
body.poster .benches { grid-template-columns: 1fr; }


/* ---------- Hochkantansicht: 9:16 zum Aufnehmen ----------

   Ein Rahmen von genau 540 × 960 Punkten, mittig im Fenster, passend skaliert. Was
   darin steht, wird mit einem Bildschirmrekorder aufgenommen — 540 × 960 ist die
   Hälfte von 1080 × 1920, auf einem Bildschirm mit doppelter Punktdichte ergibt
   Massstab 1 also genau das Format, das TikTok, Shorts und Reels erwarten.

   Warum ein fester Rahmen und nicht einfach ein schmales Fenster: Die Bildaufteilung
   muss über alle Aufnahmen dieselbe sein. Am Fenster gemessen hinge sie an dessen
   Grösse, und die Kopfzeile stünde in jedem Clip woanders.

   Der Massstab kommt aus app.js. CSS kann ihn nicht ausrechnen: `scale()` braucht eine
   Zahl, und aus zwei Längen lässt sich keine bilden.

   Die Bedienung steht AUSSERHALB des Rahmens (`.rec-bar`, direkt an `body`) und ist
   damit nie im Bild — deshalb darf sie sichtbar bleiben, statt sich zu verstecken. */

body.rec { overflow: hidden; background: var(--rec-void); }

/* `position: fixed` ist hier doppelt gemeint: Es nimmt den Rahmen aus dem Fluss UND
   macht ihn zum Bezugsrahmen für alles darin absolut Gesetzte — das Wasserzeichen
   unten bleibt dadurch stehen, während der Inhalt darüber scrollt. */
body.rec .layout {
  position: fixed; top: 50%; left: 50%;
  width: 540px; height: 960px;
  transform: translate(-50%, -50%) scale(var(--rec-scale, 1));
  display: block; padding: 0; gap: 0; overflow: hidden;
  background: var(--bg);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow);
}

/* Der Inhalt scrollt IM Rahmen und darf ihn nicht dehnen: Ein Rahmen, dessen Höhe am
   Inhalt hängt, hätte kein festes Seitenverhältnis mehr — und die Auflösung einer
   Stellung ist über tausend Punkte hoch. Der Rollbalken bleibt verborgen, er stünde
   sonst mit im Bild. */
body.rec .stage {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px 44px;
  scrollbar-width: none;
}
body.rec .stage::-webkit-scrollbar { width: 0; height: 0; }

/* Die Adresse gehört ins Bild: Ein Clip, der weitergereicht wird, trägt seine Herkunft
   sonst nur in der Beschreibung — und die reist nicht mit. */
body.rec .layout::after {
  content: 'pokenuzlocke.com';
  position: absolute; left: 0; right: 0; bottom: 0; height: 38px;
  display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: .5px; color: var(--muted);
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

/* Weg muss, was zur Seite gehört und nicht zur Aufgabe. Das Protokoll ist der
   grösste Posten — es allein ist höher als der ganze Rahmen. Der Hinweis unter der
   eigenen Bank („hover for details") beschreibt eine Geste, die es im Video nicht
   gibt. */
body.rec .ad-rail,
body.rec .ad-inline,
body.rec .sitefoot,
body.rec .consent,
body.rec .logbox,
body.rec .settings,
body.rec .puz-tools,
body.rec .control-row,
body.rec #btn-restart,
body.rec .bench-block h3 em { display: none !important; }

/* Kopfzeile, Rätselkopf und Zugauswahl stehen in genau der Form, die auf dem Telefon
   schon existiert. Die Regeln dafür hängen aber an der FENSTERbreite, und das Fenster
   ist beim Aufnehmen breit — der Rahmen ist schmal, nicht der Bildschirm. Deshalb
   stehen sie hier ein zweites Mal. Sie an eine Containerabfrage zu hängen wäre der
   kürzere Weg, würde aber die mühsam eingestellte Telefonansicht mit anfassen. */
body.rec .topbar {
  position: sticky; top: 0; z-index: 3;
  flex-wrap: nowrap; align-items: center; gap: 8px;
  margin-bottom: 8px; padding: 0 0 6px;
  background: var(--bg);
}
body.rec .brand { flex: 0 0 auto; }
body.rec .brand .sub { display: none; }
body.rec .brand strong { font-size: 16px; }

body.rec .puz-head {
  padding: 0; gap: 8px; margin-bottom: 8px;
  background: none; border: 0;
  flex-direction: column; align-items: stretch;
}
body.rec .puz-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
}
body.rec .puz-kicker { display: none; }
body.rec .puz-title b { font-size: 14.5px; }
body.rec .puz-step { font-size: 11.5px; margin-left: auto; text-align: right; }
body.rec .puz-dots { gap: 5px; }
body.rec .puz-dot { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }

/* Endspiel: dieselbe schmale Pille wie auf dem Telefon. Der Referenzwert entfällt —
   er ist eine Vergleichszahl für hinterher. */
body.rec .scoreboard {
  margin-left: auto; flex-wrap: nowrap; gap: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px;
  align-items: baseline; overflow: hidden;
}
body.rec .score {
  background: none; border: 0; border-radius: 0; padding: 0; min-width: 0;
  display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
}
body.rec .score + .score::before { content: '·'; color: var(--dim); margin: 0 4px 0 9px; }
body.rec .score .k { display: inline; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 600; }
body.rec .score .v { font-size: 12.5px; }
body.rec .score:nth-child(1) .k { display: none; }
body.rec .score:nth-child(3) .k { order: 2; color: var(--bad); font-weight: 800; text-transform: lowercase; }
body.rec .score:nth-child(4) { display: none; }

/* Die Aufgabe wird gelesen, die Uhr wird angesehen — beide bleiben gross genug, um
   auf einem Telefonbildschirm noch lesbar zu sein, wenn der Clip dort landet. */
body.rec .puz-task { font-size: 13.5px; padding: 10px 12px; margin-bottom: 8px; }
body.rec .puz-timer b { font-size: 30px; }

body.rec .choices { grid-template-columns: 1fr 1fr; gap: 7px; }
body.rec .choice { padding: 9px 10px; gap: 4px; border-radius: 12px; }
body.rec .choice .c-top { gap: 5px; justify-content: flex-start; }
body.rec .choice .c-name { font-size: 14px; }
body.rec .choice .c-bits,
body.rec .choice .c-meta { font-size: 11px; line-height: 1.35; }
body.rec .switch-choice { grid-column: 1 / -1; }
body.rec .switch-choice .sc-sprite { width: 38px; height: 38px; }

/* Das Feld ist die Bühne, aber es darf sich nicht ausdehnen: Feld, Auswahl UND beide
   Bänke müssen zusammen in 960 Punkte passen. Wer hier eine Zeile lockerer setzt,
   schiebt die letzte Bankreihe aus dem Bild — sichtbar wird das erst bei einer
   Stellung mit sechs Pokemon auf jeder Seite. */
body.rec .field { padding: 10px 10px 12px; }
body.rec .row { gap: 8px; min-height: 100px; }
body.rec .row .hpbox { flex: 1 1 auto; min-width: 0; padding: 8px 10px; }
body.rec .hpbox .pname { font-size: 15px; }
body.rec .mon-slot { width: 100px; height: 100px; }
body.rec .platform { width: 88px; height: 23px; }
body.rec .sprite { max-width: 96px; max-height: 94px; }
body.rec .badge { font-size: 10px; padding: 2px 7px; }

body.rec .benches { grid-template-columns: 1fr 1fr; gap: 7px; }
body.rec .bench-block { padding: 7px; }
body.rec .bench { gap: 4px; }
body.rec .bench-mon { padding: 4px 6px; }
body.rec .bench-mon img { width: 26px; height: 26px; }
body.rec .bench-mon .bm-name { font-size: 11px; }
body.rec .bench-mon .bm-hp { font-size: 10px; }

/* Der Startbildschirm ist zweispaltig entworfen. Hochkant untereinander — dann läuft
   auch das Vorspiel im Titelbild mit, und das ist für sich schon ein Clip. */
body.rec .hero { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
body.rec .steps { grid-template-columns: 1fr; }

/* Die Bedienung des Modus. Sie steht ausserhalb von `.layout` und damit ausserhalb
   des Rahmens — im aufgenommenen Bereich taucht sie nie auf. */
.rec-bar {
  position: fixed; top: 12px; left: 12px; z-index: 80;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 8px 6px 15px;
  font-size: 12px; color: var(--muted);
  box-shadow: var(--shadow);
}
.rec-bar strong { font-family: var(--font-display); font-size: 12.5px; color: var(--text); }
.rec-bar .rec-size { font-variant-numeric: tabular-nums; }
.rec-bar .btn { padding: 5px 12px; font-size: 12px; }


/* ---------- Telefon: Zugauswahl und Bank ----------

   Dieser Block steht bewusst am DATEIENDE. Die Grundregeln für `.choices` und
   `.bench-mon` stehen weiter unten als die grosse Medienabfrage weiter oben — bei
   gleicher Spezifität gewinnt die spätere, und eine Mobilregel dort oben wäre
   wirkungslos gewesen. Genau das ist beim ersten Anlauf passiert. */
@media (max-width: 700px) {
  /* Zwei Karten nebeneinander statt untereinander. Die Vorlage sieht
     `minmax(220px, 1fr)` vor, was auf 390 px eine einzige Spalte ergibt — vier
     Attacken wären dann viermal 92 px hoch. Die Karte muss dafür auf 166 px passen:
     Der Typ rutscht unter den Namen statt neben ihn. */
  .choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .choice { padding: 10px 11px; gap: 5px; border-radius: 12px; }
  .choice .c-top { gap: 5px; justify-content: flex-start; }
  .choice .c-name { font-size: 14px; }
  .choice .c-bits, .choice .c-meta { font-size: 11px; line-height: 1.35; }

  /* Einwechsler bleiben ganzbreitig: Bild plus Werte gehen auf 166 px nicht auf. */
  .switch-choice { grid-column: 1 / -1; }
  .switch-choice .sc-sprite { width: 38px; height: 38px; }

  .bench-block { padding: 8px; }
  .bench-mon img { width: 30px; height: 30px; }
  .bench { gap: 4px; }
}

/* ---------- Telefon: Kopfzeile als eine Zeile ----------

   Die Vorlage zeigt dort keine vier Kacheln, sondern eine schmale Leiste:
   „#77295 · Turn 12 · 0 losses". Vier Kacheln brechen auf 390 px in zwei Reihen um
   und kosten allein 70 px Höhe — an der Stelle, an der ohnehin um jeden Pixel
   gerungen wird.

   Umgesetzt ohne Änderung am HTML: Die Kacheln verlieren ihre eigene Umrandung und
   sitzen gemeinsam in einer. Die Beschriftungen wandern je Feld an die Stelle, an der
   sie sich lesen lassen — „#38843" braucht keine, „Turn 12" trägt sie davor,
   „0 losses" dahinter. Der Referenzwert entfällt: Er ist eine Zahl zum Vergleichen
   nach dem Kampf, nicht währenddessen. */
@media (max-width: 700px) {
  .scoreboard {
    margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 0;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 14px;
    align-items: baseline; overflow: hidden;
  }
  .score {
    background: none; border: 0; border-radius: 0; padding: 0; min-width: 0;
    display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
  }
  /* Der Trennpunkt gehört zwischen die Felder, nicht hinter das letzte. */
  .score + .score::before { content: '·'; color: var(--dim); margin: 0 8px; }
  .score .k { display: inline; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 600; }
  .score .v { font-size: 13.5px; }

  /* Szenario: nur die Nummer. */
  .score:nth-child(1) .k { display: none; }
  /* Verluste: Zahl vor dem Wort — über `order`, NICHT über `row-reverse`.
     Letzteres dreht auch den Trennpunkt mit, der als `::before` das erste Flex-Kind
     ist: Aus „· 0 losses" wurde „0 losses ·", und der Punkt fehlte davor. */
  .score:nth-child(3) .k { order: 2; color: var(--bad); font-weight: 800; text-transform: lowercase; }


  /* Referenzwert weglassen — Vergleichszahl für hinterher. */
  .score:nth-child(4) { display: none; }

  .topbar { gap: 10px; }
}

/* ---------- Telefon: Kopf in EINER Zeile ----------

   Wie in der Vorlage: Ball, Wortmarke, daneben die schmale Leiste. Der Untertitel
   entfällt — er steht auf jedem Bildschirm und sagt beim zwölften Zug nichts mehr —,
   und „New puzzle" wird zum Zeichen. Ausgeschrieben passen die drei Teile auf 390 px
   nicht nebeneinander, und dann bricht die Leiste in eine eigene Zeile um. */
@media (max-width: 700px) {
  .topbar { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .brand { flex: 0 0 auto; }
  .brand .sub { display: none; }
  .brand strong { font-size: 15.5px; }

  .scoreboard { order: 0; width: auto; margin-left: auto; flex: 0 1 auto; padding: 5px 11px; }
  .score .k { font-size: 11px; }
  .score .v { font-size: 12.5px; }
  .score + .score::before { margin: 0 4px 0 9px; }

  /* Der Knopf trägt auf dem Telefon nur noch sein Zeichen. Die Beschriftung bleibt im
     HTML stehen, damit Vorleseprogramme sie weiter finden. */
  .topbar #btn-restart {
    order: 1; margin-left: 0; flex: 0 0 auto;
    font-size: 0; padding: 0; width: 34px; height: 34px; border-radius: 11px;
    display: grid; place-items: center;
  }
  .topbar #btn-restart::after { content: '↻'; font-size: 17px; line-height: 1; }
}

/* ---------- Telefon: Rätselkopf als eine Leiste ----------

   Er brauchte drei Zeilen: Titel mit Nummer und Punkten, darunter „Position 2 of 3 ·
   turn 1 of 3", darunter Uhr und Posteransicht. Zusammen 136 px, bevor das Kampffeld
   überhaupt anfängt — und dieselbe Angabe, die im Endspiel als schmale Leiste im Kopf
   steht.

   Also dieselbe Form: eine Zeile, gleiche Pille, gleiche Schriftgrössen. Der Kicker
   „Daily puzzle" entfällt dabei; die Nummer und die drei Felder sagen dasselbe, und
   der Startbildschirm hat den Modus gerade benannt. Uhr und Posteransicht rutschen in
   eine zweite, flache Zeile — gebraucht werden sie vor dem Zug, nicht während. */
@media (max-width: 700px) {
  .puz-head {
    padding: 0; gap: 8px; background: none; border: 0;
    flex-direction: column; align-items: stretch;
  }
  .puz-bar {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 12px;
  }
  .puz-kicker { display: none; }
  .puz-title b { font-size: 14.5px; }
  .puz-step { font-size: 11.5px; margin-left: auto; text-align: right; }
  .puz-dot { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
  .puz-dots { gap: 5px; }

  .puz-tools { gap: 8px; padding: 0 2px; }
  .puz-tools .btn { padding: 6px 11px; font-size: 12px; }
  .puz-timer-pick { font-size: 11.5px; }
  .puz-timer-pick select { font-size: 11.5px; padding: 4px 6px; }

  /* Das Zeichen sitzt in seiner Schrift zu hoch; ohne den Ausgleich steht der Pfeil
     sichtbar über der Mitte des Knopfes. */
  .topbar #btn-restart::after { transform: translateY(1px); }
}