/* One board layout from Ready through the last ball, including browser chrome
   and device safe areas. The scorebook remains available below the board. */
button,select{touch-action:manipulation}
@media(max-width:1024px){
 :root{--header-height:calc(60px + env(safe-area-inset-top,0px));--board-height:calc(100svh - var(--header-height) - 24px - env(safe-area-inset-bottom,0px))}
 header{height:var(--header-height);padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:8px}
 .brand{font-size:21px;gap:8px;flex-shrink:0}.brand .mark{width:30px;height:30px}.brand small{font-size:10px;letter-spacing:1px}
 .topnote{display:none}.header-actions{gap:6px;min-width:0}
 .collection-button{min-height:44px;padding:8px;font-size:10px;white-space:nowrap}.collection-button span{font-size:10px;margin-left:4px}
 .quiet{width:44px;height:44px;flex-shrink:0}
 .page{max-width:760px;padding:10px max(12px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
 .layout{grid-template-columns:minmax(0,1fr);gap:20px}.layout>section,.aside{min-width:0}.aside{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
 .board{height:min(760px,var(--board-height));min-height:0;border-width:7px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
 .board:not(.has-score){grid-template-rows:auto minmax(0,1fr) auto}
 .boardtop{padding:10px 12px;gap:8px;font-size:10px;letter-spacing:.5px;line-height:1.3}.boardtop>span:last-child{white-space:nowrap}.live{gap:5px}.live:before{flex-shrink:0}
 .match-strip{padding:9px 12px}.strip-teams{gap:6px;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}.strip-team{gap:5px}.strip-name{font-size:10px;letter-spacing:0}.strip-team strong{font-size:26px}.strip-status{font-size:10px;letter-spacing:0;margin-top:5px;line-height:1.4}
 .board .arena{min-height:0;padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px;align-content:center}
 .arena h2{font-size:clamp(22px,5.5vw,30px);line-height:1.12;margin:0;text-wrap:balance}
 .arena .sub{font-size:12px;line-height:1.4;min-height:2.8em;text-wrap:balance}
 .board .hands{height:100%;min-height:0;max-height:none;margin:0;gap:8px}
 .handgroup{height:100%;max-height:300px;min-height:0;width:45%;flex:0 1 220px;display:flex;flex-direction:column;align-items:center}
 .board .hands .hand{height:calc(100% - 22px);width:100%;min-height:0}
 .handlabel{font-size:10px;line-height:14px;letter-spacing:1.3px;margin-top:4px;white-space:nowrap}
 .vs{font-size:16px;flex-shrink:0}.value{width:28px;height:28px;top:8px;right:5px;font-size:14px}
 .board .arena>.actions{min-height:44px;margin:4px 0 0;gap:8px;align-items:center}
 .arena .primary,.arena .secondary{min-height:44px;padding:10px 16px;font-size:12px}
 .board .controls{margin:0;padding:12px 12px 16px;min-width:0}
 .board .controlhint{gap:8px;align-items:center;min-width:0;margin-bottom:10px}
 .board .controlhint b{font-size:10px;letter-spacing:.5px}.board .controlhint span{font-size:10px;text-align:right;line-height:1.3}
 .board .numbers{gap:6px}.board .number{height:52px;min-width:0;padding:0;font-size:25px;border-radius:5px}
 .board.wicket .arena{padding:10px 12px;grid-template-rows:auto auto auto minmax(0,1fr) auto}
 .wicket-call{justify-self:center;margin:2px 0 6px;padding:0 16px}.wicket-call strong{font-size:38px;line-height:.9}
 .board.wicket .arena h2{font-size:21px;margin:0}.board.wicket .hands{height:100%;margin:0}
 .board:has(.match-complete){grid-template-rows:auto minmax(0,1fr) auto}
 .board:has(.match-complete) .arena{display:flex;gap:4px;padding:12px;min-height:0}
 .board:has(.match-complete) .arena>*{flex-shrink:0}
 .board:has(.match-complete) :is(.result-cause,.result-kicker,.win-title,.result-score,.collection-note,.result-collection-link){margin:0}
 .board:has(.match-complete) .arena>.hands{flex:1;min-height:55px;max-height:180px}
 .arena .win-title{font-size:clamp(28px,7vw,40px);letter-spacing:-1px}
 .arena .prize-reveal{gap:12px;margin:6px auto;max-width:100%}.arena .prize-halo{height:136px;width:76px}.arena .prize-halo .bat-art{height:126px;width:70px}
 .arena .prize-copy{min-width:0}.arena .prize-copy h3{font-size:21px}.arena .prize-copy p{font-size:11px}
 .result-collection-link{min-height:44px}.collection-note{margin:8px 0}
 .modebar{gap:6px;flex-wrap:wrap}.modebar select{min-height:44px;font-size:16px;max-width:100%;min-width:0}.modebar .reset{min-height:44px;padding:8px;font-size:11px}
 .score-teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.team{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px}.team .score-number{font-size:38px}.team .innings-overs{text-align:left}
 .rules{padding:12px 4px}.foot{flex-wrap:wrap;gap:10px;line-height:1.6}
 .collection-dialog{padding:20px 15px;max-height:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain}
 .collection-close,.victory-close,.rematch-close{width:44px;height:44px;flex-shrink:0}
 .collection-top{align-items:flex-start}.collection-top h2{font-size:25px}.collection-summary{font-size:11px;flex-wrap:wrap}
 .victory-scene{padding:calc(54px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
 .victory-close{top:calc(10px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
 .victory-content{min-width:0}.victory-content h2{font-size:clamp(48px,17vw,88px);overflow-wrap:anywhere}
 .victory-splash strong{font-size:clamp(48px,18vw,110px);max-width:100%;overflow-wrap:anywhere}
 .victory-reward{margin:16px auto;padding:0 12px}.victory-reward .prize-copy{min-width:0}
 .victory-actions{gap:8px}.victory-actions .primary,.victory-actions .secondary{min-height:46px;font-size:12px;padding:12px 14px}
 .victory-collection-link{min-height:44px;margin-top:10px}
 .rematch-dialog{padding:40px 20px 20px;max-height:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain}
 .rematch-close{top:4px;right:6px}.rematch-actions button{min-height:44px}.rematch-clock{margin:18px auto}
}

@media(max-width:360px){
 header{padding-inline:8px}.brand{font-size:19px;gap:6px}.brand small{font-size:10px}.brand .mark{width:26px;height:26px}
 .header-actions{gap:4px}.collection-button{font-size:10px;padding:6px}
 .page{padding-inline:max(8px,env(safe-area-inset-left,0px))}.board{border-width:6px}
 .boardtop{padding-inline:8px;font-size:10px}.match-strip{padding-inline:8px}
 .board .controls{padding-inline:4px}.board .numbers{gap:4px}.board .controlhint{padding-inline:4px}
 .arena .primary,.arena .secondary{padding-inline:12px}.board .arena{padding-inline:8px}
}
@media(max-width:1024px) and (max-height:700px){
 .boardtop{padding-block:8px}.match-strip{padding-block:7px}
 .board .arena,.board.wicket .arena{padding-block:8px}
 .arena h2{font-size:23px}.arena .sub{font-size:11px}
 .board .controls{padding-block:10px 13px}.board .number{height:46px}
 .wicket-call{margin-bottom:3px}.wicket-call strong{font-size:30px}.board.wicket .arena h2{font-size:18px}
 .victory-content h2{margin:10px 0 6px}.victory-reward .prize-halo{height:155px;width:80px}.victory-reward .prize-halo .bat-art{height:145px;width:74px}
 .victory-reward .prize-copy h3{font-size:21px}.victory-reward .prize-copy p{font-size:10px}.friendly-trophy{font-size:76px;margin:12px 0}
 .rematch-clock{width:88px;height:88px;margin:12px auto}.rematch-clock strong{font-size:38px}.rematch-players{margin-bottom:14px}
}
/* Landscape keeps the throws beside the message, and the number pad on the right. */
@media(max-width:1024px) and (max-height:500px) and (orientation:landscape){
 :root{--header-height:calc(50px + env(safe-area-inset-top,0px));--board-height:calc(100svh - var(--header-height) - 18px - env(safe-area-inset-bottom,0px))}
 .brand small{display:none}.page{max-width:none;padding-top:6px}
 .board{height:var(--board-height);grid-template-columns:minmax(0,1fr) 172px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:'meta controls' 'arena controls' 'score score';border-width:5px}
 .board:not(.has-score){grid-template-rows:auto minmax(0,1fr);grid-template-areas:'meta controls' 'arena controls'}
 .boardtop{grid-area:meta;padding:5px 10px;font-size:10px}.match-strip{grid-area:score;padding:5px 10px}.strip-team strong{font-size:22px}.strip-status{margin-top:2px;font-size:10px}
 .board .arena{grid-area:arena;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;padding:6px 10px;gap:3px 8px}
 .arena h2{grid-column:1;grid-row:1;font-size:20px}.arena .sub{grid-column:1;grid-row:2;font-size:10px;min-height:0}
 .board .arena>.actions{grid-column:1;grid-row:3;margin-top:5px;gap:6px}.arena .primary,.arena .secondary{font-size:11px;padding:8px 10px}
 .board .arena .hands{grid-column:2;grid-row:1/-1;align-self:stretch;height:100%;gap:4px}.handgroup{max-height:180px}.handlabel{font-size:10px;letter-spacing:.6px}.value{top:0;width:23px;height:23px;font-size:12px;right:0}
 .board .controls{grid-area:controls;display:flex;flex-direction:column;justify-content:center;padding:10px;border-top:0;border-left:1px solid #f1eed129}
 .board .controls.match-complete{display:none}.board .controlhint{display:block;text-align:center;margin-bottom:12px;padding:0}.board .controlhint b{font-size:10px}.board .controlhint span{display:block;text-align:center;margin-top:5px;font-size:10px}
 .board .numbers{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:0}.board .number{height:48px;font-size:24px}
 .board.wicket .arena{grid-template-rows:auto auto auto auto;padding:6px 10px}.wicket-call{grid-column:1;grid-row:1;margin:0 0 4px;padding:0 12px}.wicket-call strong{font-size:24px;padding:3px 0}.board.wicket .arena h2{grid-row:2;font-size:16px}.board.wicket .arena .sub{grid-row:3}.board.wicket .arena>.actions{grid-row:4;margin-top:4px}
 .board:has(.match-complete){grid-template-columns:minmax(0,1fr);grid-template-areas:'meta' 'arena' 'score';grid-template-rows:auto minmax(0,1fr) auto}
 .board:has(.match-complete) .arena{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;padding:10px;gap:4px 12px}
 .board:has(.match-complete) .result-cause{grid-column:1;grid-row:1;margin:0}.board:has(.match-complete) .win-title{grid-column:1;grid-row:2;font-size:26px}
 .board:has(.match-complete) .result-score{grid-column:1;grid-row:3;margin:0}
 .board:has(.match-complete) .result-kicker,.board:has(.match-complete) .hands,.board:has(.match-complete) .prize-reveal,.board:has(.match-complete) .collection-note{display:none}
 .board:has(.match-complete) .arena>.actions{grid-column:2;grid-row:1/3;margin:0}.board:has(.match-complete) .result-collection-link{grid-column:2;grid-row:3;margin:0}
 .victory-scene{padding:16px max(56px,env(safe-area-inset-right,0px)) 16px max(30px,env(safe-area-inset-left,0px))}
 .victory-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;align-items:center;column-gap:20px;text-align:center;max-width:720px}
 .champion-label{grid-column:1;grid-row:1}.victory-content h2{grid-column:1;grid-row:2;font-size:46px;margin:6px 0}.victory-final-score{grid-column:1;grid-row:3;font-size:10px}
 .victory-reward,.friendly-trophy{grid-column:2;grid-row:1/4;margin:0}.victory-reward{padding:0 8px}.victory-reward .prize-reveal{gap:6px}.victory-reward .prize-halo{height:155px;width:65px}.victory-reward .prize-halo .bat-art{height:140px;width:64px}.victory-reward .prize-copy h3{font-size:19px}.victory-reward .prize-copy p{display:none}
 .victory-actions{grid-column:1/-1;grid-row:4;margin-top:12px}.victory-collection-link{grid-column:1/-1;margin:2px 0 0}.victory-splash strong{font-size:76px}
 .rematch-dialog{width:min(520px,calc(100% - 32px));padding:16px 24px}.rematch-dialog h2{font-size:26px}.rematch-clock{float:left;width:80px;height:80px;margin:16px 18px 8px 0}.rematch-players{margin:12px 0}.rematch-players>div{padding:8px 0}.rematch-actions{clear:both;flex-direction:row;justify-content:center;gap:14px}.rematch-actions .primary{flex:1}
}

@media(max-width:1024px) and (max-height:340px) and (orientation:landscape){
 .victory-dialog .victory-scene{padding:8px 32px}
 .victory-content h2{font-size:40px;margin:4px 0}
 .victory-content .victory-explanation{font-size:10px;gap:3px;margin:2px 0}.victory-explanation strong{font-size:11px}
 .victory-reward .prize-halo{height:118px;width:60px}.victory-reward .prize-halo .bat-art{height:108px;width:55px}
 .victory-content .victory-actions{margin-top:6px}.victory-actions .primary,.victory-actions .secondary{min-height:44px;padding:8px 14px}
}