/* Extracted from gallery.html — 2026-03-05 */

body { background: #0f1318; color: #c9d1d9; }

        /* ---- Hero ---- */
        .gallery-hero {
            text-align: center;
            padding: 60px 20px 30px;
            margin-bottom: 10px;
        }
        .gallery-hero h1 {
            font-family: 'Cinzel', serif;
            font-size: 2.6rem;
            background: linear-gradient(135deg, #f59e0b, #f97316);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }
        .gallery-hero .lead {
            color: #8b949e;
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }
        .gallery-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 18px;
            flex-wrap: wrap;
        }
        .gallery-stats span {
            font-family: 'Cinzel', serif;
            color: #f59e0b;
            font-size: 1rem;
        }
        .gallery-stats span b {
            font-size: 1.4rem;
            display: block;
            color: #e2e8f0;
        }


        /* ---- Filter Bar ---- */
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            padding: 0 20px 30px;
            position: sticky;
            top: 60px;
            z-index: 99;
            background: #0f1318;
            padding-top: 15px;
            padding-bottom: 20px;
        }
        .filter-btn {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            color: #8b949e;
            padding: 6px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.85rem;
            font-family: 'Nunito Sans', sans-serif;
            transition: all 0.2s;
        }
        .filter-btn:hover { background: rgba(255,255,255,0.1); color: #c9d1d9; }
        .filter-btn.active {
            background: rgba(245,158,11,0.15);
            border-color: rgba(245,158,11,0.4);
            color: #f59e0b;
        }
        .filter-btn i { margin-right: 5px; }

        /* ---- Category Sections ---- */
        .gallery-section { margin-bottom: 50px; }
        .gallery-section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .gallery-section-header i {
            font-size: 1.3rem;
            padding: 8px;
            border-radius: 8px;
        }
        .gallery-section-header h2 {
            font-family: 'Cinzel', serif;
            font-size: 1.4rem;
            color: #e2e8f0;
            margin: 0;
        }
        .gallery-section-header .count {
            font-size: 0.8rem;
            color: #8b949e;
            margin-left: auto;
        }

        /* ---- Image Grid ---- */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }
        .gallery-card {
            position: relative;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
        }
        .gallery-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.4);
            border-color: rgba(245,158,11,0.3);
        }
        .gallery-card img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            object-position: center top;
            display: block;
            transition: transform 0.3s;
        }
        .gallery-card:hover img { transform: scale(1.03); }
        .gallery-card-info {
            padding: 10px 12px;
        }
        .gallery-card-info h4 {
            font-family: 'Cinzel', serif;
            font-size: 0.85rem;
            color: #e2e8f0;
            margin: 0 0 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gallery-card-info .card-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .card-tag {
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.06);
            color: #8b949e;
        }
        .card-tag.race { background: rgba(245,158,11,0.12); color: #fbbf24; }
        .card-tag.gender-m { background: rgba(59,130,246,0.12); color: #93c5fd; }
        .card-tag.gender-f { background: rgba(236,72,153,0.12); color: #f9a8d4; }
        .card-tag.animated { background: rgba(168,85,247,0.15); color: #c4b5fd; }


        /* ---- Lightbox ---- */
        .lightbox-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0,0,0,0.92);
            backdrop-filter: blur(8px);
            justify-content: center;
            align-items: center;
        }
        .lightbox-overlay.open { display: flex; }
        .lightbox-container {
            display: flex;
            max-width: 1100px;
            max-height: 90vh;
            width: 90%;
            background: #161b22;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0,0,0,0.6);
            animation: lightboxIn 0.25s ease-out;
        }
        @keyframes lightboxIn {
            from { opacity: 0; transform: scale(0.92); }
            to   { opacity: 1; transform: scale(1); }
        }
        .lightbox-image-wrap {
            flex: 1 1 60%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0d1117;
            min-height: 300px;
        }
        .lightbox-image-wrap img {
            max-width: 100%;
            max-height: 85vh;
            object-fit: contain;
        }
        .lightbox-info {
            flex: 0 0 320px;
            padding: 30px 25px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-left: 1px solid rgba(255,255,255,0.06);
        }
        .lightbox-info h2 {
            font-family: 'Cinzel', serif;
            font-size: 1.3rem;
            color: #f59e0b;
            margin: 0;
        }
        .lightbox-info .lb-category {
            font-size: 0.8rem;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .lightbox-info .lb-lore {
            color: #c9d1d9;
            line-height: 1.7;
            font-size: 0.95rem;
        }
        .lightbox-info .lb-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .lightbox-info .lb-tag {
            font-size: 0.7rem;
            padding: 3px 10px;
            border-radius: 12px;
            background: rgba(255,255,255,0.06);
            color: #8b949e;
        }
        .lightbox-close {
            position: absolute;
            top: 18px;
            right: 22px;
            color: #8b949e;
            font-size: 1.8rem;
            cursor: pointer;
            z-index: 10000;
            transition: color 0.2s;
            background: none;
            border: none;
            line-height: 1;
        }
        .lightbox-close:hover { color: #f59e0b; }
        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.1);
            color: #c9d1d9;
            font-size: 1.5rem;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 10000;
        }
        .lightbox-nav:hover { background: rgba(245,158,11,0.3); border-color: #f59e0b; color: #fff; }
        .lightbox-prev { left: 15px; }
        .lightbox-next { right: 15px; }

        /* ---- Responsive ---- */
        @media (max-width: 768px) {
            /* Filter bar: convert wrapping chip-cloud into a single horizontal
               scroll strip so it doesn't grow tall enough to cover gallery content.
               Mirrors the YouTube/Twitter chip-rail pattern. */
            .filter-bar {
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                gap: 6px;
                padding: 10px 16px;
                top: 68px; /* sit just below mobile main header */
                -webkit-overflow-scrolling: touch;
                /* Hide horizontal scrollbar but keep scrolling functional */
                scrollbar-width: none;
                -ms-overflow-style: none;
                /* Subtle gradient edge hints that there's more to scroll */
                mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
                -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            }
            .filter-bar::-webkit-scrollbar { display: none; }

            .filter-btn {
                flex-shrink: 0;
                white-space: nowrap;
                font-size: 0.75rem;
                padding: 5px 12px;
            }

            /* The race-filters span has inline flex-wrap:wrap that would force
               its buttons onto a new row — override so they flow inline with the
               category chips in the horizontal scroll strip. */
            #race-filters {
                flex-wrap: nowrap !important;
                flex-shrink: 0;
            }
            #race-filters .filter-btn { flex-shrink: 0; }

            .lightbox-container { flex-direction: column; max-height: 95vh; }
            .lightbox-info { flex: 0 0 auto; max-height: 40vh; border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
            .lightbox-image-wrap { max-height: 55vh; }
            .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
            .gallery-card img { height: 200px; }
            .gallery-hero h1 { font-size: 1.8rem; }
        }