/* ==========================================================================
   BAIAK MINIMALIST — ECLIPSE ERA · tema do site inteiro
   --------------------------------------------------------------------------
   Carregado por ULTIMO no layout, e so quando o tema eclipse esta ligado
   (Config::SITE_TEMA ou ?tema=eclipse). Os 3 CSS antigos NAO foram editados.

   COMO FUNCIONA A CASCATA
   Toda a pintura esta dentro de @layer eclipse com !important. Pela
   especificacao do CSS, um !important DENTRO de uma camada vence qualquer
   !important FORA de camada — por isso este arquivo ganha dos ~4.700
   !important do CSS antigo sem guerra de seletor. Navegador antigo, sem
   suporte a @layer, ignora tudo e mostra o site bege intacto.

   ⛔ REGRA DURA: aqui dentro SO propriedade de pintura (cor, fundo, borda,
   sombra, fonte). NUNCA display / position / width / height / grid / flex.
   Um !important de camada venceria o style.display que o JavaScript usa nos
   filtros e na sanfona do celular — e quebraria busca, filtro e acordeao.

   CONTRASTE (calculado, nao no olho — sobre o painel #10131B):
     texto        #E6E9F0  15,3:1   texto 2   #B6BDCC   9,9:1
     rotulo       #8C95A8   6,2:1   link      #45A4CD   6,6:1
     genesis txt  #C27BF3   6,6:1   eterno    #D4AE7E   9,0:1
     ok           #5FBF8F   8,3:1   erro      #E8776B   6,4:1
   #AD38EF (a gema Genesis pura) da 4,06:1: so pra enfeite ou texto grande.
   #7D8698 passa por pouco (5,1:1 no painel, 4,7:1 no painel-2): so rotulo.
   Conferido com a formula WCAG 2.1 em 21/09/2026.
   ========================================================================== */

@layer eclipse {

/* ---------------- tokens ---------------- */
html[data-tema="eclipse"]{
  --ec-void:#06070A; --ec-night:#0B0D12; --ec-panel:#10131B; --ec-panel-2:#161B26; --ec-panel-3:#1C2230;
  --ec-line:#272E3E; --ec-line-soft:#1B2130; --ec-line-hi:#3A4458;
  --ec-silver:#E6E9F0; --ec-silver-2:#B6BDCC; --ec-muted:#8C95A8; --ec-silver-3:#7D8698; --ec-chrome:#CBC2C5;
  --ec-supreme:#B8B3AF; --ec-crystal:#45A4CD; --ec-crystal-hi:#6FBEE0; --ec-diamond:#EDECEB;
  --ec-genesis:#AD38EF; --ec-genesis-txt:#C27BF3; --ec-eternal:#C19664; --ec-eternal-txt:#D4AE7E;
  --ec-ok:#5FBF8F; --ec-bad:#E8776B; --ec-warn:#E3C38F;
  --ec-serif:'Cinzel', Georgia, serif;
  --ec-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:#06070A !important;
  color-scheme:dark;
}

/* ---------------- base ---------------- */
html[data-tema="eclipse"] body{
  /* [21/09/2026] transparente: o .bm-bg (a lua) fica em z-index -2 e o fundo
     do body pintava por cima dele - era por isso que o fundo nao aparecia.
     A cor escura de reserva continua no html. */
  background:transparent !important;
  color:var(--ec-silver-2) !important;
  font-family:var(--ec-sans) !important;
}
html[data-tema="eclipse"] ::selection{ background:rgba(69,164,205,.35) !important; color:#fff !important; }

/* Pagina AINDA NAO convertida: o miolo continua bege, entao o texto dele
   continua marrom (senao herdaria prata e ficaria invisivel no bege). */
html[data-tema="eclipse"] body:not(.ec-dark) .bm-content{ color:#2b1a0c !important; }

/* fundo do site: a imagem da Eclipse com o mesmo veu da pagina de contagem */
html[data-tema="eclipse"] .bm-bg{
  background-color:#06070A !important;
  background-image:
    linear-gradient(180deg, rgba(6,7,10,0) 0%, rgba(6,7,10,0) 55%, rgba(6,7,10,.55) 85%, rgba(6,7,10,.85) 100%),
    url('/images/brand/bg-eclipse.webp?v=20260921a') !important;
  background-size:cover, cover !important;
  background-position:center, center top !important;
  background-repeat:no-repeat !important;
}

/* links fora do miolo bege */
html[data-tema="eclipse"] .bm-header a:not([class]),
html[data-tema="eclipse"] .bm-sidebar a:not([class]),
html[data-tema="eclipse"] body.ec-dark .bm-content a:not([class]){
  color:var(--ec-crystal) !important;
}
html[data-tema="eclipse"] .bm-header a:not([class]):hover,
html[data-tema="eclipse"] .bm-sidebar a:not([class]):hover,
html[data-tema="eclipse"] body.ec-dark .bm-content a:not([class]):hover{
  color:var(--ec-crystal-hi) !important;
}

/* ---------------- topo ---------------- */
html[data-tema="eclipse"] .bm-header{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] .bm-logo,
html[data-tema="eclipse"] .bm-logo:before,
html[data-tema="eclipse"] .bm-logo:after{
  background:none !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] .bm-logo img{
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.85)) drop-shadow(0 0 26px rgba(120,160,210,.16)) !important;
  box-shadow:none !important;
}

html[data-tema="eclipse"] .bm-serverbar{
  background:linear-gradient(180deg, rgba(22,27,38,.92), rgba(11,13,18,.92)) !important;
  border:1px solid var(--ec-line) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(230,233,240,.05) !important;
}
html[data-tema="eclipse"] .bm-serverbar *{ border-color:var(--ec-line) !important; }
html[data-tema="eclipse"] .bm-serverbar,
html[data-tema="eclipse"] .bm-serverbar span,
html[data-tema="eclipse"] .bm-serverbar small,
html[data-tema="eclipse"] .bm-serverbar p{ color:var(--ec-silver-2) !important; text-shadow:none !important; }
html[data-tema="eclipse"] .bm-serverbar strong,
html[data-tema="eclipse"] .bm-serverbar b,
html[data-tema="eclipse"] .bm-serverbar h1,
html[data-tema="eclipse"] .bm-serverbar h2,
html[data-tema="eclipse"] .bm-serverbar h3{ color:var(--ec-silver) !important; text-shadow:none !important; }

html[data-tema="eclipse"] .bm-social-link{
  background:rgba(22,27,38,.8) !important;
  border:1px solid var(--ec-line) !important;
  color:var(--ec-silver-2) !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] .bm-social-link:hover{ border-color:var(--ec-chrome) !important; color:var(--ec-silver) !important; }
html[data-tema="eclipse"] .bm-social-link strong{ color:var(--ec-silver) !important; }

html[data-tema="eclipse"] .bm-online-pill,
html[data-tema="eclipse"] .bm-unique-ip-card{
  background:rgba(6,7,10,.6) !important;
  border:1px solid var(--ec-line) !important;
  color:var(--ec-silver-2) !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] .bm-online-pill strong,
html[data-tema="eclipse"] .bm-unique-ip-card strong{ color:var(--ec-diamond) !important; }

html[data-tema="eclipse"] .bm-launch-strip{
  background:linear-gradient(90deg, rgba(22,27,38,.9), rgba(28,23,16,.9), rgba(22,27,38,.9)) !important;
  border:1px solid var(--ec-line) !important;
  color:var(--ec-silver-2) !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] .bm-launch-strip *{ color:inherit !important; text-shadow:none !important; }
html[data-tema="eclipse"] .bm-launch-strip strong,
html[data-tema="eclipse"] .bm-launch-strip b{ color:var(--ec-silver) !important; }

/* ---------------- paineis da moldura (menu, widgets, botoes grandes) ---------------- */
html[data-tema="eclipse"] .bm-widget,
html[data-tema="eclipse"] .bm-menu-group,
html[data-tema="eclipse"] .bm-sidebar .bm-card,
html[data-tema="eclipse"] .bm-feature,
html[data-tema="eclipse"] .bm-download,
html[data-tema="eclipse"] .bm-create-account{
  background:linear-gradient(180deg, rgba(20,25,35,.9), rgba(9,11,16,.9)) !important;
  border:1px solid var(--ec-line-soft) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(230,233,240,.04) !important;
  color:var(--ec-silver-2) !important;
}
html[data-tema="eclipse"] .bm-widget h2,
html[data-tema="eclipse"] .bm-widget h3,
html[data-tema="eclipse"] .bm-widget h4,
html[data-tema="eclipse"] .bm-menu-toggle,
html[data-tema="eclipse"] .bm-menu-group > strong,
html[data-tema="eclipse"] .bm-menu-group > span:first-child{
  color:var(--ec-silver) !important;
  font-family:var(--ec-serif) !important;
  letter-spacing:.08em !important;
  text-shadow:none !important;
  background:transparent !important;
  border-color:var(--ec-line-soft) !important;
}
html[data-tema="eclipse"] .bm-widget p,
html[data-tema="eclipse"] .bm-widget li,
html[data-tema="eclipse"] .bm-widget span,
html[data-tema="eclipse"] .bm-widget small,
html[data-tema="eclipse"] .bm-muted{ color:var(--ec-silver-2) !important; text-shadow:none !important; }
html[data-tema="eclipse"] .bm-widget strong,
html[data-tema="eclipse"] .bm-widget b{ color:var(--ec-silver) !important; }

/* menu: link prata, destaque com a gema cristal */
html[data-tema="eclipse"] .bm-menu-link,
html[data-tema="eclipse"] .bm-menu a{
  color:var(--ec-silver-2) !important;
  background:transparent !important;
  border-color:transparent !important;
  text-shadow:none !important;
}
html[data-tema="eclipse"] .bm-menu-link:hover,
html[data-tema="eclipse"] .bm-menu a:hover{
  color:var(--ec-silver) !important;
  background:rgba(69,164,205,.08) !important;
  border-color:rgba(69,164,205,.28) !important;
}
html[data-tema="eclipse"] .bm-menu-subhead{
  color:var(--ec-muted) !important;
  border-color:var(--ec-line-soft) !important;
  background:transparent !important;
}
html[data-tema="eclipse"] .bm-menu-group-badge{
  background:rgba(69,164,205,.14) !important;
  color:var(--ec-crystal-hi) !important;
  border:1px solid rgba(69,164,205,.34) !important;
}
/* as 36 cores antigas do menu (.bm-tone-*) viram prata */
html[data-tema="eclipse"] [class*="bm-tone-"]{ color:var(--ec-silver-2) !important; }
html[data-tema="eclipse"] [class*="bm-tone-"]:hover{ color:var(--ec-silver) !important; }

/* botao principal (Jogar Agora / My Account) - [21/09/2026] pedido do dono:
   lembrar o botao classico do tibia.com (vermelho-tijolo com moldura dourada
   e letra dourada), em vez da prata. Continua so pintura. */
html[data-tema="eclipse"] .bm-play,
html[data-tema="eclipse"] .bm-play a{
  /* vinho profundo + filete dourado fino (2a versao, dono achou a 1a grosseira) */
  background:linear-gradient(180deg, #7A2436 0%, #5A1626 55%, #3E0E1A 100%) !important;
  color:#F3DDB0 !important;
  border:1px solid rgba(214,172,110,.75) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.6) !important;
  box-shadow:inset 0 1px 0 rgba(255,220,180,.18), 0 6px 16px rgba(0,0,0,.45) !important;
}
html[data-tema="eclipse"] .bm-play:hover{
  background:linear-gradient(180deg, #8C2B40 0%, #66192C 55%, #46101E 100%) !important;
  border-color:rgba(232,196,138,.95) !important;
}
html[data-tema="eclipse"] .bm-play *{ color:#F3DDB0 !important; text-shadow:0 1px 0 rgba(0,0,0,.6) !important; }
html[data-tema="eclipse"] .bm-play::before,
html[data-tema="eclipse"] .bm-play::after{ background:linear-gradient(90deg, transparent, rgba(214,172,110,.45), transparent) !important; }

/* tabelas antigas com bgcolor="#D4C0A1"/"#F1E0C6" (padrao Gesior): atributo HTML,
   o conversor automatico nao enxerga. [22/09/2026] */
html[data-tema="eclipse"] body.ec-dark [bgcolor]{ background-color:var(--ec-panel-2) !important; }
html[data-tema="eclipse"] body.ec-dark [bgcolor="#F1E0C6" i],
html[data-tema="eclipse"] body.ec-dark [bgcolor="F1E0C6" i]{ background-color:var(--ec-panel) !important; }
html[data-tema="eclipse"] body.ec-dark [bgcolor="#505050" i]{ background-color:var(--ec-panel-3) !important; }
html[data-tema="eclipse"] body.ec-dark .bm-content [bgcolor] :is(td, span, p, div, b, strong, small, font){ color:var(--ec-silver-2) !important; }
html[data-tema="eclipse"] body.ec-dark font[color]{ color:inherit !important; }

/* botoes verdes de WhatsApp dentro das paginas: texto branco legivel */
html[data-tema="eclipse"] body.ec-dark .bm-content a[href*="wa.me"][style*="background"],
html[data-tema="eclipse"] body.ec-dark .bm-content a[href*="wa.me"][style*="background"] *{ color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* coluna direita: promo, idioma, boost, castle */
html[data-tema="eclipse"] .bm-promo-box{
  background:linear-gradient(165deg, #1C1710 0%, #0C0F16 55%, #1A1913 100%) !important;
  border:1px solid rgba(193,150,100,.42) !important;
  box-shadow:0 0 34px rgba(193,150,100,.12) !important;
  color:#EBDCC3 !important;
}
html[data-tema="eclipse"] .bm-promo-box *{ text-shadow:none !important; }
html[data-tema="eclipse"] .bm-promo-box strong,
html[data-tema="eclipse"] .bm-promo-box b,
html[data-tema="eclipse"] .bm-promo-rate{ color:#FFF3DE !important; }
html[data-tema="eclipse"] .bm-promo-cta{
  background:linear-gradient(180deg, #E3C38F, #C19664) !important;
  color:#14100A !important;
  border-color:transparent !important;
}
html[data-tema="eclipse"] .bm-lang-switch,
html[data-tema="eclipse"] .bm-lang-switch *{
  background-color:transparent !important;
  color:var(--ec-silver-2) !important;
  border-color:var(--ec-line) !important;
}

/* ---------------- celular: hamburger, gaveta, barra inferior ---------------- */
html[data-tema="eclipse"] .bm-hamburger{
  background:rgba(16,19,27,.92) !important;
  border:1px solid var(--ec-line) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.5) !important;
}
html[data-tema="eclipse"] .bm-hamburger span{ background:var(--ec-chrome) !important; }
html[data-tema="eclipse"] .bm-drawer-overlay{ background:rgba(6,7,10,.72) !important; }
html[data-tema="eclipse"] #bmMobileDrawer,
html[data-tema="eclipse"] .bm-drawer{
  background:linear-gradient(180deg, #10131B, #0B0D12) !important;
  border-color:var(--ec-line) !important;
  box-shadow:12px 0 40px rgba(0,0,0,.6) !important;
}
html[data-tema="eclipse"] .bm-drawer-close{
  background:rgba(22,27,38,.9) !important;
  color:var(--ec-silver) !important;
  border:1px solid var(--ec-line) !important;
}
html[data-tema="eclipse"] .bm-bottom-nav{
  background:rgba(8,10,14,.96) !important;
  border-top:1px solid var(--ec-line) !important;
  box-shadow:0 -10px 30px rgba(0,0,0,.5) !important;
}
html[data-tema="eclipse"] .bm-bottom-nav a,
html[data-tema="eclipse"] .bm-bottom-nav button,
html[data-tema="eclipse"] .bm-bottom-nav span{ color:var(--ec-muted) !important; background:transparent !important; }
html[data-tema="eclipse"] .bm-bottom-nav a.is-active,
html[data-tema="eclipse"] .bm-bottom-nav a[aria-current],
html[data-tema="eclipse"] .bm-bottom-nav .is-active *{ color:var(--ec-silver) !important; }

/* rodape e botao "voltar ao topo" */
html[data-tema="eclipse"] footer,
html[data-tema="eclipse"] .bm-footer{
  background:transparent !important;
  color:var(--ec-muted) !important;
  border-color:var(--ec-line-soft) !important;
}
html[data-tema="eclipse"] .bmx-top{
  background:rgba(16,19,27,.94) !important;
  color:var(--ec-silver) !important;
  border:1px solid var(--ec-line) !important;
}


/* ---------------- faixa de aviso do topo (#bmUpdateBar) ---------------- */
html[data-tema="eclipse"] #bmUpdateBar{
  background:linear-gradient(90deg, #0B0D12, #161B26 50%, #0B0D12) !important;
  border-bottom:1px solid var(--ec-line) !important;
  color:var(--ec-silver-2) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.45) !important;
}
html[data-tema="eclipse"] #bmUpdateBar span{ color:var(--ec-silver-2) !important; text-shadow:none !important; }
html[data-tema="eclipse"] #bmUpdateBar b{ color:var(--ec-silver) !important; }
html[data-tema="eclipse"] #bmUpdateBar a{ color:var(--ec-crystal) !important; border-bottom-color:rgba(69,164,205,.4) !important; }
html[data-tema="eclipse"] #bmUpdateBar a:hover{ color:var(--ec-crystal-hi) !important; }
html[data-tema="eclipse"] #bmUpdateClose{
  background:rgba(22,27,38,.9) !important;
  color:var(--ec-silver) !important;
  border:1px solid var(--ec-line) !important;
  box-shadow:none !important;
}

/* ---------------- caixinhas "Contas criadas / Personagens / IPs" ---------------- */
html[data-tema="eclipse"] .bm-launch-strip > div,
html[data-tema="eclipse"] .bm-header-info > div{
  background:linear-gradient(180deg, rgba(22,27,38,.9), rgba(11,13,18,.9)) !important;
  border:1px solid var(--ec-line-soft) !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] .bm-launch-strip > div span,
html[data-tema="eclipse"] .bm-header-info span{ color:var(--ec-muted) !important; }
html[data-tema="eclipse"] .bm-launch-strip > div strong,
html[data-tema="eclipse"] .bm-header-info strong{ color:var(--ec-diamond) !important; }

/* ---------------- widget do Boost ----------------
   As cores de CATEGORIA (--boost-accent verde/dourado/prata/rosa) tem significado
   e ficam. So o link e o texto de apoio viram Eclipse. */
html[data-tema="eclipse"] .bm-boost-more,
html[data-tema="eclipse"] .bm-boost-more a{ color:var(--ec-crystal) !important; text-shadow:none !important; }
html[data-tema="eclipse"] .bm-boost-more:hover,
html[data-tema="eclipse"] .bm-boost-more a:hover{ color:var(--ec-crystal-hi) !important; }
html[data-tema="eclipse"] .bm-boost-core{
  background:linear-gradient(180deg, rgba(22,27,38,.85), rgba(11,13,18,.85)) !important;
}
html[data-tema="eclipse"] .bm-boost-countdown-value{ color:var(--ec-silver) !important; }

/* ==========================================================================
   MIOLO CONVERTIDO  (so paginas que o layout marca com body.ec-dark)
   ========================================================================== */
html[data-tema="eclipse"] body.ec-dark .bm-content{
  background:linear-gradient(180deg, rgba(16,19,27,.9), rgba(9,11,16,.9)) !important;
  border:1px solid var(--ec-line-soft) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(230,233,240,.04) !important;
  color:var(--ec-silver-2) !important;
}

/* REDE DE SEGURANCA: todo texto do miolo volta pra prata. Mata de uma vez as
   centenas de declaracoes de texto marrom, que em fundo escuro dariam 1,09:1
   (invisivel). As cores COM significado sao reacendidas mais abaixo. */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(p, li, dd, dt, td, span, small, label, em, i, div, figcaption, blockquote, caption){
  color:var(--ec-silver-2) !important;
  text-shadow:none !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(strong, b, th){
  color:var(--ec-silver) !important;
  text-shadow:none !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(h1, h2, h3, h4, h5, h6){
  color:var(--ec-silver) !important;
  font-family:var(--ec-serif) !important;
  letter-spacing:.06em !important;
  text-shadow:none !important;
  -webkit-text-fill-color:currentColor !important;
}

/* cabecalho de secao / hero da pagina */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.bm-section-head, .bm-page-hero){
  background:linear-gradient(160deg, #161B26 0%, #0C0F16 60%, #161B26 100%) !important;
  border:1px solid var(--ec-line) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(230,233,240,.05) !important;
  color:var(--ec-silver-2) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.bm-section-head, .bm-page-hero) > span:first-child,
html[data-tema="eclipse"] body.ec-dark .bm-content .bm-section-head > span{
  color:var(--ec-crystal) !important;
  letter-spacing:.3em !important;
}

/* cards */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.bm-info-card, .bm-card, .bm-feature-card, .bm-kv, .bmx-card){
  background:linear-gradient(180deg, rgba(22,27,38,.82), rgba(11,13,18,.82)) !important;
  border:1px solid var(--ec-line-soft) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.3) !important;
  color:var(--ec-silver-2) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.bm-info-card, .bm-card):hover{
  border-color:var(--ec-line) !important;
}

/* tabelas */
html[data-tema="eclipse"] body.ec-dark .bm-content table{
  background:rgba(9,11,16,.55) !important;
  border-color:var(--ec-line-soft) !important;
  color:var(--ec-silver-2) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content th,
html[data-tema="eclipse"] body.ec-dark .bm-content thead td{
  background:#161B26 !important;
  color:var(--ec-silver) !important;
  border-color:var(--ec-line) !important;
  font-family:var(--ec-sans) !important;
  letter-spacing:.06em !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content td{
  background:transparent !important;
  border-color:var(--ec-line-soft) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content tr:nth-child(even) td{ background:rgba(22,27,38,.35) !important; }
html[data-tema="eclipse"] body.ec-dark .bm-content tr:hover td{ background:rgba(69,164,205,.06) !important; }

/* formularios */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea){
  background:rgba(6,7,10,.7) !important;
  color:var(--ec-silver) !important;
  border:1px solid var(--ec-line) !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(input, select, textarea):focus{
  border-color:var(--ec-chrome) !important;
  outline-color:var(--ec-crystal) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content ::placeholder{ color:#7D8698 !important; } /* 5,5:1 — o #5C6476 reprovava */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(input[type="checkbox"], input[type="radio"]){ accent-color:var(--ec-crystal) !important; }

/* botoes */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(button, input[type="submit"], input[type="button"], .bm-button, .bm-form-button, .bmx-btn){
  background:linear-gradient(180deg, rgba(28,34,47,.95), rgba(14,17,24,.95)) !important;
  color:var(--ec-silver) !important;
  border:1px solid var(--ec-line) !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(button, input[type="submit"], input[type="button"], .bm-button, .bm-form-button, .bmx-btn):hover{
  border-color:var(--ec-chrome) !important;
  color:#fff !important;
}

/* tags, selos e avisos */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.bm-tag, .bm-badge, .bmx-tag){
  background:rgba(69,164,205,.12) !important;
  color:var(--ec-crystal-hi) !important;
  border:1px solid rgba(69,164,205,.32) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.bm-system-message, .bm-alert, .bm-notice){
  background:rgba(193,150,100,.08) !important;
  color:var(--ec-silver-2) !important;
  border:1px solid rgba(193,150,100,.34) !important;
}
html[data-tema="eclipse"] body.ec-dark .bm-content hr{ border-color:var(--ec-line-soft) !important; background:var(--ec-line-soft) !important; }

/* cores COM significado, reacendidas depois da rede de seguranca */
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.online, .is-online, .bm-online, .green){ color:var(--ec-ok) !important; }
html[data-tema="eclipse"] body.ec-dark .bm-content :is(.offline, .is-offline, .bm-offline, .red){ color:var(--ec-bad) !important; }

/* ---------------- texto em degrade: fallback ----------------
   Se algum navegador (ou o Google Tradutor, que embrulha o texto em <font>)
   quebrar o background-clip, o texto cai numa cor solida legivel. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  html[data-tema="eclipse"] body.ec-dark .bm-content *{ -webkit-text-fill-color:currentColor !important; }
}

} /* fim @layer eclipse */

/* ==========================================================================
   @layer eclipse-estrutura — EXCECOES DE LAYOUT, UMA A UMA, JUSTIFICADAS
   --------------------------------------------------------------------------
   A camada "eclipse" acima so pinta. Aqui entram as poucas mudancas de
   tamanho que o tema novo exige. Regra pra entrar aqui: o elemento NAO pode
   ter display/tamanho controlado por JavaScript. Cada bloco diz o motivo.
   ========================================================================== */
@layer eclipse-estrutura {

  /* CELULAR [22/09/2026] - achados no print do celular:
     1) as 3 linhas do botao de menu (hamburger) ficavam com 4px de largura:
        o botao existia mas era invisivel -> ninguem abria o menu no celular.
     2) o miolo e grid; filho de grid tem min-width:auto, entao o carrossel da
        home (e o Hall da Fama) esticavam pra 870px numa tela de 390px. */
  @media (max-width:860px){
    html[data-tema="eclipse"] .bm-hamburger span{ display:block !important; width:22px !important; height:2px !important; flex:0 0 2px !important; }
    html[data-tema="eclipse"] .bm-main,
    html[data-tema="eclipse"] .bm-main > *{ min-width:0 !important; max-width:100% !important; }
    html[data-tema="eclipse"] .bm-season-news,
    html[data-tema="eclipse"] .bm-season-slider{ max-width:100% !important; overflow:hidden !important; }
    html[data-tema="eclipse"] .bm-season-slide{ flex:0 0 100% !important; width:100% !important; min-width:0 !important; }
    html[data-tema="eclipse"] .bm-season-copy{ max-width:100% !important; }
    html[data-tema="eclipse"] .bm-season-dots button{ width:26px !important; height:5px !important; min-height:0 !important; min-width:0 !important; padding:0 !important; border-radius:999px !important; }
    html[data-tema="eclipse"] .ec-cb-txt{ padding:0 46px !important; box-sizing:border-box !important; }
  }

  /* BOTAO JOGAR AGORA mais fino (dono: "diminua a grossura desse botao gigante") */
  @media (min-width:901px){
    html[data-tema="eclipse"] .bm-play{ min-height:46px !important; height:46px !important; padding-top:0 !important; padding-bottom:0 !important; }
    html[data-tema="eclipse"] .bm-play span{ font-size:15px !important; letter-spacing:.08em !important; }
  }

  /* BOTOES DO TOPO (WhatsApp/Instagram). [21/09] Os nomes novos pedidos pelo
     dono ("[GRUPO ATUALIZACOES]", "[GRUPO PLAYERS&TRADE]") sao maiores que a
     caixa e cortavam em "...". Deixa quebrar em 2 linhas, com letra menor. */
  html[data-tema="eclipse"] .bm-social-link strong{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  /* LOGO. O logo antigo era largo (1320x880); o layout reserva 214px de altura
     pra ele. O novo e QUADRADO (~1:1): a 333px de largura ficava com ~325px
     de altura e transbordava ~110px em cima do botao "Jogar" e do "Criar Conta"
     (visto no print do dono, 21/09). Agora ele ocupa a altura reservada. */
  @media (min-width:901px){
    html[data-tema="eclipse"] .bm-shell .bm-logo{
      height:236px !important;
      min-height:236px !important;
      margin-bottom:0 !important;
    }
    html[data-tema="eclipse"] .bm-shell .bm-logo img{
      width:auto !important;
      max-width:none !important;
      height:236px !important;
      animation:none !important;
    }
  }
  /* celular: o quadrado a 72vw comia meia tela; 58vw fica proporcional */
  @media (max-width:900px){
    html[data-tema="eclipse"] .bm-logo img{
      width:min(230px, 58vw) !important;
      max-width:230px !important;
      height:auto !important;
    }
  }
  /* o brilho dourado animado atras do logo antigo nao combina com o prata */
  html[data-tema="eclipse"] .bm-shell .bm-logo:before{ animation:none !important; opacity:0 !important; }
}