/* =========================
   Responsive Design

   CANONICAL BREAKPOINT SCALE (use these exact values for all new media queries):
     phone:    max-width: 480px  (iPhones SE 375 .. Pro Max 430, all phones)
     tablet:   max-width: 768px  (small tablets / large phones in landscape)
     desktop:  min-width: 769px
     large:    min-width: 1200px (extra-wide layouts)

   Adjacent boundary pairs to use:
     phone end / non-phone start:    max-width: 480px / min-width: 481px
     tablet end / desktop start:     max-width: 768px / min-width: 769px

   Existing 600px and 900px queries are legacy; new code should not add them.
   ========================= */

/* Large desktop — extra compactness */
@media (min-width: 900px) {
  header {
    padding: var(--space-sm) var(--space-lg) 4px;
    gap: calc(var(--space-xs) / 2);
  }

  .header-addplayer-row {
    margin-top: 0;
  }

  .header-options-panel {
    padding: 6px var(--space-sm) var(--space-sm);
  }

  .entry-switcher {
    margin: 4px var(--space-lg) 10px;
    padding: 5px;
    gap: 6px;
  }

  .entry-switcher-btn {
    padding: 8px 14px;
    min-height: 53px;
  }
}

/* Desktop optimization (1400px and below) */
@media (max-width: 1400px) {
  th, td {
    padding: var(--space-sm) 4px;
  }

  .par-row input,
  .hcp-row input,
  .score-input {
    width: 46px;
    padding: 10px 2px;
  }

  .ch-input {
    width: 58px;
  }

  th:first-child,
  td:first-child {
    min-width: 150px;
  }

  table {
    min-width: 760px;
  }
}

/* Tablet landscape (1200px and below) */
@media (max-width: 1200px) {
  th, td {
    padding: var(--space-sm) 3px;
  }

  .par-row input,
  .hcp-row input,
  .score-input {
    width: 42px;
    padding: 10px 1px;
  }

  .ch-input {
    width: 54px;
  }

  :root[data-font-size="large"] .par-row input,
  :root[data-font-size="large"] .hcp-row input,
  :root[data-font-size="large"] .score-input {
    width: var(--table-input-width);
  }

  :root[data-font-size="large"] .ch-input {
    width: var(--table-ch-width);
  }

  th:first-child,
  td:first-child {
    min-width: 130px;
  }

  table {
    min-width: 700px;
  }
}

/* Narrow desktop / large tablet (1000px and below) */
@media (max-width: 1000px) {
  th, td {
    padding: var(--space-xs) 2px;
  }

  .par-row input,
  .hcp-row input,
  .score-input {
    width: 38px;
    padding: 8px 1px;
  }

  .ch-input {
    width: 50px;
  }

  :root[data-font-size="large"] .par-row input,
  :root[data-font-size="large"] .hcp-row input,
  :root[data-font-size="large"] .score-input {
    width: var(--table-input-width);
  }

  :root[data-font-size="large"] .ch-input {
    width: var(--table-ch-width);
  }

  th:first-child,
  td:first-child {
    min-width: 110px;
  }

  table {
    min-width: 620px;
  }
}

/* Tablet portrait (900px and below) */
@media (max-width: 900px) {
  .header-collapse-bar {
    gap: 6px;
    padding: 0 var(--space-md) 4px;
    flex-wrap: nowrap;
  }

  .header-cloud-scroll-indicator {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }

  .header-cloud-status-group {
    flex-wrap: nowrap;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
  }.header-collapse-bar .cloud-status-badge,
  .header-collapse-bar .cloud-code-badge-btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: calc(12px + var(--font-size-step));
    letter-spacing: 0.02em;
  }
  th, td {
    padding: var(--space-sm) 5px;
  }

  .name-edit {
    font-size: calc(var(--text-xl) + var(--font-data-adjust));
    padding: 10px var(--space-md);
    min-height: var(--touch-min);
  }

  :root[data-font-size="large"] .par-row input,
  :root[data-font-size="large"] .hcp-row input,
  :root[data-font-size="large"] .score-input {
    width: var(--table-input-width);
  }

  :root[data-font-size="large"] .ch-input {
    width: var(--table-ch-width);
  }

  th:first-child,
  td:first-child {
    min-width: 160px;
  }

  .par-row input,
  .hcp-row input,
  .score-input {
    width: var(--table-input-width);
    padding: 10px 4px;
  }

  .ch-input {
    width: var(--table-ch-width);
  }

  table {
    min-width: 880px;
  }
}

@media (max-width: 1024px) {
  .games-controls-shell .games-launcher-shell {
    margin: 0;
  }
  .games-launcher-shell.is-compact.is-collapsed .gamesbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .games-launcher-shell.is-compact.is-collapsed .gamesbar::-webkit-scrollbar {
    display: none;
  }

  .games-launcher-shell.is-compact.is-collapsed .game-toggle-item {
    flex: 0 0 auto;
    min-width: 128px;
  }}

/* Mobile/tablet game tables: lock header row while body rows scroll beneath. */
@media (max-width: 1023px) {
  .game-section .vegas-wrap,
  .game-section .banker-wrap {
    max-height: min(62vh, 560px);
    overflow-y: auto;
  }

  #vegasTable thead th,
  #bankerTable thead th,
  #skinsTable thead th,
  #junkTable thead th,
  #wolfTable thead th,
  #hiloTable thead th,
  #hiloHoleTable thead th {
    top: 0;
  }
}

/* Mobile landscape / Small tablet (768px and below) */
@media (max-width: 768px) {
  :root {
    --footer-action-h: var(--footer-action-h-mobile);
  }

  .banker-table th,
  .banker-table td,
  .skins-table th,
  .skins-table td,
  .junk-table th,
  .junk-table td,
  .vegas-table th,
  .vegas-table td {
    padding: var(--space-xs) var(--space-sm);
  }

  #junkTable tbody td,
  #junkTable tbody th,
  #vegasTable tbody td,
  #vegasTable tbody th {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  #scorecard .par-row th,
  #scorecard .par-row td,
  #scorecard .hcp-row th,
  #scorecard .hcp-row td {
    /* Match the Hole label row's `padding-top/bottom: var(--space-xs)` so
       the three sticky header bands (Hole / Par / HCP) sit on a uniform
       vertical rhythm on mobile. Previous 2px crowded the input against
       the cell border; the input still has its own padding for legibility. */
    padding-top: 0;
    padding-bottom: 0;
  }

  #scorecard .par-row input,
  #scorecard .hcp-row input {
    /* The par/hcp inputs are read-only (tabIndex=-1), so they don't need
       the iOS touch-target min-height that score inputs do. Removing the
       30px floor lets the input collapse to its text height, which matches
       the Hole label row immediately above. */
    padding: var(--space-xs) 1px;
    min-height: 0;
    line-height: 1;
  }

  #scorecard .player-row th,
  #scorecard .player-row td {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  #scorecard .name-edit {
    padding: 4px 8px;
    min-height: 44px;
  }

  #scorecard .score-input {
    width: 44px;
    min-width: 44px;
    height: var(--touch-min);
    min-height: var(--touch-min);
    padding: 4px 2px;
    background: #000000;
  }

  #scorecard .ch-input {
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    aspect-ratio: auto;
  }
  .scorecard-card-footer {
    padding: 5px 8px;
    min-height: 49px;
  }

  .scorecard-card-footer.games-card-footer {
    padding: 3px 8px 0;
    min-height: 48px;
  }

  .scorecard-card-footer .btn,
  .scorecard-card-footer .game-options-toggle {
    min-height: var(--footer-action-h);
    padding: 6px 12px;
  }

  .gamesbar {
    gap: var(--games-launcher-gap, 6px);
    flex-wrap: wrap;
  }

  .entry-switcher {
    margin: var(--space-md) var(--space-md) 10px;
    gap: 8px;
    padding: 8px;
  }

  .entry-switcher.footer-entry-switcher {
    margin: 0.63px 0 0;
    padding: 4.2px 8px 2.8px;
    gap: 6px;
  }

  html.ios-pwa-mode .entry-switcher.footer-entry-switcher {
    padding: 4.2px 8px 29px;
  }

  html.ios-native-app:not(.ios-pwa-mode) .entry-switcher.footer-entry-switcher {
    /* Native iOS app only: keep Score/Games row above the home indicator.
       Match the indicator-edge breathing room without changing PWA behavior. */
    padding: 4.2px 8px 9px;
  }

  .entry-switcher-btn {
    padding: 10px 12px;
    min-height: var(--footer-action-h);
    font-size: calc(15px + var(--font-size-step));
  }

  .game-toggle {
    min-height: var(--footer-action-h);
  }

  .gamesbar .game-toggle-item {
    flex: 1 1 auto;
  }

  .game-section {
    margin: 0 0 24px;
    padding: 0 0 var(--text-md);
  }

  .game-section > *:not(.vegas-wrap):not(.banker-wrap):not(.live-results-panel):not(.live-results-card):not(#bankerFooterTotals):not(.vegas-controls):not(.hilo-bottom-results):not(.game-options-panel):not(.results-card-wrap) {
    padding-left: var(--text-md);
    padding-right: var(--text-md);
  }

  .game-section > .game-options-panel {
    left: 0;
    right: 0;
  }

  h2 {
    font-size: calc(15px + var(--font-size-step));
    margin: 0;
  }

  .game-section-header {
    gap: 6px;
    padding: 2px 0;
    margin: 0;
  }

  .game-section-header .controls {
    gap: 4px;
  }

  #junkTable th:not(:first-child),
  #junkTable td:not(:first-child) {
    width: 68px;
    padding: var(--space-xs) 4px;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
  }

  .junk-dd > summary {
    padding: 10px var(--space-md);
  }
}

/* Mobile portrait (600px and below) */
@media (max-width: 600px) {
  header {
    padding: 0;
  }

  .header-inner {
    padding: 1.8px 6px 1.2px;
    gap: 0;
  }

  h1 {
    font-size: var(--text-xl);
  }

  .controls {
    gap: 10px;
  }.header-course-control input {
    height: var(--touch-comfortable);
    min-height: var(--touch-comfortable);
  }

  .course-picker-toggle {
    height: calc(var(--touch-comfortable) - 8px);
    min-height: calc(var(--touch-comfortable) - 8px);
  }

  .utilities-row {
    align-items: stretch;
  }

  .utilities-row .btn,
  .utilities-row .theme-toggle {
    flex: 1 1 auto;
  }

  .handicap-mode-control,
  .font-size-control {
    flex: 1 1 100%;
  }

  .cloud-row {
    align-items: stretch;
  }

  .cloud-row .btn,
  .cloud-row select,
  .cloud-row input {
    flex: 1 1 100%;
    min-width: 0;
  }

  .btn {
    padding: var(--space-md) var(--text-md);
    min-height: var(--touch-comfortable);
  }

  .control {
    min-height: var(--touch-comfortable);
  }

  .control input[type="text"] {
    min-height: var(--touch-comfortable);
    padding: var(--space-md) var(--text-md);
  }

  th:first-child,
  td:first-child {
    min-width: 140px;
    padding-left: var(--space-md);
  }

  .par-row input,
  .hcp-row input {
    width: 44px;
    padding: 7px 3px;
    min-height: var(--touch-comfortable);
  }

  #scorecard .score-input,
  #scorecard .ch-input {
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
  }

  #scorecard .ch-input {
    aspect-ratio: auto;
  }

  #scorecard .score-input {
    padding: 7px 3px;
    background: #000000;
  }
  table {
    min-width: 820px;
  }

  .vegas-table th:first-child,
  .vegas-table td:first-child,
  .banker-table th:first-child,
  .banker-table td:first-child,
  .skins-table th:first-child,
  .skins-table td:first-child,
  .junk-table th:first-child,
  .junk-table td:first-child {
    width: 40px;
    min-width: 40px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (max-width: 380px) {
  :root {
    --score-sticky-par-top: 30px;
    --score-sticky-hcp-top: 60px;
  }

  .header-inner {
    padding: 1.2px 5px 0.6px;
    gap: 0;
  }

  .header-title-row {
    gap: 2px;
  }

  h1 {
    font-size: calc(var(--text-lg) + 1px);
    line-height: 1.05;
  }

  .header-collapse-bar {
    padding: 0 10px 2px;
    gap: 4px;
  }

  .header-cloud-scroll-indicator {
    margin: 0 10px 2px;
  }.header-collapse-bar .cloud-status-badge,
  .header-collapse-bar .cloud-code-badge-btn {
    min-height: 30px;
    padding: 5px 10px;
    font-size: calc(11px + var(--font-size-step));
    line-height: 1.25;
  }

  #scorecard thead th {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #scorecard thead th:first-child,
  #scorecard thead th:nth-child(2) {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #scorecard #parRow td,
  #scorecard #parRow th,
  #scorecard #hcpRow td,
  #scorecard #hcpRow th {
    padding-top: 0.6px;
    padding-bottom: 0.6px;
  }

  #scorecard #parRow td:first-child,
  #scorecard #parRow th:first-child,
  #scorecard #hcpRow td:first-child,
  #scorecard #hcpRow th:first-child,
  #scorecard #parRow td:nth-child(2),
  #scorecard #parRow th:nth-child(2),
  #scorecard #hcpRow td:nth-child(2),
  #scorecard #hcpRow th:nth-child(2) {
    padding-top: 0.6px;
    padding-bottom: 0.6px;
  }

  .par-row input,
  .hcp-row input {
    padding: 1px;
    min-height: 24px;
    line-height: 1;
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .junk-dd > summary {
    min-height: var(--touch-comfortable);
    padding: var(--space-md) var(--text-md);
    font-size: var(--text-lg);
  }

  input[type="number"],
  input[type="text"] {
    min-height: var(--touch-comfortable);
    padding: var(--space-md) var(--text-md);
    font-size: calc(var(--text-xl) + var(--font-data-adjust));
  }

  /* Par/HCP inputs are display-only and must not pick up the wide horizontal
     padding above — that reduces the 44px content area too much and clips
     two-digit numbers (e.g. 13, 15, 17) in light mode. The vertical box is
     deliberately tight (no min-height, no TD padding) so all three sticky
     bands (Hole / Par / HCP) settle on the same rhythm — Hole has 6.6px TH
     padding + ~19px text; Par/HCP get the same effective box via input
     padding alone. */
  #parRow input,
  #hcpRow input {
    padding: 6px 1px;
    min-height: 0;
    line-height: 1;
  }

  #scorecard .par-row th,
  #scorecard .par-row td,
  #scorecard .hcp-row th,
  #scorecard .hcp-row td {
    padding-top: 0;
    padding-bottom: 0;
  }

  #scorecard .score-input,
  #scorecard .ch-input {
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
  }

  #scorecard .ch-input {
    aspect-ratio: auto;
  }

  .game-toggle {
    padding: 7px 2px;
    min-height: var(--footer-action-h);
    font-size: calc(15px + var(--font-size-step));
  }

  .btn,
  .theme-toggle {
    min-height: var(--touch-comfortable);
    padding: var(--text-md) 18px;
    font-size: var(--text-xl);
  }

  .scorecard-footer-controls .scorecard-theme-toggle {
    min-width: 40px;
    width: 40px;
    height: auto;
    min-height: 0;
    align-self: stretch;
    padding: 0;
  }
}

/* =========================================================================
   Mobile compaction for game tables (≤768px)
   Removes hardcoded min-widths and cell padding on Vegas/Skins/Junk/Hi-Lo/
   Banker tables so users don't have to scroll horizontally. Reversible: delete
   this block to restore the wider desktop layout.
   ========================================================================= */
@media (max-width: 768px) {.vegas-table,
  .banker-table,
  .skins-table,
  .junk-table {
    width: 100%;
    min-width: 0;
  }
  .vegas-table th,
  .vegas-table td,
  .banker-table th,
  .banker-table td,
  .skins-table th,
  .skins-table td,
  .junk-table th,
  .junk-table td {
    padding: 3px 4px;
    font-size: var(--text-sm);
  }
  .vegas-table tfoot td,
  .banker-table tfoot td,
  .skins-table tfoot td,
  .junk-table tfoot td {
    padding: 4px 6px;
    font-size: var(--text-sm);
  }
  .vegas-table tfoot td:first-child,
  .banker-table tfoot td:first-child,
  .skins-table tfoot td:first-child,
  .junk-table tfoot td:first-child {
    padding-left: 6px;
  }
  /* Shrink the hole-number column */
  .vegas-table thead th:first-child,
  .banker-table thead th:first-child,
  .skins-table thead th:first-child,
  .junk-table thead th:first-child,
  .vegas-table tbody td:first-child,
  .banker-table tbody td:first-child,
  .skins-table tbody td:first-child,
  .junk-table tbody td:first-child {
    width: auto !important;
    min-width: 40px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Skins: allow the "Holes Skinned" cell to wrap so it uses its space
     efficiently, and tighten row height so empty rows aren't huge. */
  #skinsTable td,
  #skinsTable th {
    white-space: normal;
    line-height: 1.25;
  }
  #skinsTable tbody tr th,
  #skinsTable tbody tr td {
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  #skinsTable tbody tr th {
    text-align: left;
    padding-left: 6px;
    font-size: var(--text-sm);
  }
  /* Right-align numeric Total/Winnings so ints and — align */
  #skinsTable tbody tr td:nth-child(3),
  #skinsTable tbody tr td:nth-child(4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 42px;
  }

  /* Hi-Lo: tighten row heights on both summary and hole-by-hole tables */
  #hiloTable tbody td,
  #hiloTable tbody th,
  #hiloHoleTable tbody td,
  #hiloHoleTable tbody th {
    padding-top: 4px;
    padding-bottom: 4px;
    height: auto;
    font-size: var(--text-sm);
    line-height: 1.25;
  }
  #hiloTable tbody th,
  #hiloHoleTable tbody th {
    padding-left: 6px;
    text-align: left;
  }
  #hiloHoleTable tbody td {
    white-space: normal;
  }
  /* Shrink "Hole" column in hilo hole-by-hole */
  #hiloHoleTable thead th:first-child,
  #hiloHoleTable tbody td:first-child {
    width: 42px !important;
    min-width: 36px !important;
  }
}

/* Narrow phones (≤480px): show ONLY the Result block in the inline summary.
   480px catches all modern iPhones (iPhone SE 375, iPhone 12/13/14 390,
   iPhone Plus 414, iPhone Pro Max 430). */
@media (max-width: 480px) {
  .bss-grid {
    display: block;
    font-size: calc(11px + var(--font-size-step));
    width: 100%;
  }
  .bss-grid .bss-col:not(.bss-col-result) {
    display: none;
  }
  .bss-col-result {
    display: block !important;
    width: 100% !important;
  }
  .bss-col-result .bss-col-label { display: none; }
  .bss-result-block {
    display: block;
    width: 100%;
    font-size: calc(11px + var(--font-size-step));
  }
  .banker-sheet-summary-cell { padding: 4px 6px !important; }
}

/* =========================
   Responsive Design
   Appended from main.css
   ========================= */

/* =========================
   Responsive Design

   CANONICAL BREAKPOINT SCALE (use these exact values for all new media queries):
     phone:    max-width: 480px  (iPhones SE 375 .. Pro Max 430, all phones)
     tablet:   max-width: 768px  (small tablets / large phones in landscape)
     desktop:  min-width: 769px
     large:    min-width: 1200px (extra-wide layouts)

   Adjacent boundary pairs to use:
     phone end / non-phone start:    max-width: 480px / min-width: 481px
     tablet end / desktop start:     max-width: 768px / min-width: 769px

   Existing 600px and 900px queries are legacy; new code should not add them.
   ========================= */

/* Mobile landscape / Small tablet (768px and below) */
@media (max-width: 768px) {
  .banker-table th,
  .banker-table td,
  .skins-table th,
  .skins-table td,
  .junk-table th,
  .junk-table td,
  .vegas-table th,
  .vegas-table td {
    padding: var(--space-xs) var(--space-sm);
  }
  .entry-switcher-btn {
    padding: 10px 12px;
    min-height: var(--footer-action-h);
    font-size: 15px;
  }

  .scorecard-footer-controls > .btn {
    font-size: 15px !important;
  }

  .scorecard-footer-controls > .scorecard-theme-toggle,
  .scorecard-footer-controls > .scorecard-main-options-icon,
  .scorecard-footer-controls > .scorecard-clear-actions-toggle {
    font-size: 28px !important;
  }
  .game-section > *:not(.vegas-wrap):not(.banker-wrap):not(.live-results-panel):not(.live-results-card):not(#bankerFooterTotals):not(.vegas-controls):not(.hilo-bottom-results):not(.game-options-panel):not(.results-card-wrap):not(.game-scroll-body) {
    padding-left: var(--text-md);
    padding-right: var(--text-md);
  }

  .game-scroll-body > *:not(.vegas-wrap):not(.banker-wrap) {
    padding-left: var(--text-md);
    padding-right: var(--text-md);
  }}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .game-toggle {
    padding: 7px 2px;
    min-height: var(--footer-action-h);
    font-size: 15px;
  }}

/* =========================================================================
   Mobile compaction for game tables (≤768px)
   Removes hardcoded min-widths and cell padding on Vegas/Skins/Junk/Hi-Lo/
   Banker tables so users don't have to scroll horizontally. Reversible: delete
   this block to restore the wider desktop layout.
   ========================================================================= */
@media (max-width: 768px) {  .vegas-table th,
  .vegas-table td,
  .banker-table th,
  .banker-table td,
  .skins-table th,
  .skins-table td,
  .junk-table th,
  .junk-table td {
    padding: 3px 4px;
    font-size: var(--text-sm);
  }}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

@media (max-width: 768px) {
  :root[data-theme="light"] #scorecard .score-input {
    background: #ffffff;
  }
}

@media (max-width: 600px) {
  :root[data-theme="light"] #scorecard .score-input {
    background: #ffffff;
  }
}