:root {

--sky:#38bdf8;
--sky-dark:#0ea5e9;

--bg-dark:#0f172a;
--bg-darker:#070d18;

--card-bg:rgba(255,255,255,0.05);
--border:rgba(255,255,255,0.08);

--text:#f1f5f9;
--muted:#94a3b8;

}

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

body{

font-family:'Orbitron',sans-serif;
min-height:100vh;
color:var(--text);



background:url('../images/bg.png') center/cover no-repeat fixed;

overflow-x:hidden;

}

/* OVERLAY + GLOW */

body::before{

content:"";
position:fixed;
inset:0;

background:
radial-gradient(circle at 30% 20%, rgba(56,189,248,0.15), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(14,165,233,0.12), transparent 40%),
rgba(11,18,32,0.90);

z-index:-1;

}

/* HEADER */

header{

position:fixed;
top:0;
width:100%;

background:rgba(15,23,42,0.85);
backdrop-filter:blur(14px);

border-bottom:1px solid var(--border);

z-index:1000;

}

nav{

max-width:1400px;
margin:auto;

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

padding:1rem 5%;

}

.logo h1{

color:var(--sky);
font-size:1.8rem;
letter-spacing:2px;

}

/* NAV */

.nav-links{

list-style:none;
display:flex;
gap:1.2rem;

}

.nav-links a{

text-decoration:none;
color:var(--muted);
padding:0.5rem 1rem;
border-radius:8px;
transition:0.3s;

}

.nav-links a:hover,
.nav-links a.active{

color:var(--sky);

}

/* CONTAINER */

.container{

max-width:1400px;
margin:120px auto 60px;
padding:0 5%;

}

/* HERO */

.hero{

text-align:center;
padding:6rem 1rem 4rem;

}

.hero h2{

font-size:3rem;
color:var(--sky);

text-shadow:0 0 30px rgba(56,189,248,0.7);

margin-bottom:1.2rem;

}

.hero p{

max-width:700px;
margin:auto;

color:var(--muted);
line-height:1.6;

}

/* HERO STATS */

.hero-stats{

display:grid;
grid-template-columns:repeat(3,1fr);

gap:2rem;

margin-top:3rem;

max-width:900px;
margin-left:auto;
margin-right:auto;

}

.stat-box{

background:var(--card-bg);

border:1px solid var(--border);
border-top:3px solid var(--sky);

padding:2rem;

border-radius:16px;

transition:0.3s;

backdrop-filter:blur(20px);

}

.stat-box:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,0.5);

}

.stat-box span{

color:var(--sky);
font-size:1.2rem;

}

.stat-box small{

display:block;
margin-top:6px;

color:var(--muted);

}

/* FEATURES SECTION */

.features{

margin-top:6rem;
padding-top:4rem;

border-top:1px solid var(--border);

}

.section-title{

text-align:center;
font-size:2rem;
margin-bottom:3rem;

color:var(--sky);

}

/* GRID */

.grid{

display:grid;

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

gap:2rem;

}

/* CARDS */

.card{

background:var(--card-bg);

border:1px solid var(--border);

padding:2rem;

border-radius:16px;

transition:0.35s;

position:relative;

overflow:hidden;

backdrop-filter:blur(20px);

}

.card::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(56,189,248,0.2),
transparent
);

opacity:0;
transition:0.4s;

}

.card:hover{

transform:translateY(-8px) scale(1.03);

border-color:var(--sky);

box-shadow:0 20px 50px rgba(0,0,0,0.6);

}

.card:hover::after{

opacity:1;

}

.card h3{

color:var(--sky);
margin-bottom:0.5rem;

}

.card p{

font-size:0.95rem;
color:#b8c0cc;

}

/* BOTÃO */

.btn{

margin-top:2rem;

background:linear-gradient(135deg,var(--sky),var(--sky-dark));

border:none;

padding:1rem 2.3rem;

border-radius:12px;

font-weight:700;

cursor:pointer;

color:#0b1220;

transition:0.3s;

box-shadow:0 0 20px rgba(56,189,248,0.6);

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 0 35px rgba(56,189,248,0.9);

}

/* FOOTER */

footer{

text-align:center;

padding:2rem;

margin-top:5rem;

border-top:1px solid var(--border);

color:var(--muted);

}

/* RESPONSIVO */

@media(max-width:900px){

.hero-stats{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.hero-stats{

grid-template-columns:1fr;

}

nav{

flex-direction:column;
gap:1rem;

}

.nav-links{

flex-wrap:wrap;
justify-content:center;

}

.hero h2{

font-size:2.2rem;

}

}

.mouse-glow {

position: fixed;

width: 400px;
height: 400px;

pointer-events: none;

background: radial-gradient(
circle,
rgba(56,189,248,0.25),
transparent 60%
);

transform: translate(-50%, -50%);

z-index: -1;

transition: transform 0.08s linear;

}


/* ================================= LOGIN ================================ */
.login-area{
padding:10px 20px;
text-align:center;
}

.login-wrapper{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;
margin-top:40px;
}

.login-box{
background:rgba(20,25,40,0.8);
padding:80px;
border-radius:12px;
width:600px;
box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.login-box h3{
margin-bottom:20px;
font-family:Orbitron;
}

.login-box form{
display:flex;
flex-direction:column;
gap:15px;
}

.login-box input{
padding:12px;
border:none;
border-radius:6px;
background:#111827;
color:white;
}

.login-box input:focus{
outline:1px solid #3b82f6;
}

.login-box small{
display:block;
margin-top:15px;
opacity:0.7;
}

.form-panel{
display:none;
animation:fade 0.4s ease;
}

.form-panel.active{
display:block;
}

.switch-text{
margin-top:20px;
color:var(--muted);
}

.link-btn{
background:none;
border:none;
color:var(--sky);
cursor:pointer;
font-weight:600;
margin-left:5px;
}

.link-btn:hover{
text-decoration:underline;
}

@keyframes fade{

from{
opacity:0;
transform:translateY(10px);
}

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

}

/* ================= RANKING ================= */

.ranking-table{
overflow-x:auto;
margin-top:40px;
}

table{
width:100%;
border-collapse:collapse;
background:var(--card-bg);
border:1px solid var(--border);
border-radius:12px;
overflow:hidden;
}

thead{
background:rgba(56,189,248,0.1);
}

th, td{
padding:14px;
text-align:center;
border-bottom:1px solid var(--border);
}

th{
color:var(--sky);
font-weight:600;
}

tbody tr:hover{
background:rgba(255,255,255,0.03);
}

/* TABS DE RANKING */

.ranking-tabs{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:30px 0;
justify-content:center;
}

.ranking-tab{

background:rgba(255,255,255,0.05);
border:1px solid var(--border);

color:var(--muted);

padding:10px 18px;
border-radius:8px;

cursor:pointer;
transition:0.3s;

}

.ranking-tab:hover{
color:var(--sky);
border-color:var(--sky);
}

.ranking-tab.active{

background:rgba(56,189,248,0.15);
color:var(--sky);
border-color:var(--sky);

}

.ranking-content{
display:none;
}

.ranking-content.active{
display:block;
}

/* Hall Of Fame destaque */

#ranking-hall tbody tr:nth-child(1){
background:rgba(255,215,0,0.15);
}

#ranking-hall tbody tr:nth-child(2){
background:rgba(192,192,192,0.12);
}

#ranking-hall tbody tr:nth-child(3){
background:rgba(205,127,50,0.12);
}

/* Mais Abates */
#ranking-kills tbody tr:nth-child(1){
background:rgba(255,215,0,0.15);
}

#ranking-kills tbody tr:nth-child(2){
background:rgba(192,192,192,0.12);
}

#ranking-kills tbody tr:nth-child(3){
background:rgba(205,127,50,0.12);
}


/* Mais MVP */
#ranking-mvp tbody tr:nth-child(1){
background:rgba(255,215,0,0.15);
}

#ranking-mvp tbody tr:nth-child(2){
background:rgba(192,192,192,0.12);
}

#ranking-mvp tbody tr:nth-child(3){
background:rgba(205,127,50,0.12);
}


/* Maior Cura */
#ranking-heal tbody tr:nth-child(1){
background:rgba(255,215,0,0.15);
}

#ranking-heal tbody tr:nth-child(2){
background:rgba(192,192,192,0.12);
}

#ranking-heal tbody tr:nth-child(3){
background:rgba(205,127,50,0.12);
}


/* Dano em Cristal */
#ranking-crystal tbody tr:nth-child(1){
background:rgba(255,215,0,0.15);
}

#ranking-crystal tbody tr:nth-child(2){
background:rgba(192,192,192,0.12);
}

#ranking-crystal tbody tr:nth-child(3){
background:rgba(205,127,50,0.12);
}


/* Dano em Jogadores */
#ranking-damage tbody tr:nth-child(1){
background:rgba(255,215,0,0.15);
}

#ranking-damage tbody tr:nth-child(2){
background:rgba(192,192,192,0.12);
}

#ranking-damage tbody tr:nth-child(3){
background:rgba(205,127,50,0.12);
}

.ranking-content h3{

text-align:center;

margin-bottom:25px;

font-family:Orbitron;
font-size:22px;

color:var(--sky);

letter-spacing:1px;

}


iframe{
border-radius:12px;
box-shadow:0 0 30px rgba(0,0,0,0.6);
transition:0.3s;
}

iframe:hover{
transform:scale(1.03);
box-shadow:0 0 50px rgba(56,189,248,0.5);
}

.btn {
text-decoration: none;
display: inline-block;
}

.input-hint{
display:block;
margin-top:6px;
font-size:0.8rem;
color:var(--muted);
opacity:0.8;
}

/* ================= PAINEL ================= */

.panel-container{
display:flex;
min-height:100vh;
}

/* SIDEBAR */

.sidebar{

width:260px;

background:rgba(10,15,25,0.95);
backdrop-filter:blur(20px);

border-right:1px solid var(--border);

padding:30px 20px;

position:fixed;
height:100%;

}

.sidebar h2{
color:var(--sky);
margin-bottom:30px;
text-align:center;
}

.sidebar ul{
list-style:none;
display:flex;
flex-direction:column;
gap:10px;
}

.sidebar li{

padding:12px;
border-radius:8px;

cursor:pointer;

color:var(--muted);

transition:0.3s;

}

.sidebar li:hover{
background:rgba(56,189,248,0.1);
color:var(--sky);
}

.sidebar li.active{
background:rgba(56,189,248,0.2);
color:var(--sky);
}

/* CONTEÚDO */

.panel-content{

margin-left:260px;
padding:120px 40px;

width:100%;

}

.panel-content h2{
margin-bottom:20px;
color:var(--sky);
}

/* CARDS */

.card{

background:var(--card-bg);

border:1px solid var(--border);

padding:20px;

border-radius:14px;

margin-bottom:20px;

backdrop-filter:blur(20px);

transition:0.3s;

}

.card:hover{
transform:translateY(-4px);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}