:root {

    --bg: #f5f7fb;

    --card: #ffffff;

    --text: #172033;

    --muted: #667085;

    --primary: #6d28d9;

    --primary-light: #8b5cf6;

    --border: #e5e7eb;

    --shadow:
        0 20px 60px rgba(15, 23, 42, .10);

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        radial-gradient(
            circle at 50% -10%,
            #ede9fe 0,
            #f5f7fb 42%
        );

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    min-height: 100vh;

}


body.modal-open {
    overflow: hidden;
}


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


/*
|--------------------------------------------------------------------------
| TOP BAR
|--------------------------------------------------------------------------
*/

.topbar {

    height: 68px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    backdrop-filter:
        blur(15px);

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

    position:
        sticky;

    top: 0;

    z-index: 100;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap: 9px;

    font-weight:
        900;

    font-size:
        18px;

}


.brand-icon {
    font-size: 23px;
}


.topbar nav {

    display:
        flex;

    align-items:
        center;

    gap: 15px;

}


.nav-link {

    color:
        #475467;

    font-size:
        14px;

    font-weight:
        700;

}


/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.container {

    width:
        min(720px, calc(100% - 24px));

    margin:
        22px auto 50px;

}


/*
|--------------------------------------------------------------------------
| GENERAL CARD
|--------------------------------------------------------------------------
*/

.wallet-card,
.game-card,
.rewards-card {

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

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

    border-radius:
        26px;

    box-shadow:
        var(--shadow);

}


/*
|--------------------------------------------------------------------------
| WALLET
|--------------------------------------------------------------------------
*/

.wallet-card {

    padding:
        20px 22px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        16px;

}


.wallet-label {

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .12em;

    color:
        var(--muted);

}


.wallet-balance {

    margin-top:
        3px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        40px;

    line-height:
        1;

    font-weight:
        950;

}


.coin-small {
    font-size:
        28px;
}


.wallet-icon {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    background:
        #f3e8ff;

    border-radius:
        18px;

    font-size:
        28px;

}


/*
|--------------------------------------------------------------------------
| GAME
|--------------------------------------------------------------------------
*/

.game-card {

    padding:
        24px 18px 22px;

    overflow:
        hidden;

}


.game-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 4px;

}


.eyebrow {

    display:
        block;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .13em;

}


.game-header h2 {

    margin:
        3px 0 0;

    font-size:
        24px;

    line-height:
        1.1;

}


.spin-cost {

    background:
        #f3e8ff;

    color:
        #6d28d9;

    border-radius:
        999px;

    padding:
        8px 12px;

    font-size:
        13px;

    font-weight:
        900;

    white-space:
        nowrap;

}


/*
|--------------------------------------------------------------------------
| WHEEL
|--------------------------------------------------------------------------
*/

.wheel-container {

    width:
        min(84vw, 390px);

    aspect-ratio:
        1;

    margin:
        32px auto 25px;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

}


.wheel {

    width:
        100%;

    height:
        100%;

    border-radius:
        50%;

    position:
        relative;

    border:
        9px solid #fff;

    box-shadow:
        0 16px 35px rgba(15,23,42,.22),
        0 0 0 2px rgba(109,40,217,.12);

    transition:
        transform 4.2s cubic-bezier(.12,.72,.12,1);

    overflow:
        hidden;

}


/*
|--------------------------------------------------------------------------
| WHEEL LABEL
|--------------------------------------------------------------------------
*/

.wheel-label {

    position:
        absolute;

    width:
        78px;

    text-align:
        center;

    color:
        #fff;

    font-weight:
        950;

    pointer-events:
        none;

    text-shadow:
        0 2px 4px rgba(0,0,0,.30);

}


.wheel-label-value {

    display:
        block;

    font-size:
        20px;

    line-height:
        1;

}


.wheel-label-coin {

    display:
        block;

    margin-top:
        3px;

    font-size:
        8px;

    letter-spacing:
        .12em;

}


/*
|--------------------------------------------------------------------------
| POINTER
|--------------------------------------------------------------------------
*/

.wheel-pointer {

    position:
        absolute;

    z-index:
        20;

    top:
        -7px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        0;

    height:
        0;

    border-left:
        15px solid transparent;

    border-right:
        15px solid transparent;

    border-top:
        28px solid #111827;

    filter:
        drop-shadow(0 4px 3px rgba(0,0,0,.22));

}


.wheel-pointer span {

    position:
        absolute;

    left:
        -8px;

    top:
        -27px;

    width:
        16px;

    height:
        16px;

    border-radius:
        50%;

    background:
        #fff;

    border:
        4px solid #111827;

}


/*
|--------------------------------------------------------------------------
| CENTER
|--------------------------------------------------------------------------
*/

.wheel-center {

    position:
        absolute;

    z-index:
        10;

    width:
        92px;

    height:
        92px;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f0ff
        );

    border:
        7px solid #fff;

    box-shadow:
        0 6px 18px rgba(0,0,0,.22);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

}


.center-icon {

    font-size:
        27px;

    line-height:
        1;

}


.wheel-center span {

    margin-top:
        3px;

    font-size:
        11px;

    font-weight:
        950;

    color:
        #4c1d95;

}


/*
|--------------------------------------------------------------------------
| SPIN BUTTON
|--------------------------------------------------------------------------
*/

.spin-button {

    width:
        100%;

    min-height:
        56px;

    border:
        0;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #8b5cf6
        );

    color:
        #fff;

    font-size:
        17px;

    font-weight:
        950;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        9px;

    cursor:
        pointer;

    box-shadow:
        0 9px 25px rgba(109,40,217,.28);

    transition:
        transform .15s,
        opacity .15s,
        box-shadow .15s;

}


.spin-button:hover {

    box-shadow:
        0 12px 30px rgba(109,40,217,.38);

}


.spin-button:active {

    transform:
        translateY(2px);

}


.spin-button:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

}


.spin-button.loading {

    animation:
        pulse 1s infinite;

}


.spin-button-icon {

    font-size:
        21px;

}


/*
|--------------------------------------------------------------------------
| RESULT
|--------------------------------------------------------------------------
*/

.result {

    min-height:
        26px;

    text-align:
        center;

    margin:
        14px 0 5px;

    font-size:
        16px;

    font-weight:
        800;

}


.result strong {

    color:
        #16a34a;

}


.game-note {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        12px;

}


/*
|--------------------------------------------------------------------------
| REWARDS
|--------------------------------------------------------------------------
*/

.rewards-card {

    margin-top:
        16px;

    padding:
        21px;

}


.section-title h3 {

    margin:
        3px 0 16px;

    font-size:
        21px;

}


.reward-list {

    display:
        grid;

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

    gap:
        9px;

}


.reward-item {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        11px;

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

    border-radius:
        13px;

    background:
        #fafafa;

    font-weight:
        750;

    font-size:
        13px;

}


.reward-dot {

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        var(--primary);

}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero-card {

    text-align:
        center;

    background:
        #fff;

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

    border-radius:
        28px;

    padding:
        55px 25px;

    box-shadow:
        var(--shadow);

}


.hero-icon {

    font-size:
        60px;

    margin-bottom:
        18px;

}


.hero-card h1 {

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

    line-height:
        .92;

    margin:
        12px 0 20px;

}


.hero-card p {

    color:
        var(--muted);

    max-width:
        450px;

    margin:
        0 auto 25px;

}


.hero-btn {

    width:
        min(100%, 320px);

}


/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.btn {

    border:
        0;

    border-radius:
        14px;

    padding:
        13px 18px;

    min-height:
        48px;

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    font-weight:
        850;

    cursor:
        pointer;

}


.primary {

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #8b5cf6
        );

    color:
        #fff;

}


/*
|--------------------------------------------------------------------------
| WIN MODAL
|--------------------------------------------------------------------------
*/

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

}


.modal.show {

    display:
        flex;

}


.modal-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(15,23,42,.68);

    backdrop-filter:
        blur(7px);

}


.modal-card {

    width:
        min(390px, 100%);

    position:
        relative;

    z-index:
        2;

    background:
        #fff;

    border-radius:
        28px;

    padding:
        35px 24px 27px;

    text-align:
        center;

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

    animation:
        modalIn .25s ease-out;

}


.modal-close {

    position:
        absolute;

    top:
        10px;

    right:
        14px;

    width:
        35px;

    height:
        35px;

    border:
        0;

    background:
        #f2f4f7;

    border-radius:
        50%;

    font-size:
        25px;

    cursor:
        pointer;

    color:
        #475467;

}


.modal-confetti {

    font-size:
        60px;

    margin-bottom:
        10px;

}


.modal-title {

    font-size:
        25px;

    font-weight:
        950;

}


.modal-subtitle {

    margin-top:
        6px;

    color:
        var(--muted);

}


.modal-reward {

    margin:
        10px 0;

    font-size:
        42px;

    line-height:
        1;

    font-weight:
        950;

    color:
        #16a34a;

}


.modal-balance {

    color:
        var(--muted);

    margin-bottom:
        20px;

}


.modal-card .btn {

    width:
        100%;

}


/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/

@keyframes pulse {

    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .65;
    }

}


@keyframes modalIn {

    from {
        transform:
            translateY(20px)
            scale(.95);

        opacity:
            0;
    }

    to {
        transform:
            translateY(0)
            scale(1);

        opacity:
            1;
    }

}


/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 640px) {

    .container {

        margin-top:
            35px;

    }


    .game-card {

        padding:
            28px;

    }


    .wallet-card {

        padding:
            22px 26px;

    }


    .wheel-container {

        width:
            390px;

    }


    .reward-list {

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

    }

}


/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    .game-header h2 {

        font-size:
            21px;

    }


    .spin-cost {

        padding:
            7px 9px;

        font-size:
            12px;

    }


    .wheel-container {

        width:
            82vw;

    }


    .wheel-label-value {

        font-size:
            17px;

    }


    .wheel-label {

        width:
            65px;

    }


    .wheel-center {

        width:
            82px;

        height:
            82px;

    }

}