/* ===== MODULE 15.56 — MOBILE-FIRST POLISH ===== */
/* Mobile/responsive polish only. No card 3D ownership, no VOID FX logic, no JS dependency. */

@layer overrides {
  :root {
    --mobile-edge: max(12px, env(safe-area-inset-left));
    --mobile-bottom-safe: max(14px, env(safe-area-inset-bottom));
    --mobile-top-safe: max(12px, env(safe-area-inset-top));
  }

  html,
  body {
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
  }

  input,
  textarea,
  select,
  button {
    font: inherit;
  }

  button,
  [role="button"],
  .btn,
  .nav-item,
  .sidebar-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .modal,
  .dialog,
  .inspect-modal,
  .pack-opening-panel,
  .opening-panel,
  .collection-header,
  .collection-toolbar,
  .collection-filters {
    max-width: calc(100vw - (var(--mobile-edge) * 2));
  }

  .toast,
  .notification,
  .snackbar {
    left: var(--mobile-edge);
    right: var(--mobile-edge);
    max-width: calc(100vw - (var(--mobile-edge) * 2));
  }

  @media (max-width: 760px) {
    .app,
    .app-shell,
    .page-shell,
    .view-shell,
    .opening-shell,
    .collection-shell,
    .inspect-shell {
      min-width: 0;
    }

    .page-shell,
    .view-shell,
    .opening-content {
      padding-left: var(--mobile-edge);
      padding-right: var(--mobile-edge);
    }

    .app-sidebar,
    .sidebar,
    .main-sidebar {
      position: sticky;
      bottom: 0;
      z-index: var(--z-modal, 100);
      padding-bottom: var(--mobile-bottom-safe);
    }

    .opening-actions,
    .pack-actions,
    .booster-actions,
    .inspect-actions,
    .card-detail-actions {
      width: 100%;
    }

    .opening-actions > *,
    .pack-actions > *,
    .booster-actions > *,
    .inspect-actions > *,
    .card-detail-actions > * {
      min-width: 0;
    }

    .collection-toolbar,
    .collection-filters {
      position: relative;
      z-index: var(--z-card, 20);
    }

    .collection-toolbar input,
    .collection-filters input,
    .collection-toolbar select,
    .collection-filters select,
    .collection-search,
    .filter-select {
      width: 100%;
      font-size: 16px;
    }

    .modal,
    .dialog,
    .inspect-modal {
      max-height: calc(100dvh - var(--mobile-top-safe) - var(--mobile-bottom-safe));
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  @media (max-width: 560px) {
    .opening-title,
    .pack-title,
    .booster-title,
    .inspect-title,
    .card-detail-title,
    .card-name-large {
      overflow-wrap: anywhere;
    }

    .collection-grid,
    .cards-grid,
    .card-collection-grid {
      gap: 10px;
    }

    .collection-card,
    .card-tile,
    .owned-card {
      min-width: 0;
    }

    .pack-count,
    .booster-count,
    .opening-counter,
    .pity-status,
    .opening-status {
      max-width: 100%;
      white-space: normal;
      text-align: center;
    }
  }

  @media (max-width: 390px) {
    .collection-grid,
    .cards-grid,
    .card-collection-grid {
      grid-template-columns: 1fr 1fr;
    }

    .opening-title,
    .pack-title,
    .booster-title {
      letter-spacing: .06em;
    }

    .nav-item,
    .sidebar-link,
    .sidebar button,
    .app-sidebar button,
    [data-nav],
    [data-view-button] {
      min-width: 58px;
      padding-inline: 8px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-item,
    .sidebar-link,
    .collection-card,
    .card-tile,
    .owned-card,
    .open-pack-button,
    .opening-primary-action,
    .pack-primary-action,
    .booster-primary-action {
      transition-duration: .01ms;
    }
  }
}