/* Do-matik – Spielbühne für die Hüter (boss/; Denkduell 2026-10-09 stillgelegt); früher Arena (Wissens-Quartett, entfallen 2026-10-06)
   Visueller Höhepunkt: Kampfbühne mit Arena-Hintergrund, Spieler links (Cyan), Gegner rechts (Pink),
   Wissenskarte in der Mitte. Effekte sind kurz (≤ 600 ms) und entfallen bei prefers-reduced-motion. */

/* Bühne: immer dunkel (.thema-dunkel), Hintergrundbild + Abdunklung für Lesbarkeit */
.arena-buehne {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid #2a3654; box-shadow: var(--shadow-lift);
  background:
    linear-gradient(180deg, rgb(11 17 32 / 0.55), rgb(11 17 32 / 0.25) 45%, rgb(11 17 32 / 0.7)),
    url("../images/arena/arena-bg.webp") center 60% / cover no-repeat,
    #0b1120;
}

/* ---------- Lobby ---------- */
.arena-kopf { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.6rem 1.8rem; margin-bottom: 1.5rem; }
/* Text links ruhig halten: stärkere Abdunklung hinter der Erklärung */
.arena-kopf.arena-buehne {
  background:
    linear-gradient(90deg, rgb(11 17 32 / 0.94) 0%, rgb(11 17 32 / 0.75) 55%, rgb(11 17 32 / 0.35)),
    url("../images/arena/arena-bg.webp") center 70% / cover no-repeat, #0b1120;
}
.arena-kopf h1 { margin: 0 0 0.4rem; font-size: clamp(1.8rem, 4vw, 2.4rem); text-shadow: 0 0 24px rgb(59 130 246 / 0.45); }
.arena-kopf p { margin: 0; max-width: 620px; }
.arena-kopf .muted { color: #c3cbe0; }
.arena-ich { display: flex; gap: 0.9rem; align-items: center; padding: 0.8rem 1rem; border-radius: var(--radius); background: rgb(11 17 32 / 0.6); border: 1px solid rgb(34 211 238 / 0.35); }
.arena-ich img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 12px rgb(34 211 238 / 0.45)); }
@media (max-width: 760px) { .arena-kopf { grid-template-columns: 1fr; } }

.arena-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .arena-layout { grid-template-columns: 1fr; } }
.arena-layout h2 { font-size: 1.25rem; }
.gegner-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.gegner {
  display: grid; grid-template-columns: 72px 1fr; gap: 0.4rem 0.8rem; align-items: center; padding: 0.8rem;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.gegner:hover { border-color: color-mix(in srgb, var(--color-pink) 55%, var(--border)); transform: translateY(-2px); }
.gegner img {
  width: 72px; height: 72px; object-fit: contain; grid-row: span 2; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-pink) 28%, transparent), transparent 70%);
}
.gegner__text { display: grid; line-height: 1.3; }
.gegner__text .muted { font-size: 0.82rem; }
.gegner__bilanz { font-size: 0.8rem; }
.gegner .btn { grid-column: 2; justify-self: start; }
.arena-box { padding: 1rem 1.2rem; margin-bottom: 1rem; }
.arena-box h2 { font-size: 1.1rem; margin-top: 0; }
.rangliste { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.3rem; }
.rangliste li span { display: inline-flex; }
.rangliste li { font-size: 0.92rem; }
.rangliste li span + span { float: right; color: var(--text-muted); }
.rangliste li.ist-ich { font-weight: 800; color: var(--primary); }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.88rem; }
.verlauf li { display: flex; justify-content: space-between; gap: 0.5rem; }

/* ---------- Kampf ---------- */
.kampf-kopf { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.kampf-stand { font-family: var(--font-display); font-weight: 850; font-size: 2.2rem; letter-spacing: 0.04em; }
.kampf-feld {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.25fr) minmax(200px, 1fr);
  gap: 1rem; align-items: stretch; padding: clamp(0.8rem, 2vw, 1.4rem);
}
@media (max-width: 900px) { .kampf-feld { grid-template-columns: 1fr 1fr; } .kampf-mitte { grid-column: 1 / -1; order: -1; } }
@media (max-width: 520px) { .kampf-feld { grid-template-columns: 1fr; } }

.kampf-karte {
  --seite: var(--color-cyan);
  display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem;
  border-radius: var(--radius); background: rgb(11 17 32 / 0.55); backdrop-filter: blur(3px);
  border: 1px solid color-mix(in srgb, var(--seite) 45%, transparent);
}
.kampf-karte--gegner { --seite: var(--color-pink); }
.kampf-figur { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 230px; width: 100%; margin: 0 auto; isolation: isolate; }
/* leuchtende Plattform unter der Figur */
.kampf-figur::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 16%; border-radius: 50%; z-index: -1;
  border: 2px solid var(--seite); background: radial-gradient(closest-side, color-mix(in srgb, var(--seite) 35%, transparent), transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--seite) 55%, transparent);
}
.kampf-figur img {
  width: 86%; height: auto;
  filter: drop-shadow(0 0 1px var(--seite)) drop-shadow(0 0 14px color-mix(in srgb, var(--seite) 45%, transparent));
}
.kampf-karte--gegner .kampf-figur img { transform: scaleX(-1); }   /* Gegner schaut zum Spieler */
.kampf-figur__effekt { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.kampf-karte__name { display: grid; justify-items: center; text-align: center; gap: 0.15rem; }
.kampf-karte__klasse { font-size: 0.85rem; color: var(--text-muted); }

/* Rundenpunkte (Text-Alternative per aria-label) */
.kampf-punkte { display: flex; gap: 4px; margin-top: 0.25rem; }
.kampf-punkte i { width: 16px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.14); }
.kampf-punkte i.ist-voll { background: var(--seite); box-shadow: 0 0 8px var(--seite); }

.kampf-werte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.kampf-werte li > * {
  display: flex; justify-content: space-between; align-items: center; width: 100%; font: inherit; color: var(--text);
  padding: 0.4rem 0.7rem; border-radius: var(--radius-s); border: 1px solid var(--border); background: rgb(24 34 56 / 0.85);
}
.kampf-werte button { cursor: pointer; border-color: color-mix(in srgb, var(--color-cyan) 55%, transparent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.kampf-werte button:hover, .kampf-werte button:focus-visible { transform: translateX(3px); box-shadow: 0 0 14px rgb(34 211 238 / 0.35); }
.kampf-werte li.ist-gespielt > * { opacity: 0.4; text-decoration: line-through; }
.kampf-werte li.ist-aktiv > * { border-color: var(--xp); background: color-mix(in srgb, var(--xp) 22%, #182238); box-shadow: 0 0 12px color-mix(in srgb, var(--xp) 45%, transparent); }
.kampf-werte strong { font-family: var(--font-mono); }

/* Wissenskarte in der Mitte: ruhig und gut lesbar */
.kampf-mitte {
  padding: 1.4rem; display: grid; align-content: center; text-align: center;
  border-radius: var(--radius); background: rgb(15 23 42 / 0.88); border: 1px solid rgb(91 141 239 / 0.4);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 0 30px rgb(59 130 246 / 0.18);
}
.kampf-hinweis h2 { margin-bottom: 0.3rem; }
.kampf-frage__kat { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; text-transform: none; color: var(--color-cyan); margin: 0; }
.kampf-frage__kat strong { color: var(--text); }
.kampf-frage__hinweis { font-size: 0.85rem; color: var(--text-muted); margin: 0.3rem 0 0.9rem; }
.kampf-frage h3 { font-size: 1.15rem; line-height: 1.4; }
.kampf-optionen { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
/* Antworten: Text als ein Block (Code bleibt im Satz), lesbar in Hell und Dunkel; im Prüfungsfeld (.hf) feste Navy-Optik */
.kampf-optionen .btn { display: block; width: 100%; text-align: left; line-height: 1.45; border-radius: var(--radius-s); white-space: normal;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.kampf-optionen .btn:hover { border-color: var(--color-primary); }
.kampf-frage__reihe { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.kampf-frage__reihe strong { color: var(--color-text); }
.runden-ergebnis h2 { margin: 0.6rem 0 0.8rem; font-size: 1.7rem; }
.runden-ergebnis--a h2 { color: var(--success); text-shadow: 0 0 18px color-mix(in srgb, var(--success) 50%, transparent); }
.runden-ergebnis--v h2 { color: var(--color-pink); }
.runden-ergebnis__frage { font-weight: 700; margin: 0; }
.runden-ergebnis__werte { font-size: 1.1rem; margin: 0.4rem 0 0; }
.kampf-ende__icon { font-size: 4.5rem; line-height: 1; animation: sieg-pop 0.7s cubic-bezier(.2, .9, .3, 1.4) both; }
.kampf-ende h2 { font-size: 2rem; }
.kampf-ende--sieg h2 { color: var(--color-gold); text-shadow: 0 0 22px color-mix(in srgb, var(--color-gold) 55%, transparent); }
.kampf-ende--niederlage h2 { color: var(--color-pink); }
.runden-log { padding: 1rem 1.2rem; margin-top: 1.2rem; }
.runden-log h3 { margin-top: 0; }
.runden-log .tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.runden-log .tabelle td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }

/* ---------- Kampfeffekte (kurz, nur nach einer Runde) ----------
   data-sieger="a": Spieler gewinnt → Effekt trifft den Gegner; "v": umgekehrt. */
.arena-buehne[data-sieger="a"] .kampf-karte--gegner .kampf-figur,
.arena-buehne[data-sieger="v"] .kampf-karte--ich .kampf-figur { animation: treffer 450ms ease-out; }
@keyframes treffer {
  15% { transform: translateX(-6px); filter: brightness(2.2) saturate(0.4); }
  35% { transform: translateX(6px); }
  60% { transform: translateX(-3px); filter: none; }
}
.arena-buehne[data-sieger="a"] .kampf-karte--gegner .kampf-figur__effekt,
.arena-buehne[data-sieger="v"] .kampf-karte--ich .kampf-figur__effekt { animation: effekt-aus 600ms ease-out forwards; }
@keyframes effekt-aus { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Angriff / Stärke: Neon-Slash */
.arena-buehne[data-effekt="angriff"] .kampf-figur__effekt,
.arena-buehne[data-effekt="staerke"] .kampf-figur__effekt {
  background: linear-gradient(135deg, transparent 44%, #fff 49%, var(--color-cyan) 51%, transparent 56%);
  filter: drop-shadow(0 0 10px var(--color-cyan));
}
/* Verteidigung / Leben: Schildimpuls */
.arena-buehne[data-effekt="verteidigung"] .kampf-figur__effekt,
.arena-buehne[data-effekt="leben"] .kampf-figur__effekt {
  border-radius: 50%; inset: 8%;
  border: 3px solid var(--color-cyan); box-shadow: 0 0 30px var(--color-cyan), inset 0 0 30px rgb(34 211 238 / 0.4);
}
/* Intelligenz / Geschick: digitale Partikel */
.arena-buehne[data-effekt="intelligenz"] .kampf-figur__effekt,
.arena-buehne[data-effekt="geschick"] .kampf-figur__effekt {
  background:
    radial-gradient(circle, var(--color-cyan) 0 2px, transparent 3px) 0 0 / 22px 22px,
    radial-gradient(circle, var(--color-purple) 0 2px, transparent 3px) 11px 11px / 22px 22px;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}

/* Sieg: kurzer goldener Strahlenkranz hinter der Wissenskarte */
.arena-buehne[data-ende="sieg"] .kampf-mitte { position: relative; }
.arena-buehne[data-ende="sieg"] .kampf-mitte::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgb(245 192 74 / 0.22) 10deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 60%); mask-image: radial-gradient(circle, #000 20%, transparent 60%);
  animation: sieg-strahlen 1.2s ease-out both;
}
@keyframes sieg-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sieg-strahlen { from { opacity: 0; transform: scale(0.6) rotate(-20deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .kampf-figur__effekt { display: none; }
}

/* Kontext und Quelltext zur Wissensfrage (aus der Fragenbank) */
.kampf-frage__kontext { font-size: 0.95rem; color: var(--text-muted); text-align: left; margin: 0 0 0.6rem; }
.kampf-frage__code {
  text-align: left; margin: 0 0 0.6rem; padding: 0.7rem 0.9rem; max-height: 14rem; overflow: auto;
  background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5;
}

/* ================= Techniken (Joker) – Arena und Boss ================= */
.technik-leiste { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--color-border-strong); }
.technik-leiste__titel { font-size: 0.85rem; font-weight: 700; width: 100%; }
.technik-leiste__titel small { font-weight: 400; color: var(--color-text-muted); }
.technik-leiste__hinweis { font-size: 0.82rem; margin: 0.8rem 0 0; }
.technik-knopf:not(:disabled):hover { border-color: var(--color-cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--color-cyan) 35%, transparent); }
.technik-leiste__schild { border-color: var(--color-cyan); }
.kampf-optionen .btn.ist-weg { opacity: 0.3; text-decoration: line-through; }

/* ================= Hüter der Welten (boss/) ================= */
.boss-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.boss-karte { display: grid; justify-items: center; gap: 0.35rem; padding: 1rem; text-align: center; color: var(--color-text); text-decoration: none; transition: transform var(--transition-fast); }
.boss-karte:hover { transform: translateY(-3px); }
.boss-karte.ist-bereit { border-color: var(--color-pink); box-shadow: var(--shadow-card), 0 0 22px color-mix(in srgb, var(--color-pink) 30%, transparent); }
.boss-karte.ist-erhalten { border-color: var(--color-gold-bright); }
/* Elementarhüter (2026-10-11): Farbe des Elements nur als weicher Schein hinter der Figur – Status steht immer als Text daneben */
.boss-bild { --element-schein: var(--element, var(--color-primary));
  position: relative; display: grid; place-items: center; width: 140px; aspect-ratio: 1; border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--element-schein) 26%, transparent), transparent 68%); }
.boss-bild img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28)); }
.boss-bild__platzhalter { display: none; font-size: 0.85rem; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; }
.boss-bild.is-leer .boss-bild__platzhalter { display: block; }
.boss-bild--gross { width: min(100%, 340px); }
.boss-intro { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 1.6rem; align-items: center; padding: clamp(1rem, 3vw, 2rem); }
.boss-intro h1 { margin: 0.2rem 0 0.8rem; }
.boss-regeln { padding-left: 1.1rem; display: grid; gap: 0.35rem; margin: 0.6rem 0 0.2rem; }
.boss-regeln-box { margin: 0.9rem 0 1.1rem; padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2, transparent); }
.boss-regeln-box summary { cursor: pointer; font-weight: 700; }
@media (max-width: 760px) { .boss-intro { grid-template-columns: 1fr; justify-items: center; } .boss-intro__text { width: 100%; } }

/* Wissensprüfungen: Übersicht – Hüter links, Prüfung/Voraussetzung/Siegel rechts */
.pruefung-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 1rem; }
.pruefung { display: grid; grid-template-columns: 136px 1fr;   /* Hüterbild etwas kleiner (2026-10-11) */ gap: 1rem; align-items: start; padding: 1.1rem 1.2rem; }
.pruefung.ist-bereit { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); }
.pruefung.ist-erhalten { border-color: color-mix(in srgb, var(--color-gold-bright) 55%, var(--color-border)); }
.pruefung.ist-zu .boss-bild img { filter: saturate(.55); opacity: .85; }
.pruefung__bild .boss-bild { width: 100%; }
.pruefung__text { display: grid; gap: 0.45rem; justify-items: start; min-width: 0; }
.pruefung__text .eyebrow { margin: 0; }
.pruefung__text h2 { margin: 0; font-size: 1.2rem; }
.pruefung__welt { margin: -0.3rem 0 0; font-size: 0.9rem; }
.status .status__icon { width: var(--icon-status); height: var(--icon-status); vertical-align: -0.18em; }
.pruefung-vor { display: grid; gap: 0.25rem; width: 100%; font-size: 0.88rem; }
.pruefung-vor__titel { color: var(--color-text-muted); }
.pruefung-vor .progress { height: 4px; border: 0; }
.pruefung-vor__zahl { font-family: var(--font-label); font-weight: 500; font-size: var(--fs-meta); }
.pruefung-siegel { display: flex; align-items: center; gap: 0.55rem; margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--color-text-muted); }
.pruefung-siegel img { width: 36px; height: 36px; flex: none; filter: grayscale(.9); opacity: .6; }
.pruefung-siegel.ist-erhalten img { filter: none; opacity: 1; }
.pruefung-siegel b { display: block; color: var(--color-text); }
.pruefung__fehlt { margin: 0; font-size: 0.92rem; font-weight: 600; }
.pruefung__knoepfe { margin: 0.2rem 0 0; }
.pruefung-intro .pruefung-vor, .pruefung-intro .pruefung-siegel { max-width: 460px; margin-bottom: 0.4rem; }
@media (max-width: 520px) { .pruefung { grid-template-columns: 96px 1fr; gap: 0.8rem; padding: 0.9rem; } }

/* ---------- Prüfungsfeld (Nutzer-Entwurf 2026-10-11): oben die Bühne (images/hueter/spielfeld.webp, Begleiter und Hüter auf den Sockeln),
   darunter die Frage-Tafel in voller Breite (Nutzer: im Feld zu klein). Feste Spielfarben in beiden Modi (Navy + Gold wie die Kartenspiele).
   Bühne ab 900 px als Ausschnitt 16 : 6 des Bildes (y 15–82 %), Sockel-Mitte links x 18,8 %, rechts x 81,3 %. */
.hf {
  --hf-navy: #13213b; --hf-navy-2: #1c2f52; --hf-gold: #c8962f; --hf-gold-hell: #f3cf6a; --hf-text: #edf3fa; --hf-leise: #b9c6d8;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; color: var(--hf-text);
}
.hf__feld {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: #2a3550 url(../images/hueter/spielfeld.webp) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(200, 150, 47, .45), 0 18px 40px rgba(0, 0, 0, .3);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 0.9rem 0.9rem 2.2rem;
}
.hf__seite { display: grid; justify-items: center; align-content: end; gap: 0.3rem; }
.hf__seite--ich { --seite: #69b4ff; }
.hf .kampf-figur { width: min(75%, 150px); max-width: none; }
.hf .kampf-figur::before { display: none; }   /* der Sockel im Bild ist die Plattform */
.hf .kampf-figur img { width: 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); }
.hf .boss-bild { width: min(100%, 240px); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--element, #69b4ff) 30%, transparent), transparent 66%); }
.hf .boss-bild img { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); }
/* Namenstafel unter der Figur: Navy mit Goldkante */
.hf__tafel {
  display: grid; justify-items: center; gap: 0.3rem; min-width: min(100%, 210px); padding: 0.45rem 1rem 0.5rem;
  background: linear-gradient(180deg, var(--hf-navy-2), var(--hf-navy)); border: 1.5px solid var(--hf-gold); border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(10, 18, 34, .6), 0 6px 14px rgba(0, 0, 0, .35);
}
.hf__tafel strong { font-size: 1.02rem; letter-spacing: .01em; }
.hf .boss-herzen { display: flex; gap: 0.35rem; }
.hf .boss-herzen img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(105, 180, 255, .55)); }
.progress--hueter { width: 100%; height: 12px; background: rgba(255, 255, 255, .12); border-radius: 999px; overflow: hidden; }
.progress--hueter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--element, #5fa86a) 75%, #fff), var(--element, #5fa86a)); transition: width .4s ease; }
.hf__zahl { font-size: 0.85rem; color: var(--hf-leise); }

/* Frage-Tafel (Design System 2.0, Fassung B, Nutzer-Freigabe 2026-10-19): schlicht wie eine Aufgabe in den Reihen –
   ruhige Fläche, einfacher Rand, linksbündig, Tafelkopf in Plex Mono, Antworten mit Buchstaben A, B, C …
   Die Tafel trägt .thema-dunkel (js/boss.js): feste Dunkel-Tokens, weil die Bühne in beiden Modi dunkel bleibt. */
.hf__panel {
  position: relative; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
}
.hf__kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: 0 0 0.75rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border); font-family: var(--font-label); font-size: var(--fs-meta); color: var(--color-text-muted);
}
.hf .hf__kopf { color: var(--color-text-muted); }
.hf__kopf b { font-weight: 500; color: var(--color-text); }
.hf .kampf-frage__reihe { color: var(--color-text-muted); font-size: var(--fs-hilfe); }
.hf .kampf-frage__reihe strong { color: var(--color-text); }
.hf .kampf-frage__hinweis, .hf .kampf-frage__kontext { color: var(--color-text-muted); }
.hf .kampf-frage__kontext { text-align: left; }
.hf .kampf-frage h3 { color: var(--color-text); margin: 0.4rem 0 0.75rem; }
.hf .kampf-optionen { counter-reset: opt; gap: 0.5rem; }
.hf .kampf-optionen .btn {
  counter-increment: opt; display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; width: 100%; min-height: var(--control-h);
  text-align: left; line-height: 1.45; white-space: normal;
  color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-weight: 500;
}
.hf .kampf-optionen .btn::before {
  content: counter(opt, upper-alpha); flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-label); font-size: var(--fs-meta); color: var(--color-text-muted);
}
.hf .kampf-optionen .btn:hover:not(:disabled) { background: var(--color-surface-raised); border-color: var(--color-primary); }
.hf .kampf-optionen .btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.hf .frage-code { color: var(--code-text); background: var(--color-surface-raised); border-color: var(--color-border); }
.hf .kampf-frage pre { background: var(--code-bg); border-color: var(--color-border); text-align: left; }
.hf .muted, .hf p { color: var(--hf-leise); }
.hf__panel .muted, .hf__panel p { color: var(--color-text-muted); }
.hf h2 { color: var(--hf-text); }
.hf .runden-ergebnis--a h2 { color: #7fd08a; text-shadow: none; }
.hf .runden-ergebnis--v h2 { color: #ffb4a3; }
.hf .kampf-ende--sieg h2 { color: var(--hf-gold-hell); text-shadow: none; }
.hf .kampf-ende--niederlage h2 { color: var(--hf-text); }
.hf .kampf-ende__siegel { display: block; margin: 0 auto 0.4rem; filter: drop-shadow(0 0 12px rgba(243, 207, 106, .5)); }
.hf .btn--ghost { color: var(--hf-text); border-color: rgba(237, 243, 250, .35); }

/* Treffer-Reaktionen (wie bisher) */
.hf[data-treffer="boss"] .hf__seite--boss .boss-bild,
.hf[data-treffer="voll"] .hf__seite--boss .boss-bild { animation: treffer 450ms ease-out; }
.hf[data-treffer="voll"] .hf__seite--boss .boss-bild { animation-iteration-count: 2; }
.hf[data-treffer="ich"] .hf__seite--ich .kampf-figur { animation: treffer 450ms ease-out; }

@media (min-width: 900px) {
  .hf__feld { display: block; padding: 0; aspect-ratio: 16 / 6; container-type: inline-size; background-size: 100% auto; background-position: center 45%; }
  .hf__seite { position: absolute; bottom: 17%; width: 24cqw; transform: translateX(-50%); }
  .hf__seite--ich { left: 18.8%; }
  .hf__seite--boss { left: 81.3%; }
  .hf .kampf-figur { width: 14cqw; margin-bottom: -1.6cqw; }   /* steht auf der Sockel-Oberseite; kleiner als der Hüter (Nutzer: Verhältnis zu ähnlich) */
  .hf .boss-bild { width: 24cqw; margin-bottom: -2.6cqw; }
  .hf__tafel { min-width: 15cqw; position: relative; z-index: 2; }
}
/* Frage-Tafel unter der Bühne, mit dem Medaillon in die Bühne hineinragend */
.hf__panel { width: min(100% - 2rem, 860px); justify-self: center; margin-top: -1.25rem; z-index: 2; padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.4rem; }
.hf .kampf-frage h3 { font-size: 1.2rem; }
.hf .kampf-optionen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.hf .kampf-optionen .btn { font-size: 1rem; }
@media (max-width: 899px) {
  .hf__feld { background-size: auto 130%; background-position: 50% 62%; }
}
@media (max-width: 520px) {
  .hf__feld { gap: 0.4rem; padding: 0.6rem 0.6rem 2rem; }
  .hf__panel { width: calc(100% - 1rem); padding: 1rem 0.9rem 1.1rem; }
  .hf__tafel { min-width: 0; width: 100%; padding: 0.4rem 0.5rem; }
  .hf .kampf-figur { width: min(80%, 112px); }
  .hf .boss-bild { width: min(100%, 165px); }
}
/* Ergebnis nach der Prüfung bleibt mittig */
.hf__panel .kampf-ende { text-align: center; }
@media (prefers-reduced-motion: reduce) { .hf [class] { animation: none !important; } }

/* ================= Klausur-Liga (js/boss.js ?liga) ================= */
.liga-reihen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.liga-pruefer { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.6rem; counter-reset: pruefer; }
.liga-pruefer__eintrag {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.8rem; align-items: center; padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); counter-increment: pruefer;
}
.liga-pruefer__eintrag::before { content: counter(pruefer); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-pink); color: var(--color-on-primary); font-weight: 800; }
.liga-pruefer__eintrag small { color: var(--color-text-muted); grid-column: 2; }
.liga-pruefer__eintrag > :last-child { grid-column: 3; grid-row: 1 / span 2; }
.liga-pruefer__eintrag.ist-geschafft { border-color: var(--color-success); }
.liga-pruefer__eintrag.ist-geschafft::before { content: "✓"; background: var(--color-success); }