* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #05050a;
    --panel: #0d0d17;
    --panel2: #11111d;

    --purple: #8b49ff;
    --purple-light: #b47cff;

    --gold: #e6b85c;
    --gold-light: #ffdc89;

    --text: #f7f5ff;
    --muted: #9290a4;

    --green: #45e49a;

    --border: rgba(255,255,255,.08);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--bg);

    color: var(--text);

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

    overflow-x: hidden;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

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


/* BACKGROUND */

#starfield {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -3;
}

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 20% 10%,
            rgba(107,56,255,.14),
            transparent 35%
        ),

        radial-gradient(
            circle at 75% 20%,
            rgba(83,39,190,.1),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            rgba(5,5,10,.25),
            #05050a
        );
}

.cursor-glow {
    position: fixed;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(126,76,255,.07),
            transparent 65%
        );

    transition:
        left .06s linear,
        top .06s linear;
}

.page {
    width: min(
        1500px,
        calc(100% - 50px)
    );

    margin: 0 auto;
}


/* NAV */

.navbar {
    height: 88px;

    display: flex;

    align-items: center;

    gap: 40px;

    position: sticky;

    top: 0;

    z-index: 50;

    background:
        rgba(5,5,10,.84);

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

    backdrop-filter:
        blur(20px);
}

.brand {
    min-width: 260px;

    display: flex;

    align-items: center;

    gap: 14px;
}

.brand-icon {
    width: 54px;
    height: 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #1c1730,
            #090911
        );

    border:
        1px solid rgba(173,132,255,.35);

    box-shadow:
        0 0 30px rgba(125,74,255,.2);
}

.brand-icon span {
    font-size: 31px;

    color: white;

    filter:
        drop-shadow(
            0 0 12px
            rgba(170,131,255,.8)
        );
}

.brand-name {
    font-size: 18px;

    font-weight: 900;

    letter-spacing: 2px;
}

.brand-casino {
    margin-top: 1px;

    color:
        var(--gold-light);

    font-size: 12px;

    letter-spacing: 5px;
}

.brand-sub {
    margin-top: 4px;

    color:
        var(--muted);

    font-size: 8px;

    letter-spacing: 1px;
}

.nav-menu {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;
}

.nav-link {
    position: relative;

    padding: 13px 15px;

    color:
        var(--muted);

    font-size: 12px;

    font-weight: 700;

    transition: .2s;
}

.nav-link:hover,
.nav-link.active {
    color: white;
}

.nav-link.active::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            #d897ff
        );

    box-shadow:
        0 0 12px
        rgba(139,73,255,.8);
}

.nav-account {
    display: flex;

    align-items: center;

    gap: 12px;
}

.balance {
    min-width: 150px;

    min-height: 50px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 8px 10px;

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

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

    border-radius: 13px;
}

.balance span {
    display: block;

    color:
        var(--muted);

    font-size: 8px;

    text-transform: uppercase;
}

.balance strong {
    display: block;

    margin-top: 3px;

    font-size: 14px;
}

.token-small {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #281805;

    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            #ffe496,
            #b98126
        );

    border:
        2px solid
        rgba(255,255,255,.25);
}

.balance-add {
    margin-left: auto;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    color: white;

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

.discord-btn {
    padding:
        14px 19px;

    border-radius:
        11px;

    color: white;

    font-size:
        12px;

    font-weight:
        900;

    background:
        linear-gradient(
            135deg,
            #6c39d8,
            #914dff
        );

    box-shadow:
        0 12px 30px
        rgba(114,62,227,.18);

    transition:
        transform .2s,
        box-shadow .2s;
}

.discord-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 40px
        rgba(114,62,227,.3);
}


/* HERO */

.hero {
    min-height: 560px;

    position: relative;

    display: flex;

    align-items: center;

    margin-top: 20px;

    padding: 58px 45px;

    overflow: hidden;

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

    border-radius: 26px;

    background:

        linear-gradient(
            90deg,
            rgba(6,6,12,.98),
            rgba(8,6,17,.90) 45%,
            rgba(7,6,16,.55)
        ),

        radial-gradient(
            circle at 72% 50%,
            rgba(104,53,255,.26),
            transparent 37%
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.35);
}

.hero-light {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(90px);
}

.hero-light-one {
    width: 500px;
    height: 500px;

    top: -200px;
    left: 300px;

    background:
        rgba(87,41,195,.18);
}

.hero-light-two {
    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -200px;

    background:
        rgba(94,42,236,.18);
}

.hero-content {
    width: 44%;

    position: relative;

    z-index: 5;
}

.hero-tag {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--purple-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}

.hero-tag span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--purple-light);

    box-shadow:
        0 0 12px
        var(--purple);
}

.hero h1 {
    margin-top: 23px;

    font-size:
        clamp(
            50px,
            5vw,
            78px
        );

    line-height:
        .95;

    letter-spacing:
        -3px;
}

.hero h1 span {
    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #a36cff,
            #714cff,
            #c786ff
        );

    -webkit-background-clip:
        text;

    color:
        transparent;
}

.hero-description {
    max-width: 630px;

    margin-top: 23px;

    color:
        #aaa7ba;

    font-size:
        14px;

    line-height:
        1.75;
}

.hero-actions {
    display: flex;

    gap: 13px;

    margin-top: 30px;
}

.primary-btn,
.secondary-btn {
    min-height: 48px;

    padding:
        0 20px;

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        900;

    transition:
        .25s;
}

.primary-btn {
    color: white;

    background:
        linear-gradient(
            135deg,
            #713ae1,
            #9c50ff
        );

    box-shadow:
        0 12px 40px
        rgba(122,63,232,.26);
}

.secondary-btn {
    color:
        var(--gold-light);

    border:
        1px solid
        rgba(229,182,90,.3);

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

.primary-btn:hover,
.secondary-btn:hover {
    transform:
        translateY(-3px);
}


/* HERO SCENE */

.hero-scene {
    position: absolute;

    width: 590px;
    height: 500px;

    left: 50%;

    top: 50%;

    transform:
        translate(-5%, -50%);

    z-index: 2;

    transition:
        transform .1s linear;
}

.moon {
    position: absolute;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    top: 15px;
    left: 120px;

    background:

        radial-gradient(
            circle at 30% 28%,
            #f4efff,
            #9a86d7 48%,
            #4c386f 72%,
            #271d3d
        );

    box-shadow:

        0 0 70px
        rgba(147,108,255,.45),

        0 0 160px
        rgba(95,53,213,.3);
}

.moon::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 45px;

    left: 65px;
    top: 75px;

    border-radius: 50%;

    background:
        rgba(39,27,61,.18);

    box-shadow:

        80px 60px 0
        rgba(39,27,61,.17),

        20px 125px 0
        rgba(39,27,61,.13);
}

.casino {
    position: absolute;

    width: 500px;
    height: 230px;

    bottom: 25px;
    left: 30px;

    border-radius:
        18px 18px 6px 6px;

    background:
        linear-gradient(
            180deg,
            #321b52,
            #130d22 70%,
            #090911
        );

    border:
        1px solid
        rgba(176,121,255,.18);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.6);
}

.casino-roof {
    position: absolute;

    width: 310px;
    height: 120px;

    top: -94px;
    left: 95px;

    clip-path:
        polygon(
            50% 0,
            100% 100%,
            0 100%
        );

    background:
        linear-gradient(
            180deg,
            #28163d,
            #4a246d
        );

    filter:
        drop-shadow(
            0 0 25px
            rgba(135,62,230,.45)
        );
}

.casino-title {
    position: absolute;

    width: 100%;

    top: 24px;

    text-align: center;

    font-weight: 900;

    letter-spacing: 5px;

    color:
        #d8b6ff;

    text-shadow:
        0 0 16px
        rgba(158,88,255,.9);
}

.casino-title small {
    display: block;

    margin-top: 4px;

    font-size: 10px;

    letter-spacing: 7px;
}

.casino-columns {
    position: absolute;

    left: 38px;
    right: 38px;
    bottom: 18px;

    display: grid;

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

    gap: 15px;
}

.casino-columns span {
    height: 120px;

    border-radius:
        8px 8px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #542c78,
            #17101f
        );

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

    box-shadow:
        inset 0 0 18px
        rgba(156,74,255,.12);
}

.lunar-token {
    position: absolute;

    right: -5px;
    bottom: -5px;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            145deg,
            #ffe6a0,
            #a66a16
        );

    box-shadow:

        0 25px 55px
        rgba(0,0,0,.55),

        0 0 50px
        rgba(225,180,87,.32);

    animation:
        tokenFloat
        4s
        ease-in-out
        infinite;
}

.token-inner {
    width: 105px;
    height: 105px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #36210c;

    font-size: 52px;

    font-weight: 1000;

    border:
        3px solid
        rgba(110,64,15,.38);

    box-shadow:
        inset 0 0 12px
        rgba(255,255,255,.4);
}

@keyframes tokenFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(4deg);
    }

}

.floating-particle {
    position: absolute;

    width: 8px;
    height: 8px;

    background:
        #9450ff;

    transform:
        rotate(45deg);

    box-shadow:
        0 0 15px
        #9450ff;

    animation:
        particleFloat
        5s
        ease-in-out
        infinite;
}

.p1 {
    left: 40px;
    top: 100px;
}

.p2 {
    right: 40px;
    top: 65px;

    animation-delay:
        1s;
}

.p3 {
    left: 100px;
    bottom: 130px;

    animation-delay:
        2s;
}

.p4 {
    right: 100px;
    bottom: 180px;

    animation-delay:
        .5s;
}

@keyframes particleFloat {

    50% {
        transform:
            translateY(-25px)
            rotate(100deg);

        opacity:
            .4;
    }

}


/* ECONOMY PANEL */

.economy-card {
    position: absolute;

    right: 22px;
    top: 35px;

    width: 235px;

    z-index: 4;

    padding: 22px;

    border-radius: 19px;

    background:
        rgba(9,9,18,.88);

    border:
        1px solid
        rgba(226,187,110,.22);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.4);
}

.economy-title {
    display: block;

    text-align: center;

    font-size: 10px;

    letter-spacing: 1px;

    color:
        var(--muted);
}

.economy-token {
    width: 76px;
    height: 76px;

    margin:
        18px auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #311e08;

    font-size: 34px;

    font-weight: 1000;

    background:
        linear-gradient(
            145deg,
            #ffdf8b,
            #b1781d
        );

    border:
        5px solid
        rgba(255,255,255,.22);

    box-shadow:
        0 0 30px
        rgba(230,184,92,.18);
}

.economy-card h3 {
    text-align: center;

    color:
        var(--gold-light);

    font-size: 10px;

    line-height: 1.4;
}

.economy-card ul {
    list-style: none;

    margin-top: 19px;
}

.economy-card li {
    display: flex;

    gap: 9px;

    align-items: center;

    padding:
        8px 0;

    color:
        #bab7c8;

    font-size:
        10px;
}

.economy-card li span {
    color:
        var(--purple-light);
}


/* STATS */

.stats {
    margin-top: 18px;

    min-height: 100px;

    display: grid;

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

    border-radius: 18px;

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

    overflow: hidden;

    background:
        rgba(13,13,23,.88);
}

.stat {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    position: relative;
}

.stat:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    width: 1px;
    height: 45%;

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

.stat-icon {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    color:
        var(--gold-light);

    font-size:
        18px;
}

.stat strong {
    display: block;

    font-size:
        18px;
}

.stat small {
    display: block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        8px;
}


/* GAMES */

.games-section {
    padding:
        60px 0 20px;
}

.section-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        24px;
}

.section-tag {
    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1px;
}

.section-header h2 {
    margin-top:
        5px;

    font-size:
        29px;
}

.section-header p {
    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        11px;
}

.section-header > a {
    color:
        #b688ff;

    font-size:
        10px;

    font-weight:
        900;
}

.game-grid {
    display: grid;

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

    gap:
        17px;
}

.game-card {
    position: relative;

    overflow: hidden;

    min-height: 340px;

    border-radius:
        18px;

    background:
        var(--panel);

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

    transform-style:
        preserve-3d;

    transition:

        transform .18s ease,

        border-color .25s,

        box-shadow .25s;
}

.game-card:hover {
    border-color:
        rgba(145,76,255,.38);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.42);
}

.game-image {
    position: relative;

    height: 210px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(123,61,255,.22),
            transparent 50%
        ),

        linear-gradient(
            145deg,
            #191326,
            #07070c
        );
}

.game-image::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            var(--panel)
        );
}


/* BLACKJACK ART */

.card-decoration {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}

.playing-card {
    width: 95px;
    height: 135px;

    border-radius:
        10px;

    padding:
        13px;

    color:
        #24190f;

    background:
        linear-gradient(
            145deg,
            #f4e6cc,
            #ba9d6d
        );

    font-size:
        30px;

    font-weight:
        900;

    box-shadow:
        0 20px 35px
        rgba(0,0,0,.4);
}

.playing-card span {
    display: block;
}

.card-one {
    transform:
        rotate(-15deg)
        translateX(20px);
}

.card-two {
    transform:
        rotate(13deg)
        translateX(-15px);
}


/* ROULETTE */

.roulette-wheel {
    position: absolute;

    width: 155px;
    height: 155px;

    border-radius: 50%;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    background:
        repeating-conic-gradient(
            #9d2424 0 15deg,
            #101010 15deg 30deg
        );

    border:
        13px solid
        #805921;

    box-shadow:
        0 25px 45px
        rgba(0,0,0,.5);

    animation:
        rouletteIdle
        16s linear infinite;
}

.roulette-center {
    position: absolute;

    width: 55px;
    height: 55px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #f1ce79,
            #754c17
        );
}

@keyframes rouletteIdle {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


/* MINES */

.mine-grid {
    position: absolute;

    width: 170px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: grid;

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

    gap:
        8px;
}

.mine-grid span {
    height: 48px;

    display: grid;

    place-items: center;

    border-radius:
        7px;

    background:
        linear-gradient(
            145deg,
            #172044,
            #0c1126
        );

    border:
        1px solid
        rgba(90,126,255,.18);

    color:
        #85a5ff;

    font-size:
        25px;

    text-shadow:
        0 0 12px
        rgba(104,143,255,.7);
}


/* COINS */

.coinflip-image {
    display: flex;

    align-items: center;

    justify-content: center;
}

.coin {
    position: absolute;

    width: 105px;
    height: 105px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 42px;

    font-weight: 1000;

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.45);
}

.coin-gold {
    transform:
        translateX(-40px)
        rotate(-12deg);

    color:
        #2e1d0a;

    background:
        linear-gradient(
            145deg,
            #ffe28a,
            #a76a12
        );
}

.coin-purple {
    transform:
        translateX(40px)
        rotate(12deg);

    color:
        white;

    background:
        linear-gradient(
            145deg,
            #b788ff,
            #5c27b8
        );
}


/* CRASH */

.crash-image strong {
    position: absolute;

    left: 25px;
    top: 28px;

    color:
        #a84eff;

    font-size:
        32px;
}

.rocket {
    position: absolute;

    right: 70px;
    top: 55px;

    transform:
        rotate(45deg);

    color:
        white;

    font-size:
        70px;

    text-shadow:
        0 0 20px
        #7e3cff;
}

.crash-line {
    position: absolute;

    width: 230px;
    height: 120px;

    right: 20px;
    bottom: 5px;

    border-top:
        3px solid
        #8a42ff;

    transform:
        rotate(-25deg);

    filter:
        drop-shadow(
            0 0 8px
            #8a42ff
        );
}


/* DICE */

.dice-image {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;
}

.dice {
    position: relative;

    width: 90px;
    height: 90px;

    border-radius:
        18px;

    transform:
        rotate(-12deg);

    background:
        linear-gradient(
            145deg,
            #b26aff,
            #481c85
        );

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.45);
}

.dice-second {
    transform:
        rotate(16deg)
        translateY(13px);
}

.dice i {
    position: absolute;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        #f4eaff;

    box-shadow:
        0 0 10px
        rgba(255,255,255,.45);
}

.dice i:nth-child(1) {
    left: 18px;
    top: 18px;
}

.dice i:nth-child(2) {
    right: 18px;
    top: 18px;
}

.dice i:nth-child(3) {
    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}

.dice i:nth-child(4) {
    left: 18px;
    bottom: 18px;
}

.dice i:nth-child(5) {
    right: 18px;
    bottom: 18px;
}


/* GAME CONTENT */

.game-content {
    padding:
        18px;
}

.game-status {
    font-size:
        8px;

    font-weight:
        900;
}

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

.game-status.soon {
    color:
        var(--gold);
}

.game-content h3 {
    margin-top:
        8px;

    font-size:
        20px;

    text-transform:
        uppercase;
}

.game-content p {
    min-height:
        34px;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.5;
}

.game-play {
    margin-top:
        13px;

    width:
        100%;

    min-height:
        37px;

    border-radius:
        8px;

    color:
        white;

    font-size:
        9px;

    font-weight:
        900;

    background:
        rgba(132,70,255,.11);

    border:
        1px solid
        rgba(139,73,255,.15);

    transition:
        .2s;
}

.game-play:hover {
    background:
        linear-gradient(
            135deg,
            #713be0,
            #9450ff
        );
}


/* LOWER */

.lower-grid {
    display: grid;

    grid-template-columns:
        1fr 1.35fr 1.15fr;

    gap:
        17px;

    padding:
        35px 0 65px;
}

.lower-panel {
    position: relative;

    min-height:
        270px;

    overflow: hidden;

    padding:
        24px;

    border-radius:
        18px;

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

    background:
        rgba(13,13,23,.92);
}

.panel-heading {
    display: flex;

    align-items: center;

    gap:
        9px;
}

.panel-heading span {
    color:
        var(--gold);
}

.panel-heading h3 {
    color:
        var(--gold-light);

    font-size:
        17px;
}

.leader-row {
    display: grid;

    grid-template-columns:
        35px 1fr auto;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    font-size:
        10px;
}

.leader-row strong,
.leader-row b {
    color:
        var(--gold-light);
}

.panel-btn,
.vip-button,
.discord-large {
    margin-top:
        17px;

    padding:
        11px 15px;

    border-radius:
        8px;

    color:
        white;

    font-size:
        9px;

    font-weight:
        900;

    background:
        linear-gradient(
            135deg,
            #5424ae,
            #8341e6
        );
}

.vip-panel {
    background:

        radial-gradient(
            circle at 75% 60%,
            rgba(224,172,73,.17),
            transparent 40%
        ),

        linear-gradient(
            145deg,
            #16100a,
            #0b0a0e
        );
}

.panel-label {
    color:
        var(--gold);

    font-size:
        8px;

    letter-spacing:
        1px;

    font-weight:
        900;
}

.panel-label.purple {
    color:
        var(--purple-light);
}

.vip-panel h2,
.community-panel h2 {
    margin-top:
        8px;

    font-size:
        28px;
}

.vip-panel p,
.community-panel p {
    max-width:
        270px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.6;
}

.vip-card {
    position: absolute;

    width:
        210px;

    height:
        130px;

    right:
        20px;

    bottom:
        35px;

    display:
        grid;

    place-items:
        center;

    transform:
        rotate(-8deg);

    border-radius:
        15px;

    color:
        var(--gold-light);

    font-size:
        35px;

    font-weight:
        1000;

    letter-spacing:
        4px;

    background:
        linear-gradient(
            145deg,
            #1a1209,
            #463015
        );

    border:
        1px solid
        rgba(230,184,92,.35);

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.5);
}

.vip-card span {
    position: absolute;

    top: 14px;

    font-size:
        18px;
}

.community-panel {
    background:

        radial-gradient(
            circle at 80% 60%,
            rgba(132,66,255,.28),
            transparent 42%
        ),

        #0e0d18;
}

.hooded-person {
    position: absolute;

    right:
        45px;

    bottom:
        22px;

    width:
        130px;

    height:
        165px;

    display:
        grid;

    place-items:
        center;

    color:
        #a370ff;

    font-size:
        70px;

    border-radius:
        60px 60px 25px 25px;

    background:

        radial-gradient(
            circle at 50% 30%,
            #24173d,
            #08070d 60%
        );

    box-shadow:
        0 0 60px
        rgba(118,53,255,.25);
}


/* FOOTER */

footer {
    min-height:
        85px;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        9px;
}

.footer-brand {
    display: flex;

    gap:
        9px;

    align-items:
        center;
}

.footer-brand span {
    color:
        white;

    font-size:
        23px;
}

.footer-links {
    display: flex;

    gap:
        27px;
}

.footer-links a:hover {
    color:
        white;
}


/* MODAL */

.modal-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        500;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(15px);
}

.modal-overlay.open {
    display:
        flex;
}

.modal {
    position:
        relative;

    width:
        min(
            450px,
            calc(100% - 30px)
        );

    padding:
        32px;

    border-radius:
        20px;

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

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(120,55,255,.13),
            transparent 40%
        ),

        #0d0d17;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.75);
}

.modal-close {
    position:
        absolute;

    right:
        15px;

    top:
        13px;

    width:
        32px;

    height:
        32px;

    border-radius:
        8px;

    color:
        white;

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

.modal-tag {
    color:
        var(--purple-light);

    font-size:
        8px;

    letter-spacing:
        1px;

    font-weight:
        900;
}

.modal h2 {
    margin-top:
        10px;

    font-size:
        25px;
}

.modal p {
    margin-top:
        11px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.65;
}

.modal-confirm {
    margin-top:
        22px;

    width:
        100%;
}


/* REVEAL */

.reveal {
    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity .8s ease,

        transform .8s ease;
}

.reveal.visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .nav-menu {
        display:
            none;
    }

    .hero-content {
        width:
            50%;
    }

    .economy-card {
        display:
            none;
    }

    .hero-scene {
        left:
            55%;
    }

    .game-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .community-panel {
        grid-column:
            1 / -1;
    }

}

@media (max-width: 850px) {

    .page {
        width:
            min(
                100% - 26px,
                1500px
            );
    }

    .balance {
        display:
            none;
    }

    .hero {
        min-height:
            870px;

        align-items:
            flex-start;
    }

    .hero-content {
        width:
            100%;
    }

    .hero-scene {
        left:
            50%;

        top:
            70%;

        transform:
            translate(-50%, -50%)
            scale(.85);
    }

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

    .stat {
        min-height:
            85px;
    }

    .game-grid,
    .lower-grid {
        grid-template-columns:
            1fr;
    }

    .community-panel {
        grid-column:
            auto;
    }

}

@media (max-width: 550px) {

    .brand-sub,
    .brand-casino {
        display:
            none;
    }

    .brand {
        min-width:
            auto;
    }

    .brand-icon {
        width:
            42px;

        height:
            42px;
    }

    .discord-btn {
        padding:
            11px;
    }

    .hero {
        padding:
            40px 22px;
    }

    .hero h1 {
        font-size:
            47px;
    }

    .hero-actions {
        flex-direction:
            column;
    }

    .hero-actions button {
        width:
            100%;
    }

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

    footer {
        padding:
            25px 0;

        flex-direction:
            column;

        gap:
            20px;
    }

}

/* =========================================================
   MIDNIGHT ANIMATED GRADIENT BORDER SYSTEM
   ========================================================= */

@property --midnight-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes midnightBorderSpin {
    from {
        --midnight-angle: 0deg;
    }

    to {
        --midnight-angle: 360deg;
    }
}


/* KÖZÖS ANIMÁLT KERET */

.hero,
.economy-card,
.stats,
.game-card,
.lower-panel,
.balance,
.modal {
    position: relative;

    border: 1px solid transparent;

    background:
        linear-gradient(
            #0b0b14,
            #0b0b14
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #5f2cff,
            #a35cff,
            #517cff,
            #e1b65e,
            #ffdc8a,
            #8b49ff,
            #5f2cff

        ) border-box;

    animation:
        midnightBorderSpin
        7s linear infinite;
}


/* HERO KÜLÖN MEGTARTJA A SAJÁT HÁTTERÉT */

.hero {
    background:

        linear-gradient(
            90deg,
            rgba(6,6,12,.98),
            rgba(8,6,17,.90) 45%,
            rgba(7,6,16,.55)
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #5525d6,
            #984bff,
            #4c73ff,
            #d8ab51,
            #ffe18f,
            #944aff,
            #5525d6

        ) border-box;
}


/* ECONOMY */

.economy-card {
    background:

        linear-gradient(
            rgba(9,9,18,.96),
            rgba(9,9,18,.96)
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #7b38ef,
            #d4a94e,
            #ffe197,
            #8144ef,
            #4d72ff,
            #7b38ef

        ) border-box;
}


/* STAT BAR */

.stats {
    background:

        linear-gradient(
            rgba(13,13,23,.96),
            rgba(13,13,23,.96)
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #4b2ac2,
            #934fff,
            #4d74ff,
            #d3a652,
            #934fff,
            #4b2ac2

        ) border-box;
}


/* GAME CARDS */

.game-card {
    background:

        linear-gradient(
            var(--panel),
            var(--panel)
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            rgba(102,55,255,.85),
            rgba(165,83,255,.9),
            rgba(73,107,255,.82),
            rgba(224,175,77,.85),
            rgba(147,69,255,.9),
            rgba(102,55,255,.85)

        ) border-box;

    animation-duration: 9s;
}


/* hoverkor gyorsabb + világosabb */

.game-card:hover {
    animation-duration: 3.8s;

    box-shadow:
        0 0 25px rgba(134,70,255,.15),
        0 20px 55px rgba(0,0,0,.42);
}


/* ALSÓ PANELEK */

.lower-panel {
    background:

        linear-gradient(
            rgba(13,13,23,.96),
            rgba(13,13,23,.96)
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #6230dc,
            #9a52ff,
            #5576ff,
            #d6a74e,
            #9e54ff,
            #6230dc

        ) border-box;

    animation-duration: 10s;
}


/* VIP PANEL MEGTARTJA ARANYAS HÁTTERÉT */

.vip-panel {
    background:

        radial-gradient(
            circle at 75% 60%,
            rgba(224,172,73,.17),
            transparent 40%
        ) padding-box,

        linear-gradient(
            145deg,
            #16100a,
            #0b0a0e
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #7f42e9,
            #d4a34b,
            #ffe39a,
            #d69f38,
            #9a4dff,
            #7f42e9

        ) border-box;
}


/* COMMUNITY PANEL */

.community-panel {
    background:

        radial-gradient(
            circle at 80% 60%,
            rgba(132,66,255,.28),
            transparent 42%
        ) padding-box,

        linear-gradient(
            #0e0d18,
            #0e0d18
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #6632df,
            #a754ff,
            #4d74ff,
            #8d49ff,
            #d2a54f,
            #6632df

        ) border-box;
}


/* BALANCE BOX */

.balance {
    background:

        linear-gradient(
            rgba(11,11,18,.96),
            rgba(11,11,18,.96)
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #6e39e8,
            #a659ff,
            #d8ac55,
            #ffdc89,
            #7142ee

        ) border-box;

    animation-duration: 8s;
}


/* MODAL */

.modal {
    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(120,55,255,.13),
            transparent 40%
        ) padding-box,

        linear-gradient(
            #0d0d17,
            #0d0d17
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #7138ec,
            #a454ff,
            #4c74ff,
            #d9ac53,
            #a454ff,
            #7138ec

        ) border-box;

    animation-duration: 6s;
}


/* FINOM FÉNY A KERET KÖRÜL */

.hero::after,
.economy-card::after,
.game-card::after,
.lower-panel::after,
.balance::after {
    content: "";

    position: absolute;

    inset: -2px;

    z-index: -1;

    border-radius: inherit;

    opacity: .12;

    filter: blur(12px);

    background:

        conic-gradient(
            from var(--midnight-angle),

            #6d35ff,
            #a552ff,
            #5279ff,
            #d8aa52,
            #9a4cff,
            #6d35ff

        );

    animation:
        midnightBorderSpin
        7s linear infinite;
}


/* ACCESSIBILITY:
   ha valaki kikapcsolja az animációkat a rendszerben */

@media (prefers-reduced-motion: reduce) {

    .hero,
    .economy-card,
    .stats,
    .game-card,
    .lower-panel,
    .balance,
    .modal,

    .hero::after,
    .economy-card::after,
    .game-card::after,
    .lower-panel::after,
    .balance::after {

        animation: none;

    }

}

/* ===========================
   DISCORD PROFILE
   =========================== */

.user-area {
    display: flex;
    align-items: center;
}

.profile-button {
    min-height: 50px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        7px 12px 7px 7px;

    color: white;

    border: 1px solid transparent;

    border-radius: 13px;

    background:
        linear-gradient(
            #0d0d17,
            #0d0d17
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #6b37e7,
            #ad5cff,
            #5075ff,
            #d6a64f,
            #8d47f6,
            #6b37e7

        ) border-box;

    animation:
        midnightBorderSpin
        8s linear infinite;

    transition:
        transform .2s,
        box-shadow .2s;
}

.profile-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 35px
        rgba(128,67,255,.2);
}

.discord-avatar {
    width: 36px;
    height: 36px;

    object-fit: cover;

    border-radius: 50%;

    border:
        2px solid
        rgba(178,128,255,.55);
}

.discord-avatar.fallback {
    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #6c39d8,
            #914dff
        );

    font-weight: 900;
}

.profile-info {
    min-width: 90px;

    text-align: left;
}

.profile-info span {
    display: block;

    color:
        var(--muted);

    font-size:
        7px;

    text-transform:
        uppercase;

    letter-spacing:
        .6px;
}

.profile-info strong {
    display: block;

    max-width: 130px;

    margin-top: 3px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size:
        11px;
}

.profile-arrow {
    margin-left: 3px;

    color:
        var(--muted);

    font-size:
        10px;
}

/* ===========================
   PROFILE DROPDOWN
   =========================== */

.profile-wrapper {
    position: relative;
}

.profile-dropdown {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 245px;

    padding: 10px;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin:
        top right;

    border: 1px solid transparent;

    border-radius: 15px;

    background:
        linear-gradient(
            #0d0d17,
            #0d0d17
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),

            #6532dc,
            #a150ff,
            #5276ff,
            #d8aa53,
            #9149ff,
            #6532dc

        ) border-box;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.55);

    backdrop-filter:
        blur(20px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

    z-index: 200;
}

.profile-dropdown.open {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.dropdown-user {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px;
}

.dropdown-user .discord-avatar {
    width: 42px;
    height: 42px;
}

.dropdown-user strong {
    display: block;

    max-width: 150px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 12px;
}

.dropdown-user span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 9px;
}

.dropdown-balance {
    margin-top: 5px;

    padding: 12px;

    border-radius: 10px;

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

.dropdown-balance span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.dropdown-balance strong {
    display: block;

    margin-top: 5px;

    color: var(--gold-light);

    font-size: 17px;
}

.dropdown-divider {
    height: 1px;

    margin: 8px 4px;

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

.dropdown-item {
    width: 100%;

    padding: 11px 12px;

    text-align: left;

    border-radius: 9px;

    color: #d7d5e0;

    background: transparent;

    font-size: 10px;

    font-weight: 700;

    transition:
        background .18s,
        color .18s;
}

.dropdown-item:hover {
    color: white;

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

.logout-item {
    color: #ff7891;
}

.logout-item:hover {
    color: #ff9caf;

    background:
        rgba(255,70,100,.08);
}

/* =========================================================
   FULL PROFILE MODAL
   ========================================================= */

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

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

    padding: 25px;

    opacity: 0;
    visibility: hidden;

    background: rgba(2, 2, 7, .82);
    backdrop-filter: blur(16px);

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.profile-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.profile-modal {
    position: relative;

    width: min(650px, 100%);
    padding: 30px;

    border-radius: 24px;
    border: 1px solid transparent;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(124, 64, 255, .15),
            transparent 40%
        ) padding-box,

        linear-gradient(
            #0c0c16,
            #0c0c16
        ) padding-box,

        conic-gradient(
            from var(--midnight-angle),
            #6332df,
            #a552ff,
            #5079ff,
            #d7a94f,
            #ffdf8c,
            #984cff,
            #6332df
        ) border-box;

    animation:
        midnightBorderSpin
        8s linear infinite;

    box-shadow:
        0 40px 130px
        rgba(0, 0, 0, .7);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .25s ease;
}

.profile-modal-overlay.open .profile-modal {
    transform:
        translateY(0)
        scale(1);
}

.profile-modal-close {
    position: absolute;
    top: 17px;
    right: 17px;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    color: white;
    background: rgba(255,255,255,.05);

    font-size: 18px;

    transition: .2s;
}

.profile-modal-close:hover {
    background: rgba(255,255,255,.1);
    transform: rotate(4deg);
}

.profile-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-modal-avatar {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    flex-shrink: 0;
    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #6c3de0,
            #9e5bff
        );

    border:
        2px solid rgba(185,140,255,.65);

    box-shadow:
        0 0 25px rgba(142,78,255,.25);

    font-size: 25px;
    font-weight: 900;
}

.profile-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-modal-header span {
    color: var(--purple-light);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;
}

.profile-modal-header h2 {
    margin-top: 5px;
    font-size: 25px;
}

.profile-modal-header p {
    margin-top: 3px;

    color: var(--muted);
    font-size: 10px;
}

.profile-balance-card {
    margin-top: 25px;
    padding: 18px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(229,184,92,.09),
            rgba(123,62,236,.09)
        );

    border:
        1px solid rgba(229,184,92,.14);

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

.profile-balance-card span {
    color: var(--muted);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.profile-balance-card strong {
    display: block;

    margin-top: 6px;

    color: var(--gold-light);

    font-size: 24px;
}

.profile-balance-token {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #2a1906;

    font-size: 20px;
    font-weight: 1000;

    background:
        linear-gradient(
            145deg,
            #ffe49a,
            #b87a1d
        );

    border:
        4px solid rgba(255,255,255,.2);

    box-shadow:
        0 0 30px rgba(229,184,92,.18);
}

.profile-stats-grid {
    margin-top: 17px;

    display: grid;

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

    gap: 10px;
}

.profile-stat {
    padding: 15px;

    border-radius: 13px;

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

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

    transition:
        transform .2s,
        border-color .2s,
        background .2s;
}

.profile-stat:hover {
    transform: translateY(-3px);

    border-color:
        rgba(137,78,255,.24);

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

.profile-stat span {
    display: block;

    color: var(--muted);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.profile-stat strong {
    display: block;

    margin-top: 7px;

    font-size: 16px;
}

.profile-footer-info {
    margin-top: 17px;
    padding-top: 15px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color: var(--muted);

    font-size: 9px;
}

.profile-footer-info strong {
    margin-left: 5px;
    color: white;
}

@media (max-width: 600px) {

    .profile-modal {
        padding: 22px;
    }

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

    .profile-modal-header {
        align-items: flex-start;
    }

    .profile-modal-avatar {
        width: 60px;
        height: 60px;
    }

}

/* =========================================================
   HERO CASINO - ALWAYS VISIBLE + IDLE ANIMATION
   ========================================================= */

.hero-scene {
    opacity: 1 !important;

    animation:
        casinoSceneFloat
        6s ease-in-out infinite;

    will-change: transform;
}

@keyframes casinoSceneFloat {

    0%,
    100% {
        transform:
            translate(-5%, -50%)
            translateY(0px);
    }

    50% {
        transform:
            translate(-5%, -50%)
            translateY(-10px);
    }

}

.casino {
    animation:
        casinoBuildingGlow
        4s ease-in-out infinite;
}

@keyframes casinoBuildingGlow {

    0%,
    100% {
        filter:
            brightness(1);

        box-shadow:
            0 30px 70px rgba(0,0,0,.6),
            0 0 20px rgba(132,73,255,.08);
    }

    50% {
        filter:
            brightness(1.07);

        box-shadow:
            0 30px 70px rgba(0,0,0,.6),
            0 0 45px rgba(132,73,255,.22);
    }

}

.moon {
    animation:
        moonPulse
        5s ease-in-out infinite;
}

@keyframes moonPulse {

    0%,
    100% {
        box-shadow:
            0 0 70px rgba(147,108,255,.45),
            0 0 160px rgba(95,53,213,.3);
    }

    50% {
        box-shadow:
            0 0 95px rgba(147,108,255,.58),
            0 0 190px rgba(95,53,213,.4);
    }

}

/* =========================================================
   HERO MAGYAR SZÖVEG JAVÍTÁS
   ========================================================= */

.hero {
    min-height: 500px;
    padding-top: 45px;
    padding-bottom: 45px;
}

.hero h1 {
    line-height: 1.08;
    padding-top: 8px;
    padding-bottom: 6px;
}

.hero h1 span {
    line-height: 1.08;
}


/* A bal oldali tartalom kicsit szebb függőleges elosztása */

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* A ház kerüljön kicsit lejjebb / középre */

.hero-scene {
    top: 52%;
}


/* Alsó statisztika közelebb kerüljön a herohoz */

.stats {
    margin-top: 12px;
}

/* STATS SÁV KOMPAKTABB */

.stats {
    min-height: 78px;
    height: 78px;
}

.stat {
    min-height: 78px;
    padding: 0 18px;
}

.stat-icon {
    width: 30px;
    height: 30px;
}

.stat strong {
    font-size: 16px;
}

.stat small {
    margin-top: 2px;
    font-size: 7px;
}

/* =========================================================
   STATS SÁV - CÍMMEL
   ========================================================= */

.stats {
    position: relative;

    min-height: 105px;
    height: 105px;

    padding-top: 28px;

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

.stats-title {
    position: absolute;

    top: 10px;
    left: 50%;

    transform:
        translateX(-50%);

    width: 100%;

    text-align: center;

    pointer-events: none;
}

.stats-title::before,
.stats-title::after {
    content: "";

    display: inline-block;

    width: 110px;
    height: 1px;

    margin: 0 18px 3px;

    vertical-align: middle;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(161, 87, 255, .45)
        );
}

.stats-title::after {
    background:
        linear-gradient(
            90deg,
            rgba(161, 87, 255, .45),
            transparent
        );
}

.stats-title span {
    color:
        #b47cff;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.6px;
}

.stat {
    min-height: 72px;

    padding-top: 10px;
}