/* ==============================
   MOBILE & TABLET LAYOUT
   ============================== */

@media (max-width:1024px){

/* ==============================
   NAVIGATION
   ============================== */

.hamburger{
display:block;
cursor:pointer;
}

.nav-links{

position:absolute;
top:70px;
right:20px;

background:rgba(0,0,0,0.92);
backdrop-filter:blur(10px);

border-radius:12px;

padding:15px 25px;

display:none;
flex-direction:column;

z-index:1000;

}

.nav-links.active{
display:flex;
}

.nav-links a{
margin:12px 0;
font-size:1.1rem;
}

.rules-content{

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

padding:35px 30px;

}
/* ==============================
   HERO SECTION
   ============================== */

.hero{

height:auto;
padding:140px 20px 80px;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;

}

.hero h1{
font-size:1.8rem;
line-height:1.3;
}


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

.btn{

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

width:90%;
max-width:320px;
height:55px;

margin:15px auto;

font-size:1rem;
gap:8px;

}


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

.server-status{

margin-top:10px;

font-size:0.9rem;

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

}


/* ==============================
   SPIRIT OF ARK REGELSTEIN
   ============================== */

.ark-laws{

position:relative;

margin:100px auto 40px auto;

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

opacity:0.9;

overflow:hidden;

display:block;

/* kleine Verschiebung nach links */
transform:translateX(-10%);

}

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

/* Scanner Effekt */

.ark-laws::after{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

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

animation:arkScan 6s infinite;

pointer-events:none;

}

@keyframes arkScan{

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

}


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

.stone{

position:absolute;

width:30%;
height:12%;

bottom:7%;

background:transparent;
border:none;

cursor:pointer;

-webkit-tap-highlight-color:transparent;
outline:none;

transition:
transform .12s ease,
filter .12s ease,
box-shadow .12s ease;

}

.ernst{ left:6%; }
.lustig{ left:35%; }
.episch{ left:65%; }

.stone:active{

transform:scale(.9);

filter:brightness(1.2);

box-shadow:0 0 12px rgba(255,200,80,.8);

}


/* ==============================
   CLUSTER TERMINAL (MAPS)
   ============================== */

.server-terminal{
padding:80px 20px;
}

.server-terminal .terminal-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.server-terminal .terminal-box{

width:100%;
max-width:420px;

margin:auto;

}


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

.cards{

flex-direction:column;

align-items:center;

gap:25px;

}

.card{

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

}


/* ==============================
   SERVER FEATURES / PANELS
   ============================== */

.panel-grid{

grid-template-columns:1fr;

gap:20px;

}

}