/* ============================================================
   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; }

/* Frisch freigeschaltet, noch nicht angesehen: Zahl oben rechts und ein
   Untertitel, der „3 neu“ statt des Zählerstands zeigt. Der Rahmen wechselt
   auf Fando – flach, ohne Schein und ohne Bewegung, die Zahl reicht.
   Farbe: Zahl und Schrift in Fando wie jedes andere Badge der App (Rot ist
   hier für die reinen Punkte reserviert, die nur „da ist was“ sagen). */
.ach-cta.hat-neue { border-color: var(--fando-300); }
.ach-cta .ac-neu {
  position: absolute; top: 8px; right: 8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--fando-600); color: #fff; border-radius: var(--r-pill);
  font-size: 10px; font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
}
.ach-cta.hat-neue .ac-sub { color: var(--fando-700); font-weight: var(--fw-semibold); }

/* --- 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 {
  position: relative;   /* Anker für den „neu“-Punkt in der Ecke */
  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);
}
/* --- Frisch freigeschaltet: „neu“, bis es einmal angetippt wurde --------
   Bewusst leise: kräftigerer Fando-Rahmen, ein roter Punkt in der Ecke und
   ein langsames Pulsieren NUR dieses Punktes. Die Kachel selbst bewegt sich
   nicht und wächst nicht – sonst zappelt beim Öffnen der Sammlung das halbe
   Raster. Bei „Bewegung reduzieren“ steht der Punkt still (globaler Schalter
   in css/animations.css), sichtbar bleibt er trotzdem.
   Nur der Punkt ist rot – er sagt bloss „da ist was“. Alles mit Text (Chip,
   Zahl, Untertitel) läuft im Fando-Grün der übrigen Badges. */
.ach-tile.neu, .ach-season.neu {
  border-color: var(--fando);
  box-shadow: 0 0 0 1px var(--fando-200), var(--shadow-xs);
}
.ach-neu-dot {
  position: absolute; top: 7px; right: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  animation: ach-neu-puls 2.4s var(--ease-in-out) infinite;
}
@keyframes ach-neu-puls { 50% { opacity: 0.45; } }
.ach-neu-chip {
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--fando-600); color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
}
.ach-head-right { display: inline-flex; align-items: center; gap: 6px; }

.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; }

/* --- Versteckte Abzeichen: die Nacht -----------------------------
   Eigene dunkle Bühne (Ink-Verlauf wie die Saisonfinale-Karte am Start,
   Palme leise rechts unten) – so trennt sich die Sektion sichtbar vom
   hellen Raster der übrigen Kategorien. Gesperrte Kacheln sind dunkles
   Glas mit einem Fragezeichen, um das ein gestrichelter Ring ganz langsam
   kreist und das leise atmet; aufgedeckte leuchten in sattem Fando.
   Flach, keine Reflexe – Pauls Motion-Regeln. */
.ach-nacht {
  position: relative; overflow: hidden;
  margin: 22px -4px 26px; padding: 14px 14px 16px;
  border-radius: 18px; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(90, 162, 51, 0.22), transparent 55%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
  box-shadow: var(--shadow-md);
}
.ach-nacht::before {
  content: ""; position: absolute; pointer-events: none;
  right: -14%; bottom: -12%; width: 62%; max-width: 240px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.06;
}
.ach-nacht > * { position: relative; z-index: 1; }
.ach-nacht .section-head { margin-top: 0; }
.ach-nacht .overline { color: rgba(255, 255, 255, 0.72); }
.ach-nacht .ach-cat-count { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }
.ach-nacht .ach-cat-count.done { background: var(--fando); color: #fff; }
.ach-versteckt-info {
  margin: -2px 0 12px; color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-xs); line-height: var(--lh-normal); font-style: italic;
}
.ach-grid.versteckt { grid-template-columns: repeat(2, 1fr); }
.ach-tile.versteckt {
  padding: 14px 10px 12px; gap: 7px; color: #fff;
  background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1);
}
.ach-tile.versteckt .ach-tile-name { -webkit-line-clamp: 1; color: rgba(255, 255, 255, 0.92); }
.ach-tile.versteckt.locked .ach-tile-name { color: rgba(255, 255, 255, 0.78); }
.ach-hint {
  font-size: var(--fs-2xs); line-height: 1.35; font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Aufgedeckt: sattes Fando auf der Nacht – der Hinweis wird zur Beute. */
.ach-tile.versteckt.unlocked {
  background: rgba(90, 162, 51, 0.16); border-color: rgba(127, 183, 99, 0.5);
  box-shadow: none;
}
.ach-tile.versteckt.unlocked .ach-hint { color: var(--fando-200); }
.ach-tile.versteckt .ach-mini { background: var(--ink-800); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
.ach-tile.versteckt.unlocked .ach-mini { background: #fff; border-color: var(--fando-200); color: var(--fando-700); }
.ach-tile.versteckt.neu { border-color: var(--fando-300); box-shadow: 0 0 0 1px rgba(127, 183, 99, 0.4); }
/* Hinweis-Kasten im Detail-Sheet (statt „So bekommst du es“). */
.ach-how.hinweis {
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900)); color: #fff;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}
.ach-how.hinweis .overline { color: rgba(255, 255, 255, 0.6); }
.ach-how.hinweis .caption { color: rgba(255, 255, 255, 0.55); }
.ach-hint-gross {
  font-style: italic; font-size: var(--fs-md); line-height: var(--lh-normal);
  margin-top: 4px;
}
.ach-how .ach-hint-klein {
  display: block; margin-top: 7px; font-style: italic; color: var(--text-subtle);
}

/* --- 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);
}
/* Verstecktes, noch gesperrtes Abzeichen: dunkles Glas, das Fragezeichen
   atmet leise, und ein gestrichelter Ring kreist ganz langsam darum –
   „unbekannt“ statt „noch nicht geschafft“. Steht NACH .locked, sonst
   gewänne der graue Rand. */
.ach-medal.frage, .ach-tile.versteckt.locked .ach-medal {
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  border: none; color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ach-medal.frage::before, .ach-tile.versteckt.locked .ach-medal::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  animation: ach-frage-kreis 40s linear infinite;
}
.ach-medal.frage > svg, .ach-tile.versteckt.locked .ach-medal > svg {
  animation: ach-frage-atmen 4.5s var(--ease-in-out) infinite;
}
@keyframes ach-frage-kreis { to { transform: rotate(360deg); } }
@keyframes ach-frage-atmen { 50% { opacity: 0.45; } }
.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); }
}

/* ---------------- Saison-Abzeichen (Quartals-Karte + Checkliste) ---------------- */
.ach-season {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 12px 14px; margin-bottom: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  font: inherit; color: inherit; text-align: left;
}
.ach-season.unlocked { border-color: var(--fando-300); background: var(--fando-tint); }
.ach-season .ach-medal { flex: none; }

/* Bedingungs-Checkliste im Detail-Sheet (eine Zeile je Teil-Aufgabe) */
.ach-parts { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.ach-part {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--r-sm); background: var(--stone-100);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.ach-part .icon-sm { flex: none; }
.ach-part.done { background: var(--fando-tint); color: var(--fando-700); }
.ach-part.done .grow { font-weight: var(--fw-semibold); }