:root {
    color-scheme: dark;

    --bg:
        #0d1117;

    --panel:
        #151b23;

    --panel-soft:
        #11171e;

    --line:
        #28323d;

    --line-soft:
        #202934;

    --text:
        #f4f7fa;

    --muted:
        #98a7b7;

    --faint:
        #6f7e8d;

    --accent:
        #48c7ff;

    --live:
        #4ddd91;

    --upcoming:
        #ffb84d;

    --ended:
        #ff6464;

    --radius:
        14px;

    --max:
        1180px;
}


* {
    box-sizing:
        border-box;
}


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


body {
    margin:
        0;

    min-height:
        100vh;

    background:
        var(--bg);

    color:
        var(--text);

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

    font-size:
        16px;

    line-height:
        1.45;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
select {
    font:
        inherit;
}


button {
    cursor:
        pointer;
}


.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        50;

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

    background:
        rgba(
            13,
            17,
            23,
            0.96
        );
}


.site-header-inner {
    max-width:
        var(--max);

    height:
        64px;

    margin:
        0 auto;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


.brand {
    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        0.7px;
}


.brand-dot {
    color:
        var(--accent);
}


.nav {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.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:
        42px 0 64px;
}


.page-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        26px;
}


.eyebrow {
    margin-bottom:
        8px;

    color:
        var(--accent);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


h1 {
    margin:
        0;

    font-size:
        clamp(
            30px,
            5vw,
            46px
        );

    line-height:
        1.05;

    letter-spacing:
        -1.4px;
}


.page-copy {
    max-width:
        720px;

    margin:
        12px 0 0;

    color:
        var(--muted);

    font-size:
        16px;
}


.stats {
    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        20px;
}


.stat {
    min-width:
        0;

    padding:
        16px 17px;

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

    border-radius:
        12px;

    background:
        var(--panel);
}


.stat-number {
    display:
        block;

    font-size:
        25px;

    line-height:
        1;

    font-weight:
        800;
}


.stat-label {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.6px;
}


.filters {
    display:
        grid;

    grid-template-columns:
        minmax(
            260px,
            1.6fr
        )
        repeat(
            3,
            minmax(
                150px,
                0.7fr
            )
        );

    gap:
        10px;

    margin-bottom:
        16px;
}


.input,
.select {
    width:
        100%;

    height:
        46px;

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

    border-radius:
        10px;

    outline:
        none;

    background:
        var(--panel);

    color:
        var(--text);

    padding:
        0 14px;
}


.input:focus,
.select:focus {
    border-color:
        #4fa7cc;
}


.toolbar {
    min-height:
        36px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        16px;

    margin-bottom:
        8px;
}


.result-count {
    color:
        var(--muted);

    font-size:
        14px;
}


.reset {
    border:
        0;

    background:
        transparent;

    color:
        var(--accent);

    font-weight:
        700;
}


.campaign-list {
    overflow:
        hidden;

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

    border-radius:
        var(--radius);

    background:
        var(--panel);
}


.campaign-row {
    min-height:
        88px;

    display:
        grid;

    grid-template-columns:
        66px
        minmax(
            0,
            1.5fr
        )
        minmax(
            140px,
            0.7fr
        )
        110px
        150px
        34px;

    align-items:
        center;

    gap:
        16px;

    padding:
        11px 16px;

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

    transition:
        background
        120ms
        ease;
}


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


.campaign-row:hover {
    background:
        #1a222c;
}


.campaign-art {
    width:
        62px;

    height:
        62px;

    overflow:
        hidden;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        10px;

    background:
        #0b0f14;
}


.campaign-art img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;
}


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


.campaign-title {
    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        17px;

    font-weight:
        800;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.campaign-sub {
    overflow:
        hidden;

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        13px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.meta-value {
    color:
        #d5dde5;

    font-size:
        14px;

    font-weight:
        700;
}


.meta-label {
    margin-top:
        4px;

    color:
        var(--faint);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.status {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px 9px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.4px;
}


.status::before {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    content:
        "";
}


.status-live {
    color:
        #a6f4ce;

    background:
        rgba(
            77,
            221,
            145,
            0.1
        );
}


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


.status-upcoming {
    color:
        #ffd392;

    background:
        rgba(
            255,
            184,
            77,
            0.11
        );
}


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


.status-ended {
    color:
        #ffadad;

    background:
        rgba(
            255,
            100,
            100,
            0.1
        );
}


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


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

    font-size:
        23px;

    text-align:
        right;
}


.pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        20px;
}


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

    height:
        40px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        9px;

    background:
        var(--panel);

    color:
        var(--text);

    font-weight:
        700;
}


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

    background:
        #1d2b34;
}


.page-button:disabled {
    opacity:
        0.38;

    cursor:
        default;
}


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

    color:
        var(--muted);

    text-align:
        center;
}


.error {
    color:
        #ffabab;
}


/*
 * CAMPAIGN DETAIL
 */

.back-link {
    display:
        inline-flex;

    margin-bottom:
        24px;

    color:
        var(--muted);

    font-size:
        14px;

    font-weight:
        700;
}


.back-link:hover {
    color:
        var(--text);
}


.campaign-hero {
    display:
        grid;

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

    gap:
        30px;

    align-items:
        center;

    padding-bottom:
        30px;

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


.hero-art {
    width:
        190px;

    height:
        190px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        var(--panel);
}


.hero-art img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.hero-title {
    margin:
        9px 0 0;

    font-size:
        clamp(
            30px,
            5vw,
            45px
        );

    line-height:
        1.04;

    letter-spacing:
        -1.2px;
}


.hero-game {
    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        17px;

    font-weight:
        700;
}


.hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        22px;
}


.button {
    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 15px;

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

    border-radius:
        9px;

    background:
        var(--panel);

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        800;
}


.button-primary {
    border-color:
        #286b89;

    background:
        #173849;

    color:
        #d6f3ff;
}


.detail-meta {
    display:
        grid;

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

    gap:
        10px;

    margin:
        26px 0 34px;
}


.detail-meta-item {
    padding:
        15px;

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

    border-radius:
        11px;

    background:
        var(--panel);
}


.section-title {
    margin:
        0 0 16px;

    font-size:
        24px;

    line-height:
        1.15;
}


.rewards-grid {
    display:
        grid;

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

    gap:
        12px;
}


.reward-card {
    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        13px;

    background:
        var(--panel);
}


.reward-art {
    aspect-ratio:
        1 / 1;

    display:
        grid;

    place-items:
        center;

    padding:
        16px;

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

    background:
        #10151b;
}


.reward-art img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.reward-body {
    padding:
        14px;
}


.reward-name {
    min-height:
        42px;

    font-size:
        15px;

    font-weight:
        800;
}


.reward-requirement {
    margin-top:
        9px;

    color:
        var(--muted);

    font-size:
        13px;
}


.reward-kind {
    margin-top:
        10px;

    color:
        var(--faint);

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.4px;
}


@media (
    max-width:
    940px
) {

    .stats {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }


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


    .campaign-row {
        grid-template-columns:
            60px
            minmax(
                0,
                1fr
            )
            110px
            34px;
    }


    .campaign-game,
    .campaign-time {
        display:
            none;
    }


    .rewards-grid {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }
}


@media (
    max-width:
    640px
) {

    .site-header-inner {
        height:
            auto;

        min-height:
            58px;

        padding:
            10px 14px;

        gap:
            10px;
    }


    .brand {
        font-size:
            18px;
    }


    .nav {
        gap:
            2px;
    }


    .nav a {
        padding:
            8px 7px;

        font-size:
            12px;
    }


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

        padding-top:
            28px;
    }


    .page-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


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


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


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

        grid-template-columns:
            56px
            minmax(
                0,
                1fr
            )
            30px;

        gap:
            11px;

        padding:
            10px;
    }


    .campaign-art {
        width:
            54px;

        height:
            54px;
    }


    .campaign-status,
    .campaign-game,
    .campaign-time {
        display:
            none;
    }


    .campaign-title {
        font-size:
            15px;
    }


    .campaign-sub {
        font-size:
            12px;
    }


    .campaign-hero {
        grid-template-columns:
            110px
            minmax(
                0,
                1fr
            );

        gap:
            18px;
    }


    .hero-art {
        width:
            110px;

        height:
            110px;
    }


    .hero-title {
        font-size:
            27px;
    }


    .hero-game {
        font-size:
            14px;
    }


    .detail-meta {
        grid-template-columns:
            1fr
            1fr;
    }


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


@media (
    max-width:
    430px
) {

    .nav a:nth-child(2) {
        display:
            none;
    }


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


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