/* George's celebrations, shared by every game. (Loaded before each page's own styles,
   so a page that defines the same animation itself keeps its own.) */

/* The overlay used where a game has none of its own (Penalty Shootout, My Player page). */
.gl-cele{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 55%,rgba(225,16,44,.45),rgba(13,11,16,.78) 70%);cursor:pointer;overflow:hidden;}
.gl-cele-avatar{height:min(62%,240px);aspect-ratio:200/230;width:auto;position:relative;z-index:1;}
.gl-cele-avatar svg{width:100%;height:100%;overflow:visible;}
.gl-cele-text{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(30px,8vw,52px);color:#fff;text-shadow:0 4px 0 #7a0d20,0 0 26px rgba(225,16,44,.9);margin-top:6px;letter-spacing:.04em;text-align:center;position:relative;z-index:1;animation:celeZoom .9s ease-out both;}
.cele-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.cele-fx span{position:absolute;bottom:-40px;animation:fxUp 2.2s ease-out forwards;opacity:0;}
@keyframes fxUp{0%{transform:translateY(0) scale(.6);opacity:0;}15%{opacity:1;}100%{transform:translateY(-110%) scale(1.1) rotate(20deg);opacity:0;}}

/* The originals */
.cele-jump{animation:celeJump .6s ease-in-out 3;}
@keyframes celeJump{0%,100%{transform:translateY(0);}50%{transform:translateY(-22px) scale(1.04);}}
.cele-slide{animation:celeSlide 1.5s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes celeSlide{0%{transform:translateX(-120%) rotate(-8deg);}70%{transform:translateX(8%) rotate(4deg);}100%{transform:translateX(0) rotate(0);}}
.cele-siuuu{animation:celeSiu 1.5s ease-in-out forwards;}
@keyframes celeSiu{0%{transform:translateY(0) scaleX(1);}20%{transform:translateY(-40px) scaleX(-1);}40%{transform:translateY(-50px) scaleX(1);}60%{transform:translateY(0) scaleX(1) scale(1.08);}100%{transform:scale(1);}}
.cele-zoom{animation:celeZoom 1.4s ease-out forwards;}
@keyframes celeZoom{0%{transform:scale(.5);}40%{transform:scale(1.15);}100%{transform:scale(1);}}
.cele-robot{animation:celeRobot 1.6s steps(8) forwards;}
@keyframes celeRobot{0%{transform:rotate(0) translateX(0);}25%{transform:rotate(-10deg) translateX(-10px);}50%{transform:rotate(10deg) translateX(10px);}75%{transform:rotate(-10deg) translateX(-10px);}100%{transform:rotate(0);}}
.cele-dance{animation:celeDance .5s ease-in-out 4;}
@keyframes celeDance{0%,100%{transform:rotate(0) translateY(0);}25%{transform:rotate(-8deg) translateY(-12px);}75%{transform:rotate(8deg) translateY(-12px);}}
.cele-salute{animation:celeSalute 1.6s ease forwards;}
@keyframes celeSalute{0%{transform:scale(.7);}30%{transform:scale(1.08);}45%{transform:scale(1) rotate(-4deg);}60%{transform:rotate(4deg);}100%{transform:rotate(0);}}
.cele-rock{animation:celeRock .8s ease-in-out 3;transform-origin:50% 80%;}
@keyframes celeRock{0%,100%{transform:rotate(-12deg);}50%{transform:rotate(12deg);}}
.cele-cartwheel{animation:celeCart 1.4s ease-in-out forwards;transform-origin:50% 50%;}
@keyframes celeCart{0%{transform:translateX(-80%) rotate(0);}100%{transform:translateX(0) rotate(720deg);}}
.cele-rocket{animation:celeRocket 1.8s cubic-bezier(.5,0,.3,1) forwards;}
@keyframes celeRocket{0%{transform:translateY(0);}15%{transform:translateY(6px) scale(.96);}55%{transform:translateY(-80px) scale(1.05);}100%{transform:translateY(0) scale(1);}}
.cele-plane{animation:celePlane 1.8s ease-in-out forwards;}
@keyframes celePlane{0%{transform:translateX(-60%) rotate(-14deg);}25%{transform:translateX(-20%) rotate(12deg);}50%{transform:translateX(20%) rotate(-12deg);}75%{transform:translateX(40%) rotate(10deg);}100%{transform:translateX(0) rotate(0);}}
.cele-shiver{animation:celeShiver .08s linear 20;filter:hue-rotate(160deg) saturate(.6) brightness(1.1);}
@keyframes celeShiver{0%{transform:translateX(-3px);}50%{transform:translateX(3px);}100%{transform:translateX(-3px);}}
.cele-flip{animation:celeFlip 1.3s cubic-bezier(.3,.7,.4,1) forwards;transform-origin:50% 60%;}
@keyframes celeFlip{0%{transform:translateY(0) rotate(0);}40%{transform:translateY(-60px) rotate(-200deg);}70%{transform:translateY(-20px) rotate(-340deg);}100%{transform:translateY(0) rotate(-360deg);}}

/* New */
.cele-sprinkler{animation:celeSprinkler 1.7s steps(1,end) forwards;transform-origin:50% 90%;}
@keyframes celeSprinkler{0%{transform:rotate(-34deg);}12%{transform:rotate(-22deg) translateY(-6px);}25%{transform:rotate(-10deg);}37%{transform:rotate(2deg) translateY(-6px);}50%{transform:rotate(14deg);}62%{transform:rotate(26deg) translateY(-6px);}75%{transform:rotate(34deg);}88%{transform:rotate(10deg);}100%{transform:rotate(0);}}
.cele-moonwalk{animation:celeMoon 1.8s ease-in-out forwards;}
@keyframes celeMoon{0%{transform:translateX(70%) skewX(-6deg);}60%{transform:translateX(-35%) skewX(-6deg);}85%{transform:translateX(-35%) skewX(0) translateY(-14px);}100%{transform:translateX(0) skewX(0);}}
.cele-spin{animation:celeSpin 1.3s cubic-bezier(.3,.7,.3,1) forwards;}
@keyframes celeSpin{0%{transform:perspective(700px) rotateY(0) scale(.8);}100%{transform:perspective(700px) rotateY(720deg) scale(1);}}
.cele-pogo{animation:cele-pogo .36s ease-in-out 6;transform-origin:50% 100%;}
@keyframes cele-pogo{0%,100%{transform:translateY(0) scale(1.06,.92);}50%{transform:translateY(-46px) scale(.95,1.06);}}
.cele-guitar{animation:celeGuitar .34s ease-in-out 6;transform-origin:50% 90%;}
@keyframes celeGuitar{0%,100%{transform:rotate(-9deg) translateY(0);}50%{transform:rotate(9deg) translateY(10px);}}
.cele-flex{animation:celeFlex 1.6s ease-in-out forwards;}
@keyframes celeFlex{0%{transform:scale(.8);}20%{transform:scale(1.2) rotate(-3deg);}40%{transform:scale(1.08) rotate(0);}60%{transform:scale(1.22) rotate(3deg);}80%{transform:scale(1.1);}100%{transform:scale(1);}}
.cele-super{animation:celeSuper 1.6s cubic-bezier(.3,.7,.4,1) forwards;}
@keyframes celeSuper{0%{transform:translate(-140%,50px) rotate(-22deg) scale(.7);}55%{transform:translate(0,-34px) rotate(-8deg) scale(1.12);}75%{transform:translate(0,-10px) rotate(0) scale(1.05);}100%{transform:translate(0,0) rotate(0) scale(1);}}
.cele-shush{animation:celeShush 1.8s ease-in-out forwards;}
@keyframes celeShush{0%{transform:scale(.8);}25%{transform:scale(1.12);}40%,80%{transform:scale(1.08) rotate(-2deg);}60%{transform:scale(1.08) rotate(2deg);}100%{transform:scale(1);}}

@media (prefers-reduced-motion: reduce){ .gl-cele-text,.cele-fx span{animation:none !important;} .cele-fx span{opacity:1;} }