/* ===== MODULE 15.53 — PREMIUM COLLECTION VIEW ===== */
/* Collection-only polish. No pack roll, no Supabase, no VOID 3D transform changes. */

@layer cards {
  .collection-view,
  .collection-page,
  .collection-shell {
    width: 100%;
  }

  .collection-header,
  .collection-toolbar,
  .collection-filters {
    border: 1px solid rgba(185, 124, 255, .14);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
      rgba(8, 4, 18, .72);
    backdrop-filter: blur(var(--blur-panel, 18px));
    box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
  }

  .collection-header {
    border-radius: var(--radius-panel, 28px);
    padding: clamp(16px, 2.2vw, 28px);
  }

  .collection-toolbar,
  .collection-filters {
    border-radius: 18px;
    padding: clamp(10px, 1.4vw, 16px);
  }

  .collection-toolbar input,
  .collection-filters input,
  .collection-toolbar select,
  .collection-filters select,
  .collection-search,
  .filter-select {
    min-height: var(--tap-target-min, 44px);
    border: 1px solid rgba(185, 124, 255, .16);
    border-radius: 14px;
    background: rgba(3, 1, 10, .72);
    color: var(--void-text, #f3ecff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  }

  .collection-toolbar input:focus,
  .collection-filters input:focus,
  .collection-toolbar select:focus,
  .collection-filters select:focus,
  .collection-search:focus,
  .filter-select:focus {
    outline: 2px solid rgba(185, 124, 255, .44);
    outline-offset: 2px;
    border-color: rgba(185, 124, 255, .42);
  }

  .collection-grid,
  .cards-grid,
  .card-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: clamp(14px, 1.8vw, 24px);
    align-items: start;
  }

  .collection-card,
  .card-tile,
  .owned-card,
  .collection-grid .void-card,
  .cards-grid .void-card {
    position: relative;
    border-radius: var(--radius-card, 22px);
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      filter .18s ease;
  }

  .collection-card::before,
  .card-tile::before,
  .owned-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
      radial-gradient(circle at 50% 0%, rgba(185, 124, 255, .16), transparent 46%);
    opacity: 0;
    transition: opacity .18s ease;
  }

  .collection-card:hover,
  .card-tile:hover,
  .owned-card:hover {
    border-color: rgba(185, 124, 255, .34);
    box-shadow:
      0 0 0 1px rgba(185, 124, 255, .14),
      0 18px 48px rgba(0, 0, 0, .34),
      0 0 36px rgba(123, 43, 255, .14);
  }

  .collection-card:hover::before,
  .card-tile:hover::before,
  .owned-card:hover::before {
    opacity: 1;
  }

  .collection-card:focus-visible,
  .card-tile:focus-visible,
  .owned-card:focus-visible {
    outline: 2px solid rgba(185, 124, 255, .72);
    outline-offset: 4px;
  }

  .collection-empty,
  .empty-collection,
  .collection-state-empty {
    border: 1px dashed rgba(185, 124, 255, .24);
    border-radius: var(--radius-panel, 28px);
    padding: clamp(24px, 5vw, 64px);
    background:
      radial-gradient(circle at 50% 0%, rgba(123, 43, 255, .16), transparent 44%),
      rgba(8, 4, 18, .56);
    color: var(--void-text-muted, #b9acd9);
    text-align: center;
  }

  @media (max-width: 860px) {
    .collection-toolbar,
    .collection-filters {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .collection-grid,
    .cards-grid,
    .card-collection-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    }
  }

  @media (max-width: 480px) {
    .collection-header {
      border-radius: 22px;
    }

    .collection-grid,
    .cards-grid,
    .card-collection-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
  }
}