.penalty-game-container{position:relative}.penalty-game-container>h1{margin:0;padding:0}.penalty-game-container .penalty-shootout-logo{border-radius:0 !important;position:absolute;top:20px;left:25px;padding:0;width:115px;z-index:5}@media(min-width: 600px){.penalty-game-container .penalty-shootout-logo{left:50%;transform:translate(-50%, 0);width:160px}}#penalty-game{background-color:#4caf50;border:4px solid #fff;border-radius:25px;box-shadow:1px 1px 25px #000;max-width:600px;margin:0 auto;text-align:center;font-family:sans-serif;position:relative;overflow:hidden;container-type:inline-size}#penalty-game[data-mode=aim] .ball{cursor:pointer}#penalty-game.locked{pointer-events:none}#penalty-game.locked .shootout-over{justify-content:center;align-items:center;display:flex;flex-direction:column;position:absolute;background:rgba(0,0,0,.85);top:0;bottom:0;left:0;right:0;z-index:25}#penalty-game .shootout-over{justify-content:center;align-items:center;display:flex;flex-direction:column;position:absolute;background:rgba(0,0,0,.85);top:0;bottom:0;left:-100%;width:100%;z-index:25;transition:left .6s ease}#penalty-game.locked .shootout-over{left:0}#penalty-game.locked .play-again-btn{pointer-events:auto;opacity:1}.game-inner{position:relative;width:100%;height:465px;overflow:hidden;border-bottom:5px solid #1a5c1e}.game-inner>.goal{position:absolute;bottom:110px;left:5%;width:90%;z-index:2}.game-inner>.goal img{width:100%;height:auto;display:block}.goalie{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);transition:left .4s ease;z-index:2}.goalie img{width:100px;height:auto;display:block}.pitch{position:absolute;bottom:0;width:100%;height:180px;background:repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 15px, transparent 15px, transparent 30px),linear-gradient(to top, #1a5c1e, #2e8b32);z-index:1}.ball{position:absolute;bottom:12px;left:50%;width:42px;height:42px;transform:translateX(-50%) scale(1);transition:left .6s ease,bottom .6s ease,transform .6s ease;z-index:5}.ball svg{width:100%;height:auto}.ball.kicked{transform:scale(0.9)}.controls{padding-top:15px;background-color:#fff}.controls button{margin:5px;padding:10px 14px;font-size:16px;cursor:pointer}@keyframes result-in{from{opacity:0;transform:translateX(-50%) scale(0.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes result-out{from{opacity:1;transform:translateX(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) scale(1.15)}}.result{position:absolute;bottom:25px;left:50%;transform:translateX(-50%) scale(0.6);z-index:20;opacity:0;pointer-events:none;text-align:center;font-size:55px;font-weight:900;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;color:#ffe94d;text-shadow:0 0 20px rgba(255,220,0,.7),0 2px 8px rgba(0,0,0,.5)}.result.show{animation:result-in .3s ease forwards}.result.hide{animation:result-out .35s ease forwards}.result.goal-message{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}.result.final{font-weight:bold;transition:opacity .6s ease}.play-again-btn{border:none;margin:10px auto;padding:8px 18px;font-size:20px;cursor:pointer;display:block}@container (min-width: 979px){.play-again-btn{font-size:24px}}.play-again-btn:hover{text-decoration:underline}.game-status-bar{background-color:#fff;text-align:center;padding:0 12px}.kick-instruction{margin:0;padding:.6em 0;font-size:14px;width:100%}.aim-meter{background-color:#1b5e20;margin:0 auto;padding:1em;width:100%}.aim-meter #kickBtn{background-color:blue;border:1px solid #fff;color:#fff;padding:.5em;min-width:150px;font-size:14px;cursor:pointer}.aim-arrow{position:absolute;bottom:28px;left:calc(50% - 12px);width:24px;height:150px;background-color:hsla(0,0%,100%,.9);clip-path:polygon(0% 22%, 42% 22%, 42% 100%, 58% 100%, 58% 22%, 100% 22%, 50% 0%);transform-origin:50% 100%;transform-style:preserve-3d;transition:none;z-index:5}.shootout-status{display:flex;gap:8px;position:absolute;top:15px;right:15px;z-index:6;background-color:#3b70b6;padding:4px 8px;border-radius:25px}.shot-dot{width:20px;height:20px;position:relative;opacity:.6;overflow:hidden;border-radius:50%}.shot-dot svg{width:100%;height:100%;display:block}.shot-dot.goal{opacity:1;overflow:visible}.shot-dot.goal::after{content:"";position:absolute;inset:0;background:url("../img/check.svg") center/contain no-repeat;pointer-events:none;width:120%;height:120%;top:-4px}.shot-dot.miss{opacity:1;overflow:visible}.shot-dot.miss::after{content:"";position:absolute;inset:0;background:url("../img/x-mark.svg") center/contain no-repeat;pointer-events:none}.restart-container{background-color:#fff;padding-bottom:1em;text-align:center}.restart-btn{background-color:#000;border:none;border-radius:15px;color:#fff;padding:8px 16px;font-size:14px;cursor:pointer}.shootout-over #shootoutOverText{color:#fff;display:block;font-size:1.4em;font-weight:bold;margin-bottom:10px}#penalty-game.locked .aim-meter,#penalty-game.locked .controls button{pointer-events:none}@container (max-width: 479px){.game-inner{height:350px}.game-inner>.goal{bottom:68px}.pitch{height:112px}.goalie{bottom:80px}.goalie img{width:80px}.ball{width:40px;height:40px}.aim-arrow{bottom:20px;left:calc(50% - 10px);width:20px;height:120px}.result{font-size:32px;bottom:30px}}@container (max-width: 380px){.game-inner{height:280px}.game-inner>.goal{bottom:54px}.pitch{height:88px}.goalie{bottom:63px}.goalie img{width:63px}.ball{width:36px;height:36px}.aim-arrow{bottom:17px;left:calc(50% - 8px);width:16px;height:95px}.result{font-size:26px;bottom:22px}.kick-instruction{font-size:12px}.shot-dot{width:16px;height:16px}}.ball:not(.kicked)::after{content:"";position:absolute;top:50%;left:50%;width:120%;height:120%;background:rgba(255,255,0,.4);border-radius:50%;transform:translate(-50%, -50%) scale(1);z-index:-1;animation:haloPulse 1.2s infinite ease-out}@keyframes haloPulse{0%{transform:translate(-50%, -50%) scale(0.8);opacity:.8}70%{transform:translate(-50%, -50%) scale(1.4);opacity:0}100%{opacity:0}}