/* FlaroCity Spirit Beasts — Collection Registry Battles-template pass.
   Page-specific only. Battles, shared UI, navigation, data, filtering, and pagination are untouched. */

html body main.approved-collection-page {
    --fsb-collection-width: 1860px;
    --fsb-collection-frame: url("../../img/fcsb/ui/bboard.webp");
    --fsb-collection-divider: url("../../img/fcsb/ratings/divider.webp");
    --fsb-collection-panel: rgba(2, 7, 10, .86);
    --fsb-collection-panel-deep: rgba(1, 5, 8, .93);
    --fsb-collection-line: rgba(217, 171, 66, .34);
    --fsb-collection-gold: #f4d179;
    --fsb-collection-copy: #ded2b9;
    width: 100% !important;
    max-width: none !important;
    padding-top: 8px !important;
}

html body main.approved-collection-page > section {
    width: min(var(--fsb-collection-width), calc(100% - 36px)) !important;
    max-width: var(--fsb-collection-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Centered Battles-style hero. */
html body main.approved-collection-page > .collection-hero-repair {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 0 !important;
    min-height: 0 !important;
    margin: 0 auto 8px !important;
    padding: 18px 24px 28px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
}

html body main.approved-collection-page > .collection-hero-repair::before,
html body main.approved-collection-page > .collection-hero-repair::after {
    display: none !important;
    content: none !important;
}

html body main.approved-collection-page .collection-hero-copy-repair {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 980px !important;
    padding: 0 !important;
    text-align: center !important;
}

html body main.approved-collection-page .collection-hero-copy-repair h1 {
    margin: 0 !important;
    transform: none !important;
    color: var(--fsb-collection-gold) !important;
    font-size: clamp(3.7rem, 4.4vw, 5.25rem) !important;
    line-height: 1 !important;
    white-space: normal !important;
    text-align: center !important;
}

html body main.approved-collection-page .collection-hero-copy-repair p {
    max-width: 900px !important;
    margin: 10px auto 0 !important;
    color: var(--fsb-collection-copy) !important;
    font-size: clamp(1rem, 1.05vw, 1.18rem) !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

html body main.approved-collection-page .collection-hero-copy-repair::after {
    content: "" !important;
    display: block !important;
    width: min(760px, 82vw) !important;
    height: 58px !important;
    margin: 8px auto 0 !important;
    background: var(--fsb-collection-divider) center / 100% auto no-repeat !important;
    filter: none !important;
}

html body main.approved-collection-page .collection-cardsets-repair {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: -2px auto 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: auto !important;
    text-align: center !important;
}

html body main.approved-collection-page .collection-cardsets-repair h2 {
    margin: 0 !important;
    color: var(--fsb-collection-gold) !important;
    font: 700 1.55rem/1.1 var(--serif) !important;
    text-align: center !important;
}

html body main.approved-collection-page .collection-cardsets-repair p {
    max-width: 760px !important;
    margin: 5px auto 10px !important;
    color: #cbbda5 !important;
    font-size: .86rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

html body main.approved-collection-page .collection-set-jumps-repair {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

html body main.approved-collection-page .collection-set-jumps-repair .image-button,
html body main.approved-collection-page .collection-set-jumps-repair a.image-button,
html body main.approved-collection-page .collection-set-jumps-repair .image-button.small {
    width: 208px !important;
    height: 62px !important;
    min-width: 208px !important;
    min-height: 62px !important;
    max-width: 208px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
}

html body main.approved-collection-page .collection-set-jumps-repair .image-button img,
html body main.approved-collection-page .collection-set-jumps-repair a.image-button img,
html body main.approved-collection-page .collection-set-jumps-repair .image-button.small img {
    width: 208px !important;
    height: 62px !important;
    max-width: 208px !important;
    max-height: 62px !important;
    object-fit: contain !important;
}

/* Registry lane: each major block uses the approved ornate frame. */
html body main.approved-collection-page > .collection-registry-repair {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body main.approved-collection-page .collection-filter-panel,
html body main.approved-collection-page .card-set-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 28px solid transparent !important;
    border-radius: 0 !important;
    border-image-source: var(--fsb-collection-frame) !important;
    border-image-slice: 95 125 90 125 !important;
    border-image-width: 28px 36px !important;
    border-image-outset: 0 !important;
    border-image-repeat: stretch !important;
    background:
        radial-gradient(circle at 50% 0, rgba(93, 33, 139, .11), transparent 34rem),
        var(--fsb-collection-panel) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34) !important;
}

html body main.approved-collection-page .collection-filter-panel::before,
html body main.approved-collection-page .collection-filter-panel::after,
html body main.approved-collection-page .card-set-section::before,
html body main.approved-collection-page .card-set-section::after {
    display: none !important;
    content: none !important;
}

html body main.approved-collection-page .collection-filter-panel {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 18px 28px 20px !important;
}

html body main.approved-collection-page .card-set-section {
    display: grid !important;
    gap: 12px !important;
    margin: -19px 0 0 !important;
    padding: 20px 24px 24px !important;
}

html body main.approved-collection-page .collection-filter-panel > *,
html body main.approved-collection-page .card-set-section > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Filters. */
html body main.approved-collection-page .collection-filter-panel .filter-group {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

html body main.approved-collection-page .collection-filter-panel .filter-group > span {
    color: var(--fsb-collection-gold) !important;
    font: 700 1.05rem/1 var(--serif) !important;
    text-align: left !important;
}

html body main.approved-collection-page .rarity-filter-row {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

html body main.approved-collection-page .element-filter-row {
    display: grid !important;
    grid-template-columns: repeat(14, minmax(58px, 1fr)) !important;
    gap: 7px !important;
}

html body main.approved-collection-page .rarity-filter,
html body main.approved-collection-page .element-filter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(194, 139, 42, .38) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, rgba(93, 38, 135, .24), rgba(2, 6, 10, .88)) !important;
    color: #ddd0b8 !important;
    box-sizing: border-box !important;
}

html body main.approved-collection-page .rarity-filter:hover,
html body main.approved-collection-page .element-filter:hover,
html body main.approved-collection-page .rarity-filter.active,
html body main.approved-collection-page .element-filter.active {
    border-color: rgba(242, 188, 74, .92) !important;
    color: #ffe09a !important;
    box-shadow: inset 0 0 0 1px rgba(166, 61, 255, .25), 0 0 14px rgba(166, 61, 255, .14) !important;
}

html body main.approved-collection-page .rarity-filter img,
html body main.approved-collection-page .element-filter img {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    object-fit: contain !important;
}

html body main.approved-collection-page .rarity-filter span,
html body main.approved-collection-page .element-filter span {
    font-size: .72rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

/* Set headings. */
html body main.approved-collection-page .set-heading {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    text-align: center !important;
}

html body main.approved-collection-page .set-heading > div {
    grid-column: 2 !important;
    justify-self: center !important;
    max-width: 940px !important;
    text-align: center !important;
}

html body main.approved-collection-page .set-heading > span {
    grid-column: 3 !important;
    justify-self: end !important;
    color: #75df64 !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
}

html body main.approved-collection-page .set-heading h3 {
    margin: 0 !important;
    color: var(--fsb-collection-gold) !important;
    font-size: clamp(2rem, 2.4vw, 3rem) !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

html body main.approved-collection-page .set-heading p {
    margin: 5px 0 0 !important;
    color: #cbbda5 !important;
    font-size: .82rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Card grids. */
html body main.approved-collection-page .set-card-grid,
html body main.approved-collection-page .base-set-grid,
html body main.approved-collection-page .compact-set-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
}

html body main.approved-collection-page .base-set-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

html body main.approved-collection-page .compact-set-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

html body main.approved-collection-page .set-card {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid rgba(214, 155, 44, .30) !important;
    border-radius: 2px !important;
    background: rgba(0, 0, 0, .34) !important;
    box-sizing: border-box !important;
}

html body main.approved-collection-page .set-card:hover {
    border-color: rgba(235, 187, 79, .66) !important;
    background: rgba(17, 10, 24, .58) !important;
    box-shadow: 0 0 18px rgba(126, 53, 194, .16) !important;
}

html body main.approved-collection-page .set-card-art {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
    border: 1px solid rgba(230, 185, 93, .20) !important;
    background: #020304 !important;
}

html body main.approved-collection-page .set-card-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html body main.approved-collection-page .set-card-caption {
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    min-height: 48px !important;
    text-align: center !important;
}

html body main.approved-collection-page .set-card-caption strong {
    color: #ffe099 !important;
    font-size: .82rem !important;
    line-height: 1.08 !important;
}

html body main.approved-collection-page .set-card-caption span {
    color: #e3d5bc !important;
    font-size: .70rem !important;
    line-height: 1.08 !important;
}

html body main.approved-collection-page .set-card-caption em {
    color: #a99d8d !important;
    font-size: .59rem !important;
    line-height: 1.12 !important;
}

html body main.approved-collection-page .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px auto 0 !important;
}

html body main.approved-collection-page .pagination button {
    min-width: 36px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-color: rgba(214, 164, 61, .45) !important;
    font-size: .74rem !important;
}

/* Exact approved Battles footer structure. */
html body:has(main.approved-collection-page) .site-footer {
    width: min(1660px, calc(100% - 240px)) !important;
    max-width: 1660px !important;
    margin: 8px auto 0 !important;
    padding: 18px 0 20px !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr) !important;
    grid-template-areas:
        "brand status links"
        "legal legal legal" !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    box-sizing: border-box !important;
}

html body:has(main.approved-collection-page) .site-footer > div:first-child {
    grid-area: brand !important;
    justify-self: start !important;
}

html body:has(main.approved-collection-page) .site-footer .footer-status {
    grid-area: status !important;
    justify-self: center !important;
    align-self: center !important;
    text-align: center !important;
}

html body:has(main.approved-collection-page) .site-footer .footer-links {
    grid-area: links !important;
    justify-self: end !important;
    align-self: center !important;
    text-align: right !important;
}

html body:has(main.approved-collection-page) .site-footer .footer-legal {
    grid-area: legal !important;
    justify-self: center !important;
    margin-top: 6px !important;
    color: #d8b857 !important;
    text-align: center !important;
}

@media (max-width: 1480px) {
    html body main.approved-collection-page .element-filter-row {
        grid-template-columns: repeat(7, minmax(72px, 1fr)) !important;
    }
    html body main.approved-collection-page .base-set-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    html body main.approved-collection-page .compact-set-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    html body main.approved-collection-page .rarity-filter-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    html body main.approved-collection-page .base-set-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    html body main.approved-collection-page .compact-set-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    html body main.approved-collection-page > section,
    html body:has(main.approved-collection-page) .site-footer {
        width: min(100% - 12px, var(--fsb-collection-width)) !important;
    }

    html body main.approved-collection-page > .collection-hero-repair {
        padding: 18px 12px 22px !important;
    }

    html body main.approved-collection-page .collection-filter-panel,
    html body main.approved-collection-page .card-set-section {
        border-width: 18px !important;
        border-image-width: 18px 20px !important;
    }

    html body main.approved-collection-page .collection-filter-panel {
        padding: 16px 18px 18px !important;
    }

    html body main.approved-collection-page .card-set-section {
        margin-top: 8px !important;
        padding: 18px 16px 20px !important;
    }

    html body main.approved-collection-page .collection-filter-panel .filter-group {
        grid-template-columns: 1fr !important;
    }

    html body main.approved-collection-page .collection-filter-panel .filter-group > span {
        text-align: center !important;
    }

    html body main.approved-collection-page .element-filter-row {
        grid-template-columns: repeat(5, minmax(66px, 1fr)) !important;
    }

    html body:has(main.approved-collection-page) .site-footer {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "status"
            "links"
            "legal" !important;
        padding-inline: 12px !important;
    }
}

@media (max-width: 760px) {
    html body main.approved-collection-page .collection-hero-copy-repair h1 {
        font-size: clamp(2.9rem, 11vw, 4.2rem) !important;
    }

    html body main.approved-collection-page .collection-set-jumps-repair .image-button,
    html body main.approved-collection-page .collection-set-jumps-repair a.image-button,
    html body main.approved-collection-page .collection-set-jumps-repair .image-button.small,
    html body main.approved-collection-page .collection-set-jumps-repair .image-button img,
    html body main.approved-collection-page .collection-set-jumps-repair a.image-button img,
    html body main.approved-collection-page .collection-set-jumps-repair .image-button.small img {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    html body main.approved-collection-page .rarity-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body main.approved-collection-page .element-filter-row {
        grid-template-columns: repeat(4, minmax(64px, 1fr)) !important;
    }

    html body main.approved-collection-page .base-set-grid,
    html body main.approved-collection-page .compact-set-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body main.approved-collection-page .set-heading {
        grid-template-columns: 1fr !important;
    }

    html body main.approved-collection-page .set-heading > div,
    html body main.approved-collection-page .set-heading > span {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

@media (max-width: 520px) {
    html body main.approved-collection-page .element-filter-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body main.approved-collection-page .base-set-grid,
    html body main.approved-collection-page .compact-set-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* FSB_COLLECTION_PAGINATION_HERO_FIX_20260710
   Keep Card Sets text clear of the hero divider gem and allow the existing
   JavaScript pagination to hide non-active Base Set cards. */
html body main.approved-collection-page .collection-cardsets-repair {
    margin-top: 18px !important;
}

/* FSB_COLLECTION_ALL_SETS_12_20260710
   Keep every registry set visually consistent: six cards across on desktop,
   two rows per page (12 cards), with independent pagination per set. */
@media (min-width: 981px) {
    html body main.approved-collection-page .set-card-grid.base-set-grid,
    html body main.approved-collection-page .set-card-grid.compact-set-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

html body main.approved-collection-page .set-card-grid > .set-card[hidden] {
    display: none !important;
}

/* FSB_COLLECTION_BASE_GRID_MATCH_20260710 START
   Match Base Set to Founder/Summer: six cards across on wide screens,
   with the existing independent 12-card pagination providing two rows. */
@media (min-width: 981px) {
    html body main.collection-page-main-repair.approved-collection-page > section.collection-registry-repair .card-set-section > .set-card-grid.base-set-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}
/* FSB_COLLECTION_BASE_GRID_MATCH_20260710 END */


html body main.approved-collection-page .collection-filter-empty {
    margin: 18px auto 10px;
    padding: 18px 22px;
    border: 1px solid rgba(214, 168, 67, .36);
    background: rgba(3, 8, 12, .78);
    color: #d9ccb5;
    text-align: center;
}

html body main.approved-collection-page .collection-filter-empty[hidden],
html body main.approved-collection-page .pagination[hidden] {
    display: none !important;
}