/* ══════════════════════════════════════════════════════════════════
   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;}
.knopf{
  min-height:48px;padding:0 30px;display:inline-grid;place-items:center;
  font-family:var(--display);font-size:19px;padding-top:.25em;
  background:linear-gradient(var(--parch-hi),var(--parch) 55%,var(--parch-sh));
  color:var(--ink);border:3px solid var(--ink);border-radius:6px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 4px 0 var(--ink),0 8px 16px -6px #000;
}
.knopf:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink);}
.knopf.rot{background:linear-gradient(var(--red-hi),var(--red) 55%,var(--red-dk));
  color:var(--parch-hi);}

/* 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);}
.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);
}

/* ─── 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:452px;opacity:0;transition:opacity .14s,transform .14s;
}
.emotekranz.an{display:grid;opacity:1;transform:translateX(-50%) scale(1);}
/* Seit 378 **Banderolen**, keine Knöpfe (Wunsch Max): dieselbe gemalte
   Rolle wie im Menü, nur klein — die Grundregeln stehen in
   css/ui.css → Ein Band als Knopf, hier nur Größe und Schrift.
   Ausnahme zur Regel „ein Band je Bildschirm“ (dokumente/DESIGN.md → 4):
   der Kranz ist **eine** Handlung in sechs Worten, kein Knopfgarten. */
.emote.banderole{
  --bandhoehe:44px;
  width:100%;font-size:16px;cursor:pointer;
}
/* Eine Zeile, immer: der Zuruf ist kurz, und ein Umbruch säße neben
   dem Körper des Bandes. */
.emote.banderole span{
  padding:0 calc(var(--bandende) * -0.3 + 6px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.emote.banderole:hover{filter:brightness(1.07);}
.emote.banderole:active{transform:translateY(2px);}

/* 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/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/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;}
}

/* ─── Questtafel der Live-Probe (Adminfeld) ───────────────────────────
   Klein, oben links, als Pergamentstreifen: welche Aufgabe geprüft wird
   und wie weit sie ist. Nur in „Aufgabe live testen“. */
.questhud{position:absolute;left:8px;top:8px;z-index:150;width:208px;padding:7px 10px 8px;
  border-radius:4px;pointer-events:none;color:#3b2612;font-size:10.5px;line-height:1.3;
  background:linear-gradient(175deg,#f4e6c3,#e2c890);
  box-shadow:0 6px 16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(90,60,25,.4),inset 0 0 18px rgba(120,80,30,.3);}
.questhud small{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a5a2a;}
.questhud b{display:block;font-family:var(--display);font-weight:400;font-size:14px;color:#5a1f0c;}
.questhud span{display:block;margin:1px 0 5px;}
.questhud .hudbalken{display:block;position:relative;height:6px;border-radius:4px;overflow:hidden;
  background:rgba(80,50,20,.22);border:1px solid #6b4a22;}
.questhud .hudbalken i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#f3cf6a,#b7832a);
  transition:width .5s cubic-bezier(.2,.8,.2,1);}
.questhud em{display:block;margin-top:3px;font-style:normal;font-weight:700;text-align:right;}
.questhud.fertig .hudbalken i{background:linear-gradient(#9fd46a,#3f6f1f);}
.questhud.fertig em{color:#2f6b1f;}
.questhud.fertig{animation:hudFertig .7s ease-out;}
@keyframes hudFertig{0%{transform:scale(1);}35%{transform:scale(1.08);box-shadow:0 0 22px rgba(160,230,100,.8);}100%{transform:scale(1);}}

/* ─── Auto-Kampf: zuschauen ───────────────────────────────────────────
   Die KI spielt beide Seiten; Hand und Brett nehmen keine Eingaben an. */
.buehne.zuschauen .hand,.buehne.zuschauen .reihe,.buehne.zuschauen .kraft{pointer-events:none;}

/* ─── Klangpult (Adminfeld → Klangprüfstand) ──────────────────────────
   Rechts am Fenster, außerhalb der Bühne: Reiter, Suche, eine lange
   Liste zum Anklicken, unten die Mitschrift dessen, was erklang. Lässt
   sich einklappen, damit das Brett frei wird. */
.klangpult{position:fixed;top:0;right:0;bottom:0;z-index:600;width:300px;display:flex;flex-direction:column;
  background:rgba(18,13,9,.94);border-left:1px solid rgba(232,190,110,.3);color:var(--parch,#e9d6ac);
  font:500 13px/1.35 var(--ui,system-ui),sans-serif;transition:transform .25s ease;box-shadow:-10px 0 30px rgba(0,0,0,.5);}
.klangpult.zu{transform:translateX(262px);}
.klangpult header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 4px;}
.klangpult header b{font-family:var(--display,serif);font-weight:400;font-size:20px;color:var(--gold-hi,#f6d48a);}
.klangpult .pultzu{background:none;border:1px solid rgba(232,190,110,.4);color:inherit;border-radius:6px;cursor:pointer;padding:2px 8px;}
.klangpult.zu .pultzu{transform:scaleX(-1);}
.pulthinweis{margin:0 12px 8px;font-size:11.5px;color:#a89878;}
.klangpult nav{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 8px;}
.klangpult nav button{flex:1 1 auto;font:inherit;font-size:11.5px;padding:4px 6px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(232,190,110,.3);background:rgba(255,255,255,.04);color:inherit;}
.klangpult nav button.an{background:rgba(232,181,58,.25);border-color:var(--gold-hi,#f6d48a);color:var(--gold-hi,#f6d48a);}
.klangpult input{margin:0 10px 8px;padding:6px 9px;border-radius:6px;font:inherit;
  border:1px solid rgba(232,190,110,.3);background:rgba(0,0,0,.35);color:inherit;}
.pultliste{flex:1;overflow:auto;padding:0 6px;}
.pultliste button{display:block;width:100%;text-align:left;font:inherit;padding:6px 8px;margin:0 0 2px;border-radius:6px;
  cursor:pointer;border:1px solid transparent;background:none;color:inherit;}
.pultliste button:hover{background:rgba(255,255,255,.06);}
.pultliste button.an{border-color:var(--gold-hi,#f6d48a);background:rgba(232,181,58,.12);}
.pultliste small{display:block;font-size:10.5px;color:#9a8a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pultmitschrift{border-top:1px solid rgba(232,190,110,.25);padding:8px 10px 10px;max-height:34%;display:flex;flex-direction:column;}
.pultmitschrift small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#a89878;}
.pultmitschrift small span{text-transform:none;letter-spacing:0;color:var(--parch-hi,#fbeed0);}
.pultmitschrift ol{list-style:none;margin:6px 0 0;padding:0;overflow:auto;font-size:11.5px;}
.pultmitschrift li{display:grid;grid-template-columns:58px 1fr;gap:0 8px;padding:3px 0;border-bottom:1px dotted rgba(232,190,110,.15);}
.pultmitschrift li b{grid-row:span 2;color:#9fdc7a;font-variant-numeric:tabular-nums;font-weight:600;}
.pultmitschrift li em{font-style:normal;font-size:10.5px;color:#9a8a6a;word-break:break-all;}

/* Endbildschirm im Feldzug (seit 366): eine Banderole statt Knöpfen,
   „Zur Karte“ nach einer Niederlage klein darunter. */
#ende > div:has(.endeband){flex-direction:column;align-items:center;gap:8px !important;}
/* Banderolen auf dem Endbildschirm (379): die gemalte Rolle wich dem
   Band — dieselbe Sprache wie Menü und Zurufe. */
#ende .knopf.banderole.endeband{--bandhoehe:58px;width:auto;min-width:280px;font-size:23px;justify-content:center;text-decoration:none;}
#ende .knopf.banderole.endeband span{padding:0 calc(var(--bandende) * -0.25 + 10px);}
#ende .endeweg{font-size:15px;color:var(--tan);text-decoration:underline;text-underline-offset:3px;}
#ende p.endelohnzeile{font-family:var(--display);font-size:24px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);padding-top:.1em;}
#ende p.endelohnzeile[hidden]{display:none;}
#ende .endelohn{height:1.1em;width:auto;vertical-align:-.2em;}


/* Der Austausch, sichtbar (seit 366, js/partie.js → austauschAnimieren):
   der eigene Stapel steht über dem Schleier, neu gezogene Karten
   leuchten kurz golden. */
.austausch .austauschstapel{position:absolute;z-index:5;}
/* 383: Beim Hinunterfliegen wird der Schleier durchsichtig, die Karten
   bleiben sichtbar und werden auf der Hand zu den echten Handkarten.
   Bis eine Karte gelandet ist, ist ihr Platz in der Hand leer. */
.austausch{transition:background-color .35s ease;}
.austausch.loest{background-color:transparent;pointer-events:none;}
.austausch.loest > h2,.austausch.loest > p,.austausch.loest > .knopf{visibility:hidden;}
#handIch.austauschwartet > .karte:not(.gelandet){visibility:hidden;}
.austausch .karte.neugezogen{box-shadow:0 0 0 3px var(--gold-hi),0 0 26px rgba(255,214,120,.85);border-radius:10px;}
.austausch .karte.neugezogen::after{content:"Neu";position:absolute;left:50%;top:-14px;transform:translateX(-50%);z-index:30;
  font-family:var(--display);font-size:18px;color:#2a1a0c;background:var(--gold-hi);padding:.18em .55em 0;border-radius:999px;}

/* ─── Schlichte Fenster im Duell (Einstellungen, Logbuch, Regeln) ────
   Gebaut wie die Erklärung hinter dem Fragezeichen einer Questtafel
   (css/abenteuer.css → .ladenhilfe): eine dunkle Tafel, die goldene
   Überschrift in der Zierschrift, heller Text — keine Holzkästen in
   Kästen. Geschlossen wird mit dem Kreuz-Band oben rechts an der Tafel
   (wie bei Quests und Beutel) oder mit einem Tipp daneben; die eine
   Handlung, die bleibt (Aufgeben), ist das Band. */
.schleier.schlicht{background:rgba(8,6,4,.62);}
.schlichttafel{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:900px;padding:20px 30px 22px;border-radius:6px;
  background:rgba(24,17,10,.96);color:#f3e7c8;
  border:1px solid rgba(238,220,171,.28);box-shadow:0 18px 40px -12px rgba(0,0,0,.85);
  animation:schlichtAuf .2s ease-out;}
@keyframes schlichtAuf{from{opacity:0;transform:translateY(10px) scale(.97);}}
@media (prefers-reduced-motion:reduce){ .schlichttafel{animation:none;} }
.schlichttafel h2{font-weight:400;font-size:26px;color:var(--gold-hi);padding-top:.1em;}
.bandzu.duellzu{position:absolute;top:10px;right:-44px;z-index:3;padding:0;border:0;background:none;cursor:pointer;
  transition:transform .18s ease;}
.bandzu.duellzu img{height:34px;width:auto;display:block;}
.bandzu.duellzu:hover{transform:scale(1.08);}
/* 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;}
.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.banderole{width:300px;--bandhoehe:56px;font-size:21px;white-space:nowrap;}
.schlichtknoepfe .knopf.banderole.rot{color:#9d2621;background:none;}
.schlichtknoepfe .knopf.banderole:hover{filter:brightness(1.06);transform:translateY(-1px);}
.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.banderole.meldensenden{--bandhoehe:52px;width:min(100%,240px);}
.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;} }