/* FlaroCity Spirit Beasts — approved July 2026 mockup foundation.
   Loaded after page-local legacy overrides so the approved screenshots win
   without changing navigation, footer structure, game logic, or data flow. */
:root {
    --fsb-ui-gold: #d89a2e;
    --fsb-ui-gold-bright: #ffd77a;
    --fsb-ui-gold-soft: rgba(230, 185, 93, .30);
    --fsb-ui-purple: #a63dff;
    --fsb-ui-panel: rgba(3, 8, 12, .96);
    --fsb-ui-copy: #dfd0b5;
    --fsb-ui-copy-muted: #bcae99;
    --fsb-ui-wide: 1840px;
}

body main[class^="approved-"],
body main[class*=" approved-"] {
    width: 100% !important;
    max-width: none !important;
    padding-top: 8px !important;
}

body main[class^="approved-"] p,
body main[class*=" approved-"] p {
    color: var(--fsb-ui-copy) !important;
    line-height: 1.55 !important;
}

body main[class^="approved-"] .page-hero h1,
body main[class*=" approved-"] .page-hero h1 {
    color: var(--gold-bright, var(--fsb-ui-gold-bright)) !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 1px rgba(0, 0, 0, .55), 0 0 24px rgba(229, 163, 49, .08) !important;
}

body main[class^="approved-"] .page-hero p,
body main[class*=" approved-"] .page-hero p {
    color: #e3d3b8 !important;
    font-size: clamp(1rem, 1.05vw, 1.18rem) !important;
    line-height: 1.5 !important;
}

/* Reusable ornate four-corner treatment. */
body main[class^="approved-"] .account-status-panel::before,
body main[class^="approved-"] .account-panel::before,
body main[class*=" approved-"] .account-status-panel::before,
body main[class*=" approved-"] .account-panel::before {
    background:
        linear-gradient(135deg, #e0a832 0 2px, transparent 2px 10px, #e0a832 10px 12px, transparent 12px) left top / 28px 28px no-repeat,
        linear-gradient(225deg, #e0a832 0 2px, transparent 2px 10px, #e0a832 10px 12px, transparent 12px) right top / 28px 28px no-repeat,
        linear-gradient(45deg, #e0a832 0 2px, transparent 2px 10px, #e0a832 10px 12px, transparent 12px) left bottom / 28px 28px no-repeat,
        linear-gradient(315deg, #e0a832 0 2px, transparent 2px 10px, #e0a832 10px 12px, transparent 12px) right bottom / 28px 28px no-repeat !important;
}

@media (max-width: 760px) {
    body main[class^="approved-"],
    body main[class*=" approved-"] {
        padding-top: 6px !important;
    }

    body main[class^="approved-"] .page-hero p,
    body main[class*=" approved-"] .page-hero p {
        font-size: .96rem !important;
    }
}

/* Shared seven-item pagination for gameplay, collection, ratings, and admin lists. */
.gameplay-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1rem 0 0;
}

.gameplay-pagination a,
.gameplay-pagination span {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .72rem;
    border: 1px solid rgba(218, 170, 67, .48);
    border-radius: .55rem;
    background: rgba(4, 7, 14, .9);
    color: #f3d27e;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.gameplay-pagination a:hover,
.gameplay-pagination a:focus-visible {
    border-color: #f3d27e;
    background: rgba(73, 34, 111, .64);
    box-shadow: 0 0 0 2px rgba(138, 74, 190, .22), 0 0 18px rgba(138, 74, 190, .24);
    outline: none;
}

.gameplay-pagination .is-current,
.gameplay-pagination .current {
    border-color: #f3d27e;
    background: linear-gradient(180deg, rgba(114, 61, 157, .9), rgba(47, 20, 78, .96));
    color: #fff5cf;
    box-shadow: 0 0 16px rgba(151, 77, 211, .28);
}

.gameplay-pagination .is-disabled,
.gameplay-pagination .disabled {
    opacity: .42;
    cursor: not-allowed;
}

.gameplay-pagination-summary {
    margin-top: .65rem;
    color: #baa98f;
    font-size: .78rem;
    text-align: center;
}

@media (max-width: 560px) {
    .gameplay-pagination {
        gap: .32rem;
    }

    .gameplay-pagination a,
    .gameplay-pagination span {
        min-width: 2rem;
        min-height: 2rem;
        padding: .4rem .55rem;
        font-size: .78rem;
    }
}

/* Numbered seven-item pagination used by the collection registry. */
.collection-pagination {
    flex-wrap: wrap !important;
    gap: .45rem !important;
}

.collection-pagination button {
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    justify-content: center !important;
    padding: .45rem .72rem !important;
    border: 1px solid rgba(218, 170, 67, .48) !important;
    border-radius: .55rem !important;
    background: rgba(4, 7, 14, .9) !important;
    color: #f3d27e !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
}

.collection-pagination button:hover:not(:disabled),
.collection-pagination button:focus-visible {
    border-color: #f3d27e !important;
    background: rgba(73, 34, 111, .64) !important;
    box-shadow: 0 0 0 2px rgba(138, 74, 190, .22), 0 0 18px rgba(138, 74, 190, .24) !important;
    outline: none !important;
}

.collection-pagination button.active {
    border-color: #f3d27e !important;
    background: linear-gradient(180deg, rgba(114, 61, 157, .9), rgba(47, 20, 78, .96)) !important;
    color: #fff5cf !important;
}

.collection-pagination > .pagination-gap {
    min-width: auto !important;
    color: #baa98f !important;
}

.collection-pagination > .collection-pagination-summary {
    flex-basis: 100%;
    min-width: 0 !important;
    color: #baa98f !important;
    font-size: .78rem !important;
    text-align: center !important;
}

.pagination .pagination-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .2rem;
    color: #baa98f;
}