/**
 * mobile-responsive.css — Global mobile responsiveness fixes for RankForged
 * Owns: shared mobile breakpoints, table reflow, grid adjustments, touch targets
 * Does NOT own: page-specific layouts, theming, typography loading
 *
 * Included by every public HTML page via <link rel="stylesheet" href="/mobile-responsive.css">
 * Uses 4 standard breakpoints: 768px (tablet), 480px (mobile), 414px (large phone), 360px (small mobile)
 */

/* ── GLOBAL MOBILE FIXES ─────────────────────────────────────────── */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Ensure images never overflow container */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Ensure all containers respect viewport */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent fixed/absolute positioned elements from causing overflow */
[style*="position: fixed"],
[style*="position: absolute"] {
  max-width: 100vw;
}

/* Force inline max-width to never exceed viewport */
@media (max-width: 768px) {
  [style*="max-width"] {
    max-width: 100% !important;
  }
  /* Force any element with inline width > viewport to shrink */
  [style*="width"] {
    max-width: 100% !important;
  }
  /* Prevent inline min-width from causing overflow */
  [style*="min-width: 3"],
  [style*="min-width: 4"],
  [style*="min-width: 5"],
  [style*="min-width: 6"],
  [style*="min-width: 7"],
  [style*="min-width: 8"],
  [style*="min-width: 9"],
  [style*="min-width:3"],
  [style*="min-width:4"],
  [style*="min-width:5"],
  [style*="min-width:6"],
  [style*="min-width:7"],
  [style*="min-width:8"],
  [style*="min-width:9"] {
    min-width: 0 !important;
  }
}

/* ── TABLET BREAKPOINT (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {

  /* --- Page headers --- */
  .page-header {
    padding: 2.5rem 1rem 1.5rem !important;
  }
  .page-header h1 {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }
  .page-header p {
    font-size: 0.95rem !important;
  }

  /* --- Hero sections --- */
  .hero {
    padding: 2.5rem 1rem 2rem !important;
    min-height: auto !important;
  }
  .hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
  }
  .hero p {
    font-size: 0.9rem !important;
  }
  .about-hero {
    padding: 5rem 1.25rem 3rem !important;
  }

  /* --- Landing page hero logo --- */
  .hero-logo img {
    height: 180px !important;
    width: auto !important;
  }

  /* --- Landing page nav fix --- */
  .nav {
    padding: 0.75rem 1rem !important;
  }
  .nav-links {
    display: none !important;
  }

  /* --- Container padding --- */
  .leaderboard-container,
  .container,
  .page-container,
  .page-content,
  .main-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .page-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* --- Grid layouts: collapse to fewer columns --- */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Filter bars --- */
  .filter-bar {
    padding: 0 1rem !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .filter-btn, .filter-pill {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }

  /* --- Card grids --- */
  .leagues-grid,
  .teams-grid,
  .players-grid,
  .crucible-sub-grid,
  .publisher-grid {
    grid-template-columns: 1fr !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 12px !important;
  }

  /* --- Tables: horizontal scroll wrapper --- */
  .table-wrapper {
    border-radius: 10px !important;
  }
  .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* --- General table mobile fixes --- */
  table {
    min-width: 0 !important;
    table-layout: auto !important;
  }
  table th, table td {
    padding: 0.6rem 0.65rem !important;
    font-size: 0.78rem !important;
    white-space: normal !important;
    word-break: break-word;
  }

  /* --- Leaderboard table: hide less-important columns on tablet --- */
  .leaderboard-table,
  table.leaderboard-table {
    table-layout: auto !important;
    width: 100% !important;
  }
  /* Reset all fixed column widths from cols-game / cols-all classes */
  .leaderboard-table.cols-game thead th,
  .leaderboard-table.cols-all thead th {
    width: auto !important;
  }
  /* Hide Avatar (col 2), Region (col 5), Role (col 6), Verified (col 8) on tablet */
  .leaderboard-table th:nth-child(2),
  .leaderboard-table td:nth-child(2),
  table.leaderboard-table th:nth-child(2),
  table.leaderboard-table td:nth-child(2),
  .leaderboard-table th:nth-child(5),
  .leaderboard-table td:nth-child(5),
  table.leaderboard-table th:nth-child(5),
  table.leaderboard-table td:nth-child(5),
  .leaderboard-table th:nth-child(6),
  .leaderboard-table td:nth-child(6),
  table.leaderboard-table th:nth-child(6),
  table.leaderboard-table td:nth-child(6),
  .leaderboard-table th:nth-child(8),
  .leaderboard-table td:nth-child(8),
  table.leaderboard-table th:nth-child(8),
  table.leaderboard-table td:nth-child(8) {
    display: none !important;
  }
  .leaderboard-table th,
  .leaderboard-table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .leaderboard-table .rank-cell {
    width: auto !important;
    min-width: 32px;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }
  .leaderboard-table .forge-score {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .leaderboard-table .player-name-link {
    font-size: 0.85rem !important;
    display: block !important;
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .leaderboard-table .ign-text {
    font-size: 0.72rem !important;
    display: block !important;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }
  /* Top row adjustments */
  .top-row td {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }

  /* --- Form layouts --- */
  .form-row,
  .form-grid,
  .layers-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* --- Footer --- */
  footer {
    padding: 2rem 1rem !important;
  }
  footer .footer-links,
  footer .footer-grid {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* --- Buttons: ensure touch-friendly size --- */
  button, a.btn, .btn, [class*="cta-btn"] {
    min-height: 44px;
  }

  /* --- Comparison page --- */
  .selectors-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .vs-divider {
    display: none !important;
  }
  .score-hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
  }

  /* --- Crucible section --- */
  .crucible-section {
    padding: 0 1rem !important;
  }

  /* --- Steps / How-it-works rows --- */
  .steps-row,
  .how-it-works-row,
  .how-to-steps,
  .get-started-steps {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .gs-step {
    border-radius: 12px !important;
  }
  .gs-connector {
    width: auto !important;
    height: 24px !important;
  }
  .gs-connector::before {
    width: 2px !important;
    height: 16px !important;
  }
  .gs-connector::after {
    display: none !important;
  }

  /* --- CTA strips --- */
  .cta-strip {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* --- Modal / dialog overlays --- */
  .modal-content, .dialog-content, .modal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 1rem auto !important;
    padding: 1.25rem !important;
  }

  /* --- Admin panel tabs: horizontal scroll --- */
  .admin-tabs, .tab-bar, .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  /* --- Landing page sections --- */
  .story-section,
  .problem-section {
    padding: 3rem 1.25rem !important;
  }
  .about-cta {
    padding: 3rem 1.25rem 4rem !important;
  }
  .get-started-section {
    padding: 3rem 1rem 4rem !important;
  }
  .founders-section {
    padding: 4rem 1.25rem !important;
  }
  .founder-teaser-section {
    padding: 3rem 1.25rem !important;
  }
  .metrics-showcase-inner,
  .how-inner,
  .get-started-inner,
  .founders-inner {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* --- Pricing grid: stack cards vertically --- */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* --- Profile page sections --- */
  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .profile-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Team/league page layout fixes --- */
  .team-header,
  .league-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .roster-strip {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* --- Streaming page --- */
  .stream-grid,
  .live-grid,
  .vod-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Form cards / setup sections --- */
  .form-card {
    padding: 20px !important;
  }
  .setup-section {
    margin: 2rem auto !important;
    padding: 0 1rem !important;
  }

  /* --- Proof/feature cards --- */
  .proof-card {
    padding: 1.25rem !important;
  }

  /* --- Format grid (tournament) --- */
  .format-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* --- Section labels --- */
  .section-label {
    font-size: 0.7rem !important;
  }

  /* --- Hall of Fame --- */
  .hof-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Account services --- */
  .layer-card {
    padding: 14px !important;
  }

  /* --- Battle monitor / replay --- */
  .battle-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Inline editor card editing --- */
  .card-edit-modal {
    width: 95vw !important;
    max-width: 95vw !important;
  }

  /* --- Admin panel: collapse sidebar to top bar --- */
  .admin-layout {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .admin-sidebar, .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    overflow-x: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0.75rem !important;
  }
  .admin-sidebar a, .sidebar a, .sidebar .nav-item {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
  .panel {
    max-width: 100% !important;
    padding: 1rem !important;
  }

  /* --- Multi-column stat grids: collapse --- */
  .stats-strip,
  .verification-stats,
  .vin-stats,
  .division-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* --- Tables: ensure scrollable --- */
  .table-scroll, .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Navbar: reduce padding --- */
  .navbar {
    padding: 0 1rem !important;
  }

  /* --- Tournament form rows --- */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* --- Match hero/teams display --- */
  .match-hero {
    padding: 16px !important;
  }
  .teams-display {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .team-side {
    min-width: unset !important;
    width: 100% !important;
  }

  /* --- Forge profile: shrink stats grid --- */
  .forge-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .forge-score-num {
    font-size: 2.5rem !important;
  }
  .player-name {
    font-size: 1.4rem !important;
  }

  /* --- OAuth / setup verification grids --- */
  .verification-grid,
  .setup-grid,
  .oauth-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- Mode toggle (recruitment) --- */
  .mode-toggle-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* --- Stream info / match selector --- */
  .stream-info-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* --- Status bar (tournament) --- */
  .status-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* --- Founder teaser inner grid --- */
  .founder-teaser-inner {
    grid-template-columns: 1fr !important;
  }

  /* --- ACE tournament screen grid --- */
  .screen-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- KPI / stat strips with inline grid styles --- */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Inline editor / card edit modals --- */
  .ie-modal, .card-edit-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    left: 2.5vw !important;
  }

  /* --- Schedule / battle pages --- */
  .schedule-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Overlay setup grid --- */
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Publisher portal grids --- */
  .publisher-config-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Ensure all [style] max-width elements don't overflow --- */
  .page-wrap, .terminal-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── MOBILE BREAKPOINT (≤480px) ──────────────────────────────────── */
@media (max-width: 480px) {

  /* --- Page headers further reduced --- */
  .page-header {
    padding: 2rem 0.75rem 1rem !important;
  }
  .page-header h1 {
    font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
  }
  .page-header p {
    font-size: 0.85rem !important;
  }

  /* --- Hero sections --- */
  .hero {
    padding: 2rem 0.75rem 1.5rem !important;
    min-height: auto !important;
  }
  .hero h1 {
    font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
  }
  .hero p {
    font-size: 0.85rem !important;
    max-width: 100% !important;
  }
  .about-hero {
    padding: 4rem 0.75rem 2.5rem !important;
  }
  .about-hero h1 {
    font-size: clamp(1.4rem, 8vw, 2rem) !important;
  }
  .hero-logo img {
    height: 140px !important;
  }
  .hero-content {
    max-width: 100% !important;
  }

  /* --- Badge (landing page) --- */
  .badge {
    font-size: 0.62rem !important;
    padding: 4px 12px !important;
  }

  /* --- Stats grids: single column --- */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Leaderboard table hidden at ≤600px (card layout shown instead).
   * No nth-child column hiding needed here — see leaderboard.html. */

  /* --- Card padding reduction --- */
  .stat-card,
  .player-card,
  .team-card,
  .league-card,
  .founders-card {
    padding: 12px !important;
  }

  /* --- Load more button --- */
  .load-more-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- Profile page --- */
  .forge-score-num {
    font-size: 2.5rem !important;
  }
  .forge-score-num .decimal {
    font-size: 1.5rem !important;
  }
  .profile-stats {
    grid-template-columns: 1fr !important;
  }

  /* --- Game badges --- */
  .game-badges {
    max-width: 140px !important;
  }

  /* --- Filter bars: wrap chips --- */
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .filter-btn, .filter-pill {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
  }

  /* --- Landing page: steps stack fully --- */
  .get-started-steps {
    gap: 8px !important;
  }
  .gs-step {
    padding: 1.25rem !important;
  }

  /* --- Pricing cards --- */
  .founders-card {
    padding: 1.25rem 1rem !important;
  }

  /* --- General section padding squeeze --- */
  .story-section,
  .problem-section {
    padding: 2.5rem 0.75rem !important;
  }
  .founders-section {
    padding: 3rem 0.75rem !important;
  }

  /* --- Format grid: stack fully --- */
  .format-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Table header/cell squeeze --- */
  table th, table td {
    padding: 0.5rem 0.4rem !important;
    font-size: 0.72rem !important;
  }

  /* --- Modals fill screen --- */
  .modal-content, .dialog-content, .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh;
  }

  /* --- Section headers --- */
  h2 {
    font-size: clamp(1.2rem, 6vw, 1.6rem) !important;
  }

  /* --- Containers --- */
  .page-wrap,
  .main-container,
  .page-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* --- Multi-column stat grids: single column --- */
  .stats-strip,
  .verification-stats,
  .vin-stats,
  .division-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Admin sidebar: tighter --- */
  .admin-sidebar, .sidebar {
    padding: 0.5rem !important;
  }
  .panel {
    padding: 0.75rem !important;
  }

  /* --- Forge profile: further shrink --- */
  .forge-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .forge-score-num {
    font-size: 2rem !important;
  }
  .player-name {
    font-size: 1.2rem !important;
  }

  /* --- Match teams: full stack --- */
  .team-side {
    min-width: unset !important;
  }
  .match-hero {
    padding: 12px !important;
  }

  /* --- Comparison stat-row: tighter --- */
  .stat-row {
    grid-template-columns: 1fr 30px 1fr !important;
    padding: 8px !important;
  }

  /* --- Hero buttons: stack vertically --- */
  .hero-actions {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .get-started-footer {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* --- ACE tournament: single column --- */
  .screen-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Inline grids with fixed 3+ columns: collapse --- */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Overlay / setup grids --- */
  .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Tab bars: ensure horizontal scroll without wrapping --- */
  .tab-row, .game-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tab-row::-webkit-scrollbar,
  .game-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ── LARGE PHONE (≤414px) — targeting iPhone Plus / Pro Max ────── */
@media (max-width: 414px) {

  /* Leaderboard table hidden at ≤600px — card layout shown instead.
   * These leaderboard table rules are dead code below 600px. */

  /* --- Game tabs scroll --- */
  .game-tabs {
    padding: 0.75rem 0.75rem 0 !important;
  }
  .game-tab {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }

  /* --- Nav logo --- */
  .rf-nav-logo {
    font-size: 1rem !important;
  }
  .rf-nav {
    padding: 0 0.75rem !important;
  }

  /* --- Footer --- */
  footer p {
    font-size: 0.72rem !important;
  }

  /* --- Admin panel tables: min-width for scroll --- */
  .admin-layout table {
    min-width: 500px !important;
  }

  /* --- Hero sections: tighter --- */
  .hof-hero {
    padding: 3rem 0.75rem 2rem !important;
  }
  .hero-logo img {
    height: 120px !important;
  }
  .hero h1 {
    font-size: clamp(1.2rem, 8vw, 1.6rem) !important;
    letter-spacing: -0.02em !important;
  }

  /* --- OAuth / banner boxes --- */
  .oauth-banner, [class*="oauth-"] {
    min-width: unset !important;
  }
  input, select, textarea {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  /* --- Flex items with min-width: prevent overflow on mobile --- */
  [style*="min-width: 200px"],
  [style*="min-width:200px"],
  [style*="min-width: 220px"],
  [style*="min-width:220px"],
  [style*="min-width: 180px"],
  [style*="min-width:180px"] {
    min-width: unset !important;
    width: 100% !important;
  }

  /* --- Inline flex rows: stack vertically on mobile --- */
  [style*="display: flex"][style*="gap"],
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* --- Player cards grid --- */
  .players-grid {
    gap: 8px !important;
  }

  /* --- Sections with fixed max-width: ensure no overflow --- */
  [style*="max-width"] {
    max-width: 100% !important;
  }

  /* --- Dashboard sections (app.html) --- */
  .dashboard-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .dashboard-header {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ── SMALL MOBILE (≤360px) ───────────────────────────────────────── */
@media (max-width: 360px) {
  .page-header h1 {
    font-size: 1.2rem !important;
  }

  /* Leaderboard table hidden at ≤600px — card layout shown instead. */

  /* --- General squeeze --- */
  h2 {
    font-size: 1.1rem !important;
  }
  .page-header p,
  .hero p {
    font-size: 0.78rem !important;
  }

  /* --- Hero: minimal --- */
  .hero-logo img {
    height: 100px !important;
  }
  .hero {
    padding: 1.5rem 0.5rem 1rem !important;
  }

  /* --- Cards --- */
  .stat-card,
  .player-card,
  .team-card,
  .league-card,
  .founders-card,
  .proof-card,
  .vod-card,
  .live-card,
  .step-card {
    padding: 10px !important;
  }

  /* --- Buttons --- */
  button, a.btn, .btn {
    font-size: 0.78rem !important;
    padding: 8px 14px !important;
  }

  /* --- All containers: edge-to-edge --- */
  .leaderboard-container,
  .container,
  .page-container,
  .page-content,
  .main-container,
  .page-wrap {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ── LANDSCAPE PHONE ─────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .rf-nav {
    height: 48px !important;
  }
  .rf-nav-mobile {
    top: 48px !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  .page-header {
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ── EXTRA MOBILE HARDENING (≤768px) ────────────────────────────── */
@media (max-width: 768px) {
  /* Legacy .nav from older pages (teams, players, leagues) — hide, since rf-nav handles it */
  .nav .nav-links { display: none !important; }
  .nav { padding: 0.75rem 1rem !important; }

  /* Inline flex/grid items: prevent overflow from wide children */
  [style*="display: flex"] > * {
    min-width: 0;
  }
  [style*="display: grid"] > * {
    min-width: 0;
  }

  /* Force tables inside scrollable wrappers to be scrollable */
  table {
    max-width: 100%;
  }

  /* Leaderboard table hidden at ≤600px — card layout shown instead. */

  /* Compact score display for all score elements */
  .forge-score, .compiled-score {
    white-space: nowrap !important;
  }

  /* Page-wide max-width containers: full width */
  [style*="max-width: 1200px"],
  [style*="max-width: 1400px"],
  [style*="max-width:1200px"],
  [style*="max-width:1400px"] {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ── EXTRA MOBILE HARDENING (≤480px) ────────────────────────────── */
@media (max-width: 480px) {
  /* Leaderboard table hidden at ≤600px — card layout shown instead. */

  /* Game badges: hide on narrow */
  .game-badges {
    display: none !important;
  }

  /* Region tags: smaller */
  .region-tag {
    padding: 1px 6px !important;
    font-size: 0.65rem !important;
  }

  /* Compact form inputs */
  input, select, textarea {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  /* Footer: compact */
  footer {
    padding: 1.5rem 0.75rem !important;
  }
  footer p {
    font-size: 0.72rem !important;
  }
}

/* ── PRINT ───────────────────────────────────────────────────────── */
@media print {
  .rf-nav, .rf-nav-mobile, .rf-subnav,
  .theme-switcher, .load-more-wrapper {
    display: none !important;
  }
}