*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0b1220;font-family:Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}#app{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}body.loading #hud,body.loading #menu,body.loading #help,body.loading #result,body.loading #touch{display:none!important}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;color:#fff}#scoreboard{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;padding:10px 22px;background:#080e1cb8;border:1px solid rgba(255,255,255,.12);border-radius:14px;font-size:26px;font-weight:700;letter-spacing:1px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#scoreboard .team{font-size:16px;letter-spacing:2px;opacity:.85}#scoreboard .team.home{color:#5aa9ff}#scoreboard .team.away{color:#ff6b6b}#scoreboard .score{font-size:30px;min-width:26px;text-align:center}#scoreboard .dash{opacity:.5}#scoreboard #timer{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2);font-variant-numeric:tabular-nums;font-size:22px;opacity:.9}#message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:64px;font-weight:800;letter-spacing:2px;text-shadow:0 4px 18px rgba(0,0,0,.6);line-height:1.15;transition:opacity .25s ease}#message .sub{display:block;font-size:24px;font-weight:600;opacity:.85;margin-top:10px}#message.hidden{opacity:0}#touch{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#touch.hidden{display:none}#stick{position:absolute;left:26px;bottom:80px;width:140px;height:140px;border-radius:50%;background:#ffffff1a;border:2px solid rgba(255,255,255,.25);pointer-events:auto;touch-action:none}#knob{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;background:#ffffff8c;border:2px solid rgba(255,255,255,.8);transform:translate(-50%,-50%)}#shoot-btn{position:absolute;right:30px;bottom:96px;width:104px;height:104px;border-radius:50%;background:#ffd16638;border:2px solid rgba(255,209,102,.85);color:#ffd166;font:700 18px/1 Segoe UI,system-ui,sans-serif;letter-spacing:1px;pointer-events:auto;touch-action:none}#shoot-btn:active{background:#ffd16673}body.menu #scoreboard,body.menu #touch{display:none}#menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8vh 0 12vh;pointer-events:none}#menu.hidden,#help.hidden{display:none}.menu-title{display:flex;flex-direction:column;align-items:center;line-height:.86;transform:rotate(-2deg)}.title-line{position:relative;display:block;font-weight:900;letter-spacing:4px;text-transform:uppercase;color:#0b1220;-webkit-text-stroke:2.5px #0b1220;filter:drop-shadow(0 3px 0 #06223a) drop-shadow(0 12px 20px rgba(0,0,0,.65))}.title-line:before{content:attr(data-text);position:absolute;left:0;top:0;-webkit-text-stroke:0;background:linear-gradient(180deg,#fff,#ffe08a 42%,#ffb43b 72%,#f0861d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.title-mini{font-size:clamp(36px,7.2vw,74px)}.title-soccer{font-size:clamp(65px,14.4vw,158px)}.menu-buttons{display:flex;flex-direction:column;gap:14px;align-items:center}.menu-btn{pointer-events:auto;min-width:240px;padding:16px 32px;font:900 23px/1 Segoe UI,system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#ffd166;background:linear-gradient(180deg,#1b2944,#0b1220);border:3px solid #0b1220;border-radius:16px;cursor:pointer;filter:drop-shadow(0 3px 0 #06223a) drop-shadow(0 8px 14px rgba(0,0,0,.55));transition:transform .08s ease,filter .12s ease}.menu-btn:hover{transform:translateY(-1px)}.menu-btn:active{transform:translateY(2px);filter:drop-shadow(0 1px 0 #06223a) drop-shadow(0 3px 6px rgba(0,0,0,.5))}.menu-btn.primary{color:#5a2e00;background:linear-gradient(180deg,#ffe08a,#ffb43b 60%,#f0861d)}#help{position:fixed;top:0;right:0;bottom:0;left:0;z-index:21;display:flex;align-items:center;justify-content:center;padding:24px}.help-panel{pointer-events:auto;max-width:540px;width:100%;padding:30px 34px 34px;background:linear-gradient(180deg,#1b2944,#0b1220);border:3px solid #0b1220;border-radius:20px;filter:drop-shadow(0 4px 0 #06223a) drop-shadow(0 16px 30px rgba(0,0,0,.6));color:#eaeef6;text-align:center}.help-heading{font-size:30px;font-weight:900;letter-spacing:2px;text-transform:uppercase;margin:24px 0 12px;background:linear-gradient(180deg,#fff,#ffe08a 45%,#ffb43b 75%,#f0861d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px #0b1220;paint-order:stroke fill;filter:drop-shadow(0 2px 0 #06223a)}.help-heading:first-child{margin-top:0}.help-text{font-size:16px;line-height:1.55;opacity:.92}.help-text .home{color:#5aa9ff;font-weight:700}.help-text strong{color:#ffd166}.help-controls{list-style:none;display:inline-flex;flex-direction:column;gap:9px;margin:2px auto 0;text-align:left}.ctrl-row{display:flex;align-items:baseline;gap:16px;font-size:16px}.ctrl-label{min-width:96px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#ffd166}.ctrl-val{color:#eaeef6}.touch-only,body.touch .keys-only{display:none}body.touch span.ctrl-val.touch-only{display:inline}#btn-back{margin-top:24px}#result{position:fixed;top:0;right:0;bottom:0;left:0;z-index:21;display:flex;align-items:center;justify-content:center;padding:24px}#result.hidden{display:none}.result-score{font-size:48px;font-weight:800;letter-spacing:5px;color:#fff;font-variant-numeric:tabular-nums;margin:6px 0 4px}.result-outcome{font-size:22px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#ffd166;margin-bottom:24px}body.gameover #scoreboard,body.gameover #touch{display:none}