/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Rewards panel inside the Learning Center Home "Your Progress" card (web/modules/rewards-panel.js).
   Colors come from brand.css tokens (lagoon palette). Tiles reuse .progress-tile from the card. */
.rewards-panel{display:grid;gap:18px;margin-top:18px;font-family:var(--font)}
.rewards-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.rewards-tile{display:flex;flex-direction:column;gap:6px}
.rewards-subtitle{margin:0 0 10px;font-size:1.15rem;color:var(--ink);font-weight:800}
.rewards-empty{margin:0;color:var(--muted);font-size:1.05rem}
.rewards-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The week */
.rewards-week{display:flex;gap:6px;list-style:none;margin:6px 0 0;padding:0;flex-wrap:wrap}
.rewards-day{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:30px}
.rewards-day-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--surface);font-weight:800;font-size:.95rem}
.rewards-day.is-learned .rewards-day-mark{background:var(--lagoon);border-color:var(--lagoon)}
.rewards-day.is-today .rewards-day-mark{box-shadow:0 0 0 3px var(--lamp)}
.rewards-day-name{font-size:.75rem;color:var(--muted)}
.rewards-week-suns .rewards-day-mark{color:var(--line);font-size:1.15rem}
.rewards-week-suns .rewards-day.is-learned .rewards-day-mark{background:#FFF4D6;border-color:var(--lamp)}

/* K-1 Star Jar: a glass jar with a lid and a shine; the stars inside glow gold. */
.rewards-jar{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:200px;margin-top:14px;padding:12px 10px 10px;
  border:3px solid #9FCFC6;border-radius:12px 12px 26px 26px;
  background:linear-gradient(100deg,#ffffff00 0 12%,#ffffffb8 14% 19%,#ffffff00 22%),linear-gradient(180deg,#F4FBF9,#DDF0EC);
  box-shadow:inset 0 -8px 14px #2F8F8318,0 6px 14px #17324D18}
.rewards-jar::before{content:"";position:absolute;left:14%;right:14%;top:-13px;height:10px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#F7CD6B,#E59A12);box-shadow:0 2px 0 #C9820E}
.rewards-jar-star{text-align:center;font-size:1.45rem;line-height:1.1;color:#C9DDD9}
.rewards-jar-star.is-full{color:transparent;background:linear-gradient(160deg,#FFE27A,#F2B544 55%,#E59A12);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 4px #FFD45C99) drop-shadow(0 1px 0 #C9820E)}

/* Stickers: die-cut look with a white edge, a soft shadow, a little tilt and a peeled corner. */
.rewards-stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.rewards-sticker{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:18px;
  background:linear-gradient(160deg,#ffffff,#F3FAF8);border:2px solid var(--soft);text-align:center;box-shadow:0 3px 0 #17324D10,0 8px 18px #17324D12;
  transform:rotate(-2deg);transition:transform .2s ease}
.rewards-sticker:nth-child(even){transform:rotate(2deg)}
.rewards-sticker:nth-child(3n){transform:rotate(-1deg)}
.rewards-sticker:hover{transform:rotate(0) translateY(-3px) scale(1.04)}
.rewards-sticker::after{content:"";position:absolute;right:0;top:0;width:22px;height:22px;border-radius:0 16px 0 10px;
  background:linear-gradient(225deg,var(--mist,#EEF7F5) 0 48%,#D9ECE8 50%,#ffffff 70%);box-shadow:-2px 2px 4px #17324D14}
.rewards-sticker-icon{font-size:2.6rem;line-height:1;filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 3px #17324D33)}
.rewards-sticker-name{font-size:.9rem;font-weight:800;color:var(--ink)}
.rewards-sticker.is-newest{border-color:var(--lamp);box-shadow:0 0 0 3px #FFF1CC,0 8px 22px #F2B54455;animation:rewards-newest 2.4s ease-in-out infinite}
@keyframes rewards-newest{0%,100%{box-shadow:0 0 0 3px #FFF1CC,0 8px 22px #F2B54433}50%{box-shadow:0 0 0 5px #FFE9A8,0 10px 28px #F2B54477}}

/* Level bar: glossy, with a moving shimmer. */
.rewards-bar{position:relative;height:14px;border-radius:999px;background:linear-gradient(180deg,#DCEBE8,#EAF4F2);box-shadow:inset 0 1px 3px #17324D22;overflow:hidden}
.rewards-bar-fill{position:relative;display:block;height:100%;border-radius:inherit;overflow:hidden;
  background:linear-gradient(180deg,#ffffff55,#ffffff00 55%),linear-gradient(90deg,var(--lagoon),#7EC9B8 55%,var(--lamp))}
.rewards-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff99 50%,transparent 70%);
  transform:translateX(-100%);animation:rewards-shimmer 2.8s ease-in-out 1s infinite}
@keyframes rewards-shimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* Badges: a metal medal with a rim, a face and ribbon tails. Earned ones are gold and catch the light;
   ones still to earn are a soft silver outline. 6+ milestones use a calmer slate rim. */
.rewards-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.rewards-badge{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px 12px;border-radius:16px;
  border:2px dashed var(--line);background:var(--haze);color:var(--muted);overflow:hidden}
.rewards-badge.is-earned{border:2px solid #F2D18A;color:var(--ink);background:radial-gradient(circle at 50% 0,#FFF6DD,#ffffff 65%);box-shadow:0 6px 16px #E59A1222}
.rewards-badge.is-earned::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffffb0 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.rewards-badge.is-earned:hover::after{animation:rewards-sweep .9s ease-out}
@keyframes rewards-sweep{to{transform:translateX(120%)}}
.rewards-badge-icon{position:relative;display:grid;place-items:center;width:62px;height:62px;margin-bottom:10px;border-radius:50%;font-size:1.9rem;line-height:1;
  background:radial-gradient(circle at 50% 45%,#F7FBFA 0 52%,transparent 54%),conic-gradient(from 30deg,#D7E2E0,#F4F8F7,#B9C9C6,#EDF3F2,#C7D5D2,#F4F8F7,#D7E2E0);
  box-shadow:0 2px 0 #9FB3AF,0 4px 8px #17324D14;filter:grayscale(1);opacity:.55}
.rewards-badge.is-earned .rewards-badge-icon{filter:none;opacity:1;
  background:radial-gradient(circle at 38% 32%,#ffffff 0 8%,#FFF3D1 22%,#FFE3A0 52%,transparent 54%),conic-gradient(from 30deg,#E59A12,#FFE27A,#F2B544,#FFF0B8,#D98A0B,#FFE27A,#E59A12);
  box-shadow:0 2px 0 #B87808,0 6px 14px #E59A1244,inset 0 0 0 1px #ffffff66}
.rewards-badge-icon::before,.rewards-badge-icon::after{content:"";position:absolute;bottom:-12px;width:14px;height:20px;z-index:-1;background:#C9D6D3;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.rewards-badge-icon::before{left:15px;transform:rotate(14deg)}
.rewards-badge-icon::after{right:15px;transform:rotate(-14deg)}
.rewards-badge.is-earned .rewards-badge-icon::before{background:linear-gradient(180deg,#3FB5A6,#23766C)}
.rewards-badge.is-earned .rewards-badge-icon::after{background:linear-gradient(180deg,#FF8A70,#D9573F)}
.rewards-badge-title{font-weight:800;font-size:1.02rem}
.rewards-badge-how{font-size:.85rem}
.rewards-older .rewards-badge.is-earned{background:radial-gradient(circle at 50% 0,#EAF4F2,#ffffff 65%);border-color:#BFD8D3;box-shadow:0 6px 16px #17324D14}
.rewards-older .rewards-badge.is-earned .rewards-badge-icon{background:radial-gradient(circle at 38% 32%,#ffffff 0 8%,#EEF6F4 30%,#D9ECE8 52%,transparent 54%),conic-gradient(from 30deg,#23766C,#7EC9B8,#2F8F83,#BFE2DC,#1E5F57,#7EC9B8,#23766C);box-shadow:0 2px 0 #1E5F57,0 6px 14px #2F8F8333}
.rewards-older .rewards-badge.is-earned .rewards-badge-icon::before,.rewards-older .rewards-badge.is-earned .rewards-badge-icon::after{background:linear-gradient(180deg,#2A4A6B,#17324D)}
.rewards-goal{display:flex;flex-direction:column;gap:8px}
.rewards-goal-pick{display:flex;align-items:center;gap:6px;font-size:.95rem;color:var(--ink)}
.rewards-goal-pick select{font:inherit;min-height:44px;padding:8px 12px;border-radius:12px;border:2px solid var(--action-border);background:var(--surface);color:var(--ink)}

/* "You earned..." note for small moments: a glossy pill with a bouncing icon and a light sweep. */
.rewards-toast{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:12px;max-width:min(380px,calc(100vw - 36px));padding:12px 18px 12px 12px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#22476B,#17324D);color:#fff;font:800 1.08rem/1.3 var(--font);box-shadow:0 12px 30px #17324D55,inset 0 1px 0 #ffffff22;border-bottom:4px solid var(--lamp);animation:rewards-toast-in .55s cubic-bezier(.2,1.4,.4,1)}
.rewards-toast::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff40 50%,transparent 65%);transform:translateX(-120%);animation:rewards-sweep 1s ease-out .45s forwards;pointer-events:none}
.rewards-toast-icon{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;font-size:1.7rem;line-height:1;
  background:radial-gradient(circle at 38% 32%,#fff 0 10%,#FFE9A8 30%,#F2B544 75%,#E59A12);box-shadow:0 2px 0 #B87808,0 0 0 3px #ffffff22;animation:rewards-icon-bounce .9s cubic-bezier(.3,1.6,.5,1) .15s both}
.rewards-toast.is-still,.rewards-toast.is-still::after,.rewards-toast.is-still .rewards-toast-icon{animation:none}
@keyframes rewards-toast-in{from{transform:translateY(24px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes rewards-icon-bounce{0%{transform:scale(.3) rotate(-25deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.rewards-toast,.rewards-toast::after,.rewards-toast-icon,.rewards-bar-fill::after,.rewards-sticker.is-newest{animation:none}}

/* Reward reveal (big moments): a medal drops in at the center with turning light rays, a halo, ribbon tails,
   a shine sweep and twinkles, then the words. Visual only (pointer-events none); the text is read out politely. */
.rewards-reveal{--rim1:#E59A12;--rim2:#FFE27A;--rim3:#F2B544;--face1:#FFF3D1;--face2:#FFE3A0;--ray:#FFD45C;--rib1:#3FB5A6;--rib2:#FF8A70;
  position:fixed;left:50%;top:max(70px,16vh);z-index:72;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateX(-50%);pointer-events:none;
  animation:rewards-reveal-out .5s ease-in 3.05s forwards}
.rewards-reveal.is-lagoon{--rim1:#23766C;--rim2:#BFE2DC;--rim3:#2F8F83;--face1:#EAF7F4;--face2:#BFE2DC;--ray:#7EDBC9;--rib1:#F2B544;--rib2:#7CC8FF}
.rewards-reveal.is-coral{--rim1:#D9573F;--rim2:#FFC2B3;--rim3:#EF8A6F;--face1:#FFF1EC;--face2:#FFD3C6;--ray:#FFB39F;--rib1:#3FB5A6;--rib2:#F2B544}
.rewards-reveal.is-sun{--ray:#FFE27A;--rib1:#FF8A70;--rib2:#7CC8FF}
.rewards-reveal.is-ink{--rim1:#17324D;--rim2:#BFD8D3;--rim3:#2F8F83;--face1:#F3F8F7;--face2:#D9ECE8;--ray:#BFE2DC;--rib1:#2A4A6B;--rib2:#2F8F83}
.rewards-reveal-stage{position:relative;display:grid;place-items:center;width:240px;height:220px}
.rewards-reveal-rays{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--ray) 70%,transparent) 0 9deg,transparent 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 0 18%,#0000 66%);mask:radial-gradient(circle,#000 0 18%,#0000 66%);
  animation:rewards-rays-in .5s ease-out .15s forwards,rewards-spin 9s linear infinite}
.rewards-reveal-halo{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,#ffffffee 0 22%,color-mix(in srgb,var(--ray) 55%,transparent) 40%,transparent 68%);opacity:0;animation:rewards-halo 1.2s ease-out .1s forwards}
.rewards-reveal-medal{position:relative;width:132px;height:132px;animation:rewards-medal-in .8s cubic-bezier(.2,1.5,.4,1) both}
.rewards-reveal-rim{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:conic-gradient(from 20deg,var(--rim1),var(--rim2),var(--rim3),#fff8,var(--rim1),var(--rim2),var(--rim3),var(--rim1));
  box-shadow:0 4px 0 color-mix(in srgb,var(--rim1) 80%,#000),0 16px 34px #17324D40,inset 0 0 0 2px #ffffff55}
.rewards-reveal-face{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff 0 9%,var(--face1) 30%,var(--face2) 100%);box-shadow:inset 0 3px 8px #17324D22,inset 0 -2px 0 #ffffff99}
.rewards-reveal-icon{font-size:3.4rem;line-height:1;filter:drop-shadow(0 3px 2px #17324D30);animation:rewards-icon-bounce .9s cubic-bezier(.3,1.6,.5,1) .35s both}
.rewards-reveal-ribbon{position:absolute;bottom:-34px;width:38px;height:62px;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);box-shadow:0 4px 8px #0002}
.rewards-reveal-ribbon.is-left{left:22px;transform:rotate(16deg);background:linear-gradient(180deg,var(--rib1),color-mix(in srgb,var(--rib1) 70%,#000))}
.rewards-reveal-ribbon.is-right{right:22px;transform:rotate(-16deg);background:linear-gradient(180deg,var(--rib2),color-mix(in srgb,var(--rib2) 70%,#000))}
.rewards-reveal-shine{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:linear-gradient(115deg,transparent 38%,#ffffffcc 50%,transparent 62%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:rewards-shine 1.1s ease-in-out .7s forwards}
.rewards-reveal-twinkle{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;opacity:0;
  background:radial-gradient(circle,#fff 0 18%,transparent 22%),conic-gradient(from 45deg,#fff0 0 20deg,#fff 20deg 25deg,#fff0 25deg 110deg,#fff 110deg 115deg,#fff0 115deg 200deg,#fff 200deg 205deg,#fff0 205deg 290deg,#fff 290deg 295deg,#fff0 295deg);
  filter:drop-shadow(0 0 4px var(--ray));transform:rotate(calc(var(--i)*60deg)) translateX(104px);animation:rewards-twinkle-in 1.4s ease-in-out calc(.5s + var(--i)*.14s) 2 both}
.rewards-reveal-text{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:22px;padding:12px 26px 14px;border-radius:20px;
  background:linear-gradient(180deg,#22476B,#17324D);color:#fff;text-align:center;box-shadow:0 14px 34px #17324D55,inset 0 1px 0 #ffffff26;border-bottom:4px solid var(--lamp);
  animation:rewards-text-in .6s cubic-bezier(.2,1.3,.4,1) .45s both}
.rewards-reveal-kicker{font:800 .95rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--lamp)}
.rewards-reveal-title{font:900 clamp(1.5rem,4vw,2.1rem)/1.15 var(--font);text-shadow:0 2px 0 #0003}
.rewards-reveal-older .rewards-reveal-rays{display:none}
.rewards-reveal-older .rewards-reveal-medal{width:110px;height:110px}
.rewards-reveal-older .rewards-reveal-face{width:82px;height:82px}
.rewards-reveal-older .rewards-reveal-icon{font-size:2.7rem}
.rewards-reveal.is-still,.rewards-reveal.is-still *{animation:none!important;opacity:1}
.rewards-reveal.is-still .rewards-reveal-rays,.rewards-reveal.is-still .rewards-reveal-twinkle{display:none}
@keyframes rewards-reveal-out{to{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.96)}}
@keyframes rewards-rays-in{to{opacity:1}}
@keyframes rewards-spin{to{transform:rotate(360deg)}}
@keyframes rewards-halo{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.1)}100%{opacity:.75;transform:scale(1)}}
@keyframes rewards-medal-in{0%{opacity:0;transform:translateY(-60px) scale(.3) rotate(-30deg)}60%{opacity:1;transform:translateY(6px) scale(1.12) rotate(6deg)}100%{transform:none}}
@keyframes rewards-shine{to{background-position:-60% 0}}
@keyframes rewards-twinkle-in{0%,100%{opacity:0;scale:.3}50%{opacity:1;scale:1}}
@keyframes rewards-text-in{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:600px){.rewards-reveal-stage{transform:scale(.82)}.rewards-reveal-text{margin-top:6px;padding:10px 18px 12px}}
@media (prefers-reduced-motion:reduce){.rewards-reveal *{animation:none!important;opacity:1}.rewards-reveal-rays,.rewards-reveal-twinkle{display:none}.rewards-reveal{animation:none}}
@media (max-width:600px){.rewards-panel{gap:14px}.rewards-tiles{grid-template-columns:1fr}.rewards-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rewards-badge{padding:10px}.rewards-sticker-icon{font-size:2rem}}

/* Reward celebrations (web/modules/reward-celebrations.js): confetti, fireworks, balloons, stars and sparkles.
   Drawn with CSS only: lit gradients, 3D-fluttering paper, glowing fireworks with streaks and glitter,
   shiny balloons with knots and strings. Never blocks the page; skipped for reduced motion. */
.rewards-fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;perspective:700px}

/* Confetti: the outer piece falls and drifts; the paper inside flutters and catches the light. */
.rewards-fx-confetti{position:absolute;top:-30px;left:var(--x);opacity:0;transform:scale(var(--s));
  animation:rewards-fall var(--dur) cubic-bezier(.3,.55,.45,1) var(--delay) forwards}
.rewards-fx-paper{display:block;width:12px;height:9px;border-radius:2px;
  background:linear-gradient(135deg,var(--c) 0 55%,var(--d) 55% 100%);transform-style:preserve-3d;
  animation:rewards-flutter var(--flip) linear infinite;transform:rotate(var(--tilt))}
.is-ribbon .rewards-fx-paper{width:6px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--c),var(--d) 50%,var(--c))}
.is-circle .rewards-fx-paper{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8 0 18%,var(--c) 20%,var(--d))}
.is-star .rewards-fx-paper{width:14px;height:14px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:linear-gradient(160deg,var(--c),var(--d))}
.is-triangle .rewards-fx-paper{width:12px;height:11px;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(160deg,var(--c),var(--d))}
@keyframes rewards-fall{0%{opacity:1;transform:translate(0,0) scale(var(--s))}85%{opacity:1}100%{opacity:0;transform:translate(var(--drift),108vh) scale(var(--s))}}
@keyframes rewards-flutter{0%{transform:rotate(var(--tilt)) rotateX(0) rotateY(0)}50%{transform:rotate(var(--tilt)) rotateX(180deg) rotateY(90deg)}100%{transform:rotate(var(--tilt)) rotateX(360deg) rotateY(180deg)}}

/* Fireworks: a bright flash, an outer ring of glowing streaks, a second inner ring, then falling glitter. */
.rewards-fx-burst{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.rewards-fx-flash{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fffbe8 0 12%,var(--c) 30%,transparent 70%);animation:rewards-flash .7s ease-out var(--delay) forwards}
.rewards-fx-streak{position:absolute;left:0;top:-2px;width:26px;height:4px;border-radius:4px;opacity:0;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--d) 30%,var(--c) 75%,#fffbe8);box-shadow:0 0 6px var(--c);
  animation:rewards-streak 1.15s cubic-bezier(.15,.7,.3,1) var(--delay) forwards}
.rewards-fx-streak.is-inner{width:16px;height:3px;animation-duration:.95s;animation-delay:calc(var(--delay) + 120ms)}
.rewards-fx-glitter{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--c);box-shadow:0 0 6px 1px var(--c);opacity:0;
  animation:rewards-glitter 1.6s ease-out calc(var(--delay) + 350ms) forwards}
@keyframes rewards-flash{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes rewards-streak{0%{opacity:1;transform:rotate(var(--a)) translateX(4px) scaleX(.3)}35%{opacity:1;transform:rotate(var(--a)) translateX(calc(var(--r)*.7)) scaleX(1.2)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) translateY(18px) scaleX(.4)}}
@keyframes rewards-glitter{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}50%{opacity:.4}65%{opacity:1}100%{opacity:0;transform:translate(var(--gx),calc(var(--gy) + 70px))}}

/* Balloons: a shiny lit body, a highlight, a little knot and a wavy string, rising with a gentle sway. */
.rewards-fx-balloon{position:absolute;bottom:-150px;left:var(--x);width:52px;height:64px;opacity:0;transform:scale(var(--s));
  animation:rewards-rise var(--dur) cubic-bezier(.4,.1,.6,1) var(--delay) forwards}
.rewards-fx-balloon-body{position:absolute;inset:0;border-radius:50% 50% 47% 47% / 55% 55% 45% 45%;
  background:radial-gradient(circle at 34% 30%,#ffffffb0 0 6%,var(--c) 34%,var(--d) 100%);box-shadow:inset -5px -7px 10px #0002}
.rewards-fx-balloon-shine{position:absolute;left:12px;top:10px;width:10px;height:18px;border-radius:50%;background:#ffffffa8;transform:rotate(28deg);filter:blur(.5px)}
.rewards-fx-balloon-knot{position:absolute;left:50%;bottom:-6px;width:10px;height:8px;margin-left:-5px;background:var(--d);clip-path:polygon(50% 0,100% 100%,0 100%)}
.rewards-fx-balloon-string{position:absolute;left:50%;top:100%;width:14px;height:58px;margin-left:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 58'%3E%3Cpath d='M7 0 C 1 10, 13 18, 7 29 S 1 47, 7 58' fill='none' stroke='%2317324D' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform-origin:top center;animation:rewards-string 1.2s ease-in-out infinite alternate}
.rewards-fx-small .rewards-fx-balloon{width:40px;height:50px}
.rewards-fx-tiny .rewards-fx-balloon{width:34px;height:42px}
@keyframes rewards-rise{0%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(var(--s))}50%{transform:translate(var(--sway),-58vh) rotate(4deg) scale(var(--s))}90%{opacity:1}100%{opacity:0;transform:translate(0,-125vh) rotate(-2deg) scale(var(--s))}}
@keyframes rewards-string{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* Stars (K-1) and sparkles (grades 6+): a soft glow behind a lit, faceted shape that pops and twinkles. */
.rewards-fx-star{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;opacity:0;transform:scale(var(--s));
  animation:rewards-twinkle 1.5s cubic-bezier(.2,.8,.3,1) var(--delay) forwards}
.rewards-fx-star-glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,#ffe9a0aa,transparent 65%)}
.rewards-fx-star-shape{position:absolute;inset:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:conic-gradient(from 0deg at 50% 55%,#FFE27A,#F2B544,#FFD45C,#E59A12,#FFE27A,#F2B544,#FFD45C,#E59A12,#FFE27A,#F2B544,#FFE27A)}
.rewards-fx-star.is-sparkle{width:26px;height:26px}
.rewards-fx-star.is-sparkle .rewards-fx-star-glow{background:radial-gradient(circle,#ffffffcc,transparent 60%)}
.rewards-fx-star.is-sparkle .rewards-fx-star-shape{clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:linear-gradient(135deg,#ffffff,#FFE9A8 50%,#BFE2DC)}
.rewards-fx-tiny .rewards-fx-star{width:30px;height:30px}
@keyframes rewards-twinkle{0%{opacity:0;transform:scale(calc(var(--s)*.2)) rotate(-30deg)}30%{opacity:1;transform:scale(calc(var(--s)*1.15)) rotate(8deg)}55%{transform:scale(var(--s)) rotate(0)}100%{opacity:0;transform:translateY(-46px) scale(calc(var(--s)*.85)) rotate(20deg)}}
/* Party poppers: paper shoots up from the bottom corners in an arc, then flutters down. */
.rewards-fx-pop{position:absolute;bottom:-12px;opacity:0;transform:scale(var(--s));animation:rewards-popper var(--dur) cubic-bezier(.2,.7,.4,1) var(--delay) forwards}
.rewards-fx-pop.is-left{left:2vw}
.rewards-fx-pop.is-right{right:2vw}
@keyframes rewards-popper{0%{opacity:1;transform:translate(0,0) scale(var(--s))}40%{opacity:1;transform:translate(var(--px),var(--py)) scale(var(--s))}88%{opacity:1}100%{opacity:0;transform:translate(calc(var(--px)*1.25),calc(var(--py)*.15)) scale(var(--s))}}

/* Streamers: a long curly ribbon (an SVG wave used as a mask) with a lit stripe, tumbling down. */
.rewards-fx-streamer{position:absolute;top:-120px;left:var(--x);width:16px;height:96px;opacity:0;
  background:linear-gradient(90deg,var(--d),var(--c) 45%,#ffffff99 55%,var(--c) 65%,var(--d));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 96'%3E%3Cpath d='M8 0 C 0 8, 16 16, 8 24 S 0 40, 8 48 S 16 64, 8 72 S 0 88, 8 96' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 96'%3E%3Cpath d='M8 0 C 0 8, 16 16, 8 24 S 0 40, 8 48 S 16 64, 8 72 S 0 88, 8 96' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:rewards-streamer var(--dur) cubic-bezier(.35,.5,.5,1) var(--delay) forwards}
.rewards-fx-small .rewards-fx-streamer,.rewards-fx-tiny .rewards-fx-streamer{height:70px}
@keyframes rewards-streamer{0%{opacity:1;transform:translate(0,0) rotate(var(--spin)) scale(var(--s))}50%{transform:translate(var(--drift),55vh) rotate(calc(var(--spin)*-1)) scale(var(--s))}85%{opacity:1}100%{opacity:0;transform:translate(0,120vh) rotate(var(--spin)) scale(var(--s))}}

/* Bubbles: see-through with a colored rim and a shine; they drift up, wobble and pop. */
.rewards-fx-bubble{position:absolute;bottom:-60px;left:var(--x);width:38px;height:38px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 50% 50%,transparent 58%,color-mix(in srgb,var(--c) 45%,transparent) 72%,#ffffffcc 96%);
  box-shadow:inset 0 0 6px #ffffff88;animation:rewards-bubble var(--dur) ease-out var(--delay) forwards}
.rewards-fx-bubble-shine{position:absolute;left:22%;top:16%;width:30%;height:22%;border-radius:50%;background:#ffffffd0;transform:rotate(-30deg)}
@keyframes rewards-bubble{0%{opacity:0;transform:translate(0,0) scale(calc(var(--s)*.6))}12%{opacity:1}50%{transform:translate(var(--sway),calc(var(--rise)*-.55)) scale(var(--s),calc(var(--s)*.94))}88%{opacity:1;transform:translate(0,calc(var(--rise)*-1)) scale(var(--s))}100%{opacity:0;transform:translate(0,calc(var(--rise)*-1 - 6px)) scale(calc(var(--s)*1.5))}}

/* Comets: a gold star with a glowing tail that streaks across and fades. */
.rewards-fx-comet{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;opacity:0;animation:rewards-comet 1.3s cubic-bezier(.3,.6,.4,1) var(--delay) forwards}
.rewards-fx-comet .rewards-fx-star-shape{filter:drop-shadow(0 0 6px #FFE27A)}
.rewards-fx-comet-tail{position:absolute;right:50%;top:50%;width:var(--len);height:6px;margin-top:-3px;border-radius:6px;transform-origin:right center;
  background:linear-gradient(90deg,transparent,#BFE2DC66 40%,#FFE9A8 85%,#fffbe8)}
@keyframes rewards-comet{0%{opacity:0;transform:translate(0,0) rotate(20deg) scale(var(--s))}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(46vw,16vh) rotate(20deg) scale(var(--s))}}
/* Depth, glow wash and rockets */
.rewards-fx-confetti.is-near{filter:blur(1.4px);--s:1.7}
.rewards-fx-confetti.is-far{opacity:.75;filter:saturate(.8)}
.rewards-fx-confetti.is-far .rewards-fx-paper{width:7px;height:5px}
.rewards-fx-wash{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 35%,#FFE9A866,#FFD45C22 40%,transparent 70%);animation:rewards-wash 2.4s ease-out forwards}
@keyframes rewards-wash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.rewards-fx-rocket{position:absolute;left:-3px;top:0;width:6px;height:6px;border-radius:50%;background:#fffbe8;box-shadow:0 0 8px 2px var(--c);opacity:0;
  animation:rewards-launch .46s cubic-bezier(.3,.6,.5,1) var(--launch) forwards}
.rewards-fx-rocket::after{content:"";position:absolute;left:1px;top:6px;width:4px;height:70px;border-radius:4px;background:linear-gradient(180deg,#fffbe8,var(--c) 30%,transparent)}
@keyframes rewards-launch{0%{opacity:1;transform:translateY(calc(100vh - var(--y)))}92%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.rewards-fx{display:none}}