style.css

body{
margin:0;
font-family:Arial;
color:white;
background:#000;
position:relative;
overflow-x:hidden;
}

/* BACKGROUND ANIMATO */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background-image:url("background.jpg");
background-size:110%;
background-position:center;
background-repeat:no-repeat;

animation:panorama 30s ease-in-out infinite alternate;

z-index:-1;
opacity:0.35;
}

/* ANIMAZIONE */

@keyframes panorama{

0%{
background-position:center top;
}

50%{
background-position:center center;
}

100%{
background-position:center bottom;
}

}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#0a0a0a;
}

.logo{
color:white;
text-decoration:none;
font-weight:bold;
font-size:22px;
}

.logo:hover{
color:#a855f7;
}

.links a{
margin-left:20px;
text-decoration:none;
color:white;
transition:0.2s;
}

.links a:hover{
color:#a855f7;
}

/* HERO */

.hero{
text-align:center;
padding:200px 20px;
}

/* TITOLO */

.hero h1{
font-size:65px;

text-shadow:
0 0 10px #a855f7,
0 0 20px #a855f7,
0 0 40px #a855f7;
}

.subtitle{
color:#ccc;
margin-top:10px;
}

/* BOTTONI */

.buttons{
margin-top:25px;
}

.buttons button{
margin:10px;
padding:12px 25px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:14px;
transition:0.2s;
}

.buttons button:hover{
transform:scale(1.05);
}

.discord{background:#5865F2;color:white;}
.vote{background:#22c55e;color:white;}
.store{background:#f59e0b;color:white;}

/* STAFF */

.staff{
text-align:center;
padding:80px 20px;
}

.staff-desc{
max-width:700px;
margin:auto;
margin-bottom:60px;
color:#ccc;
}

.staff-pyramid{
display:flex;
flex-direction:column;
align-items:center;
gap:50px;
}

.staff-row{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.staff-card{
background:#111;
padding:25px;
border-radius:12px;
max-width:260px;
transition:0.2s;
}

.staff-card:hover{
transform:translateY(-5px);
}

.staff-card img{
width:90px;
margin-bottom:10px;
}

.name{
color:#a855f7;
font-weight:bold;
}

/* FOUNDER */

.founder .staff-card{
transform:scale(1.08);
border:2px solid #a855f7;
box-shadow:0 0 20px #a855f7;
}

/* PLAYERS */

.players{
text-align:center;
padding:80px 20px;
}

#playerlist{
margin-top:30px;
}

#playerlist div{
margin:10px;
font-size:16px;
}
/* NEWS */

.news{
padding:80px 20px;
text-align:center;
}

.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}

.news-card{
background:#111;
padding:25px;
border-radius:12px;
transition:0.2s;
}

.news-card:hover{
transform:translateY(-5px);
}

/* FEATURES */

.features{
padding:80px 20px;
text-align:center;
}

.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}

.feature{
background:#111;
padding:25px;
border-radius:12px;
}

/* FAQ */

.faq{
padding:80px 20px;
max-width:900px;
margin:auto;
}

.faq-item{
background:#111;
padding:20px;
border-radius:10px;
margin-bottom:20px;
}
/* FAQ */

.faq{
padding:80px 20px;
max-width:900px;
margin:auto;
}

.faq-item{
background:#111;
border-radius:10px;
margin-bottom:15px;
overflow:hidden;
}

.faq-question{
width:100%;
background:#111;
color:white;
border:none;
padding:18px;
font-size:16px;
text-align:left;
cursor:pointer;
transition:0.2s;
}

.faq-question:hover{
background:#1a1a1a;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease;
padding:0 18px;
}

.faq-answer p{
margin:15px 0;
color:#ccc;
}
/* FAQ */

.faq{
padding:80px 20px;
max-width:900px;
margin:auto;
}

.faq-item{
background:#111;
border-radius:10px;
margin-bottom:15px;
overflow:hidden;
transition:0.2s;
}

.faq-item.active{
box-shadow:0 0 15px #a855f7;
border:1px solid #a855f7;
}

.faq-question{
width:100%;
background:none;
border:none;
color:white;
padding:18px;
font-size:16px;
cursor:pointer;

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

transition:0.2s;
}

.faq-question:hover{
background:#1a1a1a;
}

.arrow{
transition:transform 0.3s;
color:#a855f7;
}

.faq-item.active .arrow{
transform:rotate(180deg);
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease;
padding:0 18px;
}

.faq-answer p{
margin:15px 0;
color:#ccc;
}
.features-desc{
max-width:700px;
margin:auto;
margin-bottom:40px;
color:#bbb;
font-size:17px;
text-align:center;
}
.news-desc{
max-width:700px;
margin:auto;
margin-bottom:40px;
color:#bbb;
font-size:17px;
text-align:center;
}
.discord-news{
max-width:900px;
margin:auto;
margin-top:30px;
border-radius:10px;
overflow:hidden;
box-shadow:0 0 20px rgba(168,85,247,0.3);
}
.changelogs-news{
max-width:900px;
margin:auto;
margin-top:30px;
border-radius:10px;
overflow:hidden;
box-shadow:0 0 20px rgba(168,85,247,0.3);
}

.news-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
margin-top:40px;
}

.news-box{
background:#111;
padding:20px;
border-radius:10px;
box-shadow:0 0 15px rgba(168,85,247,0.3);
}

.news-box h3{
margin-bottom:15px;
}
.news-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:1100px;
margin:auto;
}

.news-box{
background:#111;
padding:25px;
border-radius:12px;
}

.news-card{
background:#0f0f0f;
padding:20px;
margin-top:20px;
border-radius:10px;
border-left:4px solid #a855f7;
transition:0.3s;
}

.news-card:hover{
transform:translateY(-5px);
box-shadow:0 0 15px #a855f7;
}

.date{
display:block;
margin-top:10px;
font-size:13px;
opacity:0.6;
}
.hero{
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:95vh;
text-align:center;
overflow:hidden;
}

.hero-bg{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle at center,#2b0b45,#090014);
z-index:-1;
animation:heroGlow 8s infinite alternate;
}

@keyframes heroGlow{
0%{opacity:0.7}
100%{opacity:1}
}

.hero-title{
font-size:110px;
font-weight:900;
letter-spacing:6px;
background:linear-gradient(90deg,#a855f7,#7c3aed,#a855f7);
background-size:200%;
-webkit-background-clip:text;
color:transparent;
animation:titleGlow 6s linear infinite;
}

@keyframes titleGlow{
0%{background-position:0%}
100%{background-position:200%}
}

.hero-subtitle{
margin-top:10px;
font-size:18px;
opacity:0.8;
}

.hero-ip{
margin-top:35px;
background:#111;
border:2px solid #a855f7;
border-radius:14px;
padding:18px 35px;
cursor:pointer;
transition:0.3s;
display:inline-block;
}

.hero-ip:hover{
transform:scale(1.05);
box-shadow:0 0 25px #a855f7;
}

.ip-label{
font-size:12px;
opacity:0.6;
display:block;
}

.ip-container{
display:flex;
align-items:center;
gap:10px;
justify-content:center;
}

.ip-address{
font-size:22px;
font-weight:bold;
}

.copy-icon{
font-size:18px;
opacity:0.7;
}

.hero-players{
margin-top:18px;
font-size:16px;
opacity:0.8;
}

.hero-buttons{
margin-top:35px;
display:flex;
gap:18px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:13px 30px;
border-radius:10px;
font-weight:bold;
text-decoration:none;
color:white;
transition:0.3s;
}

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

.discord{background:#5865F2;}
.vote{background:#22c55e;}
.store{background:#f59e0b;}
/* BACKGROUND VIOLA GLOBALE */

body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(circle at center,#2b0b45,#090014);

z-index:-2;
animation:heroGlow 8s infinite alternate;
}

@keyframes heroGlow{
0%{opacity:0.75;}
100%{opacity:1;}
}
/* DROPDOWN MENU */

.dropdown{
position:relative;
display:inline-block;
}

.dropbtn{
background:none;
border:none;
color:white;
font-size:16px;
cursor:pointer;
}

.dropbtn:hover{
color:#a855f7;
}

.dropdown-content{
display:none;
position:absolute;
background:#111;
min-width:160px;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.5);
z-index:10;
}

.dropdown-content a{
display:block;
padding:10px 15px;
color:white;
text-decoration:none;
}

.dropdown-content a:hover{
background:#1a1a1a;
color:#a855f7;
}

.dropdown:hover .dropdown-content{
display:block;
}
/* DROPDOWN */

.dropdown{
position:relative;
}

.dropbtn{
background:none;
border:none;
color:white;
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:0.25s;
}

.dropbtn:hover{
color:#a855f7;
}

/* MENU */

.dropdown-content{
position:absolute;
top:35px;
left:0;

background:rgba(20,20,30,0.85);
backdrop-filter:blur(6px);

border-radius:12px;
min-width:180px;

border:1px solid rgba(168,85,247,0.2);

box-shadow:0 0 20px rgba(168,85,247,0.25);

opacity:0;
transform:translateY(10px) scale(0.95);
pointer-events:none;

transition:0.25s;
}

/* LINK MENU */

.dropdown-content a{
display:block;
padding:12px 16px;
color:white;
text-decoration:none;
transition:0.2s;
}

.dropdown-content a:hover{
background:rgba(168,85,247,0.15);
color:#c084fc;
}

/* APERTURA */

.dropdown:hover .dropdown-content{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}

/* FRECCIA ANIMATA */

.arrow{
transition:transform 0.25s;
}

.dropdown:hover .arrow{
transform:rotate(180deg);
}
.dropdown-content{
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:0.25s;
}

.dropdown.active .dropdown-content{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.dropdown.active .arrow{
transform:rotate(180deg);
}
.dropdown-content{

display:none;

position:absolute;
top:40px;
left:0;

background:#111;
border-radius:10px;
min-width:180px;

opacity:0;
transform:translateY(10px);
transition:0.25s;

}

.dropdown.active .dropdown-content{

display:block;
opacity:1;
transform:translateY(0);

}
.players{
text-align:center;
padding:80px 20px;
}

.players-desc{
max-width:700px;
margin:auto;
margin-bottom:40px;
color:#bbb;
}

.players-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
}

.player{
background:#111;
padding:25px;
border-radius:12px;
transition:0.3s;
box-shadow:0 0 10px rgba(0,0,0,0.5);
}

.player:hover{
transform:translateY(-5px);
box-shadow:0 0 20px #a855f7;
}

.player img{
width:70px;
margin-bottom:10px;
}

.player-name{
font-weight:bold;
margin-bottom:5px;
}

.player-desc{
font-size:13px;
color:#bbb;
}
/* FOOTER */

.footer{

margin-top:120px;
background:#090014;
border-top:1px solid rgba(168,85,247,0.2);
padding:60px 40px 20px 40px;

}

.footer-container{

display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:60px;

}

.footer-left{

max-width:400px;

}

.footer-left h2{

font-size:32px;
margin-bottom:10px;
background:linear-gradient(90deg,#a855f7,#7c3aed);
-webkit-background-clip:text;
color:transparent;

}

.footer-left p{

color:#aaa;
line-height:1.6;

}

.footer-links{

display:flex;
gap:60px;

}

.footer-column{

display:flex;
flex-direction:column;

}

.footer-column h3{

color:white;
margin-bottom:12px;

}

.footer-column a{

color:#aaa;
text-decoration:none;
margin:4px 0;
transition:0.2s;

}

.footer-column a:hover{

color:#a855f7;

}

.footer-bottom{

margin-top:40px;
text-align:center;
color:#666;
font-size:14px;

}
/* ========================= */
/* SEZIONE MAPPA */
/* ========================= */

.map-section{
text-align:center;
padding:70px 20px;
position:relative;
}

/* ========================= */
/* TITOLO */
/* ========================= */

.map-title{
font-size:40px;
margin-bottom:10px;
}

.map-description{
color:#bbbbbb;
font-size:18px;
margin-bottom:35px;
}

/* ========================= */
/* CONTENITORE */
/* ========================= */

.map-button-wrapper{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:20px 0;
}

/* ========================= */
/* BOTTONE */
/* ========================= */

.map-button{
position:relative;
z-index:5;
display:inline-block;
background:linear-gradient(45deg,#00c6ff,#0072ff);
color:white;
font-size:22px;
font-weight:bold;
padding:18px 45px;
border-radius:12px;
text-decoration:none;
transition:all 0.3s ease;
box-shadow:0 0 15px #00c6ff,0 0 35px rgba(0,114,255,0.6);
}

.map-button:hover{
transform:translateY(-5px) scale(1.05);
box-shadow:0 0 25px #00e5ff,0 0 70px rgba(0,140,255,1);
background:linear-gradient(45deg,#00e5ff,#008cff);
}

/* ========================= */
/* ELEMENTI SPAZIALI */
/* ========================= */

.orbit,
.stars,
.galaxy{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
opacity:0;
transition:opacity 0.3s ease;
}

/* ========================= */
/* ORBITE */
/* ========================= */

.orbit{
border:2px solid rgba(0,198,255,0.25);
border-radius:50%;
animation:spin 12s linear infinite;
}

.orbit1{ width:200px; height:200px; }
.orbit2{ width:260px; height:260px; animation-duration:18s; }

@keyframes spin{
from{ transform:translate(-50%,-50%) rotate(0deg); }
to{ transform:translate(-50%,-50%) rotate(360deg); }
}

.map-button-wrapper:hover .orbit{
opacity:1;
animation-duration:4s;
}

/* ========================= */
/* SATELLITE */
/* ========================= */

.satellite{
width:10px;
height:10px;
background:#00c6ff;
border-radius:50%;
position:absolute;
top:-5px;
left:50%;
transform:translateX(-50%);
box-shadow:0 0 12px #00e5ff;
}

/* ========================= */
/* STELLE */
/* ========================= */

.stars{
width:420px;
height:420px;
background:
radial-gradient(2px 2px at 20% 30%,#fff,transparent),
radial-gradient(1.5px 1.5px at 70% 20%,#00c6ff,transparent),
radial-gradient(2px 2px at 40% 80%,#fff,transparent),
radial-gradient(1px 1px at 80% 70%,#00e5ff,transparent);
animation:rotateStars 40s linear infinite;
}

@keyframes rotateStars{
from{ transform:translate(-50%,-50%) rotate(0deg); }
to{ transform:translate(-50%,-50%) rotate(360deg); }
}

.map-button-wrapper:hover .stars{
opacity:1;
}

/* ========================= */
/* GALASSIA */
/* ========================= */

.galaxy{
width:480px;
height:480px;
background:
radial-gradient(circle at 50% 50%,rgba(0,198,255,0.25),transparent 60%),
radial-gradient(circle at 30% 30%,rgba(0,114,255,0.15),transparent 50%),
radial-gradient(circle at 70% 70%,rgba(0,255,255,0.1),transparent 55%);
filter:blur(30px);
animation:rotateGalaxy 80s linear infinite;
}

@keyframes rotateGalaxy{
from{ transform:translate(-50%,-50%) rotate(0deg); }
to{ transform:translate(-50%,-50%) rotate(-360deg); }
}

.map-button-wrapper:hover .galaxy{
opacity:1;
}

/* ========================= */
/* PIANETI GRAVITAZIONALI */
/* ========================= */

.planet{
position:absolute;
border-radius:50%;
background:radial-gradient(circle at 30% 30%,#ffffff,#00c6ff);
box-shadow:0 0 14px #00e5ff;
pointer-events:none;
transition:transform 0.08s linear;
z-index:1;
}

/* Pianeti con dimensioni diverse */

.planet1{ top:8%;  left:12%; width:10px; height:10px; }
.planet2{ top:18%; left:78%; width:14px; height:14px; }
.planet3{ top:32%; left:6%;  width:9px;  height:9px; }
.planet4{ top:44%; left:72%; width:13px; height:13px; }
.planet5{ top:60%; left:18%; width:11px; height:11px; }
.planet6{ top:76%; left:86%; width:8px;  height:8px; }
.planet7{ top:22%; left:48%; width:12px; height:12px; }
.planet8{ top:82%; left:52%; width:10px; height:10px; }