/* Mobile is rearranged into touch-friendly launcher panels instead of shrinking desktop. */
@media (max-width: 980px) {
  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .aether-nav {
    position: fixed;
    top: 72px;
    right: 1rem;
    left: 1rem;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass-strong);
    box-shadow: var(--shadow);
  }

  .aether-nav.is-open {
    display: grid;
  }

  .hero-status,
  .relic-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .relic-grid,
  .relic-grid.two,
  .class-orbit,
  .launcher-layout,
  .dashboard-grid,
  .about-layout,
  .rankings-layout {
    grid-template-columns: 1fr;
  }

  .form-panel {
    margin-top: -4rem;
  }
}

@media (max-width: 640px) {
  .brand-sub {
    display: none;
  }

  .hero {
    min-height: 92vh;
  }

  .hero-content {
    padding-bottom: 8vh;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.6rem, 17vw, 4.6rem);
  }

  .hero-status,
  .class-list,
  .social-row,
  .news-item,
  .timeline-item,
  .mirror,
  .activity-row,
  .mail-row,
  .account-row,
  .ranking-row {
    grid-template-columns: 1fr;
  }

  .ranking-value {
    text-align: left;
  }

  .relic-grid,
  .relic-grid.four {
    grid-template-columns: 1fr;
  }

  .section,
  .section-wide {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .page-hero {
    min-height: 56vh;
    padding-top: 7rem;
  }

  .inventory-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}