/* =========================================================
   Korkensammlung (Achievements): Glas-Held + Abzeichen
   ========================================================= */

.collection-view {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px calc(28px + var(--safe-bottom));
}

/* Topbar mit Zurück */
.coll-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.coll-topbar-title {
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: .2px;
}
.coll-back { background: var(--surface); box-shadow: var(--shadow-sm); }

/* ---------------- Held: Genießer-Rang ---------------- */
.rank-hero {
  position: relative;
  text-align: center;
  padding: 16px 16px 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-100) 0%, transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--surface-2) 100%);
  margin-top: 6px;
  overflow: hidden;
}
.rank-hero::before {
  content: "";
  position: absolute;
  inset: 0 20% auto 20%;
  height: 55%;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.75), transparent 70%);
  pointer-events: none;
}
.coll-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-100);
  color: var(--accent-700);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.coll-eyebrow svg { width: 14px; height: 14px; }

/* Fortschrittsring */
.rank-ring {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 18px auto 4px;
}
.rank-svg { width: 100%; height: 100%; display: block; }
.rank-svg .rank-arc {
  transition: stroke-dashoffset 1.2s var(--ease-out);
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--accent) 35%, transparent));
}
.rank-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.rank-medal-ic {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: var(--accent-700);
  background: var(--accent-100);
}
.rank-medal-ic svg { width: 22px; height: 22px; }
.rank-count {
  font-size: 2.6rem;
  font-weight: 850;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rank-count-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.rank-name {
  margin-top: 12px;
  font-size: var(--fs-2xl);
  font-weight: 850;
  letter-spacing: -.4px;
  color: var(--accent-700);
}
.rank-sub {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Rang-Reise */
.rank-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.rank-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--border);
  color: #fff;
  transition: transform .2s var(--ease-spring);
}
.rank-dot svg { width: 11px; height: 11px; }
.rank-dot.done {
  background: linear-gradient(160deg, var(--accent-200), var(--accent));
  box-shadow: none;
}
.rank-dot.current {
  width: 24px; height: 24px;
  background: linear-gradient(160deg, var(--accent), var(--accent-700));
  box-shadow: 0 0 0 4px var(--accent-100);
  transform: translateY(-1px);
}
.rank-dot.current svg { width: 13px; height: 13px; }

/* ---------------- Statistik-Reihe ---------------- */
.coll-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 4px;
}
.coll-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 8px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.coll-stat-ic {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-700);
}
.coll-stat-ic svg { width: 18px; height: 18px; }
.coll-stat b { display: block; font-size: var(--fs-lg); font-weight: 850; line-height: 1.1; }
.coll-stat-label { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; }

/* ---------------- Abschnittskopf ---------------- */
.coll-sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 26px 2px 12px;
}
.coll-sec-head .sec-ic {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  color: var(--accent-700);
}
.coll-sec-head .sec-ic svg { width: 22px; height: 22px; }
.coll-sec-head h3 { font-size: var(--fs-lg); font-weight: 800; }
.coll-sec-meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-faint);
}

/* ---------------- Abzeichen-Gitter ---------------- */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 560px) {
  .badges-grid { grid-template-columns: repeat(3, 1fr); }
}
.badge {
  position: relative;
  border-radius: var(--radius);
  padding: 16px 12px 14px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.badge.earned {
  border-color: color-mix(in srgb, var(--bc) 40%, var(--border));
  background:
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--bc) 16%, #fff) 0%, var(--surface) 70%);
}
.badge.earned::before {
  /* feiner Glanzstreif für freigeschaltete Abzeichen */
  content: "";
  position: absolute;
  top: -40%; left: -30%;
  width: 60%; height: 180%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(8deg);
  pointer-events: none;
}
/* ---- Wachssiegel ---- */
.badge-ic {
  position: relative;
  width: 64px; height: 64px;
  margin: 4px auto 13px;
  display: grid;
  place-items: center;
  /* leicht unregelmäßige Siegel-Form (geprägter Wachstropfen) */
  border-radius: 49% 51% 52% 48% / 51% 49% 51% 49%;
  color: var(--text-faint);
}
/* aufgedrückter Wachsrand (etwas größer, organisch, verläuft) */
.badge-ic::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  border-radius: 47% 53% 50% 50% / 53% 47% 53% 47%;
  background: var(--surface-2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6);
}
/* der eigentliche Siegelkörper */
.badge-ic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 36% 30%, #f0f1f3 0%, #dcdfe4 55%, #c5c9d0 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.7),
    inset 0 -4px 8px rgba(0,0,0,.16),
    0 3px 7px rgba(20,20,30,.14);
}
.badge.earned .badge-ic { color: #fff; }
.badge.earned .badge-ic::before {
  background: color-mix(in srgb, var(--bc) 60%, #000);
  filter: blur(1px);
  opacity: .55;
}
.badge.earned .badge-ic::after {
  background:
    radial-gradient(circle at 34% 26%,
      color-mix(in srgb, var(--bc) 38%, #fff) 0%,
      var(--bc) 52%,
      color-mix(in srgb, var(--bc) 72%, #000) 100%);
  box-shadow:
    inset 0 2px 4px color-mix(in srgb, var(--bc) 10%, #fff),
    inset 0 -5px 10px rgba(0,0,0,.32),
    inset 0 0 0 3px color-mix(in srgb, var(--bc) 60%, #000),
    0 4px 12px color-mix(in srgb, var(--bc) 40%, transparent);
}
/* eingeprägtes Emblem */
.badge-glyph {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}
.badge-ic svg {
  width: 28px; height: 28px;
}
.badge.earned .badge-glyph svg {
  color: color-mix(in srgb, var(--bc) 55%, #000);
  filter: drop-shadow(0 1.2px 0 color-mix(in srgb, var(--bc) 25%, #fff));
}
.badge.locked .badge-glyph { opacity: .6; }
.badge.locked .badge-glyph svg {
  color: #9aa0aa;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}
.badge-name {
  font-weight: 800;
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.badge.locked .badge-name { color: var(--text-soft); }
.badge-desc {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.35;
  min-height: 2.4em;
}
.badge-prog {
  margin: 9px auto 5px;
  height: 6px;
  width: 78%;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.badge-prog-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-200), var(--accent));
  transition: width .9s var(--ease-out);
}
.badge-prog-meta {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.badge-earned-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--bc);
}
.badge-earned-meta svg { width: 12px; height: 12px; }

/* ---------------- Einstieg im Profil ---------------- */
.coll-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.coll-entry:active { transform: scale(.985); }
.coll-entry::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  pointer-events: none;
}
.coll-entry-ic {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
}
.coll-entry-ic svg { width: 26px; height: 26px; }
.coll-entry-txt { flex: 1; min-width: 0; }
.coll-entry-txt b { display: block; font-size: var(--fs-md); font-weight: 800; }
.coll-entry-txt span { font-size: var(--fs-sm); opacity: .9; }
.coll-entry-arrow { flex: none; opacity: .9; }
.coll-entry-arrow svg { width: 20px; height: 20px; }

/* ---------------- Jubel-Siegel auf der Wein-Detailseite ---------------- */
.cork-burst {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 36% 30%, var(--accent-200), var(--accent) 55%, var(--accent-700));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4), 0 3px 8px color-mix(in srgb, var(--accent) 40%, transparent);
  pointer-events: none;
  z-index: 3;
  animation: sealPop 950ms var(--ease) forwards;
}
.cork-burst::before {
  content: "🍷";
  font-size: 13px;
  line-height: 1;
}
@keyframes sealPop {
  0% { transform: translateY(-6px) scale(.4); opacity: 0; }
  30% { opacity: 1; transform: translateY(-40px) scale(1.05); }
  60% { transform: translateY(-48px) scale(1); }
  100% { transform: translateY(-38px) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .badge.earned::before,
  .cork-burst { animation: none; }
}