/* Keep the board frame and each throw's label/value slots stable. */
.board{overflow:clip;scroll-margin-top:24px}
body.match-started>.page{padding-top:24px}
body.match-started{--playing-board-height:clamp(660px,calc(100svh - 48px),800px)}
body.is-finding .page{max-width:1100px}
body.match-started .board:not(.style-preview){height:var(--playing-board-height);min-height:0}
body.match-started .board:not(.style-preview) .arena{min-height:0}
body .board .hands .handgroup{display:flex;flex-direction:column;align-items:center;height:100%;min-height:0;max-height:none}
body .board .hands .handgroup .hand{height:calc(100% - 62px);min-height:0;flex:1 1 auto}
body .board .hands .handgroup .handlabel{flex:0 0 16px;line-height:16px;margin:14px 0 0;transform:none}
body .board .hands .handgroup .value{position:static;display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;margin:6px 0 0;transform:none;font-size:14px;line-height:1;box-shadow:none}
body .board .hands .handgroup .value-pending{visibility:hidden}
body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 32px minmax(0,1fr);gap:8px;padding:20px 24px;min-height:0}
body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena>h2{grid-column:1;grid-row:1;margin:0;align-self:center}
body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena>.sub{grid-column:1;grid-row:2;display:block;min-height:0;align-self:center}
body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena>.sub:empty{visibility:hidden}
body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena .hands{grid-column:1;grid-row:3;height:100%;min-height:0;max-height:none;margin:0;align-self:stretch}
@media(max-width:1024px){
 body.match-started{--board-height:calc(100svh - 48px - env(safe-area-inset-bottom,0px));--playing-board-height:min(760px,var(--board-height))}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena{grid-template-rows:34px 30px minmax(0,1fr);gap:6px;padding:12px 14px}
}
@media(max-width:1024px) and (max-height:500px) and (orientation:landscape){
 body.match-started{--playing-board-height:var(--board-height)}
 body .board .hands .handgroup .hand{height:calc(100% - 45px)}
 body .board .hands .handgroup .handlabel{flex-basis:14px;line-height:14px;margin-top:8px}
 body .board .hands .handgroup .value{flex-basis:20px;width:20px;height:20px;margin-top:3px;font-size:12px}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena{display:flex;position:relative;padding:6px 12px}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena>h2{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:110px;z-index:1;font-size:20px;line-height:1.1}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena>.sub{display:none}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .arena .hands{height:100%;flex:1 1 auto}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .vs{margin-bottom:39px}
 body .board.live-play .arena.shake .vs{visibility:hidden}
 body .board.live-play:not(.wicket):not(:has(.match-complete)) .hand:not([data-pose="0"]) canvas{transform:scale(1.2);transform-origin:50% 100%}
}
/* Short landscape screens spend their remaining height on the hands and tap targets. */
@media(max-width:1024px) and (max-height:340px) and (orientation:landscape){
 body.match-started{--board-height:calc(100svh - 24px - env(safe-area-inset-bottom,0px))}
 body .board.has-score:not(.wicket) .controls:not(.match-complete){margin:2px 6px;padding:2px 10px}
 body .board.has-score:not(.wicket) .controlhint{margin-bottom:2px}
}
/* One centred width keeps the 44px controls 12px outside the desktop panels. */
@media(min-width:1025px){
 body{--game-layout-width:1380px;--game-control-left:max(12px,env(safe-area-inset-left,0px),calc((100% - var(--game-layout-width))/2 + 12px));--game-control-right:max(12px,env(safe-area-inset-right,0px),calc((100% - var(--game-layout-width))/2 + 12px))}
 body.match-started>.page{max-width:var(--game-layout-width);padding-left:max(68px,calc(env(safe-area-inset-left,0px) + 56px));padding-right:max(68px,calc(env(safe-area-inset-right,0px) + 56px))}
 body.match-started .layout{grid-template-columns:minmax(0,1fr) 268px}
 .match-logo{left:var(--game-control-left)}
 .menu-toggle,.game-menu{right:var(--game-control-right)}
}