:root{

--main:#9925fa;
--dark:#0f0f14;
--card:#181821;
--radius:0.9vh;

}

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

body{
background:var(--dark);
color:white;
overflow-x:hidden;
}


/* SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#0a0a0f;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(#9925fa,#c77dff);
border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{
background:#b15cff;
}


/* NAVBAR */

nav{

position:fixed;
width:100%;
height:70px;

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

padding:0 40px;

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

z-index:999;

}

.logo{

display:flex;
align-items:center;
gap:12px;

font-size:22px;
font-weight:600;

}

.logo img{
height:40px;
}

/* ANIMACJA NAZWY */

.logo-text{

background:linear-gradient(45deg,#9925fa,#d4a5ff,#9925fa);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:logoGradient 4s linear infinite;

}

@keyframes logoGradient{

0%{background-position:0%}
100%{background-position:200%}

}


nav ul{

display:flex;
gap:30px;

list-style:none;

}

nav a{

text-decoration:none;
color:white;
transition:0.3s;

}

nav a:hover{

color:var(--main);

}


/* HERO */

.hero{

height:100vh;

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

flex-direction:column;

text-align:center;

}

.hero h1{

font-size:60px;

background:linear-gradient(45deg,#9925fa,#c77dff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

margin-top:10px;
opacity:0.7;

}

.hero button{

margin-top:30px;

padding:14px 40px;

border:none;

background:var(--main);

color:white;

border-radius:var(--radius);

cursor:pointer;

font-size:16px;

transition:0.3s;

}

.hero button:hover{

transform:scale(1.05);

}


/* SEKCJE */

section{

padding:120px 10%;

}

.title{

font-size:36px;

margin-bottom:40px;

}


/* KARTY */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.card{

background:var(--card);

border-radius:var(--radius);

padding:20px;

transition:0.3s;

}

.card:hover{

transform:translateY(-5px);

}

.card img{

width:100%;

max-height:180px;

height:auto;

object-fit:contain;

display:block;

border-radius:var(--radius);

margin-bottom:10px;

}


/* ADMIN */
.admin-card {
    display: flex;
    flex-direction: column; /* Układa elementy pionowo (jeden pod drugim) */
    align-items: center;    /* Środkuje zdjęcie i tekst w poziomie */
    text-align: center;     /* Środkuje sam tekst */
    padding: 30px 20px;     /* Dodaje trochę oddechu wewnątrz karty */
}

.admin-card img {
    width: 100px !important;  /* Stała szerokość kwadratu */
    height: 100px !important; /* Stała wysokość kwadratu */
    
    border-radius: var(--radius) !important; /* Zaokrąglenie 0.9vh z Twoich zmiennych */
    
    object-fit: cover;        /* Wypełnia kwadrat zdjęciem bez rozciągania */
    margin-bottom: 15px;      /* Odstęp między zdjęciem a rangą */
    display: block;
}

.admin-card h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--main);       /* Opcjonalnie: ranga w kolorze fioletowym */
}

.admin-card p {
    font-weight: 600;         /* Nick będzie grubszy i wyraźniejszy */
    opacity: 0.9;
}


/* SKLEP */

.price{

color:var(--main);
font-weight:600;
margin-top:10px;

}

.buy{

margin-top:10px;

padding:8px 20px;

background:var(--main);

border:none;

border-radius:var(--radius);

cursor:pointer;

}


/* DISCORD */

.discord{

text-align:center;

}

.discord button{

margin-top:20px;

padding:14px 40px;

background:var(--main);

border:none;

border-radius:var(--radius);

font-size:18px;

cursor:pointer;

}


/* ANIMACJA SCROLL */

.fade{

opacity:0;
transform:translateY(40px);
transition:1s;

}

.fade.show{

opacity:1;
transform:translateY(0);

}

/* STYLIZACJA NOWEJ SEKCJI REGULAMINU */
.rules-container {
    text-align: center;
    background: var(--card);
    padding: 60px 40px;
    border-radius: var(--radius);
    max-width: 800px;
    margin: 0 auto;
}

.rules-container p {
    margin-bottom: 30px;
    line-height: 1.6;
    opacity: 0.8;
}

.rules-btn {
    padding: 15px 45px;
    background: var(--main);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.rules-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(153, 37, 250, 0.4);
}


/* FAQ */

.faq-container{
max-width:800px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:15px;
}

.faq-item{
background:var(--card);
border-radius:var(--radius);
overflow:hidden;
}

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

.faq-question:hover{
background:rgba(255,255,255,0.05);
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:0.4s;
padding:0 20px;
}

.faq-answer p{
padding:15px 0;
opacity:0.8;
}