/* EkoVille — celebrations, bursts, praise + reduced-motion fallbacks.
   Split of the old styles.css; index.html loads these in order (cascade order matters). */

/* ============================== FX & a11y ============================== */
.toast{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:650;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-t);
  padding:9px 18px;border-radius:999px;font-weight:800;font-size:14.5px;border:3px solid #fff;
  box-shadow:0 8px 20px rgba(255,170,30,.5),inset 0 2px 0 #fff;
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.toast.show{opacity:1}
.confetti{position:absolute;font-size:20px;z-index:640;animation:fall 1.5s ease-in forwards;pointer-events:none;will-change:transform,opacity}
.goldbit{position:absolute;z-index:665;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 2px 3px rgba(190,140,30,.5))}
@keyframes fall{0%{transform:translateY(-30px) rotate(0);opacity:1}100%{transform:translateY(320px) rotate(360deg);opacity:0}}
.flyreward{position:absolute;z-index:660;font-family:var(--display);font-weight:800;font-size:24px;color:#ffe066;-webkit-text-stroke:2px var(--ink-line);paint-order:stroke fill;text-shadow:var(--drop);pointer-events:none}
.pill.bump{animation:pillbump .35s var(--ease-back)}
.powbtn.bump{animation:pillbump .35s var(--ease-back)}
/* A charge just landed: the button throbs and throws a ring, so the reward is
   visible down in the corner the player was not looking at. */
.powbtn.gained{animation:powgain .5s var(--ease-back) 3;z-index:1}
.powbtn.gained::before{content:'';position:absolute;left:50%;top:50%;width:62px;height:62px;
  margin:-31px 0 0 -31px;border-radius:50%;border:4px solid #fff;pointer-events:none;
  animation:powgainring .75s var(--ease-out) 2}
@keyframes powgain{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}
@keyframes powgainring{from{transform:scale(.8);opacity:.95}to{transform:scale(2.3);opacity:0}}
@keyframes pillbump{0%,100%{transform:scale(1)}45%{transform:scale(1.28)}}
/* level-up celebration */
.levelup-fx{position:absolute;inset:0;z-index:670;display:grid;place-items:center;pointer-events:none}
.levelup-fx .burstring{position:absolute;left:50%;top:50%;width:560px;height:560px;border-radius:50%;border:5px solid var(--gold-2);will-change:transform,opacity;transform:translate(-50%,-50%) scale(.107);animation:luring 1s ease-out forwards}
.levelup-fx .burstring.r2{border-color:#fff;animation-delay:.12s}
@keyframes luring{from{transform:translate(-50%,-50%) scale(.107);opacity:.85}to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.levelup-fx .lucard{position:relative;text-align:center;background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 58%,var(--gold-d));color:var(--gold-t);border:5px solid #fff;border-radius:32px;padding:20px 34px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 18px 50px -10px rgba(180,130,30,.6);animation:lupop 5s var(--ease-back) forwards}
@keyframes lupop{0%{transform:scale(.4) rotate(-6deg);opacity:0}11%{transform:scale(1.12) rotate(2deg);opacity:1}19%{transform:scale(1) rotate(0)}86%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:0}}
.levelup-fx .lustar{font-size:42px;line-height:1;animation:lustar 1.6s ease-in-out;filter:drop-shadow(0 3px 5px rgba(180,130,30,.5))}
@keyframes lustar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(12deg)}}
.levelup-fx .lulvl{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.02em;line-height:1;margin-top:4px;color:#fff;-webkit-text-stroke:2.5px #a35c00;paint-order:stroke fill;text-shadow:0 3px 5px rgba(120,70,0,.4)}
.levelup-fx .lurank{font-family:var(--display);font-weight:800;font-size:16px;margin-top:6px;color:#7a5512}
/* new-badge celebration: reuses the level-up shell (gold card + rings + lupop). */
.badge-fx .badgecard{max-width:min(330px,86%)}
.badge-fx .badgeicon{font-size:54px;line-height:1;animation:lustar 1.6s ease-in-out;filter:drop-shadow(0 3px 5px rgba(180,130,30,.5))}
.badge-fx .badgetitle{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;margin-top:6px;color:#fff;-webkit-text-stroke:2.2px #a35c00;paint-order:stroke fill;text-shadow:0 3px 5px rgba(120,70,0,.4)}
.badge-fx .badgename{font-family:var(--display);font-weight:800;font-size:20px;margin-top:8px;color:#fff;-webkit-text-stroke:1.6px #a35c00;paint-order:stroke fill}
.badge-fx .badgedesc{font-weight:700;font-size:14px;margin-top:7px;color:#7a5512;line-height:1.25}
.badgefly{position:absolute;z-index:680;font-size:38px;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(180,130,30,.5))}
/* Pet stage-up: the badge card with the pet's portrait in place of the emoji. */
.pet-fx .petshot{width:110px;height:110px;object-fit:contain;animation:lustar 1.6s ease-in-out;
  filter:drop-shadow(0 3px 5px rgba(180,130,30,.5))}
.badgebtn.gained{animation:bump .5s var(--ease-back) 2;z-index:2}
/* Rinki delivery: the game's biggest moment. Reuses the level-up shell but adds
   a third ring, a radial wash + rotating sunburst behind the card, a glossy medal
   disc under the ♻️, a one-shot shine sweep across the card, and its own 7 s pop.
   The keyframe offsets are FRACTIONS of that duration, so the pop-in is tuned to
   stay ~0.6 s at 7 s (8 %) — copying lupop's 11 % would make it feel sluggish. */
.rinki-fx::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(255,247,190,.85),rgba(147,242,122,.35) 38%,transparent 68%);
  animation:rkwash 7s ease-out forwards}
@keyframes rkwash{0%{opacity:0}6%{opacity:1}70%{opacity:.7}100%{opacity:0}}
.rinki-fx .burstring.r3{border-color:var(--green-1);animation-delay:.26s}
.rinki-fx .rkcard{position:relative;overflow:hidden;background:linear-gradient(180deg,#a6f582,var(--green-2) 55%,var(--green-d));
  color:#0d3d17;max-width:min(330px,88%);padding:20px 26px;animation:rkpop 7s var(--ease-back) forwards}
@keyframes rkpop{0%{transform:scale(.4) rotate(-7deg);opacity:0}8%{transform:scale(1.14) rotate(3deg);opacity:1}14%{transform:scale(1) rotate(0)}90%{transform:scale(1);opacity:1}100%{transform:scale(.94);opacity:0}}
/* Rotating sunburst behind the card — a big-win "spotlight" that fades with the wash. */
.rinki-fx .rkrays{position:absolute;left:50%;top:50%;width:560px;height:560px;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.3) 0deg 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 24%,transparent 62%);mask:radial-gradient(circle,#000 24%,transparent 62%);
  animation:rkrays 14s linear infinite,rkraysfade 7s ease-out forwards}
@keyframes rkrays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rkraysfade{0%{opacity:0}8%{opacity:.55}72%{opacity:.4}100%{opacity:0}}
/* One-shot gloss sweeping across the card, a couple of passes after it lands. */
.rinki-fx .rkshine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-140%);animation:rksweep 2.2s ease-in-out 1s 2}
@keyframes rksweep{0%{transform:translateX(-140%)}55%,100%{transform:translateX(140%)}}
/* Glossy white "badge" disc lifts the ♻️ off the green into a medal. */
.rinki-fx .rkmedal{position:relative;display:grid;place-items:center;width:98px;height:98px;margin:2px auto 0;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,#ffffff,#d8ffd0 60%,#a6f582);border:5px solid #fff;
  box-shadow:0 9px 20px -5px rgba(0,80,25,.55),inset 0 3px 6px rgba(255,255,255,.8);animation:rkmedal .7s var(--ease-back) both}
.rinki-fx .rkmedal::before{content:'';position:absolute;left:16%;right:16%;top:12%;height:34%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
@keyframes rkmedal{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.rinki-fx .rkicon{font-size:52px;line-height:1;animation:rkspin 2.6s var(--ease-out);filter:drop-shadow(0 3px 5px rgba(0,70,25,.4))}
@keyframes rkspin{0%{transform:scale(.5) rotate(-180deg)}45%{transform:scale(1.3) rotate(12deg)}70%{transform:scale(1) rotate(-6deg)}100%{transform:scale(1) rotate(0)}}
.rinki-fx .rktitle{font-family:var(--display);font-weight:800;font-size:31px;letter-spacing:.01em;line-height:1.05;margin-top:6px;color:#fff;
  -webkit-text-stroke:3px #1a5c26;paint-order:stroke fill;text-shadow:0 4px 6px rgba(0,60,20,.45)}
.rinki-fx .rkitems{display:inline-block;margin-top:10px;padding:5px 15px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#1d7a45;font-family:var(--display);font-weight:800;font-size:15px}
.rinki-fx .rkbonus{font-family:var(--display);font-weight:800;font-size:26px;margin-top:11px;color:#fff8c9;
  text-shadow:0 3px 4px rgba(0,60,20,.55);animation:bump .5s var(--ease-back) .5s backwards}
.rinki-fx .rksub{margin-top:12px;font-size:13.5px;font-weight:700;line-height:1.35;color:#fff}
/* all-of-today's-missions card: reuses the level-up shell, greener + wordier */
.daydone-fx .ddcard{background:linear-gradient(180deg,#8fe86a,var(--green-2) 58%,var(--green-d));
  color:#0d3d17;max-width:min(320px,86%);padding:18px 22px}
.daydone-fx .ddtitle{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.1;margin-top:4px;color:#fff;
  -webkit-text-stroke:2.5px #1a5c26;paint-order:stroke fill;text-shadow:0 3px 5px rgba(0,60,20,.4)}
.daydone-fx .ddbonus{font-family:var(--display);font-weight:800;font-size:19px;margin-top:7px;color:#fff8c9;
  text-shadow:0 2px 3px rgba(0,60,20,.5)}
.daydone-fx .ddstreak{display:inline-block;margin-top:10px;padding:4px 13px;border-radius:999px;
  background:rgba(255,255,255,.9);color:#1d7a45;font-family:var(--display);font-weight:800;font-size:14px}
.daydone-fx .ddsub{margin-top:12px;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.25;color:#fff;
  -webkit-text-stroke:2px #1a5c26;paint-order:stroke fill;text-shadow:0 2px 4px rgba(0,60,20,.45)}