:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f1faff;background:#071628}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0,#153f55,#071628 68%)}button{font:inherit;cursor:pointer}#app{width:min(900px,100%);margin:auto;padding:14px 16px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.brand{font-weight:1000;color:#fff;text-decoration:none;letter-spacing:.06em}.brand span{color:#54ecb5}#sound{border:1px solid #426276;border-radius:12px;background:#163346;color:#fff;padding:9px 12px}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.tag{font-size:13px;font-weight:900;letter-spacing:.15em;color:#73ffd0}.round{font-weight:900;background:#183b4e;padding:7px 12px;border-radius:18px;font-size:12px}.scoreboard{height:92px;display:flex;align-items:center;justify-content:center;gap:35px;background:#112c40;border:1px solid #315566;border-radius:20px 20px 0 0}.team{display:flex;align-items:center;gap:14px}.team.right{text-align:right}.emblem{font-size:30px}.team small{display:block;font-size:11px;font-weight:800;color:#95bbce;letter-spacing:.12em}.team strong{display:block;font-size:34px;line-height:1.1}.center-score{font-weight:1000;color:#80a7b6;letter-spacing:.3em}.playfield{height:440px;position:relative;overflow:hidden;background:linear-gradient(#0a233b 0 27%,#143b49 27% 48%,#248b50 48% 100%);border:1px solid #315566;border-top:0;border-radius:0 0 20px 20px}.stadium-lights{position:absolute;inset:0 0 auto;height:64px;background:radial-gradient(ellipse at 18% 5%,#c3faff66,transparent 24%),radial-gradient(ellipse at 82% 5%,#c3faff66,transparent 24%)}.stands{position:absolute;left:0;right:0;top:73px;height:128px;background:repeating-linear-gradient(0deg,#17334c,#17334c 9px,#203f5b 10px,#203f5b 18px);border-bottom:7px solid #e5f9f8}.crowd{position:absolute;top:85px;left:0;right:0;height:105px;opacity:.55;background-image:radial-gradient(circle,#dbffeb 1px,transparent 2px),radial-gradient(circle,#ffe479 1px,transparent 2px),radial-gradient(circle,#f38cb4 1px,transparent 2px);background-size:19px 17px,27px 19px,34px 22px;background-position:0 0,8px 7px,16px 11px}.pitch{position:absolute;inset:0;background:repeating-linear-gradient(100deg,transparent 0 75px,#91ee8220 75px 150px)}.goal-shadow{position:absolute;width:62%;height:25%;left:19%;top:53%;background:#031f2466;filter:blur(20px)}.goal{position:absolute;width:64%;height:48%;left:18%;top:16%;border:7px solid #f2fcff;border-bottom-width:9px;border-radius:5px 5px 2px 2px;background:linear-gradient(#1c485d85,#12445075);box-shadow:0 0 0 2px #a7eaff55,0 9px 20px #051f2f}.net{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#cffdff4c 1px,transparent 1px),linear-gradient(90deg,#cffdff4c 1px,transparent 1px);background-size:24px 24px}.target{position:absolute;width:33.333%;height:50%;z-index:5;cursor:crosshair;transition:background .15s}.target:hover{background:#75ffa82c}.target:nth-of-type(2){left:0;top:0}.target:nth-of-type(3){left:33.333%;top:0}.target:nth-of-type(4){left:66.666%;top:0}.target:nth-of-type(5){left:0;top:50%}.target:nth-of-type(6){left:33.333%;top:50%}.target:nth-of-type(7){left:66.666%;top:50%}.keeper{position:absolute;left:50%;top:62%;width:80px;height:115px;transform:translate(-50%,-50%);transform-origin:center;z-index:3;transition:left .43s ease,top .43s ease,transform .43s ease}.keeper-head{position:absolute;top:6px;left:30px;width:22px;height:24px;border-radius:50%;background:#d7a173;border:3px solid #292534}.keeper-body{position:absolute;left:18px;top:31px;width:46px;height:47px;background:linear-gradient(120deg,#fcab36,#ed5b23);border-radius:12px 12px 5px 5px;border:3px solid #743d25}.keeper-arm{position:absolute;width:15px;height:60px;top:29px;border-radius:14px;background:linear-gradient(#f38c29 0 65%,#a7e9ff 65%);border:2px solid #82482a;transform-origin:top}.left-arm{left:18px;transform:rotate(55deg)}.right-arm{right:15px;transform:rotate(-55deg)}.keeper-leg{position:absolute;width:17px;height:39px;top:70px;background:#1c3455;border-radius:6px;transform-origin:top}.left-leg{left:22px;transform:rotate(17deg)}.right-leg{right:20px;transform:rotate(-17deg)}.spot{position:absolute;width:12px;height:6px;border-radius:50%;background:#f0fff4;left:calc(50% - 6px);top:84%}.ball{position:absolute;z-index:8;left:50%;top:79%;width:49px;height:49px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 28% 22%,#fff,#e1e5e6 66%,#83949e);box-shadow:0 14px 12px #0719238c;display:grid;place-items:center;transition:left .48s cubic-bezier(.22,.9,.3,1),top .48s cubic-bezier(.22,.9,.3,1),scale .48s,opacity .2s}.ball span{width:23px;height:23px;background:#223b45;clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%)}.ball.kicked{scale:.46;box-shadow:0 7px 8px #0005}.ball.resetting{transition:none!important}.grass-lines{position:absolute;pointer-events:none;left:5%;right:5%;bottom:-140px;height:300px;border:3px solid #dfffe446;border-radius:50%;transform:scaleX(1.5)}.message{text-align:center;padding:14px;color:#ffec92;font-size:21px;font-weight:1000;min-height:61px}.below{padding:0 10px}.instruction{text-align:center;color:#bdd8e3;font-size:14px;margin:5px 0 15px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:460px;margin:0 auto}.controls button{background:linear-gradient(#1d4e66,#153c55);border:1px solid #397a8c;color:#f3ffff;border-radius:13px;min-height:65px;font-size:27px;font-weight:900;transition:transform .12s,background .12s}.controls button:hover:not(:disabled){transform:translateY(-2px);background:#226f82}.controls button:disabled{opacity:.44;cursor:not-allowed}.controls small{display:block;font-size:10px;letter-spacing:.08em}.shots{display:flex;flex-wrap:wrap;gap:25px;justify-content:center;margin:24px 0 15px}.shots>div{text-align:center}.shots span{color:#a8c9d4;font-size:11px;font-weight:900;letter-spacing:.08em}.shot-row{display:flex;gap:7px;margin-top:8px}.shot-dot{height:21px;width:21px;border:2px solid #53758a;border-radius:50%;background:#17364a}.shot-dot.goal{background:#51e7a8;border-color:#51e7a8}.shot-dot.miss{background:#ef7385;border-color:#ef7385}.restart{display:block;margin:10px auto;background:#5bf0b6;color:#053b38;font-weight:1000;letter-spacing:.07em;padding:14px 27px;border:0;border-radius:13px}.hint{text-align:center;color:#7899aa;font-size:12px}footer{text-align:center;font-size:10px;letter-spacing:.16em;color:#618599;margin:25px 0}@media(max-width:530px){#app{padding:10px}.scoreboard{height:76px;gap:14px}.emblem{font-size:22px}.team{gap:6px}.team strong{font-size:27px}.playfield{height:360px}.goal{width:88%;left:6%;height:42%;top:20%}.keeper{scale:.74;top:65%}.ball{width:43px;height:43px}.message{font-size:18px}.shots{gap:15px}.controls{gap:7px}.controls button{min-height:60px}.brand{font-size:13px}}

[hidden]{display:none!important}.menu-screen{margin:14px auto 20px}.menu-visual{position:relative;min-height:630px;border-radius:23px;background:linear-gradient(90deg,#08142888,#081428bb),url('assets/stadium-menu.webp') center/cover;border:1px solid #50788e;overflow:hidden;box-shadow:0 30px 90px #0007}.menu-shade{position:absolute;inset:0;background:linear-gradient(0deg,#04151df5,transparent 80%),linear-gradient(90deg,#061628bb,#05141f3d)}.menu-content{position:relative;z-index:1;min-height:630px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(24px,6vw,68px);max-width:630px;text-shadow:0 3px 15px #000c}.eyebrow{font-size:12px;letter-spacing:.24em;color:#baffec;font-weight:900}.menu-content h1{font-size:clamp(43px,7vw,78px);line-height:.98;letter-spacing:-.055em;margin:18px 0;text-shadow:0 6px 0 #062536,0 12px 25px #000}.menu-content h1 em{display:block;color:#86ff4b;font-style:normal}.menu-content p{font-weight:700;font-size:19px}.menu-actions{display:grid;width:min(390px,100%);gap:10px;margin:18px 0}.menu-actions button,.primary{border:1px solid #8be5ce;border-radius:13px;min-height:54px;padding:12px 20px;color:white;font-weight:1000;font-size:16px;background:linear-gradient(#204f70,#0b273b);box-shadow:0 5px 0 #08141b;cursor:pointer}.menu-actions .primary,.primary{background:linear-gradient(#66f44e,#078e37);border-color:#9eff84}.menu-actions button:hover,.primary:hover{filter:brightness(1.15)}.menu-settings{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.menu-settings label{font-size:10px;font-weight:900;letter-spacing:.08em;color:#b7d8e6}.menu-settings select{display:block;margin-top:5px;background:#09223be8;border:1px solid #5c859c;border-radius:9px;color:white;padding:10px;font-weight:900}.menu-content small{color:#c0dfed}.match-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;font-size:12px;font-weight:900;color:#a8f5d6}.match-actions button{padding:9px 13px;border:1px solid #3b748a;border-radius:10px;color:#fff;background:#123b50}.playfield{background:linear-gradient(#0a233b88,#0a233b66),url('assets/stadium-match.webp') center center/cover}.goal-flash{position:absolute;inset:0;pointer-events:none;z-index:10;opacity:0;background:radial-gradient(circle,#fff7,transparent 70%)}.goal-flash.active{animation:flash .6s ease-out}@keyframes flash{0%{opacity:.9}100%{opacity:0}}.bottom-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.restart.muted{background:#244558;color:white}.final-panel{display:flex;gap:20px;align-items:center;max-width:680px;margin:18px auto;padding:15px;border:1px solid #54718a;border-radius:18px;background:#112b42}.final-panel img{width:130px;height:150px;object-fit:cover;border-radius:12px}.final-panel h2{color:#caff71;margin:0 0 8px}.final-panel p{color:#d4e9ef}.final-panel button{min-height:42px;font-size:13px}.ball.gold{background:radial-gradient(circle at 28% 22%,#ffffc3,#e9b834 60%,#89590a)}.ball.blue{background:radial-gradient(circle at 28% 22%,#ffffff,#55c1ef 60%,#134b9b)}.keeper.blue .keeper-body{background:linear-gradient(#38b7ff,#064ab6)}.keeper.yellow .keeper-body{background:linear-gradient(#fff28b,#ffbd00)}.keeper.red .keeper-body{background:linear-gradient(#ff7c7c,#c11136)}.message{min-height:64px}@media(max-width:550px){.menu-visual,.menu-content{min-height:660px}.menu-content{padding:24px}.menu-content h1{font-size:49px}.final-panel img{width:90px;height:120px}.match-actions{font-size:10px}.playfield{height:360px}}