/* Estilos exclusivamente para mobile (até 1024px) */
@media (max-width: 1024px) {
  /* Design System mobile base */
  :root{
    --m-color-bg:#0d0d0d;
    --m-color-surface:#121212;
    --m-color-surface-2:#1a1a1a;
    --m-color-text:#efefef;
    --m-color-text-dim:#bdbdbd;
    --m-color-primary:#ff6012;
    --m-color-accent:#ff0000;
    --m-border:#2a2a2a;
    --m-radius:10px;
    --m-shadow:0 6px 20px rgba(0,0,0,.35);
    --m-space-1:6px;   /* xs */
    --m-space-2:10px;  /* sm */
    --m-space-3:14px;  /* md */
    --m-space-4:18px;  /* lg */
    --m-font-1:12px;   /* small */
    --m-font-2:14px;   /* base  */
    --m-font-3:16px;   /* title */
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ font-size:100%; }
  body{ background:var(--m-color-bg) !important; color:var(--m-color-text); font-family:Verdana, Arial, sans-serif; font-size:var(--m-font-2); line-height:1.6; }
  /* Topbar: permite quebra de linha e ajusta dropdown */
  #TopbarCompanyServers .TopbarContent { flex-wrap: wrap; row-gap: 6px; }
  #server-selector-menu { width: 92vw !important; left: auto !important; right: 12px !important; }

  /* Barra de informações (ícones sociais e status) pode quebrar linha */
  .InfoBar { flex-wrap: wrap; row-gap: 4px; }

  /* Remover ornamentos pesados no conteúdo para melhorar legibilidade */
  .Content .Corner-tl,
  .Content .Corner-tr,
  .Content .Corner-bl,
  .Content .Corner-br,
  .Content .Border_1 { display: none !important; }
  .Content .Border_2 { margin: 0 !important; }
  .Content .Border_3 { border: 0 !important; margin: 0 !important; }
  .Content .Box { margin: var(--m-space-3) var(--m-space-2) !important; border: 0 !important; background:var(--m-color-surface); border-radius: var(--m-radius); box-shadow: var(--m-shadow); overflow:hidden; }
  .Content .BoxContent { min-height: initial !important; height: auto !important; padding: var(--m-space-3) !important; color: var(--m-color-text); }

  /* Latest News: cabeçalho e corpo fluidos */
  .Content #News .NewsHeadlineBackground { height: auto; min-height: 24px; padding: var(--m-space-2) var(--m-space-3); display:flex; align-items:center; gap: var(--m-space-2); background: var(--m-color-surface-2) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius); }
  .Content #News .NewsHeadlineIcon { position: static; margin: 0; float: none; display: inline-block; vertical-align: middle; width: 18px; height: 18px; }
  .Content #News .NewsHeadlineDate { position: static; display: inline-block; margin-right: var(--m-space-2); vertical-align: middle; font-size: var(--m-font-1); color: var(--m-color-text-dim); }
  .Content #News .NewsHeadlineText { position: static; display: inline-block; vertical-align: middle; font-size: var(--m-font-3); color: var(--m-color-text); }

  #news-container { height: auto !important; max-height: none !important; padding: 0 8px 10px 8px !important; }
  .Content #News .NewsTable { table-layout: auto; }
  .Content #News .NewsTable .NewsTableContainer { padding: 0 0 0 0 !important; }
  .Content #News .NewsTable .NewsTableContainer > .NewsContent { max-width: 100% !important; padding: 0; }

  /* Botão de menu (hambúrguer) para abrir/fechar a coluna de menu */
  #mobile-menu-toggle { 
    display: inline-flex; align-items: center; gap: 6px; 
    padding: 8px 10px; color: #fff; background: #1c1c1c; 
    border: 1px solid #4B4B4B; border-radius: 4px; cursor: pointer;
  }
  #MenuColumn { display: none; }
  #MenuColumn.is-open { display: block; }

  /* Evitar overflow horizontal no mobile */
  html, body { overflow-x: hidden; }
  .main-site-container, .Content, .main-content, #News, #news-container { width: 100% !important; max-width: 100% !important; }
  .main-content, .Content, #news-container { overflow-x: hidden !important; }

  /* Acessibilidade/área de toque maior para o botão do menu */
  #mobile-menu-toggle { min-height: 36px; min-width: 44px; line-height: 1; }

  /* Travar scroll de fundo quando menu aberto */
  body.no-scroll { overflow: hidden; }

  /* Imagens e iframes sempre fluidos no conteúdo central */
  .main-content img, .main-content iframe,
  .BoxContent img, .NewsContent img { max-width: 100% !important; height: auto !important; display:block; }

  /* Tabelas com rolagem horizontal quando necessário */
  .main-content table { display: block; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .main-content table tr { width: 100%; }
  .main-content table td, .main-content table th { white-space: normal; }
  #News .NewsTable { display:block; overflow-x:auto; width: 100% !important; }

  /* Menu como gaveta (drawer) deslizante no mobile */
  #MenuColumn {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 86vw !important;
    max-width: 340px !important;
    background: var(--m-color-surface-2) !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    z-index: 2100 !important;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 8px 0 20px rgba(0,0,0,0.5);
  }
  #MenuColumn.is-open { transform: translateX(0); }

  /* Simplifica o topo do menu no mobile */
  #LeftArtwork { display: none !important; }
  #MenuTop, #MenuBottom, .SmallBoxTop, .SmallBoxBottom, .SmallBoxBorder, .SmallMenuBorder { display:none !important; }
  .SmallMenuBox { background:transparent !important; border:1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); margin-bottom: var(--m-space-3); }

  /* Itens do menu: alvos de toque confortáveis */
  .MenuButton { height: 44px !important; background:transparent !important; border-bottom:1px solid var(--m-border); }
  .MenuFonts { font-size: var(--m-font-2) !important; line-height: 22px !important; color: var(--m-color-text) !important; text-shadow:none !important; }
  .SubmenuitemLabel { padding: 8px 12px !important; font-size: var(--m-font-2) !important; color: var(--m-color-text) !important; background:transparent !important; border-bottom:1px solid var(--m-border); }
  .ActiveSubmenuItemIcon, .LeftChain, .RightChain, .Lights, .Extend, .Button { display:none !important; }
  .SmallMenuBox, #Menu, .Submenu { width: 100% !important; }

  /* Cabeçalho interno simplificado */
  .Content .BorderTitleText{ display:none !important; }
  #ContentBoxHeadline.Title{ max-width: 80%; height:auto; position:relative; top:0; left:0; display:block; margin: var(--m-space-2) auto var(--m-space-3) auto; }
  /* Quebra segura de conteúdos longos (URLs, códigos etc.) */
  .BoxContent, .NewsContent { word-break: break-word; overflow-wrap: anywhere; }
  .BoxContent pre, .NewsContent pre { white-space: pre-wrap; }

  /* InfoBar compacta */
  .InfoBar{ height:auto; padding: 0 var(--m-space-2); font-size: var(--m-font-1); }
  .InfoBarIcon{ width:14px; height:14px; }
  .InfoBar a{ margin-right: var(--m-space-2); }

  /* Faixa de Boosteds (exibida apenas no mobile) */
  .BoostedStrip{ display:flex !important; gap:10px; row-gap:6px; align-items:center; justify-content:flex-start; flex-wrap:wrap; padding: 6px 10px; border-top: 1px solid var(--m-border); margin-top: 6px; }
  .BoostedStrip .chip{ background: var(--m-color-surface-2); border:1px solid var(--m-border); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--m-color-text); }

  /* CTAs e dropdown no topo (visíveis apenas no mobile) */
  #HeaderCtas{ display:flex !important; align-items:center; gap:8px; margin-left:auto; }
  #HeaderCtas .btn-cta{ padding:6px 10px; background:#1c1c1c; border:1px solid #4B4B4B; border-radius:6px; color:#fff; font-size:12px; text-decoration:none; }
  #HeaderCtas .btn-cta.accent{ background: var(--m-color-accent); border-color: var(--m-color-accent); }
  #header-menu-dropdown{ position:relative; }
  #header-menu-button{ display:flex; align-items:center; gap:6px; color:#fff; background:transparent; border:1px solid #4B4B4B; border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; }
  #header-menu-panel{ position:absolute; top:100%; right:0; margin-top:8px; width: 240px; background:#1c1c1c; color:#fff; border:1px solid rgba(107,114,128,.5); border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.5); z-index:9999; }
  #header-menu-panel a{ display:block; padding:8px 10px; color:#d7d7d7; text-decoration:none; border-bottom:1px solid #2a2a2a; }
  #header-menu-panel a:last-child{ border-bottom:0; }
  #header-menu-panel a:hover{ color:#fff; background:#2a2a2a; }

  /* Overlay para escurecer fundo quando o menu estiver aberto */
  #DeactivationContainer {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.65) !important;
    z-index: 2000 !important; /* abaixo do menu */
    display: none;
  }

  /* Oculta o bloco antigo de Boosted no mobile para evitar duplicação com os chips */
  #RightArtwork{ display:none !important; }
  #RightArtwork #Pedestal,
  #RightArtwork #Monster,
  #RightArtwork #Boss{ display:none !important; }
  .Themebox, .Themeboxes{ display:none !important; }
  .TopbarCorner-tl, .TopbarCorner-tr { display:none !important; }

  /* Container principal fluido */
  .main-site-container{ padding: 0 var(--m-space-2); gap: var(--m-space-3); }

  /* Remover qualquer linha/borda indesejada no header no mobile */
  #TopbarCompanyServers,
  #TopbarCompanyServers .TopbarContent,
  .TopbarContainer{ border:0 !important; box-shadow:none !important; background-image:none !important; }
  .main-header{ border:0 !important; box-shadow:none !important; background:none !important; }

  /* Estilização dos chips de Boosted (ícone + texto alinhados) */
  .BoostedStrip .chip{ display:flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid var(--m-border); border-radius:999px; background:var(--m-color-surface-2); position:relative; line-height:1; }
  .BoostedStrip .chip img{ height:18px; width:auto; display:block; }
  /* Status chip (primeiro) — cor neutra e peso igual aos demais */
  #MobileBoostedStrip .chip:first-child{ background: var(--m-color-surface-2); color: var(--m-color-text); border-color: var(--m-border); }
  /* Destacar status online em verde */
  #MobileBoostedStrip .chip.status-online{ background: rgba(0,128,0,.12); border-color: rgba(0,128,0,.45); color: #31d158; }
  /* Nome oculto por padrão para não quebrar layout */
  .BoostedStrip .chip span{ display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.9); color:var(--m-color-text); border:1px solid var(--m-border); border-radius:6px; padding:6px 8px; font-size:12px; white-space:nowrap; margin-bottom:8px; box-shadow:var(--m-shadow); z-index:5; }
  /* Exibe o nome apenas em interação (hover/active/focus) */
  .BoostedStrip .chip:hover span,
  .BoostedStrip .chip:active span,
  .BoostedStrip .chip:focus-within span{ display:block; }
}