.penalty-screen{position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:minmax(0,1fr) 285px;background:#162a21;color:#fff1cf;font-family:Arial,sans-serif}
.penalty-view{min-width:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#263e2c}
#penaltyCanvas{display:block;width:100%;height:auto;aspect-ratio:12/7;max-height:100%;outline:none;touch-action:none;border:0;image-rendering:auto}
.penalty-scoreboard{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:min(90%,540px);background:#21372bec;border:1px solid #beaa6e;border-radius:9px;padding:11px 16px;text-align:center;box-shadow:0 4px 12px #172a2355;pointer-events:none}
.penalty-scoreboard small{display:block;letter-spacing:2px;font-size:10px;color:#d2ba7e}.penalty-scoreboard strong{display:block;font-size:22px;margin:4px 0}.penalty-scoreboard>span{font-size:12px}
#penaltyHistory{display:flex;gap:18px;justify-content:center;margin-top:7px;font-size:12px}#penaltyHistory b{display:inline-block;width:13px;margin-left:2px}#penaltyHistory .goal{color:#b3df91}#penaltyHistory .miss{color:#ff9a79}#penaltyHistory .pending{color:#abbaa0}
#penaltyResult{position:absolute;left:0;right:0;top:42%;text-align:center;font:bold 40px Georgia,serif;color:#fff0ad;text-shadow:0 3px 0 #1d3528,2px 0 0 #1d3528;pointer-events:none}
.penalty-controls{padding:20px 18px;border-left:2px solid #937447;overflow-y:auto;background:linear-gradient(#302b1e,#1d3025)}
#penaltyOpponentPortrait{float:left;width:55px;height:76px;margin:0 12px 5px 0;overflow:hidden}.penalty-controls h2{font-size:20px;margin:12px 0 6px}.penalty-controls h3{clear:both;margin:16px 0 5px;font-size:21px;color:#ffe39a}.penalty-controls p{font-size:13px;line-height:1.5;margin:7px 0}#penaltyTalk{min-height:55px;color:#ead3a5}#penaltyHelp{min-height:57px}
.penalty-meter{margin:12px 0;font-size:13px}.penalty-meter>div{height:16px;border:1px solid #a59664;border-radius:4px;overflow:hidden;background:linear-gradient(to right,#243b2c 45%,#486d3a 45%,#486d3a 80%,#64472e 80%);margin:7px 0}.penalty-meter i{display:block;height:100%;width:0;background:#efd16b;opacity:.86}.penalty-meter small{font-size:10px;color:#c5c7aa}
.penalty-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:190px;margin:12px auto}.penalty-pad button{padding:5px;min-height:35px}.penalty-pad button:first-child{grid-column:2}.penalty-pad button:nth-child(2){grid-column:1}.penalty-pad button:last-child{grid-column:2}
.penalty-controls button{touch-action:none}.penalty-controls button:focus-visible{outline:3px solid #ffe298;outline-offset:2px}.penalty-curve{display:block;font-size:12px;text-align:center;margin:12px 0}.penalty-curve input{display:block;width:100%;accent-color:#d3b567}.penalty-curve span{font-size:11px;color:#d2c3a4}#penaltyKick,#penaltyNext{width:100%;min-height:48px;font-size:15px}.penalty-actions{display:flex;gap:7px;margin-top:12px}.penalty-actions button{flex:1;font-size:12px}#penaltyQuit{padding:10px;background:#5c3226;border:1px solid #d7a578;border-radius:6px;margin-top:12px}#penaltyQuit button{width:100%;margin-top:6px}
.playing-penalties{overflow:hidden}.playing-penalties .toasts{display:none}
@media(max-width:750px){.penalty-screen{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.penalty-view{height:auto;min-height:0;align-self:start}#penaltyCanvas{width:100%;height:auto;max-height:48dvh}.penalty-scoreboard{top:5px;padding:5px 9px;border-radius:5px}.penalty-scoreboard small{font-size:8px}.penalty-scoreboard strong{font-size:15px;margin:2px}.penalty-scoreboard>span,#penaltyHistory{font-size:10px}#penaltyHistory{margin-top:3px}#penaltyResult{font-size:25px;top:47%}.penalty-controls{padding:10px 14px;border-left:0;border-top:2px solid #937447;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;align-content:start}.penalty-controls h2{font-size:16px;margin:4px 0}#penaltyOpponentPortrait{display:none}#penaltyTalk{grid-column:2;grid-row:1 / 3;font-size:11px;min-height:0;margin:0}.penalty-controls h3{margin:0;font-size:17px}#penaltyHelp{grid-column:1 / 3;font-size:11px;min-height:0;margin:3px 0}.penalty-pad{width:155px;margin:0;grid-column:1;grid-row:5 / 7}.penalty-pad button{min-height:32px}.penalty-meter{margin:3px 0;grid-column:2;font-size:11px}.penalty-meter small{font-size:9px}.penalty-curve{margin:3px 0;grid-column:2}.penalty-actions{grid-column:1 / 3;margin:0}#penaltyQuit{grid-column:1 / 3}#penaltyKick,#penaltyNext{grid-column:1 / 3;min-height:40px}}
@media(max-width:750px){.penalty-view{flex-direction:column}.penalty-scoreboard{position:static;transform:none;order:-1;width:100%;border-radius:0;flex-shrink:0}#penaltyCanvas{flex-shrink:0}#penaltyResult{top:auto;bottom:30%}}