/* =========================================================
   TOP COLLECTION
   Shared styles for:
   merch.html
   merch-detail.html
   card-gallery.html
   merch-config.html
   ========================================================= */

:root {
    --collection-bg:
        #050914;

    --collection-panel:
        rgba(12, 17, 34, 0.82);

    --collection-panel-strong:
        rgba(11, 15, 31, 0.96);

    --collection-border:
        rgba(176, 135, 239, 0.18);

    --collection-border-strong:
        rgba(190, 143, 255, 0.38);

    --collection-text:
        rgba(255, 255, 255, 0.94);

    --collection-muted:
        rgba(212, 198, 229, 0.58);

    --collection-faint:
        rgba(203, 181, 228, 0.34);

    --collection-purple:
        #ba86ff;
}


* {
    box-sizing:
        border-box;
}


html {
    background:
        var(--collection-bg);
}


body {
    margin:0;
    min-height:100vh;
    background:radial-gradient(
            circle
            at
            12%
            9%,
            rgba(
                111,
                69,
                185,
                0.15
            ),
            transparent
            28%
        ),

        radial-gradient(
            circle
            at
            90%
            18%,
            rgba(
                72,
                85,
                164,
                0.10
            ),
            transparent
            28%
        ),

        linear-gradient(
            180deg,
            #050914,
            #040711
        );

    color:
        var(--collection-text);

    font-family:
        "Segoe UI",
        "Microsoft YaHei",
        Arial,
        sans-serif;
}


body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.28;

    background-image:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.40
            )
            0 1px,
            transparent
            1.5px
        );

    background-size:
        78px
        78px;

    mask-image:
        linear-gradient(
            180deg,
            rgba(
                0,
                0,
                0,
                0.80
            ),
            transparent
            70%
        );
}


a {
    color:
        inherit;
}


button,
input {
    font:
        inherit;
}


.collection-page {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            1180px,
            calc(
                100%
                -
                40px
            )
        );

    margin:
        0
        auto;

    padding:
        132px
        0
        90px;
}


/* =========================================================
   HERO
   ========================================================= */

.collection-hero {

    max-width:
        760px;

    margin-bottom:
        52px;
}


.collection-eyebrow,
.detail-kicker,
.config-label {

    color:
        rgba(
            196,
            151,
            255,
            0.68
        );

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.28em;
}


.collection-hero h1,
.subpage-heading h1,
.merch-detail-copy h1 {

    margin:
        12px
        0
        14px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        500;

    letter-spacing:
        0.02em;
}


.collection-hero h1 {

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );
}


.collection-hero p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--collection-muted);

    font-size:
        15px;

    line-height:
        1.9;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.collection-toolbar {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        28px;

    padding-bottom:
        18px;

    border-bottom:
        1px
        solid
        rgba(
            177,
            139,
            232,
            0.12
        );
}


.collection-search {

    width:
        min(
            460px,
            100%
        );

    display:
        grid;

    gap:
        8px;
}


.collection-search span {

    color:
        var(--collection-faint);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}


.collection-search input {

    width:
        100%;

    height:
        46px;

    padding:
        0
        16px;

    border:
        1px
        solid
        rgba(
            175,
            135,
            229,
            0.16
        );

    border-radius:
        12px;


    background:
        rgba(
            8,
            13,
            28,
            0.76
        );

    color:
        #ffffff;

    transition:
        border-color
        var(--dur-s) var(--ease-out),

        box-shadow
        var(--dur-s) var(--ease-out);
}


.collection-search input::placeholder {
    color:
        rgba(
            221,
            207,
            238,
            0.28
        );
}


.collection-search input:focus {

    border-color:
        rgba(
            187,
            130,
            255,
            0.52
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            164,
            95,
            255,
            0.08
        );
}


.collection-count {

    padding-bottom:
        12px;

    color:
        var(--collection-faint);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    white-space:
        nowrap;
}


/* =========================================================
   MERCH GRID
   ========================================================= */

.merch-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.merch-card {

    min-width:
        0;

    border:
        1px
        solid
        var(--collection-border);

    border-radius:
        22px;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            rgba(
                16,
                21,
                42,
                0.88
            ),
            rgba(
                7,
                11,
                24,
                0.92
            )
        );

    transition:
        transform
        var(--dur-m) var(--ease-out),

        border-color
        var(--dur-m) var(--ease-out),

        box-shadow
        var(--dur-m) var(--ease-out);
}


@media (hover: hover) {
.merch-card:hover {

    transform:
        translateY(
            -5px
        );

    border-color:
        rgba(
            190,
            140,
            255,
            0.34
        );

    box-shadow:
        0
        22px
        54px
        rgba(
            0,
            0,
            0,
            0.24
        );
}
}


.merch-cover-link {
    display:block;
    color:inherit;
    text-decoration:none;
}


.merch-cover {
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:radial-gradient(circle at 50% 38%,
            rgba(153,93,229,0.22),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #17172d,
            #090f21
        );
}


.merch-cover img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    transition:transform var(--dur-l) var(--ease-out), opacity var(--dur-l) var(--ease-out);
}


@media (hover: hover) {
.merch-card:hover
.merch-cover img {
    transform:
        scale(
            1.025
        );
}
}


.image-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:rgba(217,181,255,0.60);
    text-align:center;
}

.image-placeholder span {
    font-family:Georgia,serif;
    font-size:38px;
    font-style:italic;
}


.image-placeholder small {
    font-size:8px;
    letter-spacing:0.26em;
}


.merch-cover:not(.is-missing)
.image-placeholder,

.detail-cover-frame:not(.is-missing)
.image-placeholder,

.photocard-photo:not(.is-missing)
.image-placeholder,

.lightbox-image-frame:not(.is-missing)
.image-placeholder {display:none;}


.merch-number {
    position:absolute;
    top:16px;
    left:16px;
    z-index:3;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(3,7,18,0.58);
    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        9px;

    letter-spacing:
        0.12em;

    backdrop-filter:
        blur(
            10px
        );
}


.merch-card-body {

    padding:
        22px
        22px
        24px;
}


.merch-year {

    color:
        rgba(
            190,
            143,
            249,
            0.58
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.20em;
}


.merch-card h2 {

    margin:
        9px
        0
        5px;

    font-size:
        19px;

    font-weight:
        650;
}


.merch-english {

    color:
        var(--collection-faint);

    font-size:
        8px;

    letter-spacing:
        0.18em;
}


.merch-description {

    min-height:
        54px;

    margin:
        18px
        0
        20px;

    color:
        var(--collection-muted);

    font-size:
        13px;

    line-height:
        1.7;
}


.merch-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


.merch-category {

    color:
        rgba(
            230,
            217,
            244,
            0.48
        );

    font-size:
        10px;
}


.merch-open {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            188,
            135,
            255,
            0.25
        );

    border-radius:
        50%;

    color:
        rgba(
            231,
            211,
            255,
            0.92
        );

    text-decoration:
        none;

    transition:
        transform
        var(--dur-s) var(--ease-out),

        background
        var(--dur-s) var(--ease-out);
}


@media (hover: hover) {
.merch-card:hover .merch-open {

    transform:
        translateX(
            2px
        );

    background:
        rgba(
            156,
            91,
            255,
            0.10
        );
}
}


/* =========================================================
   BACK
   ========================================================= */







/* =========================================================
   DETAIL PAGE
   ========================================================= */

.merch-detail-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            0.86fr
        )
        minmax(
            0,
            1.14fr
        );

    gap:
        clamp(
            48px,
            7vw,
            94px
        );

    align-items:
        center;
}


.merch-detail-visual {
    min-width:0;
}


.detail-cover-frame {
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border:1px solid rgba(190,143,255,0.22);
    border-radius:28px;
    background:radial-gradient(circle at 40% 30%,
            rgba(155,94,238,0.26),
            transparent 38%
        ),
        linear-gradient(145deg,#171a35,#090d1f);

    box-shadow:0 30px 80px rgba(0,0,0,0.30);
}

.detail-cover-frame img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}


.detail-index {

    margin-top:
        15px;

    color:
        rgba(
            201,
            177,
            230,
            0.38
        );

    font-size:
        9px;

    letter-spacing:
        0.20em;
}


.merch-detail-copy {

    min-width:
        0;
}


.merch-detail-copy h1 {

    margin-top:
        14px;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height:
        1.08;
}


.detail-english {

    color:
        rgba(
            207,
            179,
            238,
            0.40
        );

    font-size:
        10px;

    letter-spacing:
        0.24em;
}


.detail-meta-row {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin:
        28px
        0
        20px;
}


.detail-meta-row span {

    padding:
        8px
        11px;

    border:
        1px
        solid
        rgba(
            181,
            132,
            241,
            0.16
        );

    border-radius:
        999px;

    background:
        rgba(
            16,
            20,
            40,
            0.62
        );

    color:
        rgba(
            229,
            214,
            244,
            0.64
        );

    font-size:
        10px;
}


.detail-description {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(
            244,
            237,
            250,
            0.72
        );

    font-size:
        15px;

    line-height:
        1.9;
}


.detail-note {

    max-width:
        620px;

    margin:
        14px
        0
        0;

    color:
        var(--collection-faint);

    font-size:
        11px;

    line-height:
        1.7;
}


.detail-choice-label {

    margin:
        38px
        0
        13px;

    color:
        rgba(
            196,
            159,
            234,
            0.46
        );

    font-size:
        10px;

    letter-spacing:
        0.16em;
}


.detail-choice-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


.choice-card {

    min-width:
        0;

    min-height:
        142px;

    padding:
        20px;

    display:
        flex;

    gap:
        16px;

    align-items:
        flex-start;

    border:
        1px
        solid
        rgba(
            183,
            134,
            246,
            0.18
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(
                18,
                22,
                45,
                0.88
            ),
            rgba(
                8,
                12,
                28,
                0.88
            )
        );

    text-decoration:
        none;

    transition:
        transform
        var(--dur-s) var(--ease-out),

        border-color
        var(--dur-s) var(--ease-out),

        background
        var(--dur-s) var(--ease-out);
}


@media (hover: hover) {
.choice-card:hover {

    transform:
        translateY(
            -3px
        );

    border-color:
        rgba(
            196,
            142,
            255,
            0.42
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                34,
                27,
                66,
                0.92
            ),
            rgba(
                12,
                14,
                34,
                0.92
            )
        );
}
}


.choice-symbol {

    width:
        38px;

    height:
        38px;

    flex:
        0
        0
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            192,
            142,
            255,
            0.24
        );

    border-radius:
        50%;

    color:
        rgba(
            223,
            197,
            255,
            0.90
        );
}


.choice-copy {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.choice-copy strong {

    margin-top:
        1px;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size:
        15px;
}


.choice-copy small {

    margin-top:
        4px;

    color:
        var(--collection-faint);

    font-size:
        8px;

    letter-spacing:
        0.16em;
}


.choice-copy em {

    margin-top:
        26px;

    color:
        rgba(
            216,
            191,
            246,
            0.60
        );

    font-size:
        10px;

    font-style:
        normal;

    line-height:
        1.5;
}


/* =========================================================
   SUBPAGE HEADING
   ========================================================= */

.subpage-heading {

    margin-bottom:
        32px;
}


.subpage-heading h1 {

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );
}


.subpage-heading p {

    margin:
        0;

    color:
        var(--collection-faint);

    font-size:
        10px;

    letter-spacing:
        0.20em;
}


/* =========================================================
   CARD GALLERY
   ========================================================= */

.photocard-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;
}


.photocard {

    padding:
        0;

    border:
        0;

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.photocard-photo {

    position:
        relative;

    aspect-ratio:
        2.5
        /
        3.5;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            193,
            148,
            250,
            0.20
        );

    border-radius:
        18px;

    background:
        radial-gradient(
            circle
            at
            45%
            30%,
            rgba(
                160,
                95,
                234,
                0.20
            ),
            transparent
            38%
        ),

        linear-gradient(
            150deg,
            #17182d,
            #0a0f20
        );

    transition:
        transform
        var(--dur-s) var(--ease-out),

        border-color
        var(--dur-s) var(--ease-out);
}


@media (hover: hover) {
.photocard:hover
.photocard-photo {

    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            202,
            151,
            255,
            0.42
        );
}
}


.photocard-photo img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.photocard-info {

    padding:
        12px
        4px
        0;
}


.photocard-info strong {

    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size:
        12px;

    font-weight:
        650;
}


.photocard-info span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--collection-faint);

    font-size:
        9px;

    letter-spacing:
        0.10em;
}


.card-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        3000;

    padding:
        40px
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            2,
            5,
            13,
            0.88
        );

    backdrop-filter:
        blur(
            18px
        );
}


.card-lightbox.open {

    display:
        flex;
}


.lightbox-close {

    position:
        absolute;

    top:
        24px;

    right:
        28px;

    width:
        46px;

    height:
        46px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius:
        50%;

    background:
        rgba(
            11,
            14,
            28,
            0.76
        );

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        200;

    cursor:
        pointer;
}


.lightbox-card {

    width:
        min(
            390px,
            100%
        );
}


.lightbox-image-frame {

    position:
        relative;

    aspect-ratio:
        2.5
        /
        3.5;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            196,
            148,
            255,
            0.32
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            #18182f,
            #090e20
        );

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            0.46
        );
}


.lightbox-image-frame img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    background:
        #070a13;
}


.lightbox-info {

    padding-top:
        16px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        16px;
}


.lightbox-info strong {
    font-size:
        13px;
}


.lightbox-info span {

    color:
        var(--collection-faint);

    font-size:
        10px;
}


/* =========================================================
   CONFIG
   ========================================================= */

.config-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.3fr
        )
        minmax(
            280px,
            0.7fr
        );

    gap:
        24px;

    align-items:
        start;
}


.config-main-card,
.config-info-card {

    border:
        1px
        solid
        var(--collection-border);

    border-radius:
        22px;

    background:
        linear-gradient(
            180deg,
            rgba(
                15,
                20,
                39,
                0.88
            ),
            rgba(
                7,
                11,
                24,
                0.92
            )
        );
}


.config-main-card {

    padding:
        26px;
}


.config-card-head {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        22px;

    border-bottom:
        1px
        solid
        rgba(
            182,
            142,
            234,
            0.12
        );
}


.config-card-head h2 {

    margin:
        8px
        0
        0;

    font-size:
        22px;

    font-weight:
        600;
}


.config-count {

    color:
        var(--collection-faint);

    font-size:
        9px;

    letter-spacing:
        0.14em;
}


.config-items {

    display:
        grid;

    gap:
        0;
}


.config-item {

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-bottom:
        1px
        solid
        rgba(
            182,
            142,
            234,
            0.10
        );

    color:
        rgba(
            246,
            240,
            251,
            0.74
        );

    font-size:
        13px;
}


.config-item:last-child {
    border-bottom:
        0;
}


.config-check {

    width:
        28px;

    height:
        28px;

    flex:
        0
        0
        28px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            189,
            139,
            251,
            0.28
        );

    border-radius:
        50%;

    color:
        rgba(
            219,
            189,
            255,
            0.86
        );

    font-size:
        11px;
}


.config-info-card {

    padding:
        8px
        22px;
}


.config-info-row {

    padding:
        19px
        0;

    border-bottom:
        1px
        solid
        rgba(
            182,
            142,
            234,
            0.10
        );
}


.config-info-row:last-child {
    border-bottom:
        0;
}


.config-info-row span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--collection-faint);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}


.config-info-row strong {

    color:
        rgba(
            255,
            255,
            255,
            0.80
        );

    font-size:
        13px;

    font-weight:
        550;
}


.config-info-row p {

    margin:
        0;

    color:
        rgba(
            233,
            222,
            243,
            0.60
        );

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   EMPTY
   ========================================================= */

.collection-empty {

    padding:
        48px
        20px;

    border:
        1px
        dashed
        rgba(
            180,
            139,
            232,
            0.20
        );

    border-radius:
        18px;

    color:
        rgba(
            214,
            196,
            234,
            0.48
        );

    text-align:
        center;

    font-size:
        13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width:
    980px
) {

    .merch-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .merch-detail-layout {

        gap:
            42px;

    }


    .detail-choice-grid {

        grid-template-columns:
            1fr;

    }


    .photocard-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


@media (
    max-width:
    760px
) {

    .collection-page {

        width:
            min(
                100%
                -
                28px,
                680px
            );

        padding:
            108px
            0
            68px;

    }


    .collection-hero {

        margin-bottom:
            34px;

    }


    .collection-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            12px;

    }


    .collection-count {

        padding-bottom:
            0;

    }


    .merch-detail-layout {

        grid-template-columns:
            1fr;

    }


    .merch-detail-visual {

        width:
            min(
                100%,
                470px
            );

        margin:
            0
            auto;

    }


    .merch-detail-copy h1 {

        font-size:
            clamp(
                38px,
                11vw,
                54px
            );

    }


    .config-layout {

        grid-template-columns:
            1fr;

    }


    .photocard-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


@media (max-width:520px) {
    .merch-grid {grid-template-columns:1fr;}
    .merch-card {border-radius: 18px;}
    .merch-cover {aspect-ratio:5/5.4;}
    .detail-choice-grid {gap:10px;}
    .choice-card {min-height:126px;}
    .photocard-grid {gap:14px;}
    .config-main-card {padding:20px;}

}


/* =========================================================
   LARGE CARD GALLERY
   99+ / hundreds of card photos
   ========================================================= */

.gallery-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(130px, .8fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(181, 139, 237, .15);
    border-radius: 18px;
    background: rgba(8, 13, 29, .62);
}

.gallery-search-field,
.gallery-filter-field { min-width: 0; display: grid; gap: 7px; }

.gallery-search-field span,
.gallery-filter-field span {
    color: rgba(207, 185, 233, .40);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.gallery-search-field input,
.gallery-filter-field select {
    width: 100%; height: 44px; padding: 0 13px;
    border: 1px solid rgba(180, 137, 235, .16);
    border-radius: 11px;
    background: rgba(7, 11, 25, .86);
    color: rgba(255,255,255,.82); font-size: 12px;
}

.gallery-search-field input:focus,
.gallery-filter-field select:focus {
    border-color: rgba(192, 139, 255, .46);
    box-shadow: 0 0 0 3px rgba(161,95,246,.07);
}

.gallery-filter-field select { cursor: pointer; }

.gallery-reset {
    height: 44px; padding: 0 17px;
    border: 1px solid rgba(183,139,239,.19);
    border-radius: 11px;
    background: rgba(18,22,42,.76);
    color: rgba(229,215,244,.62);
    cursor: pointer;
    transition: border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.gallery-reset:hover {
    border-color: rgba(200,151,255,.38);
    color: #fff; background: rgba(147,91,222,.10);
}
}

.gallery-result-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 22px;
    color: rgba(198,173,228,.38);
    font-size: 9px; font-weight: 700; letter-spacing: .14em;
}

.photocard-info small {
    display: block; min-height: 14px; margin-top: 5px;
    color: rgba(198,177,222,.32); font-size: 8px; letter-spacing: .07em;
}

.load-more-wrap { display: flex; justify-content: center; margin-top: 42px; }

.load-more-button {
    min-width: 190px; min-height: 48px; padding: 0 22px;
    border: 1px solid rgba(193,143,255,.28);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(30,27,58,.88), rgba(12,15,32,.90));
    color: rgba(243,233,255,.82); cursor: pointer;
    transition: transform var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.load-more-button:hover {
    transform: translateY(-2px); border-color: rgba(205,160,255,.52);
    box-shadow: 0 14px 34px rgba(82,45,154,.16);
}
}

.load-more-button span { margin-left: 5px; color: rgba(204,181,229,.42); font-size: 9px; }
body.lightbox-open { overflow: hidden; }
.lightbox-info > div { display: flex; flex-direction: column; gap: 5px; }
#lightboxMeta { max-width: 48%; text-align: right; line-height: 1.5; }

@media (max-width: 980px) {
    .gallery-controls { grid-template-columns: 1fr 1fr; }
    .gallery-search-field { grid-column: 1 / -1; }
    .gallery-reset { width: 100%; }
}

@media (max-width: 560px) {
    .gallery-controls { grid-template-columns: 1fr; padding: 14px; }
    .gallery-search-field { grid-column: auto; }
    .gallery-result-bar { align-items: flex-start; flex-direction: column; gap: 6px; }
    .load-more-button { width: 100%; }
}


/* =========================================================
   MERCH FILTERS + OFFICIAL CONFIG IMAGES
   ========================================================= */

.merch-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin: -8px 0 30px;
    padding: 16px;
    border: 1px solid rgba(181, 139, 237, .14);
    border-radius: 16px;
    background: rgba(8, 13, 29, .52);
}

.merch-filter-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.merch-filter-field span {
    color: rgba(207, 185, 233, .40);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.merch-filter-field select {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(180, 137, 235, .16);
    border-radius: 11px;
    background: rgba(7, 11, 25, .86);
    color: rgba(255,255,255,.82);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.merch-filter-field select:focus {
    border-color: rgba(192, 139, 255, .46);
    box-shadow: 0 0 0 3px rgba(161,95,246,.07);
}

.merch-filter-reset {
    height: 44px;
    padding: 0 17px;
    border: 1px solid rgba(183,139,239,.19);
    border-radius: 11px;
    background: rgba(18,22,42,.76);
    color: rgba(229,215,244,.62);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.merch-filter-reset:hover {
    border-color: rgba(200,151,255,.38);
    color: #fff;
    background: rgba(147,91,222,.10);
}
}

.config-image-section {
    margin: 0 0 28px;
}

.config-image-section[hidden] {
    display: none;
}

.config-image-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.config-image-heading span {
    color: rgba(196,151,255,.58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .20em;
}

.config-image-heading strong {
    color: rgba(244,237,250,.70);
    font-size: 13px;
    font-weight: 600;
}

.config-image-list {
    display: grid;
    gap: 18px;
}

.config-image-frame {
    position: relative;
    width: 100%;
    min-height: 220px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(190,143,255,.18);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 20%, rgba(155,94,238,.16), transparent 34%),
        rgba(7,11,25,.82);
    box-shadow: 0 22px 54px rgba(0,0,0,.20);
}

.config-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.config-image-frame:not(.is-missing) .image-placeholder {
    display: none;
}

@media (max-width: 760px) {
    .merch-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .merch-filter-reset {
        width: 100%;
    }

    .config-image-frame {
        min-height: 160px;
        border-radius: 16px;
    }
}

@media (max-width: 520px) {
    .merch-filter-bar {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}


/* =========================================================
   MERCH VARIANT PICKER
   One merchandise series can contain a group edition + member editions.
   ========================================================= */

.variant-section {
    margin:
        34px
        0
        28px;
    padding:
        22px;
    border:
        1px
        solid
        rgba(190, 143, 255, 0.18);
    border-radius:
        20px;
    background:
        linear-gradient(
            180deg,
            rgba(17, 20, 39, 0.84),
            rgba(8, 12, 27, 0.82)
        );
}

.variant-section-head {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        18px;
    margin-bottom:
        18px;
}

.variant-section-head > div {
    display:
        grid;
    gap:
        5px;
}

.variant-section-head span,
.variant-select-control span {
    color:
        rgba(197, 157, 248, 0.58);
    font-size:
        8px;
    font-weight:
        750;
    letter-spacing:
        .20em;
}

.variant-section-head strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        24px;
    font-weight:
        500;
}

.variant-section-head small {
    color:
        rgba(221, 205, 239, 0.46);
    font-size:
        10px;
}

.variant-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );
    gap:
        10px;
}

.variant-card {
    min-width:
        0;
    padding:
        7px;
    border:
        1px
        solid
        rgba(191, 148, 244, 0.15);
    border-radius:
        15px;
    background:
        rgba(9, 13, 28, 0.76);
    color:
        inherit;
    cursor:
        pointer;
    text-align:
        left;
    transition:
        transform
        var(--dur-s) var(--ease-out),
        border-color
        var(--dur-s) var(--ease-out),
        background
        var(--dur-s) var(--ease-out),
        box-shadow
        var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.variant-card:hover {
    transform:
        translateY(
            -3px
        );
    border-color:
        rgba(199, 151, 255, 0.36);
}
}

.variant-card.active {
    border-color:
        rgba(202, 155, 255, 0.68);
    background:
        linear-gradient(
            180deg,
            rgba(116, 71, 177, 0.22),
            rgba(17, 19, 40, 0.94)
        );
    box-shadow:
        0
        0
        0
        2px
        rgba(173, 112, 244, 0.08),
        0
        13px
        30px
        rgba(0, 0, 0, 0.18);
}

.variant-card-visual {
    position:
        relative;
    display:
        grid;
    place-items:
        center;
    width:
        100%;
    aspect-ratio:
        1
        /
        1;
    overflow:
        hidden;
    border-radius:
        11px;
    background:
        radial-gradient(
            circle
            at
            50%
            30%,
            rgba(153, 93, 229, 0.20),
            transparent
            46%
        ),
        #0b1021;
}

.variant-card-visual img {
    width:
        100%;
    height:
        100%;
    display:
        block;
    object-fit:
        cover;
}

.variant-card-visual:not(.is-missing)
.variant-card-placeholder {
    display:
        none;
}

.variant-card-placeholder {
    color:
        rgba(217, 181, 255, 0.48);
    font-family:
        Georgia,
        serif;
    font-size:
        20px;
    font-style:
        italic;
}

.variant-card-copy {
    display:
        grid;
    gap:
        4px;
    padding:
        10px
        5px
        4px;
}

.variant-card-copy strong {
    overflow:
        hidden;
    font-size:
        12px;
    font-weight:
        650;
    text-overflow:
        ellipsis;
    white-space:
        nowrap;
}

.variant-card-copy small {
    color:
        rgba(213, 193, 236, 0.42);
    font-size:
        8px;
}

.subpage-heading-with-tools {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        26px;
}

.variant-select-control {
    width:
        min(
            220px,
            100%
        );
    display:
        grid;
    gap:
        7px;
    margin-bottom:
        5px;
}

.variant-select-control select {
    width:
        100%;
    height:
        44px;
    padding:
        0
        13px;
    border:
        1px
        solid
        rgba(190, 143, 245, 0.20);
    border-radius:
        11px;
    background:
        rgba(8, 12, 27, 0.90);
    color:
        rgba(255, 255, 255, 0.88);
    cursor:
        pointer;
}

.variant-select-control select:focus {
    border-color:
        rgba(199, 148, 255, 0.50);
    box-shadow:
        0
        0
        0
        3px
        rgba(161, 95, 246, 0.08);
}

@media (max-width: 980px) {
    .variant-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

@media (max-width: 760px) {
    .variant-section {
        padding:
            16px;
    }

    .variant-section-head,
    .subpage-heading-with-tools {
        align-items:
            stretch;
        flex-direction:
            column;
    }

    .variant-select-control {
        width:
            100%;
    }

    .variant-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


/* ALL MEMBERS virtual view */
.variant-card-all-members {
    border-style:
        dashed;
}

.variant-card-all-members .variant-card-visual {
    background:
        radial-gradient(
            circle
            at
            50%
            35%,
            rgba(186, 134, 255, 0.30),
            transparent
            48%
        ),
        linear-gradient(
            145deg,
            rgba(49, 35, 77, 0.95),
            rgba(10, 14, 31, 0.96)
        );
}

.variant-card-all-members .variant-card-placeholder {
    font-size:
        16px;
    font-style:
        normal;
    font-weight:
        750;
    letter-spacing:
        .10em;
}

.choice-card.is-disabled {
    cursor:
        default;
    pointer-events:
        none;
    opacity:
        .42;
    filter:
        grayscale(.25);
}

.choice-card.is-disabled em {
    color:
        rgba(214, 196, 234, 0.38);
}


/* =========================================================
   CARD SUBJECT FILTERS
   Solo / duo / unit / group can coexist in one card gallery.
   ========================================================= */

.card-subject-panel {
    margin:
        26px
        0
        16px;
    padding:
        18px;
    border:
        1px
        solid
        rgba(181, 139, 237, .15);
    border-radius:
        18px;
    background:
        linear-gradient(
            180deg,
            rgba(16, 19, 38, .72),
            rgba(8, 12, 28, .62)
        );
}

.card-subject-head {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        18px;
    margin-bottom:
        14px;
}

.card-subject-head > div {
    display:
        grid;
    gap:
        4px;
}

.card-subject-head span {
    color:
        rgba(198, 155, 248, .54);
    font-size:
        8px;
    font-weight:
        750;
    letter-spacing:
        .18em;
}

.card-subject-head strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        21px;
    font-weight:
        500;
}

.card-subject-head small {
    max-width:
        470px;
    color:
        rgba(216, 198, 235, .42);
    font-size:
        10px;
    line-height:
        1.6;
    text-align:
        right;
}

.card-subject-filters {
    display:
        flex;
    flex-wrap:
        wrap;
    gap:
        9px;
}

.card-subject-filter {
    min-height:
        38px;
    padding:
        0
        14px;
    border:
        1px
        solid
        rgba(183, 139, 239, .17);
    border-radius:
        999px;
    background:
        rgba(8, 13, 28, .72);
    color:
        rgba(226, 211, 242, .60);
    cursor:
        pointer;
    transition:
        transform
        var(--dur-s) var(--ease-out),
        border-color
        var(--dur-s) var(--ease-out),
        background
        var(--dur-s) var(--ease-out),
        color
        var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.card-subject-filter:hover:not(:disabled) {
    transform:
        translateY(
            -1px
        );
    border-color:
        rgba(199, 151, 255, .38);
    color:
        #fff;
}
}

.card-subject-filter.active {
    border-color:
        rgba(201, 155, 255, .60);
    background:
        linear-gradient(
            180deg,
            rgba(119, 72, 182, .30),
            rgba(31, 27, 59, .82)
        );
    color:
        #fff;
}

.card-subject-filter:disabled {
    cursor:
        default;
    opacity:
        .34;
}

.card-subject-filter span {
    display:
        inline-grid;
    place-items:
        center;
    min-width:
        22px;
    height:
        22px;
    margin-left:
        7px;
    padding:
        0
        6px;
    border-radius:
        999px;
    background:
        rgba(255, 255, 255, .07);
    color:
        rgba(233, 220, 248, .70);
    font-size:
        8px;
}

.gallery-controls {
    grid-template-columns:
        minmax(210px, 1.5fr)
        repeat(
            4,
            minmax(
                120px,
                .75fr
            )
        )
        auto;
}

.gallery-filter-field select:disabled {
    cursor:
        default;
    opacity:
        .42;
}

.photocard-subject-badge {
    position:
        absolute;
    z-index:
        3;
    top:
        10px;
    left:
        10px;
    min-height:
        25px;
    display:
        inline-flex;
    align-items:
        center;
    padding:
        0
        9px;
    border:
        1px
        solid
        rgba(255, 255, 255, .13);
    border-radius:
        999px;
    background:
        rgba(4, 8, 20, .72);
    color:
        rgba(255, 255, 255, .86);
    font-size:
        8px;
    font-weight:
        750;
    letter-spacing:
        .10em;
    backdrop-filter:
        blur(
            8px
        );
}

.photocard-subject-duo {
    background:
        rgba(67, 38, 95, .78);
}

.photocard-subject-unit {
    background:
        rgba(43, 49, 101, .78);
}

.photocard-subject-group {
    background:
        rgba(95, 57, 34, .78);
}

@media (max-width: 1120px) {
    .gallery-controls {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .gallery-search-field {
        grid-column:
            1
            /
            -1;
    }
}

@media (max-width: 760px) {
    .card-subject-head {
        align-items:
            flex-start;
        flex-direction:
            column;
    }

    .card-subject-head small {
        text-align:
            left;
    }

    .card-subject-filters {
        display:
            grid;
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .card-subject-filter {
        width:
            100%;
        justify-content:
            space-between;
    }
}

@media (max-width: 560px) {
    .gallery-controls {
        grid-template-columns:
            1fr;
    }

    .card-subject-panel {
        padding:
            14px;
    }

    .card-subject-filter:first-child {
        grid-column:
            1
            /
            -1;
    }
}


/* =========================================================
   MERCH EDITION PICKER
   Example: 伴手礼 / 场周 / 高会
   ========================================================= */

.edition-section {
    margin:
        34px
        0
        18px;
    padding:
        22px;
    border:
        1px
        solid
        rgba(190, 143, 255, 0.20);
    border-radius:
        20px;
    background:
        linear-gradient(
            180deg,
            rgba(24, 21, 45, 0.90),
            rgba(9, 12, 29, 0.86)
        );
    box-shadow:
        0
        18px
        48px
        rgba(0, 0, 0, .16);
}

.edition-section-head {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        18px;
    margin-bottom:
        18px;
}

.edition-section-head > div {
    display:
        grid;
    gap:
        5px;
}

.edition-section-head span {
    color:
        rgba(197, 157, 248, 0.62);
    font-size:
        8px;
    font-weight:
        750;
    letter-spacing:
        .20em;
}

.edition-section-head strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        25px;
    font-weight:
        500;
}

.edition-section-head small {
    color:
        rgba(221, 205, 239, 0.46);
    font-size:
        10px;
}

.edition-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
    gap:
        12px;
}

.edition-card {
    min-width:
        0;
    display:
        grid;
    grid-template-columns:
        86px
        1fr;
    gap:
        13px;
    align-items:
        center;
    padding:
        9px;
    border:
        1px
        solid
        rgba(191, 148, 244, .16);
    border-radius:
        16px;
    background:
        rgba(9, 13, 28, .76);
    color:
        inherit;
    cursor:
        pointer;
    text-align:
        left;
    transition:
        transform
        var(--dur-s) var(--ease-out),
        border-color
        var(--dur-s) var(--ease-out),
        background
        var(--dur-s) var(--ease-out),
        box-shadow
        var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.edition-card:hover {
    transform:
        translateY(
            -3px
        );
    border-color:
        rgba(199, 151, 255, .38);
}
}

.edition-card.active {
    border-color:
        rgba(202, 155, 255, .70);
    background:
        linear-gradient(
            135deg,
            rgba(118, 72, 183, .30),
            rgba(19, 21, 43, .96)
        );
    box-shadow:
        0
        0
        0
        2px
        rgba(173, 112, 244, .08),
        0
        14px
        34px
        rgba(0, 0, 0, .20);
}

.edition-card-visual {
    position:
        relative;
    display:
        grid;
    place-items:
        center;
    width:
        86px;
    aspect-ratio:
        1
        /
        1;
    overflow:
        hidden;
    border-radius:
        12px;
    background:
        radial-gradient(
            circle
            at
            50%
            30%,
            rgba(153, 93, 229, .24),
            transparent
            48%
        ),
        #0b1021;
}

.edition-card-visual img {
    width:
        100%;
    height:
        100%;
    display:
        block;
    object-fit:
        cover;
}

.edition-card-visual:not(.is-missing)
.edition-card-placeholder {
    display:
        none;
}

.edition-card-placeholder {
    color:
        rgba(217, 181, 255, .48);
    font-family:
        Georgia,
        serif;
    font-size:
        20px;
    font-style:
        italic;
}

.edition-card-copy {
    min-width:
        0;
    display:
        grid;
    gap:
        5px;
}

.edition-card-copy strong {
    overflow:
        hidden;
    font-size:
        15px;
    font-weight:
        650;
    text-overflow:
        ellipsis;
    white-space:
        nowrap;
}

.edition-card-copy small {
    color:
        rgba(213, 193, 236, .44);
    font-size:
        9px;
}

.subpage-switchers {
    min-width:
        min(
            470px,
            100%
        );
    display:
        flex;
    align-items:
        end;
    justify-content:
        flex-end;
    gap:
        12px;
}

.subpage-switchers
.variant-select-control {
    width:
        min(
            220px,
            100%
        );
}

@media (max-width: 980px) {
    .edition-grid {
        grid-template-columns:
            1fr;
    }

    .subpage-switchers {
        min-width:
            0;
        width:
            100%;
    }
}

@media (max-width: 760px) {
    .edition-section {
        padding:
            16px;
    }

    .edition-section-head {
        align-items:
            flex-start;
        flex-direction:
            column;
    }

    .edition-card {
        grid-template-columns:
            70px
            1fr;
    }

    .edition-card-visual {
        width:
            70px;
    }

    .subpage-switchers {
        align-items:
            stretch;
        flex-direction:
            column;
    }

    .subpage-switchers
    .variant-select-control {
        width:
            100%;
    }
}


/* =========================================================
   FULL-WIDTH MERCH DETAIL HEADING
   Keep long merchandise titles on one line on desktop and
   start the cover near the top instead of vertically centering it.
   ========================================================= */

.merch-detail-layout {
    align-items:
        start;
    column-gap:
        clamp(
            42px,
            5vw,
            72px
        );
    row-gap:
        30px;
}

.merch-detail-heading {
    grid-column:
        1
        /
        -1;
    min-width:
        0;
}

.merch-detail-heading h1 {
    margin:
        12px
        0
        12px;
    font-family:
        Georgia,
        "Times New Roman",
        "Noto Serif SC",
        "Songti SC",
        serif;
    font-size:
        clamp(
            32px,
            3vw,
            46px
        );
    font-weight:
        500;
    line-height:
        1.12;
    letter-spacing:
        -0.015em;
    white-space:
        nowrap;
}

.merch-detail-heading .detail-english {
    margin-top:
        2px;
}

.merch-detail-copy .detail-meta-row {
    margin-top:
        0;
}

@media (max-width: 980px) {
    .merch-detail-heading h1 {
        font-size:
            clamp(
                30px,
                4vw,
                40px
            );
        white-space:
            normal;
    }
}

@media (max-width: 760px) {
    .merch-detail-layout {
        row-gap:
            24px;
    }

    .merch-detail-heading h1 {
        font-size:
            clamp(
                36px,
                10vw,
                50px
            );
        line-height:
            1.08;
    }
}


/* =========================================================
   SEVEN-CARD VERSION ROW
   Desktop order: group, five members, all-members summary.
   ========================================================= */

@media (min-width: 981px) {

    .variant-card {
        padding:
            6px;
    }

    .variant-card-copy {
        padding:
            9px
            3px
            3px;
    }

    .variant-card-copy strong {
        font-size:
            11px;
    }

    .variant-card-copy small {
        font-size:
            7.5px;
        white-space:
            nowrap;
    }
}


/* =========================================================
   MERCH STYLE SELECTOR
   Top level: 组合款 / 个人款
   ========================================================= */

.merch-style-section {
    margin:
        28px
        0
        18px;
    padding:
        22px;
    border:
        1px
        solid
        rgba(190, 143, 255, .20);
    border-radius:
        20px;
    background:
        linear-gradient(
            180deg,
            rgba(20, 20, 42, .88),
            rgba(8, 12, 28, .84)
        );
}

.merch-style-section-head {
    display:
        flex;
    align-items:
        end;
    justify-content:
        space-between;
    gap:
        18px;
    margin-bottom:
        16px;
}

.merch-style-section-head > div {
    display:
        grid;
    gap:
        5px;
}

.merch-style-section-head span {
    color:
        rgba(197, 157, 248, .58);
    font-size:
        8px;
    font-weight:
        750;
    letter-spacing:
        .20em;
}

.merch-style-section-head strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        24px;
    font-weight:
        500;
}

.merch-style-section-head small {
    color:
        rgba(221, 205, 239, .46);
    font-size:
        10px;
}

.merch-style-grid {
    display:
        grid;
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );
    gap:
        12px;
}

.merch-style-card {
    min-width:
        0;
    min-height:
        112px;
    display:
        grid;
    grid-template-columns:
        92px
        1fr;
    gap:
        14px;
    align-items:
        center;
    padding:
        10px;
    border:
        1px
        solid
        rgba(191, 148, 244, .16);
    border-radius:
        17px;
    background:
        rgba(9, 13, 28, .76);
    color:
        inherit;
    cursor:
        pointer;
    text-align:
        left;
    transition:
        transform
        var(--dur-s) var(--ease-out),
        border-color
        var(--dur-s) var(--ease-out),
        background
        var(--dur-s) var(--ease-out),
        box-shadow
        var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
.merch-style-card:hover {
    transform:
        translateY(
            -2px
        );
    border-color:
        rgba(199, 151, 255, .38);
}
}

.merch-style-card.active {
    border-color:
        rgba(202, 155, 255, .68);
    background:
        linear-gradient(
            135deg,
            rgba(112, 70, 176, .28),
            rgba(16, 19, 40, .95)
        );
    box-shadow:
        0
        0
        0
        2px
        rgba(173, 112, 244, .08);
}

.merch-style-card-visual {
    position:
        relative;
    width:
        92px;
    aspect-ratio:
        1
        /
        1;
    overflow:
        hidden;
    border-radius:
        13px;
    background:
        radial-gradient(
            circle
            at
            50%
            35%,
            rgba(164, 99, 238, .24),
            transparent
            48%
        ),
        #0b1021;
}

.merch-style-card-visual img {
    width:
        100%;
    height:
        100%;
    display:
        block;
    object-fit:
        cover;
}

.merch-style-card-badge {
    position:
        absolute;
    left:
        8px;
    bottom:
        8px;
    padding:
        5px
        7px;
    border:
        1px
        solid
        rgba(255, 255, 255, .12);
    border-radius:
        999px;
    background:
        rgba(4, 8, 19, .70);
    color:
        rgba(238, 220, 255, .88);
    font-size:
        7px;
    font-weight:
        750;
    letter-spacing:
        .14em;
    backdrop-filter:
        blur(
            7px
        );
}

.merch-style-card-copy {
    min-width:
        0;
    display:
        grid;
    gap:
        7px;
}

.merch-style-card-copy strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        22px;
    font-weight:
        500;
}

.merch-style-card-copy small {
    color:
        rgba(216, 198, 235, .48);
    font-size:
        9px;
    line-height:
        1.6;
}

/* Personal mode: 全部单人 + five members on one row */
@media (min-width: 981px) {
    .variant-grid {
        grid-template-columns:
            repeat(
                6,
                minmax(
                    0,
                    1fr
                )
            );
        gap:
            9px;
    }
}

@media (max-width: 760px) {
    .merch-style-section {
        padding:
            16px;
    }

    .merch-style-section-head {
        align-items:
            flex-start;
        flex-direction:
            column;
    }

    .merch-style-grid {
        grid-template-columns:
            1fr;
    }

    .merch-style-card {
        grid-template-columns:
            76px
            1fr;
        min-height:
            96px;
    }

    .merch-style-card-visual {
        width:
            76px;
    }
}


/* =========================================================
   GROUP CARD ZOOM-OUT
   Keep all members visible in group cards.
   ========================================================= */

.photocard-photo-group img {
    object-fit:
        contain;
    padding:
        8px;
    background:
        rgba(
            5,
            9,
            20,
            .92
        );
}


/* =========================================================
   PHASE 2: STATES, MOTION, MOBILE FILTERS, LIGHTBOX NAV
   (appended; hidden attribute is handled globally by motion.css)
   ========================================================= */

/* ---- loading / error / empty ---- */
.merch-grid .top-skeleton {
    aspect-ratio: 4 / 6.4;
    min-height: 0;
    border-radius: 22px;
}

.photocard-grid .top-skeleton {
    aspect-ratio: 2.5 / 3.5;
    min-height: 0;
    border-radius: 18px;
}

.config-items .top-skeleton {
    min-height: 48px;
    border-radius: 12px;
}

a.top-state-retry {
    display: inline-block;
    text-decoration: none;
}

.is-loading [data-fill] {
    color: transparent !important;
    border-radius: 8px;
    background: linear-gradient(100deg,
        rgba(185, 132, 255, .06) 30%,
        rgba(216, 180, 255, .16) 50%,
        rgba(185, 132, 255, .06) 70%);
    background-size: 200% 100%;
    animation: top-shimmer 1.6s linear infinite;
    user-select: none;
    pointer-events: none;
}

.is-loading .choice-card {
    pointer-events: none;
    opacity: .5;
}

/* ---- merch card: one stretched link, visual unchanged ---- */
.merch-card {
    position: relative;
}

.merch-card:active {
    transform: scale(.985);
}

.merch-card-link {
    color: inherit;
    text-decoration: none;
}

.merch-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.merch-card-link:focus-visible {
    outline: none;
}

.merch-card:has(.merch-card-link:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.merch-number {
    pointer-events: none;
}

/* ---- press feedback ---- */
.card-subject-filter:not(:disabled):active,
.load-more-button:active,
.gallery-reset:active,
.merch-filter-reset:active,
.edition-card:active,
.merch-style-card:active,
.variant-card:active,
.choice-card:active,
.photocard:active .photocard-photo {
    transform: scale(.97);
}

.photocard-photo {
    transition: transform var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}

/* ---- filter toggle (mobile only) ---- */
.merch-filter-toggle,
.gallery-filter-toggle {
    display: none;
}

.merch-filter-collapse,
.merch-filter-fields,
.gallery-filter-collapse,
.gallery-filter-fields {
    display: contents;
}

.merch-filter-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(186, 134, 255, .92);
    color: #12081f;
    font-size: 11px;
    font-weight: 700;
    animation: top-scale-in var(--dur-s) var(--ease-spring) both;
}

@media (max-width: 760px) {
    .merch-filter-bar {
        display: block;
        margin: -8px 0 22px;
        padding: 10px;
    }

    .merch-filter-toggle,
    .gallery-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 44px;
        padding: 0 14px;
        border: 1px solid rgba(183, 139, 239, .19);
        border-radius: 11px;
        background: rgba(18, 22, 42, .76);
        color: rgba(229, 215, 244, .82);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
        transition: transform var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out);
    }

    .merch-filter-toggle:active,
    .gallery-filter-toggle:active {
        transform: scale(.97);
    }

    .merch-filter-chevron {
        margin-left: auto;
        width: 16px;
        height: 16px;
        transition: transform var(--dur-m) var(--ease-out);
    }

    [aria-expanded="true"] > .merch-filter-chevron {
        transform: rotate(180deg);
    }

    .merch-filter-collapse,
    .gallery-filter-collapse {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        transition: grid-template-rows var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out), margin-top var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
    }

    .merch-filter-collapse.is-open,
    .gallery-filter-collapse.is-open {
        grid-template-rows: 1fr;
        margin-top: 12px;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .merch-filter-fields,
    .gallery-filter-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        min-height: 0;
        overflow: hidden;
        padding: 3px;
        margin: -3px;
    }

    .merch-filter-reset,
    .gallery-reset {
        grid-column: 1 / -1;
        width: 100%;
    }

    .gallery-controls {
        grid-template-columns: 1fr;
    }

    .gallery-search-field {
        grid-column: auto;
    }

    /* 16px keeps iOS Safari from zooming into fields */
    .collection-search input,
    .gallery-search-field input,
    .gallery-filter-field select,
    .merch-filter-field select,
    .variant-select-control select {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .merch-filter-bar {
        padding: 10px;
    }

    .merch-filter-fields,
    .gallery-filter-fields {
        grid-template-columns: 1fr;
    }
}

/* ---- lightbox navigation ---- */
.card-lightbox {
    touch-action: pan-y;
}

.lightbox-close {
    transition: transform var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    translate: 0 -50%;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(11, 14, 28, .76);
    color: #fff;
    cursor: pointer;
    transition: transform var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}

.lightbox-nav .icon { font-size: 22px; }

.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

.lightbox-nav:disabled {
    opacity: .28;
    cursor: default;
}

.lightbox-nav:not(:disabled):active,
.lightbox-close:active {
    transform: scale(.94);
}

@media (hover: hover) {
    .lightbox-nav:not(:disabled):hover,
    .lightbox-close:hover {
        transform: scale(1.06);
        border-color: rgba(255, 255, 255, .34);
    }
}

@media (max-width: 560px) {
    .lightbox-nav {
        top: auto;
        bottom: 22px;
        translate: none;
    }

    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }
}


/* =========================================================
   FULL MERCH CARD VISIBILITY
   Every card keeps the complete photo visible without cropping.
   ========================================================= */

.photocard-photo img,
.photocard-photo-group img {
    object-fit:
        contain;
    object-position:
        center
        center;
    padding:
        0;
    background:
        #070a13;
}

/* "查看原图" in the card lightbox (TopUI.originalLink) */
.lightbox-info .top-original-link { align-self: flex-start; margin-top: 4px; }
.lightbox-info .top-original-link span { color: inherit; font-size: inherit; }

/* Long item names wrap instead of running past the right edge on desktop. */
.merch-detail-heading h1 {
    white-space: normal;
    text-wrap: balance;
}

/* Items marked "locked" in data/merch.json: listed, not open yet. */
.merch-card.is-locked {
    cursor: not-allowed;
}
.merch-card.is-locked .merch-cover img {
    filter: grayscale(.55) brightness(.7);
}
.merch-card.is-locked .merch-card-link::after {
    pointer-events: none;
}
@media (hover: hover) {
    .merch-card.is-locked:hover {
        transform: none;
    }
}
.merch-locked-badge {
    flex: none;
    padding: 4px 10px;
    border: 1px solid rgba(189, 139, 251, .35);
    border-radius: 999px;
    background: rgba(185, 132, 255, .1);
    color: rgba(234, 220, 255, .8);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}