*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;overflow:hidden}main{height:100svh;display:grid;place-items:center;background:#000}#player{display:block;border:0;padding:0;background:transparent;width:min(94vw,86svh);aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;perspective:1000px}#sprite{display:block;width:100%;height:100%;background-image:url('./ronaldo-sprites.png');background-repeat:no-repeat;background-size:200% 200%;background-position:0 0;transform-origin:50% 80%;will-change:transform}#player[data-frame="1"] #sprite{background-position:100% 0}#player[data-frame="2"] #sprite{background-position:0 100%}#player[data-frame="3"] #sprite{background-position:100% 100%}#player:focus-visible{outline:1px solid #777;outline-offset:0;border-radius:8px}#player.playing #sprite{animation:celebrate 1.65s both}@keyframes celebrate{0%{transform:translateY(0) scaleY(1)}16%{transform:translateY(2%) scaleY(.95)}37%{transform:translateY(-9%) scale(1.025)}55%{transform:translateY(-11%) scale(1.025)}69%{transform:translateY(-3%) scale(1.01)}75%{transform:translateY(1.5%) scaleY(.97)}85%,100%{transform:translateY(0) scale(1)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){#player.playing #sprite{animation:none}}