/* =============================================================================
   Filtered Cards Modal — Newtype v2
   HUD frame · strip header · grid of HUD card cells

   Shared modal that pops up cards matching some criterion (a trait, an
   effect, an artist, etc.) and routes clicks to the unified
   CardModalManager so the user can pivot into the full detail view.

   Used by:
     - card-stats page (filter by trait / effect / source title / etc.)
     - admin-artists page (filter by artist, including extra credits)
   ============================================================================= */

.filtered-cards-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
}
.filtered-cards-modal.hidden { display: none; }

.fcm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 5, 0.86);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.fcm-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(46, 255, 126, 0.05) 0%, transparent 70%);
}

/* ── Modal frame ── */
.fcm-content {
    position: relative;
    width: 1120px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 80px);
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    display: grid;
    grid-template-rows: auto auto 1fr;
    overflow: hidden;
    animation: fcm-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    z-index: 1;
}

@keyframes fcm-rise {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fcm-content::before,
.fcm-content::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 4;
    pointer-events: none;
}
.fcm-content::before {
    top: -1px; left: -1px;
    border-top: 2px solid var(--neon);
    border-left: 2px solid var(--neon);
    box-shadow: -1px -1px 0 var(--neon-glow);
}
.fcm-content::after {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid var(--neon);
    border-right: 2px solid var(--neon);
    box-shadow: 1px 1px 0 var(--neon-glow);
}

/* ── HUD strip ── */
.fcm-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(6, 8, 5, 0.6);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.fcm-strip-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neon);
    font-weight: 600;
    padding-right: 16px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}
.fcm-strip-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
    animation: fcm-pulse 2.2s ease-in-out infinite;
}
@keyframes fcm-pulse {
    0%, 70%   { opacity: 1; }
    85%, 100% { opacity: 0.25; }
}

.fcm-strip-breadcrumb {
    color: var(--text-3);
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    flex: 1;
}
.fcm-strip-sep { color: var(--border-strong); }
.fcm-strip-title {
    color: var(--text-2);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 11px;
    font-family: var(--font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    margin: 0;
}

.fcm-strip-right {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* Close icon button */
.fcm-close {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.fcm-close:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(255, 59, 59, 0.08);
    box-shadow: 0 0 8px rgba(255, 59, 59, 0.25);
}

/* ── Search header (input + quick filters + meta) ── */
.fcm-search-header {
    padding: 18px 20px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(46, 255, 126, 0.025) 0%, transparent 100%);
}

.fcm-search-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    height: 46px;
    border: 1px solid var(--border-strong);
    background: rgba(6, 8, 5, 0.6);
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fcm-search-input-row:focus-within {
    border-color: var(--neon);
    box-shadow: 0 0 0 1px rgba(46, 255, 126, 0.12), 0 0 16px rgba(46, 255, 126, 0.06);
}

.fcm-search-caret {
    color: var(--neon);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    text-shadow: 0 0 8px var(--neon-glow);
    animation: fcm-caret-pulse 1.4s ease-in-out infinite;
}
@keyframes fcm-caret-pulse {
    0%, 45%   { opacity: 1; }
    55%, 100% { opacity: 0.4; }
}

.fcm-search-input {
    flex: 1;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
}
.fcm-search-input::placeholder {
    color: var(--text-3);
    font-weight: 400;
}

/* Quick filters row */
.fcm-quick-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
}

.fcm-colors {
    display: flex;
    gap: 6px;
    align-items: center;
}
.fcm-color-swatch {
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
    padding: 0;
}
.fcm-color-swatch:hover { transform: translateY(-1px); }
.fcm-c-red    { background: #7a2020; }
.fcm-c-red.active    { border-color: #e05a5a; box-shadow: 0 0 10px rgba(180, 30, 30, 0.5); }
.fcm-c-blue   { background: #1a3a8a; }
.fcm-c-blue.active   { border-color: #6ea8ff; box-shadow: 0 0 10px rgba(30, 70, 180, 0.5); }
.fcm-c-green  { background: #1a5a2e; }
.fcm-c-green.active  { border-color: #4dbd7a; box-shadow: 0 0 10px rgba(20, 100, 50, 0.5); }
.fcm-c-purple { background: #5c1a8a; }
.fcm-c-purple.active { border-color: #c084fc; box-shadow: 0 0 10px rgba(120, 40, 180, 0.5); }
.fcm-c-white  { background: #4a5548; }
.fcm-c-white.active  { border-color: #c8d5cc; box-shadow: 0 0 10px rgba(150, 160, 155, 0.4); }

.fcm-quick-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
}

.fcm-types {
    display: flex;
    gap: 5px;
    align-items: center;
}
.fcm-type-chip {
    padding: 5px 11px;
    border: 1px solid var(--border);
    background: transparent;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.fcm-type-chip:hover {
    color: var(--text-2);
    border-color: var(--border-strong);
}
.fcm-type-chip.active {
    color: var(--neon);
    border-color: var(--neon);
    background: rgba(46, 255, 126, 0.06);
}

.fcm-search-meta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}
.fcm-search-meta b {
    color: var(--neon);
    font-weight: 700;
}
.fcm-search-query {
    color: var(--text-2);
    font-style: italic;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* ── Body / scroll container ── */
.fcm-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
    min-height: 0;
    position: relative;
}
.fcm-body::-webkit-scrollbar { width: 8px; }
.fcm-body::-webkit-scrollbar-track { background: rgba(46, 255, 126, 0.04); }
.fcm-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 1px solid var(--bg-2);
}
.fcm-body::-webkit-scrollbar-thumb:hover { background: var(--neon); }

/* Loading state */
.fcm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
}
.fcm-loading.hidden { display: none; }
.fcm-loading p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon);
}
.fcm-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--neon);
    border-radius: 50%;
    animation: fcm-spin 0.9s linear infinite;
}
@keyframes fcm-spin { to { transform: rotate(360deg); } }

.fcm-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ── HUD card grid ── */
.fcm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
}

.fcm-card {
    position: relative;
    cursor: pointer;
}
.fcm-card:hover .fcm-frame {
    border-color: var(--border-strong);
}

/* Read-only gallery (cards-by-artist): cards aren't interactive — drop the
   pointer cursor and the clickable hover glow. The info overlay still reveals. */
.fcm-grid-readonly .fcm-card {
    cursor: default;
}
.fcm-grid-readonly .fcm-card:hover .fcm-frame {
    border-color: var(--border);
    box-shadow: none;
}

.fcm-frame {
    aspect-ratio: 5/7;
    padding: 4px;
    border: 1px solid var(--border);
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: linear-gradient(165deg, #0a0e13, #151e2e);
}
.fcm-card:hover .fcm-frame {
    box-shadow: 0 0 10px var(--neon-glow);
    border-color: var(--neon);
}

.fcm-frame::before,
.fcm-frame::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 4;
    pointer-events: none;
}
.fcm-frame::before {
    top: 2px; left: 2px;
    border-top: 1px solid var(--neon);
    border-left: 1px solid var(--neon);
    box-shadow: -1px -1px 0 rgba(46, 255, 126, 0.2);
}
.fcm-frame::after {
    bottom: 2px; right: 2px;
    border-bottom: 1px solid var(--neon);
    border-right: 1px solid var(--neon);
    box-shadow: 1px 1px 0 rgba(46, 255, 126, 0.2);
}

.fcm-art {
    width: 100%;
    height: 100%;
    background: linear-gradient(165deg, var(--art2, #0a0e13), var(--art, #151e2e));
    position: relative;
    overflow: hidden;
}
.fcm-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.92;
}
/* Subtle HUD scanline overlay on the art */
.fcm-art::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.06) 50%);
    background-size: 100% 4px;
    z-index: 2;
}

/* Always-visible top-right ID + rarity chip + bottom name (on hover) */
.fcm-ovr {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}
.fcm-ovr-top {
    display: flex;
    justify-content: flex-end;
    padding: 5px;
}
.fcm-id {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text);
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
}
.fcm-ovr-bot {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.82) 28%, rgba(0, 0, 0, 0.88));
    padding: 12px 6px 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}
.fcm-card:hover .fcm-ovr-bot {
    opacity: 1;
    transform: translateY(0);
}
.fcm-card-name {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fcm-card-stats {
    display: flex;
    gap: 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.fcm-ap { color: var(--amber); }
.fcm-hp { color: var(--neon); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .filtered-cards-modal {
        padding: 16px;
    }
    .fcm-content {
        max-width: 100%;
        max-height: calc(100vh - 32px);
    }
    .fcm-strip {
        padding: 8px 14px;
        gap: 10px;
    }
    .fcm-search-header { padding: 12px 14px 10px; }
    .fcm-quick-filters {
        flex-wrap: wrap;
        gap: 10px;
    }
    .fcm-search-meta {
        margin-left: 0;
        flex-basis: 100%;
        order: 99;
    }
    .fcm-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
}