/* Landscape tablets: one top action bar, larger scores and a wider quick-score pad. */
@media(min-width:701px) and (orientation:landscape){
 body.tablet-scorer-layout .app>header{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:36px;height:auto!important;padding:0;margin:0}
 body.tablet-scorer-layout .app>header h1{font-size:clamp(17px,1.8vw,25px);line-height:1.15;flex:1;min-width:120px;margin:0;white-space:nowrap}
 body.tablet-scorer-layout .app>header .toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:5px;margin-left:auto;flex:0 1 auto}
 body.tablet-scorer-layout .app>header .toolbar-actions button{min-height:34px!important;height:auto!important;padding:6px 8px!important;font:600 11px/1.2 Arial,sans-serif!important;white-space:nowrap;border-radius:7px}
 body.tablet-scorer-layout .app>header .home-link{min-height:32px;padding:6px 9px;font-size:11px}
 body.tablet-scorer-layout .app>header .board-device-badge{font-size:11px;padding:6px 8px}
 body.tablet-scorer-layout #gameScreen .game-toolbar{min-height:16px;margin:0;gap:0;font-size:11px}
 body.tablet-scorer-layout #gameScreen .layout>div{grid-template-rows:minmax(0,.55fr) minmax(0,.45fr);gap:8px}
 body.tablet-scorer-layout #gameScreen .players:not(.many) .score{font-size:clamp(100px,24vh,220px);font-size:clamp(100px,24dvh,220px);line-height:.95;margin:2px 0}
 body.tablet-scorer-layout #gameScreen .players:not(.many) .player{gap:4px;padding:7px 12px}
 body.tablet-scorer-layout #gameScreen .player .name{font-size:clamp(17px,2.7vh,25px)}
 body.tablet-scorer-layout #gameScreen .scoring-panel{padding:8px 12px;gap:5px}
 body.tablet-scorer-layout #gameScreen .entry-controls{grid-template-columns:max-content max-content;justify-content:start;align-items:end;gap:12px}
 body.tablet-scorer-layout #gameScreen .swap-start{width:210px;max-width:24vw;min-height:44px;height:44px;padding:6px 10px;font-size:13px}
 body.tablet-scorer-layout #gameScreen .total-entry{grid-template-columns:120px auto;justify-content:start;align-items:end;gap:8px;width:auto}
 body.tablet-scorer-layout #gameScreen .total-entry .field{width:120px;max-width:120px;font-size:11px}
 body.tablet-scorer-layout #gameScreen #totalScore{width:120px;min-width:0;height:44px;min-height:44px;text-align:center;font-size:26px;letter-spacing:1px;padding:5px 8px;font-variant-numeric:tabular-nums}
 body.tablet-scorer-layout #gameScreen .score-entry-actions button{height:44px;min-height:44px;padding:6px 12px;font-size:13px}
 body.tablet-scorer-layout #gameScreen .input-area:has(.score-presets:not([hidden])){grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px}
 body.tablet-scorer-layout #gameScreen .score-presets{padding:7px;gap:6px}
 body.tablet-scorer-layout #gameScreen .score-presets h3{font-size:13px}
 body.tablet-scorer-layout #gameScreen .score-presets-grid{gap:6px}
 body.tablet-scorer-layout #gameScreen .score-presets button{font-size:clamp(22px,3.8vh,34px);line-height:1;padding:4px}
 body.tablet-scorer-layout #gameScreen .score-keypad button{font-size:clamp(23px,4vh,36px)}
 body.tablet-scorer-layout #gameScreen .score-keypad .key-submit{font-size:clamp(15px,2.8vh,25px)}
 body.tablet-scorer-layout #gameScreen .scoring-footer .actions button{font-size:11px;min-height:30px;padding:4px 9px}
 body.tablet-scorer-layout #gameScreen[data-mode="cricket"] .layout>div,body.tablet-scorer-layout #gameScreen[data-mode="higherlower"] .layout>div{grid-template-rows:minmax(0,.4fr) minmax(0,.6fr)}
 /* Share the same column edges from score entry down to the keypad. */
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])){grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:10px}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden]))>h2{grid-column:1/-1;grid-row:1;min-height:32px;display:flex;align-items:center;padding-right:200px}
 body.tablet-scorer-layout #gameScreen .entry-controls:has(+.input-area .score-presets:not([hidden])){display:contents}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .swap-start{grid-column:2;grid-row:1;justify-self:stretch;width:100%;max-width:none;height:32px;min-height:32px}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .total-entry{grid-column:1;grid-row:2;grid-template-columns:minmax(150px,1fr) auto;width:100%;gap:8px}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .total-entry .field{width:100%;max-width:none}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) #totalScore{width:100%}
 body.tablet-scorer-layout #gameScreen .input-area:has(.score-presets:not([hidden])){display:contents}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .score-keypad{grid-area:3/1;min-height:0}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .finish-darts{grid-area:3/1}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .score-presets{grid-area:2/2/4/3;height:100%;align-self:stretch}
 body.tablet-scorer-layout #gameScreen .scoring-panel:has(.score-presets:not([hidden])) .scoring-footer{grid-column:1/-1;grid-row:4}

 .scorer-legacy body.tablet-scorer-layout #gameScreen .players{height:clamp(210px,36vh,330px);min-height:210px}
 .scorer-legacy body.tablet-scorer-layout #gameScreen .input-area{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@media(min-width:701px) and (max-width:1050px) and (orientation:landscape){body.tablet-scorer-layout .app>header h1{flex-basis:140px;font-size:17px}body.tablet-scorer-layout .app>header .toolbar-actions{flex-basis:100%}body.tablet-scorer-layout .app>header .toolbar-actions button{flex:1}body.tablet-scorer-layout #gameScreen .swap-start{width:180px;font-size:12px}}

/* Keep the delete symbol optically centered, independent of tablet fonts. */
#gameScreen .score-keypad button[data-key="back"]{display:flex;align-items:center;justify-content:center;font-size:0!important}
#gameScreen .score-keypad button[data-key="back"]::after{content:"";display:block;width:30px;height:24px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M11 4H27V20H11L3 12Z M15 8L23 16 M23 8L15 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

@media(min-width:701px) and (orientation:landscape){
 /* Shared scorer view for board tablets and signed-in administrators. */
 body.tablet-scorer-layout #gameScreen .players:not(.many) .player .name{width:100%;max-width:100%;font-size:clamp(32px,5vh,56px);font-size:clamp(32px,5dvh,56px);font-weight:850;line-height:1.08;white-space:normal;overflow-wrap:anywhere;text-align:center;flex-shrink:1}
 body.tablet-scorer-layout #gameScreen .players:not(.many) .player-photo{width:clamp(28px,4.5vh,44px);height:clamp(28px,4.5vh,44px)}
}

@media(min-width:701px) and (orientation:landscape){
 /* Size key labels from the actual remaining keypad height. */
 body.tablet-scorer-layout #gameScreen .score-keypad{container-type:size;gap:6px}
 body.tablet-scorer-layout #gameScreen .score-keypad button{display:flex;align-items:center;justify-content:center;line-height:1;padding:0 4px;overflow:hidden;font-size:clamp(18px,3vh,28px)}
 body.tablet-scorer-layout #gameScreen .score-keypad .key-submit{font-size:clamp(14px,2.3vh,22px)}
 @supports(font-size:1cqh){
  body.tablet-scorer-layout #gameScreen .score-keypad button{font-size:min(32px,23cqh)}
  body.tablet-scorer-layout #gameScreen .score-keypad .key-submit{font-size:min(24px,19cqh)}
  #gameScreen .score-keypad button[data-key="back"]::after{height:min(24px,23cqh);width:min(30px,29cqh)}
 }
}

/* Finish hints sit beside the points, without moving the centered score. */
#gameScreen .player .finish-route{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:21%;margin:0;padding:9px 5px;border:1px solid #e5bb55;border-radius:10px;background:#3a301b;color:#ffe18a;font-size:clamp(18px,3.2vh,34px);font-weight:850;line-height:1.25;white-space:pre-line;text-align:center;font-variant-numeric:tabular-nums}
#gameScreen .player .finish-route::before{content:"CHECKOUT";display:block;font-size:10px;letter-spacing:1px;margin-bottom:5px;color:#f5cc73}
@media(min-width:701px) and (orientation:landscape){body.tablet-scorer-layout #gameScreen .players:not(.many) .player:has(.finish-route) .score{font-size:min(24dvh,20vw,220px)}}
@media(max-width:700px){#gameScreen .player .finish-route{left:4px;width:25%;font-size:clamp(12px,3vw,20px);padding:5px 2px}#gameScreen .player .finish-route::before{font-size:7px;letter-spacing:0}#gameScreen .player:has(.finish-route) .score{font-size:clamp(35px,10vw,70px)}}
#gameScreen .players.many .finish-route{left:4px;padding:4px 2px;font-size:clamp(10px,1.6vh,18px)}
#gameScreen .players.many .finish-route::before{font-size:7px;letter-spacing:0}

@media(min-width:701px) and (orientation:landscape){
 body.tablet-scorer-layout #gameScreen .player .name{width:100%;max-width:100%;white-space:nowrap;overflow-wrap:normal;line-height:1;font-weight:850;flex:none}
 body.tablet-scorer-layout #gameScreen .players:not(.many) .player .name{font-size:clamp(48px,7vh,80px);white-space:nowrap;line-height:1;flex:none}
}