/* =========================================================================
   HOME V2 (12/10/2026) - so carrega com ?home=v2 / cookie bm_home=v2.
   Pedido do dono: topo menos poluido (grupos, online, IPs e barra ao vivo),
   Boost no alto da coluna direita, promocao fora da coluna (vira faixa no topo),
   bandeiras pequenas no canto, Top 5 e castelos mais visiveis, tudo um pouco
   menor (ele achou mais bonito no zoom de 90%).
   ========================================================================= */

/* --- escala geral: o "zoom 90%" que ele gostou, so em tela grande --- */
@media (min-width:1200px){
  html.bm-home-v2 body{ zoom:.9; }
}

/* --- coluna direita mais larga: Top 5 e castelos respiram --- */
@media (min-width:981px){
  html.bm-home-v2 .bm-layout{ grid-template-columns:190px minmax(0,1fr) 210px !important; }
}

/* --- topo: barra do servidor --- */
html.bm-home-v2 .bm-serverbar{ position:relative; gap:12px !important; padding:12px 16px !important; }
html.bm-home-v2 .bm-serverbar-socials{ padding-right:96px; }

/* bandeiras: pequenas, no canto de cima da barra */
html.bm-home-v2 .bm-v2-langs{
  position:absolute; top:12px; right:14px; display:flex; gap:6px; z-index:3;
}
html.bm-home-v2 .bm-v2-langs a{
  display:inline-flex; padding:3px; border-radius:5px; border:1px solid rgba(227,195,143,.22);
  background:rgba(0,0,0,.35); opacity:.75; transition:opacity .15s, transform .15s, border-color .15s;
}
html.bm-home-v2 .bm-v2-langs a:hover{ opacity:1; transform:translateY(-1px); border-color:rgba(227,195,143,.6); }
html.bm-home-v2 .bm-v2-langs img{ display:block; width:20px; height:13px; border-radius:2px; }

/* numeros: online / IPs / IP do servidor / doar */
html.bm-home-v2 .bm-v2-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
}
html.bm-home-v2 .bm-v2-stat,
html.bm-home-v2 .bm-v2-ip,
html.bm-home-v2 .bm-v2-doar{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:68px; padding:8px 10px; border-radius:10px; text-decoration:none; font:inherit; cursor:default;
  background:linear-gradient(180deg, rgba(20,24,34,.92), rgba(9,11,16,.92));
  border:1px solid rgba(203,208,218,.16); color:#CBD0DA;
}
html.bm-home-v2 .bm-v2-stat strong{
  font-size:30px; line-height:1; font-weight:800; letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
html.bm-home-v2 .bm-v2-stat span,
html.bm-home-v2 .bm-v2-ip span,
html.bm-home-v2 .bm-v2-doar span{
  margin-top:5px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8F98AB;
}
html.bm-home-v2 .bm-v2-stat.is-online{ border-color:rgba(56,179,108,.42); box-shadow:inset 0 0 22px rgba(56,179,108,.10); }
html.bm-home-v2 .bm-v2-stat.is-online strong{ color:#4FD08A; text-shadow:0 0 16px rgba(56,179,108,.45); }
html.bm-home-v2 .bm-v2-stat.is-ips{ border-color:rgba(120,170,230,.34); }
html.bm-home-v2 .bm-v2-stat.is-ips strong{ color:#8EC2F2; text-shadow:0 0 14px rgba(120,170,230,.35); }

html.bm-home-v2 .bm-v2-ip{ cursor:pointer; transition:border-color .15s, transform .15s; }
html.bm-home-v2 .bm-v2-ip:hover{ border-color:rgba(227,195,143,.55); transform:translateY(-1px); }
html.bm-home-v2 .bm-v2-ip span{ margin:0 0 4px; order:-1; }
html.bm-home-v2 .bm-v2-ip strong{ font-size:14px; color:#F1E6D2; letter-spacing:.02em; }
html.bm-home-v2 .bm-v2-ip small{ margin-top:4px; font-size:10.5px; color:#8F98AB; }
html.bm-home-v2 .bm-v2-ip small em{ font-style:normal; color:#C9B693; }
html.bm-home-v2 .bm-v2-ip .ok{ display:none; color:#4FD08A; }
html.bm-home-v2 .bm-v2-ip.is-ok .ok{ display:inline; }
html.bm-home-v2 .bm-v2-ip.is-ok small em:not(.ok){ display:none; }

html.bm-home-v2 .bm-v2-doar{ cursor:pointer; border-color:rgba(227,195,143,.40); }
html.bm-home-v2 .bm-v2-doar:hover{ border-color:rgba(227,195,143,.75); }
html.bm-home-v2 .bm-v2-doar span{ margin:0 0 4px; order:-1; }
html.bm-home-v2 .bm-v2-doar strong{ font-size:15px; color:#F1D9A8; }
html.bm-home-v2 .bm-v2-doar small{ margin-top:3px; font-size:10.5px; color:#9C8B6C; }

/* faixa de promocao (so quando existe promocao) */
html.bm-home-v2 .bm-v2-promo{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding:9px 14px; border-radius:10px; text-decoration:none;
  background:radial-gradient(circle at 50% -40%, rgba(227,195,143,.32), transparent 65%),
             linear-gradient(90deg, #241B10, #0C0F16 50%, #241B10);
  border:1px solid rgba(227,195,143,.70); color:#EBDCC3;
  box-shadow:0 0 30px rgba(227,195,143,.18);
}
html.bm-home-v2 .bm-v2-promo::after{
  content:""; position:absolute; inset:-50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 44%, rgba(255,243,222,.18) 50%, transparent 56%);
  animation:bmV2Shine 4s linear infinite;
}
@keyframes bmV2Shine{ 0%{transform:translateX(-60%)} 100%{transform:translateX(60%)} }
html.bm-home-v2 .bm-v2-promo-tag{
  font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#14100A;
  background:linear-gradient(90deg,#C19664,#E3C38F,#C19664); padding:4px 10px; border-radius:999px; white-space:nowrap;
}
html.bm-home-v2 .bm-v2-promo strong{ font-size:28px; line-height:1; font-weight:800; color:#FFF3DE; text-shadow:0 0 18px rgba(227,195,143,.55); }
html.bm-home-v2 .bm-v2-promo-txt{ font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:#C9B693; white-space:nowrap; }
html.bm-home-v2 .bm-v2-promo-clock{
  font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:#FFF3DE;
  background:rgba(0,0,0,.45); border:1px solid rgba(227,195,143,.40); border-radius:7px; padding:4px 10px; white-space:nowrap;
}
html.bm-home-v2 .bm-v2-promo-cta{
  font-size:11.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:#14100A;
  background:linear-gradient(180deg,#E3C38F,#C19664); padding:6px 14px; border-radius:7px; white-space:nowrap;
}

/* barra ao vivo: um pouco mais de ar */
html.bm-home-v2 .bm-live-strip{ margin-top:0 !important; }

/* --- coluna direita --- */
html.bm-home-v2 .bm-sidebar.bm-right{ gap:14px !important; }

/* Top 5 em destaque: posicao grande, ouro/prata/bronze */
html.bm-home-v2 .bm-top5{
  border:1px solid rgba(227,195,143,.42) !important;
  box-shadow:0 0 26px rgba(227,195,143,.10) !important;
}
html.bm-home-v2 .bm-top5 .bm-top-list{ counter-reset:bmtop; display:grid; gap:6px; padding:0 !important; margin:0 !important; list-style:none !important; }
html.bm-home-v2 .bm-top5 .bm-top-list li{
  counter-increment:bmtop; position:relative; display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto;
  column-gap:8px; align-items:center; padding:7px 8px; border-radius:8px; list-style:none !important;
  background:rgba(0,0,0,.28); border:1px solid rgba(203,208,218,.10);
}
html.bm-home-v2 .bm-top5 .bm-top-list li::before{
  content:counter(bmtop); grid-row:1 / span 2; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; font-weight:800; font-size:14px;
  color:#0C0F16; background:#8F98AB;
}
html.bm-home-v2 .bm-top5 .bm-top-list li:nth-child(1)::before{ background:linear-gradient(180deg,#F3D58C,#C9963D); box-shadow:0 0 12px rgba(243,213,140,.55); }
html.bm-home-v2 .bm-top5 .bm-top-list li:nth-child(2)::before{ background:linear-gradient(180deg,#E6E9EF,#9AA2B1); }
html.bm-home-v2 .bm-top5 .bm-top-list li:nth-child(3)::before{ background:linear-gradient(180deg,#E3A879,#A0603A); }
html.bm-home-v2 .bm-top5 .bm-top-list li:nth-child(1){ border-color:rgba(243,213,140,.45); background:rgba(243,213,140,.07); }
html.bm-home-v2 .bm-top5 .bm-top-list a{ font-size:13.5px !important; font-weight:700 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.bm-home-v2 .bm-top5 .bm-top-list span{ font-size:11.5px !important; color:#8F98AB !important; }

/* Castelos: dono em destaque, cada castelo com a sua moldura */
html.bm-home-v2 .bm-castle{
  border:1px solid rgba(227,195,143,.36) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(227,195,143,.14), transparent 70%),
    linear-gradient(180deg, rgba(20,24,34,.95), rgba(9,11,16,.95)) !important;
  text-align:center;
}
html.bm-home-v2 .bm-castle h2::before{ content:"\265C\00a0"; color:#E3C38F; }
html.bm-home-v2 .bm-castle .bm-castle-owner.is-active{
  font-size:15px !important; letter-spacing:.04em; color:#FFF3DE !important;
  text-shadow:0 0 14px rgba(227,195,143,.45) !important;
}
html.bm-home-v2 .bm-castle .bm-castle-bonus{ font-weight:800 !important; }
html.bm-home-v2 .bm-castle-dominion{ opacity:.6; }

/* --- celular: nada de absoluto nem zoom; bandeiras voltam pro fluxo --- */
@media (max-width:980px){
  html.bm-home-v2 .bm-v2-langs{ position:static; justify-content:center; }
  html.bm-home-v2 .bm-serverbar-socials{ padding-right:0; }
  html.bm-home-v2 .bm-v2-stats{ grid-template-columns:1fr 1fr; }
  html.bm-home-v2 .bm-v2-ip, html.bm-home-v2 .bm-v2-doar{ grid-column:span 2; }
  html.bm-home-v2 .bm-v2-promo strong{ font-size:24px; }
}

/* ======================= AJUSTES 12/10 (2o print) ======================= */

/* 1) coluna da direita colada no meio: respiro entre as colunas e no topo */
@media (min-width:981px){
  html.bm-home-v2 .bm-layout{ column-gap:28px !important; }
  html.bm-home-v2 .bm-serverbar{ margin-right:28px !important; }
}

/* 2) banner e Hall ocupam a coluna do meio inteira, centralizados */
html.bm-home-v2 .bm-season-hero,
html.bm-home-v2 .bm-season-news,
html.bm-home-v2 .bm-hall{
  width:100% !important; max-width:100% !important; box-sizing:border-box !important;
  margin-left:0 !important; margin-right:0 !important; left:auto !important; transform:none !important;
}

/* 3) bandeiras: em cima da barra, sem cobrir o botao do Instagram */
html.bm-home-v2 .bm-serverbar-socials{ padding-right:0 !important; }
@media (min-width:981px){
  html.bm-home-v2 .bm-v2-langs{ top:-30px; right:2px; }
}

/* 4) textos da faixa de promocao estavam sumindo (cor dourada sobre dourado) */
html.bm-home-v2 .bm-v2-promo .bm-v2-promo-tag,
html.bm-home-v2 .bm-v2-promo .bm-v2-promo-cta{ color:#14100A !important; -webkit-text-fill-color:#14100A !important; }
html.bm-home-v2 .bm-v2-promo strong{ -webkit-text-fill-color:#FFF3DE !important; }
html.bm-home-v2 .bm-v2-promo .bm-v2-promo-txt{ color:#D8C7A4 !important; -webkit-text-fill-color:#D8C7A4 !important; }
html.bm-home-v2 .bm-v2-promo .bm-v2-promo-clock{ color:#FFF3DE !important; -webkit-text-fill-color:#FFF3DE !important; }

/* 5) HALL DA FAMA - paleta Eclipse + 5 cartoes lado a lado */
html.bm-home-v2 .bm-hall{
  --hl-bg1:#141822; --hl-bg2:#090B10; --hl-line:rgba(227,195,143,.45); --hl-gold:#E3C38F; --hl-gold2:#C19664;
  --hl-cream:#E8E2D6; --hl-soft:#8F98AB;
  background:radial-gradient(circle at 50% 0%, rgba(227,195,143,.10), transparent 60%),
             linear-gradient(180deg,var(--hl-bg1),var(--hl-bg2)) !important;
}
html.bm-home-v2 .bm-hall-cards{
  display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; width:100%; margin:6px 0 4px;
}
html.bm-home-v2 .bm-hc{
  position:relative; display:flex !important; flex-direction:column; align-items:center; gap:6px; min-width:0;
  padding:30px 8px 12px; border-radius:12px; text-decoration:none !important; color:var(--hl-cream) !important;
  background:linear-gradient(180deg, rgba(30,35,48,.95), rgba(12,14,20,.95));
  border:1px solid rgba(203,208,218,.14);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
html.bm-home-v2 .bm-hc:hover{ transform:translateY(-3px); border-color:rgba(227,195,143,.55); box-shadow:0 10px 24px rgba(0,0,0,.45); }
html.bm-home-v2 .bm-hc-pos{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  min-width:30px; padding:3px 8px; border-radius:6px; font-weight:800; font-size:12px; line-height:1;
  color:#0C0F16 !important; -webkit-text-fill-color:#0C0F16 !important; background:#8F98AB;
}
html.bm-home-v2 .bm-hc-p1 .bm-hc-pos{ background:linear-gradient(180deg,#F3D58C,#C9963D); }
html.bm-home-v2 .bm-hc-p2 .bm-hc-pos{ background:linear-gradient(180deg,#E6E9EF,#9AA2B1); }
html.bm-home-v2 .bm-hc-p3 .bm-hc-pos{ background:linear-gradient(180deg,#E3A879,#A0603A); }
html.bm-home-v2 .bm-hc-p1{
  border-color:rgba(243,213,140,.75);
  background:radial-gradient(circle at 50% 20%, rgba(243,213,140,.22), transparent 70%),
             linear-gradient(180deg, rgba(42,34,20,.96), rgba(14,12,9,.96));
  box-shadow:0 0 26px rgba(243,213,140,.22);
}
html.bm-home-v2 .bm-hc-crown{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:20px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
html.bm-home-v2 .bm-hc-av{
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  width:72px; height:72px; border-radius:12px; background:radial-gradient(circle, rgba(227,195,143,.14), rgba(0,0,0,.35));
}
html.bm-home-v2 .bm-hc-av img{ max-width:100%; max-height:100%; object-fit:contain; }
html.bm-home-v2 .bm-hc-av.is-outfit img{ position:absolute; width:110px; height:110px; max-width:none; max-height:none; right:-14px; bottom:-14px; image-rendering:pixelated; }
html.bm-home-v2 .bm-hc-av.is-letter{ font-weight:800; font-size:28px; color:var(--hl-gold) !important; }
html.bm-home-v2 .bm-hc-nm{
  display:block; width:100%; text-align:center; font-weight:700; font-size:13px; line-height:1.2; color:#BFD3F5 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html.bm-home-v2 .bm-hc-p1 .bm-hc-nm{ color:#F3D58C !important; }
html.bm-home-v2 .bm-hc-val{ font-weight:800; font-size:14px; color:#FFFFFF !important; white-space:nowrap; }
html.bm-home-v2 .bm-hc-val small{ font-weight:600; font-size:10.5px; color:var(--hl-soft) !important; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:860px){
  html.bm-home-v2 .bm-hall-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  html.bm-home-v2 .bm-hc-av{ width:56px; height:56px; }
  html.bm-home-v2 .bm-hc-av.is-outfit img{ width:86px; height:86px; right:-11px; bottom:-11px; }
}
@media (max-width:480px){
  html.bm-home-v2 .bm-hall-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ======================= AJUSTES 12/10 (3o print) ======================= */
/* Hall: as 4 listas uma embaixo da outra (sem abas), igual a das guilds */
html.bm-home-v2 .bm-hall-tabs{ display:none !important; }
html.bm-home-v2 .bm-hall-panel{ display:block !important; padding:6px 16px 10px !important; animation:none !important; }
html.bm-home-v2 .bm-hall-panel + .bm-hall-panel{ border-top:1px solid rgba(227,195,143,.14); padding-top:14px !important; }
html.bm-home-v2 .bm-hall-sub{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 10px !important;
  font-size:12px !important; color:#8F98AB !important; letter-spacing:.04em;
}
html.bm-home-v2 .bm-hall-sub b{
  font-family:var(--bm-serif); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:#E3C38F !important;
}
html.bm-home-v2 .bm-hall-more{ margin-top:8px !important; padding:5px 14px !important; font-size:11.5px !important; }

/* outfit centralizado no cartao (antes ficava no canto, pequeno e cortado) */
html.bm-home-v2 .bm-hc-av.is-outfit img{ width:120px !important; height:120px !important; right:-2px !important; bottom:-2px !important; }
@media (max-width:860px){
  html.bm-home-v2 .bm-hc-av.is-outfit img{ width:96px !important; height:96px !important; right:-2px !important; bottom:-2px !important; }
}

/* ======================= AJUSTES 12/10 (4o e 5o print) ======================= */
/* numeros do servidor no alto da coluna direita */
html.bm-home-v2 .bm-v2-server{ padding:10px !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stats{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat{ min-height:58px; padding:6px 4px; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat strong{ font-size:24px; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat span{ font-size:9px; letter-spacing:.10em; }
html.bm-home-v2 .bm-v2-server .bm-v2-ip,
html.bm-home-v2 .bm-v2-server .bm-v2-doar{ grid-column:span 2; min-height:0; padding:7px 6px; }
html.bm-home-v2 .bm-v2-server .bm-v2-ip strong{ font-size:12.5px; }
html.bm-home-v2 .bm-v2-server .bm-v2-ip span,
html.bm-home-v2 .bm-v2-server .bm-v2-doar span{ font-size:9px; }

/* bandeiras no topo da coluna esquerda, embaixo do logo */
html.bm-home-v2 .bm-left .bm-v2-langs{
  position:static !important; display:flex; justify-content:center; gap:8px; margin:0 0 2px;
}

/* banner e Hall com a MESMA largura (o Hall estava 14px pra dentro de cada lado) */
html.bm-home-v2 body.bm-page-latestnews .bm-content{ padding-left:0 !important; padding-right:0 !important; padding-top:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
html.bm-home-v2 body.bm-page-latestnews .bm-hall{ margin-top:0 !important; }

/* cartoes do Hall menores (ele achou largos demais) */
html.bm-home-v2 .bm-hall-cards{
  grid-template-columns:repeat(5, 98px) !important; justify-content:center; gap:8px !important;
}
html.bm-home-v2 .bm-hc{ padding:24px 6px 9px !important; gap:4px !important; border-radius:10px; }
html.bm-home-v2 .bm-hc-pos{ top:6px; font-size:11px; padding:2px 7px; min-width:26px; }
html.bm-home-v2 .bm-hc-crown{ top:-12px; font-size:16px; }
html.bm-home-v2 .bm-hc-av{ width:56px !important; height:56px !important; border-radius:10px; }
html.bm-home-v2 .bm-hc-av.is-letter{ font-size:22px; }
html.bm-home-v2 .bm-hc-nm{ font-size:11.5px !important; }
html.bm-home-v2 .bm-hc-val{ font-size:12.5px !important; }
html.bm-home-v2 .bm-hc-val small{ font-size:9.5px !important; }
html.bm-home-v2 .bm-hall-panel{ padding:4px 12px 8px !important; }
html.bm-home-v2 .bm-hall-panel + .bm-hall-panel{ padding-top:10px !important; }
@media (max-width:860px){
  html.bm-home-v2 .bm-hall-cards{ grid-template-columns:repeat(3, 98px) !important; }
}
@media (max-width:400px){
  html.bm-home-v2 .bm-hall-cards{ grid-template-columns:repeat(2, 98px) !important; }
}

/* 6o print: bandeiras subiam por cima do rodape do logo (a coluna esquerda sobe 40px no tema Eclipse) */
@media (min-width:1100px){
  html.bm-home-v2 .bm-layout > .bm-left{ margin-top:0 !important; }
}
html.bm-home-v2 .bm-left .bm-v2-langs{
  position:relative !important; z-index:4; margin:4px 0 6px !important; padding:6px 0;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
html.bm-home-v2 .bm-left .bm-v2-langs a{ opacity:.9; }

/* 7o pedido: Top 5 com o boneco do jogador no lugar do numero (o numero vira um selinho no canto) */
html.bm-home-v2 .bm-top5 .bm-top-list li{ grid-template-columns:46px 1fr !important; padding:6px 8px 6px 6px !important; }
html.bm-home-v2 .bm-top5 .bm-top-list li::before{
  position:absolute; top:4px; left:4px; z-index:3; width:17px !important; height:17px !important;
  font-size:10px !important; grid-row:auto !important; box-shadow:0 1px 3px rgba(0,0,0,.6);
}
html.bm-home-v2 .bm-t5-av{
  grid-row:1 / span 2; position:relative; display:block; overflow:hidden;
  width:44px; height:44px; border-radius:9px;
  background:radial-gradient(circle, rgba(227,195,143,.16), rgba(0,0,0,.35));
}
html.bm-home-v2 .bm-t5-av img{ position:absolute; width:64px; height:64px; right:-6px; bottom:-6px; image-rendering:pixelated; }
html.bm-home-v2 .bm-top5 .bm-top-list li:nth-child(1) .bm-t5-av{ box-shadow:0 0 0 1px rgba(243,213,140,.6), 0 0 12px rgba(243,213,140,.25); }

/* 8o pedido: Boost e numeros do servidor mais finos e "minimalist"; boost com os monstros girando */
html.bm-home-v2 .bm-boost-widget .bm-boost-core{
  display:grid !important; grid-template-columns:60px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px;
  padding:8px 10px !important; text-align:left !important; border-width:1px !important; min-height:0 !important;
}
html.bm-home-v2 .bm-boost-widget .bm-boost-core strong{ grid-column:2; font-size:14px !important; line-height:1.15; margin:0 !important; }
html.bm-home-v2 .bm-boost-widget .bm-boost-core small{ grid-column:2; font-size:10.5px !important; margin:2px 0 0 !important; }
html.bm-home-v2 .bm-bst-av{
  grid-row:1 / span 2; position:relative; display:block; width:60px; height:60px; overflow:hidden; border-radius:10px;
  background:radial-gradient(circle, rgba(227,195,143,.16), rgba(0,0,0,.4));
}
html.bm-home-v2 .bm-bst-av img{ position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; opacity:0; transition:opacity .45s ease; }
html.bm-home-v2 .bm-bst-av img.is-on{ opacity:1; }
html.bm-home-v2 .bm-boost-widget .bm-boost-mark{ display:none; }
html.bm-home-v2 .bm-boost-widget .bm-muted{ font-size:11px !important; margin:6px 2px 2px !important; }
html.bm-home-v2 .bm-boost-widget .bm-boost-more{ font-size:10.5px !important; }

html.bm-home-v2 .bm-v2-server .bm-v2-stat,
html.bm-home-v2 .bm-v2-server .bm-v2-ip,
html.bm-home-v2 .bm-v2-server .bm-v2-doar{
  border-color:rgba(203,208,218,.10) !important; box-shadow:none !important; background:rgba(0,0,0,.28) !important; border-radius:8px;
}
html.bm-home-v2 .bm-v2-server .bm-v2-stat{ min-height:0 !important; padding:7px 4px !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat strong{ font-size:19px !important; text-shadow:none !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-online strong{ color:#4FD08A !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-ips strong{ color:#8EC2F2 !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat span{ font-size:8.5px !important; margin-top:3px !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-ip{ padding:6px !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-ip strong{ font-size:11.5px !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-ip small{ font-size:9.5px !important; margin-top:2px !important; }

/* ====================================================================================
   13/10 GRADE UNICA (auditoria de 3 agentes): topo e corpo com as mesmas 3 colunas,
   topos alinhados, verdes dentro da @layer (o prata do tema ganhava), caixa vazia da
   esquerda (fundo do aside) removida no PC, celular em 1 coluna. Ordem: PC, caixa, celular.
   ==================================================================================== */
/* ======================= GRADE UNICA 12/10 (topo = colunas) =======================
   Topo (.bm-header) e corpo (.bm-layout) com AS MESMAS 3 colunas e o MESMO vao.
   Pra mexer na grade, so nestas variaveis. Colar NO FIM do home_v2.css. */
html.bm-home-v2{ --v2-c1:200px; --v2-c3:210px; --v2-gap:28px; --v2-logo:180px; }

@media (min-width:981px){
  /* 1) as duas grades iguais (vence 230|620-690|170 + justify-content:center do site_modern
        e o 190|1fr|210 antigo deste arquivo) */
  html.bm-home-v2 .bm-shell > .bm-header,
  html.bm-home-v2 .bm-shell > .bm-layout{
    display:grid !important;
    grid-template-columns:var(--v2-c1) minmax(0,1fr) var(--v2-c3) !important;
    column-gap:var(--v2-gap) !important;
    justify-content:normal !important;
    width:auto !important; max-width:none !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
  }
  html.bm-home-v2 .bm-shell > .bm-header{
    row-gap:8px !important;
    align-items:stretch !important;          /* as 3 caixas: mesmo topo E mesma base */
    justify-items:stretch !important;        /* site_modern tem justify-items:center */
    margin-bottom:var(--v2-gap) !important;  /* vao topo->colunas = vao entre colunas */
  }
  html.bm-home-v2 .bm-shell > .bm-layout{ align-items:start !important; }

  /* 2) coluna 1 do topo: logo (tamanho/margem ficam no @layer la embaixo) */
  html.bm-home-v2 .bm-header > .bm-logo{
    grid-column:1 !important; grid-row:1 !important;
    align-self:start !important; justify-self:stretch !important;
    width:100% !important; max-width:100% !important;
  }
  html.bm-home-v2 .bm-header > .bm-logo::before{ display:none !important; } /* halo de 238px invisivel que vazava */
  html.bm-home-v2 .bm-header > .bm-logo picture{ display:block; width:100%; line-height:0; }
  html.bm-home-v2 .bm-header > .bm-logo img{ display:block; }

  /* bandeiras embaixo do logo (filhas diretas do header, linha 2 da coluna 1) */
  html.bm-home-v2 .bm-header > .bm-v2-langs{
    grid-column:1 !important; grid-row:2 !important;
    position:static !important; top:auto !important; right:auto !important;
    align-self:end !important; justify-self:center !important;
    display:flex !important; justify-content:center; gap:8px;
    margin:0 !important; padding:0 !important;
  }

  /* 3) coluna 2 do topo: barra do servidor ocupando a coluna inteira */
  html.bm-home-v2 .bm-header > .bm-serverbar{
    grid-column:2 !important; grid-row:1 / span 2 !important;
    align-self:stretch !important; justify-self:stretch !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
    margin:0 !important; box-sizing:border-box !important;
    padding:12px 14px !important;
    align-content:space-between !important;  /* grupos no topo, barra ao vivo na base */
  }

  /* 4) coluna 3 do topo: numeros do servidor */
  html.bm-home-v2 .bm-header > .bm-v2-server{
    grid-column:3 !important; grid-row:1 / span 2 !important;
    align-self:stretch !important; justify-self:stretch !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
    margin:0 !important; box-sizing:border-box !important;
    padding:12px !important;
    display:flex !important; flex-direction:column !important;
  }
  html.bm-home-v2 .bm-header > .bm-v2-server > .bm-v2-stats{
    flex:1 1 auto; align-content:space-between !important; gap:6px !important;
  }

  /* 5) corpo: as 3 colunas comecam na MESMA linha */
  html.bm-home-v2 .bm-layout > .bm-left,
  html.bm-home-v2 .bm-layout > .bm-main,
  html.bm-home-v2 .bm-layout > .bm-right{
    grid-row:1 !important;
    margin-top:0 !important;          /* eclipse.css: -40px (esq) e -60px (dir) */
    transform:none !important;        /* site_modern: .bm-right translateY(-188px) */
    align-self:start !important;
    width:auto !important; max-width:none !important; min-width:0 !important;
  }
  html.bm-home-v2 .bm-layout > .bm-left { grid-column:1 !important; }
  html.bm-home-v2 .bm-layout > .bm-main { grid-column:2 !important; }
  html.bm-home-v2 .bm-layout > .bm-right{ grid-column:3 !important; }
  /* <=1120 o site_modern vira as laterais em 2 colunas de ~95px: aqui sempre 1 coluna */
  html.bm-home-v2 .bm-layout > .bm-sidebar{ grid-template-columns:minmax(0,1fr) !important; }
  html.bm-home-v2 .bm-layout > .bm-main > :first-child,
  html.bm-home-v2 .bm-layout > .bm-right > .bm-widget:first-of-type,
  html.bm-home-v2 .bm-layout > .bm-left > .bm-play{ margin-top:0 !important; }
}

/* 6) LOGO: o tema prende 236px com !important DENTRO de @layer eclipse-estrutura.
      !important de camada ganha de qualquer !important fora de camada, entao
      a correcao tem que entrar na MESMA camada, com seletor mais forte. */
@layer eclipse-estrutura{
  @media (min-width:981px){
    html.bm-home-v2[data-tema="eclipse"] .bm-shell .bm-logo{
      height:auto !important; min-height:0 !important; margin:0 !important;
    }
    html.bm-home-v2[data-tema="eclipse"] .bm-shell .bm-logo img{
      width:100% !important; max-width:var(--v2-logo) !important; height:auto !important; margin:0 auto !important;
    }
  }
}

/* ======================= VERDES dos numeros (pedido 12/10) =======================
   O verde de antes NUNCA apareceu: eclipse.css tem, dentro de @layer eclipse,
   ".bm-widget strong{color:prata !important}" e ".bm-widget span{...}", que ganham
   de qualquer !important daqui. Cor de texto em .bm-widget so vence dentro da camada. */
@layer eclipse{
  html.bm-home-v2[data-tema="eclipse"] .bm-v2-stat.is-online strong{
    color:#5CF59B !important;
    text-shadow:0 0 6px rgba(92,245,155,.75), 0 0 16px rgba(92,245,155,.45) !important;
  }
  html.bm-home-v2[data-tema="eclipse"] .bm-v2-stat.is-online span{ color:#9BE8BC !important; }
  html.bm-home-v2[data-tema="eclipse"] .bm-v2-stat.is-ips strong{
    color:#3A9E68 !important;
    text-shadow:0 0 6px rgba(58,158,104,.22) !important;
  }
  html.bm-home-v2[data-tema="eclipse"] .bm-v2-stat.is-ips span{ color:#5E8F74 !important; }
}
/* caixinhas (nenhuma camada pinta .bm-v2-stat, entao aqui fora basta) */
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-online{
  background:radial-gradient(circle at 50% 0%, rgba(92,245,155,.16), transparent 70%), rgba(5,18,11,.60) !important;
  border:1px solid rgba(92,245,155,.50) !important;
  box-shadow:0 0 14px rgba(92,245,155,.18), inset 0 0 10px rgba(92,245,155,.08) !important;
}
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-ips{
  background:rgba(5,14,10,.50) !important;
  border:1px solid rgba(58,158,104,.26) !important;
  box-shadow:none !important;
}
/* cards menores */
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-online,
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-ips{ padding:5px 4px !important; border-radius:7px !important; min-height:0 !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-online strong,
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-ips strong{ font-size:18px !important; line-height:1 !important; }
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-online span,
html.bm-home-v2 .bm-v2-server .bm-v2-stat.is-ips span{ font-size:8px !important; margin-top:3px !important; letter-spacing:.08em !important; }
/* ===== Caixa escura vazia no topo da coluna esquerda (v2) =====
   Não é elemento escondido: é o fundo do PRÓPRIO aside (#bmMobileDrawer), pintado
   por eclipse.css:353 dentro de @layer eclipse e sem @media, ou seja, também no desktop.
   Na v1 o aside começa no "Jogar Agora" e esse fundo não aparece. Na v2 a faixa
   transparente das bandeiras + o gap de 10px deixam 53px dele à mostra.
   PRECISA ficar dentro de @layer eclipse: !important fora de camada perde pra
   !important de camada, qualquer que seja a especificidade. Especificidade aqui:
   (1,2,1), contra (1,1,1) no eclipse.css.
   Só a partir de 861px: abaixo disso o aside vira a gaveta do celular e precisa do fundo. */
@layer eclipse {
  @media (min-width:861px){
    html.bm-home-v2[data-tema="eclipse"] #bmMobileDrawer{
      background:none !important;
      box-shadow:none !important;
    }
  }
}

/* Bandeiras sem respiro extra. Mesma especificidade da linha 311, mas vem depois
   no arquivo, então vence. */
@media (min-width:861px){
  html.bm-home-v2 .bm-left .bm-v2-langs{ margin:0 !important; padding:0 !important; min-height:0 !important; }
}

/* Para o "topo com topo": a coluna direita ainda sobe 60px por eclipse.css:831.
   Mesma especificidade, fora de camada e carregado depois, então vence. */
@media (min-width:981px){
  html.bm-home-v2 .bm-layout > .bm-right{ margin-top:0 !important; }
}
/* ======================= TOPO EM 3 COLUNAS - CELULAR E TABLET (<=980px) =======================
   No PC o topo vira grade de 3 colunas (logo+bandeiras | barra | numeros). Aqui embaixo de 980px
   ele vira UMA coluna, na ordem: logo -> bandeiras -> barra -> numeros do servidor.
   Por que tudo com !important e com "html.bm-home-v2 .bm-header ...":
   - o site_modern_reistella.css tem .bm-logo{grid-column:2} e .bm-serverbar{grid-column:2} SEM media
     (linhas 3074 e 3085), .bm-logo{grid-column:1 !important}/.bm-serverbar{grid-column:2 / 4 !important}
     a partir de 861px (4067/4080) e .bm-header{grid-template-columns:230px minmax(620px,690px) 170px !important}
     a partir de 901px (7940). Sem colocar cada filho na coluna 1 aqui, o numero do servidor cairia
     AO LADO da barra (na coluna 1fr que sobra vazia), e entre 901 e 980px o topo passaria de 1048px.
   - .bm-logo{order:0} e .bm-serverbar{order:1} (3737/3752, ate 860px): sem order explicito o bloco
     de numeros (order 0) pularia pra CIMA da barra.
   Vale com as bandeiras soltas no header (irmas do logo) OU dentro de um <div class="bm-v2-brand">
   junto com o logo. */
@media (max-width:980px){
  html.bm-home-v2 .bm-header{
    display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none !important;
    grid-auto-flow:row !important; justify-content:stretch !important; justify-items:stretch !important;
    align-items:start !important; row-gap:12px !important; column-gap:0 !important;
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
    margin:0 0 12px !important; padding-top:0 !important; padding-bottom:0 !important;
  }
  /* cada filho do topo: coluna 1 inteira, uma linha cada */
  html.bm-home-v2 .bm-header > *{
    grid-column:1 / -1 !important; grid-row:auto !important;
    min-width:0 !important; max-width:100% !important; box-sizing:border-box !important;
  }

  /* bloco do logo (se existir o embrulho .bm-v2-brand) */
  html.bm-home-v2 .bm-header > .bm-v2-brand{
    order:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important;
    gap:6px !important; width:100% !important; margin:0 !important;
  }

  /* logo: sem margem negativa (ela puxava a barra/bandeiras pra cima do logo) */
  html.bm-home-v2 .bm-header .bm-logo{
    order:1 !important; justify-self:stretch !important; align-self:center !important;
    width:100% !important; min-height:0 !important; margin:0 !important;
    display:flex !important; justify-content:center !important; align-items:center !important;
  }

  /* bandeiras: centralizadas embaixo do logo, alvo de toque maior */
  html.bm-home-v2 .bm-header .bm-v2-langs{
    order:2 !important; position:static !important; top:auto !important; right:auto !important; z-index:auto !important;
    display:flex !important; justify-content:center !important; align-items:center !important; flex-wrap:nowrap !important;
    gap:8px !important; width:100% !important; margin:0 !important; padding:0 !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
  }
  html.bm-home-v2 .bm-header .bm-v2-langs a{ padding:6px 9px !important; opacity:.9; }
  html.bm-home-v2 .bm-header .bm-v2-langs img{ width:22px !important; height:15px !important; }

  /* barra: largura toda, filhos esticados (a barra ao vivo ficava estreita e centralizada no tablet) */
  html.bm-home-v2 .bm-header > .bm-serverbar{
    order:3 !important; justify-self:stretch !important; align-self:start !important;
    width:100% !important; margin:0 !important; justify-items:stretch !important;
    padding:10px !important;
  }

  /* numeros do servidor: logo abaixo da barra, mesma largura e mesmo recuo interno da barra */
  html.bm-home-v2 .bm-header > .bm-v2-server{
    order:4 !important; justify-self:stretch !important; align-self:start !important;
    width:100% !important; margin:0 !important; padding:10px !important; position:static !important;
  }
  html.bm-home-v2 .bm-header .bm-v2-server .bm-v2-stats{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important;
  }

  /* coluna da direita: sem o -8px que encostava ela no conteudo (linha horizontal igual entre blocos) */
  html.bm-home-v2 .bm-layout > .bm-right{ margin-top:0 !important; }
  /* 861-980px a direita e 2 colunas: sem o widget dos numeros sobram 5 (dia de semana) - o ultimo ocupa a linha toda */
  html.bm-home-v2 .bm-layout > .bm-right > section.bm-widget:last-of-type:nth-of-type(odd){ grid-column:1 / -1 !important; }
}

/* linhas verticais: o topo e o conteudo com o MESMO recuo lateral (hoje: topo 10px, conteudo 8px no celular pequeno) */
@media (max-width:860px){
  html.bm-home-v2 .bm-header,
  html.bm-home-v2 .bm-layout{ padding-left:10px !important; padding-right:10px !important; }
}
@media (max-width:420px){
  html.bm-home-v2 .bm-header,
  html.bm-home-v2 .bm-layout{ padding-left:8px !important; padding-right:8px !important; }
  /* os 4 botoes de grupo em 2x2 (empilhados em 1 coluna empurravam os numeros pra fora da primeira tela) */
  html.bm-home-v2 .bm-header .bm-serverbar-socials{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* tablet (600-980px): online | IPs | IP do servidor numa linha so */
@media (min-width:600px) and (max-width:980px){
  html.bm-home-v2 .bm-header .bm-v2-server .bm-v2-stats{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) !important;
  }
  html.bm-home-v2 .bm-header .bm-v2-server .bm-v2-ip{ grid-column:auto !important; }
  html.bm-home-v2 .bm-header .bm-v2-server .bm-v2-doar{ grid-column:1 / -1 !important; }
}

/* logo no tablet: ate 900px a imagem tem 230px de largura travada por camada (eclipse.css:621) e sem teto de
   altura acima de 860px -> limita a altura (object-fit:contain ja existe, nao distorce). */
@media (min-width:861px) and (max-width:900px){
  html.bm-home-v2 .bm-header .bm-logo img{ max-height:130px !important; }
}
/* 901-980px: o eclipse.css (@layer eclipse-estrutura, linhas 607/612) trava logo e imagem em 236px com
   !important de CAMADA, que nenhum !important daqui vence. zoom encolhe a caixa inteira (236 -> ~130px).
   Navegador sem zoom (Firefox < 126) so ignora e fica como esta hoje. */
@media (min-width:901px) and (max-width:980px){
  html.bm-home-v2 .bm-header .bm-logo{ zoom:.55; }
}
/* ====================================================================================
   12/10 REVISAO (3 agentes, cada correcao conferida no resolvedor de cascata).
   Linhas guia: topo das 3 colunas na mesma altura, recuo interno igual (10px) no topo
   e nos widgets, Hall com a mesma largura do banner.
   ==================================================================================== */

/* (a) 901-980: a coluna direita subia 188px por cima do fim do miolo (site_modern:8735) */
@media (max-width:980px){
  html.bm-home-v2 .bm-layout > .bm-right{ transform:none !important; }
}

/* (b) 861-980: o carrossel (20 slides) estourava a coluna do meio e cortava banner e Hall */
@media (min-width:861px) and (max-width:980px){
  html.bm-home-v2 .bm-layout > .bm-main{ grid-template-columns:minmax(0,1fr) !important; }
  html.bm-home-v2 .bm-layout > .bm-main > *{ min-width:0 !important; }
  html.bm-home-v2 .bm-layout > .bm-main > .bm-season-news{ overflow:hidden !important; }
  /* (c) Jogar / Criar Conta / Download numa linha so, mesma altura, sem o -8px */
  html.bm-home-v2 .bm-layout > .bm-left{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch !important; }
  html.bm-home-v2 .bm-layout > .bm-left > .bm-create-account{ margin-top:0 !important; }
  html.bm-home-v2 .bm-layout > .bm-left > :is(.bm-play,.bm-create-account,.bm-download){ min-height:46px !important; height:46px !important; }
  html.bm-home-v2 .bm-layout > .bm-left > .bm-menu{ grid-column:1 / -1 !important; }
}

/* (d) celular: a ultima linha de cartoes do Hall fica centralizada */
@media (max-width:860px){
  html.bm-home-v2 .bm-hall-cards{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:8px !important; }
  html.bm-home-v2 .bm-hall-cards > .bm-hc{ flex:0 0 98px !important; width:98px !important; }
}

@media (min-width:981px){
  /* (e) menu da esquerda sempre 1 coluna (site_modern:2444 virava 2 de ~95px ate 1120) */
  html.bm-home-v2 .bm-layout > .bm-left > .bm-menu{ grid-template-columns:minmax(0,1fr) !important; }
  /* (h) bandeiras grudadas 8px abaixo do logo (a sobra de altura vai pra linha 2, nao separa) */
  html.bm-home-v2 .bm-shell > .bm-header{ grid-template-rows:auto 1fr !important; }
  html.bm-home-v2 .bm-shell > .bm-header > .bm-v2-langs{ align-self:start !important; }
  /* (k) recuo interno 10px dos lados = o mesmo dos widgets da direita (linha vertical unica) */
  html.bm-home-v2 .bm-header > .bm-v2-server{ padding:12px 10px !important; }
  /* (n) sem promo (acaba 12/10 23:59): espalha os 2 blocos da barra em vez de abrir um buraco no meio */
  html.bm-home-v2 .bm-header > .bm-serverbar:not(:has(> .bm-v2-promo)){ align-content:space-evenly !important; }
  html.bm-home-v2 .bm-v2-server .bm-v2-doar small{ display:none !important; } /* vale pras 2 copias (topo e direita) */
}

/* (f)(g) 981-1120: botoes de grupo 2x2 e os 5 cartoes do Hall cabendo sem corte */
@media (min-width:981px) and (max-width:1120px){
  html.bm-home-v2 .bm-header > .bm-serverbar > .bm-serverbar-socials{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html.bm-home-v2 .bm-hall-cards{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:6px !important; }
  html.bm-home-v2 .bm-hc{ padding-left:4px !important; padding-right:4px !important; }
}

/* (l) laterais iguais: o meio fica no centro exato da pagina (logo de 180px cabe nos 205) */
html.bm-home-v2{ --v2-c1:205px; --v2-c3:205px; }

/* (m) cartoes das GUILDS no Hall perdiam o fundo (site_modern:6459 deixa link de guild transparente) */
html.bm-home-v2 .bm-hall a.bm-hc[href]{
  background:linear-gradient(180deg, rgba(30,35,48,.95), rgba(12,14,20,.95)) !important;
}
html.bm-home-v2 .bm-hall a.bm-hc.bm-hc-p1[href]{
  background:radial-gradient(circle at 50% 20%, rgba(243,213,140,.22), transparent 70%),
             linear-gradient(180deg, rgba(42,34,20,.96), rgba(14,12,9,.96)) !important;
}

/* Tudo abaixo precisa de camada: o !important das folhas do tema (em camada ou com 11 :not) ganha de fora */
@layer eclipse{
  /* (i) Hall com a mesma largura do banner (a borda transparente de 1px ainda ocupava espaco) */
  html.bm-home-v2[data-tema="eclipse"] body.bm-page-latestnews.ec-dark .bm-main > .bm-content{ border-width:0 !important; }
  /* (j) caixa do IP com o visual discreto das caixinhas (o estilo global de botao vencia) */
  html.bm-home-v2[data-tema="eclipse"] .bm-v2-server .bm-v2-ip{
    padding:6px !important;
    border:1px solid rgba(203,208,218,.10) !important;
    background:rgba(0,0,0,.28) !important;
  }
  html.bm-home-v2[data-tema="eclipse"] .bm-v2-server .bm-v2-ip:hover{ border-color:rgba(227,195,143,.55) !important; }
  /* nomes e valores do Hall com a cor planejada (a "rede de seguranca" prata do tema ganhava) */
  html.bm-home-v2[data-tema="eclipse"] body.ec-dark .bm-hall .bm-hc .bm-hc-nm{ color:#BFD3F5 !important; }
  html.bm-home-v2[data-tema="eclipse"] body.ec-dark .bm-hall .bm-hc-p1 .bm-hc-nm{ color:#F3D58C !important; }
  html.bm-home-v2[data-tema="eclipse"] body.ec-dark .bm-hall .bm-hc .bm-hc-val{ color:#FFFFFF !important; }
  html.bm-home-v2[data-tema="eclipse"] body.ec-dark .bm-hall .bm-hc .bm-hc-val small{ color:#8F98AB !important; }
}

/* ====================================================================================
   12/10 COLUNA DIREITA SOBE (print 19h43: "subir o card do IP pra subir os outros").
   No PC o quadro dos numeros (online, IPs, IP) deixa de ser a 3a coluna do TOPO e vira o
   1o quadro da coluna direita (o layout.php imprime o mesmo HTML nos 2 lugares). A pagina
   inteira vira UMA grade (.bm-shell): o topo ocupa as colunas 1-2, a coluna direita desce
   desde o alto da pagina, e esquerda/miolo comecam juntos logo abaixo do topo.
   A linha 2 e 1fr de proposito: item que atravessa linha flexivel joga a altura so nela,
   entao a coluna direita (alta) nao estica o topo.
   Celular/tablet (<=980) continua igual: numeros no topo, copia da direita escondida.
   ==================================================================================== */
@media (min-width:981px){
  html.bm-home-v2 body .bm-shell{
    display:grid !important;
    grid-template-columns:var(--v2-c1) minmax(0,1fr) var(--v2-c3) !important;
    grid-template-rows:auto 1fr !important;
    column-gap:var(--v2-gap) !important; row-gap:var(--v2-gap) !important;
    align-items:start !important;
  }
  html.bm-home-v2 .bm-shell > .bm-header{
    grid-column:1 / 3 !important; grid-row:1 !important;
    grid-template-columns:var(--v2-c1) minmax(0,1fr) !important;
    margin-bottom:0 !important;
  }
  html.bm-home-v2 .bm-header > .bm-v2-server{ display:none !important; }
  html.bm-home-v2 .bm-shell > .bm-layout{ display:contents !important; }
  html.bm-home-v2 .bm-layout > .bm-left { grid-column:1 !important; grid-row:2 !important; }
  html.bm-home-v2 .bm-layout > .bm-main { grid-column:2 !important; grid-row:2 !important; }
  /* margin-top 10px = o mesmo margin-top do header (site_modern:7946): os topos do logo, da barra e deste quadro na mesma linha */
  html.bm-home-v2 .bm-layout > .bm-right{ grid-column:3 !important; grid-row:1 / span 2 !important; margin-top:10px !important; }
  /* o quadro dos numeros na direita: altura natural, IP logo abaixo dos dois verdes */
  html.bm-home-v2 .bm-right > .bm-v2-server-dir > .bm-v2-stats{ align-content:start !important; gap:6px !important; }
}
/* complemento EXATO do (min-width:981px): com zoom/escala do Windows a largura pode ser 980,5 e as duas copias apareceriam */
@media not all and (min-width:981px){
  html.bm-home-v2 .bm-right > .bm-v2-server-dir{ display:none !important; }
}