/* ══════════════════════════════════════════════════════════════════
   MeinQuest — Questbuch und Erfolge als Fenster (seit 415)

   Bis 414 zwei eigene Seiten. Seit 415 öffnen sie sich wie der Barbier
   über dem Hauptmenü (js/questbuchfenster.js, js/erfolgefenster.js);
   das Fenster selbst (Rahmen, Kopf, Kreuz, „?“) ist dasselbe wie überall
   im Menü (css/tafel.css).
   Alles hier hängt an `.fenster.questbuch` bzw. `.fenster.erfolge`,
   damit Namen wie `.quest` oder `.balken` nichts im Menü treffen.

   Maße in Bildschirmpunkten (die Tafelfläche nimmt den Zoom der Bühne
   heraus, css/tafel.css).
   ══════════════════════════════════════════════════════════════════ */

/* ─── Questbuch: Karten aus Pergament ─────────────────────────────
   Nur das Nötige (Wunsch Max, 415): Bild, Titel, was zu tun ist, Lohn.
   Erfüllte stehen vorn, golden umrandet, mit rotem „Abholen“. */
.questbuch .questgitter{list-style:none;margin:0;padding:4px 2px 6px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;}
.questbuch .quest{position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;color:#2b1d10;
  background:linear-gradient(180deg,#f3e3bc,#e6cf9f);border:3px solid var(--ink);
  box-shadow:0 5px 0 var(--ink),0 14px 22px -10px rgba(0,0,0,.9);
  animation:questAuf .35s cubic-bezier(.2,.9,.3,1.2) both;}
.questbuch .quest:nth-child(2){animation-delay:.05s;}
.questbuch .quest:nth-child(3){animation-delay:.1s;}
.questbuch .quest:nth-child(4){animation-delay:.15s;}
.questbuch .quest:nth-child(5){animation-delay:.2s;}
@keyframes questAuf{from{opacity:0;transform:translateY(10px) scale(.96);}}
.questbuch .quest.fertig{box-shadow:0 5px 0 var(--ink),0 0 0 3px var(--gold-hi),0 0 24px rgba(247,216,120,.55);}
.questbuch .quest.geht{animation:questWeg .45s ease-in forwards;}
/* Die Duellquest (421): jeden Tag, Lohn ein Paket. Ein rotes Band oben
   links sagt „Jeden Tag“, der Körper trägt einen warmen Goldton, damit
   sie sich als feste Größe von den wechselnden Quests abhebt. */
.questbuch .duellquest{background:linear-gradient(180deg,#f8e7b4,#ecc978);}
.questbuch .tagesband{position:absolute;left:10px;top:10px;z-index:2;padding:.28em 10px .12em;border-radius:8px;
  font-family:var(--display);font-size:14px;line-height:1;color:#fff;letter-spacing:.02em;
  background:linear-gradient(180deg,#ff7a63,var(--red) 60%,var(--red-dk));border:2px solid var(--ink);
  text-shadow:0 1px 0 rgba(55,6,4,.9);box-shadow:0 2px 0 var(--ink);}
@keyframes questWeg{to{opacity:0;transform:scale(.85) translateY(-14px);}}

.questbuch .questbild{position:relative;margin:0;aspect-ratio:16 / 9;overflow:hidden;border-bottom:3px solid var(--ink);background:#2b1d10;}
.questbuch .questbild img{width:100%;height:100%;object-fit:cover;display:block;}
/* Heldenfähigkeit (421, Max: die Diener waren mitten durch die Brust
   abgeschnitten): das Kartenbild steht hoch, der Kasten liegt quer. Die
   Figur reicht auf allen 99 Karten von etwa 19 bis 76 Prozent der
   Bildhöhe (gemessen an der Tusche); gezeigt wird 15 bis 80 Prozent,
   also die ganze Figur. Das Bild ist dafür schmaler als der Kasten; der
   Grund ist dasselbe Weiß wie auf der Karte, die Ränder laufen weich
   hinein, damit Strahlen und Wirbel nicht an einer Kante abbrechen. */
.questbuch .heldquest .questbild{background:#fff;}
.questbuch .heldquest .questbild img{position:absolute;left:50%;top:-26%;width:auto;height:160%;
  translate:-50% 0;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
/* Tauschen: ein kleiner runder Knopf oben rechts im Bild. */
.questbuch .tauschweg{position:absolute;right:7px;top:7px;width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#f3e7c8;
  background:radial-gradient(circle at 36% 28%,#5a4426,#33261380 70%,#241a0e);border:2px solid rgba(238,220,171,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.55);transition:transform .18s ease,border-color .18s ease;}
.questbuch .tauschweg svg{width:17px;height:17px;}
.questbuch .tauschweg:hover{transform:rotate(180deg);border-color:var(--gold-hi);}
.questbuch .tauschweg:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;}

.questbuch .questkoerper{display:flex;flex-direction:column;gap:7px;padding:10px 12px 12px;flex:1 1 auto;}
.questbuch .questkoerper h3{margin:0;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.05;
  color:#971e1b;padding-top:.1em;}
.questbuch .auftrag{margin:0 0 auto;font-size:14.5px;line-height:1.35;font-weight:600;}
/* Balken und Zahl in einer Zeile. */
.questbuch .ziel{display:flex;align-items:center;gap:9px;}
.questbuch .ziel b{flex:0 0 auto;font-size:13px;font-variant-numeric:tabular-nums;}
.questbuch .balken{position:relative;flex:1 1 auto;height:10px;border-radius:6px;overflow:hidden;
  background:rgba(80,50,20,.2);border:1.5px solid #6b4a22;box-shadow:inset 0 2px 3px rgba(60,35,12,.35);}
.questbuch .balken i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#f3cf6a,#d9a23a 55%,#a8761f);
  transition:width .9s cubic-bezier(.2,.8,.2,1);}
.questbuch .fertig .balken i{background:linear-gradient(180deg,#9fd46a,#5f9e34 55%,#3f6f1f);}
/* Der Lohn: Zeichen und Wort, bei Erfüllten rechts „Abholen“. */
.questbuch .lohnzeile{display:flex;flex-wrap:wrap;align-items:center;gap:7px 9px;min-height:44px;padding-top:7px;
  border-top:1.5px dashed rgba(107,74,34,.35);}
.questbuch .lohnplatz{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;
  background:radial-gradient(circle at 40% 35%,#3c2c1b,#1c130b);border:2px solid #6b4a22;
  box-shadow:inset 0 0 0 2px rgba(232,181,58,.5);}
.questbuch .lohnplatz img{width:30px;height:30px;object-fit:contain;}
.questbuch .lohnplatz .siegelmedaillon{width:28px;height:28px;font-size:16px;}
.questbuch .lohnname{font-family:var(--display);font-size:16px;line-height:1;padding-top:.15em;color:#3b2612;white-space:nowrap;}
/* „Abholen“ steht in eigener Zeile unter dem Lohn, über die ganze
   Breite: auf jeder Karte gleich, und der Lohn bleibt lesbar. */
.questbuch .lohnzeile .knopf{flex:1 0 100%;min-height:40px;padding:.2em 14px 0;font-size:17px;}
.questbuch .leer{grid-column:1 / -1;text-align:center;color:var(--tan);font-size:15px;padding:40px 0;}

/* Gold, das aus „Abholen“ aufsteigt (liegt am Körper, nicht in der Bühne). */
.goldsteigt{position:fixed;z-index:90;pointer-events:none;font-family:var(--display);font-size:28px;color:var(--gold-hi);
  text-shadow:0 2px 0 #3a2a08,0 0 12px rgba(247,216,120,.8);animation:goldSteigt 1.3s ease-out forwards;}
@keyframes goldSteigt{from{opacity:0;transform:translateY(10px) scale(.8);}20%{opacity:1;}to{opacity:0;transform:translateY(-70px) scale(1.15);}}

/* Die enthüllte Heldenfähigkeit: ein kleines Fenster (js/tafelfeld.js). */
.fenster.enthuellung .fensterleib{display:flex;flex-direction:column;align-items:center;text-align:center;}
.enthuellungbild{width:96px;height:96px;filter:drop-shadow(0 0 16px rgba(255,220,130,.7));}
.enthuellungwer{display:block;font-size:12.5px;color:var(--tan);margin-top:8px;}
.enthuellungname{margin:2px 0 6px;font-family:var(--display);font-weight:400;font-size:26px;color:var(--gold-hi);}

/* ─── Erfolge ──────────────────────────────────────────────────────── */
.erfolge .erfolgliste{list-style:none;margin:0;padding:14px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;}
.erfolge .erfolgkarte{width:100%;height:100%;display:flex;align-items:center;gap:14px;padding:6px 14px 6px 6px;box-sizing:border-box;
  text-align:left;border-radius:12px;background:rgba(10,7,4,.45);border:1px solid rgba(243,231,200,.2);color:#f3e7c8;font:inherit;}
/* Medaillenbild 150 × 160: das Band oben, die Münze mit der Mitte bei 59 %. */
.erfolge .erfolgbild{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.18),rgba(0,0,0,.45));
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55),0 0 0 2px rgba(214,170,90,.55);}
/* Nur die Medaille selbst (Münze mit Band), groß; das Band ragt oben
   über den Kreis hinaus. Nicht erreicht: der Kreis bleibt leer. */
.erfolge .erfolgbild{overflow:visible;}
.erfolge .erfolgbild img{position:absolute;left:50%;top:-21px;translate:-50% 0;height:100px;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));}
.erfolge .erfolgtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.erfolge .erfolgtext > b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1;color:var(--gold-hi);padding-top:.1em;}
.erfolge .erfolgtext > small{font-size:13px;line-height:1.3;color:var(--tan);}
.erfolge .erfolgzeile{display:flex;align-items:center;gap:8px;margin-top:4px;}
.erfolge .erfolgpunkte{display:flex;gap:3px;flex:0 0 auto;}
.erfolge .erfolgpunkte i{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(243,231,200,.3);}
.erfolge .erfolgpunkte i.kupfer{background:#c77a3f;border-color:#f0b07a;}
.erfolge .erfolgpunkte i.silber{background:#c9d0d6;border-color:#fff;}
.erfolge .erfolgpunkte i.gold{background:#f3cf6a;border-color:#fff2b8;}
.erfolge .erfolgbalken{position:relative;flex:1 1 auto;min-width:30px;height:8px;border-radius:6px;overflow:hidden;
  background:rgba(0,0,0,.45);border:1.5px solid rgba(232,190,110,.7);}
.erfolge .erfolgbalken i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#f3cf6a,#d9a23a 55%,#a8761f);}
.erfolge .erfolgzeile .zahl{flex:0 0 auto;font-size:12.5px;font-variant-numeric:tabular-nums;}
.erfolge .erfolgkarte .knopf{flex:0 0 auto;min-height:42px;padding:0 18px;font-size:17px;}
.erfolge .erfolgkarte.neu{border-color:var(--gold-hi);background:rgba(247,216,120,.12);animation:erfolgGlueht 1.6s ease-in-out infinite;}
@keyframes erfolgGlueht{0%,100%{box-shadow:0 0 0 0 rgba(247,216,120,0);}50%{box-shadow:0 0 18px 2px rgba(247,216,120,.5);}}

/* ─── Telefon quer ─────────────────────────────────────────────────── */
@media (max-height:560px){
  .questbuch .questgitter{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
  .questbuch .questkoerper{padding:8px 10px 10px;gap:5px;}
  .questbuch .questkoerper h3{font-size:18px;}
  .questbuch .auftrag{font-size:13px;}
  .erfolge .erfolgliste{gap:8px;}
  .erfolge .erfolgkarte{padding:6px 10px 6px 6px;gap:10px;}
  .erfolge .erfolgbild{width:52px;height:52px;}
  .erfolge .erfolgbild img{height:70px;top:-15px;}
  .erfolge .erfolgtext > b{font-size:16px;}
  .erfolge .erfolgtext > small{font-size:11.5px;}
}
@media (max-width:700px){ .erfolge .erfolgliste{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  .questbuch .quest,.questbuch .quest.geht,.erfolge .erfolgkarte.neu,.goldsteigt{animation:none;}
  .questbuch .balken i{transition:none;}
}