/* ============================================================
   POLITUR II – Flächen, Knöpfe, Felder (Fabian, 22.08.)

   Der Befund vor dieser Datei: Die Seite trug ihre RÄNDER. Fast jedes
   Element bestand aus einer flachen Fläche plus einer leuchtenden
   1px-Linie – teal, gold, mal 1px, mal 2px, mal 3px links. Dadurch
   schrie alles gleich laut, und nichts sah gebaut aus.

   Diese Datei dreht das um: Eine Fläche trägt sich selbst (Verlauf +
   Lichtsaum oben + Schatten unten), der Rand ist nur noch eine leise
   Haarlinie. Leuchten heißt ab jetzt: hier kannst du etwas tun.

   Und Fabians zweite Regel: Nicht um jedes Ding gehört ein Kasten.
   Eine Fähigkeit, ein Heiltrank, ein Begleiter – die stehen frei.

   Angehängt als letzte Datei, damit sie die Grundstile überschreibt,
   ohne dass ich jede einzelne Regel anfassen muss.
   ============================================================ */

:root {
  /* --- Kanten: drei Stärken statt einem Dutzend --- */
  --kante:      rgba(150, 185, 225, .13);   /* trennt nur, drängt sich nicht auf */
  --kante-wach: rgba(10, 200, 185, .34);    /* hier kannst du etwas tun */
  --kante-hell: rgba(240, 201, 108, .70);   /* das hier ist gewählt */

  /* --- Tiefe: Licht fällt von oben, Schatten liegt darunter --- */
  --glanz:   inset 0 1px 0 rgba(255, 255, 255, .06);
  --hebung1: 0 1px 2px rgba(0, 0, 0, .34), 0 6px 18px rgba(0, 0, 0, .24);
  --hebung2: 0 2px 6px rgba(0, 0, 0, .40), 0 16px 38px rgba(0, 0, 0, .36);
  --hebung3: 0 3px 10px rgba(0, 0, 0, .46), 0 30px 64px rgba(0, 0, 0, .50);

  /* --- Rundungen: vier Stufen, sonst keine --- */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-rund: 999px;

  /* --- Bewegung: eine Kurve, zwei Zeiten --- */
  --weich: cubic-bezier(.32, .72, .35, 1);
  --kurz: .16s;
  --mittel: .28s;

  /* Die Flächenfarbe selbst – leicht durchscheinend, damit das
     Splash-Bild dahinter noch atmet, statt abgedeckt zu werden. */
  --flaeche:      linear-gradient(180deg, rgba(23, 45, 82, .88), rgba(12, 27, 52, .90));
  --flaeche-tief: linear-gradient(180deg, rgba(15, 32, 60, .92), rgba(8, 18, 36, .94));
}


/* ============================================================
   1. Das Flächen-Rezept
   Verlauf + Haarlinie + Lichtsaum oben + Schatten unten.
   Alles, was eine Karte, ein Kasten oder eine Kachel ist.
   ============================================================ */

.modus-karte,
.raetsel-box,
.vorschlaege,
.weiter-karte,
.c-matchup,
.c-item-karte,
.c-streiter-karte,
.c-zl-marke,
.c-ware,
.c-chip,
.taste-knopf,
.zelle {
  background: var(--flaeche);
  border: 1px solid var(--kante);
  box-shadow: var(--glanz), var(--hebung1);
  transition: transform var(--kurz) var(--weich),
              border-color var(--kurz) var(--weich),
              box-shadow var(--kurz) var(--weich),
              background var(--kurz) var(--weich);
}

/* Rundungen nach der Skala */
.modus-karte, .raetsel-box, .vorschlaege, .weiter-karte,
.c-matchup, .overlay-karte { border-radius: var(--r-m); }
.c-item-karte, .c-streiter-karte, .c-zl-marke, .c-ware,
.c-chip, .taste-knopf, .zelle { border-radius: var(--r-s); }

/* Anfassen: anheben und die Kante aufwecken.
   Eindrücken: wieder runter, Schatten weg – der Druckpunkt. */
.modus-karte:hover:not(:disabled),
.c-item-karte:hover:not(:disabled),
.c-streiter-karte:hover:not(:disabled),
.c-zl-marke:hover:not(:disabled),
.c-ware:hover:not(:disabled),
.c-chip:hover:not(:disabled),
.weiter-karte:hover,
.taste-knopf:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--kante-hell);
  box-shadow: var(--glanz), var(--hebung2), 0 0 22px rgba(240, 201, 108, .12);
}

.modus-karte:active:not(:disabled),
.c-item-karte:active:not(:disabled),
.c-streiter-karte:active:not(:disabled),
.c-zl-marke:active:not(:disabled),
.c-ware:active:not(:disabled),
.c-chip:active:not(:disabled),
.weiter-karte:active,
.taste-knopf:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--glanz), 0 1px 2px rgba(0, 0, 0, .4);
}

/* Das Gewählte leuchtet – und nur das. */
.c-item-karte.aktiv,
.c-chip.aktiv,
.c-chip.ausruest.aktiv {
  border-color: var(--kante-hell);
  box-shadow: var(--glanz), var(--hebung2),
              0 0 0 1px rgba(240, 201, 108, .35), 0 0 26px rgba(240, 201, 108, .22);
}


/* ============================================================
   2. Knöpfe
   Ein Knopf sieht drückbar aus, wenn das Licht von oben fällt:
   heller Innensaum oben, dunkler unten, Schatten darunter. Beim
   Druck kehrt sich das um – dann liegt der Schatten INNEN.
   ============================================================ */

/* --- Der goldene Hauptknopf --- */
.teilen-knopf,
.senden,
.c-kampf-knopf,
#tutorial-ok,
#collector-tutorial-ok,
#profil-mitnehmen {
  background: linear-gradient(180deg, #f8dc93 0%, var(--gold-hell) 45%, var(--gold) 100%);
  border: 1px solid rgba(116, 78, 20, .55);
  color: #22190a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(92, 60, 12, .40),
    0 2px 5px rgba(0, 0, 0, .38),
    0 8px 22px rgba(200, 150, 60, .16);
  transition: transform var(--kurz) var(--weich),
              filter var(--kurz) var(--weich),
              box-shadow var(--kurz) var(--weich);
}
.teilen-knopf { border-radius: var(--r-s); padding: 11px 24px; }

.teilen-knopf:hover:not(:disabled),
.senden:hover:not(:disabled),
.c-kampf-knopf:hover:not(:disabled),
#tutorial-ok:hover, #collector-tutorial-ok:hover, #profil-mitnehmen:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 0 rgba(92, 60, 12, .40),
    0 4px 10px rgba(0, 0, 0, .40),
    0 10px 30px rgba(200, 150, 60, .26);
}

.teilen-knopf:active:not(:disabled),
.senden:active:not(:disabled),
.c-kampf-knopf:active:not(:disabled),
#tutorial-ok:active, #collector-tutorial-ok:active, #profil-mitnehmen:active {
  transform: translateY(1px);
  filter: brightness(.97);
  box-shadow:
    inset 0 2px 5px rgba(80, 50, 8, .45),
    inset 0 1px 0 rgba(255, 255, 255, .20),
    0 1px 1px rgba(0, 0, 0, .3);
}

/* Der Pfeil im Suchfeld ist rund – da sitzt der Lichtsaum als Ring */
.senden {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -2px 4px rgba(92, 60, 12, .32),
    0 2px 7px rgba(0, 0, 0, .45);
}

/* --- Der leise Knopf: alles, was nicht der Hauptweg ist --- */
.taste-knopf { font-variant-numeric: tabular-nums; }

.nachhol-chip {
  border-color: var(--kante);
  background: rgba(13, 29, 56, .55);
  box-shadow: var(--glanz);
  transition: color var(--kurz) var(--weich),
              border-color var(--kurz) var(--weich),
              background var(--kurz) var(--weich);
}
.nachhol-chip:hover {
  border-color: var(--kante-hell);
  background: rgba(24, 45, 82, .75);
}

/* Runde Symbolknöpfe oben: gleiche Sprache, nur rund */
.kopf-knopf, .musik-knopf, .c-menue-knopf, .modus-nav button {
  background: var(--flaeche-tief);
  border-color: var(--kante);
  box-shadow: var(--glanz), var(--hebung1);
  transition: transform var(--kurz) var(--weich),
              border-color var(--kurz) var(--weich),
              box-shadow var(--kurz) var(--weich);
}
.kopf-knopf { border-radius: var(--r-s); }
.kopf-knopf:hover, .musik-knopf:hover, .c-menue-knopf:hover, .modus-nav button:hover {
  border-color: var(--kante-hell);
  transform: translateY(-1px);
  box-shadow: var(--glanz), var(--hebung2);
}
.kopf-knopf:active, .musik-knopf:active, .c-menue-knopf:active, .modus-nav button:active {
  transform: translateY(0);
  box-shadow: var(--glanz), 0 1px 2px rgba(0, 0, 0, .4);
}

/* Tastatur: ein Ring, der überall gleich aussieht */
.teilen-knopf:focus-visible, .senden:focus-visible, .zelle:focus-visible,
.taste-knopf:focus-visible, .modus-karte:focus-visible, .nachhol-chip:focus-visible,
.c-item-karte:focus-visible, .c-streiter-karte:focus-visible, .c-chip:focus-visible,
.c-ware:focus-visible, .c-zl-marke:focus-visible, .kopf-knopf:focus-visible,
.weiter-karte:focus-visible, .vorschlag:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 3px;
}


/* ============================================================
   3. Eingabefelder
   Vorher: dauerhaft leuchtender teal Rand plus teal Schein – das Feld
   schrie, auch wenn niemand darin stand. Jetzt: eine ruhige Mulde, die
   erst beim Hineintippen aufleuchtet.
   ============================================================ */

.suche-wrap input,
.profil-eingabe,
.konto-feld input,
#c-held-suche {
  background: linear-gradient(180deg, rgba(6, 14, 28, .82), rgba(10, 22, 42, .78));
  border: 1px solid var(--kante);
  border-radius: var(--r-m);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .38),
              inset 0 1px 0 rgba(0, 0, 0, .25);
  transition: border-color var(--mittel) var(--weich),
              box-shadow var(--mittel) var(--weich);
}
.suche-wrap input:hover,
.profil-eingabe:hover,
.konto-feld input:hover,
#c-held-suche:hover { border-color: rgba(150, 185, 225, .26); }

.suche-wrap input:focus,
.profil-eingabe:focus,
.konto-feld input:focus,
#c-held-suche:focus {
  border-color: var(--kante-wach);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .34),
              0 0 0 3px rgba(10, 200, 185, .14),
              0 0 22px rgba(10, 200, 185, .10);
}
.suche-wrap input::placeholder,
#c-held-suche::placeholder { color: rgba(180, 198, 223, .55); }

/* Die Vorschlagsliste hängt am Feld – also schwebt sie auch so */
.vorschlaege {
  background: linear-gradient(180deg, rgba(16, 34, 64, .97), rgba(9, 20, 40, .97));
  border-color: var(--kante);
  box-shadow: var(--glanz), var(--hebung3);
  overflow: hidden;
  overflow-y: auto;
}
.vorschlag {
  border-radius: 0;
  transition: background var(--kurz) var(--weich), padding-left var(--kurz) var(--weich);
}
.vorschlag + .vorschlag { border-top: 1px solid rgba(150, 185, 225, .07); }
.vorschlag:hover, .vorschlag.aktiv {
  background: linear-gradient(90deg, rgba(240, 201, 108, .16), rgba(240, 201, 108, .05));
  padding-left: 16px;
}


/* ============================================================
   4. Kein Kasten um ein einzelnes Ding (Fabian, 22.08.)

   Eine Fähigkeit ist ein Bild. Ein Heiltrank ist ein Fläschchen.
   Beide standen bisher in einem großen leeren Rechteck, das nichts
   erklärte und nur Platz fraß. Sie stehen jetzt frei – was sie
   trägt, ist Licht, kein Rahmen.
   ============================================================ */

/* --- Die Fähigkeit: freistehend, mit einem Schein dahinter --- */
#spiel-faehigkeit .raetsel-box,
.raetsel-box:has(> .faehigkeit-icon) {
  background: radial-gradient(circle at 50% 48%,
              rgba(240, 201, 108, .17), rgba(10, 200, 185, .07) 44%, transparent 70%);
  border: none;
  box-shadow: none;
  padding: 10px 0 4px;
  max-width: 340px;
}
.faehigkeit-icon {
  width: 116px; height: 116px;
  border-radius: 24px;
  border: 2px solid rgba(240, 201, 108, .85);
  box-shadow:
    0 0 0 5px rgba(5, 11, 22, .5),
    0 12px 34px rgba(0, 0, 0, .55),
    0 0 38px rgba(240, 201, 108, .26);
}

/* --- Der Heiltrank: ein Fläschchen, kein Kasten --- */
#spiel-collector .c-chip.trank,
.c-chip.trank {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 8px 17px 8px 13px;
  border-radius: var(--r-rund);
  background: radial-gradient(circle at 26% 26%,
              rgba(74, 222, 128, .26), rgba(8, 30, 26, .78) 66%);
  border: 1px solid rgba(74, 222, 128, .40);
  color: #b9f5cf;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 3px 12px rgba(0, 0, 0, .34),
    0 0 18px rgba(74, 222, 128, .13);
}
#spiel-collector .c-chip.trank:hover:not(:disabled),
.c-chip.trank:hover:not(:disabled) {
  border-color: rgba(110, 240, 160, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 5px 16px rgba(0, 0, 0, .38),
    0 0 26px rgba(74, 222, 128, .28);
}

/* --- Die Runen im Raterätsel: runde Zeichen, keine Schachteln ---
   36 runde Runenbilder saßen in 36 eckigen Kästchen. Der Kasten war
   nur die Klickfläche – die kann auch rund sein. Was übrig bleibt,
   ist ein Feld aus Zeichen, und angefasst wird es durch Licht.
   (Beim Item-Rätsel bleibt die Kachel: Item-Bilder SIND eckig.) */
.c-raten-gitter:not(.c-item-wahl) .c-runen-kachel {
  background: none;
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 3px;
}
.c-raten-gitter:not(.c-item-wahl) .c-runen-kachel:hover:not(:disabled) {
  background: radial-gradient(circle, rgba(240, 201, 108, .20), transparent 72%);
  border-color: rgba(240, 201, 108, .5);
  transform: translateY(-2px) scale(1.08);
}
.c-raten-gitter:not(.c-item-wahl) .c-runen-kachel.daneben {
  opacity: .3;
  background: none;
  border-color: rgba(224, 122, 122, .55);
}
/* Ein paar Runenbilder kommen quadratisch aus der Quelle. Ohne Kachel
   fielen sie im Feld der runden Zeichen auf – also rund beschnitten. */
.c-raten-gitter:not(.c-item-wahl) .c-runen-bild { border-radius: 50%; }
/* Die Item-Kacheln behalten ihre Form, nur der Rand wird leise */
.c-item-wahl .c-runen-kachel {
  border-color: var(--kante);
  background: rgba(10, 20, 40, .45);
}

/* --- Der Begleiter: eine Zeile, kein Kasten --- */
.c-begleiter-karte {
  background: linear-gradient(90deg, rgba(53, 201, 110, .10), transparent 62%);
  border: none;
  border-left: 2px solid rgba(74, 222, 128, .45);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  box-shadow: none;
}

/* --- Einzelne Zahlen sind Pillen, keine Kästen --- */
.c-zl-zaehler {
  background: rgba(10, 20, 40, .55);
  box-shadow: var(--glanz), 0 2px 8px rgba(0, 0, 0, .28);
}

/* --- Das Konter-Duell: zwei Porträts, kein Rahmen darum ---
   Ein rundes Bild mit einem Namen darunter ist schon ein fertiges
   Ding. Der Kasten drumherum sagte nichts, was der Ring nicht
   besser sagt – also trägt jetzt der Ring den Zustand. */
/* Ohne den Rahmen zogen die beiden Porträts weit auseinander – jedes
   in der Mitte seiner halben Bildschirmbreite, das VS verloren
   dazwischen. Das Duell bekommt darum eine feste Breite. */
.k-duell {
  max-width: 420px;
  margin: 18px auto 8px;
  gap: 14px;
}
.k-kaempfer {
  background: none;
  border: none;
  border-radius: var(--r-m);
  padding: 10px 6px;
  box-shadow: none;
  transition: transform var(--kurz) var(--weich), background var(--mittel) var(--weich);
}
.k-bild img, .k-bild .mini-icon {
  width: 92px; height: 92px;
  border: 2px solid rgba(150, 185, 225, .28);
  box-shadow: 0 0 0 4px rgba(5, 11, 22, .5), 0 10px 26px rgba(0, 0, 0, .5);
  transition: border-color var(--mittel) var(--weich),
              box-shadow var(--mittel) var(--weich);
}
.k-kaempfer:not([disabled]):hover {
  transform: translateY(-3px);
  background: radial-gradient(circle at 50% 34%, rgba(240, 201, 108, .10), transparent 68%);
}
.k-kaempfer:not([disabled]):hover .k-bild img {
  border-color: var(--kante-hell);
  box-shadow: 0 0 0 4px rgba(5, 11, 22, .5), 0 10px 26px rgba(0, 0, 0, .5),
              0 0 26px rgba(240, 201, 108, .35);
}

/* Nach der Antwort: der Sieger bekommt Licht, der Verlierer geht aus. */
.k-kaempfer.sieger {
  background: radial-gradient(circle at 50% 34%, rgba(240, 201, 108, .16), transparent 70%);
}
.k-kaempfer.sieger .k-bild img {
  border-color: var(--gold-hell);
  box-shadow: 0 0 0 4px rgba(5, 11, 22, .5), 0 0 34px rgba(240, 201, 108, .5);
}
.k-kaempfer.gekontert { background: none; opacity: .55; }
.k-kaempfer.gekontert .k-bild img {
  border-color: rgba(180, 90, 105, .55);
  box-shadow: 0 0 0 4px rgba(5, 11, 22, .5);
}
.k-kaempfer.gewaehlt {
  box-shadow: none;
  background: radial-gradient(circle at 50% 34%, rgba(10, 200, 185, .13), transparent 70%);
}
.k-kaempfer.gewaehlt .k-bild img { border-color: var(--teal); }

/* Die Bonus-Knöpfe darunter bleiben Knöpfe – aber leise */
.k-bonus-knopf {
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--r-s);
  box-shadow: var(--glanz), var(--hebung1);
  transition: transform var(--kurz) var(--weich),
              border-color var(--kurz) var(--weich),
              box-shadow var(--kurz) var(--weich);
}
.k-bonus-knopf:not([disabled]):hover {
  transform: translateY(-2px);
  border-color: var(--kante-hell);
  box-shadow: var(--glanz), var(--hebung2);
}


/* ============================================================
   5. Die Modus-Karten
   Sechs fast gleiche Rechtecke untereinander. Das Medaillon soll
   die Karte tragen, nicht der Rand – also wird der Rand leise und
   das Medaillon bekommt seinen Sockel zurück.
   ============================================================ */

.modus-karte { padding: 15px 18px; }

.modus-icon {
  box-shadow:
    0 0 0 3px rgba(5, 11, 22, .92),
    0 0 0 4px rgba(200, 150, 60, .40),
    0 4px 14px rgba(0, 0, 0, .55),
    inset 0 2px 8px rgba(0, 0, 0, .5);
  transition: box-shadow var(--mittel) var(--weich), transform var(--mittel) var(--weich);
}
.modus-karte:hover:not(:disabled) .modus-icon {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 3px rgba(5, 11, 22, .92),
    0 0 0 4px rgba(240, 201, 108, .70),
    0 6px 18px rgba(0, 0, 0, .6),
    0 0 24px rgba(240, 201, 108, .28);
}

/* Das Hauptspiel bleibt der lauteste – aber ohne Neonrand */
.modus-karte.haupt-karte {
  border-width: 1px;
  border-color: rgba(240, 201, 108, .38);
  background:
    linear-gradient(135deg, rgba(240, 201, 108, .13), rgba(10, 20, 40, 0) 58%),
    linear-gradient(180deg, rgba(23, 45, 82, .88), rgba(12, 27, 52, .90));
  box-shadow: var(--glanz), var(--hebung2), 0 0 30px rgba(240, 201, 108, .13);
}
.modus-karte.haupt-karte:hover {
  border-color: var(--kante-hell);
  box-shadow: var(--glanz), var(--hebung3), 0 0 40px rgba(240, 201, 108, .22);
}

/* Der Punkt für eine offene Runde saß halb außerhalb der Ecke und
   sah aus wie verrutscht. Jetzt sitzt er auf der Karte – mit einem
   dunklen Ring, damit er aufgesetzt wirkt statt aufgeklebt. */
.punkt-offen {
  top: 11px; right: 13px;
  width: 9px; height: 9px;
  box-shadow: 0 0 0 3px rgba(8, 16, 30, .85), 0 0 12px rgba(240, 201, 108, .8);
}

/* Die NEU-Marke hing über der Oberkante und stieß bei „Konter“ mit
   dem Punkt zusammen. Sie zieht nach innen an den rechten Rand –
   dieselbe Stelle, an der „BALD“ schon immer stand. Es gibt sie in
   zwei Fassungen (.collector-neu und .karte-neu); beide gleich. */
.collector-neu, .karte-neu {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding: 3px 10px;
  border-radius: var(--r-rund);
  letter-spacing: 1.2px;
  box-shadow: var(--glanz), 0 2px 8px rgba(0, 0, 0, .4);
}
.modus-karte.haupt-karte .collector-neu { right: 18px; }
.badge-bald {
  border-color: var(--kante);
  background: rgba(10, 200, 185, .07);
  box-shadow: var(--glanz);
}

/* Der Trenner zwischen den Blöcken: dünner, ruhiger */
.menue-trenner::before, .menue-trenner::after {
  background: linear-gradient(90deg, transparent, rgba(150, 185, 225, .22), transparent);
}


/* ============================================================
   6. Die Kopfleiste im Endlos-Modus
   Sie war ein schwarzer Balken mit harter Unterkante, der quer
   durchs Bild schnitt. Jetzt ist sie eine milchige Scheibe, die
   über dem Bild schwebt: Gold, Stufe und die nächsten drei
   Schritte gehören zusammen, also sehen sie auch so aus.
   ============================================================ */

.c-kopfleiste {
  background: linear-gradient(180deg, rgba(9, 19, 36, .80), rgba(5, 11, 22, .86));
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--kante);
  border-radius: var(--r-m);
  box-shadow: var(--glanz), var(--hebung2);
  padding: 4px 10px 10px;
  margin-bottom: 12px;
}

/* Auf dem iPhone lag „Stufe 4“ im Vollbild-Kampf unter dem Menü- und
   dem Ton-Knopf – die beiden schweben fest oben rechts, die Zeile
   darunter wusste nichts davon. Jetzt hält sie Abstand.
   (Das war schon vorher so, fiel aber erst beim Hinsehen auf.) */
@media (max-width: 620px) {
  body.c-kampf-offen .c-goldleiste { padding-right: 104px; }
}

/* Die Marken der Zeitleiste: keine 2px-Ränder mehr */
.c-zl-marke { border-width: 1px; padding: 8px 11px 6px; }
.c-zl-marke.jetzt {
  border-color: var(--kante-wach);
  color: var(--teal);
  box-shadow: var(--glanz), var(--hebung1), 0 0 20px rgba(10, 200, 185, .22);
}
.c-zl-marke.kampf { border-color: rgba(224, 75, 58, .35); color: #e8909d; }
.c-zl-marke.kampf.jetzt {
  border-color: rgba(224, 75, 58, .65);
  box-shadow: var(--glanz), var(--hebung1), 0 0 20px rgba(224, 75, 58, .28);
}
.c-zl-pfeil { color: rgba(150, 185, 225, .28); }


/* ============================================================
   7. Der Merkzettel und die Erklärkästen
   Die standen als leuchtend-teal umrandete Blöcke über allem
   anderen und zogen mehr Blick auf sich als der Kampf darunter.
   Eine Erklärung ist eine Randnotiz – also sieht sie auch so aus.
   ============================================================ */

.c-merkzettel {
  background: linear-gradient(90deg, rgba(10, 200, 185, .09), rgba(10, 200, 185, 0) 70%);
  border: none;
  border-left: 2px solid rgba(10, 200, 185, .5);
  border-radius: 0;
  padding: 10px 0 10px 16px;
  box-shadow: none;
  /* Stand am linken Bildrand, während alles darunter mittig lag –
     zwei verschiedene Kanten auf einem Bildschirm. Jetzt dieselbe. */
  margin: 10px auto 14px;
}
.c-merk-titel { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.c-merk-text { color: var(--muted); }
.c-merk-text strong { color: var(--text); }

/* Der Hinweis auf Baron Nashor ist dieselbe Sorte Randnotiz – nur in
   seiner Farbe. Also auch dieselbe Form: ein Streifen, kein Kasten. */
.c-baron-warnung {
  background: linear-gradient(90deg, rgba(122, 70, 190, .20), rgba(122, 70, 190, 0) 72%);
  border: none;
  border-left: 2px solid rgba(160, 105, 230, .65);
  border-radius: 0;
  padding: 10px 0 10px 14px;
}

/* Das Heldenbuch ist ein Knopf – also eine Fläche mit warmem Anflug */
.c-buch-karte {
  background:
    linear-gradient(100deg, rgba(150, 105, 50, .20), rgba(10, 20, 40, 0) 62%),
    linear-gradient(180deg, rgba(23, 45, 82, .88), rgba(12, 27, 52, .90));
  border: 1px solid var(--kante);
  border-radius: var(--r-m);
  box-shadow: var(--glanz), var(--hebung1);
  transition: transform var(--kurz) var(--weich),
              border-color var(--kurz) var(--weich),
              box-shadow var(--kurz) var(--weich);
}
.c-buch-karte:hover {
  transform: translateY(-2px);
  border-color: var(--kante-hell);
  background:
    linear-gradient(100deg, rgba(170, 120, 58, .28), rgba(10, 20, 40, 0) 62%),
    linear-gradient(180deg, rgba(28, 53, 94, .90), rgba(14, 31, 58, .92));
  box-shadow: var(--glanz), var(--hebung2), 0 0 24px rgba(240, 201, 108, .12);
}
.c-buch-karte:active { transform: translateY(0); box-shadow: var(--glanz), 0 1px 2px rgba(0, 0, 0, .4); }


/* ============================================================
   8. Das Rateverlauf-Brett
   Die farbigen Felder waren flache Farbflächen. Ein Lichtsaum
   oben und ein Schatten darunter machen daraus Plättchen, die
   auf dem Tisch liegen.
   ============================================================ */

.zelle.ok {
  background: linear-gradient(180deg, #34b96b, #1c7a44);
  border-color: rgba(120, 240, 170, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--hebung1);
}
.zelle.teil {
  background: linear-gradient(180deg, #e5c04a, #b98f1c);
  border-color: rgba(255, 224, 130, .40);
  color: #221a05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), var(--hebung1);
}
.zelle.falsch {
  background: linear-gradient(180deg, #a13f4f, #6f2531);
  border-color: rgba(230, 140, 155, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--hebung1);
}
.reihe.kopf .zelle {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(200, 150, 60, .5);
  box-shadow: none;
  border-radius: 0;
}
.zelle.portrait { box-shadow: var(--glanz), var(--hebung2); }


/* ============================================================
   9. Overlays
   Ein Fenster über allem anderen darf am meisten Tiefe haben –
   das ist die einzige Stelle, an der Hebung 3 hingehört.
   ============================================================ */

.overlay {
  background: rgba(3, 7, 14, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.overlay-karte {
  background: linear-gradient(180deg, rgba(24, 46, 84, .97), rgba(11, 25, 48, .98));
  border: 1px solid rgba(240, 201, 108, .30);
  box-shadow: var(--glanz), var(--hebung3), 0 0 44px rgba(240, 201, 108, .07);
}
.overlay-zu {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  top: 12px; right: 12px;
  transition: background var(--kurz) var(--weich), color var(--kurz) var(--weich);
}
.overlay-zu:hover { background: rgba(150, 185, 225, .10); color: var(--gold-hell); }


/* ============================================================
   10. Die Matchup-Vorschau vor dem Kampf
   ============================================================ */

.c-matchup {
  background: var(--flaeche-tief);
  padding: 14px 18px;
}

/* Die Item-Karten vor dem Kampf standen unterschiedlich hoch, weil
   der eine Name zwei Zeilen braucht und der andere eine. Gleiche
   Höhe, etwas mehr Breite – dann bricht auch der grüne Hinweis
   nicht mehr in drei Fetzen um. */
.c-item-reihe { align-items: stretch; }
.c-item-karte { width: 122px; justify-content: flex-start; }
.c-item-karte small {
  margin-top: auto;
  padding: 3px 8px;
  border-radius: var(--r-rund);
  background: rgba(53, 201, 110, .11);
  line-height: 1.3;
}
.c-art-badge, .c-schwaeche-badge {
  box-shadow: var(--glanz), 0 2px 6px rgba(0, 0, 0, .3);
  padding: 3px 13px;
}


/* ============================================================
   11. Der Kampf
   Hier fasse ich am wenigsten an – der Bildschirm funktioniert.
   Nur die beiden Lebensanzeigen hatten einen 2px-Goldrand, obwohl
   BEIDE Seiten denselben trugen: ein Rand, der nichts unterschied.
   Wer wer ist, sagt der Ring am Porträt. Der Kasten wird leise.
   ============================================================ */

.pk-arena {
  background: linear-gradient(180deg, rgba(12, 26, 50, .74), rgba(5, 11, 22, .88));
  border: 1px solid var(--kante);
  border-radius: var(--r-m);
  box-shadow: var(--glanz), var(--hebung2);
}
.pk-info {
  background: linear-gradient(180deg, rgba(21, 42, 76, .78), rgba(11, 24, 46, .82));
  border: 1px solid var(--kante);
  border-radius: var(--r-s);
  box-shadow: var(--glanz), 0 2px 8px rgba(0, 0, 0, .3);
}

/* Die Pergamentzeile bleibt Pergament – sie liegt nur nicht mehr
   flach auf, sondern wirft einen Schatten auf die Arena. */
.pk-textbox {
  border: 1px solid rgba(122, 88, 34, .95);
  border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px rgba(200, 150, 60, .5),
              inset 0 1px 0 rgba(255, 255, 255, .5),
              0 6px 22px rgba(0, 0, 0, .5);
}

/* Die Leiste mit der Zugreihenfolge ist eine Anzeige, kein Knopf */
.pk-tempo {
  background: linear-gradient(180deg, rgba(15, 32, 60, .78), rgba(8, 18, 36, .84));
  border: 1px solid var(--kante);
  border-radius: var(--r-s);
  box-shadow: var(--glanz), 0 2px 10px rgba(0, 0, 0, .3);
}


/* ============================================================
   12. Ruhe für alle, die keine Bewegung wollen
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .modus-karte, .raetsel-box, .vorschlaege, .weiter-karte, .c-matchup,
  .c-item-karte, .c-streiter-karte, .c-zl-marke, .c-ware, .c-chip,
  .taste-knopf, .zelle, .teilen-knopf, .senden, .c-kampf-knopf,
  .kopf-knopf, .musik-knopf, .c-menue-knopf, .modus-nav button,
  .vorschlag, .modus-icon {
    transition-duration: .01ms;
  }
  .modus-karte:hover:not(:disabled),
  .c-item-karte:hover:not(:disabled),
  .c-streiter-karte:hover:not(:disabled),
  .c-zl-marke:hover:not(:disabled),
  .c-ware:hover:not(:disabled),
  .c-chip:hover:not(:disabled),
  .weiter-karte:hover,
  .taste-knopf:hover:not(:disabled),
  .teilen-knopf:hover:not(:disabled),
  .senden:hover:not(:disabled) { transform: none; }
}