:root {
    color-scheme: dark;

    --bg: #0d1117;
    --panel: #151b23;
    --panel-hover: #19232d;
    --line: #28323d;
    --line-soft: #202934;

    --text: #f4f7fa;
    --muted: #98a7b7;
    --faint: #6f7e8d;

    --cyan: #49c8ff;
    --green: #4ddd91;
    --orange: #ffb84d;
    --red: #ff7272;

    --max: 1180px;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;

    background: var(--bg);
    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


body {
    font-size: 16px;
    line-height: 1.45;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select {
    font: inherit;
}


.site-header {
    position: sticky;
    top: 0;
    z-index: 50;

    border-bottom:
        1px solid
        var(--line);

    background:
        #0d1117;
}


.header-inner {
    width:
        min(
            calc(100% - 32px),
            var(--max)
        );

    min-height: 64px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}


.brand {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .7px;
}


.brand span {
    color: var(--cyan);
}


.nav {
    display: flex;
    align-items: center;

    gap: 6px;
}


.nav a {
    padding: 9px 12px;

    border-radius: 8px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 700;
}


.nav a:hover,
.nav a.active {
    color: var(--text);
    background: #1b242e;
}


.page {
    width:
        min(
            calc(100% - 32px),
            var(--max)
        );

    margin: 0 auto;

    padding:
        46px 0
        72px;
}


.hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 32px;

    margin-bottom: 28px;
}


.eyebrow {
    margin-bottom: 8px;

    color: var(--cyan);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


h1 {
    margin: 0;

    font-size:
        clamp(
            38px,
            6vw,
            58px
        );

    line-height: 1;

    letter-spacing: -1.8px;
}


.hero-copy {
    max-width: 660px;

    margin:
        15px 0
        0;

    color: var(--muted);

    font-size: 16px;
}


.hero-stats {
    display: flex;

    gap: 25px;
}


.hero-stat strong {
    display: block;

    font-size: 24px;
    line-height: 1;
}


.hero-stat span {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.controls {
    display: grid;

    grid-template-columns:
        minmax(240px,1fr)
        170px
        190px;

    gap: 9px;

    margin-bottom: 12px;
}


.control {
    height: 46px;

    padding:
        0 13px;

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

    border-radius: 9px;

    outline: none;

    background:
        var(--panel);

    color:
        var(--text);
}


.control:focus {
    border-color:
        #3f718a;
}


.toolbar {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    color: var(--muted);

    font-size: 12px;
}


.badge-table {
    overflow: hidden;

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

    border-radius: 14px;

    background:
        var(--panel);
}


.badge-header,
.badge-row {
    display: grid;

    grid-template-columns:
        76px
        minmax(220px,1.45fr)
        105px
        160px
        145px
        115px
        28px;

    align-items: center;

    gap: 15px;
}


.badge-header {
    min-height: 42px;

    padding:
        0 15px;

    border-bottom:
        1px solid
        var(--line);

    color: var(--faint);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .55px;

    text-transform: uppercase;
}


.badge-row {
    min-height: 82px;

    padding:
        10px 15px;

    border-bottom:
        1px solid
        var(--line-soft);

    transition:
        background
        120ms ease;
}


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


.badge-row:hover {
    background:
        var(--panel-hover);
}


.badge-image {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 9px;

    background:
        #0b1015;
}


.badge-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 5px;
}


.badge-main {
    min-width: 0;
}


.badge-title {
    overflow: hidden;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.badge-category {
    overflow: hidden;

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.badge-requirement {
    overflow: hidden;

    margin-top: 3px;

    color: var(--faint);

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    width: max-content;

    font-size: 12px;
    font-weight: 800;
}


.status::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--faint);
}


.status.active {
    color: var(--green);
}


.status.active::before {
    background: var(--green);
}


.status.upcoming {
    color: var(--orange);
}


.status.upcoming::before {
    background: var(--orange);
}


.status.ended {
    color: var(--red);
}


.status.ended::before {
    background: var(--red);
}


.status.archived {
    color: var(--muted);
}


.date {
    color: #d2dae1;

    font-size: 12px;
}


.date small {
    display: block;

    margin-top: 2px;

    color: var(--faint);

    font-size: 10px;
}


.meta-value {
    overflow: hidden;

    color: #dce3e9;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.owner-count {
    font-size: 14px;
    font-weight: 800;
}


.arrow {
    color: var(--faint);

    font-size: 22px;

    text-align: right;
}


.loading,
.empty,
.error {
    padding:
        60px 20px;

    color: var(--muted);

    text-align: center;
}


.error {
    color: #ffaaaa;
}


.pagination {
    display: flex;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 20px;
}


.page-button {
    min-width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding:
        0 10px;

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

    border-radius: 9px;

    background:
        var(--panel);

    color: var(--text);

    font-weight: 700;

    cursor: pointer;
}


.page-button:hover:not(:disabled),
.page-button.active {
    border-color:
        #3d7089;

    background:
        #1b2a34;
}


.page-button:disabled {
    opacity: .35;
    cursor: default;
}


.page-gap {
    min-width: 22px;

    display: grid;
    place-items: center;

    color: var(--faint);
}


.note {
    margin-top: 22px;

    color: var(--faint);

    font-size: 11px;
}


@media (max-width: 950px) {

    .badge-header,
    .badge-row {
        grid-template-columns:
            70px
            minmax(200px,1fr)
            105px
            150px
            105px
            28px;
    }


    .column-acquisition,
    .acquisition {
        display: none;
    }
}


@media (max-width: 720px) {

    .header-inner {
        width:
            calc(
                100% - 22px
            );

        min-height: 58px;

        padding:
            9px 0;
    }


    .brand {
        font-size: 18px;
    }


    .nav {
        gap: 2px;
    }


    .nav a {
        padding:
            8px 7px;

        font-size: 12px;
    }


    .page {
        width:
            calc(
                100% - 22px
            );

        padding:
            32px 0
            52px;
    }


    .hero {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    h1 {
        font-size: 40px;
    }


    .hero-stats {
        width: 100%;

        justify-content:
            space-between;
    }


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


    .badge-header {
        display: none;
    }


    .badge-row {
        grid-template-columns:
            58px
            minmax(0,1fr)
            72px
            22px;

        gap: 10px;

        min-height: 76px;

        padding:
            9px 11px;
    }


    .badge-image {
        width: 52px;
        height: 52px;
    }


    .date,
    .acquisition,
    .owners-full {
        display: none;
    }


    .status {
        font-size: 10px;
    }


    .badge-title {
        font-size: 14px;
    }


    .badge-category {
        font-size: 10px;
    }
}


@media (max-width: 430px) {

    .nav a:first-child {
        display: none;
    }
}


/* =========================================================
   POLITA_BADGE_STORE_CARDS_V29A

   Visual lineage:
   Polita extension Game Store badge cards.

   Frontend only.
   ========================================================= */


.badge-table {
    display: grid;

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

    gap: 12px;

    overflow: visible;

    border: 0;

    background:
        transparent;
}


.badge-header {
    display: none;
}


.badge-row.badge-store-card-v29a {
    position: relative;

    display: flex;

    min-width: 0;
    min-height: 142px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.034),
            rgba(11,14,18,.96) 42%,
            rgba(5,8,11,.985)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);

    transition:
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}


.badge-row.badge-store-card-v29a:last-child {
    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.badge-row.badge-store-card-v29a:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(53,242,222,.23);

    background:
        linear-gradient(
            145deg,
            rgba(53,242,222,.045),
            rgba(12,16,20,.98) 42%,
            rgba(5,8,11,.99)
        );

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.22),
        inset 0 1px 0
        rgba(255,255,255,.035);
}


.badge-store-art-v29a {
    position:
        relative;

    flex:
        0 0 116px;

    width:
        116px;

    height:
        auto;

    min-height:
        142px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    padding:
        15px;

    border-radius:
        0;

    border-right:
        1px solid
        rgba(255,255,255,.055);

    background:
        linear-gradient(
            145deg,
            rgba(53,242,222,.10),
            rgba(11,15,19,.93) 52%,
            rgba(5,7,10,.99)
        );
}


.badge-store-art-v29a::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            transparent 35%,
            transparent 68%,
            rgba(53,242,222,.025)
        );
}


.badge-store-art-v29a img {
    position:
        relative;

    z-index:
        1;

    width:
        84px;

    height:
        84px;

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    padding:
        0;

    filter:
        drop-shadow(
            0 7px 12px
            rgba(0,0,0,.28)
        );
}


.badge-store-art-fallback-v29a {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    place-items:
        center;

    width:
        72px;

    height:
        72px;

    border:
        1px solid
        rgba(53,242,222,.16);

    border-radius:
        16px;

    background:
        rgba(53,242,222,.045);

    color:
        rgba(174,250,242,.56);

    font-family:
        Rajdhani,
        Inter,
        system-ui,
        sans-serif;

    font-size:
        32px;

    font-weight:
        800;
}


.badge-store-copy-v29a {
    display:
        flex;

    flex:
        1;

    min-width:
        0;

    flex-direction:
        column;

    padding:
        14px 15px 12px;
}


.badge-store-top-v29a {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;
}


.badge-store-card-v29a .badge-title {
    min-width:
        0;

    overflow:
        hidden;

    color:
        #f7fbff;

    font-family:
        Rajdhani,
        Inter,
        system-ui,
        sans-serif;

    font-size:
        19px;

    font-weight:
        750;

    line-height:
        1.12;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.badge-access-v29a {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        23px;

    padding:
        1px 7px 0;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.68);

    font-family:
        Rajdhani,
        Inter,
        system-ui,
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .045em;

    line-height:
        1;

    white-space:
        nowrap;
}


.badge-access-v29a.free {
    border-color:
        rgba(53,242,222,.28);

    background:
        rgba(53,242,222,.055);

    color:
        #8ff9ee;
}


.badge-access-v29a.paid {
    border-color:
        rgba(255,198,109,.25);

    background:
        rgba(255,198,109,.05);

    color:
        #ffd79b;
}


.badge-access-v29a.unknown {
    color:
        rgba(255,255,255,.43);
}


.badge-store-card-v29a .badge-category {
    overflow:
        hidden;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.48);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.25;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.badge-store-chips-v29a {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        9px;
}


.badge-status-v29a,
.badge-date-chip-v29a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    min-height:
        22px;

    padding:
        2px 6px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        6px;

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.60);

    font-family:
        Rajdhani,
        Inter,
        system-ui,
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .035em;

    line-height:
        1;

    white-space:
        nowrap;
}


.badge-status-dot-v29a {
    width:
        6px;

    height:
        6px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.35);
}


.badge-status-v29a.live {
    border-color:
        rgba(72,226,147,.16);

    color:
        #82efb4;
}


.badge-status-v29a.live
.badge-status-dot-v29a {
    background:
        #56df9b;

    box-shadow:
        0 0 8px
        rgba(86,223,155,.30);
}


.badge-status-v29a.upcoming {
    border-color:
        rgba(255,190,92,.16);

    color:
        #ffc978;
}


.badge-status-v29a.upcoming
.badge-status-dot-v29a {
    background:
        #ffba55;
}


.badge-status-v29a.ended {
    color:
        rgba(255,255,255,.48);
}


.badge-status-v29a.ended
.badge-status-dot-v29a {
    background:
        rgba(255,255,255,.30);
}


.badge-status-v29a.unknown {
    color:
        rgba(255,255,255,.38);
}


.badge-store-card-v29a .badge-requirement {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        8px;

    color:
        rgba(218,226,234,.70);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.35;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.badge-view-v29a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    margin-top:
        auto;

    padding-top:
        9px;

    color:
        #aefaf2;

    font-family:
        Rajdhani,
        Inter,
        system-ui,
        sans-serif;

    font-size:
        12px;

    font-weight:
        750;
}


.badge-view-arrow-v29a {
    color:
        rgba(174,250,242,.72);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        .7;

    transition:
        transform
        140ms ease;
}


.badge-store-card-v29a:hover
.badge-view-arrow-v29a {
    transform:
        translateX(2px);
}


.badge-store-card-v29a
.date,

.badge-store-card-v29a
.acquisition,

.badge-store-card-v29a
.owners-full,

.badge-store-card-v29a
.arrow {
    display:
        none !important;
}


@media (max-width: 920px) {

    .badge-table {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .badge-table {
        gap:
            9px;
    }


    .badge-row.badge-store-card-v29a {
        min-height:
            126px;
    }


    .badge-store-art-v29a {
        flex-basis:
            94px;

        width:
            94px;

        min-height:
            126px;

        padding:
            12px;
    }


    .badge-store-art-v29a img {
        width:
            70px;

        height:
            70px;
    }


    .badge-store-copy-v29a {
        padding:
            11px 11px 10px;
    }


    .badge-store-card-v29a
    .badge-title {
        font-size:
            17px;
    }


    .badge-access-v29a {
        min-height:
            21px;

        padding:
            1px 6px 0;

        font-size:
            10px;
    }


    .badge-date-chip-v29a {
        display:
            none;
    }


    .badge-store-card-v29a
    .badge-requirement {
        font-size:
            10px;
    }

}


/* END POLITA_BADGE_STORE_CARDS_V29A */


/* =========================================================
   POLITA_BADGES_TWO_COLUMN_GRID_V29B

   V29A cards preserved.
   Desktop results now fill the available width.
   ========================================================= */


.badge-table {
    width:
        100% !important;

    max-width:
        none !important;

    align-self:
        stretch !important;

    justify-self:
        stretch !important;

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


.badge-table
> .badge-row.badge-store-card-v29a {
    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    box-sizing:
        border-box;
}


@media (max-width: 900px) {

    .badge-table {
        grid-template-columns:
            1fr !important;
    }

}


/* END POLITA_BADGES_TWO_COLUMN_GRID_V29B */


/* =========================================================
   POLITA_BADGES_REAL_TWO_COLUMN_LAYOUT_V29C

   V29B loaded correctly but targeted only the outer table.
   V29C handles:
   - outer grid-column spanning
   - direct badge rows
   - nested row render host
   ========================================================= */


/* Make badge results occupy the complete available section. */

.badge-table {
    grid-column:
        1 / -1 !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    justify-self:
        stretch !important;

    align-self:
        stretch !important;
}


/*
   Case A:
   badge cards are direct children of .badge-table
*/

.badge-table:has(> .badge-store-card-v29a) {
    display:
        grid !important;

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

    gap:
        12px !important;
}


/*
   Case B:
   JS renders badge cards into an inner host element.
   Select the direct child whose direct children are cards.
*/

.badge-table
> :has(> .badge-store-card-v29a) {
    grid-column:
        1 / -1 !important;

    display:
        grid !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

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

    gap:
        12px !important;
}


/* Every card occupies exactly one grid cell. */

.badge-table
.badge-store-card-v29a {
    grid-column:
        auto !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;
}


/*
   Do not allow an old row/list host rule
   to constrain results to half the page.
*/

.badge-table
> :has(> .badge-store-card-v29a) {
    flex:
        none !important;
}


/* Tablet/mobile stays one card per row. */

@media (max-width: 900px) {

    .badge-table:has(> .badge-store-card-v29a),

    .badge-table
    > :has(> .badge-store-card-v29a) {
        grid-template-columns:
            1fr !important;
    }

}


/* END POLITA_BADGES_REAL_TWO_COLUMN_LAYOUT_V29C */

/* POLITA_MIXED_ACCESS_LIST_CSS_START_V31G2D9 */

.badge-access-v29a.mixed {
    border-color: rgba(89, 222, 255, 0.48);
    background: rgba(89, 222, 255, 0.09);
    color: #f4f8fb;
}

/* POLITA_MIXED_ACCESS_LIST_CSS_END_V31G2D9 */