/* ============================================================
   achievements.css — Abzeichen: Profil-Einstieg, Sammlung,
   Detail-Sheet und Freischalt-Inszenierung.
   Vanilla CSS, kein Glow; reduzierte Bewegung greift global
   über die Media-Query in animations.css.
   ============================================================ */

/* --- Profil: Einstiegskarte ------------------------------------ */
/* Zwillingskachel zum Shop (siehe .profile-duo und .shop-cta in screens.css):
   gleicher Aufbau, gleiche Höhe. Der Fortschrittsbalken liegt ABSOLUT am
   unteren Rand statt im Textfluss – sonst schöbe er den Text nach oben und
   die beiden Titel stünden nicht mehr auf einer Linie. */
.ach-cta {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); text-align: left; color: var(--text);
}
.ach-cta .ac-medal {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; box-shadow: 0 4px 10px rgba(53, 106, 27, 0.24);
  display: flex; align-items: center; justify-content: center;
}
.ach-cta .ac-medal .icon { width: 19px; height: 19px; }
.ach-cta .ac-title { display: block; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.ach-cta .ac-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.ach-cta .ach-track { position: absolute; left: 12px; right: 12px; bottom: 9px; height: 5px; }

/* --- Fortschritts-Balken (geteilt) ----------------------------- */
.ach-track {
  display: block; height: 8px; border-radius: var(--r-pill);
  background: var(--stone-100); overflow: hidden;
}
.ach-track span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--fando-300), var(--fando));
  transition: width var(--dur-5) var(--ease-out);
}

/* --- Sammlung: Kopf – satte Fando-Bühne mit Palme --------------- */
.ach-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; border-radius: var(--r-lg); padding: 18px 16px;
  box-shadow: 0 10px 24px rgba(53, 106, 27, 0.28);
  margin-bottom: 6px;
}
.ach-hero::after {
  content: ""; position: absolute; pointer-events: none;
  right: -14%; bottom: -30%; width: 58%; max-width: 220px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.14;
}
.ach-hero-medal {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.ach-hero-count { font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.ach-hero-total { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-left: 4px; }
.ach-hero .ach-track { margin-top: 8px; background: rgba(255, 255, 255, 0.24); }
.ach-hero .ach-track span { background: #fff; }
.ach-hero .caption { color: rgba(255, 255, 255, 0.85); }

/* --- Grid ------------------------------------------------------ */
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ach-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; color: var(--text);
}
/* Freigeschaltete Kachel: hebt sich sichtbar vom Grau der gesperrten ab. */
.ach-tile.unlocked {
  border-color: var(--fando-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--fando-tint) 100%);
  box-shadow: var(--shadow-xs);
}
.ach-tile-name {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ach-tile.locked .ach-tile-name { color: var(--text-subtle); }

/* Zähler je Kategorie: Pille, komplett = Fando. */
.ach-cat-count {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  background: var(--stone-100); color: var(--text-muted);
  border-radius: var(--r-pill); padding: 3px 9px;
}
.ach-cat-count.done { background: var(--fando); color: #fff; }

/* --- Medaillon (Grid, Sheet, Inszenierung) --------------------- */
.ach-medal {
  position: relative; width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Freigeschaltet: SATTES Fando-Grün, weißes Symbol – kein blasses Tint. */
.ach-medal.unlocked, .ach-tile.unlocked .ach-medal {
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; border: none;
  box-shadow: 0 6px 14px rgba(53, 106, 27, 0.28);
}
.ach-medal.unlocked .ach-palm-ic, .ach-tile.unlocked .ach-palm-ic { filter: brightness(0) invert(1); }
.ach-medal.locked, .ach-tile.locked .ach-medal {
  background: var(--stone-100); color: var(--stone-400);
  border: 1.5px solid var(--stone-200);
}
.ach-medal.sm { width: 36px; height: 36px; }
.ach-medal.xl { width: 84px; height: 84px; }
.ach-medal.xl svg { width: 36px; height: 36px; }
.ach-medal.more {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  background: rgba(255, 255, 255, 0.14); border: 1.5px solid transparent; color: #fff;
}

/* Platin („Suchti“): edles Silber statt Grün – nur freigeschaltet. */
.ach-tile.platin.unlocked .ach-medal, .ach-medal.platin.unlocked {
  background: linear-gradient(135deg, #eef0f5 0%, #c6c9d2 55%, #a2a6b1 100%);
  border-color: #b9bcc6; color: var(--ink-700);
}
.ach-tile.platin.unlocked .ach-mini { background: var(--ink-700); border-color: var(--ink-900); color: #fff; }
.ach-tile.platin.unlocked .ach-tile-name { color: var(--ink-700); }

/* Palmen-Logo als Abzeichen-Bild */
.ach-palm-ic { width: 22px; height: 26px; object-fit: contain; }
.ach-medal.sm .ach-palm-ic { width: 16px; height: 19px; }
.ach-medal.xl .ach-palm-ic { width: 32px; height: 38px; }
.ach-tile.locked .ach-palm-ic, .ach-medal.locked .ach-palm-ic { filter: grayscale(1) opacity(0.55); }

/* Mini-Status (Haken/Schloss) an der Medaille */
.ach-mini {
  position: absolute; right: -3px; bottom: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--stone-400);
}
.ach-mini .icon-sm { width: 12px; height: 12px; }
/* Auf dem satten Grün: weißer Punkt mit grünem Haken (Kontrast). */
.ach-tile.unlocked .ach-mini { background: #fff; border-color: var(--fando-200); color: var(--fando-700); }

/* --- Detail-Sheet ---------------------------------------------- */
.ach-sheet { padding: 6px 2px 4px; gap: 12px; }
/* Pillen nicht auf Sheet-Breite strecken (.stack richtet Kinder sonst voll aus) */
.ach-sheet .badge, .ach-sheet .ach-reward, .ach-sheet .ach-medal { align-self: center; }
.ach-how {
  width: 100%; background: var(--bg-sunken); border-radius: var(--r-md);
  padding: 12px 14px; text-align: center;
}
.ach-how p { margin-top: 4px; font-size: var(--fs-sm); line-height: var(--lh-normal); }
.ach-progress { width: 100%; display: flex; align-items: center; gap: 10px; }
.ach-progress .ach-track { flex: 1; }
.ach-progress .caption { flex: none; }
.ach-reward {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--stone-100); color: var(--text-muted);
  border-radius: var(--r-pill); padding: 8px 14px; font-size: var(--fs-sm);
}
.ach-reward.got { background: var(--fando-tint); color: var(--fando-700); }
.ach-reward-palm { width: 18px; height: 22px; object-fit: contain; }

/* --- Freischalt-Inszenierung -----------------------------------
   Grüne Bühne mit Palmen-Wasserzeichen – dieselbe Bildsprache wie
   der Sieg-Screen des Scorers (.scorer-finish), Glas-Medaillon
   statt Farbfläche, weiche Tiefe statt Glow. */
.ach-stage {
  position: absolute; inset: 0; z-index: var(--z-celebrate); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #5aa233 0%, #43811f 60%, #356a1b 100%);
  animation: backdrop-in var(--dur-3) ease both;
  cursor: pointer;
}
.ach-stage.leaving { animation: fade-in var(--dur-3) ease reverse both; }
/* Zart schwebende Palme rechts unten – wie am Sieg-Screen. */
.ach-stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -12%; bottom: -8%; width: 78%; max-width: 420px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.12;
  animation: finish-palm-drift 9s var(--ease-in-out) infinite;
  will-change: transform;
}
/* Weiche Tiefe: Licht oben, Abdunklung unten. */
.ach-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 44%),
    radial-gradient(140% 120% at 50% 118%, rgba(16,34,10,0.34), rgba(16,34,10,0) 56%);
}
.ach-stage-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px; max-width: min(92vw, 380px);
}
.ach-ring {
  position: absolute; top: -8px; left: 50%; margin-left: -74px;
  width: 148px; height: 148px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.55); opacity: 0;
}
.ach-ring.r1 { animation: ring-expand 1.5s var(--ease-out) 0.15s forwards; }
.ach-ring.r2 { animation: ring-expand 1.5s var(--ease-out) 0.5s forwards; }
/* Glas-Medaillon mit weißem Abzeichen-Symbol. */
.ach-stage-medal {
  width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 18px 40px rgba(16, 34, 10, 0.32);
  animation: ach-medal-pop 0.7s var(--ease-spring) both;
}
.ach-stage-medal svg { width: 48px; height: 48px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16)); }
.ach-stage-medal .ach-palm-ic { width: 40px; height: 48px; filter: brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16)); }
/* Kleine Eyebrow-Zeile, darunter der Name groß – wie am Sieg-Screen. */
.ach-stage-title {
  margin-top: 20px; color: rgba(255, 255, 255, 0.78);
  font-weight: var(--fw-bold); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  animation: fade-up var(--dur-4) var(--ease-out) 0.25s both;
}
.ach-stage-name {
  color: #fff; font-weight: var(--fw-black); font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin-top: 4px;
  text-shadow: 0 2px 14px rgba(16, 34, 10, 0.25);
  animation: fade-up var(--dur-4) var(--ease-out) 0.35s both;
}
.ach-stage-count {
  color: #fff; font-size: var(--fs-4xl); font-weight: var(--fw-black);
  line-height: 1; margin-top: 16px;
  text-shadow: 0 2px 14px rgba(16, 34, 10, 0.25);
}
.ach-stage-reward {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border-radius: var(--r-pill); padding: 8px 16px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: fade-up var(--dur-4) var(--ease-out) 0.45s both;
}
.ach-stage-step { color: rgba(255, 255, 255, 0.65); margin-top: 12px; font-size: var(--fs-xs); }
.ach-stage-hint {
  color: rgba(255, 255, 255, 0.6); font-size: var(--fs-2xs); margin-top: 18px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  animation: fade-in var(--dur-4) ease 0.9s both;
}
.ach-stage-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 18px; max-width: 300px;
}
.ach-stage-row .ach-medal {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  animation: pop-in var(--dur-4) var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 70ms + 0.4s);
}
.ach-stage-row .ach-palm-ic { filter: brightness(0) invert(1); }
/* Weißer Haupt-Knopf auf der grünen Bühne (wie „Zur Rangliste“ am Sieg-Screen). */
.ach-stage-cta {
  margin-top: 20px; background: #fff; color: var(--fando-700);
  box-shadow: 0 10px 24px rgba(16, 34, 10, 0.26);
  animation: fade-up var(--dur-4) var(--ease-out) 0.7s both;
}
.ach-stage-cta:active { background: var(--fando-100); }

@keyframes ach-medal-pop {
  0%   { opacity: 0; transform: scale(0.3) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}