:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a1a0a;color:#fafafa;overflow-x:hidden}.game-container{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden}.stadium{position:fixed;top:0;left:0;right:0;height:80px;background:linear-gradient(180deg,#1a0a2e,#16213e,#0f3460);z-index:0;overflow:hidden}.crowd{position:absolute;bottom:0;left:0;right:0;height:40px;display:flex;align-items:flex-end}.fan{width:3%;height:20px;border-radius:50% 50% 0 0;animation:crowd-wave 2s ease-in-out infinite;opacity:.7}@keyframes crowd-wave{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.4)}}.stadium-lights{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none}.light{position:absolute;width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,200,.3) 0%,transparent 70%);border-radius:50%}.light.left{left:10%;top:-30px}.light.right{right:10%;top:-30px}.scoreboard{position:relative;z-index:10;display:flex;align-items:center;gap:1.5rem;margin-top:90px;padding:.75rem 2rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(255,255,255,.15);border-radius:1rem;box-shadow:0 8px 32px #00000080}.team{display:flex;align-items:center;gap:.75rem}.team-name{font-weight:800;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:#acf}.score{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(100,200,255,.5);min-width:2ch;text-align:center}.round-indicator{font-size:.8rem;color:#ffffff80;letter-spacing:.15em;text-transform:uppercase;padding:.25rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:.5rem}.shot-history{display:flex;gap:.4rem;margin-top:.75rem;position:relative;z-index:10}.shot-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}.shot-dot.player.scored{background:#4f8;border-color:#2c6}.shot-dot.player.missed{background:#f46;border-color:#c24}.shot-dot.cpu.scored{background:#f84;border-color:#c62}.shot-dot.cpu.missed{background:#48f;border-color:#26c}.menu-screen{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;margin-top:3rem;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.menu-ball{width:120px;height:120px;margin-bottom:2rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.spinning{animation:spin 4s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.title{font-size:3.5rem;font-weight:900;text-align:center;letter-spacing:-.02em;line-height:1.1;background:linear-gradient(135deg,#4f8,#4af,#f64);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;margin-bottom:1rem}.subtitle{color:#fff9;font-size:1rem;text-align:center;max-width:300px;margin-bottom:2rem}.btn-start{padding:1rem 3rem;font-size:1.2rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;border:none;border-radius:.75rem;background:linear-gradient(135deg,#4f8,#2c6);color:#0a1a0a;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #44ff884d}.btn-start:hover{transform:scale(1.05);box-shadow:0 6px 30px #44ff8880}.btn-start:active{transform:scale(.98)}.btn-menu{margin-top:.75rem;padding:.6rem 2rem;font-size:.9rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:2px solid rgba(255,255,255,.2);border-radius:.75rem;background:transparent;color:#fff9;cursor:pointer;transition:all .2s}.btn-menu:hover{border-color:#ffffff80;color:#fff}.pitch-area{position:relative;z-index:10;width:100%;max-width:600px;margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;animation:fadeIn .3s ease}.goal{position:relative;width:100%;height:280px;background:linear-gradient(180deg,#1a3a1a,#0d260d);border-radius:.5rem;overflow:hidden;border:3px solid #2a5a2a}.goal-net{position:absolute;top:20px;left:60px;right:60px;bottom:40px;background:repeating-linear-gradient(0deg,transparent,transparent 14px,rgba(255,255,255,.08) 14px,rgba(255,255,255,.08) 15px),repeating-linear-gradient(90deg,transparent,transparent 14px,rgba(255,255,255,.08) 14px,rgba(255,255,255,.08) 15px);border-radius:0 0 .25rem .25rem}.goal-post{position:absolute;width:12px;top:20px;bottom:40px;background:linear-gradient(90deg,#ddd,#fff,#ddd);border-radius:3px;box-shadow:0 0 10px #ffffff4d}.goal-post.left{left:50px}.goal-post.right{right:50px}.goal-crossbar{position:absolute;top:15px;left:50px;right:50px;height:10px;background:linear-gradient(180deg,#fff,#ccc);border-radius:3px;box-shadow:0 2px 10px #ffffff4d}.goal:before{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(0deg,#1a5a1a,#0d3a0d);border-top:2px solid rgba(255,255,255,.1)}.goal:after{content:"";position:absolute;bottom:35px;left:50%;transform:translate(-50%);width:120px;height:2px;background:#ffffff26;border-radius:1px}.goalie{position:absolute;bottom:50px;transition:left .3s ease;z-index:5}.goalie-body{position:relative;width:40px;height:70px}.goalie-head{width:20px;height:20px;background:#fc8;border-radius:50%;margin:0 auto;position:relative}.goalie-head:after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;height:14px;background:#4b4;border-radius:50% 50% 0 0}.player-head:after{background:#48f!important}.goalie-torso{width:28px;height:25px;background:#4b4;border-radius:4px;margin:2px auto 0}.player-torso{background:#48f!important}.goalie-arm{position:absolute;width:8px;height:25px;background:#4b4;border-radius:4px;top:24px;transition:all .3s ease}.goalie-arm.left{left:-4px;transform:rotate(15deg)}.goalie-arm.right{right:-4px;transform:rotate(-15deg)}.goalie-arm.extended.left{transform:rotate(-60deg) scaleX(1.3);left:-16px;top:20px}.goalie-arm.extended.right{transform:rotate(60deg) scaleX(1.3);right:-16px;top:20px}.goalie-legs{display:flex;justify-content:center;gap:4px;margin-top:2px}.goalie-leg{width:8px;height:18px;background:#222;border-radius:3px}.dive-left{animation:diveLeft .4s ease forwards}.dive-right{animation:diveRight .4s ease forwards}@keyframes diveLeft{0%{transform:translate(0) rotate(0)}to{transform:translate(-80px) rotate(-25deg)}}@keyframes diveRight{0%{transform:translate(0) rotate(0)}to{transform:translate(80px) rotate(25deg)}}.crosshair{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none}.crosshair-ring{width:40px;height:40px;border:3px solid #ff4444;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse-ring 1s ease infinite}@keyframes pulse-ring{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.7}}.crosshair-dot{width:8px;height:8px;background:#f44;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #f44}.ball{position:absolute;width:40px;height:40px;transform:translate(-50%,-50%);z-index:6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));transition:none}.ball-svg{width:100%;height:100%}.power-bar-container{display:flex;align-items:center;gap:.75rem;margin-top:1rem;width:100%;max-width:400px}.power-label{font-size:.7rem;font-weight:700;letter-spacing:.15em;color:#ffffff80;min-width:50px}.power-bar{flex:1;height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}.power-fill{height:100%;border-radius:6px;transition:width .02s linear;box-shadow:0 0 10px currentColor}.btn-shoot{margin-top:1rem;padding:.8rem 3rem;font-size:1.1rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;border:none;border-radius:.75rem;background:linear-gradient(135deg,#f64,#f42);color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px #ff44224d}.btn-shoot:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 30px #ff442280}.btn-shoot:disabled{opacity:.5;cursor:not-allowed}.aim-indicator{position:absolute;bottom:60px;left:50%;transform-origin:bottom center;z-index:4;pointer-events:none}.aim-arrow{width:4px;height:60px;background:linear-gradient(0deg,#ff6432cc,#ff643200);border-radius:2px;position:relative}.aim-arrow:after{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid rgba(255,100,50,.8)}.dive-buttons{display:flex;gap:1rem;margin-top:1.5rem;width:100%;max-width:500px}.btn-dive{flex:1;padding:1rem .5rem;font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:2px solid rgba(255,255,255,.2);border-radius:.75rem;background:#ffffff0d;color:#fff;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.3rem}.btn-dive .arrow{font-size:1.5rem}.btn-dive.left:hover{background:#48f3;border-color:#48f;transform:translate(-4px)}.btn-dive.center:hover{background:#4f83;border-color:#4f8}.btn-dive.right:hover{background:#f843;border-color:#f84;transform:translate(4px)}.btn-dive:active{transform:scale(.95)}.result-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;animation:resultPop .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes resultPop{0%{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}.result-overlay span{font-size:3rem;font-weight:900;letter-spacing:.1em;text-shadow:0 4px 20px rgba(0,0,0,.5)}.result-overlay.goal span{color:#4f8}.result-overlay.saved span{color:#fa4}.result-overlay.missed span{color:#f46}.result-overlay.cpu-goal span{color:#f64}.message-bar{position:relative;z-index:10;margin-top:1rem;padding:.6rem 2rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;font-size:.9rem;color:#ffffffb3;text-align:center;animation:fadeIn .3s ease}.result-screen{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;margin-top:2rem;animation:fadeIn .5s ease}.result-trophy{margin-bottom:1.5rem}.trophy-svg{width:100px;height:100px;animation:trophyBounce 1s ease infinite}@keyframes trophyBounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-5deg)}75%{transform:translateY(-10px) rotate(5deg)}}.sad-face{font-size:4rem;font-weight:900;color:#f64}.draw-icon{font-size:4rem;font-weight:900;color:#fa4}.result-title{font-size:2.5rem;font-weight:900;letter-spacing:.05em;margin-bottom:1rem;background:linear-gradient(135deg,#4f8,#4af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.final-score{display:flex;align-items:center;gap:1rem;font-size:3.5rem;font-weight:900;margin-bottom:1.5rem}.fs-player{color:#4f8}.fs-dash{color:#ffffff4d}.fs-cpu{color:#f84}.result-details{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}.result-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;border:2px solid}.result-dot.player{margin-right:.25rem}.result-dot.scored{background:#4f83;border-color:#4f8;color:#4f8}.result-dot.missed{background:#f463;border-color:#f46;color:#f46}.goal:before{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(0deg,#1a5a1a,#0d3a0d);border-top:2px solid rgba(255,255,255,.1);z-index:1}@media(max-width:640px){.title{font-size:2.5rem}.score{font-size:2rem}.goal{height:220px}.goal-post.left{left:30px}.goal-post.right{right:30px}.goal-crossbar,.goal-net{left:30px;right:30px}.dive-buttons{flex-direction:column;gap:.5rem}.btn-dive{flex-direction:row;justify-content:center;gap:.5rem}.result-overlay span{font-size:2rem}.final-score{font-size:2.5rem}}