:root{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',system-ui,sans-serif;color:#fff;background:#03132e;touch-action:manipulation;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body,#game{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.scene{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:#0870d5}.stadium{position:absolute;inset:0;background:url('./assets/stadium.png') center/cover no-repeat;transform:scale(1.002);transition:transform .2s ease;z-index:-5}.scene.zoom .stadium{animation:cameraZoom .9s ease-in forwards}.scene.shake{animation:shake .32s linear}.game-header{position:absolute;inset:max(2vh,10px) 2.2vw auto;display:flex;align-items:flex-start;justify-content:space-between;z-index:20;pointer-events:none}.logo{filter:drop-shadow(0 5px 0 #061738) drop-shadow(0 0 2px #fff);transform:rotate(-2deg);line-height:.8}.logo-main{display:block;font-style:italic;font-size:clamp(1.5rem,4.3vw,4.5rem);letter-spacing:.02em;color:#ff5daa;-webkit-text-stroke:2px white;text-shadow:5px 5px 0 #092765}.logo-sub{display:block;margin:.5rem 0 0 1.7rem;font-style:italic;font-size:clamp(.65rem,1.75vw,1.8rem);color:#ffe35d;-webkit-text-stroke:1px #092765;text-shadow:2px 2px 0 #071b46}.scoreboard{min-width:clamp(150px,19vw,300px);padding:.8vh 1.2vw;border:3px solid #fff;border-radius:16px;background:linear-gradient(135deg,#071a45,#06112c);box-shadow:0 5px 0 #091d48,0 8px 18px #0007;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.5vw;font-size:clamp(.85rem,1.7vw,1.8rem)}.scoreboard strong{font-size:clamp(1.8rem,4vw,4rem);line-height:.8;color:#ff4f9c}.scoreboard b{font-size:clamp(1rem,2vw,2rem)}.shots{grid-column:1/-1;border-top:2px solid #fff8;padding-top:.5vh;display:flex;gap:.55vw;justify-content:center}.shot{width:clamp(15px,1.8vw,28px);aspect-ratio:1;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:inset 0 0 0 4px #162a59}.shot.goal{background:#61e574;box-shadow:inset 0 0 0 4px #0a7a30}.shot.miss{background:#ff5c6e;box-shadow:inset 0 0 0 4px #92233a}.sound,.fullscreen{position:absolute;bottom:max(2.2vh,12px);z-index:30;width:clamp(44px,4vw,64px);aspect-ratio:1;border:3px solid #fff;border-radius:14px;color:#fff;background:#071a45d9;box-shadow:0 4px 0 #020b1e;font-size:clamp(1.3rem,2.2vw,2.2rem)}.sound{left:2vw}.fullscreen{right:2vw}.sound:active,.fullscreen:active,.shoot:active,.start-card button:active,.end-card button:active{transform:translateY(3px);box-shadow:none}.goal-zones{position:absolute;left:21%;top:31%;width:58%;height:33%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);z-index:9}.goal-zones button{border:1px dashed transparent;background:transparent;cursor:crosshair}.goal-zones.active button:hover,.goal-zones.active button:focus-visible{background:#75d9ff20;border-color:#fff9;outline:none}.aim{--x:50%;--y:46%;position:absolute;left:var(--x);top:var(--y);width:clamp(38px,5vw,78px);aspect-ratio:1;border:3px solid #ffef56;border-radius:50%;transform:translate(-50%,-50%) scale(.8);filter:drop-shadow(0 2px 2px #001);opacity:0;z-index:10;pointer-events:none}.aim.show{opacity:1;animation:pulse 1s ease-in-out infinite}.aim:before,.aim:after{content:'';position:absolute;background:#ffef56}.aim:before{width:140%;height:3px;left:-20%;top:calc(50% - 1.5px)}.aim:after{height:140%;width:3px;top:-20%;left:calc(50% - 1.5px)}.aim i{position:absolute;inset:35%;border-radius:50%;background:#ffef56}.sprite{position:absolute;background-image:url('./assets/sprites.png');background-repeat:no-repeat;background-size:400% 200%;pointer-events:none;filter:drop-shadow(0 5px 3px #0018);z-index:8}.player{width:clamp(105px,17vw,300px);aspect-ratio:443.5/443.5;right:5%;bottom:5%;transform-origin:50% 85%}.player-ready{background-position:0 0}.player-run{background-position:33.333% 0;animation:runIn .72s cubic-bezier(.25,.7,.35,1) forwards}.player-kick{background-position:66.666% 0;transform:translate(-17vw,-1vh) scale(1.05)}.player-celebrate{background-position:100% 0;animation:celebrate .7s ease-in-out infinite alternate}.keeper{width:clamp(100px,15vw,260px);aspect-ratio:443.5/443.5;left:50%;top:42%;transform:translate(-50%,-50%);transform-origin:50% 60%;z-index:7}.keeper-ready{background-position:0 100%}.keeper-left{background-position:33.333% 100%;animation:diveLeft .55s cubic-bezier(.2,.7,.4,1) forwards}.keeper-right{background-position:66.666% 100%;animation:diveRight .55s cubic-bezier(.2,.7,.4,1) forwards}.keeper-center{background-position:100% 100%;animation:saveCenter .55s ease forwards}.ball{position:absolute;left:50%;top:76.5%;width:clamp(40px,6.5vw,110px);aspect-ratio:1;object-fit:cover;border-radius:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 4px #0016);z-index:12;transition:none;pointer-events:none}.ball.flying{transition:left .52s cubic-bezier(.15,.72,.3,1),top .52s cubic-bezier(.12,.8,.38,1),width .52s ease,transform .52s ease;transform:translate(-50%,-50%) rotate(600deg);width:clamp(24px,3.5vw,58px)}.ball-trail{position:absolute;height:8px;width:0;border-radius:999px;background:linear-gradient(90deg,transparent,#fff,#9ce8ff);filter:blur(2px) drop-shadow(0 0 6px #fff);transform-origin:right center;z-index:11;opacity:0}.ball-trail.show{animation:trailFlash .5s ease-out}.speed-lines{position:absolute;inset:-15%;background:repeating-conic-gradient(from 0deg at 50% 60%,transparent 0deg 4deg,#fff7 4.2deg 4.6deg,transparent 4.8deg 8deg);opacity:0;mix-blend-mode:screen;z-index:6;pointer-events:none}.speed-lines.show{animation:lines .6s ease-out}.net-ripple{position:absolute;left:22%;top:31%;width:56%;height:33%;border-radius:20%;background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),#fff9 0 2%,transparent 3% 11%,#fff5 12%,transparent 17%);opacity:0;z-index:5;pointer-events:none}.net-ripple.show{animation:ripple .65s ease-out}.result-text{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.3) rotate(-5deg);z-index:25;font-size:clamp(3rem,9vw,9rem);font-style:italic;color:#fff;-webkit-text-stroke:clamp(2px,.35vw,6px) #092765;text-shadow:7px 8px 0 #ff3d91,12px 13px 0 #ffe05a;opacity:0;pointer-events:none;white-space:nowrap}.result-text.show{animation:resultPop 1.15s cubic-bezier(.2,.9,.2,1)}.bottom-controls{position:absolute;left:50%;bottom:2.4vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6vh;z-index:20}.bottom-controls p{margin:0;padding:.3rem .8rem;border-radius:999px;background:#051c4abf;text-shadow:1px 2px #001;font-family:system-ui,sans-serif;font-weight:900;font-size:clamp(.7rem,1.2vw,1.1rem);letter-spacing:.06em}.shoot,.start-card button,.end-card button{border:4px solid #fff;border-radius:18px;background:linear-gradient(#ff5ca8,#f23682);color:#fff;padding:.55rem clamp(2rem,6vw,6rem);box-shadow:0 6px 0 #091b47,0 8px 20px #0006;font-size:clamp(1.5rem,3.4vw,3.3rem);font-style:italic;-webkit-text-stroke:1px #071b46;cursor:pointer}.shoot:disabled{filter:grayscale(.8);opacity:.55;cursor:not-allowed}.start-screen,.end-screen{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(#03133bb8,#071c56a8);backdrop-filter:blur(3px)}.start-card,.end-card{text-align:center;min-width:min(88vw,480px);padding:clamp(1.1rem,3vh,2.4rem);border:4px solid #fff;border-radius:28px;background:linear-gradient(145deg,#08266bed,#07143ff2);box-shadow:0 10px 0 #020a20,0 18px 50px #0008;transform:rotate(-1deg)}.start-ball{font-size:clamp(2rem,6vw,5rem);animation:ballBounce .8s ease-in-out infinite alternate}.start-card h1{margin:0;color:#ff5ca8;font-style:italic;font-size:clamp(3rem,8vw,7rem);line-height:.85;-webkit-text-stroke:2px #fff;text-shadow:5px 6px 0 #020d31}.start-card h2{margin:.65rem 0;color:#ffe35d;font-size:clamp(1.15rem,3vw,2.6rem);font-style:italic}.start-card p,.end-kicker{margin:.6rem 0 1rem;font-family:system-ui,sans-serif;font-weight:1000;letter-spacing:.12em}.start-card button,.end-card button{font-size:clamp(1.3rem,3vw,2.5rem);padding:.5rem 3rem}.start-card small{display:block;margin-top:1rem;font-family:system-ui,sans-serif;font-size:1rem}.end-screen[hidden]{display:none}.end-card h2{margin:.3rem;color:#ffe35d;font-size:clamp(2rem,6vw,5rem)}.final-score{margin:.2rem}.final-score strong{font-size:clamp(4rem,10vw,9rem);color:#ff5ca8}.final-score span{font-size:clamp(1.5rem,4vw,3.5rem)}#recordMessage{font-family:system-ui,sans-serif;font-weight:800}.rotate{display:none}.confetti{position:absolute;z-index:30;width:10px;height:18px;top:-5%;animation:fall 1.5s linear forwards;pointer-events:none}@keyframes cameraZoom{to{transform:scale(1.1)}}@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,3px)}}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.15)}}@keyframes runIn{to{transform:translate(-17vw,-1vh) scale(1.05)}}@keyframes celebrate{from{transform:translate(-12vw,-2vh) rotate(-3deg)}to{transform:translate(-12vw,-4vh) rotate(3deg)}}@keyframes diveLeft{to{transform:translate(-160%,-60%) rotate(-15deg)}}@keyframes diveRight{to{transform:translate(60%,-60%) rotate(15deg)}}@keyframes saveCenter{to{transform:translate(-50%,-68%) scale(1.05)}}@keyframes trailFlash{0%{opacity:0;width:0}35%{opacity:1;width:25vw}100%{opacity:0;width:38vw}}@keyframes lines{0%{opacity:0;transform:scale(.7)}35%{opacity:.65}100%{opacity:0;transform:scale(1.2)}}@keyframes ripple{0%{opacity:0;transform:scale(.8)}30%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1)}}@keyframes resultPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}22%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}@keyframes ballBounce{to{transform:translateY(-10px) rotate(12deg)}}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(720deg)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.speed-lines{display:none}}@media (orientation:portrait) and (max-width:900px){.scene{display:none}.rotate{display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;background:radial-gradient(circle at 50% 30%,#0873d5,#061438);font-family:system-ui,sans-serif}.rotate span{font-size:5rem}.rotate strong{font-size:1.6rem}.rotate small{font-size:1rem}}@media (max-height:500px){.game-header{top:6px}.logo-sub{margin-top:.3rem}.scoreboard{padding:.4vh 1vw}.bottom-controls{bottom:1vh}.bottom-controls p{display:none}.sound,.fullscreen{bottom:1vh}.start-card,.end-card{padding:.7rem}.start-ball{display:none}.start-card p{margin:.3rem}}
:where(.start-screen,.end-screen)[hidden]{display:none!important}

/* Isolated frames prevent adjacent limbs from bleeding into animated poses. */
.sprite{background-repeat:no-repeat;background-position:center;background-size:contain}
.player-ready{background-image:url('./assets/player-ready.png')}
.player-run{background-image:url('./assets/player-run.png')}
.player-kick{background-image:url('./assets/player-kick.png')}
.player-celebrate{background-image:url('./assets/player-celebrate.png')}
.keeper{top:68.2%;transform:translate(-50%,-100%);transform-origin:50% 100%}
.keeper-ready{background-image:url('./assets/keeper-ready.png')}
.keeper-left{background-image:url('./assets/keeper-left.png')}
.keeper-right{background-image:url('./assets/keeper-right.png')}
.keeper-center{background-image:url('./assets/keeper-center.png')}
@keyframes diveLeft{to{transform:translate(-160%,-100%) rotate(-15deg)}}
@keyframes diveRight{to{transform:translate(60%,-100%) rotate(15deg)}}
@keyframes saveCenter{to{transform:translate(-50%,-105%) scale(1.05)}}

/* Jersey and cap details are overlays so they stay crisp at every screen size. */
.player::after{content:'OLIMPIA';position:absolute;left:50%;transform:translateX(-50%);color:#06469b;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(8px,1.45vw,24px);font-weight:900;letter-spacing:.025em;line-height:1;text-shadow:0 1px 0 #fff8;pointer-events:none}
.player-ready::after{top:28%}.player-run::after{top:29%}.player-kick::after{top:29%}.player-celebrate::after{top:34%}
.keeper-ready{clip-path:inset(0 5% 0 0)}
.keeper-center{clip-path:inset(0 0 0 9%)}
.keeper-ready::after{content:none}

/* Match the original composition: a foreground shooter, a full-height keeper and the penalty spot. */
.player{width:clamp(170px,27vw,440px);right:1%;bottom:0}
.keeper{width:clamp(145px,22vw,340px);top:68.2%}
.ball{top:82.4%}
.player::after{content:none}
.player-celebrate{clip-path:inset(0 0 0 21%)}
.keeper-ready::before{content:none}

/* Rebuilt field plate based on the approved original composition. */
.stadium{background-image:url('./assets/stadium-v2.png')}
.player-ready{background-image:url('./assets/player-olimpia-v2.png')}
.ball.hidden{opacity:0}