/* ══════════════════════════════════════════════════════════════════
   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:200px;transform:translateX(-50%) scale(.85);
  z-index:120;display:none;gap:6px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:340px;opacity:0;transition:opacity .14s,transform .14s;
}
.emotekranz.an{display:grid;opacity:1;transform:translateX(-50%) scale(1);}
.emote{
  min-height:34px;padding:0 8px;cursor:pointer;
  font-family:var(--display);font-size:13px;line-height:1.1;padding-top:.25em;
  color:var(--ink);border:2.5px solid var(--ink);border-radius:6px;
  background:linear-gradient(var(--parch-hi),var(--parch) 60%,var(--parch-sh));
  box-shadow:0 3px 0 var(--ink);
}
.emote:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);}

/* 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{
  position:absolute;transform:translate(-50%,-50%);
  z-index:130;white-space:nowrap;pointer-events:none;
  padding:6px 14px;border-radius:8px;
  background:linear-gradient(var(--parch-hi),var(--parch-sh));
  border:2.5px solid var(--ink);box-shadow:0 4px 10px -4px #000;
  font-family:var(--display);font-size:15px;padding-top:.4em;color:var(--ink);
  animation:blaseAn .2s cubic-bezier(.2,.9,.3,1.5),blaseWeg .35s 2.25s forwards;
}
.blase::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--ink);
}
.blase.gegner{}
.blase.gegner::after{bottom:auto;top:-9px;
  border-top-color:transparent;border-bottom-color:var(--ink);}
@keyframes blaseAn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes blaseWeg{to{opacity:0;transform:translate(-50%,-50%) 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}}