body{
margin:0;
font-family:Arial;
background:#03050a;
color:white;
overflow-x:hidden;
}

/* 🎨 BARVY */
:root{
--main:#eab308;
--main2:#b45309;
--accent:#facc15;
--dark:#140f08;
}

/* INTRO */
.intro{
position:fixed;
width:100%;
height:100%;
background:black;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:999;
transition:1s;
}

/* 🔥 GRADIENT LOGO (INTRO + HERO) */
.intro h1,
.hero h1{
font-size:6vw;
background:linear-gradient(
270deg,
#facc15,
#eab308,
#f59e0b,
#b45309
);
background-size:400% 400%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:gradientMove 6s ease infinite;
text-shadow:
0 0 10px rgba(250,204,21,0.6),
0 0 20px rgba(234,179,8,0.5),
0 0 40px rgba(180,83,9,0.4);
}

/* animace gradientu */
@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* HERO */
.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
background:url("banner.jpg") center/cover no-repeat;
}

.hero::after{
content:"";
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
}

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

/* 🎮 BUTTON */
.join{
margin-top:20px;
padding:16px 50px;
background:linear-gradient(180deg, var(--accent), var(--main2));
color:#1a1208;
border:none;
border-radius:10px;
font-weight:bold;
cursor:pointer;
transition:0.2s;
box-shadow:
0 0 10px var(--main),
0 0 20px var(--main2),
0 0 40px var(--main2);
}

.join:hover{
transform:scale(1.1);
box-shadow:
0 0 20px var(--main),
0 0 40px var(--main2),
0 0 80px var(--main2);
}

/* INFO */
.info{
display:flex;
justify-content:center;
gap:40px;
padding:20px;
background:#020617;
}

/* SECTIONS */
.section{
padding:100px 20px;
text-align:center;
}

/* CARDS */
.grid{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.card{
background:var(--dark);
padding:30px;
border-radius:12px;
width:180px;
transition:0.3s;
border:1px solid var(--main2);
box-shadow:0 0 10px rgba(255,140,0,0.3);
}

.card:hover{
transform:translateY(-5px);
box-shadow:
0 0 20px var(--main2),
0 0 40px var(--main2);
}

/* ROLE COLORS */
.majitel{
color:#a30000;
font-weight:bold;
text-shadow:0 0 10px #a30000;
}

.admin{
color:#ff2222;
font-weight:bold;
text-shadow:0 0 10px #ff2222;
}

.helper{
color:#007e00;
font-weight:bold;
text-shadow:0 0 10px #007e00;
}

/* ===== A-TEAM ZÁKLAD ===== */
#team{
text-align:center;
}

.team-role{
margin-bottom:40px;
}

/* nadpisy */
.team-role h3{
text-align:center;
font-size:22px;
margin-bottom:15px;
}

/* layout */
.team-row{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

/* hráč */
.player{
text-align:center;
}

/* hlava */
.player img{
border-radius:10px;
width:90px;
height:90px;
}

/* TEAM */
.team-grid{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin-top:30px;
}

.player{
background:var(--dark);
padding:20px;
border-radius:12px;
width:150px;
transition:0.3s;
border:1px solid var(--main2);
box-shadow:0 0 10px rgba(255,140,0,0.3);
}

.player:hover{
transform:translateY(-5px);
box-shadow:
0 0 20px var(--main2),
0 0 40px var(--main2);
}

.player img{
width:80px;
height:80px;
image-rendering:pixelated;
margin-bottom:10px;
}

/* REVEAL */
.reveal{
opacity:0;
transform:translateY(80px);
transition:1s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* FOOTER */
footer{
padding:30px;
text-align:center;
background:#060b14;
}


/* RULES */
.rules-box{
background:var(--dark);
padding:30px;
border-radius:12px;
max-width:400px;
margin:auto;
border:1px solid var(--main2);
box-shadow:0 0 15px rgba(255,140,0,0.4);
}

/* SHOP */
.shop-btn{
display:inline-block;
margin-top:20px;
padding:15px 40px;
background:linear-gradient(180deg, var(--accent), var(--main2));
color:#1a1208;
font-weight:bold;
border-radius:10px;
text-decoration:none;
transition:0.2s;
box-shadow:
0 0 10px var(--main),
0 0 20px var(--main2),
0 0 40px var(--main2);
}

.shop-btn:hover{
transform:scale(1.1);
box-shadow:
0 0 20px var(--main),
0 0 40px var(--main2),
0 0 80px var(--main2);
}

/* COMMUNITY */
.community-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
flex-wrap:wrap;
}

/* DISCORD */
.discord-link{
padding:15px 35px;
background:#5865F2;
color:white;
border-radius:10px;
font-weight:bold;
text-decoration:none;
transition:0.3s;
box-shadow:
0 0 10px #5865F2,
0 0 25px #5865F2,
0 0 50px #5865F2;
}

.discord-link:hover{
transform:scale(1.1);
box-shadow:
0 0 20px #5865F2,
0 0 40px #5865F2,
0 0 80px #5865F2;
}

/* 🔘 READ MORE BUTTON (Minecraft Neon Style) */
.read-more-btn{
margin-top:20px;
padding:10px 30px;

background:linear-gradient(180deg, var(--accent), var(--main2));
color:#1a1208;

border:none;
border-radius:8px;

font-weight:bold;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;

cursor:pointer;
transition:0.25s;

/* glow efekt */
box-shadow:
0 0 10px var(--main),
0 0 20px var(--main2),
0 0 40px rgba(180,83,9,0.6);
}

/* hover efekt */
.read-more-btn:hover{
transform:scale(1.08);
box-shadow:
0 0 20px var(--main),
0 0 40px var(--main2),
0 0 80px var(--main2);
}

/* klik efekt (Minecraft feel) */
.read-more-btn:active{
transform:scale(0.95);
box-shadow:
0 0 10px var(--main),
0 0 20px var(--main2);
}
/* zobraz jen první 4 pravidla */
.rules-content p:nth-child(n+5){
display:none;
}

/* po kliknutí zobraz vše */
.rules-content.expanded p{
display:block;
}

/* mezery mezi pravidly */
.rules-content p{
margin:6px 0;
}