body{
margin:0;
font-family:Arial;
color:white;
}

/* BACKGROUND */

body::before{

content:"";
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:url("background.jpg") center/cover no-repeat;

z-index:-1;

}

/* NAVBAR */

.navbar{

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

background:rgba(0,0,0,0.7);

padding:15px 40px;

}

.nav-links{

display:flex;
align-items:center;
gap:18px;

}

.nav-links a{

color:white;
text-decoration:none;

}

.nav-links a:hover{

color:#55ff55;

}

/* HERO */

.logo{
font-size:24px;
font-weight:bold;
}

.content{
text-align:center;
padding:40px;
background:rgba(0,0,0,0.4);
min-height:100vh;
}

.panel{
background:rgba(30,30,30,0.9);
border:3px solid rgba(255,255,255,0.2);
border-radius:10px;
padding:25px;
margin:30px auto;
max-width:600px;
}

.panel iframe{
box-shadow:0 0 25px rgba(0,0,0,0.6);
border:1px solid rgba(255,255,255,0.15);
}

.servers{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:40px;
}

.server-card{
background:rgba(40,40,40,0.9);
border:3px solid rgba(255,255,255,0.2);
border-radius:10px;
padding:25px;
width:220px;
transition:0.2s;
}

.server-card:hover{
transform:scale(1.05);
border-color:#55ff55;
}

.server:hover{
transform:translateY(-6px) scale(1.05);
border-color:#55ff55;
box-shadow:0 0 20px rgba(85,255,85,0.4);
}

button{
background:#55aa55;
border:none;
padding:12px 20px;
cursor:pointer;
color:white;
border-radius:6px;
}

.rules ul{
list-style:none;
padding:0;
}

.rules li{
margin:10px 0;
}

.popup{
position:fixed;
bottom:40px;
left:50%;
transform:translateX(-50%);
background:#1f1f1f;
border:3px solid #55ff55;
padding:15px 25px;
opacity:0;
transition:0.3s;
border-radius:8px;
}

.popup.show{
opacity:1;
}

.server-status{

display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;

}

.server{

background:rgba(30,30,30,0.9);
padding:20px;
border-radius:10px;
width:180px;

}

.discord-button{

display:inline-flex;
align-items:center;
gap:10px;

padding:12px 22px;
margin-top:12px;

font-weight:bold;
font-size:16px;

color:white;
text-decoration:none;

background:rgba(88,101,242,0.15);
border:1px solid rgba(88,101,242,0.4);
border-radius:10px;

backdrop-filter:blur(8px);

transition:all 0.25s ease;

position:relative;
overflow:hidden;

}

/* ikon */

.discord-icon{
width:18px;
height:18px;
}

/* hover */

.discord-button:hover{

background:#5865F2;
transform:translateY(-3px);

box-shadow:
0 0 10px #5865F2,
0 0 25px rgba(88,101,242,0.8),
0 0 45px rgba(88,101,242,0.6);

}

/* glow pulse */

.discord-button::before{

content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.25),
transparent
);

transform:translateX(-100%);
transition:0.5s;

}

.discord-button:hover::before{

transform:translateX(100%);

}

.map-button{
display:inline-block;
margin-top:15px;
padding:10px 18px;
background:#4CAF50;
color:white;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:0.2s;
}

.map-button:hover{
background:#66bb6a;
transform:scale(1.05);
}

.map-popup{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.85);
z-index:999;

}

.map-popup-content{

position:relative;
width:90%;
height:85%;
margin:3% auto;

background:#111;
border-radius:12px;
overflow:hidden;

box-shadow:0 0 40px rgba(0,0,0,0.8);

}

.map-close{

position:absolute;
top:10px;
right:15px;
font-size:24px;
cursor:pointer;
color:white;

}

.map-close:hover{
color:red;
}

iframe{
pointer-events:none;
}

.hero{

text-align:center;
padding:80px 20px 40px;

}

.hero-title{

font-size:56px;
font-weight:bold;
letter-spacing:3px;

text-shadow:
0 0 10px rgba(255,255,255,0.6),
0 0 30px rgba(255,255,255,0.4);

margin-bottom:10px;

}

.hero-sub{

font-size:20px;
margin-bottom:30px;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

.join-btn{

background:#55ff55;
color:#000;
font-weight:bold;
font-size:18px;

padding:14px 28px;

border-radius:10px;
border:none;

cursor:pointer;

transition:0.25s;

}

.join-btn:hover{

transform:translateY(-4px);

box-shadow:
0 0 10px #55ff55,
0 0 25px rgba(85,255,85,0.7),
0 0 40px rgba(85,255,85,0.5);

}

.server-icon{

width:64px;
height:64px;

image-rendering:pixelated;

margin-bottom:10px;

}

.motd{

margin-top:8px;
font-style:italic;
opacity:0.9;

}

.server-selector{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
margin-bottom:30px;
}

.server-selector button{

background:rgba(30,30,30,0.9);
border:2px solid rgba(255,255,255,0.2);
color:white;

padding:10px 20px;
border-radius:8px;

cursor:pointer;

transition:0.2s;

}

.server-selector button:hover{

border-color:#55ff55;
transform:scale(1.05);

}

.rank-card{

background:rgba(40,40,40,0.95);
border-radius:12px;
padding:30px;

width:230px;

border:3px solid rgba(255,255,255,0.15);

transition:0.25s;

}

.rank-card:hover{

transform:translateY(-6px) scale(1.05);

box-shadow:
0 0 15px rgba(255,255,255,0.2);

}

.rank-title{
font-size:26px;
margin-bottom:10px;
font-weight:bold;
}

.rank-vip{
color:#55ff55;
text-shadow:0 0 10px rgba(85,255,85,0.6);
}

.rank-vipplus{
color:#55ffff;
text-shadow:0 0 10px rgba(85,255,255,0.6);
}

.rank-mvp{
color:#ffaa00;
text-shadow:0 0 10px rgba(255,170,0,0.6);
}

.rank-mvpplus{
color:#ff55ff;
text-shadow:0 0 10px rgba(255,85,255,0.6);
}

.rank-price{

font-size:20px;
margin:15px 0;

}

.buy-button{

display:inline-block;

padding:10px 18px;

background:#55ff55;
color:#000;

border-radius:8px;
font-weight:bold;

text-decoration:none;

transition:0.2s;

}

.buy-button:hover{

transform:scale(1.1);

box-shadow:
0 0 10px #55ff55,
0 0 25px rgba(85,255,85,0.7),
0 0 40px rgba(85,255,85,0.5);

}