/* 1. FONTES - DEFINIÇÃO GLOBAL */
@font-face {
    font-family: 'FritzMU';
    src: url('../font/FritzRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'FritzMU', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* 2. RESET E TRAVAMENTO DE TELA */
html, body {
    background-color: #000 !important;
    color: #eee;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    width: 100%;
}

/* O app.css original fixa a altura do body em 1000px (herança do layout antigo,
   bem mais baixo). Com o herói/cards maiores, o conteúdo real passou a ser bem
   mais alto que isso, e o fundo (pintado no body) ficava "preso" a essa caixa
   menor, dessincronizando do scroll real da página. Altura automática = a
   caixa do body sempre bate com a altura real do conteúdo. */
body {
    height: auto !important;
    background-attachment: scroll !important;
}

/* 3. HEADER */
header#mainHeaderContainer {
    position: relative;
    text-align: center;
    padding-top: 10px;
    height: 550px;
    overflow: hidden !important;
    z-index: 20;
}

/* Logo posicionada dentro da área escura (shadow) da armadura no peito do personagem. */
header#mainHeaderContainer .logo {
    top: 255px !important;
}

.logo img {
    max-width: 432px !important;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 10;
}

/* 4. CONTADOR (JOGANDO AGORA) - logo abaixo da logo */
.players-online {
    position: absolute !important;
    width: 100% !important;
    top: 460px !important;
    left: 0 !important;
    z-index: 40 !important;
    text-align: center !important;
}

.online-label {
    font-size: 13px !important;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0px;
    display: block;
    font-weight: 400 !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 2px 2px 0px #000, -1px -1px 0px #000;
}

.online-count {
    font-size: 46px !important;
    color: #ffcc00 !important;
    line-height: 1;
    display: block;
    font-weight: 400 !important;
    text-shadow: 0 0 20px rgba(255, 204, 0, 0.6), 2px 2px 0px #000, -1px -1px 0px #000;
}

/* 5. EFEITOS VISUAIS (FOGO E FUMAÇA) */
/* As fagulhas seguem a janela (fixed), então continuam sempre visíveis
   ao rolar a página, como um ambiente. */
.fire-effect-container {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* A névoa acompanha a PÁGINA (absolute), não a janela, senão ela "descola" do
   herói ao rolar e pode acabar aparecendo em qualquer parte (ex: rodapé).
   A altura é definida via JS igual à altura do header (herói), para a névoa
   ficar concentrada ali em cima, junto do personagem.
   overflow: hidden (containido) - "visible" chegou a ser usado para evitar o
   corte reto nas nuvens, mas em mobile isso deixava o conteúdo tecnicamente
   mais largo/alto que a tela, e o navegador ficava reajustando o zoom da
   página logo depois de carregar (efeito de "site se movendo"). A máscara de
   gradiente abaixo resolve o corte reto de um jeito mais seguro: desvanece as
   bordas do container em vez de deixar as nuvens vazarem dele. */
.smoke-container {
    position: absolute;
    top: 0; left: 0; width: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Nuvens de fumaça: várias "manchas" radiais compostas formam um contorno
   irregular de nuvem. mix-blend-mode: screen só clareia o preto de fundo,
   nunca escurece, então o efeito lê como fumaça iluminada, não como sombra. */
.smoke-puff {
    position: absolute;
    right: -30%;
    border-radius: 50%;
    background-image:
        radial-gradient(ellipse 38% 45% at 28% 40%, rgba(235, 235, 235, 1) 0%, rgba(235, 235, 235, 0) 70%),
        radial-gradient(ellipse 34% 40% at 60% 30%, rgba(220, 220, 220, 1) 0%, rgba(220, 220, 220, 0) 70%),
        radial-gradient(ellipse 42% 38% at 55% 65%, rgba(230, 230, 230, 1) 0%, rgba(230, 230, 230, 0) 72%),
        radial-gradient(ellipse 30% 34% at 20% 68%, rgba(210, 210, 210, 1) 0%, rgba(210, 210, 210, 0) 70%),
        radial-gradient(ellipse 26% 30% at 80% 55%, rgba(200, 200, 200, 1) 0%, rgba(200, 200, 200, 0) 70%);
    mix-blend-mode: screen;
    will-change: transform;
    animation-name: smokeDrift;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes smokeDrift {
    0%   { transform: translate(0, 0) scale(0.85); }
    50%  { transform: translate(-85vw, var(--driftY)) scale(1.05); }
    100% { transform: translate(-175vw, calc(var(--driftY) * 1.6)) scale(1.2); }
}

.spark {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    mix-blend-mode: screen;
    box-shadow: 0 0 10px 2px rgba(255, 165, 0, 0.8);
    animation: fireRise linear infinite;
}

@keyframes fireRise {
    0% { transform: translateY(0) scale(1); opacity: 0; background-color: #ffffff; }
    10% { opacity: 1; background-color: #fbbf24; }
    100% { transform: translateY(-110vh) translateX(var(--drift)) scale(0.3); background-color: #7f1d1d; opacity: 0; }
}

/* 6. CARDS E TEXTOS NOVOS */
.server-list {
    position: relative;
    z-index: 30 !important;
    margin-top: 0px !important;
}

.card {
    background: rgba(10, 10, 10, 0.94) !important;
    border: 1px solid #333 !important;
    position: relative;
    z-index: 31;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

/* Quadros menores: fontes e espaçamentos reduzidos */
.server-list .server-col {
    max-width: 340px !important;
}

.card-header h3 {
    font-size: 18px !important;
}

.card-header .status-beta,
.card-header .status-online {
    font-size: 11px !important;
}

.card-header .online-now {
    font-size: 11px !important;
}

.card-body {
    padding: 10px 15px !important;
}

.server-config-list {
    margin-top: 8px !important;
}

.server-config-list li {
    margin: 6px 0 !important;
    font-size: 13px !important;
}

.server-config-list li::before {
    width: 13px !important;
    height: 13px !important;
}

.button {
    width: 210px !important;
    height: 89px !important;
    font-size: 19px !important;
    line-height: 89px !important;
    background-size: contain !important;
}

/* Forçar cor amarela nos status e contadores */
.status-amarelo {
    color: #ffcc00 !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
}

.count-highlight {
    color: #ffcc00 !important;
}

/* 7. MOBILE */
@media (max-width: 767.98px) {
    /* Cards empilhados e centralizados (em vez de lado a lado espremidos) */
    .server-list .server-col {
        height: auto !important;
        max-width: 380px !important;
        margin-bottom: 24px;
    }
    .server-list .server-col:last-child {
        margin-bottom: 0;
    }
    .server-config-list li {
        flex-wrap: nowrap;
    }

    /* Fontes um pouco maiores que no desktop, já que o card usa a largura toda */
    .card-header h3 {
        font-size: 21px !important;
    }
    .card-header .status-beta,
    .card-header .status-online,
    .card-header .online-now {
        font-size: 13px !important;
    }
    .server-config-list li {
        font-size: 15px !important;
    }
    .server-config-list li::before {
        width: 15px !important;
        height: 15px !important;
    }
    .button {
        width: 230px !important;
        height: 97px !important;
        font-size: 21px !important;
        line-height: 97px !important;
    }
}

@media (max-width: 576px) {
    header#mainHeaderContainer { height: 420px; }
    header#mainHeaderContainer .logo { top: 215px !important; }
    .players-online { top: 350px !important; }
    .logo img { max-width: 72% !important; }
    .online-count { font-size: 32px !important; }
    .server-list { margin-top: 0px !important; }
}

/* 8. PRELOADER */
#site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    background: #000;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease;
}
#site-preloader.preloader-hidden {
    opacity: 0;
    pointer-events: none;
}

.preloader-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    max-width: 130vw;
    max-height: 130vw;
    background: radial-gradient(circle, rgba(200, 60, 30, 0.35) 0%, rgba(200, 150, 40, 0.18) 40%, transparent 68%);
    filter: blur(40px);
    animation: preloaderGlowPulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes preloaderGlowPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

.preloader-logo {
    position: relative;
    max-width: 252px;
    width: 21.6vw;
    height: auto;
    filter: drop-shadow(0 0 22px rgba(200, 60, 30, 0.55)) drop-shadow(0 0 40px rgba(255, 204, 0, 0.35));
    animation: preloaderPulse 1.6s ease-in-out infinite;
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.97); }
    50%      { opacity: 1;    transform: scale(1); }
}

.preloader-bar {
    width: 220px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 32px;
}
.preloader-bar span {
    display: block;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffcc00, transparent);
    animation: preloaderBar 1.2s ease-in-out infinite;
}

@keyframes preloaderBar {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(340%); }
}

/* 9. REVEAL EM CASCATA */
.hero-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--hero-delay, 0s);
}
/* A logo já tem uma transição própria (hover) em app.css com mais especificidade
   (header .logo { transition: 0.3s all ... }), que sobrescrevia a nossa. */
header#mainHeaderContainer .logo.hero-reveal {
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--hero-delay, 0s);
}
.hero-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .hero-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .preloader-logo, .preloader-bar span, .preloader-glow {
        animation: none !important;
    }
}