/* =================================================
RESET
================================================= */

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

html,body{
height:100%;
scroll-behavior:smooth;
}

body{
font-family:Segoe UI,Arial,sans-serif;
color:#e6e6e6;
background:#05060c;
overflow-x:hidden;
min-height:100vh;
display:flex;
flex-direction:column;
}

/* =================================================
BACKGROUND
================================================= */

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 10%,rgba(88,101,242,.35),transparent 40%),
radial-gradient(circle at 80% 0%,rgba(202,166,90,.25),transparent 45%),
linear-gradient(180deg,#070812 0%,#020308 100%);
z-index:-3;
animation:bgPulse 10s ease-in-out infinite;
}

body::after{
content:"";
position:fixed;
inset:0;
background:url("assets/img/hero.png") center top/cover no-repeat;
opacity:.35;
z-index:-2;
pointer-events:none;
}

/* =================================================
NAVBAR
================================================= */

.navbar{
position:fixed;
top:0;
width:100%;
background:rgba(5,6,14,.85);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.05);
z-index:9999;
box-shadow:0 10px 35px rgba(0,0,0,.6);
}

.container{
max-width:1200px;
margin:auto;
padding:18px 25px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:50px;
}

.menu{
display:flex;
gap:30px;
}

.menu a{
color:#ddd;
text-decoration:none;
font-weight:600;
position:relative;
}

.menu a:hover{
color:#fff;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:linear-gradient(90deg,#5865F2,#caa65a);
transition:.3s;
}

.menu a:hover::after{
width:100%;
}

/* =================================================
HAMBURGER
================================================= */

.hamburger{
display:none;
font-size:30px;
cursor:pointer;
color:#fff;
}

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

.hero{
min-height:100vh;
padding-top:100px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
}

.hero::after{
content:"";
position:absolute;
width:700px;
height:700px;
background:radial-gradient(circle,#5865F2 0%,transparent 65%);
filter:blur(160px);
opacity:.35;
z-index:-1;
}

.hero img{
max-width:650px;
width:90%;
margin-bottom:25px;
animation:heroFloat 6s ease-in-out infinite;
}

.hero h1{
font-size:46px;
margin-bottom:20px;
background:linear-gradient(90deg,#fff,#caa65a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =================================================
BUTTON
================================================= */

.btn{
background:linear-gradient(45deg,#5865F2,#7b84ff);
padding:16px 34px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:700;
display:inline-block;
transition:.3s;
box-shadow:0 8px 25px rgba(88,101,242,.45);
position:relative;
overflow:hidden;
}

.btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
transition:.5s;
}

.btn:hover::before{
left:100%;
}

.btn:hover{
transform:translateY(-5px);
box-shadow:
0 12px 35px rgba(88,101,242,.6),
0 0 20px rgba(88,101,242,.5);
}

/* =================================================
SECTION
================================================= */

.section{
padding-top:140px;
padding-bottom:80px;
max-width:1050px;
margin:auto;
}

h1{
text-align:center;
margin-bottom:45px;
font-size:42px;
background:linear-gradient(90deg,#ffffff,#caa65a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =================================================
COUNTDOWN
================================================= */

.countdown{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.countdown div{
background:rgba(18,20,40,.75);
border:1px solid rgba(255,255,255,.08);
padding:20px 30px;
border-radius:12px;
backdrop-filter:blur(8px);
box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.countdown span{
font-size:34px;
color:#caa65a;
font-weight:bold;
}

/* =================================================
INFO GRID
================================================= */

.info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.info-box{
background:rgba(18,20,40,.65);
backdrop-filter:blur(10px);
padding:32px;
border-radius:14px;
text-align:center;
border:1px solid rgba(255,255,255,.08);
transition:.35s;
}

.info-box:hover{
transform:translateY(-10px);
border-color:#5865F2;
box-shadow:0 10px 35px rgba(0,0,0,.7);
}

/* =================================================
FEATURES (features.php)
================================================= */

.features-wrapper{
display:flex;
flex-direction:column;
gap:20px;
}

.feature-toggle{
background:rgba(18,20,40,.85);
border-radius:12px;
overflow:hidden;
border:1px solid rgba(255,255,255,.05);
transition:.3s;
}

.feature-header{
padding:22px;
cursor:pointer;
background:#141832;
position:relative;
font-weight:600;
}

.feature-header::after{
content:"+";
position:absolute;
right:25px;
font-size:22px;
}

.feature-toggle.active .feature-header::after{
content:"-";
}

.feature-content{
max-height:0;
overflow:hidden;
transition:.4s;
padding:0 25px;
}

.feature-toggle.active .feature-content{
max-height:4000px;
padding:25px;
}

/* =================================================
TABLES (features)
================================================= */

.l2-table{
width:100%;
border-collapse:collapse;
margin-top:25px;
background:rgba(10,12,28,.95);
}

.l2-table th{
background:#1e2246;
color:#caa65a;
padding:14px;
}

.l2-table td{
padding:14px;
text-align:center;
border-top:1px solid rgba(255,255,255,.05);
}

/* =================================================
DOWNLOAD (download.php)
================================================= */

.download-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.download-card{
background: url("assets/img/launchertab.png") center/cover no-repeat;
padding:40px;
border-radius:14px;
text-align:center;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
backdrop-filter:blur(6px);
position:relative;
overflow:hidden;
}

/* overlay dla czytelności */
.download-card::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
z-index:0;
}

/* żeby tekst był nad overlay */
.download-card *{
position:relative;
z-index:1;
}

.download-card:hover{
transform:translateY(-8px) scale(1.02);
border-color:#5865F2;
box-shadow:0 10px 35px rgba(0,0,0,.6);
}

.download-icon img{
width:80px;
margin:auto;
display:block;
}

/* =================================================
EVENTS (events.php)
================================================= */

.events-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
}

.event-card{
background:rgba(18,20,40,.85);
border-radius:12px;
padding:30px;
border:1px solid rgba(255,255,255,.05);
transition:.3s;
}

.event-card:hover{
transform:translateY(-6px);
border-color:#5865F2;
box-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* =================================================
FOOTER
================================================= */

footer{
text-align:center;
padding:40px;
margin-top:auto;
background:rgba(0,0,0,.6);
}

/* =================================================
MOBILE MENU FIX
================================================= */

@media(max-width:900px){

.hamburger{
display:block;
}

.menu{
flex-direction:column;
position:absolute;
top:75px;
left:0;
width:100%;
background:rgba(5,6,14,.98);
display:none;
padding:20px 0;
text-align:center;
}

.menu a{
display:block;
padding:14px 0;
}

.menu.active{
display:flex;
}

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

.hero img{
max-width:420px;
}

}

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

@keyframes heroFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}
}

@keyframes bgPulse{
0%{opacity:1;}
50%{opacity:.85;}
100%{opacity:1;}
}

/* =================================================
VOTE + FIND US FIX
================================================= */

.vote-grid,
.social-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:30px;
margin-top:40px;
}

.vote-card,
.social-card{
background:rgba(18,20,40,.7);
padding:25px;
border-radius:14px;
text-align:center;
text-decoration:none;
color:#fff;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
backdrop-filter:blur(10px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.vote-card img{
height:55px;
width:auto;
margin-bottom:10px;
object-fit:contain;
}

.social-card img{
height:45px;
width:auto;
margin-bottom:10px;
object-fit:contain;
}

.vote-card:hover{
transform:translateY(-6px);
border-color:#caa65a;
box-shadow:0 10px 35px rgba(0,0,0,.6);
}

.social-card:hover{
transform:translateY(-6px);
border-color:#5865F2;
box-shadow:0 10px 35px rgba(0,0,0,.6);
}


/* =================================================
FOOTER FIX
================================================= */

footer{
text-align:center;
padding:30px 20px;
margin-top:auto;
background:rgba(0,0,0,.7);
border-top:1px solid rgba(255,255,255,.05);
font-size:14px;
color:#aaa;
}

footer p{
margin:6px 0;
}

footer a{
color:#caa65a;
text-decoration:none;
}

footer a:hover{
text-decoration:underline;
}

/* =================================================
COMMUNITY SECTION IMPROVED
================================================= */

.community{
padding:120px 20px;
text-align:center;
}

.community-box{
max-width:700px;
margin:auto;
background:rgba(18,20,40,.75);
padding:60px 40px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
box-shadow:0 20px 50px rgba(0,0,0,.6);
position:relative;
overflow:hidden;
}

/* lekka aura jak w L2 */

.community-box::before{
content:"";
position:absolute;
top:-150px;
left:-150px;
width:300px;
height:300px;
background:radial-gradient(circle,#5865F2,transparent 70%);
opacity:.25;
filter:blur(80px);
}

.community-box::after{
content:"";
position:absolute;
bottom:-150px;
right:-150px;
width:300px;
height:300px;
background:radial-gradient(circle,#caa65a,transparent 70%);
opacity:.25;
filter:blur(80px);
}

.community-box h1{
margin-bottom:15px;
}

.community-box p{
color:#bbb;
font-size:16px;
margin-bottom:35px;
}

/* BUTTONS */

.community-buttons{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.discord-btn{
padding:16px 40px;
border-radius:10px;
text-decoration:none;
font-weight:600;
font-size:15px;
color:#fff !important;
background:linear-gradient(135deg,#5865F2,#7b8cff);
box-shadow:0 10px 25px rgba(88,101,242,.35);
transition:.25s;
}

.discord-btn.alt{
background:linear-gradient(135deg,#7c3aed,#a78bfa);
}

.discord-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(120,120,255,.45);
}

/* =================================================
DISCORD BUTTON IN MENU
================================================= */

.discord-fire{
padding:8px 18px;
border-radius:8px;
background:linear-gradient(135deg,#5865F2,#7b8cff);
color:#fff !important;
font-weight:700;
transition:.25s;
box-shadow:0 6px 15px rgba(88,101,242,.35);
}

.discord-fire:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(88,101,242,.45);
background:linear-gradient(135deg,#6a76ff,#8c96ff);
}

/* =================================================
GOLD DIVIDER
================================================= */

.gold-divider{
position:relative;
width:100%;
height:70px;
display:flex;
align-items:center;
justify-content:center;
margin:80px 0;
}

.gold-divider::before,
.gold-divider::after{
content:"";
flex:1;
height:2px;
background:linear-gradient(
90deg,
transparent,
#caa65a,
#f6d365,
#caa65a,
transparent
);
opacity:.9;
}

.gold-divider::before{
margin-right:25px;
}

.gold-divider::after{
margin-left:25px;
}

.gold-divider span{
width:16px;
height:16px;
border:2px solid #caa65a;
transform:rotate(45deg);
background:rgba(202,166,90,.15);
box-shadow:
0 0 8px rgba(202,166,90,.6),
0 0 18px rgba(202,166,90,.4);
}

/* RATES */

.rates-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:20px;
}

.rate-item{
background:rgba(10,12,28,.9);
border-radius:10px;
padding:18px;
border:1px solid rgba(255,255,255,.06);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:.25s;
}

.rate-item:hover{
transform:translateY(-4px);
border-color:#caa65a;
box-shadow:0 10px 25px rgba(0,0,0,.6);
}

.rate-number{
font-size:30px;
font-weight:700;
color:#caa65a;
}

.rate-text{
font-size:13px;
letter-spacing:1px;
opacity:.85;
}

/* ===============================
CHRONICLE LIST
=============================== */

.chronicle-list{

list-style:none;
margin-top:15px;
display:flex;
flex-direction:column;
gap:10px;

}

.chronicle-list li{

background:rgba(10,12,28,.85);

padding:10px 14px;

border-radius:8px;

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

font-size:14px;

position:relative;

transition:.25s;

}

.chronicle-list li:hover{

border-color:#caa65a;

transform:translateX(4px);

}

/* gold bullet */

.chronicle-list li::before{

content:"?";

color:#caa65a;

margin-right:8px;

}

/* ===============================
START DATE
=============================== */

.start-date{

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

gap:15px;

margin-top:15px;

}

.start-day{

font-size:46px;

font-weight:800;

color:#caa65a;

line-height:1;

}

.start-info{

display:flex;

flex-direction:column;

align-items:flex-start;

}

.start-month{

font-size:16px;

font-weight:600;

}

.start-type{

font-size:12px;

letter-spacing:2px;

color:#5865F2;

margin-top:2px;

}

#country-stats p {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s forwards;
}

#country-stats p:nth-child(1){animation-delay:0.1s;}
#country-stats p:nth-child(2){animation-delay:0.2s;}
#country-stats p:nth-child(3){animation-delay:0.3s;}
#country-stats p:nth-child(4){animation-delay:0.4s;}
#country-stats p:nth-child(5){animation-delay:0.5s;}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-card a{
color:#fff;
font-weight:700;
text-decoration:underline;
text-shadow:0 0 8px rgba(0,0,0,.9);
}

.download-card a:hover{
color:#caa65a;
text-shadow:0 0 12px rgba(202,166,90,.8);
}

.site-footer {
  background: #0d0d0d;
  color: #cfcfcf;
  padding: 30px 40px;
  border-top: 1px solid #222;
  position: relative;
  overflow: hidden;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left p {
  margin: 0;
  font-size: 14px;
}

/* ?? obrazek po prawej */
.footer-right {
  position: relative;
}

.footer-image {
  max-height: 120px;
  width: auto;
  display: block;

  /* efekt jak na screenie (lekko "wychodzi" z footera) */
  transform: translateY(-20px);

  /* opcjonalny glow */
  filter: drop-shadow(0 0 15px rgba(255, 180, 0, 0.3));
}

/* ?? mobile */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-image {
    margin-top: 15px;
    transform: none;
    max-height: 90px;
  }
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left {
  text-align: left;
}

.footer-right {
  position: relative;
}

.footer-image {
  max-height: 120px;
  transform: translateY(-20px);
  display: block;
}