@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;600;800&display=swap');
:root{--navy:#0B1E4F;--navy2:#132C6E;--blue:#1D3F9E;--cyan:#2BB3E8;--paper:#E7E7E9;--white:#F7F8FB;--soft:#B8C6E6}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,Arial,sans-serif;background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased}
.disp{font-family:Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.cyan{color:var(--cyan)}

/* jersey */
.jersey{position:relative;aspect-ratio:1/1;perspective:1600px}
.flip{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.6,.05,.25,1)}
.jersey.back .flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden;background:var(--paper)}
.face img{width:100%;height:100%;display:block;object-fit:cover}
.face.b{transform:rotateY(180deg)}
.print{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply}
.anim .print .ltr{opacity:0;animation:stamp .35s cubic-bezier(.2,1.6,.4,1) forwards}
.anim .print .num{opacity:0;transform-origin:360px 380px;animation:numin .7s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{0%{opacity:0}100%{opacity:1}}
@keyframes numin{0%{opacity:0;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}
.sway .flip{animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotateY(-9deg)}50%{transform:rotateY(9deg)}}

/* confetti */
.cfbox{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.cf{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{top:110%;transform:translateX(60px) rotate(720deg)}}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:999px;padding:18px 22px;font:800 17px/1 Inter,Arial,sans-serif;letter-spacing:.02em;cursor:pointer;background:var(--cyan);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.35)}
.btn:disabled{opacity:.4}
.foot{font-size:12px;color:var(--soft);opacity:.75;text-align:center;line-height:1.5}