/* The Padel Passport · Racket Bag characters. Pairs with characters.js. */
.ppc{overflow:visible;display:block;width:100%;height:auto;--pop:cubic-bezier(.35,1.8,.35,.83)}
.ppc .shadow{fill:#10204A;opacity:.14}
.ppc .eye{transform-box:fill-box;transform-origin:center;transition:transform .07s linear}
.ppc.blink .eye{transform:scaleY(.1)}
.ppc .bob,.ppc .body,.ppc .pose{transform-box:view-box;transform-origin:0px 92px}
.ppc .arm{transform-box:view-box;transition:transform .25s var(--pop)}
.ppc .arm-l{transform-origin:-44px 0px}.ppc .arm-r{transform-origin:44px 0px}

/* ---------- idles (on .bob) ---------- */
.ppc .bob{animation:ppc-bob 3.2s ease-in-out infinite}
@keyframes ppc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
.idle-nervous .bob{animation:ppc-nervous 3.6s ease-in-out infinite}
@keyframes ppc-nervous{0%,100%{transform:none}40%{transform:translateY(-3px)}78%{transform:none}81%{transform:rotate(-2.5deg)}84%{transform:rotate(2.5deg)}87%{transform:rotate(-2deg)}90%{transform:none}}
.idle-sway .bob{animation:ppc-sway 3s ease-in-out infinite}
@keyframes ppc-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg) translateY(-2px)}}
.idle-groove .bob{animation:ppc-groove 1.3s ease-in-out infinite}
@keyframes ppc-groove{0%,100%{transform:rotate(-3deg) translateY(0)}25%{transform:translateY(-4px)}50%{transform:rotate(3deg) translateY(0)}75%{transform:translateY(-4px)}}
.idle-heroic .bob,.idle-proud .bob{animation:ppc-proud 3.4s ease-in-out infinite}
@keyframes ppc-proud{0%,100%{transform:scale(1)}50%{transform:scale(.985,1.03) translateY(-2px)}}
.idle-breezy .bob{animation:ppc-breezy 3.8s ease-in-out infinite}
@keyframes ppc-breezy{0%,100%{transform:rotate(1deg)}50%{transform:rotate(4deg) translateY(-3px)}}
.idle-slither .bob{animation:ppc-slither 2.4s ease-in-out infinite}
@keyframes ppc-slither{0%,100%{transform:skewX(0)}25%{transform:skewX(-5deg)}75%{transform:skewX(5deg)}}
.idle-hoppy .bob{animation:ppc-hoppy 1.8s var(--pop) infinite}
@keyframes ppc-hoppy{0%,60%,100%{transform:translateY(0) scale(1)}68%{transform:translateY(0) scale(1.06,.92)}80%{transform:translateY(-12px) scale(.96,1.05)}92%{transform:translateY(0) scale(1.04,.96)}}
.idle-listen .bob{animation:ppc-listen 4.2s ease-in-out infinite}
@keyframes ppc-listen{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-5deg)}}
.idle-fired .bob{animation:ppc-fired .9s ease-in-out infinite}
@keyframes ppc-fired{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(.98,1.03)}}
.idle-shiver .bob{animation:ppc-shiver 4s linear infinite}
@keyframes ppc-shiver{0%,70%,100%{transform:none}72%{transform:translateX(-1.5px)}74%{transform:translateX(1.5px)}76%{transform:translateX(-1.5px)}78%{transform:translateX(1.5px)}80%{transform:none}}
.idle-tick .bob{animation:ppc-tick 2s steps(4) infinite}
@keyframes ppc-tick{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.idle-shimmer .bob{animation:ppc-bob 4s ease-in-out infinite}

/* ---------- accessory life ---------- */
.ppc .glow{animation:ppc-glow 1.6s ease-in-out infinite}
@keyframes ppc-glow{0%,100%{opacity:.25}50%{opacity:.6}}
.ppc .cape{transform-box:fill-box;transform-origin:100% 0;animation:ppc-cape 1.4s ease-in-out infinite}
@keyframes ppc-cape{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(1.06)}}
.ppc .kite{transform-box:fill-box;transform-origin:0 100%;animation:ppc-kite 2.6s ease-in-out infinite}
@keyframes ppc-kite{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateY(-3px)}}
.ppc .breeze{stroke-dasharray:40 60;animation:ppc-breeze 2.2s linear infinite}
@keyframes ppc-breeze{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ppc .glint,.ppc .shine{animation:ppc-glint 5s ease-in-out infinite}
@keyframes ppc-glint{0%,60%{transform:translateX(-50px)}82%,100%{transform:translateX(160px)}}
.ppc .beam{animation:ppc-glow 1.4s ease-in-out infinite}
.ppc .lamp{animation:ppc-glow 2.4s ease-in-out infinite}
.ppc .twinkle circle,.ppc .halo path,.ppc .sparkle path{transform-box:fill-box;transform-origin:center;animation:ppc-twinkle 2s ease-in-out infinite}
.ppc .twinkle circle:nth-child(2n),.ppc .halo path:nth-child(2n),.ppc .sparkle path:nth-child(2n){animation-delay:-1s}
.ppc .halo path:nth-child(3n),.ppc .sparkle path:nth-child(3n){animation-delay:-.5s}
@keyframes ppc-twinkle{0%,100%{transform:scale(.6);opacity:.55}50%{transform:scale(1.1);opacity:1}}
.ppc .swirl{transform-box:fill-box;transform-origin:center;animation:ppc-spin 3s linear infinite}
@keyframes ppc-spin{to{transform:rotate(360deg)}}
.ppc .waves path{animation:ppc-waves 1.6s ease-out infinite}
.ppc .waves path:nth-child(2){animation-delay:.3s}
@keyframes ppc-waves{0%{opacity:0;transform:translateX(4px)}40%{opacity:1}100%{opacity:0;transform:translateX(-4px)}}
.ppc .panef{animation:ppc-panef 4.2s ease-in-out infinite}
@keyframes ppc-panef{0%,100%{transform:none}30%,70%{transform:translateX(2px)}}
.ppc .finger{transform-box:fill-box;transform-origin:50% 100%;animation:ppc-finger 1.3s ease-in-out infinite}
@keyframes ppc-finger{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg) translateY(-2px)}}
.ppc .fl1,.ppc .fl2{transform-box:fill-box;transform-origin:50% 100%;animation:ppc-flame .5s ease-in-out infinite alternate}
.ppc .fl2{animation-duration:.37s}
@keyframes ppc-flame{from{transform:scaleY(.9) skewX(-3deg)}to{transform:scaleY(1.08) skewX(3deg)}}
.ppc .orbiter{animation:ppc-orbit 2.4s linear infinite}
@keyframes ppc-orbit{0%{transform:translate(0,0) scale(1)}25%{transform:translate(42px,10px) scale(1.12)}50%{transform:translate(84px,0) scale(1)}75%{transform:translate(42px,-10px) scale(.78)}100%{transform:translate(0,0) scale(1)}}
.ppc .pom{transform-box:fill-box;transform-origin:50% 100%;animation:ppc-sway 1.8s ease-in-out infinite}
.ppc .scarftail{transform-box:fill-box;transform-origin:50% 0;animation:ppc-sway 2.2s ease-in-out infinite}
.ppc .snow circle{animation:ppc-snow 3.4s linear infinite}
.ppc .snow circle:nth-child(2){animation-delay:-1.2s}.ppc .snow circle:nth-child(3){animation-delay:-2.1s}.ppc .snow circle:nth-child(4){animation-delay:-.6s}
@keyframes ppc-snow{0%{transform:translateY(-14px);opacity:0}20%{opacity:1}100%{transform:translateY(22px);opacity:0}}
.ppc .breath{animation:ppc-breath 3.2s ease-out infinite}
@keyframes ppc-breath{0%,40%{opacity:0;transform:none}60%{opacity:.9}100%{opacity:0;transform:translate(8px,-6px)}}
.ppc .puff{animation:ppc-breath 2.6s ease-out infinite}
.ppc .swingtag,.ppc .swingtag2{transform-box:fill-box;transform-origin:50% 0;animation:ppc-tag 2.4s ease-in-out infinite}
@keyframes ppc-tag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.ppc .bell{animation:ppc-ring 2s linear infinite}
@keyframes ppc-ring{0%,80%,100%{transform:none}84%{transform:translateX(-1.5px)}88%{transform:translateX(1.5px)}92%{transform:translateX(-1.5px)}96%{transform:translateX(1.5px)}}
.ppc .mh{transform-box:fill-box;transform-origin:50% 100%;animation:ppc-spin 6s steps(12) infinite}
.ppc .zz{animation:ppc-zz 3s ease-in-out infinite}
@keyframes ppc-zz{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.ppc .rays{transform-box:fill-box;transform-origin:center;animation:ppc-spin 18s linear infinite}
.ppc .laurel{transform-box:fill-box;transform-origin:50% 100%;animation:ppc-proud 3s ease-in-out infinite}
.ppc .shades{transition:transform .3s var(--pop)}
.ppc .cheerfx path{transform-box:fill-box;transform-origin:center;animation:ppc-twinkle 1.2s ease-in-out infinite}

/* ---------- celebrate (add .ppc-cheer for ~1.5 s via PPChars.celebrate) ---------- */
.ppc.ppc-cheer .arm-l:not(.up){transform:rotate(120deg);animation:ppc-wave-l .32s ease-in-out .25s 4 alternate}
.ppc.ppc-cheer .arm-r:not(.up){transform:rotate(-120deg);animation:ppc-wave-r .32s ease-in-out .25s 4 alternate}
.ppc.ppc-cheer .arm.up{animation:ppc-pump .3s ease-in-out 4 alternate}
@keyframes ppc-wave-l{from{transform:rotate(120deg)}to{transform:rotate(145deg)}}
@keyframes ppc-wave-r{from{transform:rotate(-120deg)}to{transform:rotate(-145deg)}}
@keyframes ppc-pump{from{transform:none}to{transform:translateY(-8px) rotate(-8deg)}}
.ppc.ppc-cheer .shades{transform:translateY(-22px)}
.ppc.ppc-cheer .bob{animation-play-state:paused}
.ppc.ppc-cheer .body{animation:ppc-jump .75s var(--pop) 2}
.cel-spin.ppc-cheer .body{animation:ppc-flipx .8s var(--pop) 1,ppc-jump .75s var(--pop) .8s 1}
.cel-twirl.ppc-cheer .body{animation:ppc-twirl .9s cubic-bezier(.3,1.3,.4,1) 1,ppc-jump .75s var(--pop) .9s 1}
.cel-shimmy.ppc-cheer .body{animation:ppc-shimmy .7s ease-in-out 2}
.cel-stomp.ppc-cheer .body{animation:ppc-stomp .6s var(--pop) 2}
@keyframes ppc-jump{0%{transform:translateY(0) scale(1)}18%{transform:translateY(3px) scale(1.1,.88)}48%{transform:translateY(-26px) scale(.94,1.08) rotate(-5deg)}78%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
@keyframes ppc-flipx{0%{transform:scaleX(1)}15%{transform:translateY(3px) scale(1.08,.9)}50%{transform:translateY(-24px) scaleX(-1)}85%{transform:translateY(0) scaleX(1) scaleY(.95)}100%{transform:none}}
@keyframes ppc-twirl{0%{transform:none}15%{transform:translateY(3px) scale(1.08,.9)}60%{transform:translateY(-30px) rotate(-340deg)}85%{transform:translateY(0) rotate(-362deg) scale(1.05,.95)}100%{transform:rotate(-360deg)}}
@keyframes ppc-shimmy{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-7deg)}40%{transform:translateX(6px) rotate(7deg) translateY(-6px)}60%{transform:translateX(-5px) rotate(-6deg)}80%{transform:translateX(4px) rotate(5deg) translateY(-4px)}}
@keyframes ppc-stomp{0%{transform:none}25%{transform:translateY(-16px) scale(.95,1.06)}55%{transform:translateY(0) scale(1.14,.84)}75%{transform:scale(.97,1.04)}100%{transform:none}}

/* ---------- swing / hit (add .ppc-swing via PPChars.swing) ---------- */
.ppc.ppc-swing .pose{animation:ppc-swing .55s cubic-bezier(.2,.9,.3,1)}
@keyframes ppc-swing{0%{transform:none}30%{transform:rotate(22deg) scale(1.04,.95)}52%{transform:rotate(-40deg) scale(.95,1.06)}72%{transform:rotate(-30deg)}100%{transform:none}}
.ppc.ppc-swing .arm-r{transform:rotate(-100deg)}

/* ---------- locked silhouette ---------- */
.ppc.locked .shadow{opacity:.08}

/* ---------- confetti bits from PPChars.burst ---------- */
.ppc-bit{position:fixed;z-index:10001;width:9px;height:12px;border-radius:2px;pointer-events:none;border:2px solid #10204A;
  transform:translate(-50%,-50%);animation:ppc-bit 1.1s cubic-bezier(.2,.7,.4,1) forwards}
.ppc-bit.star{width:16px;height:16px;border:0;border-radius:0;background:#FFCB2E;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes ppc-bit{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 90px)) rotate(var(--rot)) scale(1);opacity:0}}

/* ---------- rarity chip + buttons (shared with the reveal) ---------- */
.ppc-chip{display:inline-flex;align-items:center;gap:.35em;font:800 .7rem/1 'Figtree',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--rc,#3F6CF0);border:2px solid #10204A;border-radius:999px;padding:.4em .7em .35em}
.ppc-btn{font:700 1rem/1 'Figtree',system-ui,sans-serif;border:3px solid #10204A;border-radius:14px;padding:.85em 1.2em;cursor:pointer;
  box-shadow:0 5px 0 var(--edge,#0F2F8F);transition:transform .12s,box-shadow .12s;min-height:48px}
.ppc-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--edge,#0F2F8F)}
.ppc-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge,#0F2F8F)}
.ppc-btn-sun{background:#FFCB2E;color:#10204A;--edge:#E5A100}
.ppc-btn-ghost{background:#fff;color:#10204A;--edge:#9DB0D9}
.ppc-btn:focus-visible{outline:3px solid #FFCB2E;outline-offset:3px}

/* ---------- the reveal moment ---------- */
.ppc-reveal{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;
  background:radial-gradient(circle at 50% 42%,rgba(30,79,216,.92),rgba(16,32,74,.96) 70%);opacity:0;transition:opacity .25s;font-family:'Figtree',system-ui,sans-serif;color:#fff}
.ppc-reveal.in{opacity:1}.ppc-reveal.out{opacity:0}
.ppc-rev-head{order:-1;margin:0;font:900 italic clamp(1.4rem,5vw,2.1rem)/1 'Grandstander','Fredoka',system-ui,sans-serif;color:#FFCB2E;text-align:center;
  text-shadow:0 3px 0 #10204A;transform:scale(.6);opacity:0;transition:transform .5s var(--pop,cubic-bezier(.35,1.8,.35,.83)) .55s,opacity .3s .55s}
.ppc-reveal.flip .ppc-rev-head{transform:none;opacity:1}
.ppc-rev-stage{position:relative;width:min(300px,78vw);aspect-ratio:3/4.1}
.ppc-rev-rays{position:absolute;inset:-45%;border-radius:50%;opacity:0;transition:opacity .4s .6s;
  background:repeating-conic-gradient(from 0deg,rgba(255,203,46,.38) 0 9deg,rgba(255,203,46,0) 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:ppc-spin 14s linear infinite}
.ppc-reveal.flip .ppc-rev-rays{opacity:1}
.ppc-rev-card{position:absolute;inset:0;perspective:1100px;transform:scale(.5) translateY(40px);transition:transform .55s cubic-bezier(.35,1.6,.4,1)}
.ppc-reveal.in .ppc-rev-card{transform:none}
.ppc-rev-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.4,1);transform:rotateY(0)}
.ppc-reveal.in:not(.flip) .ppc-rev-inner{animation:ppc-shake .5s ease-in-out .15s}
@keyframes ppc-shake{0%,100%{transform:none}25%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}75%{transform:rotate(-3deg)}}
.ppc-reveal.flip .ppc-rev-inner{transform:rotateY(180deg)}
.ppc-rev-back,.ppc-rev-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid #10204A;border-radius:24px;box-shadow:0 8px 0 rgba(0,0,0,.25)}
.ppc-rev-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#1E4FD8 radial-gradient(circle at 30% 25%,rgba(255,255,255,.25),transparent 50%);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px)}
.ppc-rev-q{font:900 7rem/1 'Grandstander',system-ui,sans-serif;color:#FFCB2E;text-shadow:0 5px 0 #10204A}
.ppc-rev-brand{font:700 .8rem/1 'Figtree',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#CFF1F4}
.ppc-rev-front{transform:rotateY(180deg);background:#F5F8FF;color:#10204A;display:flex;flex-direction:column;align-items:center;padding:14px 16px 16px;text-align:center}
.r-rare .ppc-rev-front{background:linear-gradient(#F5F8FF,#E2F7EC)}
.r-epic .ppc-rev-front{background:linear-gradient(#F5F8FF,#ECE6FF)}
.r-legendary .ppc-rev-front{background:linear-gradient(160deg,#FFF6C9,#F5F8FF 45%,#FFE48A);border-color:#E5A100;box-shadow:0 0 0 4px #10204A,0 8px 0 rgba(0,0,0,.25),0 0 40px rgba(255,203,46,.7)}
.ppc-rev-char{width:62%;margin-top:4px}
.ppc-rev-name{margin:2px 0 0;font:800 1.9rem/1 'Grandstander','Fredoka',system-ui,sans-serif}
.ppc-rev-title{margin:4px 0 0;font-size:.85rem;color:#3B4A72}
.ppc-rev-says{margin:8px 0 0;font:500 1.02rem/1.2 'Shantell Sans','Comic Sans MS',cursive;font-variation-settings:"BNCE" 40,"INFM" 30}
.ppc-rev-pip{position:absolute;left:-4%;top:calc(100% - 26px);width:23%;transform:translateY(40px) scale(.4);opacity:0;transition:transform .5s var(--pop,cubic-bezier(.35,1.8,.35,.83)) .8s,opacity .2s .8s}
.ppc-reveal.flip .ppc-rev-pip{transform:none;opacity:1}
.ppc-rev-bubble{position:absolute;left:104%;top:38%;white-space:nowrap;background:#fff;color:#10204A;border:3px solid #10204A;border-radius:14px;padding:.35em .6em;
  font:600 .95rem/1.1 'Shantell Sans','Comic Sans MS',cursive}
.ppc-rev-bubble::after{content:"";position:absolute;left:-9px;top:50%;width:12px;height:12px;background:#fff;border:3px solid #10204A;border-top:0;border-right:0;transform:translateY(-50%) rotate(45deg)}
.ppc-rev-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:78px;opacity:0;transition:opacity .3s 1s}
.ppc-reveal.flip .ppc-rev-actions{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ppc *,.ppc-reveal *{animation:none!important;transition:none!important}
  .ppc-bit{display:none}
}