/* Short, non-blocking star celebrations. Loaded after the base UI styles. */
#celebration {
  position:fixed;
  inset:0;
  z-index:90;
  overflow:hidden;
  user-select:none;
}

#celebration,
#celebration * {
  pointer-events:none !important;
}

.celebration-scene {
  position:absolute;
  inset:0;
  overflow:hidden;
  isolation:isolate;
}

/* Override the original .celebrate-banner animation and nowrap layout. */
.celebration-scene .celebrate-banner {
  position:absolute;
  top:clamp(100px,30vh,280px);
  left:50%;
  z-index:2;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:5px 12px;
  width:max-content;
  min-width:0;
  max-width:min(680px,calc(100vw - 40px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  margin:0;
  padding:17px 25px;
  border:3px solid #26344a;
  border-radius:20px;
  background:#ffdf68;
  box-shadow:5px 6px 0 #26344a;
  color:#26344a;
  font-size:clamp(24px,5.8vw,42px);
  font-weight:1000;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  opacity:0;
  transform:translate3d(-50%,0,0) scale(.88);
  transform-origin:50% 50%;
  animation:aq-banner-pop 1900ms cubic-bezier(.2,.75,.3,1) both;
}

.celebrate-banner strong {
  display:block;
  min-width:0;
  font-size:inherit;
  font-weight:1000;
  line-height:inherit;
  white-space:normal;
  overflow-wrap:anywhere;
}

.celebrate-banner small {
  grid-column:1 / -1;
  display:block;
  min-width:0;
  font-size:clamp(12px,2.8vw,16px);
  font-weight:800;
  line-height:1.6;
  white-space:normal;
  overflow-wrap:anywhere;
}

.celebrate-symbol {
  display:grid;
  place-items:center;
  width:1.1em;
  height:1.1em;
  color:#ff965f;
  font-size:1.14em;
  line-height:1;
  -webkit-text-stroke:1.3px #26344a;
  paint-order:stroke fill;
}

.celebration-drill .celebrate-banner {
  background:#3989f5;
  color:#fff;
}

.celebration-drill .celebrate-symbol {
  color:#ffdf68;
}

.celebration-all .celebrate-banner {
  padding:20px 28px;
  border-width:4px;
  background:#ffdf68;
  box-shadow:6px 7px 0 #26344a;
  color:#26344a;
  font-size:clamp(26px,6.2vw,46px);
  animation-duration:2050ms;
}

/* Correct answers get a smaller, higher banner; the answer area stays visible. */
.celebration-correct .celebrate-banner {
  top:calc(clamp(75px,18vh,165px) + env(safe-area-inset-top,0px));
  gap:3px 7px;
  max-width:min(360px,calc(100vw - 48px));
  padding:10px 15px;
  border-width:2px;
  border-radius:13px;
  background:#fffdf5;
  box-shadow:3px 4px 0 #26344a;
  color:#26344a;
  font-size:clamp(18px,4.8vw,24px);
  animation:aq-correct-pop 1000ms cubic-bezier(.2,.75,.3,1) both;
}

.celebration-correct .celebrate-symbol {
  color:#ffd445;
}

.celebration-correct .celebrate-banner small {
  font-size:12px;
}

/* Each particle travels once. No repeated flashes or pulsing opacity. */
.celebration-scene .celebration-star {
  position:absolute;
  top:-40px;
  z-index:1;
  display:block;
  width:var(--size,20px);
  height:var(--size,20px);
  margin-left:calc(var(--size,20px) / -2);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--color,#ffd445);
  opacity:0;
  transform-origin:50% 50%;
  animation:aq-star-fall var(--duration,1650ms) cubic-bezier(.35,.1,.6,.95) var(--delay,0ms) both;
  will-change:transform,opacity;
}

.celebration-star svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  fill:currentColor;
  filter:drop-shadow(0 1px 0 rgba(38,52,74,.15)) drop-shadow(0 0 4px rgba(255,255,255,.8));
}

.celebration-star path {
  fill:currentColor;
  stroke:#26344a;
  stroke-width:.75;
  stroke-linejoin:round;
}

.celebration-glint svg {
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95));
}

.celebration-glint path {
  stroke-width:.45;
}

/* A few soft trails make the shower flow without making every star busy. */
.celebration-quest .celebration-star:nth-of-type(4n)::before,
.celebration-drill .celebration-star:nth-of-type(4n)::before {
  content:"";
  position:absolute;
  left:calc(50% - 1px);
  bottom:80%;
  width:2px;
  height:calc(var(--size,20px) * 1.7);
  border-radius:999px;
  background:linear-gradient(to top,currentColor,transparent);
  opacity:.4;
}

.celebration-correct .celebration-star {
  left:50% !important;
  top:46%;
  margin-top:calc(var(--size,20px) / -2);
  animation:aq-star-burst 900ms cubic-bezier(.18,.7,.25,1) var(--delay,0ms) both;
}

@keyframes aq-star-fall {
  0% {
    opacity:0;
    transform:translate3d(0,-24px,0) rotate(0deg) scale(.8);
  }
  9% {opacity:1}
  78% {opacity:1}
  100% {
    opacity:0;
    transform:translate3d(var(--drift,0vw),calc(110vh + 80px),0) rotate(var(--spin,180deg)) scale(1);
  }
}

@keyframes aq-star-burst {
  0% {
    opacity:0;
    transform:translate3d(0,0,0) rotate(0deg) scale(.35);
  }
  12% {opacity:1}
  65% {opacity:1}
  100% {
    opacity:0;
    transform:translate3d(var(--burst-x,0vw),var(--burst-y,-10vh),0) rotate(var(--spin,100deg)) scale(.9);
  }
}

@keyframes aq-banner-pop {
  0% {opacity:0;transform:translate3d(-50%,10px,0) scale(.88)}
  13% {opacity:1;transform:translate3d(-50%,0,0) scale(1.025)}
  22% {opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  79% {opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  100% {opacity:0;transform:translate3d(-50%,-8px,0) scale(.98)}
}

@keyframes aq-correct-pop {
  0% {opacity:0;transform:translate3d(-50%,6px,0) scale(.94)}
  15% {opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  72% {opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  100% {opacity:0;transform:translate3d(-50%,-6px,0) scale(.98)}
}

@media(max-width:480px) {
  .celebration-scene .celebrate-banner {
    gap:4px 8px;
    padding:14px 16px;
    border-radius:16px;
    box-shadow:4px 5px 0 #26344a;
  }
  .celebration-all .celebrate-banner {
    padding:16px 18px;
  }
  .celebration-correct .celebrate-banner {
    gap:3px 6px;
    padding:9px 12px;
    border-radius:12px;
    box-shadow:2px 3px 0 #26344a;
  }
}

@media(max-height:500px) {
  .celebration-scene .celebrate-banner {
    top:calc(54px + env(safe-area-inset-top,0px));
    font-size:clamp(22px,4vw,32px);
  }
  .celebration-correct .celebrate-banner {
    top:calc(40px + env(safe-area-inset-top,0px));
    font-size:20px;
  }
}

/* Explicit static states also defeat the base stylesheet's .001ms override. */
.celebration-scene.celebration-reduced .celebration-star {
  display:none !important;
  animation:none !important;
}

.celebration-scene.celebration-reduced .celebrate-banner {
  animation:none !important;
  transition:none !important;
  opacity:1 !important;
  transform:translate3d(-50%,0,0) !important;
}

@media(prefers-reduced-motion:reduce) {
  #celebration .celebration-star {
    display:none !important;
    animation:none !important;
  }
  #celebration .celebrate-banner {
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:translate3d(-50%,0,0) !important;
  }
}