/* ══════════════════════════════════════════════════════════════════
   monster.css — die Monsteraufgabe auf der Landkarte

   Marker, rechte Leiste, Tafeln (Tagesquest, Postkasten). Alles liegt in
   der Bühne (1000 × 490) und skaliert mit ihr; Größen, die überall
   gleich groß ankommen sollen (Leiste), teilen durch `--s`.
   Gestalt nach dokumente/DESIGN.md: Tagesquests wie die Aufgaben der
   Helden (Pergament, Ausrufezeichen, roter Titel), der Postkasten als
   dunkle Tafel wie „Gold aufladen“.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Marker ─────────────────────────────────────────────────────────
   Das Zeichen der Aufgaben: eine goldene Scheibe. „!“ ruft (neu), „?“
   wartet (angenommen), „✓“ will abgeholt werden (erfüllt). Das Leuchten
   ist ein eigener Schein darunter, der nur seine Deckkraft ändert. */
.monstermarke{position:absolute;z-index:8;transform:translate(-50%,-50%);
  width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;
  animation:monsterAn .4s cubic-bezier(.2,.9,.3,1.4);}
@keyframes monsterAn{from{opacity:0;transform:translate(-50%,-50%) scale(.4);}}
.monstermarke span{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;
  border-radius:50%;font-family:var(--display);font-size:24px;line-height:1;padding-top:.12em;color:#1c1308;
  background:radial-gradient(circle at 36% 28%,#ffe9a8,#f2c14e 60%,#c79a2a);
  border:2.5px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35);
  transition:transform .18s ease;}
.monstermarke::before{content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,215,120,.75),rgba(255,190,80,0));
  animation:monsterRuf 2.4s ease-in-out infinite;}
@keyframes monsterRuf{0%,100%{opacity:.25;}50%{opacity:.95;}}
.monsterlohn.mittig{justify-content:center;}
.monstermarke:hover span{transform:scale(1.12);}
.monstermarke:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px;border-radius:50%;}
/* Angenommen: dieselbe Scheibe, ruhig und dunkel — sie ruft nicht mehr. */
.monstermarke.aktiv span{color:#f3e7c8;background:radial-gradient(circle at 36% 28%,#5a4426,#33261380 70%,#241a0e);
  border-color:rgba(238,220,171,.7);}
.monstermarke.aktiv::before{animation:none;opacity:0;}
/* Erfüllt: grün hinterlegt, damit man sie vom „!“ unterscheidet. */
.monstermarke.fertig span{color:#fff;background:radial-gradient(circle at 36% 28%,#b6e88a,#5f9e34 60%,#3f6f1f);}
.monstermarke.fertig::before{background:radial-gradient(closest-side,rgba(170,240,120,.75),rgba(120,200,80,0));}

/* Das Osterei: unsichtbar, aber antippbar. Gefunden, blitzt es kurz auf. */
.monstermarke.fund{width:34px;height:34px;cursor:default;animation:none;}
.monstermarke.fund::before{animation:none;opacity:0;}
.monstermarke.fund.gefunden::before{animation:monsterFund .65s ease-out forwards;
  background:radial-gradient(closest-side,rgba(255,250,220,.95),rgba(255,210,120,0));}
@keyframes monsterFund{0%{opacity:0;transform:scale(.4);}40%{opacity:1;transform:scale(1.6);}100%{opacity:0;transform:scale(2.2);}}

/* ─── Die rechte Leiste ──────────────────────────────────────────────
   Über dem Weg zurück. Zeichen auf einer halbdunklen Scheibe mit feiner
   goldener Kante, damit sie auf jeder Karte lesbar sind; die Größe hängt
   am Maßstab und kommt überall gleich groß an (Daumen: 52 Punkte). */
.monsterleiste{position:absolute;z-index:30;display:flex;flex-direction:column;gap:calc(12px / var(--s,1));
  right:calc(28px / var(--s,1));bottom:calc(80px / var(--s,1));}
.monsterleiste[hidden]{display:none;}
.leistenknopf{position:relative;width:calc(52px / var(--s,1));height:calc(52px / var(--s,1));padding:0;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(20,14,8,.72);border:calc(1.5px / var(--s,1)) solid rgba(232,190,110,.6);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.leistenknopf img{width:70%;height:70%;object-fit:contain;display:block;}
.leistenknopf:hover{transform:translateY(calc(-2px / var(--s,1)));border-color:var(--gold-hi);background:rgba(58,40,22,.9);}
.leistenknopf:focus-visible{outline:calc(2px / var(--s,1)) solid var(--gold-hi);outline-offset:calc(3px / var(--s,1));}
.leistenknopf.neu{animation:leisteNeu .7s cubic-bezier(.3,1.5,.5,1);}
@keyframes leisteNeu{0%{transform:scale(.2);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
.leistenmarke{position:absolute;right:calc(-5px / var(--s,1));top:calc(-5px / var(--s,1));
  min-width:calc(22px / var(--s,1));height:calc(22px / var(--s,1));padding:0 calc(5px / var(--s,1));
  border-radius:999px;display:grid;place-items:center;font-family:var(--display);font-weight:400;
  font-size:calc(13px / var(--s,1));padding-top:.12em;color:#f6e3bb;
  background:radial-gradient(circle at 36% 30%,#c0453a,#8f2219 65%,#5e1410);
  border:calc(2px / var(--s,1)) solid var(--ink);}
/* Im freien Rand, sobald dort Platz ist — dieselbe Schranke wie für den
   Weg zurück (css/landkarte.css), der dort mittig steht: die Leiste
   sitzt darüber. */
/* Seit 371 mittig im rechten Rand: oben das Konto, unten der Weg hinaus. */
@media (min-aspect-ratio: 7/4) and (max-height: 520px){
  .monsterleiste{right:calc(-1 * var(--rand,0px) / var(--s,1) / 2);bottom:auto;
    top:50%;transform:translate(50%,-50%);}
}

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

/* Tagesquest: das Pergament der Heldenaufgaben, mit Bild darüber. */

/* Das Zeichen der Questart im Kopf (Arena, Nachtwache): rot wie das „!“. */

/* Auf der Karte: das Zeichen dunkel in der goldenen Scheibe. */
.monstermarke span svg{width:62%;height:62%;display:block;margin-top:-.12em;}

.monsterstempel{margin-left:auto;padding:2px 8px;border:3px double #a3261a;border-radius:6px;color:#a3261a;
  font-family:var(--display);font-size:15px;text-transform:uppercase;transform:rotate(-10deg);}
.monstertext{margin:0;font-size:14.5px;line-height:1.5;}
.monsterlohn{margin:0;display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:18px;padding-top:.1em;}
.monsterlohn span{font-family:var(--ui);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#6b4a22;margin-right:4px;}
.monsterlohn .manakugel,.briefanhang .manakugel{width:1.1em;height:1.1em;vertical-align:-.2em;}
.lohnzeichen{width:1.1em;height:1.1em;object-fit:contain;vertical-align:-.2em;}
.monstertafel .knopf.monsterja{align-self:center;min-height:44px;font-size:18px;padding:.25em 28px 0;margin-top:4px;}
.monsterbalken{position:relative;height:10px;border-radius:6px;overflow:hidden;
  background:rgba(80,50,20,.2);border:1.5px solid #6b4a22;}
.monsterbalken i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#f3cf6a,#d9a23a 55%,#a8761f);}
.monsterstand{margin:0;font-size:12px;color:#6b4a22;}

/* Postkasten: seit 379 eine Questtafel wie alle anderen (Wunsch Max) —
   das Bild des Postboten hinter allem, der Inhalt auf dem Schleier,
   das „?“ unten links. Die Briefe brauchen mehr Dunkel als eine Quest:
   ein kräftigerer Verlauf, sonst stünde Schrift auf Wiese. */
.monstertafel.post > .tafelinhalt.postinhalt{
  background:
    linear-gradient(0deg,rgba(14,10,6,.96) 0%,rgba(14,10,6,.9) 55%,rgba(14,10,6,.55) 78%,rgba(14,10,6,.25) 100%);
  display:flex;flex-direction:column;gap:12px;padding:20px 26px 48px;color:var(--parch);}
.postkopf{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.postkopf .knopf.rolle.postalle{--rh:36px;min-width:150px;}
.postkopf .knopf.rolle.postalle[hidden]{display:none;}
.posttitel{margin:0;font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold-hi);padding-top:.15em;}
.postinnen{flex:1;min-height:0;display:grid;grid-template-columns:220px 1fr;gap:18px;}
.briefliste{list-style:none;margin:0;padding:0 4px 0 0;overflow:auto;display:flex;flex-direction:column;gap:6px;}
.briefzeile{position:relative;width:100%;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  padding:8px 26px 8px 12px;border-radius:var(--rund-2);border:1px solid rgba(232,190,110,.18);
  background:rgba(255,255,255,.03);color:var(--parch);font:inherit;transition:border-color .18s,background .18s;}
.briefzeile b{font-weight:600;font-size:13px;color:var(--parch-hi);}
.briefzeile span{font-size:11px;color:var(--tan);}
.briefzeile:hover{border-color:rgba(246,212,138,.6);}
.briefzeile.an{border-color:var(--gold-hi);background:rgba(246,212,138,.08);}
.briefzeile.ungelesen::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-radius:50%;background:var(--red-hi);}
.anhangzeichen{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--gold-hi);}
/* Wegwerfen (379): ein stilles ✕ an der Zeile; Briefe mit offenem
   Anhang tragen keins. */
.briefliste li{position:relative;}
.briefweg{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2;
  width:20px;height:20px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:none;color:rgba(238,220,171,.45);font-size:12px;line-height:1;}
.briefweg:hover{color:#ff9d8d;background:rgba(0,0,0,.35);}
.brief{overflow:auto;padding:4px 6px 4px 18px;border-left:1px solid rgba(232,190,110,.2);}
.brief h4{margin:4px 0 8px;font-family:var(--display);font-weight:400;font-size:20px;color:var(--gold-hi);padding-top:.1em;}
.briefvon{margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,220,171,.5);}
.brieftext{margin:0;font-size:14px;line-height:1.55;color:var(--parch);}
.briefanhang{margin-top:16px;padding-top:12px;border-top:1px solid rgba(232,190,110,.2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;}
.briefanhang .knopf.monsterja{margin:0;}
.briefleer{color:var(--tan);font-size:14px;}
.briefzurueck{display:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:13px;color:var(--tan);}
.briefzurueck:hover{color:var(--gold-hi);}
/* Schmaler Schirm: erst die Liste, dann der Brief. */
@media (max-width:700px){
  .postinnen{grid-template-columns:1fr;}
  .postinnen .brief{display:none;border-left:0;padding-left:0;}
  .postinnen.offen .briefliste{display:none;}
  .postinnen.offen .brief{display:block;}
  .briefzurueck{display:inline-block;margin-bottom:6px;}
}

@media (prefers-reduced-motion:reduce){
  .monstermarke,.monstermarke::before,.leistenknopf.neu,.monsterfeld,.monstertafel{animation:none;}
  .monstermarke::before{opacity:.6;}
}


/* ─── Arena, Nachtwache, Postkasten ─────────────────────────────── */
/* Heute erledigt: das Zeichen bleibt als ruhige, dunkle Scheibe stehen. */
.monstermarke.erledigt span{color:#f3e7c8;background:radial-gradient(circle at 36% 28%,#5a4426,#33261380 70%,#241a0e);
  border-color:rgba(238,220,171,.55);}
.monstermarke.erledigt.gewonnen span{color:#b6e88a;}
.monstermarke.erledigt::before{animation:none;opacity:0;}
/* Während der Wache ruhen die Aufgaben: sie verlieren Farbe und Ruf. */
.monstermarke.schlaeft span{filter:grayscale(.8) brightness(.8);}
.monstermarke.schlaeft::before{animation:none;opacity:0;}
/* Der Postkasten auf der Karte: dieselbe weiße Scheibe wie der Beutel,
   das Zeichen darin etwas kleiner, damit es atmet. */
.marke.postkasten .scheibe{background:#fff;}
.marke.postkasten{cursor:pointer;}
.marke.postkasten .scheibe img{object-fit:contain;padding:20%;box-sizing:border-box;transform:none;width:100%;height:100%;}

/* Nachtschleier: die Karte dunkelt blau ab, solange die Wache steht.
   Er nimmt keine Klicks; nur die Deckkraft ändert sich. */
.nachtschleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(20,30,70,.48),rgba(6,10,28,.8));
  animation:nachtAuf 1.2s ease-out;}
@keyframes nachtAuf{from{opacity:0;}}

/* Die Tafel der Nachtwache: vier Dauern zur Wahl, darunter der Knopf. */

.wachwahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.wachwahl{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;cursor:pointer;
  border-radius:var(--rund-2);background:rgba(255,255,255,.28);border:2px solid rgba(24,19,14,.35);
  color:#2b1d10;font:inherit;transition:border-color .16s,background .16s,transform .16s;}
.wachwahl b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;padding-top:.12em;color:#23335c;}
.wachwahl small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6b4a22;}
.wachwahl em{font-style:normal;font-size:12px;color:#2b1d10;white-space:nowrap;}
.wachwahl:hover{transform:translateY(-2px);border-color:#6b4a22;}
.wachwahl.an{background:rgba(255,255,255,.55);border-color:#18130e;}
.wachrest{margin:0;font-size:15px;}
.wachrest b{font-family:var(--display);font-weight:400;font-size:24px;color:#23335c;}
/* Die stehende Wache: die Nachfrage beim ersten Klick aufs Kreuz, und
   das Kreuz selbst pocht, bis man sich entscheidet. */
.wachfrage{margin:0;font-size:13.5px;font-weight:600;color:#a3261a;}
.wachfrage[hidden]{display:none;}
.bandzu.monsterzu.fragt{animation:kreuzFragt 1s ease-in-out infinite;}
@keyframes kreuzFragt{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
/* Solange die Wache steht, bleibt nur der Weg zurück ins Menü offen:
   er liegt über der Fläche, die die Karte abdeckt. */
body.monster-nacht a.knopf.heimweg{z-index:46;}

/* Kurze Hinweise (Wache läuft, guten Morgen): die dunkle Tafel, klein. */
.monstertafel.hinweis{max-width:360px;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;}
.monstertafel.hinweis p{margin:0;font-size:15px;line-height:1.5;}
.monstertafel.hinweis p + p{margin-top:8px;}
.monstertafel.hinweis .klein{font-size:13px;color:var(--tan);}
.monstertafel.hinweis b{color:var(--gold-hi);}
@media (prefers-reduced-motion:reduce){ .nachtschleier,.bandzu.monsterzu.fragt{animation:none;} }
.monsterkampf{align-self:center;}

/* ─── Was man eingesammelt hat (seit 364, js/monsterkarte.js → lohnSteigt)
   Weiße Schrift in der Hausschrift steigt aus dem Knopf auf, die Tafel
   schließt sich darunter, die Schrift steigt weiter und verblasst. Liegt
   über allem (auch über der Tafel), fängt keine Klicks. */
.lohnsteigt{position:fixed;z-index:400;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.08em;
  transform:translate(-50%,-50%);opacity:0;white-space:nowrap;line-height:1.08;
  font-family:var(--display);font-weight:400;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.9);}
.lohnsteigt.an{animation:lohnSteigt 2.6s cubic-bezier(.22,.7,.3,1) forwards;}
@keyframes lohnSteigt{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8);}
  9%{opacity:1;transform:translate(-50%,calc(-50% - 1.4em)) scale(1.08);}
  16%{transform:translate(-50%,calc(-50% - 1.8em)) scale(1);}
  60%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 5em)) scale(1);}}
.lohnsteigt span{display:inline-flex;align-items:center;gap:.22em;padding-top:.1em;}
.lohnsteigt img{height:1.05em;width:auto;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));}
.lohnsteigt .manakugel{width:1.05em;height:1.05em;display:inline-block;}
.lohnsteigt small{font-size:.62em;opacity:.9;margin-left:.15em;}
.lohnsteigt .lskopf{font-size:.8em;}
.lohnsteigt .lszeile{font-size:.7em;}
.lohnsteigt .lsitem img{height:1.7em;}
.lohnsteigt .lsitem.selten img{filter:drop-shadow(0 0 5px rgba(80,160,255,.95));}
.lohnsteigt .lsitem.episch img{filter:drop-shadow(0 0 6px rgba(190,110,255,.95));}
.lohnsteigt .lsitem.legendaer img{filter:drop-shadow(0 0 7px rgba(255,170,40,.95));}
@media (prefers-reduced-motion:reduce){
  .lohnsteigt.an{animation:lohnRuhig 2.6s ease forwards;}
  @keyframes lohnRuhig{0%,70%{opacity:1;transform:translate(-50%,-100%);}100%{opacity:0;transform:translate(-50%,-100%);}}
}