*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Orbitron',sans-serif;
}

body{
background:url('/images/spirit.jpg') center/cover no-repeat fixed;
color:#eaffff;
overflow-x:hidden;
}

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

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;

display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;

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

z-index:999;
padding:0 40px;
}

.nav-logo{
justify-self:start;
color:#00fff7;
font-weight:800;
text-shadow:0 0 15px #00fff7;
}

.nav-links{
justify-self:center;
display:flex;
gap:30px;
}

.nav-links a{
color:#eaffff;
text-decoration:none;
transition:.3s;
}

.nav-links a:hover{
color:#00fff7;
text-shadow:0 0 10px #00fff7;
}

.hamburger{
justify-self:end;
display:none;
font-size:28px;
color:#00fff7;
cursor:pointer;
}

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

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

.hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.05),
rgba(0,0,0,0.45)
);
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
}

.hero h1{
font-size:3rem;
margin-bottom:30px;
color:#00fff7;
text-shadow:0 0 25px #00fff7;
}

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;

height:55px;
min-width:200px;

margin:10px;
padding:0 30px;

border-radius:40px;

font-weight:bold;
font-size:1rem;

text-decoration:none;

transition:.3s;
}

.btn-primary{
background:#00fff7;
color:#00252b;
box-shadow:0 0 20px #00fff7;
}

.btn-primary:hover{
transform:scale(1.1);
box-shadow:0 0 30px #00fff7,0 0 60px #00fff7;
}

.btn-discord{
background:#5865F2;
color:white;
box-shadow:0 0 20px #5865F2;
position:relative;
overflow:hidden;
}

.btn-discord::before{
content:"";
position:absolute;
top:0;
left:-75%;
width:50%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform:skewX(-25deg);
}

.btn-discord:hover::before{
animation:discordShine 1s;
}

@keyframes discordShine{
100%{left:125%;}
}

.btn-play{
background:#00ff88;
color:#002b1a;
box-shadow:0 0 20px #00ff88;
}

.btn-play:hover{
transform:scale(1.1);
box-shadow:0 0 30px #00ff88,0 0 60px #00ff88;
}

/* ================= SERVER STATUS ================= */

.server-status{
margin-top:20px;
font-size:.9rem;
text-shadow:0 0 10px rgba(0,255,247,.6);
}

.status-dot{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:#00ff88;
margin:0 5px;
box-shadow:0 0 10px #00ff88;
}

/* ================= ARK RULES STEIN ================= */

.ark-laws{
position:absolute;
bottom:40px;
left:40px;
width:300px;
z-index:5;
opacity:0.9;
}

.ark-laws img{
width:100%;
display:block;
}

/* ================= STEINE ================= */

.stone{
position:absolute;
width:90px;
height:45px;
background:transparent;
border:none;
cursor:pointer;
overflow:hidden;
}

.ernst{bottom:22px;left:22px;}
.lustig{bottom:22px;left:118px;}
.episch{bottom:22px;left:214px;}

.stone::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:120%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.6),
transparent
);
transition:left .4s ease;
}

.stone:hover::after{
left:120%;
}

/* ================= POPUP ================= */

.ark-rules-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

/* ================= RULE POPUP ================= */

.rules-content{

position:relative;
overflow:hidden;

background:linear-gradient(
180deg,
rgba(10,0,25,0.95),
rgba(0,0,0,0.95)
);

border:2px solid #00fff7;

padding:40px 50px;

border-radius:20px;

width:420px;

text-align:center;

box-shadow:
0 0 25px rgba(0,255,247,0.8),
0 0 60px rgba(0,255,247,0.3),
inset 0 0 25px rgba(0,255,247,0.15);

animation:popupTek .35s ease;

}
/* ================================
ARK TERMINAL START STATE
================================ */

.rules-content{

opacity:0;
transform:scale(0.85);

transition:
opacity .35s ease,
transform .35s ease;

}

/* Popup aktiv */

.rules-content.active{

opacity:1;
transform:scale(1);

}
/* ================================
TEK TERMINAL BOOT
================================ */

.rules-content::after{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
180deg,
transparent,
rgba(0,255,255,0.4),
transparent
);

opacity:0;

animation:tekBoot 1.2s ease;

pointer-events:none;

}

@keyframes tekBoot{

0%{
opacity:1;
transform:translateY(-100%);
}

100%{
opacity:0;
transform:translateY(100%);
}

}
.popup-close{

position:absolute;

top:15px;
right:18px;

width:36px;
height:36px;

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

background:rgba(0,255,247,0.15);

border-radius:50%;

border:1px solid rgba(0,255,247,0.7);

color:#00fff7;

font-size:16px;

cursor:pointer;

box-shadow:0 0 12px #00fff7;

transition:0.25s;

}

.popup-close:hover{

transform:scale(1.2);

background:rgba(0,255,247,0.35);

box-shadow:
0 0 20px #00fff7,
0 0 40px rgba(0,255,247,0.7);

}
/* Popup Animation */

@keyframes popupTek{

0%{
transform:scale(.7);
opacity:0;
}

100%{
transform:scale(1);
opacity:1;
}

}

/* Popup Scanner */

.tek-scan{

position:absolute;
top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.6),
transparent
);

animation:popupScan 1.6s ease;

pointer-events:none;

}

@keyframes popupScan{

0%{left:-100%;}
100%{left:100%;}

}

/* Hologram Linien */

.rules-content::before{

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

background:repeating-linear-gradient(
0deg,
rgba(0,255,255,0.05),
rgba(0,255,255,0.05) 2px,
transparent 2px,
transparent 6px
);

animation:holoLines 3s linear infinite;

pointer-events:none;

}

@keyframes holoLines{

0%{background-position:0 0;}
100%{background-position:0 40px;}

}

/* Text */

.rules-content h2{
color:#00fff7;
font-size:26px;
margin-bottom:20px;
text-shadow:0 0 15px #00fff7;
}

.rules-content p{
line-height:1.6;
font-size:15px;
}

/* Buttons */

.rules-buttons{
margin-top:25px;
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

.rules-content button,
.rules-link{

padding:10px 25px;

border-radius:30px;

background:#00fff7;

color:#002525;

text-decoration:none;

font-weight:bold;

border:none;

cursor:pointer;

box-shadow:0 0 15px #00fff7;

transition:.25s;

}

.rules-content button:hover,
.rules-link:hover{

transform:scale(1.1);

box-shadow:
0 0 25px #00fff7,
0 0 50px rgba(0,255,247,0.6);

}
/* ================= SECTIONS ================= */

.section{

padding:120px 40px;

text-align:center;

background:transparent;

}

.section h2{

color:#00fff7;
margin-bottom:50px;

font-size:2rem;

text-shadow:0 0 20px #00fff7;

}

/* ================= SERVER HIGHLIGHTS ================= */

.cards{

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

gap:40px;

}

.card{

background:rgba(0,20,30,0.55);

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

border-radius:20px;

padding:30px;

width:320px;

box-shadow:
0 0 20px rgba(0,255,247,.25),
0 0 40px rgba(0,255,247,.15);

transition:.3s;

}

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

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

.server-terminal{

padding:120px 40px;

text-align:center;

background:transparent;

}

.server-terminal h2{

color:#00fff7;

margin-bottom:50px;

text-shadow:0 0 20px #00fff7;

}

.terminal-grid{

display:grid;

grid-template-columns:repeat(4,minmax(220px,1fr));

gap:30px;

max-width:1200px;
margin:auto;

}

.terminal-box{

padding:25px;

background:rgba(0,20,30,0.55);

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

border-radius:20px;

text-align:center;

box-shadow:
0 0 20px rgba(0,255,247,.25),
0 0 40px rgba(0,255,247,.15);

transition:.3s;

}

.terminal-box:hover{
transform:translateY(-6px);
}

/* ================= STATUS ================= */

.status{
font-weight:bold;
}

.status.online{

color:#00ff88;

text-shadow:0 0 10px #00ff88;

}

/* ================= PLAYER BAR ================= */

.player-bar{

width:100%;
height:8px;

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

border-radius:10px;

margin-top:10px;

overflow:hidden;

}

.bar-fill{

height:100%;
width:0%;

background:linear-gradient(
90deg,
#00ff88,
#00fff7
);

box-shadow:0 0 10px #00ff88;

transition:width .5s ease;

}

/* ================= COMING SOON ================= */

.coming-soon{

color:#ffaa00;

font-weight:bold;

margin-top:10px;

text-shadow:0 0 10px #ffaa00;

}

.soon-bar{

width:100%;
height:8px;

background:rgba(255,170,0,.2);

border-radius:10px;

margin-top:10px;

box-shadow:0 0 10px rgba(255,170,0,.5);

}
.rules-content{

position:relative;

background:linear-gradient(
180deg,
rgba(10,0,25,0.95),
rgba(0,0,0,0.95)
);

border:2px solid #00fff7;

padding:50px 60px;

border-radius:20px;

width:90%;
max-width:600px;

text-align:center;

box-shadow:
0 0 25px rgba(0,255,247,0.8),
0 0 60px rgba(0,255,247,0.3),
inset 0 0 25px rgba(0,255,247,0.15);

animation:popupTek 0.35s ease;

backdrop-filter:blur(6px);

}
@keyframes popupTek{

0%{
transform:scale(.7);
opacity:0;
filter:blur(5px);
}

100%{
transform:scale(1);
opacity:1;
filter:blur(0);
}

}
.rules-content h2{

color:#00fff7;

font-size:26px;

margin-bottom:20px;

text-shadow:
0 0 10px #00fff7,
0 0 25px rgba(0,255,247,0.6);

letter-spacing:1px;

}
.rules-content p{

color:#eaffff;

line-height:1.6;

font-size:15px;

text-shadow:0 0 6px rgba(0,255,255,0.4);

}
.rules-content button{

margin-top:25px;

padding:10px 30px;

border:none;

border-radius:30px;

background:#00fff7;

color:#002525;

font-weight:bold;

cursor:pointer;

box-shadow:0 0 15px #00fff7;

transition:0.25s;

}

.rules-content button:hover{

transform:scale(1.1);

box-shadow:
0 0 25px #00fff7,
0 0 50px rgba(0,255,247,0.5);

}
.tek-scan{

position:absolute;

top:0;
left:-120%;

width:120%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.6),
transparent
);

animation:tekScan 2.5s ease;

pointer-events:none;

}

@keyframes tekScan{

0%{
transform:translateX(-100%);
}

100%{
transform:translateX(100%);
}

}
.rules-content::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:repeating-linear-gradient(

0deg,
rgba(0,255,255,0.05),
rgba(0,255,255,0.05) 2px,
transparent 2px,
transparent 6px

);

animation:holoLines 3s linear infinite;

pointer-events:none;

}

@keyframes holoLines{

0%{
background-position:0 0;
}

100%{
background-position:0 40px;
}

}
.rules-buttons{

margin-top:25px;

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}
.rules-link{

padding:10px 25px;

border-radius:30px;

background:#00fff7;

color:#002525;

text-decoration:none;

font-weight:bold;

box-shadow:0 0 15px #00fff7;

transition:.25s;

}

.rules-link:hover{

transform:scale(1.1);

box-shadow:
0 0 25px #00fff7,
0 0 50px rgba(0,255,247,0.6);

}
/* ===============================
TEK GLOBAL SCANNER
=============================== */

#tekScanner{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.5),
rgba(0,255,255,0.9),
rgba(0,255,255,0.5),
transparent
);

transform:translateX(-100%);
pointer-events:none;

z-index:9998;

}

/* Animation */

.scan-active{
animation:tekScan 1.4s ease forwards;
}

@keyframes tekScan{

0%{
transform:translateX(-100%);
}

100%{
transform:translateX(100%);
}
/* ===============================
TEK TERMINAL HEADER
=============================== */

.tek-header{

font-size:12px;

color:#00fff7;

margin-bottom:15px;

text-align:center;

letter-spacing:1px;

opacity:0.8;

}

.tek-line{

margin:2px 0;

text-shadow:
0 0 6px #00fff7,
0 0 12px rgba(0,255,255,0.5);

}

/* Access Granted */

.tek-line.access{

color:#00ff88;

text-shadow:
0 0 6px #00ff88,
0 0 12px rgba(0,255,136,0.6);

}