/* Fixed scoring viewport. Setup and dialogs keep their own layouts. */
body:has(#gameScreen:not(.hidden)){height:100dvh;overflow:hidden;overscroll-behavior:none}
body:has(#gameScreen:not(.hidden)) .app{display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:8px 12px;overflow:hidden}
body:has(#gameScreen:not(.hidden)) header{height:auto;min-height:0;margin:0;gap:10px}
body:has(#gameScreen:not(.hidden)) header h1{font-size:clamp(1.2rem,3dvh,2rem);line-height:1.1;white-space:nowrap}
body:has(#gameScreen:not(.hidden)) header .tag{display:none}
#gameScreen:not(.hidden){display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;height:100%;min-height:0;width:100%;overflow:hidden}
#gameScreen .game-toolbar{display:flex;flex-direction:row;align-items:center;min-height:0;gap:8px;font-size:.82rem}
#gameSummary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gameScreen .toolbar-actions{display:flex;flex-wrap:nowrap;width:auto;gap:5px;flex:none}
#gameScreen .toolbar-actions button{min-height:34px!important;padding:5px 9px!important;font-size:.75rem!important;white-space:nowrap}
#gameScreen .layout{display:block;flex:none;height:100%;min-height:0;margin:0;overflow:hidden;width:100%}
#gameScreen .layout>div{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.47fr) minmax(0,.53fr);align-items:stretch;gap:8px;height:100%;min-height:0;position:relative;overflow:hidden}
#gameScreen .players{display:grid;grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);align-self:stretch;align-items:stretch;align-content:stretch;gap:8px;min-height:0;height:100%;width:100%;overflow:hidden}
#gameScreen .players.many{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#gameScreen .players[data-count="3"]{grid-template-rows:minmax(0,1fr)}
#gameScreen .players.solo{grid-template-columns:1fr}
#gameScreen .player,#gameScreen .players.many .player{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:0;max-width:none;height:100%;width:100%;margin:0;padding:7px 12px;text-align:center;overflow:hidden;background:linear-gradient(155deg,#30343b,#25282f);border-radius:14px}
#gameScreen .player.active{background:radial-gradient(ellipse at 50% 0,#236d8433,transparent 75%),#292c33;border-color:#48a6c3;box-shadow:inset 0 3px 0 #31849d}
#gameScreen .player .name,#gameScreen .players.many .player .name{display:flex;align-items:center;justify-content:center;min-height:0;max-width:100%;gap:8px;font-size:clamp(.95rem,2.3dvh,1.5rem);line-height:1.15;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:none}
#gameScreen .player-photo{width:clamp(28px,5dvh,48px);height:clamp(28px,5dvh,48px);flex:none}
#gameScreen .score{font-size:clamp(3.6rem,18.5dvh,10rem);font-weight:900;line-height:.95;letter-spacing:-.055em;margin:3px 0;font-variant-numeric:tabular-nums;flex:none}
#gameScreen .mini,#gameScreen .players.many .mini{justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2vw,28px);font-size:clamp(.7rem,1.8dvh,1rem);line-height:1.2}
#gameScreen .records{font-size:clamp(.65rem,1.6dvh,.9rem);margin:0;line-height:1.2;white-space:nowrap}
#gameScreen .checkout{min-height:0;font-size:.8rem;margin:0;line-height:1.2}
#gameScreen .checkout:empty,#gameScreen .records:empty{display:none}
#gameScreen .players.many .score{font-size:clamp(2.2rem,8dvh,5.2rem);margin:1px 0}
#gameScreen .players[data-count="3"] .score{font-size:clamp(3rem,15dvh,8rem)}
#gameScreen .players.many .player .name{font-size:clamp(.75rem,1.8dvh,1.1rem);gap:5px}
#gameScreen .players.many .player-photo{width:28px;height:28px}
#gameScreen .players.many .mini{font-size:.7rem;gap:8px}
#gameScreen .players.many .records{font-size:.64rem}
#gameScreen .scoring-panel{display:grid;grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px;align-self:stretch;height:100%;min-height:0;width:100%;margin:0;padding:10px 12px;overflow:hidden;flex:none}
#gameScreen .scoring-panel h2{margin:0;font-size:clamp(.85rem,2dvh,1.15rem);line-height:1.15;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#gameScreen .entry-controls{display:grid;grid-template-columns:minmax(160px,.42fr) minmax(0,1fr);align-items:stretch;gap:10px;min-height:0}
#gameScreen .swap-start{height:100%;min-height:42px;margin:0;padding:6px 10px;font-size:clamp(.8rem,1.9dvh,1.1rem)}
#gameScreen .entry-controls:has(.swap-start:disabled){grid-template-columns:minmax(0,1fr)}
#gameScreen .total-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin:0;min-height:0}
#gameScreen .total-entry .field{min-width:0;gap:2px;font-size:.72rem;line-height:1.15}
#gameScreen .total-entry input,#gameScreen .total-entry .primary{min-height:42px;height:42px;padding:6px 12px;font-size:clamp(1rem,2.5dvh,1.4rem);border-radius:10px}
#gameScreen .input-area{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;position:relative;overflow:hidden}
#gameScreen .score-keypad{grid-area:1/1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;height:100%;width:100%;max-width:none;margin:0;min-height:0}
#gameScreen .score-keypad button{height:100%;min-height:0;padding:4px;font-size:clamp(1.1rem,3dvh,1.9rem);font-weight:800;border-radius:10px;touch-action:manipulation}
#gameScreen .score-keypad .key-submit{background:linear-gradient(135deg,#287d97,#1d5668)}
#gameScreen .finish-darts{grid-area:1/1;z-index:1;align-items:center;justify-content:center;align-content:center;gap:10px;height:100%;width:100%;margin:0;padding:8px;font-size:1rem}
#gameScreen .finish-darts strong{text-align:center}
#gameScreen .finish-darts button{min-height:44px;min-width:90px;padding:8px 12px;font-size:1rem}
#gameScreen .input-area:has(.finish-darts:not(.hidden)) .score-keypad{visibility:hidden}
#gameScreen .variant-panel{grid-area:1/1;height:100%;max-height:none;min-height:0;margin:0;overflow:hidden}
#gameScreen .entry-controls:has(.total-entry.hidden){grid-template-columns:minmax(0,1fr)}
#gameScreen .entry-controls:has(.total-entry.hidden):has(.swap-start:disabled){display:none}
#gameScreen .scoring-panel:has(.total-entry.hidden):has(.swap-start:disabled){grid-template-rows:auto minmax(0,1fr) auto}
#gameScreen .scoring-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0}
#gameScreen .actions{flex:none;gap:6px;margin:0;flex-wrap:nowrap}
#gameScreen .actions button{min-height:32px;padding:5px 12px;font-size:.8rem}
#gameScreen .status{min-height:0;margin:0;font-size:.8rem;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gameScreen .status:empty{display:none}
#gameScreen[data-mode="cricket"] .layout>div,#gameScreen[data-mode="higherlower"] .layout>div{grid-template-rows:minmax(0,.36fr) minmax(0,.64fr)}
#gameScreen .variant-panel:has(.cricket-table){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:6px 14px;align-items:center}
#gameScreen .variant-panel:has(.cricket-table)>p{display:none}
#gameScreen .cricket-scroll{grid-column:1;grid-row:1/-1;overflow:hidden}
#gameScreen .cricket-table{margin:0;width:100%;font-size:clamp(.65rem,1.8dvh,.9rem)}
#gameScreen .cricket-table th,#gameScreen .cricket-table td{padding:2px;min-width:0}
#gameScreen .variant-panel:has(.cricket-table)>strong,#gameScreen .cricket-picks,#gameScreen .variant-panel:has(.cricket-table) .variant-grid{grid-column:2;margin:0}
#gameScreen .cricket-picks button{min-height:32px}
#gameScreen .variant-grid{gap:6px}
#gameScreen .variant-grid button{min-height:38px;font-size:.85rem}
#gameScreen .hl-fields{grid-template-columns:repeat(8,minmax(0,1fr))}
#gameScreen .hl-fields button{min-height:32px;padding:4px}
#gameScreen .hl-progress:last-child{display:none}
#gameScreen .hl-progress,#gameScreen .hl-darts{margin:3px 0;font-size:.75rem}
#gameScreen #historyPanel:not(.hidden){position:fixed;inset:10% max(12px,calc((100vw - 640px)/2));height:auto;width:auto;overflow:auto;z-index:30}
@media(max-height:560px){
body:has(#gameScreen:not(.hidden)) .app{padding:5px 8px;gap:4px}
body:has(#gameScreen:not(.hidden)) header h1{font-size:1.15rem}
#gameScreen .toolbar-actions button{min-height:28px!important;font-size:.65rem!important;padding:3px 6px!important}
#gameScreen .scoring-panel{padding:6px 8px;gap:4px}
#gameScreen .total-entry input,#gameScreen .total-entry .primary{min-height:34px;height:34px;font-size:1rem}
#gameScreen .actions button{min-height:28px;font-size:.7rem;padding:3px 8px}
#gameScreen .player-photo{width:26px;height:26px}
#gameScreen .players.many .player .name{font-size:.7rem}
#gameScreen .players.many .score{font-size:clamp(1.8rem,6.8dvh,3.4rem)}
#gameScreen .players.many .records{font-size:.55rem}
#gameScreen .players.many .mini{font-size:.6rem}
}
@media(max-width:650px){
#gameScreen .game-toolbar{flex-direction:column;align-items:stretch;gap:3px}
#gameScreen .toolbar-actions{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
#gameScreen .toolbar-actions button{min-width:0;padding:4px 2px!important;font-size:.6rem!important}
#gameScreen .entry-controls{grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:5px}
#gameScreen .total-entry{gap:4px}
#gameScreen .total-entry .primary{padding:4px 8px;font-size:.85rem}
#gameScreen .swap-start{font-size:.7rem;padding:4px}
#gameScreen .player .name{font-size:.86rem;gap:4px}
#gameScreen .mini{font-size:.65rem;gap:8px}
#gameScreen .records{font-size:.59rem}
#gameScreen .players.many .mini{font-size:.57rem;gap:4px}
#gameScreen .players.many .records{font-size:.5rem}
#gameScreen .scoring-panel{padding:8px;gap:5px}
#gameScreen .players.many .player{padding:5px 3px}
#gameScreen .players.many .player-photo{width:22px;height:22px}
#gameScreen .actions button{font-size:.7rem;padding:4px 8px}
#gameScreen .variant-panel:has(.cricket-table){gap:4px}
#gameScreen .hl-fields{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* Larger, high-contrast match details beneath the remaining points. */
#gameScreen .player .name{font-size:clamp(1rem,2.7dvh,1.65rem)}
#gameScreen .mini{font-size:clamp(.9rem,2.7dvh,1.45rem);line-height:1.15;gap:clamp(6px,1.5vw,20px);color:#f5f5fa;font-weight:750}
#gameScreen .mini span{padding:5px 10px;border:1px solid #ffffff1c;border-radius:7px;background:#171a23;font-variant-numeric:tabular-nums;white-space:nowrap}
#gameScreen .players.many .mini{font-size:clamp(.65rem,1.9dvh,1rem);gap:4px}
#gameScreen .players.many .mini span{padding:3px 5px}
#gameScreen .records{color:#b6e3f1;font-weight:700}
@media(max-width:650px){#gameScreen .mini{font-size:clamp(.72rem,2.1dvh,1rem);gap:4px}#gameScreen .mini span{padding:4px 6px}#gameScreen .players.many .mini{font-size:.62rem;gap:3px}#gameScreen .players.many .mini span{padding:2px 3px}}
@media(max-height:560px){#gameScreen .mini{font-size:clamp(.75rem,2.4dvh,1.1rem)}#gameScreen .mini span{padding:3px 6px}#gameScreen .players.many .player{gap:1px;padding:4px}#gameScreen .players.many .player-photo{width:18px;height:18px}#gameScreen .players.many .mini{font-size:.6rem}#gameScreen .players.many .mini span{padding:2px 3px}}

/* Clear turn highlight without changing card size or position. */
#gameScreen .players .player.active{background:radial-gradient(ellipse at 50% 0,#3188a366,transparent 85%),linear-gradient(145deg,#245e70,#1d3942);border-color:#8bdbf4;box-shadow:inset 0 0 0 2px #5cc7e8,inset 0 5px 0 #9ee1f5,0 0 18px #3198b82b;color:#fff}