.game-art--penalty{--art-text: var(--sketch-ink);--art-muted: var(--sketch-muted);--art-focus: #456f73;--pen-you: #456f73;--pen-cpu: #7b5b43;--pen-good: #446a48;--pen-bad: #9a5442;--pen-ink: rgb(250 250 250 / .95);background-color:var(--sketch-paper);background-image:var(--sketch-grid);color:var(--art-text);container-type:inline-size}.game-art--penalty .pen-stage{position:relative;width:100%;container-type:inline-size}.game-art--penalty .pen-board{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden}.game-art--penalty .pen-court{display:block;width:100%;height:100%;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:-5px;touch-action:pan-y}.game-art--penalty .pen-board[data-phase=playing] .pen-court{touch-action:none}.game-art--penalty .pen-court:focus-visible{outline:3px solid var(--art-focus)}.game-art--penalty .pen-court:focus:not(:focus-visible),.game-art--penalty .pen-board[data-pointer=true] .pen-court:focus-visible{outline:none}.game-art--penalty .pen-confetti{pointer-events:none}.game-art--penalty .pen-keeper{transition:none}.game-art--penalty .pen-keeper[data-smooth=true]{transition:transform .2s ease-out}.game-art--penalty .pen-ball[data-result=saved]{animation:pen-deflect-l .6s cubic-bezier(.2,.7,.4,1) forwards}.game-art--penalty .pen-ball[data-result=saved][data-side=right]{animation-name:pen-deflect-r}@keyframes pen-deflect-l{to{transform:translate(-96px,58px)}}@keyframes pen-deflect-r{to{transform:translate(96px,58px)}}.game-art--penalty .pen-ball[data-result=goal]{animation:pen-drop .5s .14s ease-in forwards}@keyframes pen-drop{to{transform:translateY(24px)}}.game-art--penalty .pen-confetti rect{transform-box:fill-box;transform-origin:center;animation:pen-fall 1.8s ease-in var(--delay, 0s) both}@keyframes pen-fall{0%{opacity:1;transform:translate(0) rotate(0)}85%{opacity:1}to{opacity:0;transform:translate(var(--dx, 0px),560px) rotate(var(--rot, 360deg))}}.game-art--penalty [data-testid=penalty-reticle]{pointer-events:none}.game-art--penalty .pen-reticle-ring{fill:#6489931a;stroke:#456f73;stroke-width:2.4}.game-art--penalty .pen-reticle-ticks{fill:none;stroke:#456f73;stroke-width:2.4;stroke-linecap:round}.game-art--penalty .pen-reticle-dot{fill:#456f73}.game-art--penalty .pen-spread{fill:#6489931f;stroke:#456f73;stroke-width:1.6;stroke-dasharray:5 4}.game-art--penalty [data-testid=penalty-reticle][data-out=true] *{stroke:var(--pen-bad)}.game-art--penalty [data-testid=penalty-reticle][data-out=true] .pen-reticle-dot{fill:var(--pen-bad)}.game-art--penalty [data-testid=penalty-reticle][data-mode=dive] .pen-reticle-ring{stroke:var(--pen-cpu);fill:#bd765d24;stroke-dasharray:6 4}.game-art--penalty [data-testid=penalty-reticle][data-mode=dive] .pen-reticle-ticks{stroke:var(--pen-cpu)}.game-art--penalty [data-testid=penalty-reticle][data-mode=dive] .pen-reticle-dot{fill:var(--pen-cpu)}.game-art--penalty .pen-cue-zone{fill:#6489932b;stroke:#456f73;stroke-width:2;stroke-dasharray:8 6;pointer-events:none;animation:pen-zone 1s ease-in-out infinite}@keyframes pen-zone{50%{fill:#6489933d}}.game-art--penalty .pen-hud{position:absolute;top:1.6cqw;left:1.6cqw;right:1.6cqw;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;color:var(--art-text)}.game-art--penalty .pen-chip{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--pen-ink);border:1px solid rgb(61 64 58 / .4);border-radius:3px}.game-art--penalty .pen-side[data-active=true][data-side=player]{border-color:var(--pen-you);outline:1px solid var(--pen-you)}.game-art--penalty .pen-side[data-active=true][data-side=computer]{border-color:var(--pen-cpu);outline:1px solid var(--pen-cpu)}.game-art--penalty .pen-label{font-family:var(--font-sans);font-size:var(--art-fs-label);font-weight:500;line-height:1.35;letter-spacing:0;color:var(--art-muted);white-space:nowrap}.game-art--penalty .pen-side strong{font-family:var(--font-mono);font-size:var(--art-fs-score);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.game-art--penalty .pen-side[data-side=player] strong{color:var(--pen-you)}.game-art--penalty .pen-side[data-side=computer] strong{color:var(--pen-cpu)}.game-art--penalty .pen-round{flex-direction:column;gap:2px;text-align:center;white-space:nowrap}.game-art--penalty .pen-round>span{font-family:var(--font-sans);font-size:var(--art-fs-value);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.game-art--penalty .pen-round em{font-family:var(--font-sans);font-style:normal;font-size:var(--art-fs-body);font-weight:400;line-height:1.5;color:var(--art-text)}.game-art--penalty .pen-dots{display:inline-flex;gap:4px}.game-art--penalty .pen-dots i{position:relative;box-sizing:border-box;width:var(--pen-dot, 12px);height:var(--pen-dot, 12px);border:1.5px solid rgb(61 64 58 / .4);border-radius:50%}.game-art--penalty .pen-dots[data-side=player]{--team: var(--pen-you)}.game-art--penalty .pen-dots[data-side=computer]{--team: var(--pen-cpu)}.game-art--penalty .pen-dots i[data-k=goal]{background:var(--team);border-color:var(--team)}.game-art--penalty .pen-dots i[data-k=miss]{border-color:var(--pen-bad)}.game-art--penalty .pen-dots i[data-k=miss]:before,.game-art--penalty .pen-dots i[data-k=miss]:after{content:"";position:absolute;inset:50% -1px auto;height:1.5px;background:var(--pen-bad);transform:rotate(45deg)}.game-art--penalty .pen-dots i[data-k=miss]:after{transform:rotate(-45deg)}.game-art--penalty .pen-cue,.game-art--penalty .pen-out{position:absolute;top:7.4cqw;left:50%;transform:translate(-50%);display:flex;align-items:baseline;gap:8px;padding:4px 16px;background:var(--pen-ink);border:1px solid var(--pen-you);border-radius:3px;font-family:var(--font-sans);font-size:var(--art-fs-body);font-weight:400;line-height:1.5;white-space:nowrap;pointer-events:none}.game-art--penalty .pen-cue span{color:var(--art-muted)}.game-art--penalty .pen-cue strong{font-weight:600;color:var(--art-text)}.game-art--penalty .pen-out{border-color:var(--pen-bad);color:var(--pen-bad)}.game-art--penalty .pen-banner{position:absolute;top:6.4cqw;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 24px 6px;background:var(--pen-ink);border:2px solid var(--pen-you);border-radius:3px;font-family:var(--font-sans);text-align:center;white-space:nowrap;pointer-events:none;animation:pen-banner 2.6s ease-out both}.game-art--penalty .pen-banner strong{font-size:var(--art-fs-title);font-weight:600;line-height:1.2;letter-spacing:0;color:var(--pen-you)}.game-art--penalty .pen-banner span{font-size:var(--art-fs-body);font-weight:400;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--art-muted)}.game-art--penalty .pen-banner[data-tone=computer]{border-color:var(--pen-cpu)}.game-art--penalty .pen-banner[data-tone=computer] strong{color:var(--pen-cpu)}.game-art--penalty .pen-banner[data-tone=bad]{border-color:var(--pen-bad)}.game-art--penalty .pen-banner[data-tone=bad] strong{color:var(--pen-bad)}.game-art--penalty .pen-board[data-phase=over] .pen-banner{animation-duration:1.4s}@keyframes pen-banner{0%{opacity:0;transform:translate(-50%,-14px) scale(.8)}10%{opacity:1;transform:translate(-50%) scale(1.08)}18%{transform:translate(-50%) scale(1)}78%{opacity:1}to{opacity:0;transform:translate(-50%,-4px)}}.game-art--penalty .pen-gauge{position:absolute;right:2cqw;top:22%;height:46%;padding:8px 8px 6px;background:var(--pen-ink);border:1px solid rgb(61 64 58 / .4);border-radius:3px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;opacity:.7;transition:opacity .2s}.game-art--penalty .pen-gauge[data-live=true]{opacity:1}.game-art--penalty .pen-gauge-label{font-family:var(--font-sans);font-size:var(--art-fs-label);font-weight:500;line-height:1.35;color:var(--art-muted);white-space:nowrap}.game-art--penalty .pen-gauge-track{position:relative;flex:1;width:18px;overflow:hidden;background:#fafafa;border:1px solid rgb(61 64 58 / .4);border-radius:3px}.game-art--penalty .pen-gauge-zone{position:absolute;left:0;right:0;background:#dce6d9;border-block:1.5px solid var(--pen-good)}.game-art--penalty .pen-gauge-fill{position:absolute;left:0;right:0;bottom:0;background:var(--pen-you);border-radius:3px}.game-art--penalty .pen-gauge[data-zone=true][data-live=true] .pen-gauge-fill{background:var(--pen-good)}.game-art--penalty .pen-gauge output{font-family:var(--font-mono);font-size:var(--art-fs-label);font-weight:500;line-height:1.35;color:var(--art-text);font-variant-numeric:tabular-nums}.game-art--penalty .pen-status{position:absolute;left:1.4cqw;bottom:1.4cqw;max-width:33cqw;padding:4px 12px;border-radius:3px;background:var(--pen-ink);border:1px solid rgb(61 64 58 / .4);color:var(--art-text);font-family:var(--font-sans);font-size:var(--art-fs-body);font-weight:400;line-height:1.5;text-wrap:balance;pointer-events:none}.game-art--penalty .pen-stage:has(.pen-over) .pen-status{opacity:0}.game-art--penalty .pen-cta{position:absolute;right:1.6cqw;bottom:1.4cqw;min-height:40px;padding:8px 24px;border:0;border-radius:3px;background:var(--pen-you);color:#fafafa;font-family:var(--font-sans);font-size:var(--art-fs-action);font-weight:600;line-height:1.2;box-shadow:none;animation:pen-cta 1.2s ease-in-out infinite}.game-art--penalty .pen-cta:hover{background:#6d7464}@keyframes pen-cta{50%{background:#6d7464}}.game-art--penalty .pen-ready,.game-art--penalty .pen-over{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-52%);width:min(86%,420px);padding:20px 24px 22px;text-align:center;background:var(--sketch-paper);border:1px solid #3d403a;border-radius:3px;outline:100vmax solid rgb(2 9 6 / .45);animation:pen-panel .4s cubic-bezier(.2,1,.3,1)}.game-art--penalty .pen-over{animation:pen-panel .45s cubic-bezier(.2,1,.3,1) 1.3s both}@keyframes pen-panel{0%{opacity:0;transform:translate(-50%,-40%) scale(.92)}}.game-art--penalty .pen-ready h2,.game-art--penalty .pen-over h2{margin:0;font-family:var(--font-sans);font-size:var(--art-fs-title);font-weight:600;line-height:1.2;letter-spacing:0;color:var(--art-text)}.game-art--penalty .pen-ready p{margin:8px 0 16px;font-family:var(--font-sans);font-size:var(--art-fs-body);font-weight:400;line-height:1.5;color:var(--art-text)}.game-art--penalty .pen-over-score{display:flex;justify-content:center;align-items:baseline;gap:12px;margin:4px 0 8px;font-family:var(--font-mono);font-size:var(--art-fs-display);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.game-art--penalty .pen-over-score i{font-style:normal;color:var(--art-muted)}.game-art--penalty .pen-over-score [data-side=player]{color:var(--pen-you)}.game-art--penalty .pen-over-score [data-side=computer]{color:var(--pen-cpu)}.game-art--penalty .pen-over dl{display:grid;gap:8px;margin:0 0 16px}.game-art--penalty .pen-over dl>div{display:flex;justify-content:center;align-items:center;gap:12px}.game-art--penalty .pen-over dt{min-width:56px;text-align:right;font-family:var(--font-sans);font-size:var(--art-fs-label);font-weight:500;line-height:1.35;color:var(--art-muted)}.game-art--penalty .pen-over dd{--pen-dot: 16px;margin:0;min-width:108px;text-align:left;font-size:var(--art-fs-value);line-height:1}.game-art--penalty .pen-ready button,.game-art--penalty .pen-over button{min-height:40px;padding:8px 24px;border:0;border-radius:3px;background:var(--pen-you);color:#fafafa;font-family:var(--font-sans);font-size:var(--art-fs-action);font-weight:600;line-height:1.2;cursor:pointer}.game-art--penalty .pen-ready button:hover,.game-art--penalty .pen-over button:hover{background:#6d7464}.game-art--penalty .pen-ready button:disabled{opacity:.6;cursor:default}.game-art--penalty .pen-ready button:focus-visible,.game-art--penalty .pen-over button:focus-visible,.game-art--penalty .pen-cta:focus-visible{outline:3px solid var(--art-focus);outline-offset:3px}.game-art--penalty .pen-paused{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:8px 24px;min-height:44px;border-radius:3px;background:var(--pen-you);color:#fafafa;border:1px solid #3d403a;font-family:var(--font-sans);font-size:var(--art-fs-action);font-weight:600;line-height:1.2;letter-spacing:0;cursor:pointer}@media(max-width:520px){.game-art--penalty .pen-cue{display:none}.game-art--penalty .pen-gauge{padding:6px 4px}.game-art--penalty .pen-chip{padding:4px 8px;gap:6px;--pen-dot: 8px}.game-art--penalty .pen-hud{gap:6px}.game-art--penalty .pen-round em,.game-art--penalty .pen-label{display:none}.game-art--penalty .pen-banner{top:13cqw}.game-art--penalty .pen-status{display:block;position:static;max-width:none;margin-top:.6rem;padding:0;border:0;background:none;text-align:center}.game-art--penalty .pen-gauge-label{display:none}.game-art--penalty .pen-gauge{top:26%;height:40%}.game-art--penalty .pen-cta{padding:4px 14px}.game-art--penalty .pen-ready,.game-art--penalty .pen-over{padding:10px 16px 12px}.game-art--penalty .pen-over-score{margin:0}.game-art--penalty .pen-over dl{margin-bottom:8px}.game-art--penalty .pen-ready p{display:none}.game-art--penalty .pen-ready h2{margin-bottom:10px}.game-art--penalty .pen-banner span{display:none}}@media(max-width:360px){.game-art--penalty .pen-round,.game-art--penalty .pen-over dl{display:none}.game-art--penalty .pen-ready,.game-art--penalty .pen-over{padding:8px 12px 10px}}@media(prefers-reduced-motion:reduce){.game-art--penalty .pen-banner,.game-art--penalty .pen-confetti rect,.game-art--penalty .pen-ball,.game-art--penalty .pen-cue-zone,.game-art--penalty .pen-cta,.game-art--penalty .pen-ready,.game-art--penalty .pen-over{animation:none}.game-art--penalty .pen-keeper,.game-art--penalty .pen-gauge{transition:none}.game-art--penalty .pen-banner{opacity:1}}