/* Only additive keeper-mode controls and the opt-in arena. */
.penalty-mode-choice{margin:24px 0;padding:22px;border:1px solid #86ad675e;border-radius:20px;background:radial-gradient(ellipse at right top,#355c3680,transparent 80%),#123329;min-width:0}
.penalty-mode-choice h2{font-size:1.45rem;line-height:1.18;margin-top:8px;color:#f0f8e9;overflow-wrap:anywhere}
.penalty-mode-choice p{font-size:.8rem;line-height:1.6;color:#b8cbc7;margin-top:14px}
.penalty-mode-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.penalty-mode-buttons .penalty-button{min-width:0;width:100%;white-space:normal}
.penalty-manual-root{min-width:0}
.penalty-manual-badge{padding:8px 11px;border:1px solid #a7ce7860;border-radius:30px;background:#244835;font-size:.61rem;font-weight:900;color:var(--lime);letter-spacing:.07em}
.penalty-manual-stadium{height:270px;--shot-x:0;--dive-x:0;--reach-x:0;--dive-distance:70px;--shot-distance:100px}
.penalty-manual-stadium .penalty-goal{top:16%;height:45%;left:16%;right:16%}
.penalty-manual-glove{position:absolute;bottom:8%;left:calc(50% - 24px);width:48px;height:48px;filter:drop-shadow(0 4px 4px #001b1c90);transform:translateX(calc(var(--dive-x)*var(--dive-distance))) rotate(calc(var(--dive-x)*-18deg));z-index:2}
.penalty-manual-glove svg{width:100%;height:100%;display:block}
.penalty-manual-zones{position:absolute;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));inset:5px 4px auto;text-align:center;color:#dbeaca9c;font-size:.55rem;font-weight:900;letter-spacing:.12em}
.penalty-manual-ball{position:absolute;left:calc(50% - 17px);bottom:13%;width:34px;height:34px;z-index:3;filter:drop-shadow(0 4px 4px #001d2570)}
.penalty-manual-ball svg{display:block;width:100%;height:100%}
.penalty-manual-stadium-label{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;font-size:.6rem;letter-spacing:.17em;font-weight:900;color:#dfefd4}
.penalty-manual-revealed .penalty-manual-glove{animation:penalty-manual-dive .55s ease-out both}
.penalty-manual-revealed .penalty-manual-ball{animation:penalty-manual-shot .65s ease-out both;transform:translate(calc(var(--shot-x)*var(--shot-distance)),-110px) scale(.65)}
.penalty-manual-missed .penalty-manual-ball{animation-name:penalty-manual-miss;transform:translate(calc(var(--shot-x)*var(--shot-distance)),-170px) scale(.5)}
.penalty-manual-recovery .penalty-manual-glove{animation:penalty-manual-recover .65s ease-out both;transform:translateX(calc(var(--reach-x)*var(--dive-distance))) rotate(calc(var(--reach-x)*-18deg))}
.penalty-manual-controls{max-width:760px;margin:24px auto 0;padding:22px 20px;border:1px solid #85a96b66;border-radius:20px;background:linear-gradient(135deg,#224733,#102e31);text-align:center;min-width:0}
.penalty-manual-controls h2{color:#eaf6de;font-size:1.55rem;letter-spacing:-.03em}
.penalty-manual-controls>p{font-size:.76rem;margin:12px auto 18px;max-width:490px}
.penalty-manual-directions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.penalty-manual-direction{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;min-width:0;min-height:115px;padding:16px 8px;background:#c6f36b;color:#143722;border:2px solid #d8fa98;border-radius:15px;box-shadow:0 7px 0 #07261b;transition:transform .15s}
.penalty-manual-direction:hover{transform:translateY(-2px)}
.penalty-manual-direction:active{transform:translateY(3px)}
.penalty-manual-direction>svg{width:31px;height:31px}
.penalty-manual-direction>strong{font-size:.9rem;line-height:1.2;overflow-wrap:anywhere}
.penalty-manual-direction>span{font-size:.61rem;line-height:1.25;color:#31513a}
.penalty-manual-direction:focus-visible{outline:3px solid white;outline-offset:4px}
.penalty-manual-controls .penalty-manual-chance{font-size:.7rem;color:#b8cbc7;margin:20px auto 0}
.penalty-manual-root .penalty-kick-result:focus,.penalty-manual-root .penalty-arena-heading:focus{outline:none}
@keyframes penalty-manual-dive{from{transform:translateX(0) rotate(0)}to{transform:translateX(calc(var(--dive-x)*var(--dive-distance))) rotate(calc(var(--dive-x)*-18deg))}}
@keyframes penalty-manual-shot{from{transform:translate(0,0) scale(1)}to{transform:translate(calc(var(--shot-x)*var(--shot-distance)),-110px) scale(.65)}}
@keyframes penalty-manual-miss{from{transform:translate(0,0) scale(1)}to{transform:translate(calc(var(--shot-x)*var(--shot-distance)),-170px) scale(.5)}}
@keyframes penalty-manual-recover{0%{transform:translateX(0) rotate(0)}45%{transform:translateX(calc(var(--dive-x)*var(--dive-distance))) rotate(calc(var(--dive-x)*-18deg))}100%{transform:translateX(calc(var(--reach-x)*var(--dive-distance))) rotate(calc(var(--reach-x)*-18deg))}}
@media(max-width:700px){.penalty-mode-choice{padding:20px}.penalty-manual-stadium{height:235px;--dive-distance:55px;--shot-distance:75px}.penalty-manual-badge{font-size:.56rem}}
@media(max-width:480px){.penalty-mode-buttons{grid-template-columns:minmax(0,1fr)}.penalty-mode-choice h2{font-size:1.25rem}.penalty-manual-controls{padding:19px 12px}.penalty-manual-directions{gap:8px}.penalty-manual-direction{min-height:106px;padding:12px 5px}.penalty-manual-direction>strong{font-size:.76rem}.penalty-manual-direction>span{font-size:.57rem}.penalty-manual-stadium{height:225px;--dive-distance:42px;--shot-distance:58px}.penalty-manual-glove{width:40px;height:40px;left:calc(50% - 20px)}.penalty-manual-root .penalty-actions .penalty-button{max-width:100%;width:100%}.penalty-manual-root .penalty-top{gap:10px}}
@media(prefers-reduced-motion:reduce){.penalty-manual-root .penalty-manual-ball,.penalty-manual-root .penalty-manual-glove{animation:none}.penalty-manual-direction{transition:none}}
.reduce-motion .penalty-manual-root .penalty-manual-ball,.reduce-motion .penalty-manual-root .penalty-manual-glove{animation:none}
.reduce-motion .penalty-manual-direction{transition:none}