/* ═══════════════════════════════════════
   CELEBRATE — shared reward styles  v1
   confetti, milestone bursts, session finale, shared keyframes
   ═══════════════════════════════════════ */

#celebrateLayer{
  position:fixed;inset:0;z-index:9000;
  pointer-events:none;overflow:hidden;
}

/* Rain confetti — falls full-height with drift + spin */
.cel-confetti{
  position:absolute;top:-18px;pointer-events:none;
  animation:celConfettiFall linear forwards;
}
@keyframes celConfettiFall{
  0%  {transform:translateY(0)     translateX(0)             rotate(0deg);opacity:1;}
  75% {opacity:1;}
  100%{transform:translateY(108vh) translateX(var(--cdrift)) rotate(var(--cspin));opacity:0;}
}

/* Burst confetti — radiates from a point */
.cel-burst{
  position:absolute;pointer-events:none;
  animation:celBurstFly ease-out forwards;
}
@keyframes celBurstFly{
  0%  {transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--bx),var(--by)) scale(.2);opacity:0;}
}

/* ── Session finale ── */
#finaleOverlay{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(70,40,120,.92) 0%,rgba(20,10,50,.96) 100%);
  animation:finaleIn .4s ease-out;
}
#finaleOverlay.finale-out{animation:finaleOut .65s ease-in forwards;}
@keyframes finaleIn {from{opacity:0;}to{opacity:1;}}
@keyframes finaleOut{from{opacity:1;}to{opacity:0;}}

.finale-star{
  position:relative;
  width:min(64vw,340px);height:min(64vw,340px);
  animation:finaleStarIn .6s cubic-bezier(.34,1.56,.64,1),finaleStarBounce 1.4s ease-in-out .6s infinite;
}
@keyframes finaleStarIn{
  0%  {transform:scale(0) rotate(-30deg);}
  70% {transform:scale(1.15) rotate(6deg);}
  100%{transform:scale(1) rotate(0);}
}
@keyframes finaleStarBounce{
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%    {transform:translateY(-22px) rotate(3deg);}
}

.fs-shape{
  position:absolute;inset:0;
  background:radial-gradient(circle at 38% 32%,#ffe680 0%,#ffd740 45%,#ffab00 100%);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 40px rgba(255,215,64,.75));
}
.fs-face{
  position:absolute;left:50%;top:50%;
  width:38%;height:26%;
  transform:translate(-50%,-40%);
}
.fs-eye{
  position:absolute;top:0;
  width:16%;height:42%;
  background:#5d3a00;border-radius:50%;
  animation:fsBlink 3.2s infinite;
}
.fs-eye-l{left:16%;} .fs-eye-r{right:16%;}
@keyframes fsBlink{
  0%,92%,100%{transform:scaleY(1);}
  95%        {transform:scaleY(.12);}
}
.fs-mouth{
  position:absolute;left:50%;bottom:0;
  width:52%;height:46%;
  transform:translateX(-50%);
  border:5px solid #5d3a00;border-top:none;
  border-radius:0 0 90px 90px;
  background:rgba(200,60,40,.35);
}
.fs-hand{
  position:absolute;right:-8%;top:26%;
  font-size:clamp(3rem,14vw,5.2rem);line-height:1;
  transform-origin:70% 90%;
  animation:fsWave .55s ease-in-out infinite alternate;
}
@keyframes fsWave{
  0%  {transform:rotate(-14deg);}
  100%{transform:rotate(22deg);}
}

/* ── Fishtank magic mode — fantastical glowing tank for 20s ── */
#fishScreen.fish-magic #fishContainer{
  filter:hue-rotate(45deg) saturate(1.6) brightness(1.15);
  transition:filter 1.2s ease;
}
#fishScreen.fish-magic #fishContainer>div{
  filter:drop-shadow(0 0 10px rgba(180,120,255,.9));
}
#fishScreen.fish-magic::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:15;
  background:radial-gradient(ellipse at 30% 20%,rgba(200,120,255,.18) 0%,transparent 50%),
             radial-gradient(ellipse at 75% 70%,rgba(80,200,255,.15) 0%,transparent 55%);
  animation:fishMagicShimmer 3.5s ease-in-out infinite alternate;
}
@keyframes fishMagicShimmer{
  0%  {opacity:.5;}
  100%{opacity:1;}
}

/* ── Day/Night magic weather fall ── */
@keyframes dnWxFall{
  0%  {transform:translateY(0);opacity:0;}
  8%  {opacity:.95;}
  85% {opacity:.95;}
  100%{transform:translateY(105vh);opacity:0;}
}

/* ── Shared per-game reward keyframes (used by Phase 4 features) ── */
@keyframes celWiggle{
  0%  {transform:rotate(0) scale(1);}
  25% {transform:rotate(-8deg) scale(1.08);}
  50% {transform:rotate(6deg) scale(1.05);}
  75% {transform:rotate(-4deg) scale(1.02);}
  100%{transform:rotate(0) scale(1);}
}
@keyframes celHop{
  0%,100%{transform:translateY(0) scale(1);}
  40%    {transform:translateY(-26px) scale(1.12);}
  70%    {transform:translateY(0) scale(.94,.88);}
}
@keyframes celBounceIn{
  0%  {transform:scale(0);}
  60% {transform:scale(1.25);}
  100%{transform:scale(1);}
}
@keyframes celFloatUp{
  0%  {transform:translateY(0) scale(.7);opacity:1;}
  100%{transform:translateY(-90px) scale(1.25);opacity:0;}
}
@keyframes celSpinDance{
  0%  {transform:rotate(0) scale(1);}
  30% {transform:rotate(-20deg) scale(1.2);}
  60% {transform:rotate(380deg) scale(1.25);}
  100%{transform:rotate(360deg) scale(1);}
}