/* ══════════════════════════════════════════════════════════════════
   abenteuer.css — Orte und Tafeln der Abenteuer-Schicht (js/abenteuerkarte.js)
   ══════════════════════════════════════════════════════════════════ */

/* ─── Fundstellen und Orte ───────────────────────────────────────────
   Ein Fund ist ein `.suchfeld` wie die Funde des Feldzugs
   (css/landkarte.css): große Fläche, ein Funke blitzt auf. Gefunden,
   leuchtet er kurz auf. Danach steht dort das Zeichen des Ortes auf
   weißer Scheibe — so groß wie Portal und Postkasten. */
.abenteuerfund{z-index:8;cursor:pointer;}
.abenteuerfund::before{content:"";position:absolute;inset:10%;border-radius:50%;pointer-events:none;opacity:0;}
.abenteuerfund.gefunden::before{animation:abenteuerFund .65s ease-out forwards;
  background:radial-gradient(closest-side,rgba(255,250,220,.95),rgba(255,210,120,0));}
@keyframes abenteuerFund{0%{opacity:0;transform:scale(.4);}40%{opacity:1;transform:scale(1.6);}100%{opacity:0;transform:scale(2.2);}}

.marke.abenteuerort{cursor:pointer;}
/* Die Leiste oben links: jeder gefundene Ort als Knopf (dieselben
   Knöpfe wie die Leiste der Monsteraufgabe, css/monster.css). */
.abenteuerleiste{position:absolute;z-index:30;display:flex;gap:calc(8px / var(--s,1));
  left:calc(16px / var(--s,1));top:calc(14px / var(--s,1));}
.abenteuerleiste .leistenknopf{width:calc(44px / var(--s,1));height:calc(44px / var(--s,1));}
/* Amboss und Schwerter sind dunkel gezeichnet — ein heller Saum hält sie
   auf dem dunklen Knopf lesbar. */
.abenteuerleiste .leistenknopf img{filter:drop-shadow(0 0 1.5px rgba(255,240,210,.95)) drop-shadow(0 0 1px rgba(255,240,210,.8));}
/* Am Rechner eine Reihe: der Wegweiser und die Namen fehlen, das Fach
   ist nur ein Behälter. */
.abenteuerleiste .leistenschalter,.abenteuerleiste .leistenname{display:none;}
.abenteuerleiste .leistenfach{display:contents;}
/* ─── Telefon quer: die Leiste knickt ein (seit 371) ─────────────────
   Im linken Rand oben steht nur der **Wegweiser**; die rote Zahl daran
   sagt, an wie vielen Orten etwas wartet. Ausgeklappt liegen die Orte
   als Liste mit Namen über der Karte — zwei Spalten, Zeilen von 44
   Punkten, Luft dazwischen. Darunter im Rand die Pfeile, ganz unten das
   Zahnrad (css/landkarte.css). Dieselbe Schranke wie dort. */
@media (min-aspect-ratio: 7/4) and (max-height: 520px){
  .abenteuerleiste{left:calc(-1 * var(--rand,0px) / var(--s,1) / 2);top:calc(12px / var(--s,1));transform:translateX(-50%);
    display:block;z-index:34;}
  .abenteuerleiste .leistenschalter{display:grid;width:calc(46px / var(--s,1));height:calc(46px / var(--s,1));color:#f3e7c8;}
  .abenteuerleiste .schalterzeichen{display:grid;place-items:center;}
  .abenteuerleiste .schalterzeichen svg{width:calc(24px / var(--s,1));height:calc(24px / var(--s,1));display:block;}
  .abenteuerleiste.offen .leistenschalter{border-color:var(--gold-hi);background:rgba(58,40,22,.95);
    box-shadow:0 0 0 calc(2px / var(--s,1)) rgba(247,216,120,.3);}
  .abenteuerleiste .leistenfach{display:none;position:absolute;left:0;top:calc(100% + 10px / var(--s,1));
    grid-template-columns:repeat(2,minmax(0,auto));gap:calc(8px / var(--s,1)) calc(10px / var(--s,1));
    padding:calc(12px / var(--s,1));width:max-content;border-radius:calc(16px / var(--s,1));
    background:rgba(20,14,8,.95);border:calc(1.5px / var(--s,1)) solid rgba(232,190,110,.55);
    box-shadow:0 calc(14px / var(--s,1)) calc(34px / var(--s,1)) calc(-8px / var(--s,1)) rgba(0,0,0,.9);}
  .abenteuerleiste.offen .leistenfach{display:grid;animation:leistenfachAuf .18s cubic-bezier(.2,.8,.3,1);}
  .abenteuerleiste .leistenfach .leistenknopf{width:auto;height:calc(44px / var(--s,1));border-radius:999px;
    display:flex;align-items:center;justify-content:flex-start;gap:calc(10px / var(--s,1));
    padding:0 calc(16px / var(--s,1)) 0 calc(5px / var(--s,1));background:rgba(44,31,17,.85);}
  .abenteuerleiste .leistenfach .leistenknopf:hover{transform:none;background:rgba(70,49,26,.95);}
  .abenteuerleiste .leistenfach .leistenknopf img{width:calc(32px / var(--s,1));height:calc(32px / var(--s,1));flex:0 0 auto;}
  .abenteuerleiste .leistenname{display:inline;font-family:var(--display);font-weight:400;white-space:nowrap;
    font-size:calc(16px / var(--s,1));color:#f3e7c8;padding-top:.14em;}
  .abenteuerleiste .leistenfach .leistenmarke{right:auto;left:calc(26px / var(--s,1));top:calc(-5px / var(--s,1));}
}
@keyframes leistenfachAuf{from{opacity:0;transform:translateY(calc(-6px / var(--s,1))) scale(.97);}}

.marke.abenteuerort .scheibe{background:#fff;}
.marke.abenteuerort .scheibe img{object-fit:contain;padding:10%;box-sizing:border-box;transform:none;width:100%;height:100%;}
/* Eine neu erreichte Stufe: ein rotes „!“ am Ort, bis man hinschaut. */
.abenteuerneu{position:absolute;right:-4px;top:-4px;z-index:2;min-width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:14px;padding-top:.12em;
  color:#f6e3bb;background:radial-gradient(circle at 36% 30%,#c0453a,#8f2219 65%,#5e1410);
  border:2px solid var(--ink);animation:abenteuerPuls 1.8s ease-in-out infinite;}
@keyframes abenteuerPuls{50%{transform:scale(1.15);}}

/* ─── Tafeln ─────────────────────────────────────────────────────── */
.abenteuerfeld{position:absolute;inset:0;z-index:45;display:grid;place-items:center;
  background:rgba(8,6,4,.72);animation:abenteuerFeldAuf .2s ease-out;}
@keyframes abenteuerFeldAuf{from{opacity:0;}}
.abenteuertafel{position:relative;animation:abenteuerTafelAuf .26s cubic-bezier(.2,.8,.2,1);}
@keyframes abenteuerTafelAuf{from{opacity:0;transform:translateY(14px) scale(.96);}}
.bandzu.abenteuerzu{position:absolute;top:10px;right:-44px;z-index:3;padding:0;border:0;background:none;cursor:pointer;
  transition:transform .18s ease;}
.bandzu.abenteuerzu img{height:34px;width:auto;display:block;}
.bandzu.abenteuerzu:hover{transform:scale(1.08);}

/* ─── Die Ruhmeshalle ────────────────────────────────────────────────
   Das Kissen (791 × 473) hat zwei gemalte Felder: die Platte oben
   (x 67–710, y 4–58) und das Band in der Mitte (y 205–262). Darauf
   liegen die sieben Medaillen: vier zwischen Platte und Band, drei
   darunter. Die Lagen unten sind Anteile genau dieser Maße. Eine noch
   nicht erreichte Medaille ist eine Delle im Samt. Unter dem Kissen
   der Balken der gewählten. */
.abenteuertafel.ruhm{width:600px;display:flex;flex-direction:column;gap:12px;}
.kissen{position:relative;width:100%;aspect-ratio:1200 / 661;
  background:url(../assets/abenteuer/erfolge/kissen.webp) center / 100% 100% no-repeat;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.7));}
.erfolgbalken{position:relative;display:block;width:100%;height:10px;border-radius:6px;overflow:hidden;
  background:rgba(0,0,0,.45);border:1.5px solid rgba(232,190,110,.7);}
.erfolgbalken i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#f3cf6a,#d9a23a 55%,#a8761f);
  transition:width .35s ease;}

.medaillen{position:absolute;inset:0;list-style:none;margin:0;padding:0;}
.medaillen .lage{position:absolute;transform:translateX(-50%);display:block;}
/* Seit 350 ein schlichtes Kissen (kein Schild, kein Band): zwei Reihen
   im Samt, vier oben, drei versetzt darunter. */
.medaillen .lage.oben{top:12%;height:36%;width:19%;left:calc(23% + var(--n) * 18%);}
.medaillen .lage.unten{top:52%;height:36%;width:19%;left:calc(32% + var(--n) * 18%);}
.erfolg{position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;
  border-radius:50%;transition:transform .18s ease;}
.erfolg img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 7px rgba(0,0,0,.6));}
.erfolg:hover{transform:translateY(-3px);}
.erfolg.an img{filter:drop-shadow(0 0 6px rgba(255,214,120,.95)) drop-shadow(0 6px 7px rgba(0,0,0,.6));}
.erfolg:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;}
/* Die Delle: wo eine Medaille einmal liegen wird. */
.delle{display:block;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(0,0,0,.45),rgba(0,0,0,.18) 55%,rgba(255,120,110,.08) 72%,transparent 74%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.5);}
.erfolg.offen.an .delle{box-shadow:inset 0 3px 6px rgba(0,0,0,.5),0 0 0 2px rgba(255,214,120,.55);}
/* Bereit zum Abholen (seit 360): kein gelber Ring mehr, die Medaille
   selbst leuchtet — kräftig und pulsierend. */
.erfolg.neu img{animation:erfolgLeuchten 1.6s ease-in-out infinite;}
@keyframes erfolgLeuchten{
  0%,100%{filter:drop-shadow(0 0 6px rgba(255,220,130,.85)) drop-shadow(0 0 14px rgba(255,190,70,.55)) drop-shadow(0 6px 7px rgba(0,0,0,.6));}
  50%{filter:drop-shadow(0 0 12px rgba(255,236,170,1)) drop-shadow(0 0 30px rgba(255,200,80,.9)) drop-shadow(0 6px 7px rgba(0,0,0,.6));}}
.ruhmstand[hidden]{display:none;}
.ruhmstand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16%;
  color:#f6e3bb;text-shadow:0 1px 2px rgba(0,0,0,.8);}
.ruhmstand .ruhmtext{margin:0 0 2px;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.15;text-align:center;
  color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7);padding-top:.1em;}
/* Bereit zum Abholen: die Zahl an der Medaille, rot wie jede Marke. */
.erfolgzahl{position:absolute;right:4%;top:2%;z-index:2;min-width:24px;height:24px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;background:#c62a1d;color:#fff;font:400 15px/1 var(--display);padding-top:.12em;
  box-shadow:0 0 0 2px #f7d878,0 3px 6px rgba(0,0,0,.5);}
.ruhmstand .stufe{font-family:var(--display);font-size:20px;padding-top:.15em;}
.ruhmstand .zahl{font-size:14px;letter-spacing:.04em;}

/* ─── Das Orakel ─────────────────────────────────────────────────────
   Das Pergament der Questtafeln, oben das Bildnis der Wahrsagerin. */

.lohnzeichen{width:1.1em;height:1.1em;object-fit:contain;vertical-align:-.2em;}

/* ─── Wartequest ─────────────────────────────────────────────────────
   Auf der Karte ein Stundenglas: golden und pulsierend (wartet), dunkel
   mit Restzeit (läuft), grün mit Haken (fertig). Die Tafel wie eine
   Tagesquest: Bild oben, darunter das Pergament. */
.wartemarke{position:absolute;z-index:8;transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer;
  width:max(34px,calc(22px / var(--s,1)));height:max(34px,calc(22px / var(--s,1)));}
.wartemarke span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  color:#1c1308;font-family:var(--display);font-size:18px;
  background:radial-gradient(circle at 36% 28%,#ffe9a8,#f2c14e 60%,#c79a2a);border:2px solid var(--ink);
  box-shadow:0 4px 8px -3px #000;transition:transform .18s ease;}
.wartemarke span svg{width:62%;height:62%;}
.wartemarke::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,215,120,.7),rgba(255,215,120,0));animation:wartePuls 1.8s ease-in-out infinite;}
@keyframes wartePuls{0%,100%{opacity:.25;transform:scale(.85);}50%{opacity:.9;transform:scale(1.1);}}
.wartemarke:hover span{transform:scale(1.12);}
.wartemarke.laeuft span{color:#f3e7c8;background:radial-gradient(circle at 36% 28%,#5a4426,#33261380 70%,#241a0e);}
.wartemarke.laeuft::before{animation:none;opacity:0;}
.wartemarke.fertig span{color:#fff;background:radial-gradient(circle at 36% 28%,#b6e88a,#5f9e34 60%,#3f6f1f);}
.wartemarke.fertig::before{background:radial-gradient(closest-side,rgba(170,240,120,.75),rgba(120,200,80,0));}
.warterest{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);padding:1px 6px;border-radius:999px;
  font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#f3e7c8;background:rgba(20,14,8,.85);}

.wartestempel{margin-left:auto;padding:2px 8px;border:3px double #2f6b1f;border-radius:6px;color:#2f6b1f;
  font-family:var(--display);font-size:15px;text-transform:uppercase;transform:rotate(-10deg);}
.wartelohn{margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-family:var(--display);font-size:17px;padding-top:.1em;}
/* Schlank (Wartequest, Herausforderung): eine Zeile mit der Zeit,
   der Knopf, mittig der Lohn — sonst nichts. */

.warteleiste{margin:0;display:flex;align-items:center;justify-content:center;gap:16px;}

.wartezeit{display:inline-flex;align-items:center;gap:4px;font-family:var(--display);font-size:17px;padding-top:.12em;white-space:nowrap;}
.wartezeit svg{width:17px;height:17px;color:#6b4a22;margin-top:-.15em;}
.wartezeit b{font-weight:400;font-variant-numeric:tabular-nums;}

.gegnerstufe{margin-left:auto;padding:2px 9px 1px;border-radius:999px;background:rgba(151,30,27,.12);color:#971e1b;
  font-size:12px;font-weight:700;white-space:nowrap;}
/* Die drei Diener: runde Bildnisse mit Namen, ein bis drei antippen. */

/* ─── Die Läden: Orakel, Alchemist, Schmied ──────────────────────────
   Wie eine Tagesquest: Bild, Titel, Ware. Die Erklärung liegt hinter dem
   Fragezeichen unter der Tafel und deckt die Tafel beim Öffnen zu. */

/* Unten mittig der Knopf, rechts daneben das Gold. Drei Spalten, damit
   der Knopf wirklich in der Mitte steht, wie breit das Gold auch ist. */
.ladenfuss{display:flex;justify-content:center;align-items:center;gap:12px;}
.ladenfuss .fussmitte{display:flex;justify-content:center;}
/* Rüstkammer: die Rolle mittig, „Alle Rüstungsteile zusammenfügen“ rechts außen. */
.ruestkammer .ladenfuss .fussmitte{position:relative;width:100%;flex-wrap:wrap;}
/* „Alle Rüstungsteile zusammenfügen“ (seit 372): eine eigene Zeile ganz
   unten rechts, unter der Banderole — vorher lag es rechts neben ihr und
   lief am Telefon über sie hinweg. */
.ruestkammer .ladenfuss .fussmitte:has(.allesfuegen){flex-direction:column;align-items:center;gap:6px;}
.ruestkammer .allesfuegen{position:static;align-self:flex-end;white-space:nowrap;text-align:right;line-height:1.2;font-size:13px;}
.ruestkammer .allesfuegen[disabled]{opacity:.5;cursor:default;text-decoration:none;}
.ladenfuss:has(.fussmitte:empty){display:none;}
/* Unten links unter der Tafel: das Fragezeichen, daneben ein weiterer
   Weg (Rangliste) oder ein Stand. */

.ladenweg{padding:0;} .ladenweg img{width:24px;height:24px;object-fit:contain;}
.ladenfrage:hover,.ladenfrage.an,.ladenweg:hover,.ladenweg.an{border-color:var(--gold-hi);box-shadow:0 0 14px rgba(242,193,78,.45);}
.ladenfrage:hover,.ladenweg:hover{transform:scale(1.1);}
.eckenstand{font-size:13px;color:#f3e7c8;text-shadow:0 1px 2px rgba(0,0,0,.8);}
.eckenstand b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--gold-hi);}
.ladenhilfe{position:absolute;inset:0;z-index:4;overflow:auto;padding:22px 26px;border-radius:3px;cursor:pointer;
  background:rgba(24,17,10,.96);color:#f3e7c8;font-size:14px;line-height:1.5;animation:abenteuerTafelAuf .2s ease-out;}
.ladenhilfe[hidden]{display:none;}
.ladenhilfe h4{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold-hi);padding-top:.1em;}
.ladenhilfe p{margin:0 0 8px;}
.ladenhilfe b{color:var(--gold-hi);font-weight:600;}
/* Die Ware: drei Stücke nebeneinander. */
.ware{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ware.neu .warestueck{animation:wareNeu .45s cubic-bezier(.2,.9,.3,1.3) both;}
.ware.neu .warestueck:nth-child(2){animation-delay:.07s;} .ware.neu .warestueck:nth-child(3){animation-delay:.14s;}
@keyframes wareNeu{from{opacity:0;transform:translateY(10px) scale(.9);}}
.warestueck{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;border-radius:8px;
  text-align:center;background:rgba(255,248,230,.5);border:2px solid rgba(107,74,34,.35);}
.warestueck > img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(60,30,10,.35));}
.warestueck > b{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.1;color:#2b1d10;padding-top:.1em;
  min-height:2.2em;display:flex;align-items:center;}
.warestueck.selten{border-color:#5f9e34;background:rgba(236,250,226,.55);}
.warestueck.episch{border-color:#a3261a;background:rgba(255,232,222,.6);}
.warestueck .knopf{display:inline-flex;align-items:center;gap:4px;justify-content:center;min-width:64px;margin-top:2px;}
.warestueck .knopf[disabled]{opacity:.45;cursor:default;filter:grayscale(.6);}
.warestueck.leer{justify-content:center;min-height:150px;border-style:dashed;background:transparent;}
.warestueck.leer span{font-family:var(--display);font-size:16px;color:#8a6a40;transform:rotate(-8deg);}
.warestueck.gesperrt > img{filter:grayscale(.8);opacity:.55;}
.warewerte{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}
.warewerte span{display:inline-flex;align-items:center;gap:2px;}
.warewerte img{width:18px;height:18px;object-fit:contain;}
.ladenneu{display:inline-flex;align-items:center;gap:5px;}
/* Beim Schmied, sobald „Neue Ware“ Seelensplitter kostet: der Stand
   unten rechts (seit 366). */
.schmiedtafel .ladenfuss{position:relative;}
.splitterstand{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;
  font-family:var(--display);font-size:21px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.65);padding-top:.1em;}
.splitterstand[hidden]{display:none;}
.splitterstand img{width:1.15em;height:1.15em;object-fit:contain;filter:drop-shadow(0 0 5px rgba(220,40,40,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.6));}
/* Das Orakel: die Gabe groß in der Mitte. */
.orakelfeld{min-height:96px;display:grid;place-items:center;text-align:center;}
.orakelleer{margin:0;font-family:var(--display);font-size:20px;color:#6b4a22;padding-top:.1em;}
.orakelgabe{display:flex;flex-direction:column;align-items:center;gap:2px;}
.orakelgabe.gold,.orakelgabe.mana{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;}
.orakelgabe > b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1;padding-top:.12em;color:#971e1b;}
.orakelgabe .lohnzeichen,.orakelgabe .manakugel{width:38px;height:38px;}
.orakelgabe.gold small,.orakelgabe.mana small{flex-basis:100%;}
.orakelgabe small{font-size:12.5px;color:#6b4a22;}
.orakelgabe.itemfund{font-size:14px !important;text-align:center;}
.orakelgabe.itemfund img{width:84px;height:84px;}
.orakelgabe.itemfund b{font-family:var(--display);font-weight:400;font-size:20px;color:#2b1d10;padding-top:.1em;}
.orakelgabe.neu{animation:wareNeu .5s cubic-bezier(.2,.9,.3,1.3) both;}
.orakelwarte{font-size:14px;} .orakelwarte b{font-family:var(--display);font-weight:400;font-size:20px;font-variant-numeric:tabular-nums;}
/* Turnierplatz und Gildenhalle im selben Rahmen wie die Läden, breiter. */

.laden .turnierinhalt{min-height:0;}
.auftragtafel .gildenlos{margin-top:4px;}
.ladenneu[disabled]{opacity:.45;cursor:default;filter:grayscale(.6);}

/* Drei Diener zur Wahl (Wartequest, Nachtwache): Bild mit Stufe, Name,
   Klasse und Werte. */

/* Zwei Wege je Kampf: „Kampf“ (selbst) und ⏩ (Turbo) — Aussehen in
   css/tafel.css (Kampf: die Rolle mittig). */
.kampfwahl .knopf{display:inline-flex;align-items:center;gap:4px;justify-content:center;}
.kampfwahl .knopf.kampfrund:active{transform:scale(.95);}
.kampfwahl .knopf.kampfrund[disabled]{opacity:.35;}
.gildenlos{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 10px;}
.gildenlos > .tafelzeile{flex:1 1 100%;margin:0;text-align:center;}
.gildenlos .knopf:not(.rolle):not(.kampfrund){min-height:40px;font-size:16px;padding:.2em 18px 0;}
.handergebnis{display:flex;flex-direction:column;align-items:center;gap:6px;}
.handergebnis h3{margin:0;font-family:var(--display);font-weight:400;font-size:40px;line-height:1;padding-top:.1em;}
.handergebnis h3.sieg{color:var(--gold-hi);} .handergebnis h3.niederlage{color:#e0705a;}
.handergebnis .gildenpaare,.handergebnis .turnierliste{width:100%;}
.handergebnis .turnierliste{max-height:150px;}
.handergebnis .turnierliste li{background:rgba(255,248,230,.08);color:#f3e7c8;}
.handergebnis .turnierliste li.links .tl,.handergebnis .turnierliste li.rechts .tr{color:#9be07a;}
.handergebnis .turnierliste .tvs,.handergebnis .turnierliste .tnr,.handergebnis .turnierliste small{color:#f3e7c8;}
.handergebnis .gildenergebnis{font-family:var(--display);font-size:18px;margin:0;}
.handergebnis .gildenergebnis.sieg{color:var(--gold-hi);} .handergebnis .gildenergebnis.niederlage{color:#e0705a;}
.autofreischalten{display:flex;flex-direction:column;gap:6px;align-items:center;padding-top:8px;border-top:1px dashed rgba(107,74,34,.45);}
.autofreischalten .monstertext{text-align:center;font-size:13.5px;}
.autofreischalten .knopf{display:inline-flex;align-items:center;gap:5px;}
.autofreischalten .manakugel{width:18px;height:18px;}
.automeldung{font-size:12px;color:#a3261a;}
.monsterstand.autofrei{text-align:center;color:#2f6b1f;}
/* Mit Mana freikaufen. */
/* Seit 349 eine Banderole in eigener Zeile, mittig — der Preis in der
   Spielschrift, dunkelbraun auf Pergament (gut lesbar auf jedem Bild),
   die Manakugel daneben. */
.knopf.rolle.freikauf{--rh:44px;min-width:220px;margin:6px auto 0;font-size:18px;}
.knopf.rolle.freikauf b{font-family:var(--display);font-weight:400;font-size:1.1em;color:#3b1f0e;}
.knopf.rolle.freikauf .manakugel{width:1.05em;height:1.05em;}
div.turnierpause{display:flex;flex-direction:column;align-items:center;}
div.turnierpause > p{margin:0;}
.freikaufmeldung{display:block;margin-top:4px;font-size:12px;color:#a3261a;}
.abenteuertafel .knopf.abenteuerja[disabled]{opacity:.45;cursor:default;filter:grayscale(.6);}
.abenteuertafel .knopf.abenteuerja{align-self:center;margin-top:2px;}
.abenteuertafel .knopf.abenteuerja:not(.rolle){min-height:44px;font-size:18px;padding:.25em 28px 0;}

.abenteuertafel.hinweis{max-width:380px;padding:22px 28px;border-radius:var(--rund-3);text-align:center;
  color:var(--parch);background:linear-gradient(180deg,rgba(36,26,16,.98),rgba(19,13,8,.99));
  border:1px solid rgba(232,190,110,.4);box-shadow:0 24px 44px -18px #000;}
.abenteuertafel.hinweis p{margin:0;font-size:15px;line-height:1.5;}
.abenteuertafel.hinweis p + p{margin-top:8px;}
.abenteuertafel.hinweis .klein{font-size:13px;color:var(--tan);}
.abenteuertafel.hinweis b{color:var(--gold-hi);}

/* ─── Der Alchemist ──────────────────────────────────────────────────
   Dasselbe Pergament wie das Orakel. */

.erfolgbalken.hell{background:rgba(80,50,20,.2);border-color:#6b4a22;}

/* ─── Schmied und Rüstkammer ─────────────────────────────────────────
   Dieselbe Tafel wie beim Alchemisten; die Zeile trägt die Seltenheit
   als farbigen Rand (grün selten, rot episch — wie das Leuchten um
   das Bild, siehe unten). */

.abenteuertafel.ruestkammer{width:560px;}
  .leerzeile{padding:10px;font-size:13px;color:#6b4a22;text-align:center;}
.itemfund{display:flex;align-items:center;gap:10px;text-align:left;font-size:14px !important;}
.itemfund img{width:48px;height:48px;object-fit:contain;flex:0 0 auto;}
/* Das Leuchten der Seltenheit liegt über dem Bild, nicht darin: die
   Itembilder sind freigestellt und für alle Seltenheiten dieselben.
   Die Stücke stehen still — ein Schatten mit Unschärfe kostet hier
   nichts (README → harte Regel 4 gilt für Bewegtes). */
.warestueck.selten > img,.kammerkachel.selten > img,
.itemfund.selten img{
  filter:drop-shadow(0 0 3px rgba(96,214,70,.95)) drop-shadow(0 0 7px rgba(96,214,70,.6));}
.warestueck.episch > img,.kammerkachel.episch > img,
.itemfund.episch img{
  filter:drop-shadow(0 0 3px rgba(240,70,50,.95)) drop-shadow(0 0 8px rgba(240,70,50,.6));}
.kammerkachel.legendaer > img,.itemfund.legendaer img{
  filter:drop-shadow(0 0 3px rgba(255,205,70,.95)) drop-shadow(0 0 9px rgba(255,180,40,.65));}

/* ─── Die Rüstkammer ─────────────────────────────────────────────────
   Nur eine Übersicht: Kacheln mit Bild, Name und Wirkung, der Rand in
   der Farbe der Seltenheit. Antippen wählt aus (goldener Ring); was
   nicht dazu passt, tritt zurück. Unten der eine Knopf. */
.abenteuertafel.laden.ruestkammer .ladeninhalt{padding-top:18px;}
.kammer{list-style:none;margin:0;padding:2px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  max-height:372px;overflow:auto;}
.kammerkachel{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border-radius:8px;cursor:pointer;
  background:rgba(255,248,230,.5);border:2px solid rgba(107,74,34,.35);text-align:center;
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;}
.kammerkachel > img{width:52px;height:52px;object-fit:contain;}
.kammerkachel > b{font-family:var(--display);font-weight:400;font-size:13.5px;line-height:1.1;color:#2b1d10;padding-top:.1em;
  max-width:100%;overflow-wrap:break-word;hyphens:auto;}   /* ganze Namen, zur Not zweizeilig (seit 372) */
.kammerkachel > b.lang{font-size:12px;}
.kammerkachel.selten{border-color:#5f9e34;} .kammerkachel.episch{border-color:#a3261a;background:rgba(255,236,226,.55);}
.kammerkachel.legendaer{border-color:#d9a21b;background:rgba(255,240,200,.65);cursor:default;}
.kammerkachel:hover{transform:translateY(-2px);}
.kammerkachel.an{box-shadow:0 0 0 3px #c99a2e,0 0 14px rgba(242,193,78,.55);}
.kammerkachel.blass{opacity:.45;}
.kammer .leerzeile{grid-column:1 / -1;}
.ruestkammer .schmelzen{display:inline-flex;align-items:center;gap:5px;}
.ruestkammer .schmelzen[disabled]{opacity:.5;cursor:default;filter:grayscale(.6);}
.schmelzfund{display:flex;align-items:center;gap:12px;}
.schmelzfund img{width:72px !important;height:72px !important;}

/* ─── Der Turnierplatz ───────────────────────────────────────────────
   Das Pergament der anderen Läden, darin drei Reiter. Die Bildnisse der
   Kämpfer stecken im silbernen Rahmen aus dem alten Turnier
   (assets/abenteuer/ui/rahmen.webp, 304 × 307, der Rand ~5 %). */

.knopf.kknopf{min-height:36px;padding:.22em 16px 0;font-size:15px;white-space:nowrap;}
.turnierreiter{display:flex;gap:6px;border-bottom:2px solid #6b4a22;}
.turnierreiter button{flex:1;padding:7px 8px 4px;border:2px solid #6b4a22;border-bottom:0;border-radius:6px 6px 0 0;cursor:pointer;
  font-family:var(--display);font-size:16px;color:#6b4a22;background:rgba(255,248,230,.35);margin-bottom:-2px;}
.turnierreiter button[aria-selected="true"]{color:#f6e3bb;background:#6b4a22;}
.turnierinhalt{display:flex;flex-direction:column;gap:10px;min-height:292px;}
.abenteuertafel.turnier .klein{margin:0;font-size:12.5px;color:#6b4a22;}

.kampfbild{position:relative;display:block;flex:0 0 auto;}
.kampfbild .kbildnis{position:absolute;inset:5.5%;width:89%;height:89%;object-fit:cover;object-position:50% 10%;background:#20170e;}
.kampfbild .krahmen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.kampfbild.mini{width:34px;height:34px;}
.kampfbild.mini .kbildnis{inset:0;width:100%;height:100%;border-radius:50%;border:2px solid #18130e;box-sizing:border-box;background:#fff;}

.gegnerwahl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.gegnerkarte{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;text-align:center;
  border-radius:var(--rund-2);background:rgba(255,248,230,.45);border:1.5px solid rgba(107,74,34,.5);}
.gegnerkarte .kampfbild{width:84px;height:84px;margin-bottom:4px;}
/* Das Gesicht vom Barbier: groß, ohne Rahmen, ohne Grund — der Kopf
   füllt die Fläche (seit 343). */
.gegnerkarte .kopfbild{display:block;width:118px;height:118px;margin:-2px 0 0;}
.gegnerkarte .kopfbild img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));}
.gegnerkarte b{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.1;color:#971e1b;padding-top:.1em;}
.gegnerkarte small{font-size:12px;color:#6b4a22;}
.gegnerkarte .kampfwahl{margin-top:4px;}
.gegnerkarte .knopf[disabled]{opacity:.45;cursor:default;filter:grayscale(.6);}
.turnierpause{margin:0;text-align:center;font-size:13px;}
.turnierpause b{font-family:var(--display);font-weight:400;font-size:18px;font-variant-numeric:tabular-nums;color:#971e1b;}

.rangliste{list-style:none;margin:0;padding:0 4px 0 0;max-height:258px;overflow:auto;display:flex;flex-direction:column;gap:3px;}
.rangliste li{display:grid;grid-template-columns:44px 34px 1fr auto 56px;align-items:center;gap:10px;padding:3px 8px;
  border-radius:var(--rund-2);background:rgba(255,248,230,.35);font-size:14px;}
.rangliste .rang{display:flex;align-items:center;gap:3px;font-family:var(--display);font-size:16px;color:#6b4a22;}
.rangliste .rang img{width:18px;height:18px;}
.rangliste small{font-size:12px;color:#6b4a22;}
.rangliste em{font-style:normal;text-align:right;font-family:var(--display);font-size:16px;font-variant-numeric:tabular-nums;}
.rangliste li.ich{background:#6b4a22;color:#f6e3bb;}
.rangliste li.ich .rang,.rangliste li.ich small{color:#f3d9a4;}

/* ─── Der Autokampf: der Zusammenschnitt ──────────────────────────────
   Der Duelltisch in voller Bühnengröße (1000 × 490, css/tisch.css):
   Reihen, Diener und Helden sind die des Duells. Über der Tischplatte
   das Bild des Kampfortes (`--kampfgrund`: Turnier, Auftrag, Dungeon;
   sonst die Arena), stark abgedunkelt. Oben links Titel und Runde, unten
   links die Ansage des Höhepunkts, unten rechts Tempo und Überspringen;
   die Namen stehen neben den Helden. js/abenteuerkampf.js. */
.abenteuerkampf.zusammenschnitt{position:relative;width:1000px;height:490px;animation:abenteuerTafelAuf .26s cubic-bezier(.2,.8,.2,1);}
.zsbuehne{position:relative;width:1000px;height:490px;color:#f6e3bb;}
.zsbuehne .tisch{
  background:linear-gradient(180deg,rgba(20,14,8,.86),rgba(20,14,8,.74) 45%,rgba(20,14,8,.9)),
    var(--kampfgrund,url(../assets/monster/quest-arena.webp)) center 60% / cover,#241b12;}
.zsbuehne .diener{cursor:default;}
.zsbuehne.bebt{animation:brettBebt .4s cubic-bezier(.36,.07,.19,.97);}
.zusammenschnitt > .abenteuerzu{right:12px;top:12px;z-index:230;}
.zsname{position:absolute;left:548px;margin:0;display:flex;flex-direction:column;gap:1px;z-index:5;pointer-events:none;
  text-shadow:0 2px 3px #000;}
.zsname.gegner{top:14px;} .zsname.eigen{top:334px;}
.zsname b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.05;color:var(--gold-hi);padding-top:.1em;}
.zsname small{font-size:12px;opacity:.9;}
.zsbuehne .held.besiegt .portrait{filter:grayscale(1) brightness(.55);}
.zskopf{position:absolute;left:22px;top:14px;display:flex;flex-direction:column;gap:2px;max-width:380px;z-index:6;
  pointer-events:none;text-shadow:0 2px 3px #000;}
.zskopf b{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.05;color:var(--gold-hi);padding-top:.1em;}
.zsrunde{font-size:12.5px;letter-spacing:.06em;opacity:.9;}
.zsansage{position:absolute;left:22px;top:412px;width:470px;margin:0;z-index:6;pointer-events:none;
  font-family:var(--display);font-size:19px;line-height:1.2;color:#f6e3bb;text-shadow:0 2px 3px #000;padding-top:.1em;}
.zsansage.neu{animation:zsAnsage .35s ease-out;}
@keyframes zsAnsage{from{opacity:0;transform:translateY(6px);}}
.zsbuehne .kampffuss{position:absolute;right:22px;bottom:8px;z-index:6;}
.zsbuehne .flieger{position:absolute;z-index:190;pointer-events:none;transform:translateX(-50%);
  font-family:var(--display);font-size:30px;padding-top:.1em;
  text-shadow:0 2px 0 var(--ink),0 0 10px rgba(0,0,0,.75);animation:zsSteigen 1s ease-out forwards;}
.zsbuehne .flieger.minus{color:#ff6a5a;} .zsbuehne .flieger.plus{color:#8bf59b;}
/* Über `transform`, nicht `margin-top`: ein Rand verschiebt das Layout
   und zwang je Bild zum Neuberechnen der ganzen Bühne. */
@keyframes zsSteigen{0%{opacity:0;transform:translate(-50%,10px);}15%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;transform:translate(-50%,-44px);}}
.kampfvs{font-family:var(--display);font-weight:400;font-size:52px;color:var(--gold-hi);text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.8);}
.kampfende{position:absolute;left:50%;top:50%;z-index:220;transform:translate(-50%,-50%);min-width:320px;max-width:420px;
  padding:18px 26px;border-radius:var(--rund-3);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(36,26,16,.97),rgba(19,13,8,.98));border:1px solid rgba(232,190,110,.5);
  box-shadow:0 24px 44px -18px #000;animation:abenteuerTafelAuf .3s cubic-bezier(.2,.8,.2,1);}
.kampfende[hidden]{display:none;}
.kampfende h3{margin:0;font-family:var(--display);font-weight:400;font-size:40px;line-height:1;padding-top:.1em;}
.kampfende h3.sieg{color:var(--gold-hi);} .kampfende h3.niederlage{color:#e0705a;}
.kampfende p{margin:0;font-size:15px;line-height:1.45;}
.kampfende .klein{font-size:12.5px;color:var(--tan);}
.zszaehlt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px;}
.zszaehlt b{font-variant-numeric:tabular-nums;}
.zszaehlt li.fertig{color:#9be07a;}
/* Seit 366: eine Banderole „Überspringen“, darunter klein als Text
   „Schneller/Langsamer“ und „Ganz ansehen“. */
.kampffuss{display:flex;flex-direction:column;align-items:center;gap:2px;}
.kampffuss[hidden]{display:none;}
.kampffuss .knopf.rolle{--rh:44px;min-width:190px;font-size:19px;}
.kampfwege{display:flex;gap:14px;}
.kampfweg{background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;font-size:14px;color:#f6e3bb;
  text-decoration:underline;text-underline-offset:3px;text-shadow:0 2px 3px #000;}
.kampfweg:hover{color:#fff;}

/* ─── Die Dungeons ───────────────────────────────────────────────────
   Dieselbe Tafel wie der Turnierplatz; oben das Bild des Dungeons,
   darunter die Leiter der zehn Ebenen. */
.dungeontafel .turnierreiter button{font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:5px;}
.dungeontafel .turnierreiter small{font-family:var(--ui);font-size:11px;opacity:.8;}
.dungeontafel .turnierreiter svg{width:14px;height:14px;}
.dungeontafel .turnierreiter .gesperrt{opacity:.6;}

.ebenen{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;align-items:center;position:relative;}
.ebenen::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:3px;background:#6b4a22;opacity:.5;}
.ebenen li{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:14px;padding-top:.1em;color:#6b4a22;background:#e6cfa3;border:2px solid #6b4a22;}
.ebenen li.geschafft{color:#fff;background:#5f9e34;border-color:#3f6f1f;}
.ebenen li.jetzt{color:#2b1d10;background:radial-gradient(circle at 36% 28%,#ffe9a8,#f2c14e 60%,#c79a2a);border-color:#18130e;
  box-shadow:0 0 0 3px rgba(242,193,78,.45);animation:abenteuerPuls 1.8s ease-in-out infinite;}
.ebenen li.boss{width:38px;height:38px;color:#f6e3bb;background:radial-gradient(circle at 36% 30%,#c0453a,#8f2219 65%,#5e1410);border-color:#18130e;padding:0;}
.ebenen li.boss svg{width:62%;height:62%;}
.ebenen li.boss.geschafft{background:#5f9e34;}
.dungeongegner{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--rund-2);
  background:rgba(255,248,230,.45);border:1.5px solid rgba(107,74,34,.5);}
.dungeongegner.boss{border:2px solid #a3261a;background:rgba(255,226,214,.5);}
.dungeongegner .kampfbild{width:70px;height:70px;}
.dungeongegner > p{flex:1;margin:0;font-size:13.5px;line-height:1.35;}
.dungeongegner > p span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#6b4a22;}
.dungeongegner > p b{font-family:var(--display);font-weight:400;font-size:18px;color:#971e1b;}
.dungeongegner .turnierpause{flex:0 0 auto;}
.dungeonfertig{margin:0;padding:10px;text-align:center;font-size:14px;}
.dungeonfertig b{font-family:var(--display);font-weight:400;font-size:20px;color:#2f6b1f;}

/* ─── Die Gildenhalle ────────────────────────────────────────────────
   Dieselbe Tafel wie Turnierplatz und Dungeons. Das Wappen einer Gilde
   ist ein einfaches Zeichen in Rot auf einer hellen Scheibe mit dunkler
   Kontur — wie die Zeichen der Quests (seit 343). */
.turnierreiter button[disabled]{opacity:.45;cursor:default;}
.gildenwappen{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;box-sizing:border-box;
  color:#9d2621;background:radial-gradient(circle at 40% 32%,#fff7e4,#ead9b4 70%,#d7c296);border:2.5px solid #2b1d10;
  box-shadow:0 2px 0 rgba(0,0,0,.25);}
.gildenwappen svg{width:66%;height:66%;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5));}
.wappenwahl{padding:0;border:0;background:none;cursor:pointer;border-radius:50%;}
.wappenwahl:hover .gildenwappen{box-shadow:0 0 0 3px #c99a2e,0 0 12px rgba(242,193,78,.6);}
.wappenreihe{margin-top:-4px;}
.gruendensymbol .gildenwappen{width:44px;height:44px;}
/* Die Zahlen eines Mitglieds, aufgeklappt unter seiner Zeile. */
.gildenmitglieder li[data-id]{cursor:pointer;border-radius:6px;padding:2px 4px;}
.gildenmitglieder li[data-id]:hover,.gildenmitglieder li.offen{background:rgba(255,248,230,.55);}
.gildenmitglieder li.mitgliedstatistik{grid-column:1 / -1;display:block;padding:0 4px 4px;}
.mitgliedstatistik > div{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px 4px;border-radius:6px;
  background:rgba(43,29,16,.08);border:1px solid rgba(107,74,34,.35);}
.mitgliedstatistik span{display:flex;flex-direction:column;align-items:center;gap:1px;color:#6b4a22;}
.mitgliedstatistik svg{width:18px;height:18px;color:#9d2621;}
.mitgliedstatistik b{font-family:var(--display);font-weight:400;font-size:17px;color:#2b1d10;line-height:1;padding-top:.1em;}
.mitgliedstatistik small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
.gildenfuss.rechts{justify-content:flex-end;}
.gildenliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.gildenzeile{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--rund-2);
  background:rgba(255,248,230,.45);border:1.5px solid rgba(107,74,34,.5);}
.gildenzeile.meine{border:2px solid #b8862b;background:rgba(255,236,190,.55);}
.gildenzeile .rang{display:flex;align-items:center;gap:2px;width:34px;font-family:var(--display);font-size:16px;color:#6b4a22;}
.gildenzeile .rang img{width:16px;height:16px;}
.gildentext{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;}
.gildentext b,.gildenkopf b{font-family:var(--display);font-weight:400;font-size:17px;color:#971e1b;padding-top:.1em;}
.gildentext i,.gildenkopf i{font-size:12px;color:#6b4a22;}
.gildentext small{font-size:11.5px;}
.gildenzeile > em{display:flex;flex-direction:column;align-items:center;font-style:normal;font-family:var(--display);font-size:18px;}
.gildenzeile > em small{font-family:var(--ui);font-size:10px;color:#6b4a22;}
.gildenzeile .wartestempel{margin-left:0;font-size:12px;}
.gildenkopf{display:flex;align-items:center;gap:12px;}
.gildenkopf .gildenwappen{width:64px;height:64px;}
.gildenkopf > div{display:flex;flex-direction:column;gap:2px;}
.gildenvorzug{margin:2px 0 0;font-size:13px;} .gildenvorzug b{font-size:15px;color:#2f6b1f;}
.gildenkasse{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px;}
.gildenkasse b{font-family:var(--display);font-weight:400;font-size:19px;color:#971e1b;}
.gildenspende{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
.gildenspende .knopf{display:inline-flex;align-items:center;gap:4px;}
.gildenspende .knopf[disabled]{opacity:.45;cursor:default;filter:grayscale(.6);}
.gildenmitglieder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;}
.gildenmitglieder li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:6px;font-size:12.5px;}
.gildenmitglieder .kampfbild.mini{width:28px;height:28px;}
.gildenmitglieder b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.gildenmitglieder small{font-size:11px;color:#6b4a22;}
.gildenmitglieder li.ich b{color:#971e1b;}
/* Die runden Knöpfe der Gilde stehen neben dem Fragezeichen (`.ladenweg`). */
.gildenrund svg{width:22px;height:22px;display:block;margin:auto;}
.gildenfuss{margin:0;display:flex;justify-content:space-between;gap:12px;}
.gildenmitglieder.gross{grid-template-columns:repeat(2,1fr);gap:8px 16px;}
.gildenmitglieder.gross li{font-size:14px;grid-template-columns:36px 1fr auto;}
.gildenmitglieder.gross .kampfbild.mini{width:34px;height:34px;}
.gildeweg{align-self:flex-end;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:12px;color:#8f2219;text-decoration:underline;}
.gildenduell{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;}
.gildenduell > div{display:flex;flex-direction:column;align-items:center;gap:3px;}
.gildenduell .gildenwappen{width:76px;height:76px;}
.gildenduell b{font-family:var(--display);font-weight:400;font-size:17px;color:#971e1b;}
.gildenduell small{font-size:12px;color:#6b4a22;}
.gildenduell .kampfvs{font-size:38px;color:#971e1b;text-shadow:none;}
/* Vor dem Turnier: die Wappenzeile klein, damit die Reihen Platz haben. */
.gildenduell.kompakt .gildenwappen{width:44px;height:44px;}
.gildenduell.kompakt b{font-size:14px;} .gildenduell.kompakt .kampfvs{font-size:24px;}
.gildenduell.kompakt small{font-size:11px;}
.gildenpaare{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.gildenpaare li{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:3px 10px;border-radius:6px;font-size:13px;
  background:rgba(255,248,230,.4);}
.gildenpaare li b:first-child{text-align:right;}
.gildenpaare li span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.gildenpaare li.sieg span{color:#2f6b1f;} .gildenpaare li.niederlage span{color:#a3261a;}
.gildenpaare li.ich{font-weight:700;}
/* Das Gildenturnier: die beiden Reihen vor dem Kampf, danach jeder
   Kampf als Zeile — der Stehende grün, der Gefallene blass, ▶ zum
   Nachsehen. */
.turnierreihen{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.turnierreihen ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.turnierreihen li{display:flex;justify-content:space-between;gap:6px;padding:2px 8px;border-radius:5px;font-size:12.5px;background:rgba(255,248,230,.4);}
.turnierreihen ol:last-child li{flex-direction:row-reverse;}
.turnierreihen li.ich{font-weight:700;background:rgba(242,193,78,.35);}
.turnierreihen small,.turnierliste small{font-size:10.5px;color:#6b4a22;font-weight:400;}
.turnierliste{list-style:none;margin:0;padding:0 2px 0 0;display:flex;flex-direction:column;gap:3px;max-height:228px;overflow:auto;scrollbar-width:thin;}
.turnierliste li{display:grid;grid-template-columns:20px minmax(0,1fr) 18px minmax(0,1fr) 30px;gap:6px;align-items:center;padding:2px 6px;border-radius:6px;font-size:13px;
  background:rgba(255,248,230,.4);}
.turnierliste b > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.turnierliste .tnr{font-family:var(--display);font-size:13px;color:#6b4a22;}
.turnierliste .tl{text-align:right;} .turnierliste .tr{text-align:left;}
.turnierliste b{display:flex;flex-direction:column;line-height:1.1;font-weight:400;}
.turnierliste .tl{align-items:flex-end;} .turnierliste .tr{align-items:flex-start;}
.turnierliste .tvs{font-family:var(--display);font-size:18px;text-align:center;color:#971e1b;}
.turnierliste li.links .tl,.turnierliste li.rechts .tr{font-weight:700;color:#2f6b1f;}
.turnierliste li.links .tr,.turnierliste li.rechts .tl{opacity:.55;}
.turnierliste li.ich{background:rgba(242,193,78,.3);}
.turnierliste .ansehen{width:26px;min-height:26px;padding:0;} .turnierliste .ansehen svg{width:16px;height:16px;}
.turnierliste li:not(:has(.ansehen)){grid-template-columns:20px 1fr 18px 1fr;}
.kampfende .turnierliste{width:100%;max-height:150px;}
.kampfende .turnierliste li{background:rgba(255,248,230,.08);color:#f3e7c8;}
.kampfende .turnierliste li.links .tl,.kampfende .turnierliste li.rechts .tr{color:#9be07a;}
.kampfende .turnierliste .tvs,.kampfende .turnierliste .tnr,.kampfende .turnierliste small{color:#f3e7c8;}
.dungeonfertig b.verloren{color:#a3261a;}
.kampfende .gildenpaare{width:100%;}
.kampfende .gildenpaare li{background:rgba(255,248,230,.08);color:#f3e7c8;}
.kampfende .gildenergebnis{font-family:var(--display);font-size:18px;}
.kampfende .gildenergebnis.sieg{color:var(--gold-hi);} .kampfende .gildenergebnis.niederlage{color:#e0705a;}
.kampfende .gildenpaare li.sieg span{color:#9be07a;} .kampfende .gildenpaare li.niederlage span{color:#f08a74;}

@media (max-height:560px){
  .abenteuertafel.ruhm{gap:8px;}
        .abenteuertafel.ruestkammer{gap:6px;}

  .orakelfeld{min-height:70px;}
  
  .warestueck > img{width:52px;height:52px;}
  .warestueck.leer{min-height:118px;}

  .turnierinhalt{min-height:0;gap:7px;}
  .gegnerkarte .kampfbild{width:64px;height:64px;}
  .gegnerkarte .kopfbild{width:86px;height:86px;}
  .turnierliste li{font-size:12px;} .turnierliste{max-height:none;}
  .turnierreihen li{font-size:11.5px;}

  .dungeongegner .kampfbild{width:54px;height:54px;}
  .gildentext i,.gildenkopf i{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .abenteuerneu,.erfolg.neu img,.orakelgabe.neu,.abenteuerfeld,.abenteuertafel,.wartemarke::before,
  .abenteuerkampf,.kampfende,.zsansage.neu,.zsbuehne .flieger,.ebenen li.jetzt{animation:none;}
}

/* ─── Tränke: Vorrat in der Rüstkammer, Laden des Alchemisten ──────── */
.warestueck.trank .warewerte{font-size:12px;color:#6b4a22;}
.warestueck .trankzahl{font-size:11.5px;color:#2f6b1f;min-height:1.2em;}
.warestueck.trank.wirkt{border-color:#5f9e34;background:rgba(236,250,226,.6);}

/* ─── Eine Gilde gründen ─────────────────────────────────────────────
   Name, zwölf Symbole im Wappenrahmen, vier Vorzüge, der Knopf. */
.gildenfuss.mittig{justify-content:center;}
.gruenden{display:flex;flex-direction:column;gap:10px;}
.gruendenname{display:flex;align-items:center;gap:10px;margin-right:34px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6b4a22;}
.gruendenname input{flex:1;min-width:0;font:inherit;font-family:var(--display);font-size:19px;letter-spacing:0;text-transform:none;color:#2b1d10;
  padding:.3em 12px .15em;border-radius:8px;border:2px solid rgba(107,74,34,.45);background:rgba(255,252,240,.85);}
.gruendenname input:focus{outline:none;border-color:#c99a2e;box-shadow:0 0 0 3px rgba(242,193,78,.35);}
.gruendenreihe{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.gruendensymbol{padding:3px;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center;
  transition:transform .12s ease,box-shadow .12s ease;}
.gruendensymbol .kampfbild{width:46px;height:46px;}
.gruendensymbol:hover{transform:translateY(-2px);}
.gruendensymbol.an{box-shadow:none;}
.gruendensymbol.an .gildenwappen{box-shadow:0 0 0 3px #c99a2e,0 0 12px rgba(242,193,78,.6);}
.gruendenvorzug{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.gruendenvorzug button{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px;
  text-align:left;color:#2b1d10;background:rgba(255,248,230,.5);border:2px solid rgba(107,74,34,.3);}
.gruendenvorzug button.an{border-color:#c99a2e;background:#fff6dc;box-shadow:0 0 0 2px rgba(242,193,78,.35);}
.gruenden .gruendenja{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.gruenden .gruendenja[disabled]{opacity:.5;cursor:default;filter:grayscale(.6);}
.gruendengrund{min-height:1.1em;text-align:center;font-size:12px;color:#a3261a;}
.anfuehrerkrone{width:15px;height:15px;object-fit:contain;vertical-align:-2px;margin-right:4px;}
.gildenhinweis{margin:0;text-align:center;font-size:12.5px;color:#6b4a22;}

/* ─── Der Barbier ────────────────────────────────────────────────────
   Ein Laden wie die anderen, das Bild ist ein Spiegel: Fliesen in
   Minzgrün, links die Barbierstange, in der Mitte der Messingrahmen
   mit dem eigenen Gesicht, darunter Rasse und Geschlecht als Band.
   Rechts die Werkbank: Rassen als Köpfe, Mann/Frau, acht Zeilen zum
   Blättern (zwei Spalten). Rahmen und Anordnung: css/tafel.css. */
/* `.tafelbild` (css/tafel.css, danach geladen) setzt `display:block` —
   darum hier mit beiden Klassen, sonst klebt der Spiegel oben links. */
.tafelbild.barbierspiegel{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  container-type:size;background-color:#d7e8df;
  background-image:linear-gradient(#bfd6ca 2px,transparent 2px),linear-gradient(90deg,#bfd6ca 2px,transparent 2px);
  background-size:34px 34px;background-position:-1px -1px;}
/* Der Spiegel behält sein Maß (600 : 720), wie hoch oder breit die
   Spalte auch ist: die Breite ist das Kleinere aus Spaltenbreite und dem,
   was die Höhe erlaubt (Containermaße `cqw`/`cqh`). */
.spiegel{position:relative;flex:0 0 auto;width:min(calc(100cqw - 36px), calc((100cqh - 64px) * 600 / 720));aspect-ratio:600 / 720;
  border:7px solid #d9a441;outline:3px solid #18130e;border-radius:46% 46% 18px 18px / 30% 30% 18px 18px;
  box-shadow:inset 0 0 0 3px #9c7020,0 6px 0 rgba(24,19,14,.45);
  background:radial-gradient(circle at 50% 36%,#f6fbf8,#b9d6c8 78%);overflow:hidden;box-sizing:border-box;}
.spiegel canvas{display:block;width:100%;height:100%;object-fit:contain;}
.spiegelband.rolle{--rh:40px;position:relative;z-index:2;margin-top:-14px;min-width:min(78%, 240px);max-width:calc(100cqw - 12px);}
.tafel .knopf.rolle.barbierja{--rh:46px;width:200px;font-size:19px;}
.barbierbank{display:flex;flex-direction:column;gap:10px;container-type:inline-size;}
.barbierleer,.barbiergrund{margin:0;text-align:center;font-size:14px;color:#6b4a22;}
.barbiergrund{color:#a3261a;}
.rassenwahl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:6px;align-items:stretch;margin-right:30px;}
.rasse{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 2px 3px;cursor:pointer;border-radius:8px;
  font:inherit;font-size:11.5px;font-weight:700;color:#2b1d10;background:rgba(255,248,230,.55);border:2px solid rgba(107,74,34,.35);
  transition:border-color .15s,background .15s;}
.rasse img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 6%;border-radius:6px;background:#e9f3ee;}
.rasse[aria-pressed="true"],.geschlechtwahl button[aria-pressed="true"]{border-color:#c99a2e;background:#fff6dc;box-shadow:0 0 0 2px rgba(242,193,78,.45);}
.geschlechtwahl{display:flex;flex-direction:column;gap:6px;}
.geschlechtwahl button{flex:1;min-width:58px;padding:0 8px;cursor:pointer;border-radius:8px;font:inherit;font-size:13px;font-weight:700;
  color:#2b1d10;background:rgba(255,248,230,.55);border:2px solid rgba(107,74,34,.35);}
.barbierregler{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.regel{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:4px;padding:3px;border-radius:10px;
  background:rgba(255,248,230,.5);border:2px solid rgba(107,74,34,.3);}
.regelpfeil{height:38px;padding:0 0 .12em;cursor:pointer;border-radius:8px;border:2px solid #18130e;background:#d9a441;color:#18130e;
  font-family:var(--display);font-size:26px;line-height:1;box-shadow:0 2px 0 #18130e;}
.regelpfeil:active{transform:translateY(2px);box-shadow:none;}
.regelwert{display:flex;flex-direction:column;align-items:center;line-height:1.1;min-width:0;}
.regelwert small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6b4a22;}
.regelwert b{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:400;font-size:16px;color:#971e1b;
  padding-top:.12em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.farbtupfer{width:13px;height:13px;border-radius:50%;border:2px solid #18130e;flex:0 0 auto;}
.farbtupfer.leer{background:repeating-linear-gradient(45deg,#fff 0 3px,#ccc 3px 6px)!important;}
.ladenfuss .fussmitte:has(.barbierja){gap:10px;}
/* Schmale Werkbank: Mann/Frau in eine eigene Zeile, ganz schmal die
   Rassen in zwei Reihen und die Zeilen untereinander. */
@container (max-width:380px){
  .rassenwahl{grid-template-columns:repeat(6,minmax(0,1fr));}
  .geschlechtwahl{grid-column:1 / -1;flex-direction:row;}
  .geschlechtwahl button{min-height:32px;}
}
@container (max-width:300px){
  .rassenwahl{grid-template-columns:repeat(3,minmax(0,1fr));}
  .barbierregler{grid-template-columns:1fr;}
}

/* ─── Die Dungeons: Bild der Ebene und Schacht ───────────────────────
   Das Bild füllt den Rahmen (Band oben, auf dem Telefon die linke
   Spalte); links darin der Schacht mit dreißig Stufen von oben nach
   unten. Die jetzige Stufe leuchtet golden und trägt rechts ihre Zahl
   wie ein Fahrstuhl seine Kabine. */
.ebenenbild{position:relative;overflow:hidden;background:#0d0a07;}
.ebenenbild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.schacht{position:absolute;left:10px;top:10px;bottom:10px;width:16px;margin:0;padding:3px;list-style:none;
  display:flex;flex-direction:column;gap:2px;border-radius:8px;background:rgba(10,8,6,.78);
  border:2px solid #18130e;box-shadow:inset 0 0 0 1px rgba(232,190,110,.4),0 2px 6px rgba(0,0,0,.5);}
.schacht li{flex:1;min-height:2px;border-radius:2px;background:rgba(232,190,110,.16);position:relative;}
.schacht li.grenze{margin-top:4px;}
.schacht li.boss{background:rgba(196,48,34,.75);}
.schacht li.geschafft{background:#79a843;}
.schacht li.jetzt{background:#f2c14e;box-shadow:0 0 8px 1px rgba(242,193,78,.9);}
.schacht li.jetzt::after{content:attr(data-n);position:absolute;left:calc(100% + 7px);top:50%;transform:translateY(-50%);
  min-width:26px;padding:3px 6px 1px;border-radius:7px;text-align:center;font-family:var(--display);font-size:15px;line-height:1;
  color:#18130e;background:linear-gradient(180deg,#ffe9a8,#f2c14e);border:2px solid #18130e;box-shadow:0 2px 4px rgba(0,0,0,.5);}
.dungeontafel .tafelkopf > svg{width:28px;height:28px;color:#971e1b;}
/* ─── Alles zusammengefügt (seit 359): die neuen Stücke als Raster ───
   nebeneinander statt einer endlosen Liste; viele Stücke rollen im
   Raster, die Tafel bleibt so hoch wie der Schirm. */
.abenteuertafel.hinweis.fuegeergebnis{width:min(720px,calc(100vw - 32px));max-width:none;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px;
  max-height:calc(var(--fh,100vh) - 60px);}
.fuegeraster{list-style:none;margin:0;padding:2px;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;
  overflow-y:auto;min-height:0;scrollbar-width:thin;}
.fuegestueck{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border-radius:8px;
  background:rgba(243,231,200,.07);border:1px solid rgba(243,231,200,.18);animation:wareNeu .45s cubic-bezier(.2,.9,.3,1.3) both;}
.fuegestueck > img{width:52px;height:52px;object-fit:contain;}
.fuegestueck > b{font-size:12px;line-height:1.15;color:#f3e7c8;text-align:center;}
.fuegestueck .warewerte{font-size:11px;gap:4px;} .fuegestueck .warewerte img{width:14px;height:14px;}
.fuegestueck.selten{border-color:#5f9e34;} .fuegestueck.episch{border-color:#a3261a;} .fuegestueck.legendaer{border-color:#d9a21b;}
.fuegestueck.selten > img{filter:drop-shadow(0 0 3px rgba(96,214,70,.95));}
.fuegestueck.episch > img{filter:drop-shadow(0 0 3px rgba(240,70,50,.95));}
.fuegestueck.legendaer > img{filter:drop-shadow(0 0 3px rgba(255,200,60,.95));}
/* Ohne Bewegung (reduziert oder Qualität „niedrig“) leuchtet die
   abholbereite Medaille still, aber genauso kräftig. */
@media (prefers-reduced-motion:reduce){
  .erfolg.neu img{filter:drop-shadow(0 0 12px rgba(255,236,170,1)) drop-shadow(0 0 26px rgba(255,200,80,.85)) drop-shadow(0 6px 7px rgba(0,0,0,.6));}
}
html[data-qualitaet="niedrig"] .erfolg.neu img{filter:drop-shadow(0 0 12px rgba(255,236,170,1)) drop-shadow(0 0 26px rgba(255,200,80,.85));}
/* Seit 360: die Tafel ist nur das Kissen — es steht mittig; was eine
   angetippte Medaille sagt, steht frei darunter (der Platz unter der
   Tafel ist frei gehalten, `--fh − 215`), das „?“ links daneben. */
.abenteuertafel.ruhm{position:relative;}
.abenteuertafel.ruhm > .ruhmstand{position:absolute;left:0;right:0;top:calc(100% + 6px);}
.abenteuertafel.ruhm > .ruhmstand{left:12%;right:12%;padding:10px 18px 12px;border-radius:14px;
  background:rgba(21,16,10,.92);box-shadow:0 12px 28px rgba(0,0,0,.6),inset 0 0 0 1px rgba(243,231,200,.12);
  animation:hilfeAufRuhm .2s ease-out;}
@keyframes hilfeAufRuhm{from{opacity:0;transform:translateY(6px);}}
/* Gewählte Delle: kein gelber Kreis, nur etwas heller. */
.erfolg.offen.an .delle{box-shadow:inset 0 3px 6px rgba(0,0,0,.5),0 0 16px rgba(255,214,120,.35);}
/* Das × der Halle bleibt über der Erklärung erreichbar. */
.abenteuertafel.ruhm > .bandzu{z-index:6;}
/* ─── Sperren in der Rüstkammer (seit 360) ──────────────────────────
   Gedrückt halten: die Kachel füllt sich von unten (0,55 s), dann sitzt
   ein Schloss oben rechts. Gesperrtes wird nie zusammengefügt; antippen
   lässt es kurz wackeln. */
.kammerkachel{position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.kammerschloss{display:none;position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;place-items:center;
  color:#1c1308;background:var(--gold-hi,#f7d878);border:1.5px solid #1c1308;box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:2;}
.kammerschloss svg{width:13px;height:13px;}
.kammerkachel.gesperrt .kammerschloss{display:grid;animation:schlossZu .28s cubic-bezier(.2,1.5,.4,1);}
.kammerkachel.gesperrt{box-shadow:inset 0 0 0 2px rgba(247,216,120,.55);}
.kammerkachel.haelt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top,rgba(247,216,120,.38),rgba(247,216,120,.38)) bottom / 100% 0 no-repeat;
  animation:kachelHalten .55s linear forwards;}
@keyframes kachelHalten{to{background-size:100% 100%;}}
@keyframes schlossZu{from{transform:scale(.3);opacity:0;}}
.kammerkachel.wackelt{animation:kachelWackeln .32s ease;}
@keyframes kachelWackeln{25%{transform:translateX(-4px);}50%{transform:translateX(4px);}75%{transform:translateX(-2px);}}