@import"https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap";:root{--green-pitch: #1b8a2e;--green-dark: #146b23;--goal-white: #f0f0f0;--net-color: rgba(255,255,255,.35);--ball-color: #fff;--glove-color: #ff5722;--power-color: #ff1744;--gold: #ffd600;--font-main: "Fredoka One", cursive, system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:var(--font-main);background:#0a0a0a;user-select:none;-webkit-user-select:none;touch-action:none}.pitch{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#0d5a1a 0%,var(--green-pitch) 30%,#22a33a 50%,var(--green-pitch) 70%,#0d5a1a 100%);overflow:hidden}.pitch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 48px,rgba(255,255,255,.03) 48px,rgba(255,255,255,.03) 96px);pointer-events:none}.stadium-lights{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 50% 10%,rgba(255,255,200,.15) 0%,transparent 70%)}.crowd{position:absolute;top:0;left:0;right:0;height:80px;pointer-events:none;z-index:1;overflow:hidden}.crowd:before{content:"";position:absolute;bottom:0;left:-5%;right:-5%;height:60px;background:radial-gradient(ellipse 18px 28px at 5% 100%,#1a1a1a 50%,transparent 51%),radial-gradient(ellipse 16px 25px at 12% 100%,#222 50%,transparent 51%),radial-gradient(ellipse 20px 30px at 20% 100%,#1a1a1a 50%,transparent 51%),radial-gradient(ellipse 15px 22px at 28% 100%,#222 50%,transparent 51%),radial-gradient(ellipse 18px 28px at 36% 100%,#1a1a1a 50%,transparent 51%),radial-gradient(ellipse 20px 32px at 44% 100%,#222 50%,transparent 51%),radial-gradient(ellipse 16px 24px at 52% 100%,#1a1a1a 50%,transparent 51%),radial-gradient(ellipse 19px 29px at 60% 100%,#222 50%,transparent 51%),radial-gradient(ellipse 17px 26px at 68% 100%,#1a1a1a 50%,transparent 51%),radial-gradient(ellipse 20px 31px at 76% 100%,#222 50%,transparent 51%),radial-gradient(ellipse 15px 23px at 84% 100%,#1a1a1a 50%,transparent 51%),radial-gradient(ellipse 18px 27px at 92% 100%,#222 50%,transparent 51%)}.goal{position:absolute;top:8%;left:50%;transform:translate(-50%);width:70%;max-width:500px;height:30%;border:4px solid var(--goal-white);border-top:none;border-radius:0 0 12px 12px;z-index:2;background-image:linear-gradient(var(--net-color) 1px,transparent 1px),linear-gradient(90deg,var(--net-color) 1px,transparent 1px);background-size:18px 18px;box-shadow:inset 0 0 30px #0000004d}.goal:before,.goal:after{content:"";position:absolute;top:-4px;width:6px;height:calc(100% + 4px);background:var(--goal-white);border-radius:3px}.goal:before{left:-3px}.goal:after{right:-3px}.ball{position:absolute;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#e0e0e0 40%,#bbb);box-shadow:0 3px 8px #0006,inset 0 -2px 4px #00000026;z-index:10;pointer-events:none}.ball:before{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;transform:translate(-50%,-50%);background:#333;border-radius:50%;clip-path:polygon(50% 0%,85% 25%,85% 75%,50% 100%,15% 75%,15% 25%)}@keyframes spin-ball{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ball.spinning{animation:spin-ball .3s linear infinite}.ball.power{background:radial-gradient(circle at 35% 35%,#ff5252,#ff1744,#b71c1c);box-shadow:0 0 18px #ff1744b3,0 3px 8px #0006}.ball.power:before{background:#fff;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}@keyframes flash-power{0%,to{box-shadow:0 0 18px #ff1744b3,0 3px 8px #0006}50%{box-shadow:0 0 30px #ff1744,0 0 60px #ff174480}}.ball.power.flash{animation:flash-power .2s ease-in-out infinite,spin-ball .2s linear infinite}.keeper{position:absolute;z-index:10;pointer-events:none;transition:left .05s linear,top .05s linear}.glove{width:60px;height:48px;position:relative}.glove:before{content:"";position:absolute;width:52px;height:42px;background:var(--glove-color);border-radius:12px 12px 8px 8px;box-shadow:0 3px 10px #0000004d,inset 0 2px #fff3;left:4px;top:4px}.glove:after{content:"";position:absolute;top:0;left:8px;width:44px;height:18px;background:var(--glove-color);border-radius:10px 10px 4px 4px;box-shadow:inset 0 2px #fff3}.glove-strap{position:absolute;bottom:2px;left:14px;width:32px;height:6px;background:#e64a19;border-radius:3px}.hud{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 16px;z-index:20;pointer-events:none}.lives{display:flex;gap:4px;font-size:24px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.score-display{font-size:28px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);text-align:right}.score-display .label{font-size:11px;text-transform:uppercase;letter-spacing:2px;opacity:.7}.score-display .value{font-size:32px;display:block}.combo-display{position:absolute;top:50px;right:16px;z-index:20;pointer-events:none}.combo-label{font-size:14px;color:var(--gold);text-shadow:0 1px 4px rgba(0,0,0,.5)}.level-display{position:absolute;top:10px;left:50%;transform:translate(-50%);z-index:20;font-size:13px;color:#fff9;text-shadow:0 1px 3px rgba(0,0,0,.5);letter-spacing:1px;pointer-events:none}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:50;background:#00000080}.countdown-text{font-size:120px;color:#fff;text-shadow:0 0 40px rgba(255,255,255,.4),0 4px 12px rgba(0,0,0,.6);animation:countdown-pop .5s ease-out}@keyframes countdown-pop{0%{transform:scale(2);opacity:0}60%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:1}}.hat-trick-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none;animation:hat-trick-anim .8s ease-out forwards;display:flex;align-items:center;justify-content:center}@keyframes hat-trick-anim{0%{background:#ffd60066}to{background:transparent}}.hat-trick-text{font-size:48px;color:var(--gold);text-shadow:0 0 30px rgba(255,214,0,.8),0 4px 12px rgba(0,0,0,.6);animation:hat-trick-text-anim 1s ease-out forwards}@keyframes hat-trick-text-anim{0%{transform:scale(.5) rotate(-10deg);opacity:0}30%{transform:scale(1.3) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:0}}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-6px,-3px)}20%{transform:translate(6px,3px)}30%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}50%{transform:translate(-2px,3px)}60%{transform:translate(2px,-1px)}70%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}}.shaking{animation:shake .4s ease-out}.concede-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:35;pointer-events:none;background:#ff000040;animation:concede-anim .5s ease-out forwards}@keyframes concede-anim{0%{opacity:1}to{opacity:0}}.score-popup{position:absolute;z-index:25;font-size:24px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);pointer-events:none;animation:score-float .8s ease-out forwards}@keyframes score-float{0%{transform:translateY(0) scale(1.2);opacity:1}to{transform:translateY(-50px) scale(.8);opacity:0}}.title-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;background:radial-gradient(ellipse at center,#005000e6,#001e00f2)}.title-screen h1{font-size:64px;color:var(--gold);text-shadow:0 0 30px rgba(255,214,0,.5),0 4px 12px rgba(0,0,0,.6);margin-bottom:8px}.title-screen .subtitle{font-size:18px;color:#ffffffb3;margin-bottom:40px}.play-btn{font-family:var(--font-main);font-size:28px;padding:16px 48px;border:none;border-radius:50px;background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff;cursor:pointer;box-shadow:0 6px 20px #ff572266;transition:transform .15s,box-shadow .15s;text-shadow:0 2px 4px rgba(0,0,0,.3)}.play-btn:hover{transform:scale(1.05);box-shadow:0 8px 28px #ff572299}.play-btn:active{transform:scale(.97)}.best-score-label{margin-top:24px;font-size:14px;color:#ffffff80}.gameover-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;background:#000c;animation:fade-in .5s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.gameover-screen h1{font-size:52px;color:#ff5252;text-shadow:0 0 20px rgba(255,82,82,.5);margin-bottom:20px}.final-score{font-size:72px;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.3);margin-bottom:8px}.new-best{font-size:20px;color:var(--gold);text-shadow:0 0 12px rgba(255,214,0,.5);margin-bottom:24px;animation:pulse-glow 1s ease-in-out infinite alternate}@keyframes pulse-glow{0%{text-shadow:0 0 12px rgba(255,214,0,.5)}to{text-shadow:0 0 30px rgba(255,214,0,.9)}}.best-score-go{font-size:16px;color:#ffffff80;margin-bottom:32px}.touch-area{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;touch-action:none}@media(max-width:600px){.goal{width:85%;height:25%;top:10%}.title-screen h1{font-size:42px}.title-screen .subtitle{font-size:14px}.play-btn{font-size:22px;padding:12px 36px}.gameover-screen h1{font-size:36px}.final-score{font-size:52px}.countdown-text{font-size:80px}.score-display .value{font-size:24px}.glove{width:48px;height:38px}.glove:before{width:42px;height:34px}.glove:after{width:36px;height:14px}.ball{width:28px;height:28px}}