/* ══════════════════════════════════════════════════════════════════
   tafel.css — ein Aufbau für alle Tafeln der Landkarte

   Tagesquest, Wartequest, Herausforderung, Arena, Nachtwache, Orakel,
   Alchemist, Schmied, Turnierplatz, Gildenhalle, Dungeon, Rüstkammer:
   **eine** Tafel, ein Satz Maße. Die Stilblätter der Schichten
   (monster.css, abenteuer.css) bringen nur noch mit, was **in** einer
   Tafel steht — Ware, Wachdauern, Rangliste —, nie ihren Rahmen.

   Bildschirmpunkte statt Bühnenpunkte
     Die Fläche (`.tafelfeld`) liegt in der gezoomten Bühne, nimmt deren
     Maßstab aber wieder heraus (`--fz`, js/buehne.js) und deckt den
     ganzen Bildschirm. Darum meinen alle Maße hier echte Punkte: eine
     Schrift von 15 px ist auf dem Telefon 15 px hoch und nicht 8.

   Zwei Anordnungen
     Hoch (Rechner, Tablet): das Bild füllt die Tafel, der Inhalt liegt
       unten auf einem Verlauf.
     Quer und flach (Telefon, Höhe bis 560 px): Bild links als Spalte,
       Inhalt rechts — die Tafel nutzt die Breite, die das Telefon hat,
       statt sich in der Höhe zu quetschen. Wird der Inhalt höher als der
       Schirm, rollt nur er; Bild, Kreuz und Wege bleiben stehen.
     Fragezeichen und runde Wege liegen seit 386 **immer im Bild, unten
       links** (Wunsch Max): die Leiste unter der Tafel kostete eine
       ganze Zeile, die jetzt dem Bild gehört.

   Maße (Token)
     Breite    S 440 · M 500 · L 580   (`--tb`)
     Bild      170 hoch, breite Tafeln 150   (`--bildh`)
     Kopf      Zeichen 32, Titel 24 rot (Anzeigeschrift)
     Text      15 / 1.45, Nebentext 13 braun
     Lohn      mittig, 17, Anzeigeschrift
     Knöpfe    mindestens 44 hoch
     Wege      rund, 40 (quer 36), im Bild unten links
   ══════════════════════════════════════════════════════════════════ */

/* ─── Die Fläche ─────────────────────────────────────────────────── */
.tafelfeld{
  inset:auto;left:var(--fl,0px);top:var(--ft,0px);
  width:var(--fw,100%);height:var(--fh,100%);zoom:var(--fz,1);
  box-sizing:border-box;padding:calc(56px - var(--ft,0px)) 64px 28px;
  display:flex;overflow:auto;overscroll-behavior:contain;
}
/* **Gold und Mana bleiben sichtbar**, solange eine Tafel offen ist: der
   Kontostand (css/landkarte.css, oben rechts auf der Karte) liegt dann
   über der dunklen Fläche, und die Fläche hält oben Platz für ihn frei
   (`padding-top`, gerechnet ab der Oberkante der Bühne). Beim
   Zusammenschnitt nicht — der ist eine eigene Bühne ohne Konto. */
.buehne:has(> .tafelfeld) .kartenkonto{z-index:46;}
/* `margin:auto` statt place-items: eine zu hohe Tafel bleibt oben
   erreichbar, statt über den Rand hinaus zentriert zu werden. */
.tafelfeld > *{margin:auto;flex:0 0 auto;max-width:100%;box-sizing:border-box;}

/* ─── Die Tafel (seit 346: die Bildtafel) ───────────────────────────
   Das Bild **ist** die Tafel. Es füllt die ganze Fläche; der Inhalt
   liegt unten auf einem Verlauf ins Dunkle, der Rest des Bildes bleibt
   frei — Luft statt brauner Fläche. Schrift hell, Titel golden, Zahlen
   in Anzeigeschrift. Fragezeichen und runde Wege liegen im Bild unten
   links (`.ladenecke`, seit 386). */
.tafel{
  --tb:800px;
  --tafelgrund:#15100a;--tafelschrift:#f3e7c8;--tafeltan:#cfae7f;--tafelgold:#f7d878;
  --glas:rgba(20,14,8,.5);--glasrand:rgba(243,231,200,.22);
  position:relative;width:var(--tb);max-height:calc(var(--fh,100vh) - 84px + var(--ft,0px));
  min-height:calc(var(--tb) * .62);
  display:flex;flex-direction:column;
  border-radius:16px;background:var(--tafelgrund);color:var(--tafelschrift);
  border:2px solid #0a0705;
  box-shadow:0 0 0 1px rgba(243,231,200,.16) inset,0 34px 70px -18px rgba(0,0,0,.95);
}
.tafel.turniertafel,.tafel.gildentafel,.tafel.dungeontafel,.tafel.ruestkammer{--tb:860px;}
/* Die Rüstkammer so groß wie eine Questtafel (seit 373; vorher 560 breit):
   dort liegen viele Stücke. */
.tafelfeld > .tafel.ruestkammer{width:var(--tb);min-height:calc(var(--tb) * .5625);}

/* Das Bild hinter allem: deckt die Tafel, oben angeschnitten zuletzt. */
.tafel > .tafelbild{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;
  object-fit:cover;object-position:50% 18%;border:0;border-radius:14px;}
/* Der Inhalt: unten, auf dem Verlauf. Wird er höher als der Schirm,
   rollt nur er; der Verlauf rollt mit, darum beginnt er früh. */
.tafelinhalt{position:relative;z-index:1;flex:0 1 auto;min-height:0;margin-top:auto;overflow:auto;overscroll-behavior:contain;
  padding:120px 36px 28px;display:flex;flex-direction:column;align-items:stretch;gap:12px;border-radius:14px;
  background:linear-gradient(180deg,rgba(21,16,10,0) 0%,rgba(21,16,10,.2) 22%,rgba(21,16,10,.74) 42%,rgba(21,16,10,.94) 60%,rgba(21,16,10,.98) 100%);
  font-size:15px;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.tafel > .tafelinhalt:first-child,.tafel > .bandzu + .tafelinhalt{padding-top:24px;background:none;}
.tafel:not(:has(> .tafelbild)){min-height:0;}
.ladenmitte{display:flex;flex-direction:column;gap:12px;}
.tafelinhalt p{margin:0;}

/* Kopf: Zeichen in einer dunklen Scheibe, Titel golden, rechts Stempel oder Stufe. */
.tafelkopf{display:flex;align-items:center;gap:12px;color:var(--tafelgold);}
.tafelkopf > svg,.tafelkopf > img,.kopfzeichen,.tafelzeichen{width:38px;height:38px;flex:0 0 auto;box-sizing:border-box;
  padding:6px;border-radius:50%;background:var(--glas);border:1px solid var(--glasrand);color:#ffb3a7;object-fit:contain;}
.tafelkopf > svg{padding:7px;}
.tafelzeichen{display:grid;place-items:center;padding:0;}
.tafelzeichen svg{width:24px;height:24px;}
.tafelkopf h3{margin:0;min-width:0;font-family:var(--display);font-weight:400;font-size:27px;line-height:1.05;
  color:var(--tafelgold);padding-top:.15em;text-shadow:0 2px 4px rgba(0,0,0,.8);}
.tafelkopf .monsterstempel,.tafelkopf .stufe{margin-left:auto;}
/* Eine Zeile über einer Auswahl: goldenes Stichwort, heller Nachsatz. */
.tafelzeile{margin:0;font-size:13.5px;color:var(--tafeltan);}
.tafelzeile b{font-family:var(--display);font-weight:400;font-size:16px;color:var(--tafelgold);margin-right:4px;padding-top:.1em;}
.monstertext,.tafel .monstertext{font-size:15px;color:var(--tafelschrift);max-width:46ch;}

/* Der Lohn: mittig, hell, ohne Wort davor. */
.monsterlohn.mittig,.wartelohn{justify-content:center;font-size:18px;color:var(--tafelschrift);}
.tafel .monsterlohn span{color:var(--tafeltan);}
.tafel .knopf.monsterja,.tafel .abenteuerja,.tafel .monsterkampf{align-self:center;}
.tafel .knopf.rolle[disabled]{filter:grayscale(.85) opacity(.55);}
.tafel .knopf{min-height:44px;}
.tafel .kknopf{min-height:40px;}
.tafel .monsterbalken{height:9px;background:rgba(0,0,0,.5);border:1px solid rgba(243,231,200,.3);}
.tafel .monsterstand{color:var(--tafeltan);font-size:12.5px;}
.tafel .monsterstempel{border-color:var(--tafelgold);color:var(--tafelgold);}

/* ─── Helle Schrift auf dunklem Grund: die Teile in der Tafel ──────
   Die Stilblätter der Schichten malen für Pergament (Braun auf Hell).
   Hier dieselben Teile für die Bildtafel: Karten aus dunklem Glas,
   goldene Namen, helle Zahlen. */
.tafel .wachwahl,.tafel .warestueck,.tafel .gegnerkarte,.tafel .dungeongegner,.tafel .gildenzeile,
.tafel .rangliste li,.tafel .kammerkachel,.tafel .mitgliedstatistik > div,.tafel .turnierliste li,.tafel .gildenduell{
  background:var(--glas);border-color:var(--glasrand);color:var(--tafelschrift);}
.tafel .warestueck.selten{border-color:rgba(130,200,90,.7);background:rgba(28,44,18,.55);}
.tafel .warestueck.episch{border-color:rgba(230,110,90,.75);background:rgba(58,20,14,.55);}
.tafel .warestueck.leer{background:transparent;border-style:dashed;}
.tafel .kammerkachel{background:rgba(10,7,4,.72);}
.tafel .kammerkachel > b{color:var(--tafelgold);}
.tafel .kammerkachel.selten{border-color:rgba(130,200,90,.7);} .tafel .kammerkachel.episch{border-color:rgba(230,110,90,.75);background:rgba(58,20,14,.7);}
.tafel .kammerkachel.legendaer{border-color:rgba(247,216,120,.8);background:rgba(60,44,10,.7);}
.tafel .kammer{gap:10px;}
.tafel .warestueck.leer span{color:var(--tafeltan);}
.tafel .warestueck > b,.tafel .gegnerkarte b,.tafel .dungeongegner > p b,.tafel .gildentext b,.tafel .gildenkopf b,
.tafel .orakelgabe.itemfund b,.tafel .dungeonfertig b{color:var(--tafelgold);}
.tafel .gegnerkarte small,.tafel .dungeongegner > p span,.tafel .gildentext i,.tafel .rangliste small,.tafel .rangliste .rang,
.tafel .orakelgabe small,.tafel .abenteuertafel .klein,.tafel .klein,.tafel .mitgliedstatistik span,.tafel .gegnername{color:var(--tafeltan);}
.tafel .gegnername,.tafel .gildenmitglieder li.ich b,.tafel .gildenmitglieder b{color:var(--tafelgold);}
.tafel .turnierreihen li.ich{background:rgba(247,216,120,.2);}
.tafel .turnierpause b,.tafel .wachrest b,.tafel .orakelgabe > b,.tafel .mitgliedstatistik b{color:var(--tafelgold);}
.tafel .rangliste li.ich{background:rgba(247,216,120,.18);border:1px solid rgba(247,216,120,.55);color:var(--tafelschrift);}
.tafel .rangliste li.ich .rang,.tafel .rangliste li.ich small{color:var(--tafelgold);}
.tafel .turnierreiter{border-bottom-color:var(--glasrand);}
.tafel .turnierreiter button{color:var(--tafeltan);background:rgba(20,14,8,.35);border-color:var(--glasrand);}
.tafel .turnierreiter button[aria-selected="true"]{color:#2b1d10;background:var(--tafelgold);border-color:var(--tafelgold);}
.tafel .ebenen::before{background:rgba(243,231,200,.35);opacity:1;}
.tafel .ebenen li{color:var(--tafeltan);background:rgba(20,14,8,.7);border-color:rgba(243,231,200,.4);}
.tafel .ebenen li.jetzt{color:#2b1d10;}
.tafel .dungeongegner.boss{border-color:rgba(230,110,90,.8);background:rgba(58,20,14,.55);}
.tafel .gildenzeile.meine{border-color:var(--tafelgold);background:rgba(247,216,120,.14);}
.tafel .gildenmitglieder li[data-id]:hover,.tafel .gildenmitglieder li.offen{background:rgba(243,231,200,.12);}
.tafel .wachfrage{color:#ff9b8a;}
.tafel .monsterbalken i,.tafel .gildenbalken i{box-shadow:0 0 8px rgba(247,216,120,.5);}
.tafel .knopf.kknopf:not(.rolle),.tafel .knopf.spende{border-color:rgba(243,231,200,.35);}
.tafel .kampfbild.mini .kbildnis{border-color:rgba(243,231,200,.5);}
.tafel .orakelleer{font-family:var(--display);font-size:20px;color:var(--tafelschrift);text-align:center;}
.tafel .orakelwarte{color:var(--tafeltan);}
.tafel .orakelwarte b{color:var(--tafelgold);font-family:var(--display);font-weight:400;font-size:20px;font-variant-numeric:tabular-nums;}
.tafel a,.tafel .allesfuegen,.tafel .verlassen{color:var(--tafeltan);}

/* ─── Die Questtafel (seit 347) ─────────────────────────────────────
   Tagesquest, Wartequest, Herausforderung, Arena, Nachtwache, Dungeon:
   das Bild füllt die Tafel ganz (16 : 9), darauf zwei Inseln —
   **oben links** Zeichen, Titel mit (Zeit/Stufe) und darunter der Lohn,
   **unten mittig** die eine Handlung als Banderole, **unten rechts** ▶ ⏩.
   Dazwischen bleibt das Bild frei. Zwei Schleier halten die Schrift
   lesbar: ein Oval aus der Ecke oben links und ein Verlauf von unten —
   kein Kasten, keine braune Fläche (js/monsterkarte.js → questHtml). */
/* So breit, wie die Höhe für 16 : 9 erlaubt (seit 386 bis 860). */
.tafel.qtafel{--tb:min(860px,calc((var(--fh,100vh) - 84px + var(--ft,0px)) * 16 / 9));aspect-ratio:16 / 9;min-height:0;}
.tafel.qtafel > .tafelbild{object-position:50% 40%;}
.tafel.qtafel > .tafelinhalt{position:absolute;inset:0;margin:0;max-height:none;overflow:visible;
  padding:26px 30px 24px;gap:14px;display:flex;flex-direction:column;align-items:stretch;
  background:
    radial-gradient(115% 95% at 0% 0%,rgba(14,10,6,.9) 0%,rgba(14,10,6,.66) 30%,rgba(14,10,6,.22) 50%,rgba(14,10,6,0) 64%),
    linear-gradient(0deg,rgba(14,10,6,.92) 0%,rgba(14,10,6,.62) 18%,rgba(14,10,6,.2) 32%,rgba(14,10,6,0) 42%);}
/* Oben links: Zeichen · Titel (Zeit) · Lohn. Rechts frei fürs Kreuz. */
.qkopf{display:flex;align-items:flex-start;gap:14px;max-width:min(78%,560px);padding-right:24px;}
.qzeichen{flex:0 0 auto;width:44px;height:44px;margin-top:2px;display:grid;place-items:center;box-sizing:border-box;border-radius:50%;
  background:rgba(14,10,6,.6);border:1px solid rgba(247,216,120,.45);box-shadow:0 2px 8px rgba(0,0,0,.5);color:#ffb3a7;}
.qzeichen svg{width:24px;height:24px;}
.qzeichen img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box;}
.qtitel{display:flex;flex-direction:column;min-width:0;}
.qober{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tafeltan);margin-bottom:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);}
.qtitel h3{margin:0;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.05;padding-top:.12em;
  color:var(--tafelgold);text-shadow:0 2px 6px rgba(0,0,0,.85);}
.qzeit{font-size:.66em;color:#ead3a4;white-space:nowrap;letter-spacing:.01em;}
.qzeit b{font-weight:400;font-variant-numeric:tabular-nums;}
.qlohn{margin:6px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:16px;line-height:1.3;
  color:var(--tafelschrift);text-shadow:0 1px 3px rgba(0,0,0,.9);}
.qlohn .lohnzeichen{width:1.15em;height:1.15em;}
.qinfo{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--tafeltan);text-shadow:0 1px 3px rgba(0,0,0,.9);}
/* Der Stand einer Freischalt-Quest (386): „Holz 1/3“ in Gold. */
.qinfo .qfortschritt{font-family:var(--display);font-size:17px;color:var(--tafelgold);font-variant-numeric:tabular-nums;}
.qinfo .einstieg b{font-family:var(--display);font-weight:400;color:var(--tafelgold);margin-right:4px;}
/* Die Dauer der Nachtwache: eine Kapsel im Titel, antippen springt weiter. */
.qwahl{display:inline-flex;align-items:center;gap:6px;vertical-align:.12em;margin-left:2px;padding:4px 8px 2px 12px;cursor:pointer;
  border-radius:999px;border:1px solid rgba(247,216,120,.6);background:rgba(14,10,6,.55);color:var(--tafelgold);
  font:inherit;font-size:1em;line-height:1;transition:background .16s,border-color .16s,transform .16s;}
.qwahl b{font-weight:400;}
.qwahl i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;margin-top:-.12em;border-radius:50%;
  background:rgba(247,216,120,.18);font-size:15px;}
.qwahl:hover{background:rgba(247,216,120,.16);border-color:var(--tafelgold);transform:translateY(-1px);}
.qwahl:focus-visible{outline:2px solid var(--tafelgold);outline-offset:2px;}
.qwahl.springt b{animation:qspringt .28s ease;}
@keyframes qspringt{from{opacity:.2;transform:translateY(-5px);}to{opacity:1;transform:none;}}
/* Der freie Raum dazwischen; nur der Dungeon stellt seinen Schacht hinein. */
.qmitte{flex:1 1 auto;min-height:0;display:flex;}
/* Unten: Mitte die Handlung, rechts die Pfeile — links bleibt frei,
   damit die Banderole wirklich in der Mitte steht. */
.qfuss{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;}
.qhaupt{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:min(560px,64vw);}
.qhaupt:empty{display:none;}
.qhaupt .knopf.rolle{--rh:50px;min-width:260px;font-size:21px;}
/* Die Schwarze Burg (seit 359): welche Ebene, klein über „Kampf“. */
.qhaupt .burgebene{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tafeltan,#cfae7f);text-shadow:0 1px 4px rgba(0,0,0,.95);}
/* „Wache beginnen“, „Belohnung abholen“: die alte Knopfregel
   (`.monstertafel .knopf.monsterja`, Polster oben) drückte die Schrift
   im Band nach unten — in der Rolle gilt nur ihre eigene Lage. */
.monstertafel .knopf.rolle.monsterja{padding:0;min-height:0;margin-top:0;}
.qrechts{grid-column:3;justify-self:end;align-self:end;display:flex;}
.qrechts .kampfpfeile{display:flex;gap:10px;margin:0;}
.qtafel .qrechts .knopf.kampfrund{width:44px;height:44px;min-height:0;border-radius:50%;padding:0;display:grid;place-items:center;
  background:rgba(14,10,6,.6);border:1px solid rgba(247,216,120,.45);color:var(--tafelgold);box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .15s,background .15s,border-color .15s;}
.qtafel .qrechts .kampfrund svg{width:20px;height:20px;filter:none;}
.qtafel .qrechts .knopf.kampfrund:hover:not([disabled]){background:rgba(247,216,120,.18);border-color:var(--tafelgold);color:#fff3cf;transform:translateY(-1px);}
/* Stand statt Handlung: schmaler Balken, eine Zeile darunter. */
.qstand{width:min(380px,100%);}
.qstand .monsterbalken{height:8px;border-radius:5px;background:rgba(10,7,4,.65);border-color:rgba(247,216,120,.42);}
.qstand p{margin:8px 0 0;font-size:13.5px;color:var(--tafeltan);text-shadow:0 1px 3px rgba(0,0,0,.9);}
.qstand p b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--tafelgold);font-variant-numeric:tabular-nums;}
.qauftrag{display:flex;flex-direction:column;align-items:center;width:min(460px,64vw);}
.qauftrag .qstand{width:min(320px,100%);}
.qtext{margin:0 0 12px;font-size:16px;line-height:1.45;color:var(--tafelschrift);max-width:34em;text-shadow:0 1px 4px rgba(0,0,0,.95);}
.qhinweis{color:var(--tafeltan);}
.qtafel .wachfrage{margin:0;font-size:13.5px;}
.qtafel .leerzeile{margin:0;color:var(--tafeltan);font-size:14px;}
.qtafel .turnierpause{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;color:var(--tafeltan);}
/* Der Schacht der Dungeons: links unter dem Zeichen, zwischen Kopf und Fuß. */
.qtafel .ebenenbild{position:absolute;inset:0;}
.qtafel .schacht{position:relative;left:auto;top:auto;bottom:auto;height:auto;align-self:stretch;margin:4px 0 0 14px;}

/* ─── Fragezeichen und Wege: im Bild unten links (seit 386) ─────────
   Dieselbe Ecke wie ▶ ⏩ unten rechts, nur gespiegelt: links die
   Erklärung und Nebenwege, rechts die Nebenhandlungen, mittig die eine
   Banderole. Die Ecke liegt über der Erklärung (z-index 5), damit „?“
   sie auch wieder schließt. */
.ladenecke{position:absolute;left:var(--eckel,18px);bottom:var(--eckeu,18px);top:auto;z-index:5;display:flex;align-items:center;gap:10px;}
.qtafel{--eckel:30px;--eckeu:24px;}
/* Wo der Inhalt bis unten reicht, hält er links Platz für die Ecke frei:
   die Banderole steht mittig, der Fuß bekommt beidseits Luft. */
.tafel:has(> .ladenecke) .ladenfuss{padding-inline:58px;}
.tafel:not(.qtafel):has(> .ladenecke):not(:has(.ladenfuss)) > .tafelinhalt{padding-bottom:70px;}
/* Turnierplatz und Gildenhalle tragen mehr in der Ecke (Krone, Wege,
   Platz und Ehre, Wochenlohn): eine ganze Zeile im Bild, der Inhalt
   rückt darüber. */
.tafel:has(> .ladenecke .eckenstand),.tafel:has(> .ladenecke .gildenrund){--eckzeile:56px;}
.tafel:has(> .ladenecke .eckenstand) > .tafelinhalt,.tafel:has(> .ladenecke .gildenrund) > .tafelinhalt{padding-bottom:calc(var(--eckzeile) + 14px);}
/* Trägt die Ecke den Wochenlohn, spannt sie sich über die ganze Breite,
   und der Lohn rückt nach **rechts** (382, Wunsch Max). */
.ladenecke:has(.wochenlohn){right:var(--eckel,18px);}
.ladenecke .wochenlohn{margin-left:auto;}
.wochenlohn.geholt{opacity:.75;}
.ladenfrage,.ladenweg{width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0 0 .1em;flex:0 0 auto;
  font-family:var(--display);font-size:22px;line-height:1;color:#f3e7c8;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 28%,#5a4426,#33261380 70%,#241a0e);border:2px solid rgba(238,220,171,.45);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.ladenfrage:hover,.ladenweg:hover{transform:translateY(-2px);border-color:var(--gold-hi,#f7d878);}
.ladenweg.an,.ladenfrage.an{border-color:var(--gold-hi,#f7d878);box-shadow:0 0 0 2px rgba(247,216,120,.35);}
.ladenweg img{width:22px;height:22px;object-fit:contain;}
/* Der Wochenlohn neben Platz und Ehre (seit 370): oben klein, was es
   ist, darunter der Lohn. Liegt er bereit, ein goldener Knopf, der
   atmet — ein Klick holt ihn ab. */
.wochenlohn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:3px 10px 4px;border-radius:10px;
  color:#f3e7c8;text-shadow:0 1px 2px rgba(0,0,0,.8);border:1px solid rgba(238,220,171,.28);background:rgba(20,14,8,.6);
  font:inherit;line-height:1.15;text-align:left;}
.wochenlohn small{font-size:11px;letter-spacing:.03em;opacity:.85;white-space:nowrap;}
.wochenlohn b{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:400;font-size:15px;color:var(--gold-hi,#f7d878);white-space:nowrap;}
.wochenlohn .lohnzeichen,.wochenlohn .manakugel{width:15px;height:15px;margin-left:2px;vertical-align:-2px;}
.wochenlohn.fehlt b{opacity:.55;}
button.wochenlohn.bereit{cursor:pointer;border:2px solid var(--gold-hi,#f7d878);background:linear-gradient(#6b4d1d,#3b2a12);
  animation:wochenlohnAtmen 1.8s ease-in-out infinite;}
button.wochenlohn.bereit small{opacity:1;color:#fff4d2;}
button.wochenlohn.bereit:hover{transform:translateY(-2px);}
button.wochenlohn.bereit:disabled{animation:none;opacity:.7;}
@keyframes wochenlohnAtmen{0%,100%{box-shadow:0 0 0 0 rgba(247,216,120,0);}50%{box-shadow:0 0 16px 2px rgba(247,216,120,.6);}}
@media (prefers-reduced-motion:reduce){button.wochenlohn.bereit{animation:none;box-shadow:0 0 12px rgba(247,216,120,.5);}}
.gildenmeldung{margin:6px 0 0;text-align:center;font-size:13px;color:#ffb3a0;}

/* ─── Die dunklen Tafeln: Hinweis, Postkasten, Ruhmeshalle ───────── */
/* Der Postkasten ist seit 379 eine Questtafel (16:9) — keine eigenen Maße mehr. */
.tafelfeld > .abenteuertafel.ruhm{width:min(600px,calc((var(--fh,100vh) - 215px) * 1.8));}
/* Flacher Schirm (Telefon quer, seit 372): das Kissen **mittig** wie jede
   Questtafel, so groß, wie die Höhe es erlaubt; darunter der Stand der
   gewählten Medaille — der Satz klein in der Lesetypo, darunter Balken
   und „x von y“. (371 stand er rechts daneben, Max wollte die Mitte.) */
@media (max-height:520px){
  .tafelfeld:has(> .abenteuertafel.ruhm){padding-bottom:calc(12px + 62px);}
  .tafelfeld > .abenteuertafel.ruhm{width:min(600px,calc((var(--fh,100vh) - 186px) * 1.815));gap:6px;}
  .abenteuertafel.ruhm > .ruhmstand{left:4%;right:4%;top:calc(100% + 4px);padding:6px 14px 7px;gap:4px;}
  .ruhmstand .ruhmtext{display:block;font-family:var(--ui);font-size:13px;line-height:1.25;letter-spacing:0;}
  .ruhmstand .zahl{font-size:11.5px;}
  .ruhmstand .erfolgbalken{height:8px;}
}

/* ─── Schmaler Schirm (Telefon hochkant): Kreuz in die Tafel ─────── */
@media (max-width:640px){
  .tafelfeld{padding:calc(52px - var(--ft,0px)) 12px 70px;}
  .tafelfeld .bandzu{right:6px;top:6px;}
  .tafelinhalt{padding:72px 20px 20px;}
  /* Hochkant ist 16 : 9 zu flach für zwei Inseln: die Tafel wird höher,
     das Bild schneidet seitlich an. */
  .tafel.qtafel{aspect-ratio:3 / 4;max-height:calc(var(--fh,100vh) - 140px);}
  .tafel.qtafel > .tafelinhalt{padding:18px 18px 18px;}
  .qkopf{max-width:100%;padding-right:52px;}
  .qtitel h3{font-size:24px;}
  .qfuss{grid-template-columns:1fr;justify-items:center;}
  .qhaupt{grid-column:1;max-width:100%;}
  .qrechts{grid-column:1;justify-self:center;}
}

/* ─── Quer und flach (Telefon): Bild links frei, Inhalt rechts ───────
   Dieselbe Bildtafel, nur liegt der Verlauf **von links nach rechts**:
   links bleibt das Bild offen, rechts steht der Inhalt im Dunkel.
   Fragezeichen und Wege stehen auch hier darunter links; die Fläche
   hält unten Platz dafür frei. */
@media (max-height:560px) and (min-width:560px){
  /* Seit 386 ohne Leiste darunter: die Tafel nimmt fast den ganzen
     Schirm. Rechts bleibt Platz für das Kreuz, das wie überall aus der
     Tafel heraushängt (im Bild lag es auf Namen und Knöpfen). */
  .tafelfeld{padding:calc(var(--tro,44px) - var(--ft,0px)) 52px var(--tru,10px) 14px;}
  .tafel{--tb:100%;--eckel:12px;--eckeu:12px;max-height:calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px));min-height:min(260px,calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px)));}
  .tafelfeld > .tafel{width:100%;}
  /* Jede Bildtafel nimmt die ganze Höhe: das Bild ist das Gebäude. */
  .tafelfeld > .tafel:has(> .tafelbild){min-height:calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px));}
  /* Schmale Bänder (Kampf, Mieten, Annehmen in Kacheln): die Schrift
     darf über die Enden laufen, statt zu „Kan“ abgeschnitten zu werden. */
  .tafel .knopf.rolle > span{overflow:visible;}
  .stalltier{padding:20px 4px 8px;}
  .stalltier b{font-size:13px;line-height:1.05;overflow-wrap:anywhere;text-align:center;}
  .stalltier small{font-size:10.5px;line-height:1.2;text-align:center;}
  .stalltier .knopf.rolle{--rh:32px;font-size:13px;}
  .tafel:has(> .ladenecke .eckenstand),.tafel:has(> .ladenecke .gildenrund){--eckzeile:46px;}
  .tafel:has(> .tafelbild){flex-direction:row;justify-content:flex-end;align-items:stretch;}
  .tafel:has(> .tafelbild) > .tafelinhalt{margin:0;flex:0 1 auto;width:62%;height:auto;max-height:none;justify-content:safe center;
    padding:16px 22px 16px 60px;gap:9px;
    background:linear-gradient(90deg,rgba(21,16,10,0) 0%,rgba(21,16,10,.6) 14%,rgba(21,16,10,.93) 30%,rgba(21,16,10,.98) 55%,rgba(21,16,10,.99) 100%);}
  .tafel.turniertafel:has(> .tafelbild) > .tafelinhalt,.tafel.gildentafel:has(> .tafelbild) > .tafelinhalt,
  .tafel.dungeontafel:has(> .tafelbild) > .tafelinhalt{width:70%;}
  /* Kleine Telefone (bis 700 breit): Listen brauchen die Breite mehr als das Bild. */
  @media (max-width:700px){
    .tafel.gildentafel:has(> .tafelbild) > .tafelinhalt,.tafel.wettetafel:has(> .tafelbild) > .tafelinhalt,
    .tafel.stalltafel:has(> .tafelbild) > .tafelinhalt{width:80%;padding-left:24px;}
  }
  .tafel > .tafelbild{object-position:28% 30%;}
  .tafel:not(:has(> .tafelbild)) > .tafelinhalt{padding:16px 22px;}
  .ladenecke{gap:6px;}
  .tafel:has(> .ladenecke) .ladenfuss{padding-inline:0;}
  .ladenfrage,.ladenweg{width:36px;height:36px;font-size:20px;}
  .ladenweg img{width:21px;height:21px;}
  .eckenstand{font-size:12px;line-height:1.2;}
  .eckenstand b{font-size:15px;}
  .wochenlohn{padding:2px 8px 3px;}
  .wochenlohn b{font-size:13px;gap:5px;}
  .wochenlohn small{font-size:10px;}
  .tafelkopf{padding-right:48px;}   /* Platz für das Kreuz oben rechts */
  .tafelkopf h3{font-size:23px;}
  .tafel .knopf{min-height:42px;}
  .tafelinhalt > .knopf.monsterja,.tafelinhalt > .ladenfuss{position:sticky;bottom:0;z-index:2;}
  .dungeontafel .turnierreiter button{flex-direction:column;gap:0;font-size:13.5px;line-height:1.1;padding:6px 4px 4px;}
  .monsterfeld.wachend > .tafel:has(> .tafelbild){--tb:560px;}
  .tafel:has(> .tafelbild) .ladenhilfe{left:30%;border-radius:0 14px 14px 0;}
  /* **Schmied und Alchemist** (seit 371): das Bild als eigene Spalte
     links, auf das Gesicht ausgerichtet — wie beim Barbier. Unter dem
     Verlauf war vom Schmied nur der Harnisch zu sehen. */
  .tafel.schmiedtafel,.tafel.alchemisttafel{--tb:860px;--bs:38%;--bs-anteil:.38;}
  @media (max-aspect-ratio:2/1){
    .tafel.schmiedtafel,.tafel.alchemisttafel{--bs:31%;--bs-anteil:.31;}
    .tafel.schmiedtafel .warestueck > b,.tafel.alchemisttafel .warestueck > b{font-size:12px !important;}
    .tafel.schmiedtafel .warestueck .knopf.rolle,.tafel.alchemisttafel .warestueck .knopf.rolle{--rh:30px !important;font-size:12px;}
    .tafel.schmiedtafel .warestueck .knopf.rolle span,.tafel.alchemisttafel .warestueck .knopf.rolle span{overflow:visible;}
  }
  .tafel.schmiedtafel > .tafelbild,.tafel.alchemisttafel > .tafelbild{inset:0 auto 0 0;width:calc(var(--bs) + 24px);
    object-fit:cover;object-position:50% 26%;border-radius:14px 0 0 14px;}
  .tafel.alchemisttafel > .tafelbild{object-position:46% 24%;}
  .tafel.schmiedtafel:has(> .tafelbild) > .tafelinhalt,.tafel.alchemisttafel:has(> .tafelbild) > .tafelinhalt{
    width:calc(100% - var(--bs));padding:16px 18px 14px 26px;
    background:linear-gradient(90deg,rgba(21,16,10,0) 0,rgba(21,16,10,.96) 24px,rgba(21,16,10,.98) 100%);}
  .tafel.schmiedtafel .ware,.tafel.alchemisttafel .ware{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));}
  .tafel.schmiedtafel .warestueck,.tafel.alchemisttafel .warestueck{min-width:0;}
  .tafel.schmiedtafel .warestueck > b,.tafel.alchemisttafel .warestueck > b{max-width:100%;overflow-wrap:break-word;}
  .tafel.schmiedtafel .warestueck,.tafel.alchemisttafel .warestueck{padding:8px 4px 6px;}
  .tafel.schmiedtafel .warestueck > b,.tafel.alchemisttafel .warestueck > b{font-size:14px;}
  .tafel.schmiedtafel .warestueck .knopf.rolle,.tafel.alchemisttafel .warestueck .knopf.rolle{--rh:34px;min-width:0;width:100%;}
  /* **„Neue Ware“ steht unten im Bild über dem Schmied** (386, Befund
     Max): in der Warenspalte lag die Banderole am kleinen Telefon über
     den Stücken. Rechts neben dem „?“, mittig in der Bildspalte; die
     Ware hat ihre Spalte für sich. Der Splitterstand rückt mit. */
  .tafel.schmiedtafel > .tafelinhalt > .ladenfuss{position:absolute;left:calc(-1 * (100% / (1 - var(--bs-anteil, .38)) * var(--bs-anteil, .38)));
    width:calc(100% / (1 - var(--bs-anteil, .38)) * var(--bs-anteil, .38));bottom:10px;padding:0 0 0 56px;margin:0;z-index:3;box-sizing:border-box;}
  .tafel.schmiedtafel .ladenfuss .knopf.rolle.ladenneu{--rh:38px;min-width:0;font-size:14px;}
  .tafel.schmiedtafel .splitterstand{position:static;transform:none;font-size:17px;margin-left:6px;}
  .tafel.schmiedtafel:has(> .tafelbild) > .tafelinhalt{justify-content:center;overflow:visible;}
  /* **Rüstkammer** (seit 372, umgebaut 386 nach Befund Max): die
     Stücke nehmen die **ganze Breite**, fünf nebeneinander. Das Bild
     der Waffenkammer bleibt nur als Stimmung unter einem dunklen
     Schleier; eine eigene Bildspalte kostete eine Kachel je Reihe. Der
     Fuß ist **eine** Zeile: „?“ links, Zusammenfügen mittig, „Alle
     zusammenfügen“ rechts. */
  .tafelfeld > .tafel.ruestkammer{width:100%;min-height:0;height:calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px));
    max-height:calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px));}
  .tafel.ruestkammer:has(> .tafelbild) > .tafelinhalt{width:100%;padding:12px 22px 0 14px;justify-content:flex-start;
    background:linear-gradient(rgba(21,16,10,.86),rgba(21,16,10,.9));}
  .tafel.ruestkammer .kammer{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;max-height:none;}
  .tafel.ruestkammer .kammerkachel{padding:6px 3px 5px;}
  .tafel.ruestkammer .kammerkachel > img{width:40px;height:40px;}
  .tafel.ruestkammer .kammerkachel > b{font-size:12px;}
  .tafel.ruestkammer .kammerkachel .warewerte{font-size:11px;gap:4px;}
  .tafel.ruestkammer .kammerkachel .warewerte img{width:14px;height:14px;}
  .tafel.ruestkammer .tafelinhalt > .ladenfuss{background:linear-gradient(180deg,rgba(21,16,10,0),rgba(21,16,10,.97) 30%);
    margin:0 -22px 0 -14px;padding:10px 22px 10px 64px;}
  .tafel.ruestkammer .ladenfuss .fussmitte:has(.allesfuegen){flex-direction:row;justify-content:center;}
  .tafel.ruestkammer .allesfuegen{position:absolute;right:0;top:50%;transform:translateY(-50%);max-width:26%;
    white-space:normal;line-height:1.2;font-size:12.5px;}
  .tafel.ruestkammer .knopf.rolle.schmelzen{--rh:38px;width:auto;min-width:230px;}
  /* **Turnierplatz** (seit 371): drei Gegner ohne Rollen nach rechts —
     „Kampf“ und ⏩ stehen nebeneinander statt auf einem Raster mit
     Spiegelspalte, die Köpfe etwas kleiner. */
  .tafel.turniertafel:has(> .tafelbild) > .tafelinhalt{width:76%;padding-left:40px;}
  .turniertafel .gegnerwahl{gap:8px;}
  .turniertafel .gegnerkarte{padding:8px 4px 8px;min-width:0;}
  .turniertafel .gegnerkarte .kopfbild{width:82px;height:82px;}
  .turniertafel .gegnerkarte .gegnername{font-size:14px;}
  .turniertafel .gegnerkarte .kampfwahl{display:flex;justify-content:center;gap:6px;}
  .turniertafel .gegnerkarte .kampfwahl > span:first-child{display:none;}
  .turniertafel .gegnerkarte .kampfwahl .knopf.rolle.kampfselbst{--rh:34px;min-width:86px;}
  .turniertafel .gegnerkarte .kampfwahl .kampfpfeile{margin:0;}
  /* Die Questtafel bleibt auch quer **ein** Bild mit zwei Inseln —
     keine Spalten; nur kleiner gesetzt. */
  .tafel.qtafel{--tb:100%;--eckel:20px;--eckeu:14px;aspect-ratio:auto;height:calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px));max-height:min(560px,calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px)));}
  .tafel.qtafel:has(> .tafelbild){flex-direction:column;}
  .tafel.qtafel:has(> .tafelbild) > .tafelinhalt{width:auto;padding:16px 20px 14px;gap:8px;justify-content:flex-start;
    background:
      radial-gradient(120% 95% at 0% 0%,rgba(14,10,6,.9) 0%,rgba(14,10,6,.6) 32%,rgba(14,10,6,0) 62%),
      linear-gradient(0deg,rgba(14,10,6,.92) 0%,rgba(14,10,6,.6) 20%,rgba(14,10,6,0) 42%);}
  .tafel.qtafel > .tafelbild{object-position:50% 35%;}
  .qkopf{gap:10px;max-width:min(80%,520px);}
  .qzeichen{width:36px;height:36px;}
  .qzeichen svg{width:20px;height:20px;}
  .qtitel h3{font-size:23px;}
  .qlohn{font-size:14px;margin-top:3px;}
  .qinfo{font-size:12px;}
  .qhaupt .knopf.rolle{--rh:42px;min-width:220px;font-size:18px;}
  .qtafel .qrechts .knopf.kampfrund{width:38px;height:38px;}
  .qtext{font-size:14px;margin-bottom:8px;}
  .qstand p{font-size:12.5px;margin-top:6px;}
  .qtafel .schacht{margin-left:10px;}
}

/* ─── Der Barbier: immer Spiegel links, Werkbank rechts ─────────────
   Auch am Rechner: ein Spiegelband von 170 Punkten wäre für ein Gesicht
   zu flach, und acht Zeilen zum Blättern brauchen Breite, nicht Höhe. */
.tafelfeld > .tafel.barbier{--tb:880px;--bildb:calc(min(var(--tb), var(--fw,100vw) - 120px) * .36);
  position:relative;padding-left:var(--bildb);min-height:min(500px,calc(var(--fh,100vh) - 132px + var(--ft,0px)));}
.tafelfeld > .tafel.barbier > .tafelbild{position:absolute;left:0;top:0;width:var(--bildb);height:100%;max-height:none;aspect-ratio:auto;
  border-bottom:0;border-right:3px solid #18130e;border-radius:5px 0 0 5px;}
.tafelfeld > .tafel.barbier > .tafelinhalt{flex:1 1 auto;justify-content:safe center;padding:28px 32px 24px;
  /* Die Stube des Barbiers (assets/abenteuer/ui/barbier-stube.webp, seit 346):
     Holztaverne, der Barbier bei der Arbeit — unter einem dunklen Schleier,
     damit die Werkbank darauf lesbar bleibt. */
  background-image:linear-gradient(180deg,rgba(21,16,10,.55),rgba(21,16,10,.72) 60%,rgba(21,16,10,.9)),url(../assets/abenteuer/ui/barbier-stube.webp);
  background-size:cover;background-position:50% 30%;border-radius:0 14px 14px 0;}
.tafelfeld > .tafel.barbier .ladenhilfe{left:var(--bildb);border-radius:0 5px 5px 0;}
/* Die Werkbank in dunklem Glas, Schrift in Tan und Gold. */
.tafel.barbier .rasse,.tafel.barbier .geschlechtwahl button,.tafel.barbier .regel{
  background:var(--glas);border-color:var(--glasrand);color:var(--tafelschrift);}
.tafel.barbier .rasse img{background:#1d2a24;}
.tafel.barbier .rasse[aria-pressed="true"],.tafel.barbier .geschlechtwahl button[aria-pressed="true"]{
  border-color:var(--tafelgold);background:rgba(247,216,120,.14);box-shadow:0 0 0 2px rgba(247,216,120,.25);}
.tafel.barbier .regelwert small{color:var(--tafeltan);}
.tafel.barbier .regelwert b{color:var(--tafelgold);}
.tafel.barbier .barbierleer{color:var(--tafeltan);}
.tafel.barbier .barbiergrund{color:#ff9b8a;}
.tafelfeld > .tafel.barbier .tafelinhalt > .ladenfuss{position:sticky;bottom:0;z-index:2;}
@media (max-height:560px) and (min-width:560px){
  .tafelfeld > .tafel.barbier{min-height:calc(var(--fh,100vh) - 56px + var(--ft,0px));}
  .tafelfeld > .tafel.barbier .barbierbank{gap:7px;}
  .tafelfeld > .tafel.barbier .regelpfeil{height:32px;font-size:22px;}
  .tafelfeld > .tafel.barbier .regel{grid-template-columns:34px 1fr 34px;padding:2px;}
  .tafelfeld > .tafel.barbier .rasse{font-size:11px;}
  .tafelfeld > .tafel.barbier .rasse img{width:auto;height:40px;}
  /* Seit 371: die Werkbank passt ohne Rollen — Zeilen flacher, und der
     Fuß hat einen Grund, falls doch gerollt wird (vorher lagen „Würfeln“
     und „Speichern“ über den letzten Reglern). */
  .tafelfeld > .tafel.barbier > .tafelinhalt{padding:14px 20px 10px;}
  .tafelfeld > .tafel.barbier .regelpfeil{height:30px;font-size:20px;}
  .tafelfeld > .tafel.barbier .regelwert b{font-size:15px;}
  .tafelfeld > .tafel.barbier .barbierregler{gap:5px;}
  .tafelfeld > .tafel.barbier .tafelinhalt > .ladenfuss{background:linear-gradient(180deg,rgba(21,16,10,0),rgba(21,16,10,.94) 30%);
    margin:0 -20px -10px;padding:6px 20px 8px;}
  .tafelfeld > .tafel.barbier .knopf.rolle.barbierja,.tafelfeld > .tafel.barbier .ladenfuss .knopf.rolle{--rh:40px;}
}
/* Beim Barbier steht unten im Spiegel sein Schild („Mensch · Mann“):
   die Ecke rückt dort nach oben links in den Spiegel. */
.tafelfeld > .tafel.barbier > .ladenecke{top:var(--eckeu,18px);bottom:auto;}
@media (max-width:640px){
  .tafelfeld > .tafel.barbier{padding-left:0;min-height:0;}
  .tafelfeld > .tafel.barbier > .tafelbild{position:relative;width:100%;height:240px;aspect-ratio:auto;border-right:0;border-bottom:3px solid #18130e;border-radius:5px 5px 0 0;}
  .tafelfeld > .tafel.barbier > .tafelinhalt{border-radius:0 0 14px 14px;}
  .tafelfeld > .tafel.barbier .ladenhilfe{left:0;}
  .barbierregler{grid-template-columns:1fr;}
}

/* ─── Die Pergamentrolle (Banderole) ────────────────────────────────
   Dasselbe Band wie „Zurück“ und die Knöpfe im Hauptmenü
   (assets/banner.webp), hier klein und für jede Breite: Namen auf dem
   Turnierplatz, das Schild unter dem Spiegel des Barbiers, „Kaufen“
   beim Alchemisten und beim Schmied. Die Schrift sitzt im Körper des
   Bandes, nicht in den Enden — daher der Versatz nach oben. */
.rolle{--rh:38px;--re:calc(var(--rh) * 340 / 361);
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--rh);min-width:calc(var(--re) * 2 + 24px);
  border-style:solid;border-width:0 var(--re);border-image:url(../assets/banner.webp) 0 340 fill / 0 var(--re) stretch;
  background:none;padding:0;color:#5c341a;font-family:var(--display);font-weight:400;font-size:calc(var(--rh) * .42);line-height:1;
  white-space:nowrap;text-shadow:none;}
.rolle > *{transform:translateY(calc(var(--rh) * -0.15));padding-top:.12em;overflow:hidden;text-overflow:ellipsis;}
.knopf.rolle{--rh:44px;width:auto;min-width:200px;min-height:0;border-radius:0;box-shadow:none;cursor:pointer;transition:filter .15s,transform .15s;
  color:#5c341a;}
.knopf.rolle > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.knopf.rolle .lohnzeichen{width:1em;height:1em;}
/* In der Ware (Schmied, Alchemist) füllt die Rolle die Karte. */
.warestueck .knopf.rolle{width:100%;min-width:0;}
.knopf.rolle:hover:not([disabled]){filter:brightness(1.06) drop-shadow(0 3px 4px rgba(60,30,10,.35));transform:translateY(-1px);}
.knopf.rolle:active:not([disabled]){transform:translateY(1px);}
.knopf.rolle[disabled]{filter:grayscale(.85) opacity(.55);cursor:default;}

/* ─── Das Preisschild: rot, gezackt, schräg — wie ein Sonderangebot ───
   Oben links über der Ware, ein Stück hinausragend. Der Stern ist ein
   schwarzer Stern mit einem roten darin: so bekommt er die Kontur aller
   Zeichen im Spiel. */
.preisschild{--z:polygon(50% 0,61% 13%,77% 6%,79% 23%,96% 24%,89% 40%,100% 50%,89% 60%,96% 76%,79% 77%,77% 94%,61% 87%,50% 100%,39% 87%,23% 94%,21% 77%,4% 76%,11% 60%,0 50%,11% 40%,4% 24%,21% 23%,23% 6%,39% 13%);
  position:absolute;left:-12px;top:-12px;z-index:3;width:58px;height:58px;display:grid;place-items:center;transform:rotate(-14deg);
  clip-path:var(--z);background:#18130e;pointer-events:none;}
.preisschild::before{content:"";position:absolute;inset:3px;clip-path:var(--z);
  background:radial-gradient(circle at 38% 32%,#d0473a,#a3201a 62%,#6e1410);}
.preisschild span{position:relative;display:flex;align-items:center;gap:1px;color:#f6e3bb;font-family:var(--display);font-size:17px;
  line-height:1;padding-top:.1em;text-shadow:0 1px 0 rgba(0,0,0,.5);}
.preisschild img{width:13px;height:13px;object-fit:contain;margin-top:-.1em;}
.warestueck.mitschild{padding-top:14px;}
.warestueck .knopf.rolle{--rh:34px;margin-top:4px;}
@media (max-height:560px) and (min-width:560px){
  .preisschild{width:50px;height:50px;left:-10px;top:-10px;}
  .preisschild span{font-size:15px;}
}

/* „Gespeichert ✓“ beim Barbier ist erledigt, nicht gesperrt: das Band
   bleibt farbig, nur ruhiger. */
.knopf.rolle.barbierja[disabled]{filter:saturate(.7);opacity:.85;}

/* ─── Kampf: die Rolle mittig, ⏩ gleich rechts daneben (seit 349) ──
   Überall, wo gekämpft wird (Turnier, Gilde): drei Spalten, die Rolle
   in der mittleren, der Turbo am linken Rand der rechten — so steht
   „Kampf“ genau in der Mitte der Karte. Auf der Questtafel sitzt ⏩
   unten rechts (`.qrechts`). */
.kampfwahl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;}
.kampfwahl .knopf.rolle.kampfselbst{--rh:40px;min-width:150px;grid-column:2;}
.kampfwahl .kampfpfeile{grid-column:3;justify-self:start;display:flex;margin:0 0 0 8px;}
.kampfpfeile{display:inline-flex;gap:14px;}
.kampfwahl .knopf.kampfrund{width:34px;height:34px;min-height:0;border-radius:50%;padding:0;display:grid;place-items:center;
  background:rgba(14,10,6,.55);border:1px solid rgba(247,216,120,.45);color:#f7d878;box-shadow:0 2px 6px rgba(0,0,0,.35);}
.kampfwahl .kampfrund svg{width:17px;height:17px;filter:none;}
.kampfwahl .knopf.kampfrund:hover:not([disabled]){background:rgba(247,216,120,.18);border-color:#f7d878;color:#fff3cf;transform:translateY(-1px);}
.gegnerkarte .kampfwahl .knopf.rolle.kampfselbst{--rh:36px;min-width:112px;}
.gegnerkarte .kampfwahl .knopf.kampfrund{width:30px;height:30px;}
.gegnerkarte .kampfwahl .kampfrund svg{width:15px;height:15px;}
/* Turnierplatz: der Name steht über dem Bildnis. */
.gegnername{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.1;color:#971e1b;padding-top:.1em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gegnerkarte .kampfbild{margin-top:4px;}

/* ─── Der Beutel (seit 371) ──────────────────────────────────────────
   Eine Tafel wie Schmied und Alchemist (js/beute.js): links der Beutel
   als Bild auf warmem Schein, rechts die Fundstücke als Kacheln aus
   dunklem Glas — Bild, Name, Zustand. Was bereit ist, hat einen goldenen
   Rand und wippt; alles andere sagt, wann es wieder geht. Kreuz oben
   rechts, „?“ unten links darunter, Gold und Mana im Konto der Karte. */
/* Ohne `inset`: Lage und Maß kommen von `.tafelfeld` (oben), sonst zöge
   die Fläche über den Bildschirm hinaus. */
.beutefeld{position:absolute;z-index:45;background:rgba(8,6,4,.74);animation:abenteuerFeldAuf .2s ease-out;}
.beutefeld.beutefrei{position:fixed;inset:0;display:grid;place-items:center;padding:56px 64px 76px;}
.tafel.beutetafel{--tb:820px;min-height:0;flex-direction:row;align-items:stretch;}
.beutebild{flex:0 0 31%;display:grid;place-items:center;padding:22px 6px 22px 24px;box-sizing:border-box;
  background:radial-gradient(closest-side,rgba(255,196,110,.2),rgba(255,196,110,0) 78%);}
.beutebild img{width:100%;max-width:230px;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.75));
  animation:beuteAuf .42s cubic-bezier(.2,.8,.3,1) both;}
.tafel.beutetafel > .tafelinhalt{flex:1 1 auto;margin:0;padding:24px 30px 24px 12px;background:none;justify-content:center;gap:14px;}
.beutetafel .tafelkopf h3{font-size:26px;}
.beutefach{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--sp,3),minmax(0,1fr));gap:10px;}
.beutefach > li{display:flex;}
.beutestueck{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  padding:12px 8px 10px;border-radius:10px;cursor:pointer;font:inherit;text-align:center;
  color:var(--tafelschrift);background:var(--glas);border:1px solid var(--glasrand);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;animation:beuteHoch .45s cubic-bezier(.2,.8,.3,1) both;}
.beutefach > li:nth-child(2) .beutestueck{animation-delay:.05s;} .beutefach > li:nth-child(3) .beutestueck{animation-delay:.1s;}
.beutefach > li:nth-child(4) .beutestueck{animation-delay:.15s;} .beutefach > li:nth-child(5) .beutestueck{animation-delay:.2s;}
.beutestueck:hover{transform:translateY(-2px);border-color:var(--tafelgold);}
.beutestueck:focus-visible{outline:2px solid var(--tafelgold);outline-offset:2px;}
.beutestueck .stueckbild{position:relative;width:64px;height:64px;display:grid;place-items:center;margin-bottom:2px;}
.beutestueck .stueckbild > img{max-width:100%;max-height:100%;object-fit:contain;display:block;filter:drop-shadow(0 5px 8px rgba(0,0,0,.6));}
.beutestueck > b{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.1;color:var(--tafelgold);padding-top:.12em;}
.beutestueck > small{font-size:12.5px;line-height:1.25;color:var(--tafeltan);}
.beutestueck.offen{border-color:rgba(247,216,120,.65);background:rgba(64,46,20,.6);}
.beutestueck.offen > small{color:#fff3cf;}
.beutestueck.offen .stueckbild > img,.beutestueck.offen .kartenstapel{animation:beuteWinkt 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 9px rgba(255,214,120,.75)) drop-shadow(0 5px 8px rgba(0,0,0,.6));}
.beutestueck.quelle.offen .stueckbild > img{filter:drop-shadow(0 0 10px rgba(110,195,255,.9)) drop-shadow(0 5px 8px rgba(0,0,0,.6));}
.beutestueck.klingt .stueckbild{animation:beuteKlingt .45s ease;}
.beutestueck .quellzahl{position:absolute;right:-8px;top:-6px;min-width:24px;height:24px;padding:.14em 6px 0;box-sizing:border-box;border-radius:999px;
  display:grid;place-items:center;font-family:var(--display);font-weight:400;font-size:15px;color:#eaf6ff;
  background:radial-gradient(circle at 36% 30%,#5fb4ea,#2a6fa8 65%,#1b4a72);border:2px solid #14100b;}
.beutestueck .quellzahl.leer{background:#4a4036;color:rgba(238,220,171,.6);}
.beutestueck .kartenstapel{position:relative;display:block;width:100%;height:100%;}
.beutestueck .kartenstapel img{position:absolute;left:50%;top:50%;height:86%;width:auto;border-radius:6%;
  border:1.5px solid #18130e;box-shadow:0 3px 8px rgba(0,0,0,.5);transform-origin:50% 90%;transition:transform .25s ease;}
.beutestueck .kartenstapel img:nth-child(1){transform:translate(-50%,-50%) rotate(-16deg) translateX(-24%);}
.beutestueck .kartenstapel img:nth-child(2){transform:translate(-50%,-50%) translateY(-3%);}
.beutestueck .kartenstapel img:nth-child(3){transform:translate(-50%,-50%) rotate(16deg) translateX(24%);}
.muenzfund{position:absolute;z-index:2;left:50%;top:-10%;transform:translate(-50%,0);pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-size:30px;color:#fff;padding-top:.12em;
  text-shadow:0 0 8px rgba(255,205,90,.95),0 2px 0 rgba(0,0,0,.6);animation:muenzfund 1.6s ease forwards;}
.muenzfund.leer{font-size:18px;color:#f3e7c8;}
@keyframes muenzfund{0%{opacity:0;transform:translate(-50%,10%);}15%,60%{opacity:1;}100%{opacity:0;transform:translate(-50%,-120%);}}
@keyframes beuteAuf{from{opacity:0;transform:translateY(14px) scale(.94);}}
@keyframes beuteHoch{from{opacity:0;transform:translateY(16px) scale(.9);}}
@keyframes beuteWinkt{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes beuteKlingt{0%,100%{transform:rotate(0);}25%{transform:rotate(-8deg);}60%{transform:rotate(7deg);}}
.beutetafel .ladenhilfe{left:31%;border-radius:0 14px 14px 0;background:rgba(21,16,10,.97);color:#f3e7c8;font-size:15px;line-height:1.45;}
@media (max-height:560px) and (min-width:560px){
  .tafel.beutetafel{--tb:760px;}
  .beutebild{flex-basis:27%;padding:14px 4px 14px 16px;}
  .tafel.beutetafel > .tafelinhalt{padding:16px 22px 16px 8px;gap:10px;}
  .beutetafel .tafelkopf h3{font-size:22px;}
  .beutefach{gap:8px;}
  .beutestueck{padding:8px 6px 8px;}
  .beutestueck .stueckbild{width:50px;height:50px;}
  .beutestueck > b{font-size:15px;}
  .beutestueck > small{font-size:12px;}
  .beutetafel .ladenhilfe{left:27%;}
}
@media (max-height:400px) and (min-width:560px){
  .tafel.beutetafel > .tafelinhalt{padding:10px 18px 10px 6px;gap:6px;}
  .beutetafel .tafelkopf h3{font-size:19px;}
  .beutefach{gap:6px;}
  .beutestueck{padding:6px 4px 6px;gap:1px;}
  .beutestueck .stueckbild{width:40px;height:40px;}
  .beutestueck > b{font-size:14px;}
}
@media (max-width:640px){
  .tafel.beutetafel{flex-direction:column;}
  .beutebild{flex:0 0 auto;height:120px;padding:16px 0 0;}
  .beutebild img{width:auto;height:100%;}
  .tafel.beutetafel > .tafelinhalt{padding:12px 16px 18px;}
  .beutefach{grid-template-columns:repeat(2,minmax(0,1fr));}
  .beutetafel .ladenhilfe{left:0;}
}
@media (prefers-reduced-motion:reduce){
  .beutebild img,.beutestueck,.beutestueck.offen .stueckbild > img,.beutestueck.offen .kartenstapel,.muenzfund{animation:none;}
}
.beutetafel > .beutezu{z-index:6;}

/* ─── Juwelen (377) ──────────────────────────────────────────────────
   Sockel-Rauten an Kacheln (Rüstkammer, Beutel) und der Juwelenbeutel
   unter der Kammer. Dieselben Chips wie im Kompendium. */
.kammerkachel{position:relative;}
/* Sockel als Ringe (382, Wunsch Max): ein leerer Kreis oben rechts
   heißt „hier passt ein Juwel“, gefüllt heißt „sitzt schon eins“. */
.kammerkachel .sockelpunkte{position:absolute;right:5px;top:5px;display:flex;gap:3px;pointer-events:none;}
.kammerkachel .sockelpunkte b,.ausrplatz .sockelpunkte b{display:block;width:11px;height:11px;border-radius:50%;box-sizing:border-box;
  border:2px solid #cfe7ff;background:rgba(0,0,0,.45);box-shadow:0 1px 2px rgba(0,0,0,.7);}
.sockelpunkte b.voll{background:radial-gradient(circle at 35% 30%,#bfe6ff,#4e9fd8 70%);border-color:#eaf6ff;}
.kammerkachel.gesperrt .sockelpunkte{right:30px;}
/* Das Juwelenfach im Beutel (382): Steine als Kacheln wie im Beutel. */
.juwelraster{--sp:4;}
.juwelstueck{cursor:default;}
.juwelstueck .stueckbild{width:56px;height:56px;}
.juwelstueck.selten{border-color:rgba(123,228,149,.6);}
.juwelstueck.episch{border-color:rgba(255,128,96,.7);}
.juwelfuss{margin:4px 0 0;font-size:12.5px;color:var(--tafeltan);text-align:center;}
.juwelbild{width:16px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:3px;}

/* ─── Der Hütchenspieler (377) ─────────────────────────────────────── */
.huetchenfeld{display:flex;flex-direction:column;gap:14px;align-items:center;padding:6px 0;}
.huetchensage{margin:0;font-size:14.5px;color:#f3e7c8;text-align:center;min-height:1.4em;}
.becherbahn{position:relative;width:316px;height:110px;margin-top:34px;}   /* Platz für den gehobenen Becher über der Bahn */
.becher{position:absolute;left:0;top:0;width:100px;height:96px;padding:0;border:0;background:none;cursor:pointer;z-index:2;
  transition:transform .34s cubic-bezier(.4,.1,.6,.9);}
.becher img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55));transition:translate .22s ease;}
.becher.auf img{translate:0 -46px;}
.becher:disabled{cursor:default;}
.becher:not(:disabled):hover img{translate:0 -5px;}
/* Die Kugel liegt **unter** dem Becher: Becherfuß bei 96 von 110 —
   sie endet darüber, sonst lugt sie unten heraus (381). Mitte des
   100er-Bechers = 35 + 15. */
.kugel{position:absolute;left:35px;bottom:20px;width:30px;height:30px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 32% 28%,#fff3c8,#e0b352 55%,#8a5c1c);
  box-shadow:0 0 0 2px var(--ink),0 3px 6px rgba(0,0,0,.6);transition:transform .34s cubic-bezier(.4,.1,.6,.9);}
.kugel[hidden]{display:none;}
/* Einsatz-Kapsel und Banderole nebeneinander (381). */
.huetchenwahl{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;}
.huetchenwahl .qwahl{font-family:var(--display);font-size:16px;color:var(--tafelgold);}
.huetchenwahl .qwahl .lohnzeichen{width:16px;height:16px;vertical-align:-2px;}
.huetchenwahl .knopf.banderole{--bandhoehe:48px;width:200px;font-size:19px;}

/* ─── Der Stall (377) ──────────────────────────────────────────────── */
.stallstand{margin:0 0 10px;font-size:14px;color:#f3e7c8;text-align:center;}
.stallreihe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.stalltier{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:24px 6px 10px;min-width:0;
  border-radius:10px;background:rgba(14,10,6,.55);border:1px solid rgba(238,220,171,.25);text-align:center;}
.stalltier.an{border-color:var(--gold-hi);box-shadow:0 0 14px rgba(242,193,78,.35);}
.stalltier img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5));}
.stalltier b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--gold-hi);}
.stalltier small{font-size:11.5px;color:#f3e7c8;}
.stalltier .stallspruch{font-size:11px;font-style:italic;color:var(--tan);min-height:2.2em;}
.stalltier .preisschild{top:-4px;}
.stalltier .knopf.rolle{min-width:0;width:100%;}
@media (max-height:560px) and (min-width:560px){
  .stallreihe{gap:7px;}
  .stalltier img{width:50px;height:50px;}
  .stalltier .stallspruch{display:none;}
}

/* ─── Die Wettbude (377) ───────────────────────────────────────────── */
.wettefeld{display:flex;flex-direction:column;gap:10px;}
.wettesage{margin:0;font-size:14.5px;color:#f3e7c8;text-align:center;}
.wettenliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:190px;overflow:auto;}
.wettezeile{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:9px;
  background:rgba(14,10,6,.55);border:1px solid rgba(238,220,171,.22);}
.wettezeile b{flex:1;font-family:var(--display);font-weight:400;font-size:16px;color:var(--parch-hi);}
.wettezeile span{font-size:14px;color:var(--gold-hi);display:inline-flex;align-items:center;gap:4px;}
/* ─── Das Wett-Duell (382, Wunsch Max) ──────────────────────────────
   Wie ein kleines Duell: zwei Köpfe, drei Runden-Punkte, die Bühne, in
   der die Hände aufeinandertreffen — die eigene von links, die des
   Gegners gespiegelt von rechts. Eine Spalte, große Knöpfe: auch auf
   dem Telefon mit dem Daumen spielbar. */
.wettenliste[hidden],.wettemeine[hidden],.wetteannahme[hidden],.wetteneu[hidden]{display:none;}
.wetteduell{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.wetteduellkopf{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;}
.wettespieler{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;}
.wettespieler img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:rgba(14,10,6,.6);
  border:2px solid var(--glasrand);box-shadow:0 3px 8px rgba(0,0,0,.5);}
.wettekopf{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-family:var(--display);font-size:30px;color:var(--tafeltan);background:rgba(14,10,6,.6);
  border:2px solid var(--glasrand);box-shadow:0 3px 8px rgba(0,0,0,.5);padding-top:.1em;box-sizing:border-box;}
.wettespieler b{font-family:var(--display);font-weight:400;font-size:14px;color:var(--tafelgold);max-width:110px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wetterunden{display:flex;gap:7px;}
.wetterunden i{width:13px;height:13px;border-radius:50%;background:rgba(238,220,171,.2);border:1.5px solid rgba(238,220,171,.4);}
.wetterunden i.dran{border-color:var(--tafelgold);box-shadow:0 0 8px rgba(247,216,120,.6);}
.wetterunden i.war{background:rgba(238,220,171,.55);}
.wetterunden i.war.sieg{background:#7be495;border-color:#2f7b44;}
.wetterunden i.war.nieder{background:#e0574a;border-color:#7b2f28;}
.wetteeinsatz{margin:0;font-size:14.5px;color:#f3e7c8;}
.wetteeinsatz .qwahl{font-family:var(--display);font-size:16px;color:var(--tafelgold);}
.wettebuehne{display:flex;align-items:center;justify-content:center;gap:16px;min-height:88px;}
.wettebuehne[hidden]{display:none;}
.wettebuehne .wettehand{width:84px;height:auto;filter:drop-shadow(0 5px 8px rgba(0,0,0,.55));}
.wettebuehne.klatscht .buehneich{animation:handLinks .4s cubic-bezier(.2,1.4,.4,1);}
.wettebuehne.klatscht .buehnegegner{animation:handRechts .4s cubic-bezier(.2,1.4,.4,1);}
@keyframes handLinks{from{transform:translateX(-40px);opacity:0;}}
@keyframes handRechts{from{transform:translateX(40px);opacity:0;}}
.buehnewer{font-style:normal;font-family:var(--display);font-size:26px;color:var(--tafeltan);width:34px;}
.buehnewer.sieg{color:#7be495;} .buehnewer.nieder{color:#e0574a;}
.wettefrage{margin:0;font-size:14.5px;color:#f3e7c8;min-height:1.3em;}
.wettewahl{display:flex;gap:14px;justify-content:center;}
.wettewahl[hidden]{display:none;}
.wettezeichen{width:84px;height:84px;border-radius:12px;border:2px solid var(--glasrand);background:var(--glas);cursor:pointer;
  display:grid;place-items:center;transition:transform .15s ease,border-color .15s ease;}
.wettezeichen:hover{transform:translateY(-3px) scale(1.05);border-color:var(--tafelgold);}
.wettezeichen.an{border-color:var(--tafelgold);background:rgba(58,40,22,.9);box-shadow:0 0 14px rgba(247,216,120,.4);}
.wettezeichen:disabled{opacity:.45;cursor:default;transform:none;}
.wettezeichen .wettehand{width:64px;height:auto;}
.wettehand.gegner{transform:scaleX(-1);}
@media (max-height:560px) and (min-width:560px){
  .wettespieler img,.wettekopf{width:44px;height:44px;}
  .wettekopf{font-size:22px;}
  .wettezeichen{width:64px;height:64px;}
  .wettezeichen .wettehand{width:48px;}
  .wettebuehne{min-height:64px;}
  .wettebuehne .wettehand{width:62px;}
}
.wettemeine{padding:8px 10px;border-radius:9px;background:rgba(14,10,6,.45);border:1px solid rgba(238,220,171,.2);}
.wettemeine h5{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:14px;color:var(--gold-hi);}
.wettemeine .wettezeile b{flex:0 0 auto;}
.wettemeine .wettezeile span{flex:1;color:#f3e7c8;font-size:12.5px;}
.wetteneu{align-self:center;}
.stalltier .knopf.rolle span{font-size:14px;}

/* ─── Holz für den Schmied (378) ───────────────────────────────────── */
.holzfeld{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.holzsage{margin:0;font-size:14.5px;color:#f3e7c8;max-width:440px;}
.holzstand{display:flex;align-items:center;gap:10px;width:min(360px,80%);}
.holzstand .erfolgbalken{flex:1;}
.holzstand b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--gold-hi);white-space:nowrap;}
.holztipp{margin:0;font-size:12.5px;color:var(--tan);max-width:420px;}
.holzab{width:260px;--bandhoehe:56px;}

/* ─── Der Opferaltar (380, neu gebaut 381) ─────────────────────────
   Wie der Beutel: links ein schwarzer Beutel mit rotem Schein — dahin
   zieht man die Stücke —, darunter der Balken; rechts die Kacheln. Das
   Altarbild liegt abgedunkelt hinter allem. `altarplus` ist der rote
   Abschnitt dessen, was gerade gewählt ist. */
.tafel.altartafel{position:relative;--tb:880px;}
.altartafel > .altargrund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:inherit;
  filter:brightness(.32) saturate(.8);pointer-events:none;}
.altartafel > .altarbeutel,.altartafel > .tafelinhalt{position:relative;z-index:1;}
.altarbeutel{display:flex;flex-direction:column;justify-content:center;gap:12px;
  background:radial-gradient(closest-side,rgba(200,40,30,.28),rgba(200,40,30,0) 78%);transition:transform .15s ease;}
.altarbeutel > img{filter:brightness(.13) saturate(0) drop-shadow(0 0 14px rgba(230,60,40,.55)) drop-shadow(0 14px 22px rgba(0,0,0,.8));
  max-width:200px;transition:filter .15s ease,transform .15s ease;}
.altarbeutel.nimmt{transform:scale(1.04);}
.altarbeutel.nimmt > img{filter:brightness(.2) saturate(0) drop-shadow(0 0 26px rgba(255,90,60,.95)) drop-shadow(0 14px 22px rgba(0,0,0,.8));}
.altarstand{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,220px);}
.altarstand .erfolgbalken{width:100%;height:12px;position:relative;}
.altarstand .erfolgbalken .altarplus{position:absolute;top:0;bottom:0;left:auto;background:linear-gradient(180deg,#e0574a,#a3261a);}
.altarstand b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--tafelgold);white-space:nowrap;padding-top:.1em;}
.knopf.banderole.altaropfern{--bandhoehe:44px;width:min(100%,250px);white-space:nowrap;font-size:15px;}
.altartafel > .tafelinhalt{min-height:0;justify-content:flex-start;padding-bottom:18px;}
.altarfach{max-height:min(52vh,330px);overflow:auto;padding:4px 6px 4px 2px;align-content:start;--sp:4;}
.altarstueck{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:9px 6px 8px;}
.altarstueck .stueckbild{width:48px;height:48px;}
.altarstueck > b{font-size:14px;}
.altarstueck .warewerte{font-size:11px;gap:4px;color:var(--tafeltan);} .altarstueck .warewerte img{width:14px;height:14px;}
.altarstueck.gewoehnlich{border-color:rgba(200,190,170,.35);}
.altarstueck.selten{border-color:rgba(90,190,90,.6);}
.altarstueck.episch{border-color:rgba(170,110,230,.7);}
.altarstueck.legendaer{border-color:rgba(230,80,60,.8);}
.altarstueck.an{background:rgba(110,24,16,.62);border-color:#e0574a;box-shadow:0 0 12px rgba(224,87,74,.55);}
.altarstueck.gesperrt{box-shadow:inset 0 0 0 2px rgba(247,216,120,.55);}
.altarstueck.gesperrt .kammerschloss{display:grid;}
.altarstueck.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;}
.altarstueck.wackelt{animation:kachelWackeln .32s ease;}
.altartafel .allesopfern{position:absolute;right:26px;bottom:12px;font-size:13px;color:var(--tafeltan);text-align:right;}
.altartafel > .bandzu{z-index:6;}
.altargeist{position:fixed;z-index:9999;width:64px;height:64px;object-fit:contain;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.7));}
/* Ein geopfertes Stück schrumpft weg — die Tafel bleibt stehen (382). */
.altarfach li.geopfert{opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
/* Der Titel steht über dem Beutel (386, Wunsch Max): rechts beginnen
   die Stücke ganz oben. */
.altarkopf{justify-content:center;margin:0 0 -4px;}
/* Auf dem Telefon füllt der Altar die Fläche wie eine Questtafel (382,
   Wunsch Max: vorher blieb rundum viel Rand). Seit 386: eine feste
   Höhe, die Stücke rollen in ihrer Spalte, „Alles opfern“ hat eine
   eigene Zeile darunter statt über den letzten Kacheln zu liegen. */
@media (max-height:560px) and (min-width:560px){
  .tafel.altartafel{width:100%;height:calc(var(--fh,100vh) - var(--tro,44px) - var(--tru,10px) + var(--ft,0px));min-height:0;}
  .altarbeutel{justify-content:flex-start;gap:6px;padding:12px 6px 56px 14px;}
  .altarbeutel > img{max-width:100px;max-height:34%;width:auto;}
  .altarkopf h3{font-size:20px;}
  .altarstand b{font-size:15px;}
  .knopf.banderole.altaropfern{--bandhoehe:40px;font-size:14px;}
  .altartafel > .tafelinhalt{max-height:none;min-height:0;height:100%;padding:12px 14px 34px 6px;display:flex;flex-direction:column;}
  .altarfach{max-height:none;flex:1 1 auto;min-height:0;padding:2px 4px 6px 2px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
  .altarstueck{padding:6px 4px 6px;}
  .altarstueck .stueckbild{width:34px;height:34px;}
  .altartafel .altarstueck > b{font-size:13px;line-height:1.05;overflow-wrap:anywhere;hyphens:auto;}
  .altartafel .altarstueck .warewerte{font-size:10.5px;}
  /* Das Kreuz hängt oben rechts ein Stück in die Tafel. */
  .altartafel > .tafelinhalt{padding-right:20px;}
  .altartafel .allesopfern{right:16px;bottom:8px;}
}
@media (max-width:559px){
  .tafel.altartafel{min-height:calc(var(--fh,100vh) - 122px);}
  .altarfach{--sp:3;max-height:none;flex:1 1 auto;min-height:0;padding-bottom:26px;}
  .altarbeutel{flex-direction:row;height:auto;}
  .altarbeutel > img{height:100px;}
}

/* ─── Herausforderungen (386) ─────────────────────────────────────
   Über der Rangliste steht, wie viele heute noch frei sind; jede
   fremde Zeile ist antippbar. Das Profil: links der Kopf mit „Kampf“
   und ⏩, rechts Platz, Ehre, Bilanz, Gilde und der Hinweis. */
.forderzeile{margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--tafeltan);}
.forderzeile b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--tafelgold);white-space:nowrap;}
.tafel .rangliste li.forderbar{cursor:pointer;transition:background .15s ease;}
.tafel .rangliste li.forderbar:hover,.tafel .rangliste li.forderbar:focus-visible{background:rgba(247,216,120,.14);outline:none;}
.tafel .rangliste li.geschuetzt{opacity:.55;}
.profil{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:8px 22px;align-items:start;}
.profil .gegnerwahl.einzeln{grid-row:1 / span 3;display:block;margin:0;}
.profilwerte{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;align-self:center;}
.profilwerte dt{font-size:13px;color:var(--tafeltan);}
.profilwerte dd{margin:0;font-family:var(--display);font-size:17px;color:var(--tafelgold);}
.profilhinweis{margin:0;font-size:14px;line-height:1.4;color:var(--tafelschrift);}
.profilzurueck{justify-self:start;}
@media (max-height:560px){
  .profil{grid-template-columns:minmax(130px,170px) 1fr;gap:6px 16px;}
  .profilwerte dd{font-size:15px;}
  .profilhinweis{font-size:13px;}
}
.tafel .forderzeile{padding-right:44px;}
/* Die Rangliste rollt in dem Platz, den die Ecke unten lässt (386). */
@media (max-height:560px){ .tafel.turniertafel .rangliste{max-height:calc(var(--fh,100vh) - 186px + var(--ft,0px));} }

/* ─── Zubehör beim Barbier (386): an oder aus ─────────────────────── */
.zubehoerwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zubehoerwahl small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tafeltan);margin-right:2px;}
.zubehoerwahl button{min-height:32px;padding:0 14px;cursor:pointer;border-radius:999px;font:inherit;font-size:13px;font-weight:700;
  background:var(--glas);border:1px solid var(--glasrand);color:var(--tafelschrift);}
.zubehoerwahl button[aria-pressed="true"]{border-color:var(--tafelgold);background:rgba(247,216,120,.18);color:var(--tafelgold);
  box-shadow:0 0 0 2px rgba(247,216,120,.25);}
@media (max-height:560px){ .zubehoerwahl button{min-height:28px;font-size:12px;padding:0 11px;} }
/* Telefon: die Werkbank wird flacher, damit das Zubehör über Würfeln
   und Speichern Platz hat. */
@media (max-height:560px) and (min-width:560px){
  .tafelfeld > .tafel.barbier .barbierregler{gap:4px;}
  .tafelfeld > .tafel.barbier .regel{padding:1px;}
  .tafelfeld > .tafel.barbier .regelpfeil{height:26px;font-size:18px;}
  .tafelfeld > .tafel.barbier .regelwert small{font-size:9px;}
  .tafelfeld > .tafel.barbier .regelwert b{font-size:14px;}
  .tafelfeld > .tafel.barbier .rasse img{height:34px;}
  .tafelfeld > .tafel.barbier .zubehoerwahl small{display:none;}
  .tafelfeld > .tafel.barbier .barbierbank{padding-bottom:4px;}
}

/* ─── Telefon quer: das Konto steht unten rechts (387, Wunsch Max) ──
   Gold und Mana stehen am Telefon unten rechts, der Weg „Zurück“ oben
   rechts (css/landkarte.css). Die Tafeln beginnen darum bündig oben und
   halten unten Platz für das Konto frei: das Bild zeigt mehr von oben.
   Dieselbe Schranke wie die Ränder der Landkarte. */
@media (min-aspect-ratio: 7/4) and (max-height: 520px){
  .tafelfeld{--tro:8px;--tru:50px;}
}

/* 387: Seit das Konto unten rechts steht, ist die Tafel auf dem kleinen
   Telefon etwas flacher. Beim Barbier bleibt Mann/Frau deshalb neben den
   Rassen (statt in einer eigenen Zeile), und beim Hütchenspieler stehen
   Einsatz und „Wetten“ immer nebeneinander. */
@media (max-height:560px) and (min-width:560px){
  .tafelfeld > .tafel.barbier .rassenwahl{grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:4px;margin-right:36px;}
  .tafelfeld > .tafel.barbier .geschlechtwahl{grid-column:auto;flex-direction:column;gap:4px;}
  .tafelfeld > .tafel.barbier .geschlechtwahl button{min-height:0;min-width:44px;padding:0 4px;font-size:11px;}
  .huetchenfeld{gap:8px;}
  .becherbahn{margin-top:28px;}
  .huetchenwahl{flex-wrap:nowrap;gap:8px;}
  .huetchenwahl .knopf.banderole{width:130px;--bandhoehe:42px;font-size:17px;flex:0 0 auto;}
  .huetchenwahl .qwahl{white-space:nowrap;}
}
@media (max-height:380px) and (min-width:560px){
  .tafelfeld > .tafel.barbier .barbierbank{gap:5px;}
  .tafelfeld > .tafel.barbier .regelpfeil{height:23px;font-size:16px;}
  .tafelfeld > .tafel.barbier .rasse img{height:30px;}
  .tafelfeld > .tafel.barbier > .tafelinhalt{padding-top:10px;}
}