/* ==========================================================================
   BAIAK MINIMALIST - PACOTE MOBILE 2026  [20/10/2026 mobile]
   --------------------------------------------------------------------------
   Pedido do dono: "dar uma hiper melhorada e atualizada e claro embelezada
   no site via celular". O PC fica EXATAMENTE como esta:
     - TODA regra deste arquivo mora dentro de @media (max-width: 860px|980px).
     - A barra fixa do topo (#bmMbar) vem do layout.php com style="display:none";
       so este arquivo a mostra, e so no celular.

   POR QUE TUDO ESTA DENTRO DE @layer eclipse COM !important
   O tema (css/eclipse.css) pinta com !important dentro de @layer eclipse.
   Pela regra das camadas, !important de camada vence !important fora dela, e
   dentro da MESMA camada vence quem vem depois. Este arquivo e o ultimo a
   carregar, entao aqui ele ganha sem guerra de seletor.

   CUIDADO (mesma regra do eclipse.css): nada de display !important em coisa
   que o JavaScript esconde/mostra com style.display (linhas das tabelas com
   busca, cartoes filtrados, faixa da promo que some quando acaba). Nesses,
   so cor/borda/espaco/fonte.

   Como desligar: tirar o <link> de /css/mobile_2026.css do layout.php
   (ou abrir qualquer pagina com ?semmobile=1 para comparar).
   ========================================================================== */

@layer eclipse {

/* ------------------------------------------------------------------------
   0) TOKENS do celular
   ------------------------------------------------------------------------ */
@media (max-width: 980px) {
  html[data-tema="eclipse"] {
    --m-bar-h: 56px;
    --m-gut: 12px;                       /* respiro lateral padrao */
    --m-radius: 14px;
    --m-card: linear-gradient(180deg, rgba(20,24,34,.94), rgba(11,13,18,.96));
    --m-line: rgba(140,152,178,.16);
    --m-line-hi: rgba(111,190,224,.45);
    --m-ice: #6FBEE0;
    --m-ice-2: #45A4CD;
    --m-gold: #E3C38F;
    --m-text: #E6E9F0;
    --m-text-2: #B6BDCC;
    --m-muted: #8C95A8;
  }
  html[data-tema="eclipse"] body { -webkit-tap-highlight-color: rgba(111,190,224,.18); text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
}

/* ------------------------------------------------------------------------
   1) BARRA FIXA DO TOPO + BOTAO MENU (dono: "o botao de abrir os menus
      esta meio escondido" e "fica por cima do texto quando rola")
      Agora: barra fina e opaca, botao com nome "Menu", logo no meio e o
      numero de jogadores online a direita. O conteudo nunca passa por baixo
      de um botao solto: ele rola por baixo de uma barra inteira.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] body { padding-top: var(--m-bar-h) !important; }
  /* link pra uma ancora (#grupo-1 etc.) nao para escondido embaixo da barra */
  html[data-tema="eclipse"] { scroll-padding-top: calc(var(--m-bar-h) + 10px); }

  html[data-tema="eclipse"] #bmMbar {
    display: flex !important;
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 10002 !important;
    height: var(--m-bar-h) !important; box-sizing: border-box !important;
    align-items: center !important; justify-content: flex-end !important;
    padding: 0 10px 0 0 !important; margin: 0 !important;
    background: linear-gradient(180deg, rgba(10,12,18,.97), rgba(8,10,14,.93)) !important;
    border-bottom: 1px solid rgba(111,190,224,.20) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,.50) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  }
  html[data-tema="eclipse"] #bmMbar .bm-mbar-logo {
    position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important;
    display: block !important; width: 46px !important; height: 46px !important; line-height: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  }
  html[data-tema="eclipse"] #bmMbar .bm-mbar-logo img {
    width: 46px !important; height: 46px !important; max-width: none !important; object-fit: contain !important;
    filter: drop-shadow(0 0 10px rgba(111,190,224,.35)) !important;
  }
  html[data-tema="eclipse"] #bmMbar .bm-mbar-online {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    min-height: 36px !important; padding: 0 11px !important; border-radius: 999px !important;
    text-decoration: none !important; white-space: nowrap !important;
    background: rgba(56,179,108,.10) !important; border: 1px solid rgba(56,179,108,.38) !important;
    color: #9FE0BC !important; -webkit-text-fill-color: #9FE0BC !important;
    font: 600 12px/1 'Inter', system-ui, sans-serif !important; letter-spacing: .02em !important;
  }
  html[data-tema="eclipse"] #bmMbar .bm-mbar-online b {
    font-weight: 800 !important; font-size: 14px !important; color: #E9FFF3 !important; -webkit-text-fill-color: #E9FFF3 !important;
    font-variant-numeric: tabular-nums;
  }
  html[data-tema="eclipse"] #bmMbar .bm-mbar-online i {
    display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: #38B36C !important; box-shadow: 0 0 8px rgba(56,179,108,.95) !important;
    animation: bmMbarPulse 1.8s ease-in-out infinite;
  }

  /* o botao: pilula com as 3 linhas + a palavra "Menu" (vira X + "Fechar") */
  html[data-tema="eclipse"] .bm-hamburger {
    display: grid !important;
    grid-template-columns: 18px auto !important; grid-template-rows: 2px 2px 2px !important;
    row-gap: 4px !important; column-gap: 9px !important; align-content: center !important; align-items: center !important;
    position: fixed !important; top: 8px !important; left: 10px !important; z-index: 10003 !important;
    width: auto !important; height: 40px !important; min-width: 0 !important; margin: 0 !important;
    padding: 0 15px 0 13px !important; box-sizing: border-box !important; border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(69,164,205,.26), rgba(69,164,205,.10)) !important;
    border: 1px solid rgba(111,190,224,.60) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 16px rgba(69,164,205,.28) !important;
    cursor: pointer !important;
  }
  html[data-tema="eclipse"] .bm-hamburger span {
    grid-column: 1 !important; display: block !important; width: 18px !important; height: 2px !important;
    flex: none !important; margin: 0 !important; border-radius: 2px !important;
    background: #EAF6FC !important;
  }
  html[data-tema="eclipse"] .bm-hamburger span:nth-child(1) { grid-row: 1 !important; }
  html[data-tema="eclipse"] .bm-hamburger span:nth-child(2) { grid-row: 2 !important; }
  html[data-tema="eclipse"] .bm-hamburger span:nth-child(3) { grid-row: 3 !important; }
  html[data-tema="eclipse"] .bm-hamburger::after {
    content: "Menu"; grid-column: 2 !important; grid-row: 1 / 4 !important;
    font: 700 13px/1 'Inter', system-ui, sans-serif !important; letter-spacing: .10em !important; text-transform: uppercase !important;
    color: #EAF6FC !important; -webkit-text-fill-color: #EAF6FC !important;
  }
  html[data-tema="eclipse"] body.bm-drawer-open .bm-hamburger::after { content: "Fechar"; }
  html[data-tema="eclipse"] body.bm-drawer-open .bm-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  html[data-tema="eclipse"] body.bm-drawer-open .bm-hamburger span:nth-child(2) { opacity: 0 !important; }
  html[data-tema="eclipse"] body.bm-drawer-open .bm-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }
  html[data-tema="eclipse"] .bm-hamburger:active { transform: scale(.97); }

  /* as faixas de promo que grudam no topo passam a grudar embaixo da barra */
  html[data-tema="eclipse"] #bmTopPromo,
  html[data-tema="eclipse"] #bm7set { top: var(--m-bar-h) !important; }
}
@keyframes bmMbarPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------------------------------
   2) GAVETA DO MENU: comeca embaixo da barra, UM botao de fechar so
      (o "x" pequeno da direita sai; o botao Menu vira "Fechar")
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] #bmDrawerClose { display: none !important; }
  html[data-tema="eclipse"] .bm-drawer-overlay { top: var(--m-bar-h) !important; background: rgba(4,5,8,.72) !important; }
  html[data-tema="eclipse"] .bm-layout .bm-sidebar.bm-left {
    top: var(--m-bar-h) !important;
    height: calc(100vh - var(--m-bar-h)) !important; max-height: calc(100vh - var(--m-bar-h)) !important;
    height: calc(100dvh - var(--m-bar-h)) !important; max-height: calc(100dvh - var(--m-bar-h)) !important;
    width: min(88vw, 360px) !important;
    padding: 14px 14px calc(28px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    border-right: 1px solid rgba(111,190,224,.22) !important;
    background: linear-gradient(180deg, #10131B 0%, #0B0D12 70%) !important;
  }
  html[data-tema="eclipse"] .bm-left .bm-play,
  html[data-tema="eclipse"] .bm-left .bm-create-account,
  html[data-tema="eclipse"] .bm-left .bm-download { min-height: 48px !important; border-radius: 12px !important; margin: 0 !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu { gap: 8px !important; margin-top: 4px !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu-group {
    border-radius: 12px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
    border: 1px solid var(--m-line) !important;
    background: rgba(255,255,255,.02) !important;
  }
  html[data-tema="eclipse"] .bm-left .bm-menu-group.is-open { padding-bottom: 6px !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu-group.is-open { border-color: var(--m-line-hi) !important; background: rgba(69,164,205,.05) !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu-group h2 { margin: 0 !important; border: 0 !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu-toggle { min-height: 50px !important; padding: 0 16px !important; border-bottom: 0 !important; }
  /* links do submenu: altura de toque de 44px por padding (NAO mexer no display:
     e ele que abre/fecha o grupo) */
  html[data-tema="eclipse"] .bm-left .bm-menu-link {
    min-height: 0 !important; padding: 12px 40px 12px 18px !important; margin: 0 !important; line-height: 20px !important;
    font-size: 14.5px !important; border-top: 1px solid rgba(255,255,255,.04) !important; position: relative !important;
  }
  html[data-tema="eclipse"] .bm-left .bm-menu-link::after { top: calc(50% - 6.5px) !important; margin-top: 0 !important; transform: none !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu-link.is-current { background: rgba(69,164,205,.10) !important; box-shadow: inset 3px 0 0 var(--m-ice) !important; }
  html[data-tema="eclipse"] .bm-left .bm-menu-subhead { padding: 12px 16px 4px 18px !important; font-size: 11px !important; letter-spacing: .14em !important; }
}

/* ------------------------------------------------------------------------
   3) BARRA INFERIOR: mais "app" (vidro escuro, item ativo com marca ciano)
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] body { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  html[data-tema="eclipse"] .bm-bottom-nav {
    height: 60px !important;
    background: linear-gradient(180deg, rgba(12,14,20,.96), rgba(6,7,10,.98)) !important;
    border-top: 1px solid rgba(111,190,224,.18) !important;
    box-shadow: 0 -8px 26px rgba(0,0,0,.55) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  html[data-tema="eclipse"] .bm-bottom-nav a { min-height: 60px !important; gap: 3px !important; position: relative !important; color: #9AA3B5 !important; }
  html[data-tema="eclipse"] .bm-bottom-nav a small { font: 600 11px/1 'Inter', system-ui, sans-serif !important; letter-spacing: .02em !important; color: inherit !important; }
  html[data-tema="eclipse"] .bm-bottom-nav a span { font-size: 21px !important; line-height: 1 !important; }
  html[data-tema="eclipse"] .bm-bottom-nav a.is-active {
    color: #EAF6FC !important; background: linear-gradient(180deg, rgba(69,164,205,.16), rgba(69,164,205,0)) !important;
    box-shadow: inset 0 2px 0 var(--m-ice) !important;
  }
  html[data-tema="eclipse"] .bm-bottom-nav a.is-active small { color: var(--m-ice) !important; }
  /* botao "voltar ao topo" acima da barra inferior */
  html[data-tema="eclipse"] .bmx-top { bottom: calc(76px + env(safe-area-inset-bottom)) !important; right: 12px !important; }
}

/* ------------------------------------------------------------------------
   4) CABECALHO (todas as paginas)
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] .bm-shell { padding-top: 10px !important; }
  html[data-tema="eclipse"] .bm-header { gap: 10px !important; margin-bottom: 12px !important; }

  /* bandeiras: alvo de toque de verdade */
  html[data-tema="eclipse"] .bm-header .bm-v2-langs { gap: 10px !important; }
  html[data-tema="eclipse"] .bm-header .bm-v2-langs a {
    min-width: 46px !important; min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 10px !important;
  }

  /* links oficiais: 2 x 2, uma linha cada, letra legivel (era 10px quebrando em 2 linhas) */
  html[data-tema="eclipse"] .bm-serverbar { padding: 10px !important; gap: 10px !important; border-radius: var(--m-radius) !important; }
  html[data-tema="eclipse"] .bm-serverbar-socials { gap: 8px !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  html[data-tema="eclipse"] .bm-serverbar-socials a.bm-social-link {
    min-height: 42px !important; padding: 0 10px !important; gap: 7px !important; justify-content: flex-start !important;
    border-radius: 12px !important; box-sizing: border-box !important;
  }
  html[data-tema="eclipse"] .bm-serverbar-socials a.bm-social-link strong {
    font: 700 11.5px/1.18 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
    white-space: normal !important; overflow: hidden !important; min-width: 0 !important; text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  html[data-tema="eclipse"] .bm-serverbar-socials a.bm-social-link > span { flex: 0 0 auto !important; }

  /* promo: duas linhas enxutas (selo + 6x + texto / relogio + botao) */
  html[data-tema="eclipse"] .bm-v2-promo {
    flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
    gap: 6px 10px !important; padding: 10px 12px !important; border-radius: var(--m-radius) !important;
  }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-tag { font-size: 11.5px !important; }
  html[data-tema="eclipse"] .bm-v2-promo > * { letter-spacing: .04em !important; }
  /* quebra de linha fixa: [selo 6x texto] / [relogio botao] */
  html[data-tema="eclipse"] .bm-v2-promo::before { content: "" !important; order: 2 !important; flex: 0 0 100% !important; height: 0 !important; margin: 0 !important; }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-clock,
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-cta { order: 3 !important; }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-cta { min-height: 36px !important; display: inline-flex !important; align-items: center !important; }

  /* PvP ao vivo: as duas mortes ficavam uma POR CIMA da outra na troca
     (a que saia descia enquanto a que entrava subia, as duas a 50%).
     Agora a que sai some rapido pra cima e so depois a nova entra. */
  html[data-tema="eclipse"] .bm-live-feed { height: 52px !important; border-radius: 12px !important; }
  html[data-tema="eclipse"] .bm-live-label { font-size: 10px !important; letter-spacing: .14em !important; }
  html[data-tema="eclipse"] .bm-live-row {
    top: 25px !important; transform: translateY(-8px) !important; opacity: 0 !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }
  html[data-tema="eclipse"] .bm-live-row.bm-live-on {
    transform: translateY(0) !important; opacity: 1 !important;
    transition: opacity .32s ease .22s, transform .32s ease .22s !important;
  }
  html[data-tema="eclipse"] .bm-live-k { font-size: 14px !important; }
  html[data-tema="eclipse"] .bm-live-v { font-size: 13px !important; }
  html[data-tema="eclipse"] .bm-live-verb, html[data-tema="eclipse"] .bm-live-lvl { font-size: 12px !important; }
  html[data-tema="eclipse"] .bm-live-card { border-radius: 12px !important; padding: 8px 10px !important; }
  html[data-tema="eclipse"] .bm-live-cap { font-size: 10px !important; letter-spacing: .10em !important; }
  html[data-tema="eclipse"] .bm-live-sub { font-size: 11.5px !important; }
  html[data-tema="eclipse"] .bm-live-val { font-size: 14px !important; }
  html[data-tema="eclipse"] a.bm-live-val { display: block !important; min-height: 22px !important; line-height: 22px !important; }
}
@media (max-width: 400px) {
  /* 360px: a faixa da promo virava 4 linhas */
  html[data-tema="eclipse"] .bm-v2-promo { gap: 6px 8px !important; padding: 9px 10px !important; }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-tag { font-size: 10.5px !important; padding-left: 9px !important; padding-right: 9px !important; letter-spacing: .02em !important; }
  html[data-tema="eclipse"] .bm-v2-promo strong { font-size: 22px !important; }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-txt { font-size: 12px !important; letter-spacing: .01em !important; }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-clock { font-size: 12px !important; letter-spacing: 0 !important; padding: 5px 8px !important; }
  html[data-tema="eclipse"] .bm-v2-promo .bm-v2-promo-cta { font-size: 12px !important; letter-spacing: .02em !important; padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  html[data-tema="eclipse"] .bm-live-row, html[data-tema="eclipse"] .bm-live-row.bm-live-on { transition: none !important; }
}

/* ------------------------------------------------------------------------
   5) PAGINAS INTERNAS: conteudo primeiro.
      Antes, toda pagina abria com ~730px de cabecalho (logo, grupos, promo,
      PvP, numeros) e o conteudo so aparecia depois de rolar uma tela inteira.
      Agora, fora da home: barra do topo (logo + online), a faixa da promo e o
      PvP ao vivo numa linha, e logo em seguida o conteudo. Os grupos, os
      cartoes "mais letal/proximo evento", os numeros e as bandeiras descem
      pro rodape da pagina. Nada some, so muda de lugar.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-shell {
    display: flex !important; flex-direction: column !important; gap: 10px !important;
  }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-shell > .bm-header,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-header > .bm-serverbar,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-serverbar > .bm-live-strip { display: contents !important; }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-header > .bm-logo { display: none !important; }

  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-serverbar > .bm-v2-promo,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-live-strip > .bm-live-feed,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-shell > .bm-layout,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-serverbar > .bm-serverbar-socials,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-live-strip > .bm-live-cards,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-header > .bm-v2-server,
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-header > .bm-v2-langs {
    flex: none !important; margin-left: 8px !important; margin-right: 8px !important; margin-top: 0 !important; margin-bottom: 0 !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; align-self: stretch !important;
  }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-serverbar > .bm-v2-promo { order: 1 !important; }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-live-strip > .bm-live-feed { order: 2 !important; }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-shell > .bm-layout { order: 3 !important; margin: 4px 0 0 !important; width: auto !important; }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-serverbar > .bm-serverbar-socials {
    order: 4 !important; padding: 10px !important; border-radius: var(--m-radius) !important;
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
  }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-live-strip > .bm-live-cards { order: 5 !important; }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-header > .bm-v2-server { order: 6 !important; }
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-header > .bm-v2-langs { order: 7 !important; justify-content: center !important; padding-bottom: 6px !important; }
  /* a coluna da direita (Boost, Top 5, castelos) fecha a pagina antes do rodape */
  html[data-tema="eclipse"] body:not(.bm-page-latestnews) .bm-layout { padding-bottom: 0 !important; }
}

/* ------------------------------------------------------------------------
   6) HOME: carrossel de banners
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] .bm-season-news { border-radius: var(--m-radius) !important; }
  /* o carrossel tinha altura travada em 240px: o texto de baixo do banner
     (ex.: "TODO SABADO E DOMINGO") passava da borda e era cortado */
  html[data-tema="eclipse"] .bm-season-news,
  html[data-tema="eclipse"] #bmSeasonSlider,
  html[data-tema="eclipse"] .bm-season-track { height: auto !important; max-height: none !important; min-height: 0 !important; }
  html[data-tema="eclipse"] .bm-season-slide { min-height: 230px !important; }
  /* selo "15/10 · expira em 1d 9h" ficava por cima da etiqueta (ANTI-MC):
     o slide reserva a faixa de cima pro selo */
  html[data-tema="eclipse"] .bm-season-slide:has(> .bm-season-expiry) { padding-top: 44px !important; }
  html[data-tema="eclipse"] .bm-season-slide { height: auto !important; padding-bottom: 16px !important; }
  html[data-tema="eclipse"] .bm-season-expiry { top: 12px !important; left: 12px !important; font-size: 10.5px !important; }
  html[data-tema="eclipse"] .bm-season-copy span { font-size: 11px !important; }
  /* bolinhas: saem de cima do texto (cobriam "TODO SABADO E DOMINGO") e vao pra
     uma faixa propria embaixo do banner; menores, pra caber 20 numa linha */
  html[data-tema="eclipse"] .bm-season-slider { display: flex !important; flex-direction: column !important; }
  html[data-tema="eclipse"] .bm-season-dots {
    position: static !important; inset: auto !important; transform: none !important;
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important;
    gap: 6px 5px !important; width: auto !important; max-width: 100% !important;
    padding: 10px 12px 12px !important; margin: 0 !important; box-sizing: border-box !important;
  }
  html[data-tema="eclipse"] .bm-season-dots button {
    width: 10px !important; height: 6px !important; min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; border-radius: 999px !important; flex: none !important;
  }
  html[data-tema="eclipse"] .bm-season-dots button.is-active { width: 26px !important; }
}

/* ------------------------------------------------------------------------
   7) HOME: HALL DA FAMA - os 5 de cada ranking numa linha so
      (dono: "esses tops ai tudo numa linha seria melhor")
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html.bm-home-v2[data-tema="eclipse"] .bm-hall { border-radius: var(--m-radius) !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-panel { padding: 6px 8px 10px !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-panel + .bm-hall-panel { padding-top: 14px !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-sub {
    flex-direction: column !important; gap: 2px !important; margin: 0 0 14px !important; text-align: center !important;
    font-size: 11.5px !important; line-height: 1.3 !important;
  }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-sub b { font-size: 14.5px !important; line-height: 1.2 !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-cards {
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important; justify-content: stretch !important; flex-wrap: nowrap !important;
    width: 100% !important; margin: 4px 0 2px !important;
  }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-cards > .bm-hc {
    flex: none !important; width: auto !important; min-width: 0 !important;
    padding: 22px 3px 8px !important; gap: 4px !important; border-radius: 10px !important;
  }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-pos { top: 5px !important; font-size: 10px !important; padding: 2px 6px !important; min-width: 22px !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-crown { top: -11px !important; font-size: 14px !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-av { width: 100% !important; max-width: 56px !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 9px !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-av.is-letter { font-size: 19px !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-nm { font-size: 10.5px !important; line-height: 1.2 !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-val { font-size: 12px !important; line-height: 1.15 !important; white-space: normal !important; text-align: center !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hc-val small { display: block !important; font-size: 9px !important; letter-spacing: .05em !important; }
  /* o 1o lugar se destaca um pouco mais */
  html.bm-home-v2[data-tema="eclipse"] .bm-hall .bm-hc.bm-hc-p1 { box-shadow: 0 0 18px rgba(243,213,140,.28), inset 0 0 0 1px rgba(243,213,140,.35) !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-hall-more { min-height: 38px !important; display: inline-flex !important; align-items: center !important; }
}

/* ------------------------------------------------------------------------
   8) COLUNA DA DIREITA (Boost, Top 5, castelos) - vira lista de cartoes
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  html[data-tema="eclipse"] .bm-sidebar.bm-right { gap: 10px !important; }
  html[data-tema="eclipse"] .bm-sidebar.bm-right .bm-widget { border-radius: var(--m-radius) !important; margin: 0 !important; }
  html[data-tema="eclipse"] .bm-sidebar.bm-right .bm-widget > h2 { min-height: 50px !important; }
  html[data-tema="eclipse"] .bm-boost-more { display: inline-flex !important; align-items: center !important; min-height: 40px !important; font-size: 12px !important; }
}

/* ------------------------------------------------------------------------
   9) MIOLO DAS PAGINAS (vale pra todas)
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* grade de 1 coluna que nao estoura a tela (o Characters passava 4px da borda
     em 360px porque a coluna travava na largura minima do filho) */
  html[data-tema="eclipse"] body.ec-dark .bm-info-page { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-tema="eclipse"] body.ec-dark .bm-info-page > * { min-width: 0 !important; max-width: 100% !important; }
  html[data-tema="eclipse"] body.ec-dark .bm-content { border-radius: var(--m-radius) !important; }
  /* imagem nunca maior que a tela */
  html[data-tema="eclipse"] body.ec-dark .bm-content img { max-width: 100%; }
  html[data-tema="eclipse"] body.ec-dark .bm-content img[width] { height: auto; }
  /* tabelas: numeros alinhados e cabecalho que nao quebra no meio da palavra ("Ra/nk") */
  html[data-tema="eclipse"] body.ec-dark .bm-content table th { white-space: nowrap !important; }
  html[data-tema="eclipse"] body.ec-dark .bm-content table td { font-variant-numeric: tabular-nums; }
  /* busca automatica das tabelas (bmx) */
  html[data-tema="eclipse"] body.ec-dark .bmx-tools { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; }
  html[data-tema="eclipse"] body.ec-dark .bmx-tools .bmx-search { flex: 1 1 auto !important; min-width: 0 !important; min-height: 44px !important; font-size: 16px !important; border-radius: 12px !important; }
  html[data-tema="eclipse"] body.ec-dark .bmx-tools .bmx-count { flex: 0 0 auto !important; white-space: nowrap !important; }
  /* campos de formulario com 16px: o iPhone nao da zoom sozinho ao tocar */
  html[data-tema="eclipse"] body.ec-dark .bm-content input[type="text"],
  html[data-tema="eclipse"] body.ec-dark .bm-content input[type="search"],
  html[data-tema="eclipse"] body.ec-dark .bm-content input[type="password"],
  html[data-tema="eclipse"] body.ec-dark .bm-content input[type="email"],
  html[data-tema="eclipse"] body.ec-dark .bm-content input[type="number"],
  html[data-tema="eclipse"] body.ec-dark .bm-content select { font-size: 16px !important; min-height: 44px !important; }

  /* lista de beneficios (vida/mana/skill...) usada no Shop, Bolao e Addons:
     a lista tinha recuo de 24px e cada item virava uma "bolha" de 3 linhas */
  html[data-tema="eclipse"] body.ec-dark .bmb-l {
    padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: row !important;
    flex-wrap: wrap !important; gap: 5px !important; list-style: none !important;
  }
  html[data-tema="eclipse"] body.ec-dark .bmb-l > li {
    display: inline-block !important; margin: 0 !important; padding: 3px 8px !important;
    font-size: 11.5px !important; line-height: 1.3 !important; border-radius: 8px !important;
    white-space: normal !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  html[data-tema="eclipse"] body.ec-dark .bmb-n { font-size: 12px !important; line-height: 1.4 !important; }
}

/* ------------------------------------------------------------------------
   10) SHOP
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* a pagina do shop tinha 18px de recuo dentro do quadro (que ja tem 8px): os cartoes
     ficavam com 274px numa tela de 360px */
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-page { width: auto !important; max-width: none !important; padding: 8px 0 24px !important; margin: 0 -2px !important; box-sizing: border-box !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-hero { padding: 18px 14px 14px !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-page > .bm-system-message { width: auto !important; margin: 0 0 14px !important; box-sizing: border-box !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-hero h1 { font-size: 24px !important; line-height: 1.15 !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-topbar { margin: 0 0 12px !important; gap: 10px !important; }
  /* 15 abas: eram 15 botoes de largura inteira (700px de altura).
     Agora e uma nuvem de "chips" que cabe em 4-5 linhas. */
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-tabs {
    flex-wrap: wrap !important; justify-content: center !important; gap: 7px !important; padding: 10px !important;
    border-radius: var(--m-radius) !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-tabs .bm-shop-tab {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important;
    min-height: 40px !important; padding: 0 14px !important; border-radius: 999px !important;
    font-size: 13.5px !important; line-height: 1 !important; white-space: nowrap !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-tabs .bm-shop-tab.tem-promo { padding-right: 14px !important; }
  /* busca */
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-find { margin: 0 !important; padding: 0 !important; gap: 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html[data-tema="eclipse"] body.bm-page-shop #bmShopSearch { min-height: 46px !important; border-radius: 12px !important; font-size: 16px !important; flex: 1 1 auto !important; min-width: 0 !important; }
  html[data-tema="eclipse"] body.bm-page-shop #bmShopFindClear { min-width: 46px !important; min-height: 46px !important; border-radius: 12px !important; }
  /* barra do carrinho: estava quebrada no celular (saldo espremido em 13px,
     botoes encavalados). Agora 2 x 2: saldo | carrinho / so o que falta | tudo da aba */
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-cart-strip {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important; padding: 10px !important; width: 100% !important; box-sizing: border-box !important;
    border-radius: var(--m-radius) !important; align-items: stretch !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-cart-strip > * {
    min-width: 0 !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important;
    min-height: 46px !important; border-radius: 12px !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-cart-strip .bm-shop-balance {
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
    padding: 4px 8px !important; border: 1px solid var(--m-line) !important; border-right: 1px solid var(--m-line) !important;
    background: rgba(0,0,0,.25) !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-cart-strip .bm-shop-balance small { font-size: 10px !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-cart-strip .bm-shop-balance strong { font-size: 18px !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-cart-strip button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    padding: 6px 10px !important; font-size: 12.5px !important; line-height: 1.15 !important; white-space: normal !important; text-align: center !important;
  }
  /* cartoes: um embaixo do outro, mas DEITADOS (foto a esquerda, texto a direita).
     Cada cartao tinha ~450px de altura; agora ~250px. Os escondidos pela aba/busca
     (.is-shop-hidden / .is-find-hidden) ficam de fora deste seletor de proposito. */
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-grid { margin: 0 !important; gap: 10px !important; grid-template-columns: minmax(0, 1fr) !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer:not(.is-shop-hidden):not(.is-find-hidden) {
    display: grid !important; grid-template-columns: 74px minmax(0, 1fr) auto !important; grid-auto-rows: auto !important;
    column-gap: 12px !important; row-gap: 6px !important; align-content: start !important; align-items: start !important;
    padding: 12px !important; text-align: left !important; min-height: 0 !important; height: auto !important;
    border-radius: var(--m-radius) !important; position: relative !important; overflow: hidden !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > * { grid-column: 2 / -1 !important; margin: 0 !important; min-width: 0 !important; text-align: left !important; justify-self: stretch !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-shop-offer-img {
    grid-column: 1 !important; grid-row: 1 / span 4 !important;
    width: 74px !important; height: 74px !important; min-height: 74px !important; padding: 4px !important; box-sizing: border-box !important;
    border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-shop-offer-img img { max-width: 64px !important; max-height: 64px !important; width: auto !important; height: auto !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-shop-new-badge { grid-column: auto !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > span:not(.bm-shop-new-badge) { justify-self: start !important; max-width: 100% !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > h4 {
    font-size: 15px !important; line-height: 1.25 !important; min-height: 0 !important; display: block !important;
    padding-right: 38px !important; text-align: left !important; justify-content: flex-start !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > p { font-size: 12.5px !important; line-height: 1.45 !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bmb { align-items: flex-start !important; text-align: left !important; gap: 6px !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer .bmb-l { justify-content: flex-start !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer .bmb-n { margin: 0 !important; text-align: left !important; min-height: 0 !important; height: auto !important; }
  /* painel do carrinho (fixo no topo): comeca embaixo da barra do topo */
  html[data-tema="eclipse"] body.bm-page-shop #bmCartPanel { padding-top: calc(var(--m-bar-h) + 10px) !important; padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  /* rodape do cartao numa linha so: tipo + preco a esquerda, botao a direita */
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-shop-meta {
    grid-column: 1 / 3 !important; align-self: center !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 1px !important;
    padding-top: 10px !important; margin-top: 4px !important; border-top: 1px solid var(--m-line) !important;
  }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-shop-meta span { font-size: 11px !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-shop-meta strong { font-size: 17px !important; line-height: 1.15 !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > .bm-add-cart,
  html[data-tema="eclipse"] body.bm-page-shop .bm-shop-offer > button {
    grid-column: 3 !important; align-self: end !important; justify-self: end !important;
    min-height: 44px !important; width: auto !important; min-width: 128px !important; padding: 0 18px !important;
    margin-top: 4px !important; border-radius: 12px !important; text-align: center !important;
  }
  /* separadores das safiras ocupam a linha inteira */
  html[data-tema="eclipse"] body.bm-page-shop .bm-saf-sep { grid-column: 1 / -1 !important; }
  html[data-tema="eclipse"] body.bm-page-shop .bm-mf-btn,
  html[data-tema="eclipse"] body.bm-page-shop .bm-sf-btn { min-height: 38px !important; border-radius: 999px !important; }
}

/* ------------------------------------------------------------------------
   11) HIGHSCORES
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* 13 categorias: de 2 colunas altas para 3 colunas compactas */
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-tabs {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important;
  }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-tabs a {
    min-height: 40px !important; padding: 0 6px !important; gap: 5px !important; font-size: 12px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    white-space: nowrap !important; overflow: hidden !important; border-radius: 10px !important; box-sizing: border-box !important;
  }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-tabs a img { width: 16px !important; height: 16px !important; flex: none !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-tabs a:last-child:nth-child(3n+1) { grid-column: 1 / -1 !important; }
  /* podio: os 3 lado a lado, o 1o no meio e mais alto (era 1 embaixo do outro, 650px) */
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important;
    align-items: end !important; padding-top: 18px !important;
  }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-slot {
    margin: 0 !important; min-width: 0 !important; width: auto !important; transform: none !important;
    padding: 26px 6px 10px !important; gap: 3px !important; border-radius: 12px !important; text-align: center !important;
  }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-2 { order: 1 !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-1 { order: 2 !important; padding-top: 34px !important; padding-bottom: 16px !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-3 { order: 3 !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-medal {
    width: 36px !important; height: 36px !important; font-size: 20px !important; top: -18px !important; line-height: 36px !important;
  }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-name {
    font-size: 12.5px !important; line-height: 1.2 !important; overflow-wrap: anywhere !important; display: block !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100% !important;
  }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-1 .bm-rank-podium-name { font-size: 13.5px !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-value { font-size: 20px !important; line-height: 1.1 !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-1 .bm-rank-podium-value { font-size: 24px !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-value small { display: block !important; font-size: 10px !important; letter-spacing: .1em !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-guild { max-width: 100% !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-podium-guild a {
    font-size: 10.5px !important; padding: 2px 7px !important; display: inline-block !important; max-width: 100% !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; vertical-align: top !important;
  }
  /* tabela: a coluna Guild ficava cortada pra fora da tela (so dava pra ver
     arrastando de lado) e o nome da guild quebrava a linha em 2. Agora as 4
     colunas cabem: largura fixa pra Rank/Level, nome e guild com "..." */
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table { display: table !important; table-layout: fixed !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table th:nth-child(1) { width: 54px !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table th { font-size: 11.5px !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table th:nth-child(3) { width: 58px !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table th:nth-child(4) { width: 29% !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table th,
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table td { padding-left: 6px !important; padding-right: 6px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table td:nth-child(4) a { font-size: 12px !important; }
  /* tabela: linhas da mesma altura, sem quebra */
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table td { padding-top: 10px !important; padding-bottom: 10px !important; vertical-align: middle !important; line-height: 1.25 !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table .bm-rank-name-cell { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table .bm-rank-name-cell a { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table .bm-rank-name-cell img { flex: none !important; }
  html[data-tema="eclipse"] body.bm-page-highscores .bm-rank-table .bm-rank-pos-cell { width: 44px !important; text-align: center !important; }
}

/* ------------------------------------------------------------------------
   12) CHARACTERS
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* abas do personagem: de 3 linhas para chips em 2 linhas */
  html[data-tema="eclipse"] body.bm-page-characters .bm-char-tabnav {
    flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; padding: 6px !important;
    border-radius: var(--m-radius) !important;
  }
  html[data-tema="eclipse"] body.bm-page-characters .bm-character-page .bm-char-tabnav .bm-char-tab {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 40px !important; padding: 0 15px !important;
    font-size: 13px !important; border-radius: 999px !important; margin: 0 !important;
    background: rgba(255,255,255,.03) !important; border: 1px solid var(--m-line) !important; border-style: solid !important;
  }
  html[data-tema="eclipse"] body.bm-page-characters .bm-character-page .bm-char-tabnav .bm-char-tab.is-active { border-color: var(--m-line-hi) !important; }
  html[data-tema="eclipse"] body.bm-page-characters .bm-character-page .bm-char-tabnav .bm-char-tab::after { display: none !important; }
  html[data-tema="eclipse"] body.bm-page-characters .bm-char-search-form,
  html[data-tema="eclipse"] body.bm-page-characters .bm-char-search-box { max-width: 100% !important; box-sizing: border-box !important; }
  html[data-tema="eclipse"] body.bm-page-characters .bm-character-hero { padding: 18px 14px !important; }
}

/* ------------------------------------------------------------------------
   13) AJUSTES FINOS: numeros do topo, alvos de toque, paginas da Library
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* "jogadores online" / "IPs unicos" estavam em 8px */
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-stat span { font-size: 10.5px !important; letter-spacing: .06em !important; }
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-stat strong { font-size: 24px !important; }
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-ip span { font-size: 10.5px !important; }
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-ip strong { font-size: 14px !important; }
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-ip small,
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-ip em { font-size: 11px !important; }
  html[data-tema="eclipse"] .bm-v2-stats .bm-v2-ip { min-height: 56px !important; }
  html[data-tema="eclipse"] .bm-header .bm-v2-langs a { min-height: 38px !important; }
  html[data-tema="eclipse"] a.bm-live-val { min-height: 28px !important; line-height: 28px !important; }

  /* Library (Daily Bosses, Coliseum...): os filtros por secao viravam blocos
     enormes em letra de titulo; agora sao chips */
  html[data-tema="eclipse"] body.ec-dark .bml-chips { gap: 6px !important; justify-content: flex-start !important; }
  html[data-tema="eclipse"] body.ec-dark .bml-chips .bml-chip {
    flex: 0 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important;
    min-height: 38px !important; padding: 7px 13px !important; box-sizing: border-box !important;
    font: 600 12.5px/1.25 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
    text-align: left !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; gap: 7px !important;
  }
  html[data-tema="eclipse"] body.ec-dark .bml-bar .bml-busca { min-height: 44px !important; font-size: 16px !important; border-radius: 12px !important; }
  /* recuo das paginas longas (texto ganhava so ~290px de largura) */
  html[data-tema="eclipse"] body.bm-page-daily_bosses .db-page { padding: 12px 6px !important; }
  html[data-tema="eclipse"] body.bm-page-coliseum .col { padding: 6px 4px 24px !important; }
  html[data-tema="eclipse"] body.bm-page-download .dl { padding: 6px 6px 28px !important; }
  /* Coliseum: o numero da wave sumia (branco em circulo claro) */
  html[data-tema="eclipse"] body.bm-page-coliseum .col-wave-num {
    background: linear-gradient(135deg, #45A4CD, #1F5F80) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
    box-shadow: 0 0 10px rgba(69,164,205,.35) !important;
  }

  /* Addons & Mounts: chips dos filtros com 28px de altura -> 38px */
  html[data-tema="eclipse"] body.bm-page-addons .am-chip { min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; }
  html[data-tema="eclipse"] body.bm-page-addons .am-limpa { min-height: 40px !important; }
  html[data-tema="eclipse"] body.bm-page-addons .am-cmp { min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; }
  html[data-tema="eclipse"] body.bm-page-addons .am-tag { font-size: 11px !important; }

  /* Conta: botoes secundarios com 34px -> 44px */
  html[data-tema="eclipse"] body.bm-page-accountmanagement .bm-account-actions a { min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  html[data-tema="eclipse"] body.bm-page-createaccount .cr-eye { min-height: 34px !important; min-width: 72px !important; }
  html[data-tema="eclipse"] body.bm-page-createaccount .cr-rules input[type="checkbox"] { width: 22px !important; height: 22px !important; }

  /* Who is online: nome e vocacao numa linha, colunas que cabem */
  html[data-tema="eclipse"] body.bm-page-whoisonline .bm-content table { display: table !important; table-layout: fixed !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; }
  html[data-tema="eclipse"] body.bm-page-whoisonline .bm-content table th:nth-child(2) { width: 62px !important; }
  html[data-tema="eclipse"] body.bm-page-whoisonline .bm-content table td,
  html[data-tema="eclipse"] body.bm-page-whoisonline .bm-content table th {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    padding-left: 8px !important; padding-right: 6px !important; font-size: 12.5px !important;
  }
  html[data-tema="eclipse"] body.bm-page-whoisonline .bm-content table td { padding-top: 11px !important; padding-bottom: 11px !important; }
  html[data-tema="eclipse"] body.bm-page-whoisonline .bm-content table td a { font-size: 13px !important; }
}

} /* fim @layer eclipse */