/* TopFive mobile / app sheet — loaded after styles.css */
@media (max-width: 860px) {
  html, body {
    overflow-x: hidden;
  }
  body {
    padding-bottom: 24px;
  }
  .container {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 80;
    backdrop-filter: blur(16px);
  }
  .header-inner {
    gap: 8px;
    min-height: 58px;
  }
  .logo { min-width: 0; }
  .logo-text { font-size: 16px; }
  .nav { display: none !important; }
  .header-actions {
    gap: 6px;
  }
  .header-actions .btn-primary.btn-sm {
    display: none;
  }
  .hdr-menu-label { display: none; }

  .mobile-nav {
    padding: 8px 14px 18px;
    background: rgba(7,7,12,.96);
  }
  .mobile-nav .nav-link,
  .mobile-nav .btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .section { padding: 22px 0; }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .section-title { font-size: 22px; word-break: break-word; }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat { min-width: 0; }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filter-select,
  .filter-bar input,
  .filter-bar .btn {
    width: 100%;
  }

  .server-row,
  .server-list .server-row {
    grid-template-columns: 44px 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    align-items: start;
  }
  .server-region,
  .server-players,
  .server-votes-col,
  .server-uptime,
  .server-actions {
    grid-column: 2;
    width: auto !important;
    min-width: 0;
    justify-content: flex-start;
  }
  .server-name {
    white-space: normal;
    overflow: visible;
  }

  .featured-carousel,
  .feat-slide,
  .feat-art,
  .feat-art img {
    max-width: 100%;
  }
  .featured-carousel { min-height: 220px; }
  .feat-title { font-size: 22px; }
  .trending-row {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .trending-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .card-form,
  .theme-fields {
    padding: 16px;
  }
  .card-form input,
  .card-form select,
  .card-form textarea,
  .modal-field input,
  .modal-field select,
  .modal-field textarea,
  .wl-input {
    width: 100%;
    max-width: 100%;
    font-size: 16px; /* stops iOS zoom */
  }
  .wl-q-grid,
  .profile-grid,
  .vote-layout,
  .tool-grid-form {
    grid-template-columns: 1fr !important;
  }

  .dash-actions {
    max-width: none;
    width: 100%;
  }
  .dash-actions .btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    justify-content: center;
  }

  .footer-inner,
  .footer-links {
    flex-direction: column;
    gap: 20px;
  }

  .vlock-modal,
  .lookup-overlay,
  #delete-server-modal {
    padding: 12px;
    align-items: flex-end;
  }
  .vlock-card,
  .lookup-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 10px 10px;
  }
  .vlock-ring { transform: scale(.92); transform-origin: center; }

  .dm-widget {
    right: 12px;
    bottom: 12px;
  }
  .discord-fab {
    right: 12px;
    bottom: 12px;
  }
  .discord-fab.has-dm-buddy {
    right: 76px;
  }
  .dm-panel {
    width: min(100vw - 24px, 380px);
    max-height: 70vh;
  }

  table {
    display: block;
    overflow-x: auto;
  }

  .btn { min-height: 40px; }
}

@media (max-width: 480px) {
  .logo-beta { font-size: 13px; bottom: -5px; }
  .featured-heading { font-size: 20px; }
  .vlock-seq { grid-template-columns: 1fr 1fr; }
}