.celebration-layer {
  position: fixed;
  inset: 0;
  z-index: 13;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 16px;
  pointer-events: none;
}

.celebration {
  --celebration-accent: var(--peach);
  --character-color: #ffc45e;
  --character-ink: #58332e;
  --character-shoe: #ff8f9b;
  position: relative;
  isolation: isolate;
  width: min(520px, 100%);
  padding: 2px 28px 26px;
  color: var(--text);
  text-align: center;
  animation: celebration-enter 420ms cubic-bezier(.17, .81, .31, 1.22) both;
}

.celebration::before {
  position: absolute;
  z-index: -1;
  inset: 34px 0 0;
  content: '';
  border: 1px solid color-mix(in srgb, var(--celebration-accent) 52%, var(--line));
  border-radius: 26px;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--celebration-accent) 22%, var(--panel)) 0%, var(--panel) 73%);
  box-shadow: 0 8px 0 -3px color-mix(in srgb, var(--celebration-accent) 17%, var(--panel)), 0 22px 60px #11102454;
}

.celebration--goal {
  --celebration-accent: var(--success-ink);
  --character-color: #97e3b3;
  --character-ink: #1a503c;
  --character-shoe: #ffe183;
}

.celebration--finish {
  --celebration-accent: var(--violet);
  --character-color: #d1b9ff;
  --character-ink: #4a326c;
  --character-shoe: #ffbe92;
}

.celebration--perfect {
  --celebration-accent: var(--lime);
  --character-color: #ffdc61;
  --character-ink: #624216;
  --character-shoe: #f798bf;
}

.celebration--streak::before,
.celebration--goal::before {
  inset-inline: 6%;
}

.celebration--leaving {
  animation: celebration-leave 240ms ease-in both;
}

.celebration-art {
  position: relative;
  display: grid;
  place-items: center;
  margin: -34px auto 4px;
  width: min(298px, 85%);
}

.celebration-art::before {
  position: absolute;
  inset: -12% -14%;
  content: '';
  background: repeating-conic-gradient(from -4deg, transparent 0deg 13deg, var(--celebration-accent) 13deg 18deg, transparent 18deg 27deg);
  mask-image: radial-gradient(ellipse, transparent 22%, #000 44%, transparent 70%);
  opacity: .26;
  animation: celebration-rays 650ms ease-out both;
}

.celebration-character {
  position: relative;
  width: 100%;
  overflow: visible;
  transform-origin: center 80%;
  filter: drop-shadow(0 8px 8px #17122236);
  animation: celebration-jump 710ms 50ms ease-out both;
}

.celebration-character-fill,
.celebration-book-edge,
.celebration-shoe {
  stroke: var(--character-ink);
  stroke-width: 3.8;
  stroke-linejoin: round;
}

.celebration-character-fill { fill: var(--character-color); }
.celebration-book-edge { fill: #ece1fb; }
.celebration-shoe { fill: var(--character-shoe); }
.celebration-goal-badge { fill: #fff8d4; }

.celebration-limb,
.celebration-highlight,
.celebration-face-line,
.celebration-movement {
  fill: none;
  stroke-linecap: round;
}

.celebration-limb {
  stroke: color-mix(in srgb, var(--character-ink) 74%, var(--character-color));
  stroke-width: 6.5;
}
.celebration-highlight { stroke: #fff7e7; stroke-width: 4; }
.celebration-face-line { stroke: var(--character-ink); stroke-width: 3.2; }
.celebration-movement { stroke: var(--celebration-accent); stroke-width: 3.5; }
.celebration-mouth { fill: var(--character-ink); }
.celebration-cheek { fill: #eb7590; }

.celebration-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.celebration-copy strong {
  display: block;
  font-size: clamp(1.7rem, 6.5vw, 2.7rem);
  font-weight: 820;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.celebration-copy p {
  margin: 8px auto 0;
  color: var(--muted);
  font-size: clamp(.87rem, 3.1vw, 1.01rem);
  line-height: 1.35;
  text-wrap: balance;
}

.celebration-confetti {
  position: absolute;
  z-index: -2;
  top: 37%;
  left: 50%;
}

.celebration-confetti i {
  position: absolute;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  background: var(--celebration-accent);
  animation: celebration-burst 1070ms var(--piece-delay) cubic-bezier(.12, .61, .28, 1) both;
}

.celebration-confetti i:nth-child(3n + 1) { background: #ffa03f; }
.celebration-confetti i:nth-child(3n + 2) { background: #ed71a5; }
.celebration-confetti i:nth-child(4n) {
  width: 14px;
  height: 14px;
  background: #67caa5;
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}

.celebration-announcement {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@keyframes celebration-enter {
  from { opacity: 0; transform: translateY(36px) scale(.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes celebration-leave {
  to { opacity: 0; transform: translateY(-18px) scale(.96); }
}

@keyframes celebration-jump {
  from { transform: translateY(12px) scale(1.1, .85) rotate(-10deg); }
  43% { transform: translateY(-17px) scale(.94, 1.07) rotate(8deg); }
  73% { transform: translateY(3px) scale(1.04, .95) rotate(-3deg); }
  to { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes celebration-rays {
  from { transform: rotate(-20deg) scale(.72); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: .26; }
}

@keyframes celebration-burst {
  from { opacity: 0; transform: translate(0, 10px) scale(.35); }
  17% { opacity: 1; }
  76% { opacity: .96; }
  to {
    opacity: 0;
    transform: translate(clamp(-45vw, var(--piece-x), 45vw), var(--piece-y)) rotate(var(--piece-turn)) scale(.65);
  }
}

@media (max-width: 550px) {
  .celebration-layer { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .celebration { width: min(338px, 100%); padding: 4px 15px 19px; }
  .celebration-art { width: min(205px, 82%); margin-top: -27px; }
  .celebration::before { inset-block-start: 29px; border-radius: 22px; }
}

@media (max-height: 480px) {
  .celebration-art { width: min(170px, 70%); margin-top: -12px; }
  .celebration { padding-bottom: 14px; }
  .celebration-copy strong { font-size: clamp(1.35rem, 5vw, 1.85rem); }
}

@media (prefers-reduced-motion: reduce) {
  .celebration,
  .celebration--leaving,
  .celebration-art::before,
  .celebration-character { animation: none; }
  .celebration-confetti { display: none; }
}