/* Penalty Shootout theme */
.pitch { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 8.4; max-height: 380px; width: 100%;
  background: repeating-linear-gradient(90deg, #2F8F3E 0 12.5%, #2A8238 12.5% 25%); }
.pitch::after { content: ""; position: absolute; left: 50%; bottom: -60%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border: 3px solid rgba(255,255,255,0.55); border-radius: 50%; pointer-events: none; }
.goal { position: absolute; left: 50%; top: 8%; width: 64%; aspect-ratio: 420 / 190; transform: translateX(-50%); }
.goal svg.frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.zones { position: absolute; left: 4.3%; right: 4.3%; top: 4%; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; z-index: 3; }
.zones button { border: 2px dashed rgba(255,255,255,0.8); border-radius: 10px; background: rgba(255,255,255,0.12); color: #fff; font: 700 14px var(--font-body); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, background .15s ease; }
.aiming .zones button { opacity: 1; pointer-events: auto; }
.zones button:hover, .zones button:focus-visible { background: rgba(255,255,255,0.3); }
.keeper { position: absolute; left: 50%; bottom: 0; width: 17%; aspect-ratio: 60 / 90; transform: translateX(-50%); transition: transform .45s cubic-bezier(.2,.9,.3,1); z-index: 2; }
.keeper svg { width: 100%; height: 100%; display: block; }
.ball { position: absolute; left: 50%; bottom: 6%; width: 7%; aspect-ratio: 1; transform: translate(-50%, 0); transition: left .5s cubic-bezier(.15,.8,.3,1), bottom .5s cubic-bezier(.15,.8,.3,1), width .5s ease; z-index: 4; }
.ball svg { width: 100%; height: 100%; display: block; }
.flash { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); padding: 10px 24px; border-radius: 999px; font: 800 clamp(22px, 4vw, 40px) var(--font-display); letter-spacing: -0.02em; color: #1C1C1E; background: var(--accent); opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 5; pointer-events: none; }
.flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.flash.saved { background: #FFFFFF; }
.aim-hint { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: 15px; background: rgba(0,0,0,0.35); padding: 6px 14px; border-radius: 999px; opacity: 0; transition: opacity .2s; z-index: 5; }
.aiming .aim-hint { opacity: 1; }

.kicks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.kick { height: 30px; border-radius: 8px; background: var(--sunken); display: grid; place-items: center; font: 700 13px var(--font-body); color: var(--muted); }
.kick.now { box-shadow: inset 0 0 0 2px var(--strand); color: var(--fg); }
.kick.scored { background: var(--good); color: var(--bg); }
.kick.missed { background: var(--bad); color: var(--bg); }
.score { font: 800 18px var(--font-body); }
.end { text-align: center; padding: 18px; }
.end .big { font: 800 clamp(40px, 7vw, 64px) var(--font-display); letter-spacing: -0.03em; margin: 0; }
@media (max-width: 480px) { .kicks { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pitch { aspect-ratio: 4 / 3; } .goal { width: 86%; } .keeper { width: 22%; } .ball { width: 9%; } }