/* =========================================================================
   Achievement badges — medallions that match Pity's world.
   Tone comes from the badge definition (accounts/badges.py) and picks the
   metal colour; the shape is identical for every badge so a shelf of them
   reads as one collection.
   ========================================================================= */

.badge {
  --tone: var(--sun);
  --tone-deep: var(--sun-deep);
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  text-align: center;
  inline-size: 132px;
}
.badge--sun    { --tone: #ffc800; --tone-deep: #e5a400; }
.badge--grass  { --tone: #58cc02; --tone-deep: #46a302; }
.badge--sky    { --tone: #1cb0f6; --tone-deep: #1899d6; }
.badge--violet { --tone: #a560ff; --tone-deep: #8549cc; }
.badge--coral  { --tone: #ff4b4b; --tone-deep: #e03131; }

.badge-medal {
  position: relative;
  inline-size: 92px;
  block-size: 92px;
  display: grid;
  place-items: center;
  transition: transform var(--t-mid) var(--ease-bounce);
}
.badge:not(.is-locked) .badge-medal:hover { transform: scale(1.09) rotate(-5deg); }

.badge-ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.badge-ring-back  { fill: var(--tone-deep); }
.badge-ring-edge  { fill: none; stroke: var(--tone-deep); stroke-width: 3; }
.badge-scallop circle { fill: var(--tone-deep); }
.badge-ring-face  { fill: var(--tone); }
.badge-shine      { fill: #fff; opacity: 0.26; }

.badge-emoji {
  position: relative;
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

/* Earned badges catch the light every few seconds — a shelf of them shimmers
   just enough to be worth looking at, without becoming a disco. */
.badge:not(.is-locked) .badge-shine { animation: badge-gleam 4.5s ease-in-out infinite; }
@keyframes badge-gleam {
  0%, 80%, 100% { opacity: 0.22; }
  88%           { opacity: 0.62; }
}

/* Locked: the same medal, drained. Still legible, so the goal is visible. */
.badge.is-locked .badge-medal { filter: grayscale(1); opacity: 0.42; }
.badge.is-locked .badge-name  { color: var(--ink-faint); }
.badge-lock {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  font-size: 1.05rem;
  filter: none;
}

.badge-name { font-size: 0.88rem; line-height: 1.25; }
.badge-desc { font-size: 0.74rem; color: var(--ink-soft); line-height: 1.35; }

.badge-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 0.9rem;
  justify-content: center;
}

/* The pop-up shown the moment a badge is earned. */
.badge-toast {
  position: fixed;
  inset-block-end: 1.2rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.2rem 0.8rem 0.8rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: badge-toast-in 0.5s var(--ease-bounce) both;
}
.badge-toast .badge { inline-size: auto; }
.badge-toast .badge-medal { inline-size: 58px; block-size: 58px; }
.badge-toast .badge-emoji { font-size: 1.4rem; }
.badge-toast .badge-desc { display: none; }
.badge-toast-text b { display: block; font-size: 1rem; }
.badge-toast-text small { color: var(--ink-soft); }
.badge-toast.is-leaving { animation: badge-toast-out 0.3s ease-in both; }
@keyframes badge-toast-in {
  from { opacity: 0; translate: -50% 24px; scale: 0.9; }
}
@keyframes badge-toast-out {
  to { opacity: 0; translate: -50% 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .badge-shine, .badge-toast { animation: none !important; }
  .badge-medal { transition: none; }
}

/* =========================================================================
   Badges inside the solve celebration.
   Pity cheers in the middle; anything just unlocked pops in beside her and
   keeps a slow shine so the eye lands on it.
   ========================================================================= */
.celebrate-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 160px;
}
.celebrate-badges {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: -6px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.celebrate-badge {
  inline-size: auto;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  /* Land after Pity has bounced once, so they read as a consequence of the
     solve rather than arriving with it. */
  animation: celebrate-badge-in 0.62s var(--ease-bounce) both;
  animation-delay: calc(0.45s + var(--i, 0) * 0.22s);
}
.celebrate-badge-medal {
  inline-size: 66px;
  block-size: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--tone) 55%, var(--tone-deep) 100%);
  box-shadow: 0 4px 0 var(--tone-deep), var(--shadow-md);
  animation: celebrate-badge-shine 2.2s ease-in-out 1.2s infinite;
}
.celebrate-badge .badge-emoji { font-size: 1.7rem; }
.celebrate-badge b {
  font-size: 0.76rem;
  line-height: 1.2;
  text-align: center;
  max-inline-size: 92px;
  color: var(--ink);
}
@keyframes celebrate-badge-in {
  from { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes celebrate-badge-shine {
  0%, 100% { box-shadow: 0 4px 0 var(--tone-deep), var(--shadow-md); }
  50%      { box-shadow: 0 4px 0 var(--tone-deep), 0 0 22px var(--tone); }
}

@media (max-width: 520px) {
  .celebrate-badges {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-block-start: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .celebrate-badge, .celebrate-badge-medal { animation: none !important; }
}

/* On the profile the shelf is the centrepiece, so it gets room to breathe and
   a sensible column count instead of however many happen to fit. Auto-fit
   keeps it centred at every width without a media query per breakpoint. */
.prof-stack .badge-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.4rem 1rem;
  justify-items: center;
  margin-block-start: 1rem;
}