<STYLE>
body{
    margin:0;
    background:#050505;
    color:#fff;
    font-family:'Marcellus',serif;
    overflow-x:hidden;
}

.bg-overlay{
    position:fixed;
    inset:0;

    background:
    radial-gradient(
    circle at top,
    rgba(241,196,15,.05),
    transparent 35%),

    linear-gradient(
    to bottom,
    #000000,
    #050505 35%,
    #020202 70%,
    #000000 100%);

    z-index:-1;
}

.topbar{
    position:fixed;
    top:0;
    width:100%;
    z-index:999;

    backdrop-filter:blur(20px);

    background:
    linear-gradient(to bottom,
    rgba(0,0,0,.88),
    rgba(0,0,0,.35));

    border-bottom:
    1px solid rgba(241,196,15,.08);

    box-shadow:
    0 10px 35px rgba(0,0,0,.5);
}

.topbar-inner{
    max-width:1400px;
    margin:auto;

    height:95px;

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

    gap:60px;
}

.topbar a{
    position:relative;

    color:#ddd;
    text-decoration:none;
    font-size:12px;
    letter-spacing:2px;
    margin:0 18px;

    transition:.35s;
}

.topbar a::after{
    content:"";
    position:absolute;

    bottom:-8px;
    left:0;

    width:0%;
    height:1px;

    background:#f1c40f;

    transition:.35s;
}

.topbar a:hover{
    color:#f1c40f;
}

.topbar a:hover::after{
    width:100%;
}

.logo-area img{
    width:340px;

    filter:
    drop-shadow(0 0 25px rgba(241,196,15,.35))
    drop-shadow(0 0 60px rgba(241,196,15,.18));

    transition:.4s;
}

.logo-area img:hover{
    transform:scale(1.03);

    filter:
    drop-shadow(0 0 35px rgba(241,196,15,.5))
    drop-shadow(0 0 80px rgba(241,196,15,.25));
}

.hero{
    position:relative;

    min-height:100vh;

    overflow:hidden;

    padding-top:120px;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(241,196,15,.12),
    transparent 45%);

    animation:pulseHero 5s ease-in-out infinite;

    z-index:2;
}

@keyframes pulseHero{
    0%{opacity:.4;}
    50%{opacity:1;}
    100%{opacity:.4;}
}
.hero-bg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    brightness(.55)
    contrast(1.15)
    saturate(1.12)
    sharpness(1.1);

    transform:scale(1.02);

    image-rendering:auto;
}

.hero-shadow{
    position:absolute;
    inset:0;

    background:
    linear-gradient(to top,
    #050505 5%,
    transparent 40%),

    linear-gradient(to right,
    rgba(0,0,0,.88),
    rgba(0,0,0,.2));
}

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

    max-width:1400px;
    margin:auto;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;

    padding-left:120px;
transform:translateY(-99px);
    animation:fadeUp 1.2s ease;
}


.hero-logo{
    width:100%;

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

    margin-bottom:50px;

    position:relative;
    z-index:20;
	transform:translateY(50px);
}

.hero-logo img{
    max-width:320px;
    height:auto;

    filter:
    drop-shadow(0 0 20px rgba(255,215,120,.35))
    drop-shadow(0 0 40px rgba(255,180,0,.15));
}

.hero-info{
    max-width:650px;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    text-align:left;
}

.hero-info p{
    font-size:20px;
    line-height:1.8;
    color:#d7d7d7;

    margin-bottom:35px;
}

.hero-badge{
    width:max-content;

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(0,0,0,.45);

    border:
    1px solid rgba(241,196,15,.35);

    color:#ffd95e;

    letter-spacing:2px;
    font-size:11px;

    backdrop-filter:blur(10px);
}

.hero h1{
    margin:0 0 25px;

    font-size:110px;
    line-height:.92;

    text-align:left;

    color:#f5e6b7;

    text-shadow:
    0 2px 0 #000,
    0 0 10px rgba(0,0,0,.85),
    0 0 25px rgba(0,0,0,.95),
    4px 4px 15px rgba(0,0,0,.9);
}

.hero p{
    max-width:620px;

    font-size:20px;
    line-height:1.9;

    color:#cfcfcf;

    font-weight:400;

    text-shadow:
    0 0 12px rgba(0,0,0,.6);
}

.btn-play{
    height:72px;
    padding:0 42px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #a66b00,
    #f1c40f,
    #ffdf70);

    color:#111;
    text-decoration:none;

    font-size:15px;
    font-weight:700;
    letter-spacing:1px;

    border:
    1px solid rgba(255,215,100,.45);

    box-shadow:
    0 10px 30px rgba(241,196,15,.28),
    inset 0 1px 0 rgba(255,255,255,.35);

    transition:0.15s ease;

    position:relative;
    overflow:hidden;
}

/* Faz o brilho do logo não atrapalhar o mouse */
.hero-logo, .hero-logo::before, .hero-logo::after {
    pointer-events: none; /* O mouse "atravessa" o brilho e acerta o botão */
}

/* Garante que os botões estejam sempre na frente */
.hero-buttons {
    position: relative;
    z-index: 999; 
}

.btn-play, .btn-discord {
    transition: 0.15s ease-in-out !important; /* Resposta rápida */
}

.btn-play::before{
    content:"";

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

    width:80%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transition:.7s;
}

.btn-play:hover::before{
    left:130%;
}

.btn-play:hover{
    transform:
    translateY(-5px)
    scale(1.03);

    box-shadow:
    0 15px 45px rgba(241,196,15,.45);
}

.btn-play i{
    font-size:14px;
}

.hero-buttons{
    display:flex;
    gap:20px;

    margin-top:45px;
}

@media(max-width:900px){

    .hero-content{
        align-items:center;
        text-align:center;

        padding-left:20px;
        padding-right:20px;
    }

    .hero h1{
        font-size:58px;
        text-align:center;
    }

    .hero p{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }
}
.btn-play:hover{
    transform:
    translateY(-6px)
    scale(1.03);
}

.btn-discord {
    height: 72px; /* Igual ao play */
    padding: 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 18px;
    
    /* Cor VERDE Elite (Gradiente) */
    background: linear-gradient(135deg, #064e3b, #10b981, #34d399);
    
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    
    border: 1px solid rgba(147, 112, 219, .45);
    
    box-shadow: 
        0 10px 30px rgba(75, 0, 130, .28), 
        inset 0 1px 0 rgba(255, 255, 255, .35);
    
    transition: 0.15s ease-in-out !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Efeito de Brilho (Shimmer) para o Discord */
.btn-discord::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transition: .7s;
}

/* Animação do Brilho no Hover */
.btn-discord:hover::before {
    left: 130%;
}

/* Efeito de Hover (Subir e Escalar) */
.btn-discord:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 15px 45px rgba(138, 43, 226, .45);
    filter: brightness(1.1);
}

/* Efeito de Clique (Pressionar) */
.btn-discord:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 5px 15px rgba(75, 0, 130, .4);
}

.status-wrapper{
    max-width:1400px;
    margin:auto;

    margin-top:-1px;

    position:relative;
    z-index:20;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.status-card{
    padding:40px;

    border-radius:24px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.015));

    backdrop-filter:blur(20px);

    border:
    1px solid rgba(255,255,255,.12);
}

.status-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(241,196,15,.3);
}

.status-card i{
    font-size:34px;
    color:#f1c40f;
}

.status-card strong{
    display:block;
    margin-top:15px;

    font-size:42px;

    font-family:'Cinzel Decorative';
}

.status-card span{
    color:#888;
    letter-spacing:2px;
    font-size:11px;
}

.section-box{
    max-width:1400px;
    margin:90px auto;
}

.section-title{
    font-size:42px;
    font-family:'Cinzel Decorative';

    margin-bottom:40px;

    text-align:center;

    color:#fff;
}

.ranking-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.ranking-card{
    border-radius:24px;

    padding:30px;

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

    border:
    1px solid rgba(255,255,255,.05);

    backdrop-filter:blur(14px);
}

.ranking-header{
    color:#f1c40f;
    font-size:22px;
    margin-bottom:25px;
}

.rank-pos{
    width:52px;
    height:52px;

    border-radius:16px;

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

    font-size:24px;

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

    border:
    1px solid rgba(255,255,255,.08);

    margin-right:18px;

    box-shadow:
    inset 0 0 12px rgba(255,255,255,.03);
}

.player-row{
    display:flex;
    align-items:center;

    padding:18px;

    border-radius:20px;

    margin-bottom:16px;

    transition:.35s;
}

.player-row p{
    flex:1;

    margin:0;

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

    color:#fff;
}

.player-row b{
    font-size:18px;

    color:#f1c40f;
}

.top-1{
    background:
    linear-gradient(
    90deg,
    rgba(241,196,15,.22),
    rgba(241,196,15,.04));

    border:
    1px solid rgba(241,196,15,.35);

    box-shadow:
    0 0 30px rgba(241,196,15,.12);
}

.top-2{
    background:
    linear-gradient(
    90deg,
    rgba(200,200,200,.16),
    rgba(255,255,255,.03));

    border:
    1px solid rgba(255,255,255,.12);
}

.top-3{
    background:
    linear-gradient(
    90deg,
    rgba(205,127,50,.18),
    rgba(205,127,50,.03));

    border:
    1px solid rgba(205,127,50,.25);
}

.player-row:hover{
    transform:
    translateY(-5px)
    scale(1.01);
}


.player-row:hover{
    transform:translateX(8px);

    background:
    rgba(241,196,15,.06);

    border:
    1px solid rgba(241,196,15,.15);
}

.player-row:first-child{
    background:
    linear-gradient(
    90deg,
    rgba(241,196,15,.14),
    transparent);

    border:
    1px solid rgba(241,196,15,.2);
}

.player-row p{
    flex:1;
    margin-left:15px;
}

.boss-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.boss{
    position:relative;

    padding:30px 25px;

    border-radius:22px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.015));

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(12px);

    transition:.35s;

    overflow:hidden;
}

.boss span{
    display:block;

    font-size:20px;
    font-weight:700;

    color:#ffffff;

    letter-spacing:1px;

    margin-bottom:18px;
}

.boss b{
    display:inline-flex;

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

    padding:8px 18px;

    border-radius:50px;

    background:
    rgba(46,204,113,.12);

    border:
    1px solid rgba(46,204,113,.35);

    color:#2ecc71;

    font-size:13px;
    font-weight:700;
    letter-spacing:2px;

    text-shadow:
    0 0 12px rgba(46,204,113,.55);

    box-shadow:
    0 0 18px rgba(46,204,113,.15);
}

.alive{
    box-shadow:
    0 0 25px rgba(46,204,113,.15);
}

.dead{
    opacity:.55;
}

.wait{
    animation:bossPulse 2s infinite;
}

@keyframes bossPulse{

    0%{
        box-shadow:0 0 10px rgba(241,196,15,.1);
    }

    50%{
        box-shadow:0 0 30px rgba(241,196,15,.35);
    }

    100%{
        box-shadow:0 0 10px rgba(241,196,15,.1);
    }
}

.news-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.news-card{
    overflow:hidden;

    border-radius:24px;

    background:
    linear-gradient(
    to bottom,
    rgba(20,20,20,.95),
    rgba(5,5,5,.98));

    border:
    1px solid rgba(241,196,15,.12);

    box-shadow:
    0 15px 40px rgba(0,0,0,.45);

    transition:.35s;

    position:relative;
}

.news-card:hover{
    transform:translateY(-8px);

    border-color:
    rgba(241,196,15,.35);

    box-shadow:
    0 25px 60px rgba(0,0,0,.65),
    0 0 25px rgba(241,196,15,.08);
}

.news-card img{
    width:100%;
    height:260px;
    object-fit:cover;

    display:block;

    transition:1s;
}

.news-card:hover img{
    transform:scale(1.04);
}

.news-info{
    padding:28px;
}

.news-info h3{
    color:#f5e6b7;
    font-size:28px;
    margin:0 0 12px;

    font-family:'Cinzel Decorative';
}

.news-info p{
    color:#9a9a9a;
    line-height:1.7;
    margin:0;
}

.news-info{
    padding:25px;
}

.footer{
    position:relative;

    border-top:
    1px solid rgba(255,255,255,.05);

    background:
    linear-gradient(to top,
    rgba(255,255,255,.02),
    transparent);

    padding:80px;

    text-align:center;

    color:#666;

    letter-spacing:2px;
}

@media(max-width:1100px){

    .ranking-grid,
    .boss-grid,
    .status-wrapper{
        grid-template-columns:1fr 1fr;
    }

    .hero h1{
        font-size:58px;
    }
}

@media(max-width:700px){

    .ranking-grid,
    .boss-grid,
    .status-wrapper,
    .news-grid{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:42px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .topbar-inner{
        flex-direction:column;
        height:auto;
        padding:20px;
    }
}

.particles-wrap{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.particles-wrap span{
    position:absolute;

    width:4px;
    height:4px;

    background:#f1c40f;

    border-radius:50%;

    box-shadow:
    0 0 10px rgba(241,196,15,.8);

    animation:floatParticle 10s linear infinite;
}

.particles-wrap span:nth-child(1){
    left:10%;
    animation-duration:8s;
}

.particles-wrap span:nth-child(2){
    left:30%;
    animation-duration:12s;
}

.particles-wrap span:nth-child(3){
    left:50%;
    animation-duration:9s;
}

.particles-wrap span:nth-child(4){
    left:70%;
    animation-duration:14s;
}

.particles-wrap span:nth-child(5){
    left:90%;
    animation-duration:11s;
}

@keyframes floatParticle{
    0%{
        transform:translateY(100vh);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:translateY(-100px);
        opacity:0;
    }
}
.hero-logo {
    position: relative;
    z-index: 20;
    margin-bottom: 45px;
    
    /* Centralização aplicada ao PAI */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important; 
    animation:logoEntrance 1.8s ease;
}

.hero-logo::before{
    content:"";

    position:absolute;
    top:50%;
    left:50%;

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

    width:900px;
    height:900px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(241,196,15,.12),
    rgba(241,196,15,.05),
    transparent 70%);

    filter:blur(40px);

    animation:logoAura 6s ease-in-out infinite;

    z-index:1;
}

.hero-logo::after{
    content:"";

    position:absolute;
    inset:-25px;

    border-radius:50%;

    background:
    conic-gradient(
    from 0deg,
    transparent,
    rgba(241,196,15,.25),
    transparent,
    rgba(255,255,255,.18),
    transparent);

    filter:blur(18px);

    animation:rotateAura 12s linear infinite;

    opacity:.8;

    z-index:2;
}
.hero-logo img {
    position: relative;
    z-index: 5;
    width: 550px !important; 
    max-width: 95vw !important; 
    height: auto !important;
    
    /* REMOVA o display: flex e justify-content daqui */
    
    filter: drop-shadow(0 0 20px rgba(241,196,15,.4)) 
            drop-shadow(0 0 40px rgba(241,196,15,.2));
    transition: all 0.5s ease;
    animation: logoFloat 5s ease-in-out infinite;
}

.hero-logo img:hover{
    transform:
    scale(1.03);

    filter:
    brightness(1.15)
    contrast(1.12)
    saturate(1.15)
    drop-shadow(0 0 25px rgba(255,220,120,.75))
    drop-shadow(0 0 60px rgba(241,196,15,.45))
    drop-shadow(0 0 120px rgba(241,196,15,.3));
}

.hero-logo-glow{
    position:absolute;

    top:50%;
    left:50%;

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

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(241,196,15,.22),
    rgba(241,196,15,.08),
    transparent 72%);

    filter:blur(10px);

    animation:
    pulseLogo 4s ease-in-out infinite,
    rotateGlow 18s linear infinite;

    z-index:3;
}

/* ANIMAÇÕES */

@keyframes logoEntrance{

    0%{
        opacity:0;
        transform:
        translateY(40px)
        scale(.9);
    }

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

@keyframes logoAura{

    0%{
        transform:
        translate(-50%,-50%)
        scale(.92);
        opacity:.5;
    }

    50%{
        transform:
        translate(-50%,-50%)
        scale(1.08);
        opacity:1;
    }

    100%{
        transform:
        translate(-50%,-50%)
        scale(.92);
        opacity:.5;
    }
}

@keyframes rotateAura{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}

@keyframes rotateGlow{

    0%{
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }

    100%{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }
}

@keyframes logoPulse{

    0%{
        filter:
        brightness(1.05)
        drop-shadow(0 0 20px rgba(241,196,15,.25));
    }

    50%{
        filter:
        brightness(1.15)
        drop-shadow(0 0 45px rgba(241,196,15,.5));
    }

    100%{
        filter:
        brightness(1.05)
        drop-shadow(0 0 20px rgba(241,196,15,.25));
    }
}

@keyframes pulseLogo{

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

    50%{
        transform:scale(1.08);
        opacity:1;
    }

    100%{
        transform:scale(.95);
        opacity:.5;
    }
}

@keyframes logoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}
.hero::after{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.95),
    transparent 30%),

    radial-gradient(
    circle at center,
    rgba(241,196,15,.08),
    transparent 50%);

    z-index:1;
}
.top3-hero{
    display:flex;
    justify-content:center;
    gap:25px;
}

.top3-card{
    width:260px;
    padding:30px;
    border-radius:22px;
    text-align:center;

    background:rgba(255,255,255,.03);
    border:1px solid rgba(241,196,15,.15);

    backdrop-filter:blur(12px);

    transition:.3s;
}

.top3-card:hover{
    transform:translateY(-10px);
    border-color:rgba(241,196,15,.5);
}

.top3-card .medal{
    font-size:34px;
    margin-bottom:10px;
}

.top3-card .name{
    font-size:20px;
    font-weight:bold;
    color:#fff;
}

.top3-card .value{
    margin-top:8px;
    color:#f1c40f;
    letter-spacing:1px;
}

/* destaque ouro */
.rank-1{
    box-shadow:0 0 35px rgba(241,196,15,.25);
}

.status-card strong {
    color: #2ecc71; /* Verde Neon para o status Online */
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
}
/* CONTAINER DOS QUADRADOS MENORES */
.status-mini-grid {
    max-width: 1200px;
    margin: 20px auto 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas iguais */
    gap: 15px;
    padding: 0 20px;
}

/* O CARD QUADRADO MENOR (IGUAL AOS GRANDES, MAS COMPACTO) */
.status-card-mini {
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.05);
    text-align: center;
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.status-card-mini:hover {
    transform: translateY(-5px);
    border-color: rgba(241,196,15,.2);
    background: rgba(241,196,15,.02);
}

.status-card-mini i {
    font-size: 20px; /* Ícone menor */
    color: #f1c40f;
    margin-bottom: 8px;
}

.status-card-mini strong {
    display: block;
    font-size: 18px; /* Texto principal menor */
    font-family: 'Marcellus', serif;
    color: #fff;
    text-transform: uppercase;
}

.status-card-mini span {
    color: #666;
    letter-spacing: 1px;
    font-size: 9px;
    text-transform: uppercase;
}

/* Responsivo para celular */
@media(max-width: 800px) {
    .status-mini-grid {
        grid-template-columns: 1fr 1fr; /* vira 2x2 no celular */
    }
}
/* FOOTER PREMIUM L2 MythoS */
.footer {
    position: relative;
    background: linear-gradient(to top, #000 0%, rgba(10, 10, 10, 0.9) 100%);
    border-top: 1px solid rgba(241, 196, 15, 0.1);
    padding: 80px 20px 40px;
    margin-top: 100px;
    overflow: hidden;
}

/* Brilho de fundo no rodapé */
.footer::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.footer-brand img {
    width: 220px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(241, 196, 15, 0.2));
}

.footer-brand p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.footer-title {
    color: #f1c40f;
    font-family: 'Cinzel Decorative', serif;
    font-size: 18px;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
    transition: .3s;
}

.footer-links a:hover {
    color: #f1c40f;
    padding-left: 5px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: .3s;
}

.footer-socials a:hover {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.4);
    color: #f1c40f;
    transform: translateY(-5px);
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #444;
    font-size: 12px;
    letter-spacing: 1px;
}

.footer-bottom b {
    color: #666;
}

@media(max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* Container da Grid */
.social-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
    padding: 0 10px;
}

/* Estilo do Card Social */
.social-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Ícones dos Cards */
.social-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: 0.3s;
}

/* Cores específicas */
.social-icon.fb {
    background: rgba(24, 119, 242, 0.15);
    color: #1877f2;
    border: 1px solid rgba(24, 119, 242, 0.3);
}

.social-icon.support {
    background: rgba(0, 255, 200, 0.1);
    color: #00ffc8;
    border: 1px solid rgba(0, 255, 200, 0.3);
}

/* Textos */
.social-info strong {
    display: block;
    color: #fff;
    font-family: 'Cinzel Decorative', serif;
    font-size: 18px;
    letter-spacing: 1px;
}

.social-info span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: uppercase;
}

/* Ícone de canto */
.external-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
}

/* EFEITOS HOVER AAA */
.social-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.social-card:hover .social-icon.fb {
    background: #1877f2;
    color: #fff;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.5);
}

.social-card:hover .social-icon.support {
    background: #00ffc8;
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.5);
}

.social-card:hover .external-icon {
    color: #fff;
    transform: scale(1.2);
}

/* Ajuste Responsivo */
@media (max-width: 600px) {
    .social-support-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   L2 MythoS — PREMIUM SUPPORT CHAT (CLEAN)
   ========================================= */

/* WRAPPER PRINCIPAL (Inicia invisível e flutuante) */
.aira-chat-wrapper {
    position: fixed;
    right: 30px;
    bottom: 110px;
    z-index: 999999;
    
    display: none; /* Escondido de verdade */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(30px) scale(.95);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

/* ESTADO ATIVO (Quando clica no botão) */
.aira-chat-wrapper.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* FRAME DE VIDRO (Tamanho Compacto e Otimizado) */
.aira-chat-frame {
    width: 350px;  /* Reduzido de 390px para não ocupar muito espaço lateral */
    height: 520px; /* Reduzido de 650px para caber perfeitamente no zoom 100% */
    position: relative;
    overflow: hidden;
    border-radius: 24px; /* Borda levemente ajustada para a nova proporção */
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(15,15,15,.98), rgba(5,5,5,.98));
    border: 1px solid rgba(241,196,15,.35);
    box-shadow: 0 20px 60px rgba(0,0,0,.85), 0 0 30px rgba(241,196,15,.12);
    backdrop-filter: blur(18px);
}

/* HEADER */
.aira-chat-header {
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    position: relative;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(241,196,15,.12), rgba(241,196,15,.03));
    border-bottom: 1px solid rgba(241,196,15,.18);
}

.aira-support-profile { display: flex; align-items: center; gap: 15px; }
.aira-avatar-wrap { position: relative; }
.aira-avatar-wrap img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(241,196,15,.45); }
.aira-online { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 12px #2ecc71; }
.aira-support-info strong { display: block; color: #fff; font-size: 13px; letter-spacing: 2px; }
.aira-support-info span { color: #10b981; font-size: 10px; letter-spacing: 1px; }

.aira-close-btn { width: 38px; height: 38px; border: none; border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; font-size: 22px; cursor: pointer; transition: .25s; }
.aira-close-btn:hover { background: rgba(241,196,15,.12); color: #f1c40f; }

/* CORPO DO CHAT */
.aira-chat-body {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #050505;
    width: 100%;
}

.aira-chat-body iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block;
}

/* FOOTER */
.aira-chat-footer {
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    border-top: 1px solid rgba(241,196,15,.12);
    color: rgba(241,196,15,.65);
    font-size: 9px;
    letter-spacing: 2px;
}

/* BOTÃO DOURADO PRINCIPAL */
.aira-chat-button {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5a00, #f1c40f, #ffdd65);
    color: #111;
    font-size: 28px;
    box-shadow: 0 12px 35px rgba(241,196,15,.4), 0 0 25px rgba(241,196,15,.18);
    transition: .25s;
}

.aira-chat-button:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(241,196,15,.5); }

/* PULSO DOURADO */
.aira-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(241,196,15,.4);
    animation: airaPulse 2s infinite;
}

@keyframes airaPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* RESPONSIVO MOBILE */
@media(max-width: 700px) {
    .aira-chat-frame { width: 95vw; height: 82vh; }
    .aira-chat-wrapper { right: 2.5vw; bottom: 95px; }
    .aira-chat-button { right: 20px; bottom: 20px; width: 60px; height: 60px; font-size: 22px; }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.topbar{
    transition:.4s;
}

.topbar.scrolled{
    height:75px;
    background:rgba(0,0,0,.92);
}

.status-card i{
    transition:.3s;
}

.status-card:hover i{
    transform:scale(1.15) rotate(5deg);
}

/* Container principal */
/* AJUSTE PARA BOSSES PREMIUM */
/* =========================================================
   ESTILO FINAL DOS EPIC BOSSES (L2 MythoS)
   ========================================================= */

.boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.boss {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.boss:hover {
    transform: translateY(-8px);
    border-color: rgba(241, 196, 15, 0.3);
    background: rgba(241, 196, 15, 0.05);
}

.boss-name { 
    display: block; 
    font-size: 16px; 
    font-weight: 700; 
    color: #fff; 
    margin-bottom: 15px; 
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Cinzel', serif; /* Aplicando a fonte Cinzel aqui */
}

.status-badge { 
    display: inline-block; 
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Status VIVO */
.boss.alive .status-badge { 
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71; 
    border: 1px solid rgba(46, 204, 113, 0.3);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.15);
}

/* Status MORTO */
.boss.dead .status-badge { 
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c; 
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.top3-hero {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px 0;
}

.top3-card {
    position: relative;
    width: 320px;
    padding: 40px 20px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(15px);
    overflow: hidden;
}

/* Efeito de brilho de borda ao passar o mouse */
.top3-card:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: rgba(241, 196, 15, 0.5);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(241, 196, 15, 0.2);
}

/* A Medalha com brilho neon */
.top3-card .medal {
    font-size: 50px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(241,196,15,0.5));
}

/* Nome do Clan */
.top3-card .name {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

/* Badge de Reputação Premium */
.reputation {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 12px;
    display: inline-block;
    border: 1px solid rgba(241, 196, 15, 0.2);
}

/* =========================================================
   MOBILE PREMIUM CSS — L2 MythoS
   COLE NO FINAL DO SEU CSS
   ========================================================= */

@media screen and (max-width: 768px){

    /* REMOVE OVERFLOW */
    html,
    body{
        overflow-x:hidden;
    }

    /* ======================================
       TOPBAR
    ====================================== */

    .topbar{
        height:auto;
        padding:12px 0;
        backdrop-filter:blur(18px);
    }

    .topbar-inner{
        flex-direction:column;
        gap:18px;
        height:auto;
        padding:10px 20px;
    }

    .topbar a{
        font-size:10px;
        margin:0 10px;
        letter-spacing:1px;
    }

    .logo-area img{
        width:220px;
    }

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

    .hero{
        min-height:auto;
        padding-top:150px;
        padding-bottom:60px;
    }

    .hero-content{
        padding:0 20px !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
    }

    .hero-logo{
        margin-bottom:25px;
    }

    .hero-logo img{
        width:280px !important;
        max-width:90vw !important;
    }

    .hero-logo::before{
        width:400px;
        height:400px;
    }

    .hero-logo::after{
        inset:-10px;
    }

    .hero-logo-glow{
        width:260px;
        height:260px;
    }

    .hero-badge{
        font-size:9px;
        padding:8px 14px;
        letter-spacing:1px;
    }

    .hero h1{
        font-size:42px !important;
        line-height:1.05;
        text-align:center !important;
        margin-bottom:18px;
    }

    .hero p{
        font-size:15px !important;
        line-height:1.6;
        text-align:center;
        max-width:100%;
        color:#d8d8d8;
    }

    /* ======================================
       BOTÕES HERO
    ====================================== */

    .hero-buttons{
        width:100%;
        flex-direction:column;
        gap:15px;
        margin-top:30px;
    }

    .btn-play,
    .btn-discord{
        width:100%;
        height:62px;
        border-radius:16px;
        font-size:13px;
        padding:0 20px;
    }

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

    .status-wrapper{
        grid-template-columns:1fr;
        gap:15px;
        padding:0 15px;
        margin-top:30px;
    }

    .status-card{
        padding:28px 22px;
        border-radius:20px;
    }

    .status-card strong{
        font-size:32px;
    }

    .status-card span{
        font-size:10px;
    }

    /* MINI STATUS */

    .status-mini-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
        padding:0 15px;
    }

    .status-card-mini{
        padding:18px 12px;
        border-radius:16px;
    }

    .status-card-mini strong{
        font-size:14px;
    }

    .status-card-mini span{
        font-size:8px;
    }

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

    .section-box{
        margin:60px auto;
        padding:0 15px;
    }

    .section-title{
        font-size:28px;
        margin-bottom:28px;
    }

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

    .ranking-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .ranking-card{
        padding:22px;
        border-radius:20px;
    }

    .ranking-header{
        font-size:18px;
        margin-bottom:20px;
    }

    .player-row{
        padding:14px;
        border-radius:16px;
    }

    .rank-pos{
        width:42px;
        height:42px;
        font-size:18px;
        margin-right:12px;
    }

    .player-row p{
        font-size:14px;
    }

    .player-row b{
        font-size:15px;
    }

    /* ======================================
       TOP 3 HERO
    ====================================== */

    .top3-hero{
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:20px 0;
    }

    .top3-card{
        width:100%;
        max-width:100%;
        padding:28px 20px;
    }

    .top3-card .medal{
        font-size:42px;
    }

    .top3-card .name{
        font-size:20px;
    }

    /* ======================================
       BOSSES
    ====================================== */

    .boss-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .boss{
        padding:22px 18px;
        border-radius:18px;
    }

    .boss-name{
        font-size:14px;
    }

    .status-badge{
        font-size:10px;
        padding:6px 14px;
    }

    /* ======================================
       NEWS
    ====================================== */

    .news-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .news-card{
        border-radius:20px;
    }

    .news-card img{
        height:200px;
    }

    .news-info{
        padding:20px;
    }

    .news-info h3{
        font-size:22px;
    }

    .news-info p{
        font-size:14px;
    }

    /* ======================================
       SOCIAL SUPPORT
    ====================================== */

    .social-support-grid{
        grid-template-columns:1fr;
        gap:15px;
        padding:0;
    }

    .social-card{
        padding:20px;
        border-radius:18px;
    }

    .social-icon{
        width:52px;
        height:52px;
        font-size:20px;
    }

    .social-info strong{
        font-size:15px;
    }

    .social-info span{
        font-size:10px;
    }

    /* ======================================
       FOOTER
    ====================================== */

    .footer{
        padding:60px 20px 30px;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:35px;
        text-align:center;
    }

    .footer-brand img{
        width:180px;
    }

    .footer-title{
        font-size:16px;
        margin-bottom:18px;
    }

    .footer-links li{
        margin-bottom:10px;
    }

    .footer-socials{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        gap:15px;
        text-align:center;
        font-size:10px;
    }

    /* ======================================
       CHAT SUPPORT
    ====================================== */

    .aira-chat-wrapper{
        right:10px;
        left:10px;
        bottom:85px;
    }

    .aira-chat-frame{
        width:100%;
        height:78vh;
        border-radius:20px;
    }

    .aira-chat-header{
        height:75px;
        padding:0 16px;
    }

    .aira-avatar-wrap img{
        width:44px;
        height:44px;
    }

    .aira-chat-button{
        width:58px;
        height:58px;
        font-size:22px;
        right:18px;
        bottom:18px;
    }

    /* ======================================
       PARTICLES
    ====================================== */

    .particles-wrap span{
        width:3px;
        height:3px;
    }

    /* ======================================
       PERFORMANCE
    ====================================== */

    .hero::before,
    .hero-logo::before,
    .hero-logo::after,
    .hero-logo-glow{
        filter:none !important;
    }

    *{
        -webkit-tap-highlight-color:transparent;
    }

}

</style>