/* Cashgammon V1.11: match series and independent viewing controls. */
.series-picker { padding:0; margin:20px 0; border:0; min-width:0; }
.series-picker legend { margin-bottom:10px; color:#d4dfed; font-size:12px; font-weight:800; }
.series-format-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.series-format-options button { min-height:58px; min-width:0; border:1px solid #3b4556; border-radius:12px; padding:9px 5px; background:#171c28; color:#edf1f8; cursor:pointer; display:grid; gap:4px; }
.series-format-options button strong { font-size:12px; }
.series-format-options button small { color:#9eaabd; font-size:10px; }
.series-format-options button.selected { border-color:var(--lime); background:#253225; box-shadow:inset 0 0 0 1px var(--lime); }
.series-format-options button.selected strong { color:var(--lime); }
.series-picker p { color:#9eaabd; font-size:11px; line-height:1.6; margin:10px 0 0; }
.match-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin:0 0 12px; padding:12px 16px; border:1px solid rgba(255,255,255,.10); background:rgba(15,20,29,.94); border-radius:16px; }
.series-info { display:grid; gap:4px; flex-shrink:0; }
.series-info strong { color:var(--lime); font-size:12px; }
.series-info small { color:#a9b4c6; font-size:10px; }
.series-score { display:flex; align-items:center; justify-content:center; gap:10px; flex:1; min-width:0; }
.series-score > strong { font-size:24px; font-variant-numeric:tabular-nums; }
.series-score .score-separator { color:#7f8a9d; }
.score-player { display:flex; align-items:center; gap:7px; color:#bfc9d9; font-size:11px; min-width:0; }
.score-player > span { max-width:110px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.score-checker { width:13px; height:13px; border-radius:50%; display:inline-block; flex:none; border:1px solid #697387; }
.score-checker.white { background:#f3f5f9; }
.score-checker.black { background:linear-gradient(140deg,#424a5c,#0a0d16); }
.match-tool-actions { display:flex; align-items:center; gap:7px; }
.match-tool-actions button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:9px 12px; color:#dae2ef; background:#1c2431; border:1px solid #354052; border-radius:10px; font-size:15px; cursor:pointer; }
.match-tool-actions button span { font-size:11px; font-weight:700; }
.match-tool-actions button[aria-pressed="true"] { background:#243827; border-color:#81ba68; color:#cdfb9f; }
.match-tool-actions button:disabled { opacity:.45; cursor:default; }
.match-tool-actions button[hidden] { display:none; }
.match-tool-actions button:focus-visible,.series-format-options button:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.round-notice { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; background:#202c26; border:1px solid #476749; border-radius:13px; margin-bottom:12px; }
.round-notice[hidden] { display:none; }
.round-notice > div:first-child { display:grid; gap:4px; min-width:0; }
.round-notice strong { font-size:13px; color:#eaf9dc; }
.round-notice small { font-size:11px; line-height:1.5; color:#bfcfbc; }
.round-notice-actions { display:flex; flex-wrap:wrap; gap:7px; }
.round-notice button { flex-shrink:0; min-height:44px; }
.series-result-score { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:15px; }
.series-result-score b { color:var(--lime); font-size:30px; }
.series-hidden { display:none !important; }
.roll-key { font-family:inherit; font-size:10px; border:1px solid currentColor; border-radius:4px; padding:2px 5px; margin-left:6px; opacity:.7; }
/* Red is always paired with a dice count, not communicated by color alone. */
.point.combined-destination::after { background:#ff667a; box-shadow:0 0 0 5px rgba(255,75,102,.18),0 0 24px rgba(255,75,102,.8); }
.combined-label { position:absolute; z-index:22; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; background:#641c2c; color:#fff; border:1px solid #ff8998; border-radius:999px; padding:4px 5px; font-size:9px; font-weight:700; line-height:1.15; box-shadow:0 0 15px rgba(255,75,102,.45); }
.bearoff-tray.combined-destination { background:linear-gradient(90deg,var(--rail),#62283e); box-shadow:inset 0 0 0 2px #ff667a; }
.bearoff-tray.combined-destination::after { content:attr(data-dice-count); background:#ff667a; color:#250511; width:22px; height:22px; display:grid; place-items:center; font-weight:900; box-shadow:0 0 16px #ff667a; }
/* Rotate the entire board, including bar and off trays. Logical point IDs stay put. */
.board-inverted .board-grid { transform:rotate(180deg); }
.board-inverted .point-number { transform:translateX(-50%) rotate(180deg); }
.board-inverted .combined-label { transform:translate(-50%,-50%) rotate(180deg); }
.board-inverted .checker-count,.board-inverted .bearoff-tray strong,.board-inverted .off-label,.board-inverted .doubling-cube,.board-inverted .bearoff-tray.combined-destination::after { transform:rotate(180deg); }
@media (max-width:1100px) { .match-tools { gap:8px 10px; padding:10px; } .score-player > span { max-width:78px; } .match-tool-actions button { padding:8px 10px; } }
@media (max-width:720px) {
  .match-tools { display:grid; grid-template-columns:auto minmax(0,1fr); margin-bottom:8px; padding:8px 10px; }
  .match-tool-actions { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .match-tool-actions button { padding:6px 4px; }
  .match-tool-actions button span { font-size:10px; }
  .series-info strong { font-size:11px; }.series-info small { font-size:9px; }
  .series-score { gap:6px; justify-content:flex-end; }.series-score > strong { font-size:22px; }
  .score-player > span { max-width:64px; font-size:10px; }.score-checker { width:10px; height:10px; }.score-player { gap:4px; }
  .round-notice { flex-wrap:wrap; padding:10px; margin-bottom:8px; gap:8px; }.round-notice > div:first-child { flex:1 1 180px; }
  .combined-label { padding:3px; font-size:9px; }.combined-label span { display:none; }.combined-label::after { content:'\2684'; margin-left:1px; }
  .roll-key { display:none; }
}
@media (max-width:360px) { .score-player > span { max-width:42px; } .series-score { gap:4px; } .series-format-options { gap:5px; }.series-format-options button strong { font-size:10px; } }
/* Focus fills the browser viewport and keeps the score, dice and exit reachable. */
body.match-focus { overflow:hidden; }
body.match-focus .topbar,body.match-focus .app-footer { display:none !important; }
body.match-focus .app-shell { padding-top:0 !important; min-height:0; height:100dvh; }
body.match-focus .main-content { width:100%; max-width:none; height:100%; min-height:0; padding:max(6px,var(--safe-top)) max(12px,var(--safe-right)) max(6px,var(--safe-bottom)) max(12px,var(--safe-left)); }
body.match-focus #gameView { display:flex; flex-direction:column; max-width:none; height:100%; min-height:0; gap:8px; margin:0; animation:none; }
body.match-focus .game-topbar { position:static; flex:0 0 auto; min-height:44px; height:44px; padding:2px 8px; margin:0; border:0; }
body.match-focus .game-topbar .game-mode-copy > .mode-tag,body.match-focus .game-topbar .game-status-chip { display:none; }
body.match-focus .match-tools { flex:0 0 auto; margin:0; padding:5px 10px; min-height:54px; }
body.match-focus .round-notice { flex:0 0 auto; margin:0; }
body.match-focus .game-layout { flex:1; height:auto; min-height:0; grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:44px minmax(0,1fr) 44px; grid-template-areas:'top sidebar' 'board sidebar' 'bottom sidebar'; gap:6px 12px; }
body.match-focus .game-sidebar { display:flex; flex-direction:column; min-height:0; overflow-y:auto; grid-area:sidebar; }
body.match-focus .turn-panel { flex:0 0 auto; }
body.match-focus .move-log-panel,body.match-focus .match-panel { display:none; }
body.match-focus .board-stage { min-height:0; display:flex; flex-direction:column; }
body.match-focus .board-frame { flex:1; width:100%; height:auto; min-height:0; max-height:none; aspect-ratio:auto; padding:8px; }
body.match-focus .board-caption { flex:0 0 18px; padding-top:4px; font-size:9px; }
body.match-focus .player-rail { min-height:0; padding:4px 10px; border-radius:10px; }
body.match-focus .player-identity .avatar-ring { width:32px; height:32px; }
body.match-focus .player-stats > span { padding:2px 6px; }
body.match-focus .checker { width:min(90%,var(--focus-checker-size,38px)); height:var(--focus-checker-size,38px); max-height:var(--focus-checker-size,38px); }
body.match-focus .top-quadrant .checker { top:calc(3px + var(--stack-index) * var(--focus-stack-step,24px)); }
body.match-focus .bottom-quadrant .checker { bottom:calc(3px + var(--stack-index) * var(--focus-stack-step,24px)); }
@media (max-width:720px) and (orientation:portrait) {
  body.match-focus .main-content { padding:max(5px,var(--safe-top)) max(6px,var(--safe-right)) max(5px,var(--safe-bottom)) max(6px,var(--safe-left)); }
  body.match-focus #gameView { gap:5px; }
  body.match-focus .game-topbar { min-height:40px; height:40px; }
  body.match-focus .match-tools { padding:5px 7px; }
  body.match-focus .game-layout { grid-template-columns:1fr; grid-template-rows:34px auto minmax(0,1fr) 34px; grid-template-areas:'top' 'controls' 'board' 'bottom'; gap:5px; }
  body.match-focus .game-sidebar { display:contents; }
  body.match-focus .turn-panel { display:grid; padding:7px; grid-template-areas:'title dice' 'action action'; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
  body.match-focus .turn-panel > .section-kicker { display:none; }
  body.match-focus .turn-panel .turn-avatar { width:28px; height:28px; }
  body.match-focus .turn-panel > #rollButton,body.match-focus .turn-panel > #endTurnButton { min-height:44px; }
  body.match-focus .player-identity .avatar-ring { width:26px; height:26px; }
  body.match-focus .board-caption { font-size:8px; gap:6px; }
  body.match-focus .board-caption #boardThemeLabel { display:none; }
  body.match-focus .player-identity small { display:none; }
  body.match-focus .round-notice strong { font-size:11px; }
  body.match-focus .round-notice small { font-size:9px; }
}
/* Compact landscape gets viewport fitting even before the focus toggle. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  body.is-game-view #gameView { display:flex; flex-direction:column; gap:5px; }
  body.is-game-view .game-topbar { flex:0 0 40px; height:40px; min-height:40px; margin:0; }
  body.is-game-view .match-tools { flex:0 0 auto; min-height:46px; margin:0; padding:3px 7px; display:flex; gap:6px; }
  body.is-game-view .match-tool-actions { display:flex; }
  body.is-game-view .match-tool-actions button { min-height:44px; padding:5px 7px; }
  body.is-game-view .match-tools .score-player > span { max-width:65px; }
  body.is-game-view .game-layout { flex:1; min-height:0; height:auto; }
  body.is-game-view .round-notice { margin:0; padding:5px 8px; }
  body.match-focus .game-layout { grid-template-columns:minmax(0,1fr) minmax(185px,27vw); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:'board top' 'board controls' 'board bottom'; }
  body.match-focus .game-sidebar { display:contents; }
  body.match-focus .main-content { padding:max(4px,var(--safe-top)) max(7px,var(--safe-right)) max(4px,var(--safe-bottom)) max(7px,var(--safe-left)); }
}
@media (prefers-reduced-motion:reduce) { .point.combined-destination::after { animation:none; } }
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  body.is-game-view .checker { width:var(--focus-checker-size,24px); height:var(--focus-checker-size,24px); }
  body.is-game-view .top-quadrant .checker { top:calc(3px + var(--stack-index) * var(--focus-stack-step,16px)); }
  body.is-game-view .bottom-quadrant .checker { bottom:calc(3px + var(--stack-index) * var(--focus-stack-step,16px)); }
}
body.match-focus .bar-checker { width:min(30px,var(--focus-checker-size,30px)); height:min(30px,var(--focus-checker-size,30px)); }
body.match-focus .black-bar-zone .bar-checker { top:calc(3px + var(--bar-index) * var(--focus-stack-step,22px)); }
body.match-focus .white-bar-zone .bar-checker { bottom:calc(3px + var(--bar-index) * var(--focus-stack-step,22px)); }