:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #061d35; color: #f7f4e9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 50% 0%, #10466d, #061d35 55%); }
button { font: inherit; cursor: pointer; }
.game-shell { width: min(100%, 540px); min-height: 100dvh; margin: auto; padding: max(18px, env(safe-area-inset-top)) 20px 26px; display: flex; flex-direction: column; }
header { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 34px; }.wordmark { margin-right: auto; }
.wordmark { color: inherit; text-decoration: none; font-size: 13px; font-weight: 900; letter-spacing: .13em; } .wordmark span { color: #ffcc31; }
.text-button { color: #b9cee0; background: none; border: 0; font-size: 10px; font-weight: 800; letter-spacing: .08em; }.language-toggle { border: 1px solid #49738f; border-radius: 6px; padding: 4px 6px; }
.hud { display: grid; grid-template-columns: 1fr 1.25fr 1fr; margin: 22px 4px 16px; text-align: center; align-items: end; } .hud small { display: block; color: #9cc2dc; font-size: 9px; font-weight: 800; letter-spacing: .14em; } .hud strong { font-size: 20px; } .hud .score strong { font-size: 34px; line-height: 1; } .score i { font-style: normal; font-weight: 400; color: #5f89a6; }
.pitch { position: relative; isolation: isolate; flex: 1; min-height: 410px; overflow: hidden; border: 4px solid #eef2e4; border-radius: 18px 18px 62px 62px; background: url('assets/stadium-v1.png') center/cover no-repeat; box-shadow: 0 18px 38px #0008; touch-action: none; }
.pitch::after { content: ""; position: absolute; z-index: -1; left: 18%; bottom: -18%; width: 64%; height: 42%; border: 3px solid #ddecdb; border-radius: 50% 50% 0 0; }
.crowd,.net { display:none; }.goal { position:absolute; left:12%; top:24%; width:76%; height:22%; perspective:200px; }
.keeper { position:absolute; z-index:3; bottom:-6%; left:39%; width:22%; height:126%; background:url('assets/keeper-v1.png') center bottom/contain no-repeat; transition:transform .48s cubic-bezier(.15,.85,.15,1); filter:drop-shadow(0 3px 2px #0006); }.keeper span,.keeper b,.keeper i{display:none}
.spot { position:absolute; bottom:7%; left:calc(50% + 50px); width:10px; height:10px; border-radius:50%; background:#eef4df; box-shadow:0 1px 2px #0008; }.ball { position:absolute; z-index:6; bottom:calc(7% - 20px); left:calc(50% + 33px); width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 32% 25%,#fff 0 12%,#d9d9d9 13% 16%,#fff 17% 40%,#222 41% 49%,#fafafa 50%); box-shadow:0 8px 5px #062d1f90; transition:transform .62s cubic-bezier(.14,.86,.25,1),opacity .2s; }.player{position:absolute;z-index:4;bottom:1%;left:calc(50% - 78px);width:156px;height:236px;background:url('assets/player-v1.png') center bottom/contain no-repeat;pointer-events:none;transition:transform .4s}.pitch.charging .player{transform:translateX(-20px) rotate(-5deg)}.shot-result { position:absolute; z-index:7; top:48%; width:100%; text-align:center; font-size:42px; font-weight:1000; font-style:italic; letter-spacing:.06em; color:#fff; text-shadow:0 4px 1px #073015,0 0 18px #000; opacity:0; transform:scale(.7); pointer-events:none; }.shot-result.show { animation:result-pop .8s ease-out both; }.shot-result.saved{color:#ffdb54;text-shadow:0 4px 1px #6b3c00,0 0 18px #000;}@keyframes result-pop{0%{opacity:0;transform:scale(.7)}20%{opacity:1;transform:scale(1.16)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.95)}}.power-wrap{display:flex;align-items:center;gap:8px;color:#b9cee0;font-size:10px;font-weight:800;letter-spacing:.1em}.power-track{height:10px;flex:1;border:1px solid #56809b;border-radius:10px;overflow:hidden;background:#0b2743}.power-track div{height:100%;width:0;background:linear-gradient(90deg,#7ce36b,#ffdc45,#ff6347);transition:width .06s}
.aim { position: absolute; display: none; z-index: 2; width: 2px; transform-origin: 0 0; background: #ffdf5a; box-shadow: 0 0 7px #ffdf5a; }.message { position: absolute; z-index: 4; width: 100%; bottom: 8%; text-align: center; color: #fff; text-shadow: 0 2px 5px #05321f; font-size: 13px; font-weight: 900; letter-spacing: .08em; pointer-events: none; }.message.hide { opacity: 0; transition: opacity .2s; }
.controls { text-align: center; padding: 13px 0 0; }.controls p { margin: 0 0 10px; color: #b9cee0; font-size: 12px; }.shoot, .primary, .secondary { border-radius: 11px; border: 0; padding: 15px 20px; font-weight: 900; letter-spacing: .07em; }.shoot, .primary { width: 100%; color: #14263d; background: #ffcf35; box-shadow: 0 4px 0 #b98700; }.secondary { width: 100%; margin-top: 11px; color: #d9e7ef; background: #173b5d; }
dialog { width: min(92vw, 390px); padding: 0; border: 0; border-radius: 20px; color: #f7f4e9; background: #0d2e4e; box-shadow: 0 20px 80px #000b; } dialog::backdrop { background: #000a; }.result-card { padding: 30px; text-align: center; }.eyebrow { color: #ffcf35; font-size: 11px; font-weight: 900; letter-spacing: .16em; }.result-card h1 { margin: 7px 0; font-size: 78px; line-height: .9; }.result-card h1 small { font-size: 28px; color: #90b4cd; }.result-card h2 { font-size: 27px; }.result-card > p:not(.eyebrow) { color: #c5d9e7; line-height: 1.5; }.help-card { text-align: left; }.help-card .primary { margin-top: 12px; }
@media (min-height: 760px) { .pitch { min-height: 520px; } }