/* ST7D v6.64.10 - full mobile layout audit
   Phone-only hardening. Desktop/tablet layouts remain owned by the existing stylesheets. */

@media (max-width: 760px) {
  /* Shared containment: grid/flex children must be allowed to shrink on narrow phones. */
  main,
  main > section,
  .section,
  .subpage-hero,
  .subpage-hero-inner,
  .subpage-hero-inner > *,
  .leaderboard-hero,
  .leaderboard-hero > *,
  .command-centre-hero,
  .command-centre-hero > *,
  .server-detail-hero,
  .server-detail-hero > *,
  .detail-intro,
  .detail-intro > *,
  .jukebox-hero-inner,
  .jukebox-hero-inner > *,
  .notification-centre-page-shell,
  .member-login-card,
  .staff-person-card,
  .staff-card-copy {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  main img,
  main video,
  main iframe,
  main canvas,
  main svg {
    max-width: 100%;
  }

  /* Shared marketing/sub-page heroes had fixed 72px headings that could exceed a phone. */
  .subpage-hero {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .subpage-hero h1,
  .subpage-hero h1 span {
    max-width: 100%;
    font-size: clamp(40px, 13vw, 58px) !important;
    line-height: .88 !important;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
  }
  .subpage-hero p,
  .subpage-hero-inner p,
  .section-title h2,
  .section-title p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Server detail pages: long world names and the live panel could set the page width. */
  .server-detail-hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  .server-detail-heading,
  .server-detail-live {
    width: 100%;
  }
  .server-detail-heading h1,
  .server-detail-heading h1 span {
    max-width: 100%;
    font-size: clamp(42px, 13.5vw, 64px) !important;
    line-height: .86 !important;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
  }
  .server-detail-heading p,
  .detail-copy,
  .detail-copy p,
  .detail-connect-strip,
  .detail-connect-strip > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .detail-intro {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }
  .detail-live-grid { min-width: 0; }

  /* Server Command Centre */
  .command-centre-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .command-centre-hero-copy,
  .command-centre-network { width: 100%; }
  .command-centre-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(42px, 13vw, 60px) !important;
    line-height: .86 !important;
    overflow-wrap: anywhere;
  }
  .command-world-hero,
  .command-world-grid,
  .command-context-tools,
  .command-tool-grid,
  .command-world-live {
    min-width: 0;
    max-width: 100%;
  }

  /* Leaderboards: remove the desktop-width dependency rather than making users pan a table. */
  .leaderboard-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 76px 16px 34px !important;
    gap: 18px !important;
  }
  .leaderboard-hero-copy,
  .leaderboard-hero-status,
  .leaderboard-section-tabs { width: 100%; }
  .leaderboard-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(34px, 11vw, 46px) !important;
    line-height: .86 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: normal;
  }
  .leaderboard-hero-copy p,
  .leaderboard-hero-status span,
  .leaderboard-hero-status strong,
  .leaderboard-hero-status small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .leaderboard-section-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .leaderboard-section-tabs .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
  .leaderboard-shell { width: min(100% - 24px, 1500px) !important; }
  .leaderboard-control-deck,
  .leaderboard-server-picker,
  .leaderboard-metric-picker,
  .leaderboard-season-picker,
  .leaderboard-summary,
  .leaderboard-context,
  .leaderboard-podium,
  .leaderboard-podium-card {
    min-width: 0;
    max-width: 100%;
  }
  .leaderboard-mode-switch { grid-template-columns: minmax(0, 1fr) !important; }
  .leaderboard-mode-switch button,
  .leaderboard-season-picker select { min-width: 0; width: 100%; }
  .leaderboard-summary { grid-template-columns: 1fr 1fr !important; }
  .leaderboard-summary article,
  .leaderboard-summary article strong { min-width: 0; overflow-wrap: anywhere; }
  .leaderboard-podium-card,
  .leaderboard-podium-card.rank-1 { width: 100% !important; }
  .leaderboard-podium-card .leaderboard-survivor-wrap.compact,
  .leaderboard-podium-card .leaderboard-survivor.compact { min-width: 0 !important; max-width: 100%; }
  .leaderboard-podium-card .leaderboard-survivor.compact > span { min-width: 0; max-width: 100%; }
  .leaderboard-podium-card .leaderboard-survivor.compact strong { max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .leaderboard-table-wrap {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
  }
  .leaderboard-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }
  .leaderboard-table th,
  .leaderboard-table td {
    min-width: 0;
    padding: 10px 7px !important;
  }
  .leaderboard-table th:nth-child(n+4),
  .leaderboard-table td:nth-child(n+4) { display: none; }
  .leaderboard-table th:nth-child(1),
  .leaderboard-table td:nth-child(1) { width: 52px; }
  .leaderboard-table th:nth-child(3),
  .leaderboard-table td:nth-child(3) { width: 88px; text-align:right; }
  .leaderboard-table th:nth-child(3) { text-align:right; }
  .leaderboard-rank { min-width: 34px; height: 26px; }
  .leaderboard-survivor-wrap {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
  }
  .leaderboard-survivor {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    gap: 7px;
  }
  .leaderboard-survivor > span:last-child { min-width: 0; max-width: 100%; }
  .leaderboard-survivor strong { max-width: 100%; }
  .leaderboard-avatar-shell { width: 34px !important; height:34px !important; flex-basis:34px !important; }
  .leaderboard-view-stats { display:none !important; }
  .leaderboard-presence-line { min-width:0; max-width:100%; }
  .leaderboard-presence-line .leaderboard-scope {
    max-width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .leaderboard-primary-stat strong { font-size:14px !important; }
  .leaderboard-primary-stat small { font-size:9px !important; }

  /* Achievements: all catalogue/status surfaces stay inside one phone column. */
  #achievement-catalog,
  #almost-there,
  #recent-unlocks,
  #locked-achievements,
  #unlocked-achievements,
  [id^="achievement-"] { scroll-margin-top: 88px; }
  .achievements-public-section,
  .achievement-catalog-grid,
  .achievement-player-families,
  .achievement-status-group,
  .achievement-family,
  .achievement-world-group,
  .achievement-catalog-card,
  .achievement-catalog-card > div,
  .almost-layout,
  .almost-rarest,
  .almost-progress-list,
  .almost-progress-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .achievement-catalog-grid { grid-template-columns: minmax(0,1fr) !important; }
  .achievement-catalog-card h3,
  .achievement-catalog-card p,
  .achievement-catalog-card small,
  .achievement-status-head h3,
  .achievement-family-head h3,
  .achievement-world-head h3,
  .almost-rarest h3,
  .almost-progress-card strong,
  .almost-progress-card small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .achievement-status-head,
  .achievement-family-head,
  .achievement-world-head {
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
  }
  .almost-layout { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
  .almost-rarest { padding: 20px !important; }
  .almost-rarest h3 { font-size: clamp(25px,8vw,32px) !important; }
  .almost-progress-card {
    padding: 15px !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px 10px !important;
  }
  .almost-progress-card > div:first-child { min-width:0; }
  .almost-progress-card > b { white-space:nowrap; font-size:16px !important; }

  /* Jukebox */
  .jukebox-hero-inner { width: min(calc(100% - 26px),1180px) !important; grid-template-columns:minmax(0,1fr) !important; }
  .jukebox-hero-copy,
  .jukebox-hero-stats { width:100%; }
  .jukebox-hero-copy h1 {
    max-width:100%;
    font-size:clamp(40px,12vw,58px) !important;
    line-height:.9 !important;
    overflow-wrap:anywhere;
  }
  .jukebox-hero-stats { grid-template-columns:1fr 1fr !important; }
  .jukebox-toolbar,
  .jukebox-filter-buttons,
  .jukebox-card,
  .jukebox-card-copy,
  .jukebox-playlist-layout,
  .jukebox-submit-shell,
  .jukebox-submit-form { min-width:0; max-width:100%; }

  /* Staff roster/public staff page */
  .staff-person-grid,
  .staff-grid-owner,
  .staff-grid-lead,
  .staff-grid-admin,
  .staff-grid-moderator,
  .staff-grid-helper { grid-template-columns:minmax(0,1fr) !important; }
  .staff-person-card {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    gap:12px !important;
  }
  .staff-person-card h3,
  .staff-person-card p,
  .staff-person-card strong,
  .staff-card-copy { max-width:100%; overflow-wrap:anywhere; }
  .staff-card-actions { max-width:100%; }
  .staff-card-actions .staff-profile-cta { min-width:0; width:auto; max-width:100%; }

  /* Notifications and login gates */
  .notification-centre-page-shell,
  .notification-centre-toolbar,
  .member-notification-panel,
  .member-login-card { width:100%; min-width:0; max-width:100%; }
  .member-login-card h2,
  .member-login-card p,
  .notification-centre-toolbar *,
  .notification-centre-item * { max-width:100%; overflow-wrap:anywhere; }

  /* Forms / generic grids that can inherit desktop min-content widths. */
  input,
  select,
  textarea,
  button { max-width:100%; }
  .profile-form-split,
  .faq-search-copy,
  .community-hub-layout,
  .event-public-head,
  .event-public-schedule { min-width:0; max-width:100%; }
}

@media (max-width: 420px) {
  .subpage-hero { padding-left:15px; padding-right:15px; }
  .subpage-hero h1,
  .subpage-hero h1 span { font-size:clamp(38px,12.5vw,52px) !important; }
  .server-detail-heading h1,
  .server-detail-heading h1 span { font-size:clamp(40px,13vw,54px) !important; }

  .leaderboard-hero { padding-left:14px !important; padding-right:14px !important; }
  .leaderboard-shell { width:min(100% - 18px,1500px) !important; }
  .leaderboard-section-tabs { grid-template-columns:1fr; }
  .leaderboard-summary { grid-template-columns:minmax(0,1fr) !important; }
  .leaderboard-table th:nth-child(1),
  .leaderboard-table td:nth-child(1) { width:46px; }
  .leaderboard-table th:nth-child(3),
  .leaderboard-table td:nth-child(3) { width:78px; }
  .leaderboard-table th,
  .leaderboard-table td { padding:9px 5px !important; }
  .leaderboard-avatar-shell { width:30px !important; height:30px !important; flex-basis:30px !important; }
  .leaderboard-survivor-level { margin-left:2px; padding:1px 4px; font-size:7px; }
  .leaderboard-presence-line { display:none !important; }

  .achievement-catalog-card {
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:10px !important;
    padding:13px !important;
  }
  .achievement-catalog-card .achievement-medallion { width:68px !important; height:68px !important; }
  .achievement-catalog-card h3 { font-size:22px !important; }
  .almost-progress-card { grid-template-columns:minmax(0,1fr) !important; }
  .almost-progress-card > b { justify-self:start; }

  .jukebox-hero-stats { grid-template-columns:minmax(0,1fr) !important; }
  .detail-live-grid { grid-template-columns:minmax(0,1fr) !important; }
  .detail-live-grid > div { min-width:0; }

  .notification-filter-row,
  .notification-status-filter .notification-filter-row { grid-template-columns:minmax(0,1fr) !important; }
}

/* Narrow-phone follow-up from the 320px audit. */
@media (max-width: 760px) {
  .community-hub-inner { width:min(calc(100% - 30px),1500px) !important; min-width:0; max-width:100%; }
  .community-hub-inner h1,
  .community-hub-inner h1 span {
    max-width:100%;
    font-size:clamp(40px,13vw,58px) !important;
    line-height:.88 !important;
    overflow-wrap:anywhere;
  }
  .vote-hero-inner { min-width:0; max-width:100%; }
  .vote-hero h1,
  .vote-hero h1 span {
    max-width:100%;
    font-size:clamp(40px,13vw,58px) !important;
    line-height:.88 !important;
    overflow-wrap:anywhere;
  }
  .mods-hero h1,
  .mods-hero h1 span {
    max-width:100%;
    font-size:clamp(40px,13vw,58px) !important;
    line-height:.88 !important;
    overflow-wrap:anywhere;
  }
  .community-spotlight-heading,
  .faq-category-heading {
    width:100%;
    min-width:0;
    max-width:100%;
    grid-template-columns:minmax(0,1fr) !important;
  }
  .community-spotlight-heading > *,
  .faq-category-heading > * { min-width:0; max-width:100%; }
  .community-spotlight-heading h2,
  .faq-category-heading h2 {
    max-width:100%;
    font-size:clamp(34px,11vw,44px) !important;
    overflow-wrap:anywhere;
  }
  .detail-intro h2 {
    max-width:100%;
    font-size:clamp(32px,10vw,42px) !important;
    line-height:1 !important;
    overflow-wrap:anywhere;
  }
  .application-two-col { grid-template-columns:minmax(0,1fr) !important; min-width:0; max-width:100%; }
  .application-list-card {
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    padding:22px !important;
  }
  .application-list-card h2,
  .application-list-card ul,
  .application-list-card li { min-width:0; max-width:100%; overflow-wrap:anywhere; }
}

@media (max-width: 760px) {
  .faq-hero-inner,
  .faq-search-panel,
  .faq-search-copy { min-width:0; max-width:100%; box-sizing:border-box; }
  .faq-hero h1,
  .faq-hero h1 span {
    max-width:100%;
    font-size:clamp(40px,13vw,56px) !important;
    line-height:.88 !important;
    overflow-wrap:anywhere;
  }
  .faq-search-panel { grid-template-columns:minmax(0,1fr) !important; padding:18px !important; }
  .faq-search-copy { width:100%; }
  .faq-search-panel h2 { max-width:100%; font-size:clamp(32px,10vw,40px) !important; overflow-wrap:anywhere; }
}

@media (max-width: 760px) {
  .achievements-hero h1 {
    font-size:clamp(36px,11vw,46px) !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    letter-spacing:-.03em !important;
  }
}