.penalty-body { --machine:#132d39; --machine-edge:#06151c; --screen:#123746; }
.penalty-main { width:min(1320px,calc(100% - 32px)); padding-top:30px; }
.penalty-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:22px; }
.penalty-heading h1 { margin:0; font-size:clamp(46px,7vw,78px); line-height:.9; letter-spacing:-.065em; }
.penalty-heading>div>p:last-child { margin:16px 0 0; color:#657680; }
.penalty-heading__meta { display:flex; align-items:stretch; gap:8px; }
.penalty-heading__meta span,.penalty-heading__meta button { min-width:132px; padding:10px 12px; border:2px solid #9aabb2; background:#f8fbfc; color:#6b7980; font:800 9px/1.35 ui-monospace,monospace; text-transform:uppercase; }
.penalty-heading__meta strong { display:block; margin-top:3px; color:#102a36; font-size:11px; }.penalty-heading__meta button{min-width:auto;cursor:pointer;color:#173542;}
.penalty-layout { display:grid; grid-template-columns:minmax(0,2.35fr) minmax(280px,.65fr); gap:20px; align-items:start; }
.penalty-machine { overflow:hidden; border:7px solid var(--machine-edge); border-radius:6px; background:var(--machine); box-shadow:10px 12px 0 #b8c5ca,0 24px 55px rgba(16,35,43,.2); }
.machine-top { display:flex; align-items:center; gap:16px; height:46px; padding:0 18px; border-bottom:5px solid #06151c; background:#173d4b; color:#9eb5be; font:900 10px/1 ui-monospace,monospace; letter-spacing:.08em; }
.machine-top span { color:#ffd438; }.machine-top strong { flex:1; }.machine-top i { color:#ee5a50; font-style:normal; text-shadow:0 0 8px #ee5a50; }
.game-screen-wrap { position:relative; overflow:hidden; margin:13px 13px 0; border:6px solid #06151c; background:#08161c; }
.screen-hud { position:absolute; z-index:6; inset:0 0 auto; display:flex; justify-content:space-between; padding:8px 12px; color:#fff4ad; font:900 clamp(8px,1.2vw,12px)/1 ui-monospace,monospace; letter-spacing:.05em; text-shadow:2px 2px #173c48; pointer-events:none; }
#penalty-canvas { display:block; width:100%; aspect-ratio:16/9; background:#21aeb0; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; }
.screen-scanlines { position:absolute; z-index:7; inset:0; pointer-events:none; opacity:.16; background:linear-gradient(transparent 50%,rgba(0,0,0,.38) 50%); background-size:100% 4px; mix-blend-mode:multiply; }
.screen-message { position:absolute; z-index:8; left:50%; top:52%; min-width:min(82%,430px); padding:14px 18px; border:4px solid #071a23; background:#fff2a1; color:#102b35; text-align:center; transform:translate(-50%,-50%); box-shadow:7px 7px 0 rgba(5,20,27,.6); }
.screen-message span { display:block; font:950 clamp(15px,2vw,23px)/1 ui-monospace,monospace; }.screen-message small{display:block;margin-top:7px;font:800 9px/1.4 ui-monospace,monospace;}.screen-message.goal{background:#61ebbc}.screen-message.miss{background:#ff766d}.screen-message[hidden]{display:none}
.shot-progress { display:flex; justify-content:center; gap:12px; padding:14px; border-top:4px solid #06151c; background:#102833; }
.shot-progress i { width:17px; height:17px; border:3px solid #07171e; border-radius:50%; background:#516b76; box-shadow:2px 2px 0 #07171e; }.shot-progress i.goal{background:#55dfa5}.shot-progress i.miss{background:#ef5d55}.shot-progress i.current{animation:progressBlink .7s steps(1) infinite;background:#ffd438}@keyframes progressBlink{50%{background:#fff}}
.machine-controls { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); gap:20px; padding:18px; border-top:5px solid #06151c; background:#1b4250; }
.mode-select { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.mode-button { position:relative; min-height:84px; padding:12px 10px 10px 47px; border:3px solid #071a23; background:#dce6e8; color:#17323c; text-align:left; cursor:pointer; box-shadow:4px 4px 0 #071a23; }
.mode-button>span { position:absolute; left:10px; top:13px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#ef5b53; color:#fff; font:900 12px/1 ui-monospace,monospace; box-shadow:0 4px 0 #992a2a; }.mode-button strong,.mode-button small{display:block}.mode-button strong{font:900 12px/1.2 ui-monospace,monospace;text-transform:uppercase}.mode-button small{margin-top:7px;color:#6c7c82;font-size:9px}.mode-button.active{background:#ffd438}.mode-button:disabled{opacity:.5;cursor:not-allowed}
.shoot-panel { display:grid; grid-template-columns:minmax(150px,1fr) auto; column-gap:15px; align-items:center; }
.power-readout { display:grid; grid-template-columns:auto 1fr 28px; gap:8px; align-items:center; color:#d9e9eb; font:900 9px/1 ui-monospace,monospace; }
.power-readout>div { height:15px; padding:3px; border:2px solid #06151c; background:#08202a; }.power-readout i{display:block;width:0;height:100%;background:#5ce1aa;box-shadow:none}.power-readout i.danger{background:#ef5b53}.power-readout b{color:#ffd438;font-size:11px}
.shoot-button { grid-column:2; grid-row:1/3; width:126px; height:126px; border:8px solid #071a23; border-radius:50%; background:#ef5b53; color:white; cursor:pointer; box-shadow:0 9px 0 #92232b,0 14px 0 #071a23; touch-action:none; user-select:none; }
.shoot-button span,.shoot-button strong,.shoot-button small{display:block;pointer-events:none}.shoot-button span{font:900 8px/1 ui-monospace,monospace}.shoot-button strong{margin:5px 0;font:950 22px/1 ui-monospace,monospace}.shoot-button small{font:800 8px/1 ui-monospace,monospace}.shoot-button.pressed{transform:translateY(7px);box-shadow:0 2px 0 #92232b,0 7px 0 #071a23}.shoot-button:disabled{cursor:not-allowed;filter:grayscale(.8);opacity:.48}
#control-hint { align-self:end; margin:8px 0 0; color:#b9cbd0; font-size:10px; line-height:1.4; }
.penalty-sidebar { display:grid; gap:14px; }
.score-card { padding:20px; border:3px solid #163541; background:#fff; box-shadow:6px 6px 0 #bdc9cd; }
.score-card .pixel-kicker { color:#1b7d74; }.shot-verdict strong{display:block;font:950 23px/1 ui-monospace,monospace}.shot-verdict span{display:block;min-height:42px;margin-top:8px;color:#6d7b81;font-size:12px;line-height:1.5}
.score-breakdown { display:grid; gap:4px; margin-top:16px; }.score-breakdown span{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #cbd5d9;color:#6e7c83;font:800 10px/1 ui-monospace,monospace}.score-breakdown span b{color:#17313b}.score-breakdown>strong{display:block;margin-top:10px;color:#148265;font:950 27px/1 ui-monospace,monospace;text-align:right}
.personal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.personal-stats span{padding:8px;background:#eef4f5;color:#738289;font:800 8px/1.3 ui-monospace,monospace;text-align:center;text-transform:uppercase}.personal-stats strong{display:block;margin-top:5px;color:#18333e;font-size:15px}
.leaderboard-tabs{display:flex;margin:-20px -20px 15px}.leaderboard-tabs button{flex:1;padding:11px;border:0;border-bottom:2px solid #cbd6da;background:#eef3f4;color:#6b7980;font:900 9px/1 ui-monospace,monospace;text-transform:uppercase;cursor:pointer}.leaderboard-tabs button.active{border-color:#f1c32e;background:#fff;color:#17333e}
.pixel-leaderboard{display:grid}.pixel-leaderboard span{display:grid;grid-template-columns:25px 1fr auto;gap:7px;padding:8px 0;border-bottom:1px dashed #d4dcdf;font:800 10px/1.2 ui-monospace,monospace}.pixel-leaderboard b{color:#b98c00}.pixel-leaderboard em{color:#198168;font-style:normal}
.penalty-rules { display:grid; grid-template-columns:.8fr 2.2fr; gap:30px; margin-top:38px; padding:30px; border:2px solid #173542; background:#fff; box-shadow:7px 7px 0 #bdc9cd; }.penalty-rules h2{margin:0;font-size:32px;line-height:1.05}.penalty-rules ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none}.penalty-rules li{padding-left:13px;border-left:4px solid #ffd438}.penalty-rules li>span{color:#17947c;font:900 11px/1 monospace}.penalty-rules li strong{display:block;margin:8px 0;font-size:14px}.penalty-rules li p{margin:0;color:#6b7a80;font-size:11px;line-height:1.5}
.run-dialog { width:min(510px,calc(100% - 28px)); padding:7px; border:0; background:#071a23; box-shadow:12px 12px 0 rgba(5,20,27,.4); }.run-dialog::backdrop{background:rgba(5,19,26,.7);backdrop-filter:blur(3px)}.run-dialog__screen{padding:35px;border:3px solid #173946;background:#fff7ce;text-align:center}.run-dialog h2{margin:0;font:950 27px/1.1 ui-monospace,monospace}.run-dialog__screen>strong{display:block;margin:22px 0 10px;color:#168269;font:950 48px/1 ui-monospace,monospace}.run-dialog__screen>p:not(.pixel-kicker){color:#53676f}.run-dialog .dialog-actions{display:flex;justify-content:center;gap:8px;margin-top:24px}
@media(max-width:1050px){.penalty-layout{grid-template-columns:1fr}.penalty-sidebar{grid-template-columns:repeat(3,1fr)}.penalty-rules{grid-template-columns:1fr}.penalty-rules ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.penalty-heading{align-items:flex-start;flex-direction:column}.penalty-heading__meta{width:100%;flex-wrap:wrap}.machine-controls{grid-template-columns:1fr}.shoot-panel{grid-template-columns:1fr auto}.penalty-sidebar{grid-template-columns:1fr}.personal-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.penalty-main{width:min(100% - 16px,1320px)}.penalty-machine{border-width:4px}.game-screen-wrap{margin:6px 6px 0;border-width:4px}.machine-top{height:38px}.machine-controls{padding:13px}.mode-select{grid-template-columns:1fr}.shoot-button{width:102px;height:102px}.shoot-button strong{font-size:18px}.penalty-rules{padding:22px}.penalty-rules ol{grid-template-columns:1fr}.screen-message{min-width:88%}.penalty-heading__meta span{flex:1}.run-dialog__screen{padding:28px 18px}}