/* Level Up Stats Patch 08 — mobile UX guardrails
   Focus: prevent horizontal overflow, improve touch targets, keep mission CTAs visible,
   and make owner-mode/result/report screens calmer on phones. */

@media (max-width: 1199.98px) {
  html,
  body.lus-dark-app {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.lus-dark-app *,
  body.lus-dark-app *::before,
  body.lus-dark-app *::after {
    box-sizing: border-box;
  }

  .lus-app-shell,
  .lus-main,
  .lus-content,
  .container,
  .container-fluid {
    max-width: 100%;
    min-width: 0;
  }

  .lus-main {
    width: 100%;
    min-width: 0;
  }

  .lus-content {
    overflow-x: clip;
  }

  .offcanvas.ss-offcanvas,
  #globalNavMenu {
    width: min(92vw, 430px) !important;
    max-width: 100vw;
  }

  .ss-menu-links .btn,
  .ss-mobile-nav-group > summary.ss-menu-link,
  .ss-menu-sublink {
    min-height: 46px;
    white-space: normal;
    text-align: left;
  }

  .ss-menu-link span:not(.ss-menu-icon):not(.ss-menu-icon--text):not(.lus-nav-lock-badge) {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 991.98px) {
  body.lus-dark-app h1,
  body.lus-dark-app .display-5,
  body.lus-dark-app .display-6 {
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .lus-topbar,
  .ss-hud--clean-header,
  .lus-page-header,
  .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4,
  .d-flex.justify-content-between.align-items-start.gap-3.mb-4 {
    min-width: 0;
  }

  .d-flex.justify-content-between.align-items-start.gap-3.mb-4,
  .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 {
    align-items: stretch !important;
  }

  .d-flex.justify-content-between.align-items-start.gap-3.mb-4 > *,
  .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 > * {
    min-width: 0;
  }

  .card,
  .section-dark,
  .stat-panel,
  .metric-card,
  .ai-card,
  .movers-card,
  .connector-card,
  .sync-card,
  .backlink-card,
  .billing-card,
  .levelup-mission-card,
  .result-card,
  .results-hero {
    min-width: 0;
  }

  .levelup-mission-card,
  .result-card,
  .connector-card,
  .billing-card,
  .card.section-dark,
  .section-dark {
    border-radius: 18px !important;
  }

  .levelup-mission-card .btn,
  .result-card .btn,
  .connector-card .btn,
  .billing-card .btn,
  .lus-pricing-page .btn,
  .lus-soft-lock-card .btn,
  .lus-trial-status-card .btn {
    min-height: 44px;
  }

  .levelup-mission-title,
  .levelup-mission-description,
  .result-insight,
  .results-copy,
  .card p,
  .card .text-muted,
  .alert,
  .small {
    overflow-wrap: anywhere;
  }

  .keyword-table-keyword,
  .keyword-table-url,
  .ai-table-url,
  .movers-link,
  .table a,
  code,
  pre {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }

  .table-responsive > .table {
    min-width: 680px;
  }

  .table-responsive::after {
    content: "Swipe to see more →";
    display: block;
    padding: .55rem .75rem .65rem;
    color: rgba(219,231,248,.58);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255,255,255,.025);
    border-top: 1px solid rgba(180,199,225,.08);
  }
}

@media (max-width: 767.98px) {
  .lus-content {
    padding: .72rem !important;
    border-radius: 16px !important;
  }

  .lus-content > .container-fluid,
  .lus-content > .container,
  .container-fluid.py-4,
  .container.py-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .row {
    --bs-gutter-x: .85rem;
    --bs-gutter-y: .85rem;
  }

  .card,
  .section-dark,
  .stat-panel,
  .metric-card,
  .ai-card,
  .movers-card,
  .connector-card,
  .sync-card,
  .backlink-card,
  .billing-card,
  .levelup-mission-card,
  .result-card,
  .results-hero,
  .lus-billing-hero,
  .lus-billing-status-card,
  .lus-trial-status-card,
  .lus-soft-lock-card {
    padding: 1rem !important;
  }

  .btn,
  button,
  .form-control,
  .form-select {
    font-size: .95rem;
  }

  .d-flex.gap-2,
  .d-flex.gap-3,
  .d-flex.gap-4 {
    min-width: 0;
  }

  .btn-group,
  .input-group {
    width: 100%;
  }

  .btn-group {
    flex-wrap: wrap;
  }

  .btn-group > .btn,
  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .btn {
    min-width: 0;
  }

  .lus-page-header .btn,
  .d-flex.justify-content-between.align-items-start.gap-3.mb-4 .btn,
  .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 .btn,
  .levelup-mission-cta,
  .levelup-mission-card .btn-primary,
  .result-next .btn,
  .connector-card .btn,
  .billing-card .btn,
  .lus-pricing-page form .btn-lg {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .levelup-mission-card .d-flex,
  .result-card-top,
  .result-next,
  .lus-billing-hero .d-flex,
  .lus-trial-status-card .d-flex,
  .lus-billing-status-card .d-flex {
    min-width: 0;
  }

  .levelup-mission-card .d-flex.justify-content-between,
  .result-card-top,
  .result-next {
    align-items: stretch !important;
  }

  .result-kpi {
    text-align: left !important;
    align-self: stretch;
  }

  .results-title {
    font-size: clamp(1.7rem, 9vw, 2.1rem) !important;
  }

  .results-proof-row,
  .results-grid,
  .game-strip {
    gap: .75rem !important;
  }

  .levelup-mission-card .badge,
  .levelup-mission-badge,
  .lus-badge,
  .mission-badge,
  .filter-pill,
  .ai-pill {
    white-space: normal !important;
  }

  .modal-dialog {
    margin: .75rem;
  }

  .modal-content {
    border-radius: 18px !important;
  }

  .alert .btn,
  .lus-billing-status-banner .btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .lus-topbar {
    margin-bottom: .75rem !important;
  }

  .lus-menu-btn {
    flex: 0 0 auto;
  }

  .ss-hud-mobile-mini-stats,
  .ss-hud--clean-header {
    min-width: 0;
  }

  .ss-hud-mobile-mini-stats span,
  .ss-hud-chip,
  .ss-hud-player-name {
    min-width: 0;
  }

  .levelup-mission-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .table-responsive > .table {
    min-width: 600px;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-link {
    min-width: 38px;
  }

  pre {
    white-space: pre-wrap;
  }
}