/* ============================================================
   TESSAS ZAHLENHÜPFER
   Styles für JS/tessa-zahlenhuepfer.js (Tessas Hasenschule).
   Alles unter .zh-game skopiert, damit generische Klassennamen
   (.card, .btn, .center, .row, .hidden ...) nicht mit den globalen
   Site-Styles aus CSS/style.css kollidieren. Ursprünglich als
   Prototyp entwickelt/getestet unter
   _preview/tessas-zahlenhuepfer/zahlenhuepfer.html (siehe NOTIZEN.md
   dort für die Konzept-Historie) - diese Datei ist 1:1 dieselbe
   Optik, nur unter .zh-game skopiert statt global.
   ============================================================ */
.zh-game{
  --paper:#fff8ea; --ink:#3c2a16; --ink-soft:#7a6a52;
  --wood:#5b3a1c; --border:#cdb896; --accent:#e0a53c;
  --ok:#5aa361; --bad:#d6584a;
  --plus:#3f8a4a; --minus:#c65a3e; --carrot:#e8862c;
  --radius:16px;
  font:16px/1.5 system-ui,"Segoe UI",sans-serif;
  color:var(--ink);
}
.zh-game *{box-sizing:border-box}
.zh-game button{font:inherit; cursor:pointer}
/* Sichtbarer Tastaturfokus für alle interaktiven Elemente. */
.zh-game button:focus-visible, .zh-game a:focus-visible{
  outline:3px solid #2b6cb0; outline-offset:2px; border-radius:8px;
}

/* Pergament-Textur analog zu CSS/baerental.css .bear-intro. */
.zh-game .card{
  position:relative;
  background:radial-gradient(ellipse at center,
    rgba(255,253,246,.95) 0%, rgba(245,233,207,.95) 60%, rgba(224,197,150,.95) 100%);
  border:2px solid var(--wood);
  border-radius:18px 10px 20px 12px;
  padding:18px; margin-bottom:14px;
  box-shadow:
    0 8px 22px rgba(60,40,16,.16),
    inset 0 0 30px rgba(111,63,24,.15),
    inset 0 0 6px rgba(78,42,17,.18);
}
.zh-game .card::before{
  content:"";
  position:absolute; inset:7px;
  border:1px solid rgba(111,67,31,.3);
  border-radius:13px 7px 15px 9px;
  pointer-events:none;
}
.zh-game .center{text-align:center}
.zh-game .btn{
  border:2px solid var(--wood); border-radius:12px; background:var(--accent);
  color:var(--wood); font-weight:800; padding:10px 16px; min-height:46px;
}
.zh-game .btn:hover:not(:disabled){filter:brightness(1.05)}
.zh-game .btn:disabled{opacity:.45; cursor:not-allowed}
.zh-game .btn--ghost{background:var(--paper)}
.zh-game .btn--wide{width:100%}
.zh-game .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* --- Menü --- */
.zh-game .mode-list{display:flex; flex-direction:column; gap:10px}
.zh-game .mode-card{
  display:flex; gap:12px; align-items:center; text-align:left;
  border:2px solid var(--border); border-radius:14px; background:var(--paper);
  padding:12px 14px; width:100%;
}
.zh-game .mode-card:hover:not(:disabled){border-color:var(--accent)}
.zh-game .mode-card .ic{font-size:1.8rem; line-height:1}
.zh-game .mode-card .t{font-weight:800}
.zh-game .mode-card .d{font-size:.85rem; color:var(--ink-soft)}
.zh-game .lock{margin-left:auto; font-size:.8rem; color:var(--ink-soft); font-weight:700}

/* --- Spielfeld --- */
.zh-game .hud{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.zh-game .hud .lives{font-size:1.3rem; letter-spacing:2px}
.zh-game .hud .score{font-weight:800}
.zh-game .hud .stage-badge{
  display:inline-flex; align-items:center; gap:6px;
  border:2px solid var(--wood); border-radius:999px; padding:4px 10px;
  background:var(--paper); font-weight:800; font-size:.85rem;
}
.zh-game .combo{font-weight:800; color:var(--accent)}

.zh-game .tessa-line{
  display:flex; gap:10px; align-items:flex-start;
  background:#fffdf6; border:2px solid var(--border); border-radius:14px;
  padding:10px 12px; margin-bottom:12px; min-height:56px;
}
.zh-game .tessa-line p{margin:0; font-size:.95rem}

/* Verständliche Fehlerhilfe: kurzer Erklärtext, danach wird der
   richtige Weg einmal animiert vorgemacht. */
.zh-game .explain-box{
  margin:0 0 10px; padding:8px 12px; font-size:.88rem;
  background:#fdf1da; border:1px solid var(--border); border-radius:10px;
  color:var(--ink-soft);
}

/* Aufgabenzeile: 5 + 3 = ? mit redundanter Plus/Minus-Kodierung
   (Farbe UND Pfeil UND Symbol - nicht nur Farbe). */
.zh-game .problem-line{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:4px 0 16px; font-size:1.7rem; font-weight:900;
}
.zh-game .problem-line .op{
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 10px; border-radius:10px; font-size:1.1rem;
}
.zh-game .op--plus{color:#fff; background:var(--plus)}
.zh-game .op--minus{color:#fff; background:var(--minus)}
.zh-game .problem-line .q{color:var(--accent)}

/* --- Zahlenweg (Gartenweg statt nackter HTML-Linie) ---
   Trittsteine sind min. 44x44px (Tippfläche), Dekoration (Moos)
   lebt nur im Rand-Padding links/rechts vom Zahlenbereich, nie über
   einer Zahl. */
.zh-game .numberline-outer{overflow-x:auto; margin:10px 0 6px; padding-bottom:6px}
.zh-game .numberline-wrap{position:relative; height:200px; margin:0 auto}
.zh-game .numberline{
  position:absolute; left:44px; right:44px; top:147px; height:10px;
  background:linear-gradient(180deg,#c9a86b,#a9803f);
  border-radius:8px;
  box-shadow:inset 0 -2px 3px rgba(78,42,17,.35), inset 0 2px 2px rgba(255,255,255,.35);
}
.zh-game .nl-moss{
  position:absolute; top:143px; left:2px; width:16px; height:16px; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #8fbf6a, #567c3a 70%);
  border-radius:60% 40% 55% 45%/45% 55% 40% 60%;
  box-shadow:0 1px 2px rgba(60,40,16,.25);
}
.zh-game .nl-moss.right{left:auto; right:2px}
.zh-game .nl-dot{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  border:3px solid #a9803f; padding:0;
  background:radial-gradient(circle at 38% 32%, #fff8ea 0%, #e9d3a3 65%, #cdaa6c 100%);
  box-shadow:0 2px 3px rgba(60,40,16,.3), inset 0 -3px 4px rgba(120,80,30,.25);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.95rem; color:var(--ink);
}
.zh-game .nl-dot:hover:not(:disabled){border-color:var(--accent); filter:brightness(1.05)}
.zh-game .nl-dot:disabled{cursor:default}
.zh-game .nl-dot.is-correct{background:radial-gradient(circle at 38% 32%,#dff2df,var(--ok) 100%); border-color:var(--ok); color:#fff}
.zh-game .nl-dot.is-wrong{background:radial-gradient(circle at 38% 32%,#f7d9d4,var(--bad) 100%); border-color:var(--bad); color:#fff}
/* Zielfeld beim Landen: kurzes warm-goldenes Aufleuchten */
.zh-game .nl-dot.is-landing{ animation:zhDotLandGlow .5s ease }
@keyframes zhDotLandGlow{
  0%{ box-shadow:0 2px 3px rgba(60,40,16,.3), 0 0 0 0 rgba(255,196,64,.9) }
  40%{ box-shadow:0 2px 3px rgba(60,40,16,.3), 0 0 0 9px rgba(255,196,64,0) }
  100%{ box-shadow:0 2px 3px rgba(60,40,16,.3), 0 0 0 0 rgba(255,196,64,0) }
}
@media (prefers-reduced-motion:reduce){ .zh-game .nl-dot.is-landing{animation:none} }

/* Tessa steht IMMER oberhalb ihres Feldes, nie über der Zahl, und
   IMMER vollständig sichtbar (Kopf bis Fuß) - dafür bekommt sie eine
   feste Box (Breite UND Höhe), die für JEDE Pose groß genug ist
   (Posen haben unterschiedliche Seitenverhältnisse: idle ist schmal/
   hoch, land ist breit/flach). Das Bild selbst skaliert innerhalb
   dieser Box per object-fit:contain, nie zugeschnitten. Kein
   overflow:hidden auf Tessa oder ihren Eltern - die Box-Höhe und der
   .numberline-wrap sind bewusst großzügig bemessen, damit auch der
   Sprungbogen (-16px) niemals nach oben herausragt/abgeschnitten wird.

   Struktur: .nl-bunny (Positionierung/Größe der Box, Links-Zentrierung
   über transform) > .nl-bunny-arc (Sprungbogen-Animation, volle
   Boxgröße) > .nl-bunny-sprite (das <img>, object-fit:contain) -
   getrennt, damit sich die beiden transform-Quellen (Position vs.
   Sprungbogen) nicht gegenseitig überschreiben. Der Schatten ist ein
   eigenes, nicht animiertes Element, das am Boden bleibt. */
.zh-game .nl-bunny{
  position:absolute; top:130px; transform:translate(-50%,-100%);
  width:52px; height:112px; overflow:visible;
  transition:left .55s cubic-bezier(.3,.6,.3,1);
  pointer-events:none; z-index:2;
}
.zh-game .nl-bunny-arc{ width:100%; height:100%; overflow:visible }
.zh-game .nl-bunny.is-hopping .nl-bunny-arc{ animation:zhHopArc .5s ease-in-out }
@keyframes zhHopArc{ 0%{transform:translateY(0)} 45%{transform:translateY(-16px)} 100%{transform:translateY(0)} }
.zh-game .nl-bunny-sprite{ display:block; width:100%; height:100%; object-fit:contain }
.zh-game .nl-bunny-shadow{
  position:absolute; top:132px; transform:translate(-50%,-50%);
  width:26px; height:9px; border-radius:50%;
  background:rgba(60,40,16,.32); filter:blur(.5px);
  transition:left .55s cubic-bezier(.3,.6,.3,1);
  pointer-events:none; z-index:1;
}
@media (prefers-reduced-motion:reduce){
  .zh-game .nl-bunny, .zh-game .nl-bunny-shadow{ transition:none }
  .zh-game .nl-bunny.is-hopping .nl-bunny-arc{ animation:none }
}

/* --- Karotten-Zählhilfe ---
   Vor der Antwort ist die VOLLSTÄNDIGE Rechenmenge sichtbar, aber klar
   in Ausgangsmenge ("Schon da"/"Bleibt") und Veränderung ("Kommt
   dazu"/"Geht weg") getrennt - nicht nur farblich, sondern zusätzlich
   über Rahmenform (durchgezogen/gestrichelt) UND ein kleines +/--
   Abzeichen. Erst NACH der Antwort löst jeder Hüpfschritt genau ein
   ausstehendes Element auf (siehe resolveNextPendingCarrot() in
   JS) - die Elemente selbst bleiben dieselben DOM-Knoten, nur ihre
   Zustandsklasse wechselt, damit sich nichts vor der Antwort von
   selbst bewegt. */
.zh-game .carrot-toolbar{display:flex; justify-content:center; align-items:center; gap:8px; margin:0 0 8px; font-size:.85rem; color:var(--ink-soft)}
.zh-game .carrot-toolbar button{
  border:2px solid var(--wood); border-radius:999px; background:var(--paper);
  padding:4px 12px; font-weight:800; font-size:.82rem;
}
.zh-game .carrot-toolbar button.is-on{background:var(--carrot); color:#fff}
.zh-game .carrot-row{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  min-height:40px; margin:0 0 4px; padding:8px 10px; border-radius:12px;
  background:#fffdf6; border:1px dashed var(--border);
}
.zh-game .carrot-row.hidden{display:none}
.zh-game .carrot-legend{
  text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-soft);
  margin:0 0 14px;
}
.zh-game .carrot-legend.hidden{display:none}
.zh-game .carrot-legend .leg-add{color:var(--plus)}
.zh-game .carrot-legend .leg-remove{color:var(--minus)}

.zh-game .carrot-item{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px;
  border:2px solid transparent;
  transition:opacity .3s ease, filter .3s ease, border-color .2s ease;
}
.zh-game .carrot-item img{ width:26px; height:auto; display:block; transition:opacity .3s ease, filter .3s ease }

/* "Kommt dazu" (Addition, vor der Auflösung): blass UND gestrichelt
   UND mit Plus-Abzeichen - drei redundante Signale statt nur Farbe. */
.zh-game .carrot-item.is-pending-add{ border-style:dashed; border-color:var(--plus) }
.zh-game .carrot-item.is-pending-add img{ opacity:.4; filter:saturate(.35) }

/* "Geht weg" (Subtraktion, vor der Auflösung): normal sichtbar, aber
   ebenfalls gestrichelt umrandet UND mit Minus-Abzeichen markiert. */
.zh-game .carrot-item.is-pending-remove{ border-style:dashed; border-color:var(--minus) }

.zh-game .carrot-badge{
  position:absolute; top:-7px; right:-7px; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:900; line-height:1; color:#fff;
  box-shadow:0 1px 2px rgba(60,40,16,.35);
}
.zh-game .carrot-item.is-pending-add .carrot-badge{ background:var(--plus) }
.zh-game .carrot-item.is-pending-remove .carrot-badge{ background:var(--minus) }

/* Auflösung während Tessas Sprung: "Kommt dazu" wird aktiv/orange
   (voller Karotten-Look, kleiner Pop), "Geht weg" wird ausgegraut. */
.zh-game .carrot-item.is-resolved-add{ animation:zhCarrotPop .3s ease }
.zh-game .carrot-item.is-resolved-remove img{ opacity:.25; filter:grayscale(1) }
@keyframes zhCarrotPop{ 0%{transform:scale(.7)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ .zh-game .carrot-item.is-resolved-add{animation:none} }

/* Blitz: Zahlen-Antwortblasen statt Zahlenstrahl-Tipp */
.zh-game .bubbles{display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:10px; margin-bottom:10px}
.zh-game .bubble{
  border:3px solid var(--wood); border-radius:14px; background:var(--paper);
  padding:14px 6px; font-weight:900; font-size:1.3rem; min-height:58px;
}
.zh-game .bubble:active{transform:translateY(1px)}
.zh-game .bubble.is-correct{background:var(--ok); border-color:var(--ok); color:#fff}
.zh-game .bubble.is-wrong{background:var(--bad); border-color:var(--bad); color:#fff}

.zh-game .timerbar{height:10px; border-radius:6px; background:#e7d8bb; overflow:hidden; margin:0 0 14px}
.zh-game .timerbar > i{display:block; height:100%; background:var(--accent); width:100%; transition:width .1s linear}
.zh-game .timerbar.hide{visibility:hidden}

/* --- Rundenweg: EIN kompakter Pfad statt Text-Marktkorb. Jede
   Aufgabe = ein Abschnitt; Trittstein wird bei richtiger Antwort zum
   Korbplatz (Karotte), bei falscher zu einem neutralen Punkt - der
   Weg selbst kennt keine Bestrafung, nur Fortschritt bis zum Beet. */
.zh-game .round-path-outer{ margin:0 0 10px }
.zh-game .round-path{ position:relative; height:40px }
.zh-game .round-path-line{ position:absolute; left:14px; right:34px; top:50%; height:3px; background:var(--border); border-radius:3px }
.zh-game .round-path-slots{ position:relative; display:flex; justify-content:space-between; padding:0 4px 0 0 }
.zh-game .round-path-slot{
  position:relative; z-index:1;
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--border); background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.zh-game .round-path-slot img{ width:16px; height:auto }
.zh-game .round-path-slot.is-current{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(224,165,60,.28) }
.zh-game .round-path-slot.is-correct{ border-color:var(--carrot) }
.zh-game .round-path-slot.is-wrong{ border-color:var(--ink-soft); background:#efe6d6 }
.zh-game .round-path-slot.is-wrong::after{ content:"·"; color:var(--ink-soft); font-weight:900 }
.zh-game .round-path-goal{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  background:#eaf6ec; border:2px solid var(--ok);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
@keyframes zhSlotPop{ 0%{transform:scale(.4)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.zh-game .round-path-slot.is-correct, .zh-game .round-path-slot.is-wrong{ animation:zhSlotPop .3s ease }
@media (prefers-reduced-motion:reduce){ .zh-game .round-path-slot.is-correct, .zh-game .round-path-slot.is-wrong{ animation:none } }

/* Fliegende Karotte vom Zähler in den nächsten Korbplatz. */
.zh-game .flying-carrot{ position:fixed; z-index:90; pointer-events:none; width:26px; height:auto; transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s ease }

/* --- Goldene Karotte: eigener Bonus-Sammelplatz, KEIN Teil der
   Rechenmenge (erscheint erst nach einer richtigen Antwort). --- */
.zh-game .bonus-line{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:0 0 8px; font-size:.85rem; color:var(--ink-soft); font-weight:700;
}
.zh-game .bonus-line img{width:20px; height:auto}
.zh-game .bonus-found-toast{
  text-align:center; font-size:.85rem; font-weight:800; color:#a9700f;
  margin:0 0 8px; animation:zhBonusFoundPop .5s ease;
}
@keyframes zhBonusFoundPop{ 0%{transform:scale(.6); opacity:0} 60%{transform:scale(1.08); opacity:1} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ .zh-game .bonus-found-toast{animation:none} }

/* --- Garten-Fortschritt: abgeschlossene Wachstumszyklen statt einer
   unbegrenzt wachsenden Zahl. --- */
.zh-game .garden-card{ margin-top:4px }
.zh-game .garden-row{
  display:flex; flex-wrap:wrap; gap:2px; justify-content:center;
  min-height:28px; margin:6px 0 4px;
}
.zh-game .garden-row img{max-width:220px; width:70%; height:auto}
.zh-game .garden-caption{text-align:center; font-size:.82rem; color:var(--ink-soft)}
.zh-game .garden-badges{
  text-align:center; margin-top:6px; font-size:.8rem; color:var(--wood); font-weight:700;
}
.zh-game .garden-grow-flash{ animation:zhGardenGrowFlash .6s ease }
@keyframes zhGardenGrowFlash{ 0%{filter:brightness(1)} 40%{filter:brightness(1.25)} 100%{filter:brightness(1)} }
@media (prefers-reduced-motion:reduce){ .zh-game .garden-grow-flash{animation:none} }

.zh-game .bonus-line img.is-glow{
  filter:drop-shadow(0 0 4px #ffd23f) saturate(1.6) brightness(1.15);
  animation:zhGoldenPulse 1.1s ease-in-out infinite;
}
@keyframes zhGoldenPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
@media (prefers-reduced-motion:reduce){ .zh-game .bonus-line img.is-glow{animation:none} }

/* --- "Verhüpfer"-Twist: Markierung + einmalige Erklärung ---
   Die Mechanik selbst ist gewollt (Tessa landet absichtlich falsch),
   muss sich aber sichtbar von einem Darstellungsfehler unterscheiden:
   ein "?" schwebt über Tessa, der falsch behauptete Zahlenstein wird
   zusätzlich gestrichelt/wackelnd markiert (nicht nur Farbe). */
.zh-game .nl-bunny-mark{
  position:absolute; left:50%; top:-16px; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  background:#fff3d6; border:2px solid var(--wood); color:var(--wood);
  display:none; align-items:center; justify-content:center;
  font-weight:900; font-size:1rem; line-height:1;
  box-shadow:0 2px 4px rgba(60,40,16,.3);
  animation:zhMarkBob 1.4s ease-in-out infinite;
}
.zh-game .nl-bunny.has-wrong-claim .nl-bunny-mark{ display:flex }
@keyframes zhMarkBob{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }
@media (prefers-reduced-motion:reduce){ .zh-game .nl-bunny-mark{animation:none} }

.zh-game .nl-dot.is-wrong-claim{
  border-style:dashed; border-color:var(--bad);
  animation:zhWrongWobble 1.6s ease-in-out infinite;
}
@keyframes zhWrongWobble{
  0%,100%{ transform:translate(-50%,-50%) rotate(0) }
  25%{ transform:translate(-50%,-50%) rotate(-6deg) }
  75%{ transform:translate(-50%,-50%) rotate(6deg) }
}
@media (prefers-reduced-motion:reduce){ .zh-game .nl-dot.is-wrong-claim{animation:none} }

/* Einmalige Erklärung (nur beim allerersten Verhüpfer, siehe
   maybeShowVerhuepferHint() in JS) - deutlich sichtbarer als der
   normale Fehlertext, damit sie sicher gelesen wird, bevor es weitergeht. */
.zh-game .verhuepfer-hint{
  margin:0 0 12px; padding:12px 14px; border-radius:12px;
  background:#fdf1da; border:2px solid var(--accent);
  color:var(--ink);
}
.zh-game .verhuepfer-hint p{ margin:0 0 10px; font-size:.92rem; line-height:1.45 }

/* --- Stufenauswahl als Hüpf-Pfad ---
   Reihenfolge von oben nach unten, jede Zone mit echtem, positivem
   Platz (keine negativen top-Werte, kein reines overflow:visible als
   "Lösung"): Tessa-Box -> Verbindungslinie/Trittsteine -> Kurzname ->
   Sperr-Hinweis. Tessa bekommt wie am Zahlenweg eine feste Breite UND
   Höhe, das Bild skaliert per object-fit:contain (.nl-bunny-sprite,
   siehe weiter oben) proportional hinein - nie beschnitten, unabhängig
   vom Seitenverhältnis der Pose. */
.zh-game .stage-unlock-hint{ font-size:.85rem; color:var(--ink-soft); margin:0 0 10px }
.zh-game .stage-path-outer{overflow-x:auto; margin:14px 0 8px; padding-bottom:4px}
/* margin links/rechts muss mind. den halben Kreisdurchmesser (48px/2)
   abdecken, sonst ragt der erste/letzte Trittstein über den
   scrollbaren Bereich hinaus und ist unerreichbar angeschnitten. */
.zh-game .stage-path{position:relative; height:260px; min-width:620px; margin:0 28px}
.zh-game .stage-path .path-line{position:absolute; left:20px; right:20px; top:132px; height:4px; background:var(--wood); border-radius:4px}
.zh-game .stage-stop{
  position:absolute; top:110px; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%; border:3px solid var(--border);
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; font-weight:900; flex-direction:column;
}
/* Gesperrt: nur der Kreis/das Icon wirkt gedämpft, NICHT Text/Hinweis
   (der muss laut Vorgabe gut lesbar bleiben, kein flaues opacity:.4
   auf den ganzen Button mehr). */
.zh-game .stage-stop:disabled{ cursor:not-allowed; border-color:#c9b48a; background:#f2e9d3 }
.zh-game .stage-stop:disabled .stage-stop-icon{ opacity:.5 }
.zh-game .stage-stop.is-done{border-color:var(--ok); background:#eaf6ec}
.zh-game .stage-stop.is-current{border-color:var(--accent); box-shadow:0 0 0 5px rgba(224,165,60,.3)}
.zh-game .stage-stop-label{
  position:absolute; top:56px; width:104px; left:50%; transform:translateX(-50%);
  font-size:.68rem; font-weight:700; color:var(--ink-soft); white-space:normal; line-height:1.2;
}
.zh-game .stage-stop-hint{
  position:absolute; top:96px; width:116px; left:50%; transform:translateX(-50%);
  font-size:.64rem; font-weight:700; color:var(--wood); white-space:normal; line-height:1.25;
  font-style:italic;
}
.zh-game .path-bunny{
  position:absolute; top:100px; transform:translate(-50%,-100%);
  width:48px; height:100px; overflow:visible;
  transition:left .5s ease;
}
@media (prefers-reduced-motion:reduce){ .zh-game .path-bunny{transition:none} }

/* --- Konfetti (kleines, eigenständiges DOM-Partikel-Overlay - siehe
   NOTIZEN.md/Commit-Notiz für die bewusste Entscheidung, hier NICHT
   das schwerere MirelonConfetti.play() zu verwenden). --- */
.zh-game .confetti-piece{
  position:fixed; top:-24px; font-size:1.4rem; z-index:80; pointer-events:none;
  animation:zhConfettiFall linear forwards;
}
@keyframes zhConfettiFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1 }
  100%{ transform:translateY(110vh) rotate(340deg); opacity:.9 }
}
@media (prefers-reduced-motion:reduce){ .zh-game .confetti-piece{ display:none } }

/* --- Rundenende --- */
.zh-game .result h2{margin:0 0 6px}
.zh-game .result .big{font-size:2rem; font-weight:900}
.zh-game .mastery-pill{
  display:inline-block; margin:4px 0 8px; padding:4px 14px; border-radius:999px;
  font-weight:800; font-size:.9rem;
}
.zh-game .mastery-pill.is-mastered{background:#eaf6ec; color:#2f6a3a; border:2px solid var(--ok)}
.zh-game .mastery-pill.is-practice{background:#fdf1da; color:var(--wood); border:2px solid var(--border)}

.zh-game .hidden{display:none !important}