/* ══════════════════════════════════════════════════════════════════
   fenster.css — Was über dem Tisch liegt: Schleier, Handaustausch,
   Querformat-Hinweis, Regelübersicht, Logbuch, Zurufe, Geheimnisse.
   Wird auf allen Seiten geladen — der Schleier trägt auch Beutel,
   Abspann und Optionen.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Überlagerungen ───────────────────────────────────────────── */
.schleier{
  position:absolute;inset:0;z-index:210;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:rgba(13,10,7,.92);border-radius:16px;padding:12px;
}
.schleier.an{display:flex;}
.schleier h2{font-family:var(--display);font-size:32px;padding-top:.2em;
  color:var(--parch-hi);margin:0;}
.schleier p{margin:0;font-size:14px;color:var(--tan);text-align:center;}
/* ─── Knöpfe (412, Brawl-Stars-Stil statt Banderole) ─────────────────
   Dicke, runde Kissen: Tuschekontur, heller Rand oben, dunkle Lippe
   unten, beim Tippen sinkt der Knopf ein und federt zurück. Rot ist die
   Hauptaktion, Pergament die Nebenaktion; im Hauptmenü dieselben Kissen
   mit Messingring (css/startseite.css). Mindestens 48 Punkte hoch,
   damit der Finger trifft. */
.knopf{
  min-height:48px;padding:.22em 26px 0;display:inline-grid;place-items:center;
  font-family:var(--display);font-size:19px;letter-spacing:.02em;line-height:1.1;
  background:linear-gradient(180deg,#fffaf0 0%,var(--parch-hi) 22%,var(--parch) 68%,var(--parch-sh) 100%);
  color:var(--ink);border:3px solid var(--ink);border-radius:14px;
  cursor:pointer;text-decoration:none;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.75),inset 0 -5px 0 rgba(130,90,40,.35),
             0 4px 0 var(--ink),0 9px 14px -6px rgba(0,0,0,.8);
  transition:transform .12s cubic-bezier(.3,1.6,.5,1),filter .15s ease,box-shadow .12s ease;
}
.knopf:hover:not([disabled]){filter:brightness(1.06);}
.knopf:active:not([disabled]){transform:translateY(3px) scale(.94);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(130,90,40,.35),0 1px 0 var(--ink),0 4px 8px -4px rgba(0,0,0,.8);}
.knopf[disabled]{filter:grayscale(.75) brightness(.85);cursor:default;}
.knopf.rot{
  background:linear-gradient(180deg,#ff7a63 0%,var(--red-hi) 26%,var(--red) 70%,var(--red-dk) 100%);
  color:#fff;text-shadow:0 2px 0 rgba(55,6,4,.9),0 0 2px rgba(55,6,4,.9);
  box-shadow:inset 0 3px 0 rgba(255,200,180,.55),inset 0 -6px 0 rgba(70,8,6,.45),
             0 5px 0 var(--ink),0 10px 16px -6px rgba(0,0,0,.85);
}
.knopf.rot:active:not([disabled]){
  box-shadow:inset 0 3px 0 rgba(255,200,180,.45),inset 0 -3px 0 rgba(70,8,6,.45),0 1px 0 var(--ink),0 4px 8px -4px rgba(0,0,0,.8);}
.knopf.gross{min-height:58px;font-size:23px;padding:.22em 34px 0;border-radius:16px;}
.knopf.klein{min-height:40px;font-size:16px;padding:.2em 18px 0;border-radius:12px;}
@media (prefers-reduced-motion:reduce){ .knopf{transition:none;} }

/* Handaustausch — hier wird gelesen und entschieden, nicht gespielt:
   die Karten dürfen den ganzen Bildschirm ausnutzen. */
.austausch{justify-content:space-between;gap:8px;}
.austausch .reihe-karten{display:flex;gap:16px;justify-content:center;
  align-items:center;flex-wrap:wrap;}
.austausch .karte{position:relative;left:auto;top:auto;
  width:178px;height:249px;font-size:15.3px;
  transition:transform .18s,filter .18s;}
.austausch .karte.zurueck{filter:brightness(.45) saturate(.35);transform:scale(.92);}
/* Telefon (423, Max): die Überschrift tritt zurück, die Karten wachsen
   auf das, was die Höhe hergibt. Bühne 490 hoch: 36 Kopf, 300 Karten,
   58 Knopf, Rest Luft. */
@media (max-height:560px){
  .austausch{gap:6px;}
  .austausch h2{font-size:22px;padding-top:.15em;}
  .austausch p{font-size:13px;}
  .austausch .karte{width:212px;height:297px;font-size:18.3px;}
}
.austausch .karte.zurueck::after{
  content:"↻";position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  font-family:var(--display);font-size:56px;color:var(--parch-hi);
  text-shadow:0 3px 0 var(--ink);
}

/* ─── Karte groß ansehen im Duell (js/spielerei.js → lupeZeigen) ──
   Karte links, Kartenblatt rechts (css/ui.css → .kartenblatt). Auf dem
   Telefon wächst die Karte auf die Höhe der Bühne (423). */
#lupeInhalt{display:flex;align-items:center;gap:26px;}
#lupe .lupenkarte{position:relative;left:auto;top:auto;width:224px;height:313px;font-size:19px;cursor:default;}
@media (max-height:560px){
  #lupeInhalt{gap:30px;}
  #lupe .lupenkarte{width:272px;height:380px;font-size:23.3px;}
}

/* ─── Querformat erzwingen ─────────────────────────────────────── */
.drehen{
  position:fixed;inset:0;z-index:400;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:#0d0a07;text-align:center;padding:30px;
}
.drehen svg{width:74px;height:74px;color:var(--gold);
  animation:kippen 2.2s ease-in-out infinite;}
@keyframes kippen{0%,42%{transform:rotate(0)}58%,100%{transform:rotate(-90deg)}}
.drehen p{font-family:var(--display);font-size:24px;padding-top:.25em;
  color:var(--parch-hi);margin:0;}
.drehen small{color:var(--tan);font-size:13px;}
@media (orientation:portrait){
  .drehen{display:flex;}
  .buehne{display:none;}
}

/* ─── Regelübersicht ───────────────────────────────────────────── */
/* Fragezeichen und Logbuch stehen unten rechts, nicht oben.

   Oben gehört dem, was man im Zug wirklich braucht: Einstellungen und
   der Ton-Schalter. Nachschlagen und Nachlesen sind ruhige Handlungen —
   und die untere rechte Ecke ist am Handy die einzige, die der Daumen
   ohne Umgreifen erreicht. Neben dem Fächer, nicht darüber: bei acht
   Karten reicht die äußerste bis x≈778, die Knöpfe beginnen bei 896. */
.zahnrad.hilfe{top:auto;bottom:12px;right:12px;}
.regelblatt{
  display:flex;gap:26px;max-width:860px;max-height:330px;overflow-y:auto;
  padding:16px 22px;border-radius:10px;text-align:left;
  background:linear-gradient(var(--wood),var(--wood-dk));
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--tan);
}
.regelspalte{flex:1;min-width:0;}
.regelblatt h3{font-family:var(--display);font-size:17px;padding-top:.25em;
  color:var(--gold-hi);margin:12px 0 4px;}
.regelspalte h3:first-child{margin-top:0;}
.regelblatt p{margin:0;font-size:13px;line-height:1.5;color:var(--parch);text-align:left;}
.regelblatt b{color:var(--gold-hi);}
.regelblatt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  font-size:13px;line-height:1.45;}
.regelblatt dt{color:var(--gold-hi);font-weight:700;white-space:nowrap;}
.regelblatt dd{margin:0;color:var(--parch);}

/* ─── Logbuch ──────────────────────────────────────────────────── */
.zahnrad.logbuch{top:auto;bottom:12px;right:64px;}
/* Der Ton-Knopf schließt die Reihe nach unten ab. Stumm geschaltet wird
   er sichtbar gedämpft und zeigt den durchgestrichenen Lautsprecher —
   der Zustand muss aus zwei Metern Abstand ablesbar sein, sonst sucht
   man beim nächsten Start die verschwundene Musik in den Einstellungen. */
/* Oben bleiben nur zwei: Einstellungen (10) und Ton darunter. */
.zahnrad.ton{top:58px;}
.zahnrad.ton .strich{opacity:0;transition:opacity .14s;}
.zahnrad.ton .wellen{transition:opacity .14s;}
.zahnrad.ton.stumm{background:linear-gradient(#4a4136,#2a251d);color:#9c9086;}
.zahnrad.ton.stumm .wellen{opacity:0;}
.zahnrad.ton.stumm .strich{opacity:1;}
.logblatt{
  width:min(560px,86vw);max-height:320px;overflow-y:auto;
  padding:14px 20px;border-radius:10px;text-align:left;
  background:linear-gradient(var(--wood),var(--wood-dk));
  border:3px solid var(--ink);box-shadow:0 0 0 2px var(--tan);
}
.logblatt section{margin-bottom:12px;}
.logblatt section:last-child{margin-bottom:0;}
.logblatt h3{font-family:var(--display);font-size:16px;padding-top:.25em;
  color:var(--gold-hi);margin:0 0 4px;position:sticky;top:-14px;
  background:linear-gradient(var(--wood),var(--wood));padding-bottom:3px;}
.logblatt p{margin:0 0 2px;font-size:13px;line-height:1.45;color:var(--parch);
  text-align:left;}
.logblatt .leer{color:var(--tan);text-align:center;}

/* Zwei Spalten: links das Zeichen, rechts der Satz. Ein Raster statt
   eines vorangestellten Zeichens im Text — sonst rückten die Sätze je
   nach Zeichenbreite unterschiedlich weit ein, und die Spalte, an der
   das Auge entlangläuft, wäre keine. */
.logblatt .logzeile{
  display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:baseline;
  padding:1px 0;
}
.logblatt .logzeile i{
  font-style:normal;text-align:center;opacity:.75;font-size:12px;
  color:var(--tan);
}
/* Was zählt, wird deutlicher: Kampf, Verluste und das Ende. Der Rest
   bleibt zurückhaltend, sonst leuchtet alles gleich laut. */
.logblatt .angriff i{color:var(--red-hi);opacity:1;}
.logblatt .sterben i,.logblatt .zerstoert i{color:var(--red-hi);opacity:1;}
.logblatt .heldSchaden i{color:var(--red-hi);opacity:1;}
.logblatt .heilen i,.logblatt .heldHeilung i{color:#7fd6a0;opacity:1;}
.logblatt .zauber i,.logblatt .geheimnisLoest i{color:var(--gold-hi);opacity:1;}
.logblatt .spielEnde i{color:var(--gold-hi);opacity:1;}
.logblatt .warnung i{color:#e88;opacity:1;}
/* Der Zugwechsel trennt sichtbar, statt sich einzureihen. */
.logblatt .zugStart{
  margin:7px 0 4px;padding-top:6px;
  border-top:1px solid rgba(238,220,171,.22);
}
.logblatt .zugStart span{color:var(--gold-hi);font-family:var(--display);
  font-size:12.5px;letter-spacing:.02em;}
.logblatt .spielEnde span{color:var(--gold-hi);}

/* ─── Zurufe (Emotes) ──────────────────────────────────────────────
   Ein Klick auf den eigenen Helden öffnet den Kranz. Er sitzt über dem
   Kopf, weil dort auf allen Geräten Platz ist — neben dem Helden läge
   er unter der Hand. */
#heldIch{cursor:pointer;}
.emotekranz{
  position:absolute;left:50%;bottom:196px;transform:translateX(-50%) scale(.85);
  z-index:120;display:none;gap:2px 14px;
  /* Zwei Spalten, nicht drei: ein Band braucht Breite, sonst bricht
     „Du wirst es bereuen!“ in drei Zeilen und quillt über die Rolle. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:484px;box-sizing:border-box;padding:12px 16px;
  /* Dahinter eine dunkle Tafel wie beim Tooltip der Heldenfähigkeit
     (css/zauber.css → .krafttipp), sonst stehen die Rollen auf dem
     bunten Tisch (Wunsch Max, 410). */
  background:linear-gradient(rgba(36,26,16,.96),rgba(19,13,8,.98));
  border:1px solid rgba(224,179,82,.35);border-radius:var(--rund-3,14px);
  box-shadow:0 10px 24px -8px #000;
  opacity:0;transition:opacity .14s,transform .14s;
}
.emotekranz.an{display:grid;opacity:1;transform:translateX(-50%) scale(1);}
/* Rote Knöpfe wie überall außerhalb des Hauptmenüs (412, Wunsch Max);
   klein, eine Zeile, zwei Spalten. */
.emotekranz{gap:10px 12px;}
.knopf.emote{width:100%;min-height:42px;font-size:16px;padding:.2em 10px 0;}
.knopf.emote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Sprechblase über dem Kopf */
/* Die Blase sitzt auf der **Bühne** und wird von js/tisch.js an den
   Helden gesetzt — nicht mehr im Helden, dessen Schicht sie gefangen
   hielt. Deshalb keine Verankerung an `100%` mehr, sondern eine feste
   Lage plus Zentrierung um den eigenen Mittelpunkt. */
.blase{
  /* **Die Sprechblase von Max** (seit 372, assets/oberflaeche/sprechblase.svg —
     nachgezeichnet aus seiner Grafik, darum in jeder Größe scharf, mit
     Tintenrand). Der Zipfel zeigt auf den Kopf: die Lage
     (js/spielerei.js) ist die Spitze des Zipfels, nicht die Mitte. Beim
     Gegner steht die Blase **unter** seinem Kopf und ist um 180° gedreht
     — der Zipfel zeigt dann nach oben rechts. */
  position:absolute;isolation:isolate;translate:-22.5% -96%;transform-origin:22.5% 96%;
  z-index:130;white-space:nowrap;pointer-events:none;box-sizing:border-box;
  /* Die Zeichnung ist 316 x 136 (Verhältnis 2,3): unter 58 px Höhe
     wird die Blase zum Strich, weil sie gestreckt wird. */
  min-width:150px;min-height:58px;padding:0 28px;text-align:center;
  font-family:var(--display);font-size:17px;line-height:1.1;color:var(--ink);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.45));
  animation:blaseAn .22s cubic-bezier(.2,.9,.3,1.5),blaseWeg .35s 2.25s forwards;
  /* **Der Text sitzt im Körper, nicht in der ganzen Blase** (378).
     Die Zeichnung ist 316 × 136 und wird gestreckt (`preserveAspectRatio
     none`): der Blasenkörper endet bei y = 101, darunter hängt nur noch
     der Zipfel. Zwei Rasterzeilen im selben Verhältnis (101 : 35) legen
     den Text genau auf die Mitte des Körpers — vorher zog ihn das feste
     Fußpolster sichtbar nach oben, auf beiden Seiten. `fr` hält das
     Verhältnis, egal wie hoch die Blase gerade ist. */
  display:grid;grid-template-rows:101fr 35fr;align-items:center;
}
/* Der Satz (`.blasentext`, js/spielerei.js) liegt in der Körperzeile;
   beim Gegner hängt der Zipfel oben, also tauschen die Zeilen. */
.blase .blasentext{grid-row:1;min-height:0;}
.blase.gegner{grid-template-rows:35fr 101fr;}
.blase.gegner .blasentext{grid-row:2;}
.blase::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url(../assets/oberflaeche/sprechblase.svg) center / 100% 100% no-repeat;}
.blase.gegner{translate:-77.5% -4%;transform-origin:77.5% 4%;}
.blase.gegner::before{transform:rotate(180deg);}
@keyframes blaseAn{from{opacity:0;scale:.55}}
@keyframes blaseWeg{to{opacity:0;scale:.85}}

/* ─── Geheimnisse am Helden ────────────────────────────────────────
   Eigene zeigen ihr Motiv, gegnerische bleiben verdeckt — sonst wäre
   der Reiz dahin. */
/* **Ein Bogen um das Bildnis, keine Reihe daneben.**

   Die Siegel standen über dem Helden nebeneinander und wuchsen mit jedem
   weiteren ins Spielfeld hinein. Jetzt liegen sie auf einem Kreis um
   sein Bildnis — nach **außen** gewandt, dorthin, wo Platz ist: beim
   eigenen Helden nach unten, beim Gegner nach oben.

   Der Behälter ist ein Punkt in der Mitte des Bildnisses; jedes Siegel
   dreht sich von dort nach außen (die Winkel setzt js/tisch.js). */
/* **Keine Drehung am Behälter.** Er stand auf `rotate(180deg)`, damit
   „0 Grad" nach unten zeigt — das drehte aber die Siegel gleich mit, und
   über meinem Bildnis standen sie auf dem Kopf.

   Die Richtung rechnet jetzt js/tisch.js aus; der Behälter ist nur noch
   ein Punkt in der Mitte des Bildnisses. */
/* Der Behälter sitzt auf der **Bühne** (siehe js/tisch.js) und wird an
   die Mitte des Bildnisses gesetzt. Nur so liegt er über Kartenreihe und
   Bildnis — im Helden war er in dessen Schicht gefangen. */
.buehne > .geheimnisse{
  position:absolute;width:0;height:0;z-index:70;pointer-events:none;
}
.geheimnisse .siegel{
  position:absolute;left:-14px;top:-14px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3);
}
.siegel{
  width:28px;height:28px;border-radius:50%;overflow:hidden;
  border:2.5px solid var(--ink);display:grid;place-items:center;
  background:linear-gradient(#b0703c,#7a4520);
  box-shadow:0 0 0 1.5px var(--gold),0 2px 4px -1px #000;
  font-family:var(--display);font-size:15px;padding-top:.15em;color:var(--parch-hi);
  animation:siegelAn .25s cubic-bezier(.2,.9,.3,1.5);
}
/* Die eigenen Siegel lassen sich anklicken, um den Wortlaut nachzulesen —
   das soll man ihnen ansehen. Fremde bleiben stumm. */
.siegel.offen{background:#fff;cursor:pointer;
  transition:transform .12s ease-out,box-shadow .12s ease-out;}
.siegel.offen:hover,.siegel.offen:focus-visible{
  box-shadow:0 0 0 2.5px var(--gold-hi),0 3px 6px -1px #000;
  transform:scale(1.12);outline:none;}
/* Das Motiv steht mittig und klein auf der Karte — hier wird
   hineingezoomt, damit es auf 28 Punkten noch erkennbar ist. */
.siegel img{width:100%;height:100%;object-fit:cover;object-position:50% 47%;
  transform:scale(2.5);}
@keyframes siegelAn{from{transform:scale(.4);opacity:0}}

/* ─── Aufgabe erfüllt (Endbildschirm) ─────────────────────────────────
   Eine Zeile je erfüllter Aufgabe: das Siegel, der Titel, der Diener.
   Sie steigen nacheinander auf, nachdem Sieg oder Niederlage stehen —
   die Meldung soll das Ergebnis ergänzen, nicht übertönen. Die Belohnung
   bleibt versiegelt; sie bricht im Kompendium auf. */
.aufgabenfrei{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 14px;}
.aufgabeerfuellt{
  display:flex;align-items:center;gap:12px;padding:8px 16px 8px 10px;
  background:rgba(20,14,8,.55);border:1px solid rgba(232,181,58,.45);border-radius:10px;
  color:var(--parch-hi);font-size:15px;
  opacity:0;transform:translateY(10px);
  animation:aufgabeSteigt .5s cubic-bezier(.2,.8,.2,1.2) var(--vz,.35s) forwards;
}
.aufgabeerfuellt small{display:block;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-hi);}
.aufgabeerfuellt b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--gold-hi);}
.aufgabeerfuellt .siegelmedaillon{animation:siegelGlimmt 1.8s ease-in-out infinite;}
.aufgabenhinweis{margin:2px 0 0;font-size:12.5px;color:var(--tan);
  opacity:0;animation:aufgabeSteigt .5s ease-out 1s forwards;}
@keyframes aufgabeSteigt{to{opacity:1;transform:none;}}
@keyframes siegelGlimmt{
  0%,100%{box-shadow:inset 0 0 0 3px rgba(232,181,58,.55),0 0 0 rgba(255,200,90,0);}
  50%    {box-shadow:inset 0 0 0 3px rgba(255,214,120,.9),0 0 16px rgba(255,200,90,.75);}
}
@media (prefers-reduced-motion:reduce){
  .aufgabeerfuellt,.aufgabenhinweis{animation:none;opacity:1;transform:none;}
  .aufgabeerfuellt .siegelmedaillon{animation:none;}
}

/* ─── Fenster im Duell und auf der Karte (Einstellungen, Logbuch, Regeln)
   Seit 416 dasselbe Kleid wie die Fenster im Hauptmenü (css/tafel.css,
   SPIEL.md → 5.2): dunkles Holz mit Messingrand, Titel mittig in Gold
   mit Haarlinie darunter, das rote Kreuz hängt oben rechts aus der Ecke.
   Geschlossen wird mit dem Kreuz, Escape oder einem Tipp daneben. */
.schleier.schlicht{background:rgba(8,6,4,.72);}
.schlichttafel{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  min-width:min(440px,90%);max-width:900px;box-sizing:border-box;padding:16px 28px 24px;border-radius:18px;
  color:#f3e7c8;background:radial-gradient(120% 60% at 50% 0%,#3b2a18 0%,#22170d 55%,#170f08 100%);
  border:3px solid #0d0905;
  box-shadow:inset 0 0 0 2px rgba(201,152,74,.55),inset 0 0 40px rgba(0,0,0,.55),
    0 0 0 3px #6d4f27,0 34px 70px -18px rgba(0,0,0,.95);
  animation:schlichtAuf .26s cubic-bezier(.2,.8,.2,1);}
@keyframes schlichtAuf{from{opacity:0;transform:translateY(14px) scale(.96);}}
@media (prefers-reduced-motion:reduce){ .schlichttafel{animation:none;} }
.schlichttafel > h2{position:relative;align-self:stretch;margin:0 0 2px;padding:.14em 40px 10px;text-align:center;
  font-family:var(--display);font-weight:400;font-size:26px;line-height:1.05;letter-spacing:.02em;color:#ffe08a;
  background:linear-gradient(180deg,#fff4c4 0%,#ffd766 45%,#e7a42c 75%,#b9761c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #2a1608) drop-shadow(0 -1px 0 #2a1608) drop-shadow(1px 0 0 #2a1608) drop-shadow(-1px 0 0 #2a1608);}
.schlichttafel > h2::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(232,190,110,0),rgba(232,190,110,.55) 20%,rgba(232,190,110,.55) 80%,rgba(232,190,110,0));}
/* Schließen: derselbe runde rote Knopf wie im Menü (knopf-zu.webp). */
.bandzu.duellzu{position:absolute;top:-16px;right:-16px;z-index:3;padding:0;border:0;background:none;cursor:pointer;
  transition:transform .12s cubic-bezier(.3,1.6,.5,1);}
.bandzu.duellzu img{height:46px;width:auto;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));}
.bandzu.duellzu:hover{transform:scale(1.08);}
.bandzu.duellzu:active{transform:scale(.9);}
/* Die Inhalte verlieren ihre eigenen Kästen: die Tafel ist der Kasten. */
.schlicht .optionsfeld,.schlicht .regelblatt,.schlicht .logblatt{
  background:none;border:0;box-shadow:none;border-radius:0;padding:0;}
.schlicht .optionsfeld{min-width:300px;align-self:stretch;}
.schlicht .regelblatt{max-height:340px;padding-right:6px;}
.schlicht .regelblatt p,.schlicht .regelblatt dd,.schlicht .logblatt p,.schlicht .schalter,.schlicht .regler{color:#f3e7c8;}
.schlicht .logblatt{max-height:330px;}
.schlicht .logblatt h3{top:0;background:rgba(24,17,10,.98);}
.schlichtknoepfe{display:flex;flex-direction:column;align-items:center;gap:10px;}
.schlichtknoepfe .knopf{min-width:240px;white-space:nowrap;}
.schlichtknoepfe .knopf[hidden]{display:none;}

/* ─── Fehler melden (381) ───────────────────────────────────────────
   Unter jeder Erklärung hinter einem „?“ klein und mittig die Zeile
   „Fehler gefunden? Hier melden“ (js/melden.js hängt sie an). Das
   Fenster dazu ist eine schlichte Tafel wie die Spielregeln: Textfeld,
   Band „Senden“, danach der Dank. */
.meldenfuss{margin:14px 0 0 !important;padding:0;text-align:center;clear:both;}
.meldenweg{padding:2px 6px;border:0;background:none;cursor:pointer;font:inherit;font-size:11.5px;line-height:1.3;
  color:rgba(243,231,200,.55);text-decoration:underline;text-underline-offset:2px;}
.meldenweg:hover,.meldenweg:focus-visible{color:var(--gold-hi,#f7d878);}
.meldenschleier{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;
  background:rgba(8,6,4,.62);animation:schlichtAuf .2s ease-out;}
.meldentafel{width:min(460px,calc(100vw - 80px));box-sizing:border-box;}
.meldentafel h2{margin:0;font-family:var(--display);}
.meldenort{margin:0;font-size:13px;color:var(--tan,#cbb48a);text-align:center;}
.meldenort b{color:#f3e7c8;font-weight:600;}
.meldentext{width:100%;box-sizing:border-box;min-height:110px;resize:vertical;padding:10px 12px;border-radius:6px;
  font:inherit;font-size:15px;line-height:1.4;color:#f3e7c8;background:rgba(0,0,0,.35);border:1px solid rgba(238,220,171,.3);}
.meldentext:focus{outline:2px solid var(--gold-hi,#f7d878);outline-offset:1px;}
.meldenfehler{font-size:12px;color:#e98b7c;font-style:normal;min-height:0;}
.knopf.meldensenden{min-width:min(100%,220px);}
.meldensenden[disabled]{opacity:.55;cursor:default;}
.meldendank{margin:0;font-size:16px;color:#f3e7c8;text-align:center;}
@media (max-width:560px){ .meldentafel .bandzu.duellzu{right:6px;top:6px;} }