/*
  🏆 The celebration (web/celebrate.js, window.BuckCelebrate): the popup for a newly earned achievement.
  It's the page's own box (.modal > .modal-box.cel-box), centred on every screen (a phone too, where
  other boxes are a sheet from the bottom): the badge's emoji in a gold medallion, the name, what it was
  for, the day, the next step and two buttons. Readable at 320 px and in dark mode (the theme's colours).

  Like fx.css, every animation is behind <html data-fx>: full = the box rises in, the medallion pops with
  a shine and a soft glow, confetti bursts behind it (celebrate.js puts the bits in .cel-burst at full
  only); subtle = a short fade and scale (200 ms or less), no confetti, no shine; off = nothing. Reduced
  motion stops everything again at the end, whatever the setting says. Only transform, scale and opacity
  move (and the glow's shadow, twice).
*/

.modal:has(> .cel-box) { align-items: center; align-items: safe center; }
.modal-box.cel-box { max-width: 420px; overflow: visible; text-align: center; padding: 1.4rem 1.25rem 1.2rem; position: relative; }
.cel { position: relative; }
.cel-body { display: flex; flex-direction: column; align-items: center; }
.cel-count { position: absolute; top: -.35rem; right: 0; margin: 0; font-size: .78rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* The medallion: the badge's emoji on gold, with a ring and a soft glow. */
.cel-stage { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: .1rem auto .6rem; }
.cel-medal { position: relative; z-index: 1; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #fff8dc 0%, color-mix(in srgb, var(--gold) 70%, #fff) 34%, var(--gold) 68%, color-mix(in srgb, var(--gold) 78%, #7a4b00) 100%);
  border: 4px solid color-mix(in srgb, var(--gold) 55%, #fff);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 34px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 -6px 12px rgba(122, 75, 0, .22); }
.cel-emo { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(80, 50, 0, .25)); }
.cel-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%); transform: translateX(-120%); }
@media (prefers-color-scheme: dark) {
  .cel-medal { border-color: color-mix(in srgb, var(--gold) 70%, #fff); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 40px color-mix(in srgb, var(--gold) 38%, transparent), inset 0 -6px 12px rgba(122, 75, 0, .3); }
}

/* Confetti behind the medallion (full only: celebrate.js adds the bits then). */
.cel-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.cel-burst i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; background: var(--c, var(--accent)); opacity: 0; }
.cel-burst i.wide { width: 11px; height: 6px; }
/* (the words and buttons stay on top of it) */
.cel-eyebrow, .cel-name, .cel-title, .cel-why, .cel-when, .cel-next, .cel-grid, .cel-row, .cel-acts { position: relative; z-index: 1; }

/* The words. */
.cel-eyebrow { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.cel-name { margin: .25rem 0 .35rem; font-size: 1.45rem; font-weight: 800; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.cel-title { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.cel-why { margin: 0 0 .5rem; color: var(--text-2); max-width: 32ch; }
.cel-when { margin: 0; font-size: .85rem; font-weight: 600; color: var(--good); }
.cel-next { margin: .65rem 0 0; padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.cel-acts { margin-top: 1.2rem; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.cel-acts .btn { min-width: 7.5rem; }

/* Several at once: a grid; the first look: a row of chips. */
.cel-grid { list-style: none; margin: .25rem 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; text-align: left; }
.cel-grid li { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .45rem .55rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: .88rem; font-weight: 600; }
.cel-g-emo { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.cel-g-name { min-width: 0; overflow-wrap: anywhere; }
.cel-grid .cel-more { justify-content: center; color: var(--text-3); background: none; border-style: dashed; }
.cel-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .25rem 0 0; }
.cel-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .84rem; font-weight: 600; }
.cel-already .cel-medal { width: 92px; height: 92px; }
.cel-already .cel-stage { width: 100px; height: 100px; }
.cel-already .cel-emo { font-size: 2.7rem; }

/* A phone: centred like a card (not a sheet), a little smaller. */
@media (max-width: 600px) {
  .modal:has(> .cel-box) { padding: 1rem; }
  .modal-box.cel-box { border-radius: var(--radius-lg); max-height: none; overflow: visible; padding: 1.25rem 1rem 1rem; }
}
@media (max-width: 380px) {
  .cel-stage { width: 112px; height: 112px; }
  .cel-medal { width: 96px; height: 96px; }
  .cel-emo { font-size: 2.9rem; }
  .cel-name { font-size: 1.25rem; }
  .cel-acts .btn { flex: 1 1 100%; }
}
@media (max-width: 340px) { .cel-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- moving (behind html[data-fx]) ---------- */
@keyframes cel-in { from { opacity: 0; translate: 0 10px; scale: .96; } }
@keyframes cel-fade { from { opacity: 0; } }
@keyframes cel-soft { from { opacity: 0; scale: .92; } }
@keyframes cel-pop { 0% { opacity: 0; scale: .3; rotate: -12deg; } 55% { opacity: 1; scale: 1.14; rotate: 4deg; } 78% { scale: .97; rotate: 0deg; } 100% { scale: 1; } }
@keyframes cel-shine { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 1; transform: translateX(120%); } }
@keyframes cel-glow {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 34px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 -6px 12px rgba(122, 75, 0, .22); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--gold) 16%, transparent), 0 0 60px color-mix(in srgb, var(--gold) 65%, transparent), inset 0 -6px 12px rgba(122, 75, 0, .22); }
}
@keyframes cel-bit {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), calc(var(--dy, 0px) + 40px)) rotate(var(--r, 360deg)) scale(1); }
}

/* Full: the box rises in, the medallion pops, the shine sweeps once, the glow breathes twice, the confetti flies. */
html[data-fx="full"] .cel-box { animation: cel-in .28s var(--fx-out, ease-out) both; }
html[data-fx="full"] .cel:not(.cel-already) .cel-medal { animation: cel-pop .6s var(--fx-spring, ease-out) .08s both, cel-glow 1.6s ease-in-out .7s 2; }
html[data-fx="full"] .cel:not(.cel-already) .cel-shine { animation: cel-shine .9s ease-in-out .55s both; }
html[data-fx="full"] .cel-burst i { animation: cel-bit 1.1s cubic-bezier(.2, .6, .4, 1) calc(.12s + var(--d, 0ms)) both; }
html[data-fx="full"] .cel-already .cel-medal { animation: cel-soft .3s var(--fx-out, ease-out) both; }
/* (Next ›: the next badge's medallion pops again; its words fade in.) */
html[data-fx="full"] .cel-body > :not(.cel-stage) { animation: cel-fade .25s ease-out .15s both; }
/* Subtle: a short fade and scale, nothing else. */
html[data-fx="subtle"] .cel-box { animation: cel-fade .18s ease-out both; }
html[data-fx="subtle"] .cel-medal { animation: cel-soft .2s ease-out both; }

/* ---------- reduced motion: nothing moves, whatever the setting says ---------- */
@media (prefers-reduced-motion: reduce) {
  .cel-burst { display: none !important; }
  .cel-box, .cel-box *, .cel-box *::before, .cel-box *::after { animation: none !important; transition: none !important; }
}