/*
 * Copyright (c) 2026 漢威榜顧問有限公司 (Han Wei Consulting Co., Ltd.)
 * Unified Business Number: 24754963
 * Project: OC Grand Prix (ocgrandprix.com)
 * All rights reserved.
 *
 * Unauthorized copying, distribution, modification, or commercial use of this
 * file, in whole or in part, is strictly prohibited without prior written
 * permission from 漢威榜顧問有限公司.
 */

/* ═══════════════════════════════════════════════════════════
   OC GRAND PRIX — Mobile responsive baseline
   ═══════════════════════════════════════════════════════════
   Shared mobile/responsive rules applied to every page.
   Load this AFTER style.css (the browser cascades the same rules
   in the same order, so this is a pure organization move).

   Scope:
     • Generic classes used across many pages (layout, tables,
       grids, hamburger nav, breakpoint blocks).
   NOT in scope:
     • Page-specific mobile rules that reference element IDs/classes
       unique to one page (e.g. the spectator pages' #spec-infobar,
       #arena, #left-panel, #solo-sidebar…). Those stay in the
       owning page's own <style> block.
     • Non-mobile base styles — they remain in style.css.

   The spectator pages (battle-spectator, grand-prix-spectator,
   solo-spectator) are the reference implementation for mobile
   thinking. When adding generic mobile rules, prefer putting them
   here so every page inherits them by default.
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — hamburger nav toggle
   ══════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  justify-self: end;
  transition: color 0.2s, border-color 0.2s;
  /* Also works when injected into spectator's flex #header */
  flex-shrink: 0;
  margin-left: auto;
}
.nav-hamburger:hover { color: var(--amber); border-color: var(--amber); }

/* Mobile nav drawer */
.site-nav.mobile-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  background: var(--bg2);
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
}
.site-nav.mobile-open a {
  font-size: var(--fs-body);
  padding: 12px 24px;
  width: 100%;
  max-width: 280px;
  text-align: center;
}
/* Close button inside open mobile nav */
.nav-close-btn {
  display: none;
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 20px;
  padding: 6px 12px;
  cursor: pointer;
}
.site-nav.mobile-open .nav-close-btn { display: block; }

/* Mobile dropdowns — expand as accordion sections */
.site-nav.mobile-open .nav-dropdown {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.site-nav.mobile-open .nav-dropdown-trigger {
  font-size: var(--fs-body);
  padding: 12px 24px;
  width: 100%;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.site-nav.mobile-open .nav-dropdown-menu {
  display: none;
  position: static;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--border);
  margin-top: 0;
  padding: 4px 0;
  background: var(--bg3);
}

.site-nav.mobile-open .nav-dropdown.mobile-open .nav-dropdown-menu {
  display: block;
}

.site-nav.mobile-open .nav-dropdown-menu a {
  font-size: var(--fs-sm);
  padding: 10px 24px;
  text-align: center;
  border-left: none;
  border-bottom: 1px solid var(--border);
}

.site-nav.mobile-open .nav-dropdown-menu a:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — @media breakpoints
   Breakpoints:
     768px  — tablet / large phone landscape
     480px  — phone portrait
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Page padding ──────────────────────────────────────── */
  .page {
    padding: 16px 12px 24px;
    overflow-x: hidden;
  }

  /* ── Tables: horizontal scroll on mobile ───────────────── */
  .standings-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .round-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Site header: collapse to logo + hamburger ─────────── */
  body > .site-header,
  #app .site-header {
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
  }

  /* Hide the nav by default on mobile; show hamburger instead */
  body > .site-header .site-nav,
  #app .site-header .site-nav {
    display: none;
  }

  /* Hide LOBBY link in mobile nav — lobby is desktop-only */
  .site-nav.mobile-open a[href="/lobby.html"] {
    display: none;
  }

  /* Hide Download Agent link on mobile — desktop x86 Windows app only */
  a[href="/download/agent"] {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Logo smaller on mobile */
  .logo {
    font-size: 32px;
    letter-spacing: 2px;
  }

  /* ── Alpha banner ──────────────────────────────────────── */
  #alpha-banner {
    padding: 8px 12px;
    font-size: var(--fs-xs);
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Overview grid: single column ─────────────────────── */
  .overview-grid {
    grid-template-columns: 1fr;
  }

  /* ── Leaderboard table: horizontal scroll wrapper ──────── */
  .lb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Hide less important columns on mobile leaderboard */
  .lb-table th:nth-child(5),
  .lb-table td:nth-child(5),
  .lb-table th:nth-child(6),
  .lb-table td:nth-child(6),
  .lb-table th:nth-child(7),
  .lb-table td:nth-child(7) {
    display: none;
  }

  /* ── Stat tiles: 2 columns minimum ────────────────────── */
  .pstat-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* ── Records grid: single column ──────────────────────── */
  .records-grid {
    grid-template-columns: 1fr;
  }

  /* ── Race grid: single column ──────────────────────────── */
  .race-grid {
    grid-template-columns: 1fr;
  }

  /* ── Superlatives grid: single column ──────────────────── */
  .superlatives-grid {
    grid-template-columns: 1fr;
  }

  /* ── Section label: allow wrapping ────────────────────── */
  .section-label {
    white-space: normal;
    line-height: 1.6;
  }

  /* ── Stats bar ─────────────────────────────────────────── */
  .stats-bar {
    gap: 8px;
    padding: 12px;
    flex-wrap: wrap;
  }
  .stats-bar .stat {
    min-width: 60px;
  }
  .stats-bar .stat-value {
    font-size: 22px;
  }

  /* ── How-to-play hero ──────────────────────────────────── */
  .htp-hero {
    padding: 20px 16px;
  }
  .htp-hero h1 {
    font-size: 36px !important;
  }
  .htp-hero p {
    font-size: var(--fs-md) !important;
  }

  /* ── How-to-play grid: single column ───────────────────── */
  .htp-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── How-to-play step: tighter ─────────────────────────── */
  .htp-step {
    padding: 14px 16px;
    gap: 12px;
  }
  .htp-step-num {
    font-size: 36px;
    width: 36px;
  }

  /* ── How-to-play CTA row: stack ────────────────────────── */
  .htp-cta-row {
    flex-direction: column;
  }
  .htp-cta-row a {
    width: 100%;
  }

  /* ── Account identity block ────────────────────────────── */
  .acct-identity {
    flex-direction: column;
    align-items: flex-start;
  }
  .acct-name {
    font-size: 28px !important;
  }

  /* ── Solo benchmark grid ───────────────────────────────── */
  .solo-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Search row ────────────────────────────────────────── */
  .search-row {
    flex-direction: column;
  }
  .search-row button {
    width: 100%;
  }

  /* ── Spectator link row: stack ─────────────────────────── */
  .spectator-link-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .spec-link-url {
    width: 100%;
    flex: none;
  }

  /* ── Race screen: fixed 3-column grid (280px/1fr/260px) does
     not fit below 768px — stack into a single scrollable column
     with the center (live race view) shown first. ───────────── */
  .race-layout {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .race-left, .race-center, .race-right {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .race-center { order: -1; }
  .race-left, .race-right {
    max-height: 260px;
  }

  /* ── Results row: fixed 40/1fr/140/100/80 column grid doesn't
     fit narrow viewports — collapse to a 2-line card. ───────── */
  .result-row {
    grid-template-columns: 32px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 10px 12px;
  }
  .result-rank {
    grid-row: 1 / 3;
    font-size: var(--fs-lg);
  }
  .result-name {
    grid-column: 2 / 3;
  }
  .result-score {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    text-align: right;
  }
  .result-damage {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    text-align: left;
    font-size: var(--fs-md);
  }
  .result-hp {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    text-align: right;
    font-size: var(--fs-md);
  }

}

@media (max-width: 480px) {

  /* ── Logo even smaller ─────────────────────────────────── */
  .logo {
    font-size: 26px;
    letter-spacing: 1px;
  }

  /* ── Page padding tighter ──────────────────────────────── */
  .page {
    padding: 12px 10px 20px;
  }

  /* ── Stat tiles: 2 per row ─────────────────────────────── */
  .pstat-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Leaderboard table: hide rank column too ───────────── */
  .lb-table th:nth-child(3),
  .lb-table td:nth-child(3) {
    display: none;
  }

  /* ── Account personal bests table: hide attempts ──────── */
  .lb-table th:nth-child(4),
  .lb-table td:nth-child(4) {
    display: none;
  }

  /* ── Alpha banner: hide text, keep dismiss ─────────────── */
  #alpha-banner span {
    font-size: var(--fs-sm);
    letter-spacing: 1px;
  }

  /* ── Race side panels: a bit tighter on phones ─────────── */
  .race-left, .race-right {
    max-height: 200px;
  }

  /* ── Results row: drop score column, keep name/damage/hp ── */
  .result-row {
    grid-template-columns: 28px 1fr auto;
  }
  .result-score {
    font-size: 10px;
  }

}

/* ── Spectator chat — shared small-screen adjustment (battle +
   grand-prix spectators inject #spec-chat at runtime; the base
   widget styles live in style.css, only the narrow-viewport
   sizing moves here). ─────────────────────────────────────── */
@media (max-width: 700px) {
  .spec-chat {
    width: 70vw;
    max-width: 70vw;
    bottom: 48px;
    right: 8px;
  }
  .spec-chat-line { font-size: var(--fs-sm); }
}

/* ══════════════════════════════════════════════════════════
   INDEX PAGE — reorder for mobile: live content first
   ══════════════════════════════════════════════════════════ */
/* On mobile, reorder index page sections so live activity
   (LIVE NOW, Active Rooms/Pilots) appears before Quick Actions
   and before recent/standings/records. Desktop keeps HTML order.
   Uses negative order values so live sections appear first. */
@media (max-width: 768px) {
  .index-content {
    display: flex !important;
    flex-direction: column !important;
  }
  .index-content .section-live    { order: -2 !important; }
  .index-content .section-rooms   { order: -1 !important; }
  .index-content .section-actions { order: 1 !important; }
  /* Unclassed children (recent, standings, records) keep
     order: 0 — they appear between rooms (-1) and actions (1) */
}