/* Penalties share the room shell. The pitch stays clear; choices live beside it. */
.penalty-heading{display:flex;align-items:center;gap:20px;min-height:58px;margin:0 0 10px}
.penalty-heading>div:first-child{flex:1}.penalty-heading h1{font-size:clamp(23px,3vw,34px);line-height:1.1;letter-spacing:-1px;margin:4px 0 0}
.penalty-match-score small{display:block;color:#9fb5c6;font-size:9px;letter-spacing:1px}.penalty-match-score b{font-size:23px}
.penalty-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.penalty-play{min-width:0;width:100%;max-width:1280px;margin-inline:auto}
.penalty-players{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.penalty-player{min-width:0;border:1px solid #426078;border-radius:18px;padding:10px 14px;background:linear-gradient(140deg,#20394e,#0e2031);line-height:1.2}.penalty-player.side-0{border-color:#925062}.penalty-player.side-1{border-color:#39806d}
.penalty-member{display:flex;align-items:center;gap:9px;min-height:30px}.penalty-member .game-mark{width:27px;height:27px}.penalty-member>div{flex:1;min-width:0}.penalty-member b{display:block;font-size:14px;line-height:1.1;overflow-wrap:anywhere}.penalty-member small{display:block;font-size:10px;color:#a4bbcc;margin-top:3px}.penalty-member .bot-tag{display:inline-block;margin:0 0 0 5px}.penalty-goals{font-size:28px}
.penalty-footballer{display:flex;align-items:center;gap:8px;margin-top:5px;min-height:32px}.penalty-footballer .football-face{width:30px;height:32px;flex:0 0 30px;border-radius:9px}.penalty-footballer>div{min-width:0}.penalty-footballer span{font-size:14px;font-weight:650;overflow-wrap:anywhere}.penalty-footballer small{display:block;color:#a6bfce;font-size:10px;margin-top:3px}.penalty-no-answer{color:#a2b7c7}
.penalty-pips{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}.penalty-pips i{width:6px;height:6px;border:1px solid #7491a2;border-radius:50%}.penalty-pips .scored{background:#65d7a9;border-color:#65d7a9}.penalty-pips .missed{background:#ed677e;border-color:#ed677e}
.penalty-arena{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:center}
.penalty-stage{position:relative;isolation:isolate;aspect-ratio:1.5;max-width:min(100%,calc((100svh - 350px)*1.5));width:100%;min-width:0;margin:auto;border-radius:22px;overflow:hidden;background:#0b1c2a;border:1px solid #47617677;box-shadow:0 18px 35px #0004}
.penalty-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.penalty-backdrop{z-index:0}.penalty-action{z-index:1}
.penalty-targets{position:absolute;inset:0;z-index:2;pointer-events:none}
/* Frosted rings contain both existing emblems; no generated club graphics. */
.penalty-target{position:absolute;pointer-events:auto;display:block;width:clamp(48px,14.5%,98px);aspect-ratio:1;height:auto;padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;color:#fff;font:inherit;transition:opacity .3s}
.penalty-target.corner-0,.penalty-target.corner-2{left:25%}.penalty-target.corner-1,.penalty-target.corner-3{left:75%}.penalty-target.corner-0,.penalty-target.corner-1{top:32%}.penalty-target.corner-2,.penalty-target.corner-3{top:58%}
.penalty-orb{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:1;border:2px solid rgba(var(--corner-rgb),.8);border-radius:50%;background:radial-gradient(ellipse at 30% 12%,#ffffff38,transparent 55%),radial-gradient(ellipse at 70% 80%,rgba(var(--corner-rgb),.36),transparent 72%),linear-gradient(140deg,#1e3446eb,#061521ef);box-shadow:inset 0 2px 3px #ffffff80,inset 0 -7px 12px #0008,0 6px 15px #0007,0 0 18px rgba(var(--corner-rgb),.18);transition:box-shadow .2s,border-color .2s}
.penalty-orb::before{content:"";position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(var(--corner-rgb),.38);border-top-color:#e8f7ff6b;box-shadow:inset 0 0 7px rgba(var(--corner-rgb),.17);pointer-events:none}
.penalty-orb::after{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(ellipse at 30% 30%,#dcefff24,transparent 57%);filter:blur(4px);pointer-events:none}
.penalty-orb-pair{position:absolute;inset:7%;border-radius:50%}
.penalty-orb-symbol{position:absolute;display:grid;place-items:center;width:55%;height:55%;filter:blur(.2px) drop-shadow(0 3px 3px #0009)}
.penalty-orb-symbol.symbol-0{left:6%;top:13%;transform:rotate(-15deg);opacity:.9}.penalty-orb-symbol.symbol-1{right:6%;bottom:12%;transform:rotate(12deg);filter:blur(.1px) drop-shadow(0 3px 3px #0009)}
.penalty-orb-symbol .axis-badge,.penalty-orb-symbol .axis-position,.penalty-orb-symbol .axis-flag{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;line-height:1;font-size:clamp(19px,2.8vw,34px)}
.penalty-orb-symbol .axis-badge img,.penalty-orb-symbol .axis-position img{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
.penalty-orb-symbol .badge-fallback{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(12px,1.5vw,19px)/1 system-ui;color:#e4efff;text-shadow:0 2px 4px #0009}

.penalty-target.selected .penalty-orb{border-color:#f5fbff;box-shadow:0 0 0 2px #eaf8ff,0 0 22px rgba(var(--corner-rgb),.45),inset 0 2px 3px #fff9,inset 0 -7px 12px #0008}
.penalty-target:hover:not(:disabled) .penalty-orb{border-color:#e8f7ff}.penalty-target:focus-visible,.penalty-corner:focus-visible{outline:3px solid #fff;outline-offset:4px}
.penalty-target:disabled{cursor:default;opacity:1}.penalty-target.not-picked{opacity:0;pointer-events:none}.is-playing .penalty-target{opacity:0}.is-reveal .penalty-target.picked{pointer-events:none}
.penalty-target-marks{position:absolute;z-index:3;display:flex;gap:2px;left:-4%;bottom:0;padding:3px;border:1px solid #bed7e855;border-radius:50px;background:#091624e8;box-shadow:0 3px 8px #0007}.penalty-target-marks .game-mark{width:22px;height:22px}
.penalty-decisions{padding:18px;border:1px solid #385267;border-radius:22px;background:linear-gradient(140deg,#192e40,#0b1b2b);min-width:0}
.penalty-decision-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}.penalty-decision-heading>b{font-size:17px;letter-spacing:-.3px}.penalty-decision-heading>span{font-size:10px;color:#a6bdcd}
.penalty-card-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.penalty-corner{position:relative;display:flex;flex-direction:column;gap:9px;min-width:0;min-height:137px;width:100%;padding:11px;border-radius:14px;border:1px solid rgba(var(--corner-rgb),.62);background:linear-gradient(140deg,var(--corner-top),var(--corner-bottom));box-shadow:inset 0 1px #def4ff26,0 4px 10px #0003;text-align:left;color:#f1f6ff;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.penalty-corner:hover:not(:disabled){border-color:var(--corner-accent)}.penalty-corner.selected{border-color:#fff;box-shadow:0 0 0 2px #effaff,0 0 18px rgba(var(--corner-rgb),.2)}.penalty-corner:disabled{cursor:default;opacity:1}
.penalty-card-top{display:flex;gap:7px;align-items:center}.penalty-level{color:var(--corner-accent);font-size:9px;font-weight:750;letter-spacing:.35px;text-transform:uppercase}.penalty-corner-location{font-size:9px;color:var(--corner-accent);margin-top:auto;line-height:1.3}
.penalty-room .difficulty-0{--corner-rgb:81,211,158;--corner-accent:#9be9c7;--corner-top:#174c3f;--corner-bottom:#0b2b23}
.penalty-room .difficulty-1{--corner-rgb:105,176,247;--corner-accent:#b4dcff;--corner-top:#21486b;--corner-bottom:#102941}
.penalty-room .difficulty-2{--corner-rgb:221,213,67;--corner-accent:#f0eca1;--corner-top:#4c4a19;--corner-bottom:#2d2c11}
.penalty-room .difficulty-3{--corner-rgb:255,103,127;--corner-accent:#ffb5c4;--corner-top:#602b3b;--corner-bottom:#341722}
.penalty-axes{display:flex;flex-direction:column;gap:7px}.penalty-axes>span{display:flex;align-items:center;gap:7px;min-width:0}.penalty-axes b{font-size:12px;line-height:1.25;font-weight:650;overflow-wrap:anywhere}.penalty-axes .axis-badge,.penalty-axes .axis-position,.penalty-axes .axis-flag{position:relative;display:grid;place-items:center;width:23px;height:23px;min-width:23px;min-height:0;flex:0 0 23px;border:0;background:transparent;box-shadow:none;border-radius:5px}.penalty-axes .axis-position img,.penalty-axes .axis-badge img{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:100%;max-height:100%;object-fit:contain}.penalty-axes .axis-flag{font-size:20px}.penalty-axes .badge-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:9px}
.penalty-revealed-choices{display:grid;gap:12px}.penalty-revealed-choice{padding:13px;border:1px solid rgba(var(--corner-rgb,120,155,180),.5);border-radius:14px;background:linear-gradient(140deg,rgba(var(--corner-rgb,120,155,180),.18),#0b1c2a)}.penalty-choice-title{display:flex;align-items:center;gap:7px;margin-bottom:10px}.penalty-choice-title .game-mark{width:23px;height:23px}.penalty-choice-title b{font-size:14px}.penalty-choice-title>span{margin-left:auto;font-size:11px;color:#c1d3df}.penalty-revealed-choice>small{display:block;margin-top:9px;font-size:10px;color:var(--corner-accent,#b8cbd8)}.penalty-revealed-choice>p{font-size:13px;color:#b8cbd8;margin:0}.penalty-revealed-choice .penalty-axes{gap:6px}.penalty-revealed-choice .penalty-axes b{font-size:14px}
.penalty-choice-body{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;margin:5px 0 12px}.penalty-result-conditions{display:flex;flex-direction:column;gap:4px;min-width:0}.penalty-result-conditions b{font-size:14px;line-height:1.3;overflow-wrap:anywhere}.penalty-result-conditions>span{font-size:13px;line-height:1;color:var(--corner-accent)}.penalty-revealed-choice .penalty-orb{width:88px}
.penalty-shot-caption{position:absolute;z-index:3;top:8%;left:20%;right:20%;text-align:center;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .25s;pointer-events:none;text-shadow:0 3px 12px #000}.penalty-shot-caption b{font-size:clamp(24px,3vw,42px);letter-spacing:4px}.has-impact .penalty-shot-caption,.is-finished .penalty-shot-caption{opacity:1;transform:none}
.penalty-controls{margin:16px 0 0;min-height:66px}.penalty-controls label{display:block;font-size:12px;line-height:1.35;color:#c7d8e4;margin-bottom:8px}.penalty-answer-row{display:flex;align-items:stretch;gap:8px}.penalty-combobox{flex:1;min-width:0;position:relative}.penalty-combobox input{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #67849a;border-radius:12px;background:#081725;color:#edf5ff;height:48px}.penalty-combobox .player-options{bottom:calc(100% + 6px);top:auto;max-height:260px;min-width:min(320px,calc(100vw - 60px));right:0;overflow:auto;z-index:12}.penalty-combobox .suggestion{width:100%}
.penalty-answer-row .button{padding:10px 13px;font-size:13px;min-height:48px;white-space:normal}.penalty-reveal-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px;line-height:1.3}.penalty-reveal-controls>span{font-size:13px;color:#c1d3df}.penalty-reveal-controls>div{display:flex;gap:8px;flex-wrap:wrap}.penalty-reveal-controls .button{font-size:12px;padding:10px 12px;min-height:42px}.penalty-animating .penalty-reveal-controls{visibility:hidden}.penalty-wait{font-size:13px;line-height:1.6;color:#bed1df;margin:0}.penalty-error{padding:0;margin:5px 0}.penalty-error:empty{display:none}
.penalty-community.room-community{display:flex;flex-direction:column;gap:12px;margin:0}.penalty-community .room-chat{padding:20px;border-radius:18px;margin:0;min-width:0}.penalty-community .room-chat h2{font-size:18px}.penalty-community .chat-heading{margin-bottom:12px}.penalty-community .chat-messages{min-height:100px;max-height:220px;overflow:auto}.penalty-community .chat-message{padding:10px}.penalty-community .chat-message p{font-size:14px;overflow-wrap:anywhere}.penalty-community .chat-message>div{flex-wrap:wrap;gap:3px}.penalty-community .chat-message small{font-size:11px}.penalty-community #chat-form{display:flex;gap:8px;margin-top:12px}.penalty-community #chat-form input{flex:1;font-size:16px;padding:10px;min-width:0}.penalty-community #chat-form button{min-height:40px;padding:10px 16px}.penalty-community .chat-error:empty{min-height:0;margin:0}.penalty-community .spectator-panel{padding:16px;border-radius:16px}.penalty-community .spectator-heading{flex-wrap:wrap;gap:5px}.penalty-community .spectator-heading h3{font-size:14px}.penalty-community .spectator-heading small{font-size:11px}.penalty-community .spectator-empty{min-height:0;padding:12px;font-size:12px}.penalty-community .event-log{margin:0;padding:16px;font-size:12px}
.penalty-room-code{border:0;background:transparent;color:#a7bfce;font:inherit;font-size:10px;font-weight:700;letter-spacing:1px;padding:3px 5px;margin-left:10px;border-radius:5px}.penalty-room-code:hover{color:#fff;background:#44627a44}.penalty-room-code:focus-visible{outline:2px solid #a9dcff}
body[data-penalty=true] .header{height:68px;min-height:68px;padding-top:12px;padding-bottom:12px}body[data-penalty=true] #app{padding-top:8px}body[data-penalty=true] .room-viewtop{margin:4px 0 8px;min-height:38px}body[data-penalty=true] .room-viewtop .button{min-height:38px;padding-top:8px;padding-bottom:8px}
/* Existing entry and drawn-round invitation. */
.penalty-intro-ball{width:70px;height:70px;object-fit:contain;display:block;margin:16px auto}.penalty-intro-rules{display:flex;gap:9px;margin:16px 0}.penalty-intro-rules span{padding:7px 10px;background:#26425766;border:1px solid #4e6b7e;border-radius:9px;font-size:12px}.penalty-intro small{display:block;font-size:11px;color:#91a9bb;margin-top:14px}.penalty-intro .button{width:100%}
.room-mode-picker{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}.room-mode-picker .button{gap:10px;display:flex;align-items:center}.room-mode-picker img{width:28px;height:28px;object-fit:contain}.room-mode-picker .selected{border-color:#ff7289;box-shadow:inset 0 0 0 1px #ff7289}.penalty-mode-card{display:flex;gap:25px;padding:30px;border:1px solid #436077;border-radius:24px;background:linear-gradient(140deg,#20394e,#0e2031)}.penalty-mode-card>img{width:95px;height:95px;object-fit:contain}.penalty-mode-card h2{font-size:28px}.penalty-mode-card p{color:#b4c6d6;line-height:1.7}.penalty-mode-card small{color:#89a2b7}
@media(max-width:1000px){.penalty-arena{grid-template-columns:minmax(0,1fr) 330px;gap:14px}.penalty-decisions{padding:14px}.penalty-corner{padding:9px;min-height:131px}.penalty-decision-heading>b{font-size:15px}.penalty-decision-heading>span{font-size:9px}}
@media(max-width:760px){.penalty-arena{grid-template-columns:minmax(0,1fr);gap:12px}.penalty-stage{max-width:570px}.penalty-decisions{padding:14px}.penalty-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.penalty-corner{min-height:0}.penalty-corner .penalty-axes{flex-direction:row;flex-wrap:wrap}.penalty-corner .penalty-axes>span{flex:1 1 100px}.penalty-revealed-choices{grid-template-columns:1fr 1fr}.penalty-revealed-choice{padding:10px}.penalty-revealed-choice .penalty-axes b{font-size:12px}.penalty-reveal-controls>div{justify-content:flex-end}.penalty-decision-heading>b{font-size:16px}}
@media(max-width:600px){body[data-penalty=true] .header{height:66px;min-height:66px;flex-wrap:nowrap}body[data-penalty=true] .header-right{width:auto}body[data-penalty=true] .header-right .dh-header-join{min-height:36px;padding:7px 9px}body[data-penalty=true] .room-context{display:none}body[data-penalty=true] .room-viewtop{justify-content:space-between;gap:8px}.penalty-heading{gap:12px;min-height:50px;margin-bottom:9px}.penalty-heading h1{font-size:23px}.penalty-heading .eyebrow{font-size:8px;letter-spacing:1px}.penalty-match-score small{font-size:7px}.penalty-match-score b{font-size:19px}.penalty-timer{padding:7px 11px}.penalty-timer b{font-size:23px}.penalty-timer small{font-size:7px}.penalty-room-code{font-size:8px;margin-left:5px;padding:3px 1px}
.penalty-players{gap:7px;margin-bottom:10px}.penalty-player{padding:9px;border-radius:13px}.penalty-member{gap:5px}.penalty-member .game-mark{width:20px;height:20px}.penalty-member b{font-size:12px}.penalty-member small{font-size:9px}.penalty-goals{font-size:23px}.penalty-footballer{min-height:35px;gap:5px}.penalty-footballer span{font-size:12px}.penalty-footballer small{font-size:9px}.penalty-footballer .football-face{width:27px;height:30px;flex-basis:27px}.penalty-stage{max-width:100%;border-radius:16px}.penalty-target{width:clamp(48px,14.5%,70px)}.penalty-target-marks .game-mark{width:15px;height:15px}.penalty-shot-caption b{font-size:25px;letter-spacing:2px}
.penalty-decisions{padding:12px;border-radius:16px}.penalty-card-grid{gap:8px}.penalty-corner{padding:9px;gap:7px;border-radius:11px}.penalty-card-top{gap:6px}.penalty-level{font-size:9px}.penalty-corner .penalty-axes{flex-direction:column;gap:5px}.penalty-corner .penalty-axes>span{flex:initial}.penalty-axes b{font-size:12px}.penalty-axes .axis-badge,.penalty-axes .axis-position,.penalty-axes .axis-flag{width:20px;height:20px;min-width:20px;flex-basis:20px}.penalty-corner-location{font-size:9px}.penalty-choice-title{flex-wrap:wrap;gap:5px}.penalty-choice-title b{font-size:12px}.penalty-choice-title>span{font-size:10px}.penalty-choice-title .game-mark{width:19px;height:19px}.penalty-revealed-choice>small{font-size:9px}
.penalty-controls{margin-top:12px;min-height:58px}.penalty-controls label{font-size:11px}.penalty-answer-row{gap:7px}.penalty-answer-row .button{font-size:12px;padding:9px 12px;min-height:46px}.penalty-combobox input{height:46px;padding:10px;font-size:16px}.penalty-community .room-chat{padding:16px}.penalty-community #chat-form{flex-direction:column}.penalty-room .round-roles{margin-top:12px}.penalty-mode-card{padding:20px;display:block}.penalty-mode-card>img{width:65px;height:65px}.room-mode-picker .button{font-size:12px;padding:12px;flex:1}}
@media(max-width:760px){.penalty-choice-body{display:flex;flex-direction:column;gap:11px;margin:12px 0;text-align:center}.penalty-revealed-choice .penalty-orb{width:76px}.penalty-result-conditions{width:100%}.penalty-result-conditions b{font-size:12px}.penalty-revealed-choice>small{text-align:center;line-height:1.4}.penalty-target-marks .game-mark{width:17px;height:17px}}
/* A brief camera kick follows the confirmed ball reaching the net, only for goals. */
.penalty-stage.goal-impact{animation:penalty-goal-shake .65s ease-out both;box-shadow:0 0 0 1px #cbf7ef77,0 0 35px #80edda38,0 18px 35px #0004}
.goal-impact .penalty-shot-caption b{display:inline-block;animation:penalty-goal-title .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes penalty-goal-shake{0%{transform:scale(1)}12%{transform:translate3d(-5px,3px,0) rotate(-.3deg) scale(1.015)}28%{transform:translate3d(4px,-2px,0) rotate(.2deg) scale(1.012)}45%{transform:translate3d(-3px,1px,0) rotate(-.12deg) scale(1.008)}65%{transform:translate3d(2px,-1px,0) scale(1.004)}83%{transform:translate3d(-1px,0,0)}100%{transform:none}}
@keyframes penalty-goal-title{0%{transform:scale(.88)}30%{transform:scale(1.16);text-shadow:0 0 24px #c5fff69e,0 3px 12px #000}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.penalty-room,.penalty-room *, .penalty-intro *{animation:none!important;transition:none!important}}

/* Reuse the grid clock; keep focused answers below it on compact screens. */
.penalty-controls{scroll-margin-top:110px}