/* ===========================
   LUNACY BLUE STYLE
   Version 2.0
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


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


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Inter',sans-serif;

    background:#070b14;

    color:white;

    overflow-x:hidden;

}


body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px
    ),

    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px
    );

    background-size:50px 50px;

    z-index:-2;

}


body::after{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(
    circle at 20% 20%,
    rgba(0,153,255,.15),
    transparent 35%
    ),

    radial-gradient(
    circle at 80% 70%,
    rgba(0,217,255,.12),
    transparent 35%
    );

    z-index:-1;

}


a{

    text-decoration:none;

    color:white;

}


img{

    max-width:100%;

    display:block;

}


.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}



/* ==========================
   HEADER
========================== */

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: rgba(10,15,25,.90);
    backdrop-filter: blur(15px);
    transition: .3s;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.header:hover{
    background: rgba(7,11,20,.97);
}

.header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
}

/* ==========================
   LOGO
========================== */

.logo{
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px;
    flex-shrink: 0;
}

.logo img{
    width: 62px;
    height: 62px;
    object-fit: contain;
    transition: .35s;
    filter: drop-shadow(0 0 20px rgba(0,153,255,.6));
}

.logo:hover img{
    transform: scale(1.08) rotate(-5deg);
}

.logo-text h2{
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 3px;
}

.logo-text span{
    display: block;
    margin-top: 4px;
    color: #38b6ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 5px;
}

/* ==========================
   MENU
========================== */

.header nav{
    margin-left:40px;
    margin-right:20px;
}

.header nav ul{
    display: flex;
    align-items: center;
    gap: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: .3s;
    position: relative;
}

.header nav ul li a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #38b6ff;
    transition: .3s;
}

.header nav ul li a:hover{
    color: #38b6ff;
}

.header nav ul li a:hover::after{
    width: 100%;
}

/* ==========================
   BUTTONS
========================== */

.buttons{
    display: flex;
    align-items: center;
    gap: 15px;
}

.login,
.play{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 45px;
    padding: 0 22px;

    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.login{
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
}

.login:hover{
    background: rgba(255,255,255,.08);
}

.play{
    color: #fff;
    background: linear-gradient(90deg,#0099ff,#38b6ff);
    box-shadow: 0 0 18px rgba(0,153,255,.4);
}

.play:hover{
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0,153,255,.7);
}


/* ===========================
HERO
=========================== */


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}



.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}



.circle1{

    width:450px;

    height:450px;

    background:#0099ff;

    top:-120px;

    left:-120px;

    animation:move1 10s infinite alternate;

}



.circle2{

    width:350px;

    height:350px;

    background:#00d9ff;

    right:-100px;

    top:200px;

    animation:move2 12s infinite alternate;

}



.circle3{

    width:500px;

    height:500px;

    background:#004cff;

    bottom:-200px;

    left:40%;

    opacity:.35;

    animation:move3 15s infinite alternate;

}



.hero-content{

    position:relative;

    z-index:5;

    animation:fadeUp 1s ease;

}



.subtitle{

    color:#38b6ff;

    letter-spacing:5px;

    font-size:15px;

    margin-bottom:20px;

}



.hero-title{

    font-size:110px;

    font-weight:900;

    line-height:1;


    background:

    linear-gradient(
    90deg,
    #ffffff,
    #0099ff,
    #00d9ff,
    #ffffff
    );


    background-size:400%;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:

    gradientMove 6s linear infinite;

}



.hero-text{

    max-width:700px;

    margin-top:25px;

    color:#b8c4d8;

    font-size:20px;

    line-height:35px;

}



/* HERO BUTTONS */


.hero-buttons{

    display:flex;

    gap:25px;

    margin-top:45px;

}



.play-button{

    padding:20px 50px;

    border-radius:16px;

    background:

    linear-gradient(
    135deg,
    #0099ff,
    #00d9ff
    );


    font-weight:800;

    font-size:18px;


    box-shadow:

    0 0 40px rgba(0,153,255,.5);

    transition:.35s;

}



.play-button:hover{

    transform:

    translateY(-6px)
    scale(1.03);


    box-shadow:

    0 0 70px rgba(0,153,255,.9);

}



.discord-button{

    padding:20px 50px;

    border-radius:16px;

    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.15);


    font-weight:700;

    transition:.35s;

}



.discord-button:hover{

    background:

    rgba(0,153,255,.2);


    border-color:#0099ff;


    transform:

    translateY(-6px);

}



/* ===========================
ANIMATIONS
=========================== */


@keyframes gradientMove{

    0%{
        background-position:0%;
    }


    100%{
        background-position:400%;
    }

}


@keyframes move1{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(120px);
    }

}


@keyframes move2{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-120px);
    }

}


@keyframes move3{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-100px);
    }

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ===========================
SERVERS
=========================== */


.servers{

    padding:120px 0;

}


.section-title{

    text-align:center;

    font-size:46px;

    font-weight:900;

    margin-bottom:70px;

}



.section-title::after{

    content:"";

    display:block;

    width:80px;

    height:4px;

    margin:20px auto 0;

    background:#0099ff;

    border-radius:20px;

    box-shadow:

    0 0 20px #0099ff;

}



.server-list{

    display:grid;

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

    gap:30px;

}



.server{

    background:#111827;

    border-radius:25px;

    padding:35px;

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

    position:relative;

    overflow:hidden;

    transition:.35s;

}



.server::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-70px;

    background:#0099ff;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;

}



.server:hover{

    transform:translateY(-10px);

    border-color:#0099ff;

    box-shadow:

    0 0 50px rgba(0,153,255,.2);

}



.server h3{

    font-size:28px;

    margin-bottom:20px;

}



.server p{

    color:#b7c2d5;

    line-height:30px;

}



.online{

    margin-top:25px;

}



.online span{

    color:#00d26a;

    font-size:26px;

    font-weight:800;

}



/* ===========================
ABOUT CARDS
=========================== */


.about{

    padding:120px 0;

}



.cards{

    display:grid;

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

    gap:30px;

}



.card{

    background:#111827;

    border-radius:25px;

    padding:40px;

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

    transition:.35s;

}



.card:hover{

    transform:translateY(-10px);

    background:#151e31;

    box-shadow:

    0 0 60px rgba(0,153,255,.2);

}



.card h3{

    font-size:28px;

    margin-bottom:20px;

}



.card p{

    color:#b7c2d5;

    line-height:30px;

}



/* ===========================
NEWS
=========================== */


.news{

    padding:120px 0;

}



.news-grid{

    display:grid;

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

    gap:30px;

}



.news-card{

    background:#111827;

    border-radius:25px;

    overflow:hidden;

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

    transition:.35s;

}



.news-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 50px rgba(0,153,255,.2);

}



.news-image{

    height:220px;

    background:

    linear-gradient(
    135deg,
    #0099ff,
    #003cff
    );

}



.news-content{

    padding:30px;

}



.news-card h3{

    font-size:24px;

    margin-bottom:15px;

}



.news-card p{

    color:#b7c2d5;

    line-height:30px;

}



/* ===========================
SHOP
=========================== */


.shop{

    padding:120px 0;

}



.shop-grid{

    display:grid;

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

    gap:30px;

}



.shop-card{

    background:#111827;

    border-radius:25px;

    padding:40px;

    text-align:center;

    border:

    1px solid rgba(255,255,255,.06);

    transition:.35s;

}



.shop-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 60px rgba(0,153,255,.25);

}



.shop-icon{

    font-size:50px;

    margin-bottom:20px;

}



.shop-card h3{

    font-size:28px;

    margin-bottom:20px;

}



.shop-card p{

    color:#b7c2d5;

    line-height:28px;

}



.price{

    margin:25px 0;

    font-size:32px;

    font-weight:900;

    color:#38b6ff;

}



.shop-button{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:16px 35px;

    border-radius:14px;

    background:

    linear-gradient(
    135deg,
    #0099ff,
    #00d9ff
    );

    color:white;

    font-weight:800;

    transition:.3s;

}



.shop-button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 50px rgba(0,153,255,.7);

}



/* ===========================
CURRENCY CALCULATOR
=========================== */


.currency-calculator{

    max-width:650px;

    margin:auto;

    padding:45px;

    background:#111827;

    border-radius:28px;

    border:

    1px solid rgba(255,255,255,.08);

    box-shadow:

    0 0 50px rgba(0,153,255,.15);

}



.currency-calculator h3{

    text-align:center;

    font-size:32px;

    margin-bottom:35px;

}



.currency-calculator label{

    display:block;

    margin:20px 0 10px;

    color:#b7c2d5;

}



.currency-calculator input{

    width:100%;

    height:55px;

    padding:0 20px;

    background:#090d15;

    border-radius:14px;

    border:

    1px solid rgba(255,255,255,.15);

    color:white;

    font-size:17px;

}



.currency-calculator input:focus{

    border-color:#0099ff;

    outline:none;

    box-shadow:

    0 0 20px rgba(0,153,255,.4);

}



.result{

    margin-top:35px;

    padding:30px;

    text-align:center;

    border-radius:22px;

    background:

    linear-gradient(
    135deg,
    rgba(0,153,255,.15),
    rgba(0,217,255,.05)
    );

}



.result h2{

    margin:15px 0;

    color:#38b6ff;

    font-size:42px;

}



.result span{

    color:#00d26a;

    font-size:25px;

    font-weight:800;

}



/* ===========================
FORBES / RATING
=========================== */


.forbes{

    padding:120px 0;

}



.top-three{

    display:grid;

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

    gap:30px;

}



.top-player{

    background:#111827;

    border-radius:25px;

    padding:40px;

    text-align:center;

    border:

    1px solid rgba(255,255,255,.08);

    transition:.35s;

}



.top-player:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 50px rgba(0,153,255,.25);

}



.top-player.first{

    border-color:#38b6ff;

    box-shadow:

    0 0 35px rgba(0,153,255,.3);

}



.place{

    font-size:60px;

}



.top-player h3{

    font-size:28px;

    margin:20px 0;

}



.top-player span{

    color:#38b6ff;

    font-size:22px;

    font-weight:900;

}



.rating-list{

    max-width:900px;

    margin:60px auto 0;

}



.rating{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#111827;

    padding:25px 35px;

    border-radius:18px;

    margin-bottom:15px;

}



.rating b{

    color:#38b6ff;

    font-size:25px;

}



.rating strong{

    color:#00d26a;

}
/* ==========================
   LUNACY BLUE HERO
========================== */


.hero-main{

    min-height:900px;

    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(5,10,20,.9)
    ),
    url("../img/main-bg.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}



.hero-main::before{


    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:#0099ff;

    filter:blur(180px);

    opacity:.35;

    top:150px;

    left:50%;

    transform:translateX(-50%);


}




.hero-main::after{


    content:"";

    position:absolute;

    inset:0;


    background:


    radial-gradient(
        circle at center,
        rgba(0,153,255,.20),
        transparent 60%
    );


    pointer-events:none;


}





.hero-main .hero-content{


    position:relative;

    z-index:5;

    text-align:center;

    max-width:900px;

    margin:auto;


}





.hero-main .subtitle{


    color:#38b6ff;

    font-size:22px;

    letter-spacing:6px;

    margin-bottom:25px;

    font-weight:700;


}





.hero-main h1{


    font-size:90px;

    font-weight:900;

    text-transform:uppercase;


    background:

    linear-gradient(
        90deg,
        #ffffff,
        #0099ff,
        #00d9ff,
        #ffffff
    );


    background-size:400%;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:gradientMove 6s linear infinite;


    text-shadow:

    0 0 40px rgba(0,153,255,.35);


}





.hero-main .hero-text{


    color:#b9c4d5;

    font-size:22px;

    line-height:35px;

    max-width:750px;

    margin:30px auto;


}




.hero-buttons{


    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-top:45px;


}





/* BLUE MAIN BUTTON */


.play-button{


    padding:

    20px 50px;


    border-radius:16px;


    background:

    linear-gradient(
        135deg,
        #0099ff,
        #00d9ff
    );


    color:white;

    font-size:18px;

    font-weight:800;


    box-shadow:

    0 0 35px rgba(0,153,255,.5);


    transition:.35s;


}





.play-button:hover{


    transform:

    translateY(-6px)
    scale(1.03);


    box-shadow:

    0 0 70px rgba(0,153,255,.85);


}






/* DISCORD BUTTON */


.discord-button{


    padding:

    20px 50px;


    border-radius:16px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.15);


    color:white;


    font-size:18px;

    font-weight:700;


    backdrop-filter:blur(15px);


    transition:.35s;


}





.discord-button:hover{


    background:

    rgba(0,153,255,.18);


    border-color:#0099ff;


    transform:

    translateY(-6px);


    box-shadow:

    0 0 40px rgba(0,153,255,.4);


}





/* BLUE GLOW ANIMATION */


@keyframes bluePulse{


0%{

box-shadow:
0 0 20px rgba(0,153,255,.3);

}


50%{

box-shadow:
0 0 60px rgba(0,217,255,.7);

}


100%{

box-shadow:
0 0 20px rgba(0,153,255,.3);

}


}



.play-button{


animation:

bluePulse 3s infinite;


}





/* MOBILE */


@media(max-width:700px){


.hero-main{


min-height:700px;


}



.hero-main h1{


font-size:45px;


}



.hero-main .hero-text{


font-size:18px;

line-height:30px;


}



.hero-buttons{


flex-direction:column;


}



.play-button,
.discord-button{


width:100%;

text-align:center;


}



}
/* ==========================
   RESTORE LUNACY INTERFACE
   SHOP / DOWNLOAD / PAYMENT
========================== */


/* DOWNLOAD */

.download-cards{

display:flex;

gap:30px;

flex-wrap:wrap;

margin-top:40px;

}



.download-box{

flex:1;

min-width:320px;

background:#111827;

border-radius:25px;

padding:40px;

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

box-shadow:

0 0 40px rgba(0,153,255,.15);

}



.download-box h2{

font-size:32px;

margin-bottom:20px;

}



.download-box p{

color:#b7c2d5;

line-height:28px;

}



.box-icon{

font-size:50px;

margin-bottom:20px;

}



/* BUTTONS */

.instruction-button{


padding:18px 35px;

border-radius:15px;

background:

rgba(255,255,255,.07);

border:

1px solid rgba(255,255,255,.15);

color:white;

font-weight:700;

transition:.3s;


}



.instruction-button:hover{


background:#0099ff;

transform:translateY(-5px);


}



/* SHOP OLD STYLE */


.shop-grid{


display:grid;

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

gap:30px;


}



.shop-card{


background:#111827;

border-radius:25px;

padding:40px;

text-align:center;

border:

1px solid rgba(255,255,255,.08);

transition:.35s;


}



.shop-card:hover{


transform:translateY(-10px);

box-shadow:

0 0 60px rgba(0,153,255,.25);


}



.shop-icon{


font-size:55px;

margin-bottom:20px;


}



.shop-card h3{


font-size:28px;

margin-bottom:15px;


}



.shop-card p{


color:#b7c2d5;

line-height:28px;


}



.price{


font-size:32px;

font-weight:900;

color:#38b6ff;

margin:25px 0;


}




.shop-button{


display:inline-flex;

justify-content:center;

align-items:center;


width:100%;


padding:16px 35px;


border-radius:14px;


background:

linear-gradient(
135deg,
#0099ff,
#00d9ff
);


font-weight:800;

color:white;


transition:.35s;


}



.shop-button:hover{


transform:translateY(-5px);


box-shadow:

0 0 50px rgba(0,153,255,.8);


}



/* PAYMENT */


.payment-box{


max-width:600px;

margin:50px auto;

background:#111827;

padding:40px;

border-radius:25px;

border:

1px solid rgba(255,255,255,.08);

box-shadow:

0 0 50px rgba(0,153,255,.2);

text-align:center;


}



.payment-box h2{


font-size:32px;

margin-bottom:25px;


}



.payment-card{


background:#090d15;

padding:25px;

border-radius:18px;

margin-bottom:25px;

border:

1px solid rgba(255,255,255,.08);


}



.payment-row{


display:flex;

justify-content:space-between;

padding:15px 0;

border-bottom:

1px solid rgba(255,255,255,.08);


}



.payment-price{


color:#38b6ff!important;

font-size:26px;


}



.payment-input{


width:100%;

padding:15px 20px;

background:#070b14;

border-radius:12px;

border:

1px solid rgba(255,255,255,.15);

color:white;

margin:20px 0;


}



.payment-input:focus{


border-color:#0099ff;

outline:none;

box-shadow:

0 0 20px rgba(0,153,255,.4);


}



.payment-status{


background:#151d30;

padding:15px;

border-radius:12px;

margin:20px 0;


}



/* MODAL */


.modal{


display:none;

position:fixed;

inset:0;

background:

rgba(0,0,0,.75);

backdrop-filter:blur(10px);

align-items:center;

justify-content:center;

z-index:9999;


}



.modal-content{


width:420px;

background:#111827;

border-radius:25px;

padding:40px;

text-align:center;

border:

1px solid rgba(255,255,255,.1);


}



.modal-content h2{


font-size:30px;

margin-bottom:20px;


}



.modal-content button{


margin-top:25px;

padding:14px 35px;

border:none;

border-radius:12px;

background:

linear-gradient(
135deg,
#0099ff,
#00d9ff
);


color:white;

font-weight:800;

cursor:pointer;


}



/* CREATOR */


.creator{


margin-top:20px;

color:#7e8798;

font-size:14px;


}



.creator b{


color:white;


}



.creator a{


color:#38b6ff;


}



/* RESPONSIVE */


@media(max-width:900px){


.shop-grid{

grid-template-columns:1fr;

}



.download-cards{

flex-direction:column;

}



.payment-box{

margin:30px 15px;

}



}
.download-cards{

display:grid;

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

gap:30px;

margin-top:50px;

}


.download-box{

background:#111827;

padding:40px;

border-radius:25px;

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

transition:.35s;

}



.download-box:hover{

transform:translateY(-10px);

box-shadow:0 0 50px rgba(0,153,255,.3);

border-color:#0099ff;

}



.box-icon{

font-size:55px;

margin-bottom:20px;

}



.download-box h2{

font-size:28px;

margin-bottom:20px;

}



.download-box p{

color:#b7c2d5;

line-height:30px;

}



.download-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:25px;

}



.connect-download,
.connect-info{

padding:15px 25px;

border-radius:14px;

font-weight:800;

display:inline-flex;

justify-content:center;

align-items:center;

}



.connect-download{

background:linear-gradient(
135deg,
#0099ff,
#00d9ff
);

color:white;

}



.connect-info{

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

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

color:white;

}



.modal{

display:none;

position:fixed;

inset:0;

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

backdrop-filter:blur(10px);

align-items:center;

justify-content:center;

z-index:2000;

}



.modal-content{

background:#111827;

padding:40px;

border-radius:25px;

max-width:500px;

text-align:center;

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

}



.modal-content button{

margin-top:25px;

padding:15px 40px;

border:none;

border-radius:14px;

background:#0099ff;

color:white;

font-weight:800;

cursor:pointer;

}



@media(max-width:900px){


.download-cards{

grid-template-columns:1fr;

}


}
.play,
.play-button{
    position:relative;
    z-index:9999;
    cursor:pointer;
}
/* =================================
   START GAME BUTTON
================================= */


.play{

    padding:14px 32px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #0099ff,
        #00d9ff
    );

    color:white;

    font-weight:800;

    font-size:15px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 0 35px rgba(0,153,255,.45);

    position:relative;

    z-index:10;

}



.play:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 70px rgba(0,217,255,.8);

}





/* =================================
   START GAME MODAL
================================= */


.game-modal{

    display:none;

    position:fixed;

    inset:0;

    background:

    rgba(0,0,0,.80);

    backdrop-filter:blur(15px);

    align-items:center;

    justify-content:center;

    z-index:99999;

}




.game-window{

    width:950px;

    max-width:92%;

    background:

    linear-gradient(
        145deg,
        #111827,
        #070b14
    );

    border-radius:30px;

    padding:45px;

    border:

    1px solid rgba(255,255,255,.1);

    box-shadow:

    0 0 100px rgba(0,153,255,.35);

    animation:

    showGame .35s ease;

}





@keyframes showGame{


from{

opacity:0;

transform:scale(.85) translateY(30px);

}


to{

opacity:1;

transform:scale(1) translateY(0);

}


}





.game-window h2{


text-align:center;

font-size:42px;

font-weight:900;

margin-bottom:10px;


background:

linear-gradient(
90deg,
#fff,
#38b6ff
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}




.game-desc{


text-align:center;

color:#9ba9bd;

font-size:18px;

margin-bottom:40px;


}




/* ДВА ОКНА СКАЧИВАНИЯ */


.download-options{


display:grid;

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

gap:25px;


}




.download-item{


background:#151e31;

padding:35px;

border-radius:25px;

border:

1px solid rgba(255,255,255,.08);

transition:.35s;


}




.download-item:hover{


transform:translateY(-8px);

border-color:#0099ff;


box-shadow:

0 0 45px rgba(0,153,255,.25);


}




.download-item .icon{


font-size:60px;

margin-bottom:20px;


}




.download-item h3{


font-size:28px;

margin-bottom:15px;


}




.download-item p{


color:#b7c2d5;

line-height:28px;

}





/* КНОПКА СКАЧАТЬ */


.game-download{


width:100%;

display:flex;

justify-content:center;

align-items:center;

margin-top:25px;

padding:17px;

border-radius:15px;


background:

linear-gradient(
135deg,
#0099ff,
#00d9ff
);


font-weight:900;

font-size:16px;


transition:.3s;


}



.game-download:hover{


transform:translateY(-4px);


box-shadow:

0 0 50px rgba(0,153,255,.8);


}




/* ЕСЛИ ЛАУНЧЕР ЕЩЕ НЕ ГОТОВ */


.game-download.disabled{


background:#252d40;

color:#777;

pointer-events:none;

}




/* ИНСТРУКЦИЯ */


.instruction{


margin-top:35px;

background:#090d18;

border-radius:22px;

padding:30px;

border:

1px solid rgba(255,255,255,.06);


}




.instruction h3{


font-size:24px;

margin-bottom:15px;


}



.instruction p{


color:#b7c2d5;

line-height:32px;


}




/* ЗАКРЫТЬ */


.close-game{


display:block;

margin:35px auto 0;


padding:15px 45px;


border-radius:15px;


background:#202a3d;


border:none;


color:white;


font-weight:800;


cursor:pointer;


transition:.3s;


}



.close-game:hover{


background:#0099ff;


}





@media(max-width:800px){


.game-window{

padding:25px;

}



.download-options{

grid-template-columns:1fr;

}



.game-window h2{

font-size:32px;

}


}
.news-image{
    height:220px;
    overflow:hidden;
    background:#0099ff;
}


.news-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}


.news-card:hover .news-image img{
    transform:scale(1.08);
}
/* ==========================
   LUNACY BLUE LOGIN PAGE
========================== */


.login-page{

    min-height:90vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:90px;

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(7,11,20,.95)
    ),

    url("../img/main-bg.jpg");


    background-size:cover;

    background-position:center;

}



/* BLUE GLOW */

.login-page::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#0099ff;

    filter:blur(180px);

    opacity:.35;

    top:50%;

    left:50%;

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

}




.login-box{


    width:420px;


    padding:45px;


    background:

    linear-gradient(
        145deg,
        #111827,
        #070b14
    );


    border:

    1px solid rgba(255,255,255,.1);


    border-radius:25px;


    box-shadow:

    0 0 70px rgba(0,153,255,.25);


    text-align:center;


    position:relative;

    z-index:2;


    animation:loginShow .5s ease;


}



@keyframes loginShow{


from{

opacity:0;

transform:translateY(40px) scale(.95);

}


to{

opacity:1;

transform:translateY(0) scale(1);

}


}




.login-box h2{


    font-size:36px;

    font-weight:900;

    margin-bottom:10px;


    background:

    linear-gradient(
        90deg,
        #ffffff,
        #0099ff,
        #00d9ff
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}





.login-subtitle{


    color:#38b6ff;


    margin-bottom:35px;


    font-size:13px;


    font-weight:700;


    letter-spacing:5px;


}




.login-box input{


    width:100%;


    height:55px;


    padding:0 20px;


    margin-bottom:18px;


    background:#090d15;


    border:

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


    border-radius:14px;


    color:white;


    font-size:16px;


    outline:none;


    transition:.35s;


}




.login-box input::placeholder{


    color:#718096;


}




.login-box input:focus{


    border-color:#0099ff;


    box-shadow:


    0 0 25px rgba(0,153,255,.35);


}




.login-box button{


    width:100%;


    height:55px;


    margin-top:10px;


    border:none;


    border-radius:14px;


    cursor:pointer;


    color:white;


    font-size:17px;


    font-weight:900;


    background:


    linear-gradient(
        135deg,
        #0099ff,
        #00d9ff
    );


    box-shadow:


    0 0 35px rgba(0,153,255,.5);


    transition:.35s;


}




.login-box button:hover{


    transform:translateY(-4px);


    box-shadow:


    0 0 70px rgba(0,217,255,.8);


}





.error{


    background:

    rgba(255,50,50,.15);


    border:

    1px solid rgba(255,50,50,.4);


    color:#ff7b7b;


    padding:15px;


    border-radius:14px;


    margin-bottom:20px;


}





.register{


    margin-top:25px;


    color:#9aa7bb;


    font-size:15px;


}




.register a{


    color:#38b6ff;


    font-weight:700;


    transition:.3s;


}




.register a:hover{


    color:#00d9ff;


    text-shadow:

    0 0 15px #0099ff;


}




@media(max-width:600px){


.login-box{


    width:90%;


    padding:30px;


}


}
/* USER AVATAR */


.avatar-link{

display:flex;

align-items:center;

justify-content:center;

}



.user-avatar{


width:45px;

height:45px;


border-radius:50%;


overflow:hidden;


border:

2px solid #0099ff;


box-shadow:


0 0 20px rgba(0,153,255,.6);


transition:.3s;


}



.user-avatar img{


width:100%;

height:100%;


object-fit:cover;


}



.avatar-link:hover .user-avatar{


transform:scale(1.1);


box-shadow:


0 0 35px rgba(0,217,255,.9);


}
/* AVATAR POSITION */

.buttons{
    display:flex;
    align-items:center;
    gap:10px;
}


.avatar-link{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:5px;
}


.user-avatar{

    width:42px;
    height:42px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid #0099ff;

    box-shadow:
    0 0 20px rgba(0,153,255,.6);

    transition:.3s;

}


.user-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

}
/* ===========================
   LOGIN PAGE LUNACY BLUE
=========================== */


.login-page{

    min-height:900px;

    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(5,10,20,.9)
    ),

    url("../img/main-bg.jpg");


    background-size:cover;

    background-position:center;


    position:relative;

    overflow:hidden;

}



.login-page::before{


    content:"";


    position:absolute;


    width:650px;

    height:650px;


    background:#0099ff;


    filter:blur(180px);


    opacity:.35;


    top:150px;


    left:50%;


    transform:translateX(-50%);


}




.login-box{


    position:relative;

    z-index:2;


    width:420px;


    padding:45px;



    background:

    rgba(17,24,39,.95);



    border-radius:25px;



    border:

    1px solid rgba(255,255,255,.08);



    box-shadow:


    0 0 60px rgba(0,153,255,.25);



    text-align:center;


}



.login-box h2{


    font-size:36px;

    font-weight:900;

    margin-bottom:10px;



    background:

    linear-gradient(
        90deg,
        #fff,
        #38b6ff
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}



.login-subtitle{


    color:#38b6ff;


    letter-spacing:5px;


    font-size:13px;


    margin-bottom:30px;


}





.login-box input{


    width:100%;


    padding:16px;


    margin-bottom:15px;



    background:#070b14;



    border:

    1px solid rgba(255,255,255,.15);



    border-radius:12px;



    color:white;



    font-size:16px;



    outline:none;



    transition:.3s;


}



.login-box input:focus{


    border-color:#0099ff;


    box-shadow:

    0 0 20px rgba(0,153,255,.4);


}





.login-box button{


    width:100%;


    padding:16px;



    border:none;


    border-radius:14px;



    background:

    linear-gradient(
        135deg,
        #0099ff,
        #00d9ff
    );



    color:white;


    font-weight:900;


    font-size:17px;


    cursor:pointer;



    transition:.3s;



    box-shadow:

    0 0 30px rgba(0,153,255,.5);


}



.login-box button:hover{


    transform:translateY(-4px);



    box-shadow:

    0 0 60px rgba(0,217,255,.8);


}





.error{


    background:

    rgba(255,0,0,.15);



    border:

    1px solid rgba(255,0,0,.4);



    padding:12px;


    border-radius:12px;


    color:#ff7070;


    margin-bottom:20px;


}




.register{


    margin-top:25px;


    color:#b7c2d5;


}



.register a{


    color:#38b6ff;


    text-decoration:none;


}



.register a:hover{


    text-decoration:underline;


}
.login-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding-top:100px;

background:
radial-gradient(
circle at center,
rgba(0,153,255,.15),
transparent 50%
);

}
/* ==========================
 PROFILE
========================== */


.profile-section{

min-height:100vh;

padding-top:150px;

padding-bottom:100px;

display:flex;

align-items:center;

}



.profile-card{


width:900px;

max-width:95%;

margin:auto;


display:flex;

gap:50px;


background:#111827;


padding:50px;


border-radius:30px;


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


box-shadow:

0 0 60px rgba(0,153,255,.15);


}





.profile-left{


width:280px;

text-align:center;


border-right:

1px solid rgba(255,255,255,.1);


padding-right:40px;


}



.profile-big-avatar{


width:180px;

height:180px;


border-radius:50%;


object-fit:cover;


border:

5px solid #0099ff;


box-shadow:

0 0 40px rgba(0,153,255,.7);


margin-bottom:25px;


}



.profile-left h2{


font-size:32px;

margin-bottom:10px;


}



.profile-status{


color:#00d26a;

font-weight:700;


}





.profile-right{


flex:1;


}



.profile-right h1{


font-size:38px;

margin-bottom:35px;


background:

linear-gradient(
90deg,
#fff,
#38b6ff
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}




.profile-line{


display:flex;

justify-content:space-between;


padding:20px;


background:#090d15;


border-radius:15px;


margin-bottom:15px;


color:#b7c2d5;


}



.profile-line b{


color:white;


}



.profile-line .blue{


color:#38b6ff;


}





.profile-button{


display:flex;

justify-content:center;


margin-top:30px;


padding:16px;


border-radius:15px;


background:

linear-gradient(
135deg,
#0099ff,
#00d9ff
);


font-weight:800;


transition:.3s;


}



.profile-button:hover{


transform:translateY(-5px);


box-shadow:

0 0 40px rgba(0,153,255,.7);


}





@media(max-width:800px){


.profile-card{

flex-direction:column;

}


.profile-left{

width:100%;

border:none;

padding:0;

}



}
.profile-big-avatar{

width:180px;
height:180px;
border-radius:50%;
object-fit:cover;
cursor:pointer;
border:3px solid #38b6ff;
transition:.3s;

}


.profile-big-avatar:hover{

transform:scale(1.05);

}



.user-avatar img{

width:45px;
height:45px;
border-radius:50%;
object-fit:cover;

}