/* ── Gallery Page ── */
.gallery-page { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.gallery-header { text-align: center; margin-bottom: 2rem; }
.gallery-header h1 { font-size: 1.8rem; color: #e2e8f0; margin: 0 0 0.5rem; }
.gallery-header p { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin: 0 0 1rem; }
.gallery-cta { display: inline-block; padding: 0.6rem 1.5rem; background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gallery-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168,85,247,0.3); }

/* ── Filters ── */
.gallery-filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 1rem; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); }
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.filter-group select, .filter-group input { padding: 0.4rem 0.6rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #e2e8f0; font-size: 0.85rem; font-family: inherit; min-width: 140px; }
.filter-group select:focus, .filter-group input:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 2px rgba(168,85,247,0.15); }

/* ── Grid ── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

/* ── Deck Card ── */
.gallery-card { display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.gallery-card:hover { border-color: rgba(168,85,247,0.3); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.gallery-card-art { height: 140px; background-size: cover; background-position: center top; }
.gallery-card-art-empty { background: linear-gradient(135deg, #2a1a3e 0%, #1a1a2e 100%); }
.gallery-card-body { padding: 0.75rem 1rem; }
.gallery-card-title { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-card-commander { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; }
.gallery-card-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.gallery-bracket { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; }
.b1 { color: #4ade80; background: rgba(74,222,128,0.1); }
.b2 { color: #60a5fa; background: rgba(96,165,250,0.1); }
.b3 { color: #eab308; background: rgba(234,179,8,0.1); }
.b4 { color: #fb923c; background: rgba(251,146,60,0.1); }
.b5 { color: #f87171; background: rgba(248,113,113,0.1); }
.gallery-archetype { font-size: 0.7rem; color: rgba(255,255,255,0.4); padding: 0.15rem 0.5rem; background: rgba(255,255,255,0.05); border-radius: 4px; }
.gallery-card-stats { display: flex; justify-content: space-between; font-size: 0.7rem; color: rgba(255,255,255,0.3); }
.gallery-card-count.incomplete { color: #fbbf24; }

/* ── States ── */
.gallery-loading { grid-column: 1 / -1; text-align: center; padding: 3rem; color: rgba(255,255,255,0.4); }
.gallery-empty { grid-column: 1 / -1; text-align: center; padding: 3rem; color: rgba(255,255,255,0.4); }
.gallery-error { grid-column: 1 / -1; text-align: center; padding: 2rem; color: #f87171; }
.gallery-load-more { grid-column: 1 / -1; padding: 0.7rem 2rem; margin: 1rem auto; display: block; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e2e8f0; font-size: 0.85rem; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.gallery-load-more:hover { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); }

/* ── Mobile ── */
@media (max-width: 640px) {
    .gallery-filters { flex-direction: column; }
    .filter-group select, .filter-group input { min-width: 100%; }
    .gallery-grid { grid-template-columns: 1fr; }
}