/* Mobile-only layer. Keep desktop rules in style.css unchanged.
   The link's media attribute AND this query protect desktop/TV layouts. */
@media (max-width: 760px) {
  .site-header, main, .site-footer {
    width: calc(100% - 24px);
    max-width: var(--page-width);
  }

  .view, .view :where(section, article, aside, form, fieldset, label) {
    min-width: 0;
  }

  .view :is(h1, h2, h3, h4, p), .lan-ready-list li {
    overflow-wrap: anywhere;
  }

  /* Keep the last menu item reachable on short screens and in landscape. */
  .main-nav {
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .menu-toggle, .nav-link { min-height: 44px; }
  .nav-link { font-size: 0.8rem; }

  /* 16px fields avoid focus zoom on iOS. Do not disable pinch zoom. */
  .view input:not([type="checkbox"]):not([type="radio"]),
  .view select, .view textarea,
  .password-change-gate input {
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    font-size: 16px;
    scroll-margin-block: 80px;
  }
  .view input[type="file"] { width: 100%; font-size: 0.85rem; }
  .view input[type="checkbox"], .view input[type="radio"] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }
  .view button, .view a[class*="button"], .password-change-gate button {
    min-height: 44px;
    max-width: 100%;
    touch-action: manipulation;
    overflow-wrap: anywhere;
  }
  .view button:focus-visible, .main-nav a:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
  }

  .access-card, .players-intro, .discord-hero, .food-hero,
  .games-hero, .admin-hero, .tournament-hero, .draw-hero {
    padding: 24px 18px;
    gap: 24px;
  }
  .access-card h1, .players-intro h1, .discord-hero h1,
  .food-hero h1, .games-hero h1, .admin-hero h1,
  .tournament-hero h1, .draw-hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .access-countdown .countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .access-countdown .time-separator { display: none; }
  .access-countdown .time-unit { min-width: 0; }
  .access-countdown .time-unit strong { font-size: clamp(1.5rem, 7vw, 2.4rem); }

  .players-layout, .admin-layout, .tournament-layout,
  .food-layout, .games-layout, .tournament-match-form__players {
    grid-template-columns: minmax(0, 1fr);
  }
  .players-signup-panel, .roster-panel, .admin-panel,
  .food-command, .food-panel, .food-admin-panel,
  .games-command, .games-browser, .games-panel, .games-admin-panel,
  .tournament-command, .tournament-squads, .tournament-scoreboard,
  .tournament-mvp, .tournament-bracket, .tournament-schedule,
  .discord-live-panel, .discord-voice-panel {
    padding: 20px 16px;
  }
  .admin-form-grid, .player-form, .food-option-form,
  .games-store-search, .games-store-search__form,
  .games-browser__controls { grid-template-columns: minmax(0, 1fr); }
  .food-field--wide { grid-column: auto; }
  .admin-form-actions, .food-form__actions, .discord-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .admin-form-actions > button, .food-form__actions > button,
  .discord-actions > a, .discord-actions > button { flex: 1 1 180px; }
  .admin-player-row__edit { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; text-align: left; }
  .admin-player-row__identity { grid-column: 1 / -1; }
  .admin-player-row__meta { min-width: 0; }
  .admin-player-row__activity { max-width: none; white-space: normal; }
  .admin-account, .admin-account-list > li { min-width: 0; overflow-wrap: anywhere; }
  .player-card__content--with-art { grid-template-columns: minmax(0, 1fr); }
  .player-card__art { width: min(100%, 240px); justify-self: center; }
  .player-card__content--with-art .player-details { grid-template-columns: minmax(0, 1fr); }

  /* Scroll only the standings, not the entire CUP page. All columns remain. */
  .tournament-score-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .tournament-score-table-wrap::before {
    content: "Svep tabellen i sidled för alla resultat →";
    display: block;
    position: sticky;
    left: 0;
    padding: 8px 2px 12px;
    color: var(--muted);
    font-size: 0.8rem;
  }
  .tournament-score-table { min-width: 710px; }
  .tournament-score-table--mvp { min-width: 470px; }
  .tournament-score-table th, .tournament-score-table td { padding: 12px 10px; font-size: 0.8rem; }
  .tournament-section-heading, .tournament-match-form__heading { flex-wrap: wrap; gap: 12px; }
  .tournament-match-form { padding: 14px 10px; }
  .tournament-match-form__fields { grid-template-columns: minmax(0, 1fr); }
  .tournament-field--player { grid-column: auto; }
  .tournament-match-form__player { padding: 12px 8px; }
  .tournament-match-form__player-fields { gap: 6px; }
  .tournament-match-form__player-fields input { padding-inline: 7px; width: 100%; }
  .tournament-match-form__player-fields label > span { font-size: 0.65rem; letter-spacing: 0.02em; }

  .draw-console { padding: 20px 16px; }
  .draw-console__legend { max-width: 100%; min-width: 0; }
  .draw-format-control { min-width: 0; }
  .draw-format-control select { width: 100%; padding-inline: 6px; }
  .food-wheel { width: min(100%, 290px); max-width: 100%; }
  .food-stats, .games-stats { min-width: 0; width: 100%; }
  .food-stats > div, .games-stats > div { min-width: 0; padding-inline: 8px; }
  .food-option__admin-actions { flex-wrap: wrap; }
  .games-admin-panel__action { min-width: 0; width: 100%; }
  .games-admin-panel__buttons { flex-wrap: wrap; }
  .games-sort, .games-sort select { width: 100%; min-width: 0; }

  .lan-control { padding: 20px 16px; }
  .lan-control-actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .lan-control-actions > *, .lan-control select, #lan-receiver, #lan-ready-toggle { width: 100%; min-width: 0; }
  .lan-ready-list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lan-ready-list li { padding: 12px; }
  .tv-screen { padding: 12px; }
  .tv-panel { padding: 18px 12px; }
  .tv-director-controls__actions { grid-template-columns: minmax(0, 1fr); }
  .tv-stream-stage { min-height: 0; aspect-ratio: 16 / 9; }
  .tv-stream-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-squad-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-show-overlay { padding: 16px; }
  .tv-show-overlay__content { width: 100%; }
  .tv-show-overlay__actions { flex-wrap: wrap; }
  .tv-award-console { max-height: calc(100dvh - 90px); overflow-y: auto; }
  .tv-screen:fullscreen .tv-grid {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .tv-screen:fullscreen .tv-stream-stage { min-height: 0; }
  .site-footer { flex-wrap: wrap; gap: 12px; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  .view .game-card { grid-template-columns: minmax(0, 1fr); }
  .game-card__art { min-height: 0; height: 140px; max-height: 150px; }
  .discord-live-panel__status { grid-template-columns: minmax(0, 1fr); }
  .tournament-match-form__player-fields { grid-template-columns: minmax(0, 1fr); }
}