/* ═══════════════════════════════════════
   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;
}

/* ── Prize splash (Phase B) — tappable gift, reveals a random prize ── */
#prizeOverlay{
  display:none;position:fixed;inset:0;z-index:9400;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .35s ease;
}
#prizeOverlay.show{opacity:1;}
#prizeGift{
  font-size:clamp(5rem,22vw,8rem);line-height:1;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
}
.prize-gift-bounce{animation:celHop .7s ease-in-out infinite;}
#prizeReveal{
  flex-direction:column;align-items:center;gap:6px;
}
#prizeReveal .prize-emoji{font-size:clamp(5rem,22vw,8rem);line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));}
#prizeReveal .prize-name{
  font-family:'Baloo 2',cursive;font-size:clamp(1.4rem,6vw,2rem);font-weight:900;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.prize-reveal-pop{animation:celBounceIn .5s cubic-bezier(.34,1.56,.64,1);}
#prizeReveal .prize-sticker{
  width:clamp(160px,52vw,260px);height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
}
/* v2: gift shakes with anticipation instead of hopping */
.prize-gift-shake{animation:prizeGiftShake .9s ease-in-out infinite;transform-origin:50% 85%;}
/* After shake, switch to a continuous inviting bounce to demand a tap */
.prize-gift-bounce{
  animation:prizeGiftBounce 0.85s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin:50% 85%;
}
@keyframes prizeGiftBounce{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg);}
  20%    {transform:translateY(-18px) scale(1.08) rotate(-3deg);}
  40%    {transform:translateY(-28px) scale(1.12) rotate(3deg);}
  60%    {transform:translateY(-14px) scale(1.06) rotate(-1deg);}
  80%    {transform:translateY(-4px) scale(1.02) rotate(1deg);}
}
@keyframes prizeGiftShake{
  0%,100%{transform:rotate(0) scale(1.15);}
  15%{transform:rotate(-9deg) scale(1.15);}
  30%{transform:rotate(8deg) scale(1.18);}
  45%{transform:rotate(-6deg) scale(1.15);}
  60%{transform:rotate(4deg) scale(1.17);}
  75%{transform:rotate(-2deg) scale(1.15);}
}

/* ── Prize progress meter — filling gift ring on game screens ── */
#prizeMeter{
  display:none;position:fixed;bottom:12px;right:12px;z-index:60;
  width:52px;height:52px;border-radius:50%;
  align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  background:rgba(255,255,255,.4);backdrop-filter:blur(3px);
}
/* Vehicles: the switcher bar wraps to two rows of buttons on phones, so lift
   the meter clear of it. */
#prizeMeter.meter-raised{bottom:calc(150px + env(safe-area-inset-bottom));}
#prizeMeterRing{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#ffb300 0deg, rgba(255,255,255,.35) 0deg);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%);
          mask:radial-gradient(circle, transparent 58%, #000 60%);
}
#prizeMeterIcon{font-size:1.5rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
#prizeMeter.prize-meter-pop{animation:prizeMeterPop .35s ease-out;}
@keyframes prizeMeterPop{40%{transform:scale(1.18);}100%{transform:scale(1);}}
#prizeMeter.prize-meter-shake{animation:prizeMeterShake .6s ease-in-out;}
@keyframes prizeMeterShake{
  0%,100%{transform:rotate(0) scale(1);}
  20%{transform:rotate(-12deg) scale(1.25);}
  40%{transform:rotate(10deg) scale(1.25);}
  60%{transform:rotate(-8deg) scale(1.2);}
  80%{transform:rotate(5deg) scale(1.1);}
}

/* ── Hub sticker-book badge ── */
#hubStickersBtn{
  display:none;position:fixed;top:max(14px,env(safe-area-inset-top) + 8px);
  right:max(66px,env(safe-area-inset-right) + 60px);z-index:80;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.88);border:2px solid rgba(0,0,0,.07);
  font-size:1.2rem;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  align-items:center;justify-content:center;transition:transform .15s;
}
#hubStickersBtn:active{transform:scale(.9);}
#hubStickersCount{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;border-radius:9px;padding:0 4px;
  background:#ef5350;color:#fff;
  font-family:'Baloo 2',cursive;font-size:.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
#hubStickersCount:empty{display:none;}

/* ── Sticker book screen ── */
#stickersScreen{
  display:none;position:fixed;inset:0;z-index:10;
  flex-direction:column;align-items:center;justify-content:center;
  background:transparent;   /* shares the home-screen backdrop (HUB_BG_SCREENS) */
  overflow-y:auto;padding:max(64px,env(safe-area-inset-top) + 54px) 16px 22px;
}
.sticker-header{text-align:center;margin-bottom:10px;flex-shrink:0;}
.sticker-title{
  font-family:'Baloo 2',cursive;font-size:clamp(1.4rem,6vw,2rem);font-weight:900;
  color:#e65100;text-shadow:0 2px 0 rgba(255,255,255,.7);
}
#stickerSub{
  font-family:'Baloo 2',cursive;font-size:1rem;font-weight:800;color:#bf360c;opacity:.7;
}
/* Sized by BOTH width and height (aspect-ratio:1 makes the grid square, so
   bounding it by the shorter of the two axes guarantees it fits the viewport
   without scrolling) — the old width-only sizing (max-width:520px) was fine on
   a tall phone but overflowed on a short one, forcing a scroll. Same fix
   family as the settings-panel-fit pass. overflow-y:auto above stays only as
   an accessibility fallback for extreme zoom, not something that should fire
   in normal use now. */
#stickerGrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,14px);
  width:min(520px,92vw,calc(100dvh - 170px));
  aspect-ratio:1/1;
  flex-shrink:0;
}
@media (max-height:700px){
  #stickersScreen{padding:max(54px,env(safe-area-inset-top) + 44px) 14px 16px;}
  .sticker-header{margin-bottom:6px;}
  .sticker-title{font-size:1.15rem;}
  #stickerSub{font-size:.82rem;}
  #stickerGrid{width:min(520px,92vw,calc(100dvh - 128px));}
}
.sticker-slot{
  position:relative;aspect-ratio:1/1;border-radius:18px;
  background:rgba(255,255,255,.55);border:2px dashed rgba(191,54,12,.25);
  display:flex;align-items:center;justify-content:center;padding:8%;
  -webkit-tap-highlight-color:transparent;
}
.sticker-slot.earned{
  background:#fff;border:2px solid rgba(191,54,12,.15);
  box-shadow:0 3px 10px rgba(0,0,0,.1);cursor:pointer;
}
.sticker-img{width:100%;height:100%;object-fit:contain;}
.sticker-slot:not(.earned) .sticker-img,
.sticker-slot:not(.earned) .sticker-emoji{
  filter:grayscale(1) brightness(.5);opacity:.45;
}
.sticker-emoji{font-size:clamp(2rem,9vw,3.4rem);line-height:1;}
.sticker-count{
  position:absolute;top:4px;right:6px;
  background:#ffb300;color:#fff;border-radius:10px;padding:1px 7px;
  font-family:'Baloo 2',cursive;font-size:.75rem;font-weight:800;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.sticker-slot.sticker-wiggle{animation:celWiggle .5s ease-in-out;}
/* Earned sticker shimmer — hints the sticker is tappable */
.sticker-earned-shimmer{
  animation:stickerShimmer 2.2s ease-in-out infinite;
}
@keyframes stickerShimmer{
  0%,100%{filter:brightness(1);}
  50%    {filter:brightness(1.18) drop-shadow(0 0 6px rgba(255,179,0,0.5));}
}

/* 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;}
}
.fish-magic-sparkle{
  position:absolute;font-size:1.2rem;line-height:1;pointer-events:none;z-index:16;
  transform:translate(-50%,-50%);animation:fishMagicSparklePop .9s ease-out forwards;
}
@keyframes fishMagicSparklePop{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg);}
  30% {opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(20deg);}
  100%{opacity:0;transform:translate(-50%,-60%) scale(.8) rotate(50deg);}
}

/* ── 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);}
}