/* Desktop uses one frame through entry, connection, toss, play and full time.
   Live scores are already in the board; a second scorebook must not resize it. */
@media(min-width:1025px){
 body{--game-layout-width:1100px;--desktop-board-height:clamp(700px,calc(100svh - 136px),800px)}
 body.match-started{--playing-board-height:var(--desktop-board-height)}
 body:is(.is-intro,.is-entry,.match-started)>.page{max-width:var(--game-layout-width);padding-inline:40px}
 body:is(.is-intro,.is-entry,.match-started) .layout{display:block}
 body.match-started :is(.aside,.banner,.modebar,.foot){display:none}
 body:is(.is-intro,.is-entry,.match-started) .page .layout .board:not(.style-preview){height:var(--desktop-board-height);min-height:var(--desktop-board-height)}
 body.is-entry .board .arena{overflow-y:auto}
 body .page .layout .board.online-result-board .arena{display:flex;flex-direction:column;overflow-y:auto}
 body .page .layout .board.online-result-board .match-result{flex:none;margin-block:auto}
}
/* The score strip and hand area keep their slots while picks and results change. */
.board .hands .handlabel{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;min-width:0}
.handlabel .hand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.handlabel .hand-role{display:inline-flex;align-items:center;flex:none;line-height:0}
.handlabel .hand-role .role-icon{width:22px;height:22px;flex:0 0 22px}
@media(max-width:800px){.handlabel .hand-role .role-icon{width:20px;height:20px;flex-basis:20px}}
@media(max-height:500px) and (orientation:landscape){.handlabel .hand-role .role-icon{width:18px;height:18px;flex-basis:18px}}
body.match-started:has(.online-board) :is(.aside,.banner,.modebar,.foot){display:none}
body .page .layout .board.online-board .hand canvas{transform:scale(1.45);transform-origin:50% 100%}
body .page .layout .board.online-board.wicket .arena{grid-template-rows:100px minmax(190px,1fr) 110px 24px 88px}
@media(max-width:800px) and (min-height:501px){
 body .page .layout .board.online-board:not(.online-result-board):not(.online-lobby-board){height:max(620px,calc(100svh - 48px))}
 body .page .layout .board.online-result-board:has(.match-result){min-height:max(620px,calc(100svh - 48px))}
 body .page .layout .board.online-result-board .arena{display:flex;flex-direction:column;justify-content:center}
 body .page .layout .board.online-board:not(.online-toss):not(.online-result-board):not(.online-lobby-board) .arena{grid-template-rows:50px minmax(160px,1fr) 80px 0px 72px}
 body .page .layout .board.online-board:not(.online-toss):not(.online-result-board):not(.online-lobby-board):has(.online-problem:not(:empty)) .arena{grid-template-rows:50px minmax(142px,1fr) 80px 18px 72px}
 body .page .layout .board.online-board:not(.online-toss):not(.online-result-board):not(.online-lobby-board):has(.online-actions:empty) .arena{grid-template-rows:100px minmax(160px,1fr) 30px 0px 72px}
 body .page .layout .board.online-board .hands .hand{height:clamp(130px,23svh,181px)}
 body .page .layout .board.online-board .handgroup .handlabel{margin-top:6px}
 body .page .layout .board.online-board .handgroup .value{height:26px;margin-top:5px}
}
/* A rotated phone needs the choices beside the hands, with the target still visible. */
@media(max-width:1024px) and (max-height:500px) and (orientation:landscape){
 body.match-started:has(.online-board)>.page{padding:6px 12px}
 body .page .layout .board.online-board:not(.online-result-board):not(.online-lobby-board){height:max(270px,calc(100svh - 12px));min-height:0}
 body .page .layout .board.online-board .boardtop{height:32px;min-height:32px;padding:4px 54px 4px 44px;font-size:9px;flex:none}
 body .page .layout .board.online-board:not(.online-result-board):not(.online-lobby-board) .arena{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:minmax(110px,1fr) 36px;gap:2px 14px;padding:4px 16px}
 body .page .layout .board.online-board .online-heading{grid-area:1/1;align-self:start;height:auto;padding:0;z-index:1}
 body .page .layout .board.online-board .online-heading h2{font-size:18px!important;letter-spacing:-.5px;margin:0 0 2px}
 body .page .layout .board.online-board .online-heading p{font-size:10px;line-height:1.2}
 body .page .layout .board.online-board .arena .hands{grid-area:1/1;align-self:end;position:relative;inset:auto;height:calc(100% - 32px);min-height:0;gap:8px}
 body .page .layout .board.online-board .handgroup{height:100%;justify-content:flex-end;max-width:145px}
 body .page .layout .board.online-board .hands .hand{height:calc(100% - 20px);min-height:60px;max-height:140px;flex:none}
 body .page .layout .board.online-board .handlabel{margin:0;font-size:9px}
 body .page .layout .board.online-board .handgroup .value,body .page .layout .board.online-board .pick-status{display:none}
 body .page .layout .board.online-board .online-actions{grid-area:1/2;align-self:center;padding:0;min-height:0}
 body .page .layout .board.online-board .online-actions.toss-action{padding:8px}
 body .page .layout .board.online-board .online-picker{width:100%}
 body .page .layout .board.online-board .online-pick-prompt{font-size:14px;margin:0 0 8px}
 body .page .layout .board.online-board .numbers{display:flex;gap:5px}
 body .page .layout .board.online-board .number{height:46px;min-height:44px;font-size:23px}
 body .page .layout .board.online-board .online-footer{grid-area:2/1/3/3;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:14px;height:36px}
 body .page .layout .board.online-board .online-reactions{margin:0;width:auto}
 body .page .layout .board.online-board .online-problem:not(:empty){grid-area:1/2;align-self:end;font-size:10px;background:#244c3d;z-index:2}
 body .page .layout .board.online-board .online-problem:empty{display:none}
 body .page .layout .board.online-board .match-strip{min-height:62px}
 body .page .layout .board.online-board .broadcast-main{min-height:38px}
 body .page .layout .board.online-board .broadcast-batter,body .page .layout .board.online-board .broadcast-rival{padding-block:2px}
 body .page .layout .board.online-board .broadcast-detail{min-height:22px;padding-block:2px}
 body .page .layout .board.online-board .broadcast-runs{font-size:26px}
 body .page .layout .board.online-board .wicket-call{padding:0;margin:0}
 body .page .layout .board.online-board .wicket-call strong{font-size:28px}
 body .page .layout .board.online-board .online-toss-call{display:flex;justify-content:center;align-items:center;gap:8px}
 body .page .layout .board.online-board .online-toss-call strong{font-size:24px}
 body .page .layout .board.online-board .online-decision h3{font-size:19px;margin:0 0 4px}
 body .page .layout .board.online-board .online-decision .actions{margin-top:8px}
}