/* Achievement cards and the sticker book. */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
  width: 100%;
}

.card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 3px solid var(--tier-color, var(--border));
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-bounce);
}

.card[data-tier="bronze"]  { --tier-color: var(--tier-bronze); }
.card[data-tier="silver"]  { --tier-color: var(--tier-silver); }
.card[data-tier="gold"]    { --tier-color: var(--tier-gold); }
.card[data-tier="rainbow"] { --tier-color: var(--tier-rainbow); }

/* Locked cards keep their shape and their goal text, but drain of colour so
   the collection reads at a glance as "earned" versus "still to come". */
.card[data-state="locked"] {
  filter: grayscale(1);
  opacity: 0.55;
  border-style: dashed;
  box-shadow: none;
}

.card[data-state="unlocked"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tier-color) 12%, transparent), transparent 60%),
    var(--bg-raised);
}
.card[data-tier="rainbow"][data-state="unlocked"] {
  background:
    linear-gradient(135deg, #ffe0f0, #e6e0ff 35%, #dff5ff 70%, #e6ffe9),
    var(--bg-raised);
}

.card__medal {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  font-size: 1.85rem;
  line-height: 1;
}
.card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card__title { font-weight: 800; font-size: var(--t-sm); }
.card__sub {
  font-size: var(--t-xs);
  color: var(--fg-soft);
  line-height: 1.3;
}

.card--compact { padding: var(--s-2); }
.card--compact .card__medal { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; }

/* The reveal on the celebration screen. */
.card--reveal {
  width: min(20rem, 90vw);
  transform-style: preserve-3d;
}
.card--reveal.is-flipping { animation: card-flip 1.1s var(--ease-bounce); }

@keyframes card-flip {
  0%   { transform: rotateY(90deg) scale(0.7); opacity: 0; }
  55%  { transform: rotateY(-12deg) scale(1.08); opacity: 1; }
  75%  { transform: rotateY(6deg) scale(1.02); }
  100% { transform: rotateY(0) scale(1); }
}

.cards__progress {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  font-weight: 700;
  color: var(--fg-soft);
  font-size: var(--t-sm);
}
.cards__bar {
  flex: 1;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  overflow: hidden;
}
.cards__barfill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--tier-bronze), var(--tier-gold));
  transition: width var(--dur-slow) var(--ease-out);
}

/* --- Sticker book ------------------------------------------------------- */

.stickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: var(--s-2);
  width: 100%;
}
.sticker {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 1.6rem;
  border-radius: var(--r-md);
  background: var(--c-paper-2);
}

/* --- Pet panel on the trophy screen ------------------------------------- */

.petpanel {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 3px solid var(--border);
  width: 100%;
}
.petpanel__info { display: flex; flex-direction: column; gap: 2px; }
.petpanel__name { font-size: var(--t-lg); font-weight: 800; }
.petpanel__level { font-size: var(--t-sm); color: var(--fg-soft); }