/* Endbildschirm gegen den Computer (app/end-screen-loot.js, end-screen-computer.js):
   die Beute nach dem ersten Sieg gegen einen Leiter-Gegner und der Gast-Knopf
   "Mit Konto behalten". Die Karte ist die Pack-Karte (main-09.css .po-card),
   verkleinert; ihre Design-Tokens stehen sonst nur auf .po, darum hier auf dem
   Rahmen. Ruhig: kein farbiges Leuchten auf der Karte, kein Dreh-Hover danach. */
.eg-loot {
  --gold-1: #d8b15a; --gold-2: #c89a3e; --gold-3: #8a6a25; --gold-hi: #f3dca0;
  --bone: #e8dec5; --ink: #aea58c; --ink-dim: #8b8268; --ink-faint: #4a4537;
  --rar-common: #9a8f70; --rar-rare: #74c8d6; --rar-epic: #b083de; --rar-legend: #e8c879;
  --serif: var(--mp-serif, "Cinzel", serif);
  --mono: var(--mp-mono, ui-monospace, monospace);
  --fac: #74c8d6; --fac-deep: #2f7e88; --fac-glow: rgba(116, 200, 214, 0.45);
  --charge: var(--fac); --charge-glow: var(--fac-glow);
  --loot-scale: 0.6667;   /* 144 x 210 -> 96 x 140 */
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: var(--loot-top);
  padding-top: var(--loot-pad);
  border-top: 1px solid rgba(216, 177, 90, 0.14);
  animation: egLootIn 600ms ease both;
}
.eg-loot.tone-moss { --fac: #6fd6a6; --fac-deep: #2c8a5e; --fac-glow: rgba(111, 214, 166, 0.45); }
@keyframes egLootIn { from { opacity: 0; } }
.eg-reward { --loot-top: 18px; --loot-pad: 16px; }
/* crown() (Legendaer) braucht den Glut-Halter; im Endbildschirm bleibt er leer. */
.eg-loot .po-embers { display: none; }

.eg-loot-stage {
  position: relative;
  flex: none;
  width: calc(144px * var(--loot-scale));
  height: calc(210px * var(--loot-scale));
}
.eg-loot-scale {
  position: absolute;
  left: 0;
  top: 0;
  width: 144px;
  height: 210px;
  transform: scale(var(--loot-scale));
  transform-origin: 0 0;
}
/* Volle Pack-Groesse im Skalierer (main-09.css verkleinert .po-card sonst am Handy). */
.eg-loot .po-card { width: 144px; height: 210px; }
.eg-loot .po-card.hero { translate: none; scale: none; }
.eg-loot .po-card.flip .po-card-inner { transform: rotateY(180deg) !important; }
.eg-loot .po-front,
.eg-loot .po-back { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; }
.eg-loot .po-back .bmedal { box-shadow: 0 0 0 4px rgba(9, 10, 15, 0.85), inset 0 0 18px rgba(0, 0, 0, 0.6) !important; }
.eg-loot .po-back .bcrest { filter: none !important; }
.eg-loot .po-front .po-img img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.72)); }
.eg-loot .po-gem,
.eg-loot .po-ring-pulse,
.eg-loot .po-back .bcorner { box-shadow: none !important; }

.eg-loot-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.eg-loot-label {
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mp-gold-1, #d8b15a);
}
.eg-loot-name {
  font-family: var(--mp-serif, Georgia, serif);
  font-size: 23px;
  line-height: 1.15;
  color: var(--mp-bone, #efe6d2);
}
.eg-loot-rarity {
  font-family: var(--mp-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--rar-common);
}
.eg-loot-rarity.r-rare { color: var(--rar-rare); }
.eg-loot-rarity.r-epic { color: var(--rar-epic); }
.eg-loot-rarity.r-legendary { color: var(--rar-legend); }
.eg-loot-status {
  margin-top: 6px;
  font-family: var(--mp-serif-body, Georgia, serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mp-ink-dim, #847b65);
}
.eg-loot .eg-keep { margin-top: 8px; }
/* Name und Seltenheit erst, wenn die Vorderseite zu sehen ist. */
.eg-loot-name,
.eg-loot-rarity { transition: opacity 420ms ease, translate 420ms ease; }
.eg-loot:not(.is-open) .eg-loot-name,
.eg-loot:not(.is-open) .eg-loot-rarity { opacity: 0; translate: 0 4px; }
.eg-loot.is-open .eg-loot-rarity { transition-delay: 120ms; }

/* Gast-Knopf "Mit Konto behalten": klein wie ein Link (EXP-Reihe und Beute). */
.eg-keep {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(216, 177, 90, 0.35);
  padding: 2px 0;
  font-family: var(--mp-sans, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mp-gold-1, #d8b15a);
  cursor: var(--mp-cur-pointer, pointer);
  transition: color 160ms ease, border-color 160ms ease;
}
.eg-keep:hover,
.eg-keep:focus-visible { color: var(--mp-bone, #efe6d2); border-color: var(--mp-gold-1, #d8b15a); outline: none; }
.eg-bar-scale .eg-keep { margin-left: 12px; }

/* Funken der Drehung haengen an body: ueber dem Endbildschirm (z-index 6000). */
.eg-stage ~ .po-spark { z-index: 6001; }

/* Breite Fenster: Beute und naechster Gegner stehen nebeneinander (eine Zeile weniger).
   .has-loot / .has-loot-foe setzt end-screen-loot.js (markLootLayout). Bewusst kein
   :has() hier: eines mit Geschwister-Kette liess jede DOM-Aenderung auf der ganzen
   Seite alle Stile neu rechnen (Ruckler beim Absetzen einer Figur). */
@media (min-width: 721px) {
  .eg-reward.has-loot-foe { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .eg-reward.has-loot-foe > :not(.eg-loot, .eg-foe) { grid-column: 1 / -1; }
  .eg-reward.has-loot-foe > .eg-foe {
    align-self: stretch;
    margin-top: var(--loot-top);
    padding: var(--loot-pad) 2px 0;
    border-top: 1px solid rgba(216, 177, 90, 0.14);
  }
}

/* Mit Beute wird die Karte hoeher: in flachen Fenstern (Laptop, Steam Deck 1280 x 800,
   Handy) kleinere Karte und engere Abstaende, damit alles ohne Scrollen passt. */
@media (max-height: 900px) {
  .eg-reward { --loot-top: 12px; --loot-pad: 12px; }
  .eg-loot { --loot-scale: 0.5556; gap: 14px; }
  .eg-reward.has-loot { margin-top: clamp(16px, 2.5vh, 36px); }
  .eg-stage.has-loot .eg-content { padding-block: 20px; }
  .eg-loot-name { font-size: 20px; }
}
@media (max-height: 820px) {
  .eg-loot { --loot-scale: 0.5; }
  .eg-reward.has-loot .eg-profile { padding-bottom: 12px; margin-bottom: 12px; }
  .eg-reward.has-loot .eg-stats { gap: 12px; }
  .eg-reward.has-loot .eg-actions { margin-top: 16px; }
  /* Die Beute ist der Moment: Magister Schnurr schweigt dafuer. */
  .eg-stage.has-loot .eg-cat { display: none; }
}
/* Reicht es trotzdem nicht: von oben an und scrollbar, statt die Knoepfe abzuschneiden. */
.eg-stage.has-loot .eg-content { overflow-y: auto; justify-content: safe center; }

@media (prefers-reduced-motion: reduce) {
  .eg-loot, .eg-loot-name, .eg-loot-rarity { animation: none; transition: none; }
}