/* =========================================================================
   L2 Premiumm - camada de responsividade (carregada por ultimo)
   -------------------------------------------------------------------------
   Contexto: o site ja tinha media queries em css/elity-redesign.css, mas elas
   nunca chegavam a rodar porque:
     1) o layout.php declarava <meta name="viewport" content="width=1440">,
        entao o navegador SEMPRE reportava 1440px de largura no celular;
     2) o css/style.css terminava com uma trava de desktop
        (html,body{min-width:1440px!important} / .wrapper{width:1440px!important}
        / *{max-width:none!important}).
   Os dois pontos foram corrigidos. Este arquivo cobre o que faltava.
   ========================================================================= */

/* =========================================================================
   BLINDAGEM contra a trava de desktop antiga do css/style.css
   -------------------------------------------------------------------------
   A trava foi removida do style.css, mas se por algum motivo uma copia antiga
   voltar ao servidor (upload parcial, backup, cache), as tres regras abaixo
   continuam neutralizando o efeito. Nao apagar.

     html,body{min-width:1440px!important}  -> celular renderiza 1440px e o
                                               navegador encolhe a pagina toda
     .wrapper{width:1440px!important}       -> conteudo nao acompanha a tela
     *{max-width:none!important}            -> mata TODO max-width do site
                                               (por isso o rodape ficava colado
                                               na borda esquerda)

   O !important aqui e proposital: so um !important vence outro !important, e
   ai a especificidade decide (.footer 0-1-0 ganha do * 0-0-0).
   ========================================================================= */
html, body {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ---------- base fluida ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* height:auto NAO pode valer para <iframe>: widgets (Discord, YouTube) usam o
   atributo height="400" e a regra achatava a caixa. */
img, video, canvas, svg { max-width: 100% !important; height: auto; }
iframe { max-width: 100% !important; }

/* widget do Discord: altura fixa, so a largura e fluida */
.discordBlock { width: 100%; }
.discordBlock iframe { width: 100%; height: 400px; min-height: 400px; display: block; border: 0; }

.wrapper {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* O <footer> fica FORA do .wrapper: sem isso ele encosta na borda esquerda da
   tela e fica desalinhado com o resto do site. */
.footer {
  max-width: 1440px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 16px;
}

@media (min-width: 1441px) {
  .wrapper { padding-left: 0; padding-right: 0; }
  .footer  { padding-left: 0; padding-right: 0; }
}

/* Qualquer tabela larga rola dentro da propria caixa, nunca empurra a pagina */
.tabContent, .dashboardTable { max-width: 100%; }

/* =========================================================================
   Contador de uptime (LIFE TIME) — >= 641px
   -------------------------------------------------------------------------
   O css/elity-redesign.css prende a placa em max-width:238px, o que no
   desktop deixava o contador minusculo dentro de um card larguissimo.
   Aqui ele passa a acompanhar a largura da caixa, com numeros e rotulos
   proporcionais. Abaixo de 641px nada muda — o mobile ja estava certo.
   ========================================================================= */
@media (min-width: 641px) {
  /* o card tem height:370px fixo no style.css; com o contador maior o
     conteudo passava do rodape da caixa */
  .news .newsBlock { height: auto; min-height: 370px; }

  .news .server-countdown {
    max-width: none;
    width: 100%;
    gap: 14px;
    padding: 18px 18px;
    border-radius: 14px;
  }
  .news .server-countdown::before { left: 32px; right: 32px; }

  .news .countdown-box { padding: 16px 8px 13px; border-radius: 11px; }

  .news .countdown-value { font-size: clamp(28px, 2.6vw, 40px); }

  .news .countdown-label {
    margin-top: 9px;
    font-size: 11px;
    letter-spacing: .16em;
  }

  .news .server-running-text { font-size: 14px; margin: 10px auto 14px; }
  .news .server-running-text::before,
  .news .server-running-text::after { max-width: 220px; }
}

/* =========================================================================
   Coluna da esquerda — >= 993px
   -------------------------------------------------------------------------
   O widget do Discord desce para o fim da coluna, alinhando pelo rodape com
   as caixas dos mundos que ficam no fim da coluna da direita.
   ========================================================================= */
@media (min-width: 993px) {
  .main { align-items: stretch; }
  .main > .sidebar { display: flex; flex-direction: column; }
  .main > .sidebar > .discordBlock { margin-top: auto; }
}

/* =========================================================================
   <= 1200px
   ========================================================================= */
@media (max-width: 1200px) {
  .sparks { width: 100%; max-width: 1200px; }
}

/* =========================================================================
   <= 992px  (tablet / celular deitado)
   ========================================================================= */
@media (max-width: 992px) {
  /* ---- topo: menu -> status -> botao PAINEL -> logo ---- */
  .topPanel { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding: 10px 0 4px; }
  .topPanel-left, .topPanel-right { justify-content: center; flex-wrap: wrap; width: 100%; }

  /* botao PAINEL centralizado e legivel sobre o fundo claro */
  .user-enter {
    margin: 0 auto !important;
    background: rgba(10, 8, 16, .55);
    border-color: rgba(230, 195, 106, .55);
    color: #fbd181;
    backdrop-filter: blur(4px);
  }
  .user-login, .user-forgot { margin-right: 8px; margin-bottom: 8px; }

  /* ---- cabecalho: logo em destaque ---- */
  .header { padding: 18px 0 10px !important; }

  .logo { width: 100%; text-align: center; margin: 0 auto 18px; }
  .logo img { max-height: 190px; width: auto; }

  .hero { display: none; }

  /* o fundo do topo e claro: sem sombra o texto some */
  .headerInfo-title, .headerInfo-text {
    text-shadow: 0 2px 10px rgba(8, 5, 14, .85), 0 0 24px rgba(8, 5, 14, .6);
  }
  .headerInfo-text { color: #ded9ea; }

  .tabBlock { height: auto; min-height: 0; padding: 16px; background-size: cover; }
  .table { position: static; height: auto; }
  .table-row { height: auto; padding: 10px 0; }

  .modal_div { max-width: 92vw; left: 4vw; margin-left: 0; top: 6%; padding: 32px 22px; min-height: 0; }
}

/* =========================================================================
   <= 640px  (celular em pe)
   ========================================================================= */
@media (max-width: 640px) {
  .wrapper { padding-left: 14px; padding-right: 14px; }

  .headerInfo-title { font-size: 28px; }
  .headerInfo-text  { font-size: 15px; }

  .menu-main { gap: 2px; }
  .menu__link { padding: 9px 12px; font-size: 14px; }

  /* alvos de toque minimos */
  .menu__link, .button, .button-small, .news-cta, .popup-btn { min-height: 44px; display: inline-flex; align-items: center; }

  .logo img { max-height: 165px; }

  /* rankings: rolagem horizontal DENTRO da caixa, sem estourar a pagina */
  .sidebar, .news, .main { max-width: 100%; min-width: 0; }
  .tabContent, .tabBlock { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .tabBlock   { padding: 12px; }
  .table      { width: 100%; min-width: 0; }
  .table-td   { font-size: 13px; }
  .table-row  { flex-wrap: nowrap; }
  .tabs-button { flex-wrap: wrap; row-gap: 6px; }

  .sparks { display: none; }

  .modal_div { max-width: 94vw; left: 3vw; padding: 26px 18px; top: 4%; max-height: 88vh; overflow-y: auto; }

  /* popup de abertura */
  .popup-box { width: 92vw; max-width: 92vw; padding: 26px 18px; }
  .popup-buttons { flex-direction: column; gap: 10px; }
  .popup-buttons .popup-btn { width: 100%; justify-content: center; }
}

/* ---------- rodape: texto nunca encosta na borda nem estoura ---------- */
.footer, .footerInfo, .footerInfo-text, .footerMenu, .footerRight {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 992px) {
  .footer { padding: 60px 20px !important; flex-wrap: wrap; row-gap: 30px; }
  .footerInfo  { width: 100% !important; min-width: 0; }
  .footerMenu  { width: 60% !important; min-width: 0; }
  .footerRight { width: 40% !important; min-width: 0; }
  /* os links do rodape tem white-space:nowrap por <style> inline: sem quebrar
     a linha eles definem uma largura minima maior que a tela */
  .footerInfo-buttons { flex-wrap: wrap !important; gap: 12px !important; }
}

@media (max-width: 640px) {
  .footer { padding: 50px 16px 90px !important; }
  .footerInfo-title { font-size: 15px; }
  .footerInfo-text { font-size: 11px; line-height: 1.6; }
  .footerMenu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .footerInfo-buttons { flex-wrap: wrap !important; justify-content: center; gap: 12px !important; }
}

/* ---------- barra flutuante de redes sociais ----------
   O CSS dela e um <style> inline no layout.php (vem depois deste arquivo na
   ordem do documento), por isso os overrides abaixo usam !important. */
@media (max-width: 992px) {
  .social-buttons { right: 10px !important; gap: 8px !important; }
  .social-button { width: 42px !important; height: 42px !important; font-size: 16px !important; }
  .social-button .tooltip { display: none !important; }
}

@media (max-width: 640px) {
  /* vira uma barra horizontal no rodape, para nao cobrir o conteudo */
  .social-buttons {
    top: auto !important;
    bottom: 12px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    flex-direction: row !important;
    gap: 10px !important;
    background: rgba(10, 8, 6, .72);
    padding: 8px 12px !important;
    border-radius: 999px;
    backdrop-filter: blur(6px);
  }
  .social-button { width: 38px !important; height: 38px !important; font-size: 15px !important; }
}

/* =========================================================================
   <= 400px
   ========================================================================= */
@media (max-width: 400px) {
  .headerInfo-title { font-size: 24px; }
  .news-title { font-size: 22px; }
  .menu__link { padding: 8px 10px; font-size: 13px; }
  .news .server-countdown { gap: 8px; }
  .countdown-value { font-size: 22px; }

  .logo img { max-height: 145px; }
}