.scoreboard-shell{position:relative}
#swapOverlay{position:absolute;inset:0;z-index:35;overflow:hidden;border-radius:inherit;background:linear-gradient(#00153066,#001530aa),var(--scoreboard-stadium,url('assets/hatto-stadium-scoreboard.webp')) center/cover;color:white;pointer-events:none}
#swapOverlay .swap-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:swap-intro 8s both}
#swapOverlay .swap-intro b{font:italic clamp(38px,9vw,84px)/1 Impact,'Arial Narrow',sans-serif;color:#ffe326;letter-spacing:.04em}
#swapOverlay .swap-intro small{font-weight:800;letter-spacing:.08em}
#swapOverlay .swap-players{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:36px 12px 10px;animation:swap-panel 8s both}
#swapOverlay header{position:absolute;top:12px;left:0;right:0;text-align:center;color:#ffe326;font-size:11px;font-weight:800;letter-spacing:.06em}
#swapOverlay .swap-person{display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:minmax(0,1fr) 58px;min-width:0;min-height:0;animation:swap-out 8s both}
#swapOverlay .incoming{grid-template-columns:96px minmax(0,1fr);animation-name:swap-in}
#swapOverlay img{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center bottom}
#swapOverlay .incoming img{grid-column:2}
#swapOverlay .swap-status{grid-column:2;grid-row:1;align-self:center;justify-self:center;font:italic 44px/1 Impact,'Arial Narrow',sans-serif;transform:rotate(-20deg) skewX(-8deg);color:#ff6072;text-shadow:0 3px 8px #001329;white-space:nowrap}
#swapOverlay .incoming .swap-status{grid-column:1;color:#59ee9e}
#swapOverlay .swap-name{grid-column:1/-1;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px;background:linear-gradient(120deg,#09509a,#04234b);border-top:2px solid #2886ca;border-radius:0 0 9px 9px;min-width:0}
#swapOverlay .swap-name>span{color:#ffe326;text-align:center;font:28px/1 Impact,sans-serif;border-right:1px solid #ffe326}
#swapOverlay .swap-name div{min-width:0;text-align:left}
#swapOverlay .swap-name small{display:block;color:#c2dcf1;font-size:11px}
#swapOverlay .swap-name strong{display:block;font-size:17px;line-height:1.1;overflow-wrap:anywhere}
@keyframes swap-intro{0%{opacity:0;transform:translateX(-15%)}9%,24%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateX(15%)}}
@keyframes swap-panel{0%,28%{opacity:0}38%,87%{opacity:1}100%{opacity:0}}
@keyframes swap-out{0%,32%{opacity:0;translate:-25px 0}43%,85%{opacity:1;translate:0}100%{opacity:0}}
@keyframes swap-in{0%,34%{opacity:0;translate:25px 0}45%,85%{opacity:1;translate:0}100%{opacity:0}}
@media(max-width:600px){#swapOverlay .swap-players{gap:8px;padding:32px 6px 8px}#swapOverlay .swap-person{grid-template-columns:minmax(0,1fr) 60px;grid-template-rows:minmax(0,1fr) 54px}#swapOverlay .incoming{grid-template-columns:50px minmax(0,1fr)}#swapOverlay .swap-status{font-size:26px}#swapOverlay .swap-name{grid-template-columns:24px minmax(0,1fr);gap:5px;padding:5px}#swapOverlay .swap-name>span{font-size:22px}#swapOverlay .swap-name strong{font-size:13px}#swapOverlay .swap-name small{font-size:10px}}
@media(prefers-reduced-motion:reduce){#swapOverlay .swap-intro{transform:none!important}#swapOverlay .swap-person{translate:none!important}}
/* Photo and caption form one centred unit without stealing portrait space. */
#swapOverlay,#swapOverlay *{box-sizing:border-box}
#swapOverlay{container-type:size}
#swapOverlay .swap-person{overflow:visible}
#swapOverlay .swap-name{min-height:0}
#swapOverlay .swap-name strong{font-size:clamp(11px,3.5cqw,17px)}
#swapOverlay .swap-intro b{font-size:min(14cqw,32cqh,84px)}
#swapOverlay .swap-players{padding-top:12px}
#swapOverlay .swap-person,#swapOverlay .incoming{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 58px}
#swapOverlay img,#swapOverlay .incoming img{grid-column:1;grid-row:1}
#swapOverlay .swap-status,#swapOverlay .incoming .swap-status{position:absolute;top:35%;right:0;grid-column:auto;grid-row:auto;font-size:38px;z-index:4}
#swapOverlay .incoming .swap-status{right:auto;left:0}
#swapOverlay .swap-name{grid-column:1;grid-row:2;width:76%;max-width:220px;justify-self:center;box-sizing:border-box;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:7px 9px;border-top:2px solid #ffe326;border-radius:9px}
#swapOverlay .swap-name div{text-align:center}
@media(max-width:600px){#swapOverlay .swap-person,#swapOverlay .incoming{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 54px}#swapOverlay .swap-status,#swapOverlay .incoming .swap-status{font-size:24px}#swapOverlay .swap-name{width:94%;grid-template-columns:24px minmax(0,1fr);gap:5px;padding:6px}}