thth-pong{position:relative;display:block;width:100%;background-color:#000;font-family:monospace}.thth-pong{position:relative;width:100%;opacity:.1;aspect-ratio:4/3}.thth-pong--info{position:absolute;top:0;left:0;width:100%;aspect-ratio:4/3}.thth-pong--ball{position:absolute;width:20px;height:20px;background-color:#fff;border-radius:50%;left:50%;left:var(--ball-x, 50%);top:50%;top:var(--ball-y, 50%)}.thth-pong--paddle{position:absolute;width:20px;height:100px;background-color:#fff}.thth-pong--paddle-left{left:0;top:50%;top:var(--paddle-pos, 50%)}.thth-pong--paddle-right{right:0;top:50%;top:var(--paddle-pos, 50%)}.thth-pong--score{position:absolute;top:16px;color:#fff;font-size:24px}.thth-pong--score-left{left:32px}.thth-pong--score-right{right:32px}.thth-pong--controls{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:#fff}.thth-pong--controls--button{display:block;place-content:center;border:0 none;color:#fff;background-color:#000;width:2.5rem;height:2.5rem}.thth-pong--game-ready,.thth-pong--game-over{position:absolute;display:none;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;font-size:24px}thth-pong[data-game-state=WAITING] .thth-pong--game-ready,thth-pong[data-game-state=FINISHED] .thth-pong--game-over{display:block}thth-pong[data-game-state=PLAYING] .thth-pong{opacity:1}.thth-pong--game-ready{-webkit-animation:blink 1s infinite;animation:blink 1s infinite}@-webkit-keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}