/* ==========================================================================
   mxmc.win – Fortschritte („Advancements“)
   Toast im Spiel-Stil und die Liste im Menü der Kopfzeile. Wird nach css/style.css
   geladen und nutzt nur dessen Variablen (Farben kommen damit hell wie dunkel passend).
   Aufbau: Stapel · Toast · Pixelrahmen · Bewegung · Zähler · Menü-Liste · Reduzierte Bewegung
   ========================================================================== */

/* ---------- Stapel: oben rechts unter der Kopfzeile, auf dem Handy oben mittig ----------
   Liegt unter der Kopfzeile (z-index 20), damit der Toast darunter hervorschiebt. */
.adv-stack {
  position: fixed;
  top: calc(var(--topbar-space) + var(--space-2));
  right: var(--gutter);
  z-index: 15;
  display: grid;
  gap: var(--space-2);
  width: min(320px, 100% - 2 * var(--gutter));
  pointer-events: none;
}
@media (max-width: 599px) {
  .adv-stack {
    left: var(--gutter);
    right: var(--gutter);
    margin-inline: auto;
  }
}

/* ---------- Toast: links der Icon-Slot, rechts Kicker, Titel, Text ---------- */
.adv-toast {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin: 4px; /* Platz für den Pixelrahmen, der 4px über den Kasten hinausragt */
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border-radius: 4px;
  background: var(--toast-bg);
  color: var(--toast-ink);
  /* Pixelrahmen ohne Bilddatei: zwei harte Kanten, kein Verlauf, kein weicher Schatten */
  box-shadow: 0 0 0 2px var(--toast-bg), 0 0 0 4px var(--accent-edge);
  font-family: var(--font-body);
  overflow-wrap: anywhere;
}
.adv-toast__slot {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 2px;
  background: var(--accent-fill);
  color: var(--accent-on);
  box-shadow: inset 0 0 0 2px var(--accent-edge);
}
.adv-toast__icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}
.adv-toast__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.adv-toast__kicker {
  font: 700 0.6875rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--idle);
}
.adv-toast__title {
  font: 700 1.0625rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.adv-toast__text {
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.85;
}

/* ---------- Bewegung: von oben hereinschieben, nach dem Halten zurück ---------- */
.adv-toast {
  animation: adv-in 320ms var(--ease-out) both;
}
.adv-toast--out {
  animation: adv-out 320ms var(--ease-out) forwards;
}
@keyframes adv-in {
  from { transform: translateY(-120%); }
  to { transform: translateY(0); }
}
@keyframes adv-out {
  from { transform: translateY(0); }
  to { transform: translateY(-120%); }
}

/* ---------- Zähler am Pokal-Knopf in der Kopfzeile ---------- */
[data-progress-toggle] {
  position: relative;
}
[data-progress-toggle] .icon-btn__badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: var(--accent-on);
  box-shadow: 0 0 0 2px var(--surface);
  font: 700 0.6875rem/18px var(--font-mono);
  text-align: center;
}

/* ---------- Liste im Menü: kompakt, höchstens 320px breit, scrollt bei wenig Höhe ---------- */
.menu--progress {
  width: min(320px, 100vw - 2 * var(--gutter));
  max-width: min(320px, 100vw - 2 * var(--gutter));
}
.adv-list {
  display: grid;
  gap: var(--space-1);
  max-height: min(50vh, 360px);
  margin: var(--space-2) 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
}
.adv-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.adv-item__slot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: var(--accent-softer);
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}
.adv-item__icon {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}
.adv-item__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.adv-item__title {
  font: 700 0.9375rem/1.2 var(--font-display);
}
.adv-item__text {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink-3);
}
.adv-item__check {
  width: 20px;
  height: 20px;
  color: var(--accent);
  shape-rendering: crispEdges;
}
.adv-item.is-done .adv-item__slot {
  background: var(--accent-fill);
  color: var(--accent-on);
  box-shadow: inset 0 0 0 2px var(--accent-edge);
}
/* Nicht erreicht: Icon gedimmt und grau, Text bleibt lesbar (nur über die Farbe gedämpft) */
.adv-item:not(.is-done) {
  color: var(--ink-3);
}
.adv-item:not(.is-done) .adv-item__slot {
  filter: grayscale(1);
  opacity: 0.55;
}
.adv-item:not(.is-done) .adv-item__text {
  font-style: italic;
}

/* ---------- Reduzierte Bewegung: nur ein und aus ---------- */
@media (prefers-reduced-motion: reduce) {
  .adv-toast,
  .adv-toast--out {
    animation: none;
  }
}