.penalty-page{height:100dvh;overflow:hidden;background:radial-gradient(ellipse at top,#153020,#051008 70%);color:#f0f8ec}.penalty-shell{height:100dvh;width:min(100%,520px);margin:auto;display:flex;flex-direction:column;padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px;background:linear-gradient(145deg,#102419,#07130c);font-family:Inter,Arial,sans-serif}.penalty-header{height:45px;flex:none;display:flex;align-items:center;justify-content:space-between}.penalty-header .soccer-brand-art{width:160px;height:45px}.penalty-score{padding:12px 14px 9px;border:1px solid #537545;border-radius:15px;background:linear-gradient(130deg,#1c3c28,#102a1b);flex:none}.penalty-mode{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}.penalty-mode>span{font-size:10px;font-weight:900;letter-spacing:1px;color:#edd58a}.penalty-mode small{font-size:8px;color:#b4cbb7}.penalty-teams{display:flex;align-items:center;justify-content:space-between;gap:10px}.penalty-teams>span{display:flex;align-items:center;gap:8px;font-size:11px}.penalty-teams>b{color:#fff3a2;font-size:16px}.team-flag{display:inline-block;width:21px;height:29px;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);flex:none}.brazil{background:#159345;position:relative}.brazil:before{content:'';position:absolute;width:12px;height:12px;background:#f7d948;top:7px;left:4px;transform:rotate(45deg)}.brazil:after{content:'';position:absolute;width:7px;height:7px;background:#184a94;border-radius:50%;top:10px;left:7px}.portugal{background:linear-gradient(90deg,#258147 40%,#d64036 40%)}.penalty-ladder{display:flex;justify-content:space-between;padding:0;margin:11px 0 0;list-style:none;position:relative}.penalty-ladder:before{content:'';height:2px;background:#54785a;position:absolute;top:6px;left:8%;right:8%}.penalty-ladder li{display:grid;justify-items:center;gap:5px;flex:1;z-index:1}.penalty-ladder span{width:13px;height:13px;border:2px solid #91b896;background:#14361f;border-radius:50%}.penalty-ladder b{font-size:11px;color:#a8bbaa}.penalty-ladder .complete span{background:#f2d274;border-color:#ffe8a6;box-shadow:0 0 12px #ffd74d55}.penalty-ladder .complete b{color:#f8dc91}.penalty-ladder .current span{border-color:#70f197;box-shadow:0 0 0 3px #4fe07616}.penalty-stage{position:relative;flex:1;min-height:180px;max-height:490px;overflow:hidden;border-radius:15px;border:1px solid #6ea064;background:#a2d8e7;box-shadow:0 8px 20px #0005;display:flex;align-items:center;justify-content:center}#penalty-canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:crosshair;outline-offset:-3px}.penalty-event{position:absolute;top:40%;left:0;right:0;pointer-events:none;text-align:center;opacity:0;transform:scale(.6);font-size:clamp(32px,8vw,48px);font-weight:900;color:#fff0a0;text-shadow:0 3px 0 #254b24,0 5px 15px #0006;transition:opacity .2s,transform .3s}.penalty-event.show{opacity:1;transform:scale(1)}.penalty-event.saved{color:#ffe4e2;text-shadow:0 3px 0 #8c3c24,0 5px 15px #0006}.penalty-shoot{position:absolute;bottom:12px;right:12px;border:1px solid #f9dfa0;border-radius:11px;background:linear-gradient(120deg,#efd285,#d8b145);color:#162210;font:900 12px Inter,Arial,sans-serif;padding:12px 18px;box-shadow:0 4px 12px #0005;cursor:pointer}.penalty-shoot span{font-size:16px;margin-left:8px}.penalty-shoot:disabled{opacity:.65;cursor:default}.penalty-status{min-height:29px;text-align:center;font-size:11px;line-height:1.4;color:#bfd0bb;margin:0;flex:none}.penalty-values{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:6px;flex:none}.penalty-values div{display:grid;gap:6px;text-align:center;padding:10px 4px;border:1px solid #38503a;border-radius:10px;background:#112a1a}.penalty-values span{font-size:7px;letter-spacing:.6px;color:#a3bea6}.penalty-values b{font-size:15px;color:#eacf82}.penalty-values div:nth-child(2) b{color:#57ef83}.penalty-actions{display:flex;gap:7px;flex:none}.penalty-actions button{flex:1;border:1px solid #3b6845;border-radius:8px;background:#14301e;padding:9px 5px;font:600 10px Inter,Arial,sans-serif;color:#c5ddc6;cursor:pointer}.penalty-actions button:disabled{opacity:.4}.penalty-bottom{flex:none;display:grid;gap:6px}.penalty-bottom>button{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 8px;border:1px solid #8ceaa1;border-radius:13px;background:linear-gradient(110deg,#53e879,#23c25d);color:#062312;font:900 12px Inter,Arial,sans-serif;cursor:pointer;box-shadow:0 0 15px #3bf36122}.penalty-bottom>button:disabled{background:#203727;color:#8ca292;border-color:#3b5b44;box-shadow:none;cursor:default}.penalty-bottom small{text-align:center;color:#9bb3a0;font-size:8px}.penalty-result-ball{display:grid;place-items:center;margin:12px auto}.penalty-register{display:block;margin-top:17px;font-size:12px;color:#dfcf98}.penalty-result.lost>strong{color:#ffb0a3}.penalty-page button:focus-visible,.penalty-page a:focus-visible{outline:2px solid #f8d478;outline-offset:3px}@media(min-width:700px){.penalty-shell{border-left:1px solid #3c593f;border-right:1px solid #3c593f;padding:12px 18px;gap:10px}.penalty-values span{font-size:9px}.penalty-values b{font-size:18px}}@media(max-height:700px){.penalty-shell{gap:5px;padding-top:4px}.penalty-header{height:34px}.penalty-header .soccer-brand-art{height:34px}.penalty-score{padding:8px 12px}.penalty-mode{margin-bottom:7px}.penalty-ladder{margin-top:8px}.penalty-status{font-size:10px;min-height:24px}.penalty-values div{padding:7px 3px;gap:3px}.penalty-actions button{padding:7px 4px}.penalty-bottom>button{padding:12px 7px}.penalty-shoot{padding:9px 13px}}@media(prefers-reduced-motion:reduce){.penalty-event{transition:none}}

@media(max-height:620px) and (orientation:portrait){.penalty-stage{min-height:110px}.penalty-score{padding:6px 10px}.penalty-mode{margin-bottom:5px}.penalty-status{min-height:22px;font-size:9px}.penalty-ladder{margin-top:6px}.penalty-ladder span{width:10px;height:10px}.penalty-ladder b{font-size:9px}.penalty-values div{padding:6px 3px}.penalty-values b{font-size:13px}.penalty-bottom>button{padding:10px 4px;font-size:10px}}
@media(orientation:landscape) and (max-height:600px){.penalty-page{height:auto;overflow:auto}.penalty-shell{height:auto;min-height:100dvh}.penalty-stage{flex:none;height:310px}}

/* Compact controls: collect with accessible rules and sound icons. */
.penalty-status{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.penalty-controls{display:grid;grid-template-columns:minmax(0,1fr) 48px 48px;gap:8px;align-items:center}
#penalty-collect{min-height:68px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px 6px;border:1px solid #8ceaa1;border-radius:13px;background:linear-gradient(110deg,#53e879,#23c25d);color:#062312;font:900 clamp(12px,3.8vw,18px) Inter,Arial,sans-serif;cursor:pointer;box-shadow:0 0 15px #3bf36122;white-space:nowrap}
#penalty-collect:disabled{background:#203727;color:#8ca292;border-color:#3b5b44;box-shadow:none;cursor:default}
.penalty-icon{display:grid;place-items:center;width:48px;height:48px;padding:10px;border:1px solid #3b6845;border-radius:12px;background:#10291a;color:#57ef83;cursor:pointer}
.penalty-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sound-muted,.muted .sound-waves{display:none}.muted .sound-muted{display:block}.penalty-icon.muted{color:#a3bea6}
@media(max-width:350px){.penalty-controls{grid-template-columns:minmax(0,1fr) 44px 44px;gap:6px}.penalty-icon{width:44px;height:44px;padding:9px}#penalty-collect{font-size:12px;min-height:64px}}

/* Real wallet status stays visible, including network errors. */
.real-game-wallet{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid #bc9c4e;border-radius:10px;background:#0d2417;font-size:11px;color:#bfd8c5;flex:none}
.real-game-wallet strong{color:#f5d77f;margin-left:5px}
.real-game-notice{margin:0;padding:3px 5px;font-size:11px;line-height:1.45;color:#f0e5bd;text-align:center;flex:none}
.real-game-retry{padding:8px;border-radius:9px;border:1px solid #d4b35d;background:#142c1b;color:#f8df95;cursor:pointer;flex:none}
.penalty-shell [hidden]{display:none!important}