/* --- VARIÁVEIS DE COR MODERNAS (Dark Mode Metin2) --- */
:root {
    --dark-bg: #121217; /* Fundo principal escuro */
    --module-bg: #1e1e24; /* Fundo dos painéis e módulos */
    --text-color: #f0f0f0; /* Cor de texto principal */
    --text-muted: #aaaaaa; /* Texto secundário */
    --accent-gold: #fbac01; /* Baseado no seu acento, mas padronizado como Ouro */
    --accent-cyan: #00ffff; /* Acento para micro-interações e brilho mágico */
    --border-color: #333333;
    --shadow-dark: rgba(0, 0, 0, 0.6); /* Sombra escura (Neumorfismo reverso) */
    --shadow-light: rgba(255, 255, 255, 0.05); /* Sombra clara */
}

/* --- REGRAS GLOBAIS --- */
* {
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease-in-out; /* Transições suaves para todos os elementos */
    box-sizing: border-box;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

.container {
    max-width: 1140px !important;
}

/* --- HEADER / NAVEGAÇÃO --- */
header {
    /* Mantém a imagem de fundo original do usuário */
    background-image: url('/img/fondo-hallowen.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 450px;
    position: relative;
    /* Adiciona um overlay escuro para leitura */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }
}

header > nav {
    font-size: 14px;
    z-index: 10; /* Garante que a nav fique acima do overlay */
    position: relative;
    padding-top: 20px;
}

.nav-link {
    color: var(--text-color);
    font-weight: 600;
}

a.active {
    color: var(--accent-gold) !important;
    filter: unset;
    /* Destaque moderno para link ativo */
    border-bottom: 2px solid var(--accent-cyan);
    padding-bottom: 5px;
}

.nav-link:hover {
    filter: unset;
    color: var(--accent-cyan) !important;
}

.logo-sm {
    max-width: 200px;
    filter: drop-shadow(0 0 5px rgba(255, 196, 0, 0.5));
}

/* Botões Customizados (Mantendo as Imagens de Fundo do Usuário) */
.btn-sm-custom, .btn-lg-custom {
    color: var(--dark-bg) !important; /* Texto escuro para contraste */
    font-weight: bold;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.btn-sm-custom:hover, .btn-lg-custom:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 15px var(--accent-gold));
}

.btn-sm-custom {
    background-image: url('/img/custom-btn-sm.webp');
    font-size: 14px !important;
    padding: 8px 26px;
}

.btn-lg-custom {
    background-image: url('/img/custom-btn-lg.webp');
    font-size: 14px !important;
    padding: 17px 35px;
}

.header-picture {
    background-image: url('/img/header-picture.webp');
    background-position: center 70px;
    background-repeat: no-repeat;
    height: inherit;
    z-index: 2;
    position: relative;
}

.header-picture > div {
    height: inherit;
    padding-top: 100px;
}

/* --- WIDGETS (Dark Neumorfismo) --- */
.header-widget {
    width: 240px;
    height: 120px;
    background-color: var(--module-bg); /* Fundo escuro */
    box-shadow: 
        5px 5px 15px var(--shadow-dark), 
        -5px -5px 10px var(--shadow-light); /* Sombra 3D sutil */
    border-radius: 10px;
    border-left: 3px solid var(--accent-gold); /* Destaque lateral */
}

.header-widget:hover {
    transform: translateY(-3px);
    border-left-color: var(--accent-cyan);
}

.online-players-widget {
    background-image: url('/img/widget-icon.webp');
    width: 75px;
    height: 75px;
    filter: drop-shadow(0 0 5px var(--accent-cyan));
}

/* Ícones de classe mantidos */
.class-0, .class-1, .class-2, .class-3, .class-4, .class-5, .class-6, .class-7 {
    background-repeat: no-repeat;
    background-size: contain;
}
.class-0 { background-image: url('/img/class-icon/home-widget/0.webp'); }
.class-1 { background-image: url('/img/class-icon/home-widget/1.webp'); }
.class-2 { background-image: url('/img/class-icon/home-widget/2.webp'); }
.class-3 { background-image: url('/img/class-icon/home-widget/3.webp'); }
.class-4 { background-image: url('/img/class-icon/home-widget/4.webp'); }
.class-5 { background-image: url('/img/class-icon/home-widget/5.webp'); }
.class-6 { background-image: url('/img/class-icon/home-widget/6.webp'); }
.class-7 { background-image: url('/img/class-icon/home-widget/7.webp'); }

.widget-text-p-count {
    color: var(--accent-gold); /* Padronizado para ouro */
    font-size: 14px;
    position: relative;
}

.widget-text-p-count::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--accent-gold);
    position: absolute;
    bottom: 0;
    left: 0;
}

.header-widget > span:nth-child(1) {
    color: var(--text-color);
}

.header-widget > span:nth-child(3) {
    font-size: 12px;
    color: var(--text-muted);
}

.home-box {
    width: 550px;
    font-size: 14px;
    padding-left: 25px;
    padding-right: 25px;
    color: var(--text-color);
}

.home-box > h1 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    color: var(--accent-gold);
}

/* Mantém decoradores, mas garante que se destaquem no fundo escuro */
.home-box > h1::before {
    content: '';
    background-image: url('/img/decorator-1.webp');
    width: 13px;
    height: 13px;
    position: absolute;
    left: -40px;
    top: 8px;
    filter: drop-shadow(0 0 5px var(--accent-cyan));
}

.home-box > h1::after {
    content: '';
    background-image: url('/img/decorator-1.webp');
    width: 13px;
    height: 13px;
    position: absolute;
    right: -40px;
    top: 8px;
    filter: drop-shadow(0 0 5px var(--accent-cyan));
}

.register-tip {
    margin-top: 5px;
    background-color: #a90f0f; /* Cor vermelha de alerta mantida */
    color: white;
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(169, 15, 15, 0.7);
}

.register-tip::after {
    content: '';
    background-color: #a90f0f ;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: rotateY(0deg) rotate(45deg);
    z-index: -1;
}

.tooltip-inner {
    max-width: 400px;
    text-align: start;
}

.home-btn-download > img {
    transition: all 0.6s;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

.home-btn-download > img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 5px 15px var(--accent-cyan));
}

.home-box > span:nth-child(4) {
    font-size: 11px;
    color: var(--accent-gold); /* Padronizado para ouro */
    position: relative;
}

.home-social > span {
    color: var(--accent-gold); /* Padronizado para ouro */
}

.home-box > span:nth-child(4)::before {
    content: '';
    background-image: url('/img/decorator-2.webp');
    width: 14px;
    height: 14px;
    position: absolute;
    left: -20px;
    top: 2px;
    filter: drop-shadow(0 0 5px var(--accent-gold));
}

.fixed-top.scrolled {
    transition: background-color 200ms linear;
}

.scrolled {
    background-color: rgba(18, 18, 23, 0.95); /* Dark Mode Scroll */
}

.home-social {
    background-image: url('/img/bg-social.webp');
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 80px;
    height: 290px;
    margin-bottom: 50px;
}

.social-btn {
    color: var(--dark-bg);
    background-color: var(--accent-gold); /* Botão social em ouro */
    border-radius: 10px;
    padding: 7px 15px;
    font-size: 35px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.social-btn:hover {
    background-color: var(--accent-cyan);
    color: white;
    filter: drop-shadow(0 0 10px var(--accent-cyan));
}

.swiper {
    width: 100%;
}

/* --- SWIPER / NOTÍCIAS (Dark/Gold Overlay) --- */
.news-swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 0.6s;
    border-radius: 8px;
    overflow: hidden;
}

.news-swiper-slide:hover {
    transform: scale(1.02); /* Reduzido de 1.04 para ser mais sutil */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.news-swiper-slide > div {
    height: inherit;
    /* Gradiente padrão (Dark Mode) */
    background: linear-gradient(0deg, rgba(18, 18, 23, 1) 20%, rgba(255, 0, 0, 0) 100%);
    transition: background-color 0.3s ease-in-out; 
}

.news-swiper-slide > div:hover {
    /* Gradiente Hover (Acento Ouro) */
    background: linear-gradient(0deg, var(--accent-gold) 35%, rgba(255, 0, 0, 0) 40%);
}

.news-swiper-slide > div > a {
    text-decoration: none;
    color: var(--text-color);
}

.news-swiper-slide > div > a:nth-child(2) {
    font-size: 12px;
    color: var(--text-muted);
}

.news-swiper-slide > div:hover a,
.news-swiper-slide > div:hover a:nth-child(2){
    color: var(--dark-bg); /* Texto escuro ao hover Ouro */
}

.news-swiper-slide > div > a > h1 {
    font-size: 14px;
    font-weight: bold;
}

.all-news-btn {
    background-image: url('/img/news-bg-btn.webp');
    background-color: var(--module-bg); /* Fundo escuro para consistência */
    border-radius: 5px;
    box-shadow: 0 4px 8px var(--shadow-dark);
}

.all-news-btn > a {
    text-decoration: none;
    color: var(--text-muted);
}

/* --- RANKING --- */
.ranking-container {
    max-width: 550px;
    padding: 20px;
}

.page-title {
    font-size: 24px;
    color: var(--accent-gold); /* Padronizado para ouro */
    position: relative;
    background-image: url('/img/decorator-3.webp');
    background-repeat: no-repeat;
    padding-left: 30px;
    background-position: 0px 2px;
}

.ranking-info {
    border-bottom: 1px solid var(--border-color);
}

.ranking-info > span {
    font-size: 11px;
    color: var(--text-muted);
}

.ranking-info > i {
    color: var(--accent-gold); /* Ícone em ouro */
}

.ranking-content-header {
    padding: 15px 25px;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-muted);
    max-width: 400px;
}

.ranking-content > ul {
    list-style: none;
    padding: 10px 0px;
    width: 400px;
    background-color: var(--module-bg); /* Fundo escuro */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}

.ranking-content > ul > li {
    font-size: 12px;
    color: var(--text-color);
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 21px;
    padding-bottom: 20px;
}
 
/* Separadores de lista escuros e finos */
.ranking-content > ul > li:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.ranking-nav {
    background-color: var(--module-bg); /* Fundo escuro */
    height: 160px;
    width: 60px;
    margin-bottom: 50px;
    margin-left: 25px;
    border-radius: 50px;
    box-shadow: inset 3px 3px 10px var(--shadow-dark); /* Sombra interna (Neumorfismo) */
}

/* Botões de Ranking (Mantidos como imagem, adicionado estilo hover/active) */
.btn-metin, .btn-pvp, .btn-boss {
    border-style: none;
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    background-color: transparent;
    filter: grayscale(100%);
}

.btn-metin:hover, .btn-pvp:hover, .btn-boss:hover {
    filter: unset;
    transform: scale(1.1);
}

.btn-metin { background-image: url('/img/icon/rank-metin.webp'); }
.btn-pvp { background-image: url('/img/icon/rank-pvp.webp'); }
.btn-boss { background-image: url('/img/icon/rank-boss.webp'); }

.btn-metin.active, .btn-pvp.active, .btn-boss.active {
    filter: unset;
    box-shadow: 0 0 8px var(--accent-cyan);
}

.btn-metin.active { background-image: url('/img/icon/rank-metin-selected.webp'); }
.btn-pvp.active { background-image: url('/img/icon/rank-pvp-selected.webp'); }
.btn-boss.active { background-image: url('/img/icon/rank-boss-selected.webp'); }

/* --- ITEM SHOP --- */
.item-card {
    max-width: 206px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.item-promo {
    background-image: url('/img/shop/promo.webp');
    width: 67px;
    height: 63px;
    position: absolute;
    left: 0;
    z-index: 5;
    filter: drop-shadow(0 0 5px red);
}

.item-card-bg {
    background-image: url('/img/shop/item-card-bg.webp');
    width: 206px;
    height: 273px;
    background-repeat: no-repeat;
}

.item-bg {
    background-image: url('/img/shop/item-bg.webp');
    width: 172px;
    height: 172px;
    margin-top: -30px;
    background-repeat: no-repeat;
    background-size: contain;
}

.item-detail {
    padding-top: 10px;
}

.item-detail > span > a {
    font-size: 11px;
    text-decoration: none;
    display: block;
    color: var(--text-color); /* Alterado de preto para branco */
}

.item-detail > span:nth-child(2) {
    font-size: 14px;
    color: var(--accent-gold); /* Preço em ouro */
    font-weight: bold;
    padding-top: 5px;
    display: block;
}

.btn-buy {
    background-image: url('/img/shop/btn-buy.webp');
    width: 84px;
    height: 28px;
    font-size: 11px;
    color: var(--accent-cyan); /* Cor de texto em ciano */
    text-decoration: none;
    line-height: 28px;
    margin-top: -15px;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.4));
}

.btn-buy:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px var(--accent-gold));
    color: var(--accent-gold);
}

/* --- FOOTER --- */
footer {
    background-color: #081a28; /* Fundo mais escuro que o azul anterior */
    background-image: url('/img/clouds-deco.webp');
    background-position: center bottom; /* Coloquei no bottom para se destacar */
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    border-top: 3px solid var(--accent-gold);
}

.footer-desc {
    font-size: 11px;
    padding: 15px;
    color: var(--text-muted);
}

.footer-links > ul {
    list-style: none;
}

.footer-links > ul > li > a {
    text-decoration: none;
    font-size: 11px;
    color: white;
}

.footer-links > ul > li > a:hover {
    color: var(--accent-cyan);
}

.coded-by {
    font-size: 11px;
    color: var(--text-muted);
}

.widget-text > ul {
    font-size: 11px;
    list-style: none;
    color: var(--text-color);
}

/* --- SWAL (SweetAlert) Styles (Dark Theming) --- */
.colored-toast.swal2-icon-success { background-color: #008000 !important; }
.colored-toast.swal2-icon-error { background-color: #900d09 !important; }
.colored-toast.swal2-icon-warning { background-color: #e6b300 !important; }
.colored-toast.swal2-icon-info { background-color: #004d40 !important; }
.colored-toast.swal2-icon-question { background-color: #007bff !important; }

/* Mantém os estilos do user para my-account */
.my-acc-buy-coins-header {
    background-image: url('/img/bg.webp');
    border: 1px solid var(--border-color);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.my-acc-buy-coins-header h1 {
    color: var(--text-color);
    text-shadow: 2px 2px 4px black;
}

.my-referral {
    border: 1px solid var(--accent-gold);
    background-color: var(--module-bg);
}

.my-referral > img {
    filter: drop-shadow(-5px 5px 10px rgba(0, 0, 0, 0.8));
}

.custom-separator {
    background-color: var(--border-color);
}

.my-referral h2 {
    color: var(--accent-gold);
}

.my-referral > div > div > p {
    border: 1px solid var(--accent-gold);
    color: var(--text-color);
    background-color: var(--dark-bg);
}

.my-account-btn {
    outline: 1px solid var(--accent-gold);
    color: var(--text-color) !important;
}

.my-account-btn:hover {
    color: white !important;
    background-color: var(--accent-gold);
    outline-offset: 5px;
}

/* --- Cartão de Item (Estilo 3D/Magic) --- */
.card {
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px var(--shadow-dark);
}
.card:hover {
    box-shadow: 0 0 20px var(--accent-cyan);
}

/* Garante que o ícone em foco no hover tenha o brilho mágico */
.card:hover > .card-icon {
    filter: blur(7px) drop-shadow(0 0 10px var(--accent-cyan));
    animation: anim 3s infinite;
}

.textBox {
    color: var(--text-color);
}
.textBox > .head {
    color: var(--accent-gold);
}
.textBox > .price {
    color: var(--accent-cyan);
}


.payment-btn {
    border: 2px solid var(--accent-gold);
    background-color: var(--dark-bg);
}
.payment-btn:hover {
    background-color: var(--accent-gold);
    color: var(--dark-bg);
}

.btn-buy-item {
    background-color: var(--module-bg);
    border: 1px solid var(--accent-cyan);
    color: var(--text-color);
    box-shadow: 5px 5px 10px var(--shadow-dark);
}
.btn-buy-item:hover::before {
    background-color: var(--accent-cyan);
}

/* --- Media Queries --- */
@media (max-width: 991px) {
    header > nav {
        background-color: var(--dark-bg);
        border-bottom: 1px solid var(--accent-gold);
    }
}
/* Media Queries menores mantidas */
@media (max-width: 570px) {
    .home-box > h1::before { background-image: unset; }
    .home-box > h1::after { background-image: unset; }

    .ranking-content > ul { width: 300px; }
    .ranking-content-header { max-width: 300px; }
}