/* Responsive refinement layer. The full desktop names remain the accessible labels. */
.view-label-short, .table-scroll-hint {display: none}
.table-wrap:focus-visible {outline: 3px solid var(--section-color); outline-offset: 4px}

@media (max-width: 800px) {
  body {
    --mobile-gutter: clamp(16px, 4vw, 28px);
    --mobile-left: max(var(--mobile-gutter), env(safe-area-inset-left, 0px));
    --mobile-right: max(var(--mobile-gutter), env(safe-area-inset-right, 0px));
  }
  header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 12px; align-items: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) var(--mobile-right) 16px var(--mobile-left);
  }
  .brand {min-width: 0; min-height: 50px}
  .brand .brand-logo {width: 100px; max-width: 100%; height: auto}
  .share {margin: 0; padding: 10px 12px; min-height: 44px; font-size: .8125rem; white-space: nowrap}
  .share span {margin-left: 5px}
  .main-tabs {grid-column: 1 / -1; width: 100%; margin: 0; padding: 4px; gap: 4px; overflow: visible}
  .main-tabs a {min-width: 0; min-height: 48px; padding: 10px 6px; font-size: .8125rem; line-height: 1.35}
  main {padding: 28px var(--mobile-right) 48px var(--mobile-left)}
  .page, .intro>div, .view-intro>div, .predict-layout, .detail-grid, .fixture-grid {min-width: 0}
  .intro {display: block; margin: 0 0 26px}
  .intro .eyebrow {margin-bottom: 10px}
  .snapshot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    min-width: 0; margin-top: 18px; padding: 12px 14px; gap: 6px 12px;
  }
  .snapshot strong {font-size: .9375rem; margin: 0; line-height: 1.5}
  /* Match the league page's understated mobile update line. */
  :is(#global, #predictor) .intro .snapshot {
    justify-content: flex-start; margin-top: 7px; padding: 0; gap: 3px 6px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  :is(#global, #predictor) .intro .snapshot>span {font-size: .6875rem; line-height: 1.4; letter-spacing: .02em}
  :is(#global, #predictor) .intro .snapshot strong {font-size: .6875rem; font-weight: 500; line-height: 1.4}
  .section-heading {margin: 30px 0 18px; gap: 8px 16px}
  .feature-strip {margin: 24px 0 30px}
  .feature-dark {padding: 16px}

  /* Bring the first rankings into the mobile landing view through tighter spacing. */
  main:has(>#global:not([hidden])) {padding-top: 16px}
  #global>.intro {margin: 0 0 12px}
  #global .intro .eyebrow {margin-bottom: 6px}
  #global .intro h1 {margin-bottom: 8px}
  #global-summary {line-height: 1.6}
  #global>.table-caption {margin: 0 0 8px}
  #global .table-caption .global-scale-note {font-size: .875rem; line-height: 1.5}

  .league-tabs {gap: 6px; margin-bottom: 24px; padding-bottom: 18px}
  .league-tabs a {min-width: 0; min-height: 48px; font-size: .78125rem; padding: 9px 6px; overflow-wrap: anywhere}
  .pl-tabs {margin-bottom: 22px; gap: 5px; padding: 5px}
  .pl-tabs button {min-width: 0; min-height: 58px; padding: 9px 5px; font-size: .8125rem; line-height: 1.35}
  .view-intro {margin: 24px 0 16px}
  .score-guide {margin: 0 0 16px; padding: 8px 14px}
  .score-guide summary {min-height: 44px; padding: 10px 0; line-height: 1.6}
  #score-guide-content p:first-child {margin-top: 0}

  /* A predictable filter grid, with a full-width search field. */
  .controls {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 14px; margin-bottom: 20px}
  .controls label, .controls .search, #snapshot-label {min-width: 0; width: 100%; margin: 0}
  .controls .search, #global .controls>label:first-child {grid-column: 1 / -1}
  .controls select, .controls input[type=search], .player-selects select {width: 100%; min-width: 0; max-width: 100%; min-height: 48px; font-size: 1rem}
  #pl-fixtures-panel .controls>* {grid-column: 1 / -1; min-width: 0}
  .round-control {width: 100%; height: 50px}
  .round-control button {flex: 0 0 46px; width: 46px; height: 48px}
  .round-control select {flex: 1 1 0; width: 0; min-width: 0; min-height: 48px}
  #fixture-context {line-height: 1.65}

  /* Keep club identity visible while secondary metrics scroll horizontally. */
  #global-table, #pl-table {
    width: 100%; max-width: 100%; min-width: 0; container-type: inline-size;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    scrollbar-color: var(--section-edge) var(--section-wash);
    --global-view-width: calc(100vw - var(--mobile-left) - var(--mobile-right) - 2px);
    --league-view-width: calc(100vw - var(--mobile-left) - var(--mobile-right) - 2px);
  }
  #global-table table, #pl-table table {table-layout: fixed; border-collapse: separate; border-spacing: 0; min-width: 0}
  #global-table table {width: calc(var(--global-view-width) + 416px)}
  #global-table th.global-rank, #global-table td.global-rank {width: 36px; min-width: 0}
  #global-table th.global-club, #global-table td.global-club {width: calc(var(--global-view-width) - 128px)}
  #global-table th.global-rating, #global-table td.global-rating {width: 92px; min-width: 0}
  #pl-table table {width: calc(var(--league-view-width) + var(--league-extra-width, 448px))}
  #pl-table th:first-child, #pl-table td:first-child {width: 36px; min-width: 0}
  #pl-table th:nth-child(2), #pl-table td:nth-child(2) {width: calc(var(--league-view-width) - 132px); white-space: normal}
  #pl-table th:nth-child(3), #pl-table td:nth-child(3) {width: 96px; min-width: 0}
  #pl-table th:nth-child(n+4) {width: 112px}
  #pl-table .index-cell {min-width: 0}
  #global-table td, #pl-table td {padding: 12px 10px; vertical-align: middle}
  #global-table .global-rank, #pl-table th:first-child, #pl-table td:first-child {padding-left: 5px; padding-right: 5px; text-align: center}
  :is(#global-table, #pl-table) th:has(.sort-header) {padding: 0}
  #global-table .sort-header, #pl-table .sort-header {padding: 12px 10px; min-height: 58px; white-space: normal; gap: 4px; line-height: 1.35}
  #global-table .team-name, #pl-table .team-name {width: 100%; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.4; gap: 6px}
  #global-table .club-text, #pl-table .club-text {min-width: 0; overflow-wrap: anywhere}
  :is(#global-table, #pl-table) :is(th, td):nth-child(2) {position: sticky; left: 0; z-index: 1; background: var(--row-surface, var(--surface)); box-shadow: 1px 0 var(--line)}
  :is(#global-table, #pl-table) thead th:nth-child(2) {z-index: 2; background: var(--section-tint)}
  :is(#global-table, #pl-table) tbody tr:nth-child(even) td:nth-child(2) {background: var(--row-surface, var(--surface-muted))}
  :is(#global-table, #pl-table) tbody tr:hover td:nth-child(2) {background: var(--row-surface, var(--surface-hover))}
  #pl-table .strength-rating-meter, #pl-table .season-score-meter, #pl-table .index-meter {width: 72px; max-width: 100%}
  #pl-table .goal-visual {flex-direction: column; gap: 6px}
  #pl-table .goal-visual>.num {order: 0; min-width: 0}
  #pl-table .goal-visual>.seg-bar {order: 1; width: 72px; max-width: 100%; height: 12px}
  .table-scroll-hint, .global-mobile-note {display: block; font-size: .75rem; color: var(--section-color); line-height: 1.5}
  .table-scroll-hint {margin: 16px 0 10px}
  .table-caption {gap: 6px; align-items: flex-start; flex-direction: column}
  #global .table-footer .secondary {align-self: stretch; min-height: 48px; width: 100%; white-space: normal}
  .empty {padding: 24px!important; white-space: normal}
  #global-table td.empty, #pl-table td.empty {padding: 0!important; text-align: left}
  #global-table td.empty>span, #pl-table td.empty>span {display: block; position: sticky; left: 0; padding: 28px 18px; text-align: center}
  #global-table td.empty>span {width: var(--global-view-width)}
  #pl-table td.empty>span {width: var(--league-view-width)}
  @supports (width: 1cqw) {
    #global-table table {--global-view-width: 100cqw}
    #pl-table table {--league-view-width: 100cqw}
  }

  /* Long club names should wrap inside cards rather than widen the page. */
  .fixture-grid, .predict-layout, .detail-grid {grid-template-columns: minmax(0, 1fr); gap: 18px}
  #prediction-output {scroll-margin-top: 16px}
  .fixture-card, .match-inputs, .result-card, .detail-grid article {min-width: 0; padding: 20px}
  .fixture-teams {grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)}
  .fixture-teams>div, .prediction-teams>div {min-width: 0}
  .fixture-teams .club-label, .prediction-teams .club-label {max-width: 100%}
  .fixture-meta {gap: 8px 12px; padding-bottom: 14px}
  .fixture-result {overflow-wrap: anywhere}
  .player-selects {grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 22px 0}
  .club-picker {min-width: 0}
  .club-picker label+label {margin-top: 12px}
  .swap {display: grid; place-items: center; justify-self: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--section-edge); border-radius: 50%; background: var(--section-tint); color: var(--section-color); transform: rotate(90deg)}
  .match-inputs fieldset {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px}
  .match-inputs fieldset label {display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 9px 10px; border: 1px solid var(--section-edge); border-radius: 8px; background: var(--surface-control); font-size: .875rem; line-height: 1.4}
  .match-inputs fieldset input {width: 18px; height: 18px; flex: 0 0 18px; margin: 0}
  .match-inputs fieldset label:has(input:checked) {background: var(--section-tint); border-color: var(--section-color)}
  .primary {min-height: 48px; gap: 12px}
  .result-card {min-height: 0}
  .prediction-teams {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px}
  .prediction-teams>div {display: flex; flex-direction: column}
  .prediction-teams .name {font-size: 1rem; line-height: 1.45; margin-bottom: 6px}
  .prediction-teams .goals {margin-top: auto; font-size: clamp(2.25rem, 10vw, 3rem); line-height: 1.3}
  .prob-labels {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: .75rem}
  .prob-labels strong {font-size: 1.125rem}
  .result-card .prob-labels {margin-top: 24px}
  .result-card .prob-labels strong {font-size: clamp(1.25rem, 5.5vw, 1.5rem)}
  .stat-row {gap: 12px}
  .stat-row>span {min-width: 0; flex: 1 1 0}
  .stat-row strong {max-width: 55%; overflow-wrap: anywhere}
  .detail-grid article h2 {font-size: 1.25rem; line-height: 1.4}

  /* Comfortable dialogs, readable footnotes and room for device safe areas. */
  dialog {width: min(520px, calc(100% - 24px)); max-height: 85vh; max-height: calc(100dvh - 32px); padding: 22px; overflow-y: auto; overscroll-behavior: contain}
  body:has(dialog[open]) {overflow: hidden}
  .close {position: sticky; top: 0; z-index: 3; display: grid; place-items: center; padding: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-muted)}
  .dialog-club {font-size: 1.5rem; line-height: 1.35}
  .dialog-index {font-size: 2.5rem; margin: 18px 0}
  .dialog-index small {display: block; font-size: .8125rem; margin-top: 3px}
  .footnote, .rating-scale-note {font-size: .8125rem; line-height: 1.7; overflow-wrap: anywhere}
  footer {padding: 20px var(--mobile-right) max(24px, env(safe-area-inset-bottom, 0px)) var(--mobile-left); font-size: .6875rem; line-height: 1.7; letter-spacing: .04em}
  #toast {width: max-content; max-width: calc(100% - 32px); bottom: max(20px, env(safe-area-inset-bottom, 0px)); text-align: center; overflow-wrap: anywhere}
}

@media (max-width: 550px) {
  h1 {font-size: clamp(1.875rem, 7.8vw, 2.5rem); margin-bottom: 14px}
  .pl-tabs {grid-template-columns: repeat(5, minmax(max-content, 1fr)); max-width: 100%; gap: 2px; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--section-edge) var(--section-tint)}
  .pl-tabs button {padding: 10px 1px; min-height: 68px; white-space: normal; overflow-wrap: normal; hyphens: none}
  .view-label-full {display: none}
  .view-label-short {display: block; white-space: nowrap}
  .fixture-card, .match-inputs, .result-card, .detail-grid article {padding: 18px}
  .fixture-teams {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0}
  .fixture-teams>.club:first-child {grid-column: 1; grid-row: 1}
  .fixture-teams>.club:last-child {grid-column: 2; grid-row: 1}
  .fixture-teams>div:nth-child(2) {grid-column: 1 / -1; grid-row: 2; justify-self: center}
  .fixture-teams .club {font-size: .9375rem}
  .score {font-size: 1.375rem; padding: 8px 14px; gap: 12px}
  .league-grid {padding: 14px}
  .league-row {grid-template-columns: minmax(0, 1.3fr) minmax(36px, .8fr) 44px; gap: 10px; font-size: .8125rem}
  .league-row>span {min-width: 0; overflow-wrap: anywhere}
}
@media (max-width: 380px) {
  #pl-ratings-panel .controls>label {grid-column: 1 / -1}
  .match-inputs fieldset {grid-template-columns: minmax(0, 1fr)}
}