/* ============================================================
   MOBILE OVERRIDES  — loaded after newone-theme.css
   ============================================================ */

/* ── Global flex overflow fix ──────────────────────────────── */
@media (max-width: 1180px) {
  /* Hero-center: overflow:hidden resets min-width:auto → 0 (CSS spec),
     allowing width:100% to actually constrain the flex item */
  .newone-hero-center {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* ── Hero: PC layout scaled down for mobile ──────────────────
   Instead of stacking vertically, keep character LEFT and
   content RIGHT, exactly like desktop but proportionally smaller.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* Header: shrink to content height, no artificial 640px floor */
  header {
    min-height: 0 !important;
  }

  /* Hero: horizontal row, character left + content right */
  .newone-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 0 !important;
    padding: 12px 0 16px !important;
    min-height: 180px !important;
    overflow: hidden !important;
  }

  /* Character: left column, ~40% of viewport */
  .newone-character {
    flex: 0 0 38vw !important;
    width: 38vw !important;
    min-height: 0 !important;
    align-self: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .newone-character img,
  .newone-character video {
    width: 100% !important;
    max-width: none !important;
  }

  /* Hero-center: right column, fills remaining space */
  .newone-hero-center {
    flex: 1 1 0 !important;
    width: auto !important;
    padding-top: 8px !important;
    text-align: center !important;
    transform: none !important;
  }

  /* Season label: smaller */
  .newone-season {
    font-size: 7px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 4px !important;
  }

  /* Title: scaled down */
  .newone-hero h1 {
    font-size: clamp(20px, 5.3vw, 30px) !important;
    margin: 2px 0 4px !important;
    line-height: 1 !important;
  }

  /* Tagline rotator: smaller */
  .newone-rotator {
    font-size: 8px !important;
    min-height: 1.2em !important;
    white-space: normal !important;
  }

  /* Hero actions: compact */
  .newone-hero-actions {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  /* Server frame: hide on mobile (no room) */
  .newone-server-frame {
    display: none !important;
  }

  /* Podium: fits the hero-center column */
  .newone-podium {
    min-width: 0 !important;
    width: 100% !important;
    gap: 3px !important;
    margin-top: 8px !important;
    transform: none !important;
    filter: none !important;
  }

  /* Podium cards: sized via vw so they always fit the right column.
     Right column ≈ 62vw. Three cards + 2×3px gaps must fit.
     rank1=18vw, rank2/3=15vw → total=18+15+15+0.8+0.8=49.6vw ≤ 62vw ✓ */
  .newone-podium-card--rank1 {
    width: 18vw !important;
    height: 28.8vw !important;  /* ratio 304/190 = 1.6 */
  }

  .newone-podium-card--rank2,
  .newone-podium-card--rank3 {
    width: 15vw !important;
    height: 23.9vw !important;  /* ratio 254/160 = 1.59 */
  }

  /* Podium inner content: proportional to card size */
  .newone-podium-card--rank1 .newone-podium-content {
    padding: 7.5vw 1vw 3vw !important;
  }

  .newone-podium-card--rank2 .newone-podium-content,
  .newone-podium-card--rank3 .newone-podium-content {
    padding: 6.3vw 0.9vw 2.5vw !important;
  }

  .newone-podium-content > strong {
    font-size: 1.5vw !important;
    letter-spacing: 0.02em !important;
  }

  .newone-podium-card--rank1 .newone-podium-content > strong {
    font-size: 1.8vw !important;
  }

  .newone-podium-content > span {
    font-size: 1.1vw !important;
    gap: 1px !important;
    letter-spacing: 0.05em !important;
    margin-top: 3px !important;
  }

  .newone-podium-content > span img {
    width: 2vw !important;
    height: 2vw !important;
  }

  .newone-podium-content > small {
    font-size: 1vw !important;
    gap: 2px !important;
  }

  .newone-podium-avatar {
    width: 6vw !important;
    height: 6vw !important;
    margin-bottom: 2vw !important;
  }

  .newone-podium-card--rank1 .newone-podium-avatar {
    width: 7.5vw !important;
    height: 7.5vw !important;
    margin-bottom: 2.5vw !important;
  }

  /* ── Hall of Fame ────────────────────────────────────────── */

  /* Outer frame: base style.css sets width:370px height:635px — both must be overridden */
  .hallOfFameElectric {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* hofe-shell: height:100% of the now-auto parent → must also be auto */
  .hofe-shell {
    height: auto !important;
  }

  /* hofe-grid: height:calc(100%-66px) was eating 569px in a 635px panel.
     With parent now auto, set auto so rows size to content. */
  .hofe-grid {
    height: auto !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
  }

  /* Cards: slightly compact padding on narrow screens */
  .hofe-cardContent {
    padding: 8px !important;
  }

  /* Player name: slightly smaller to fit card width */
  .hofe-player {
    font-size: 13px !important;
  }

  /* ── Global layout fixes ─────────────────────────────────── */

  .flex {
    left: 0 !important;
  }

  .blockHome {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .block-50 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .table-scroll {
    overflow-x: auto !important;
  }

  table {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .ajax-container {
    width: calc(100% - 24px) !important;
  }
}