/* =====================================================================
   COMBATE B — a moldura premium em volta da arena (escolha do autor, 28/09)
   ---------------------------------------------------------------------
   O autor escolheu a opção B do checkpoint visual do Combate ("Sem dúvidas a
   B"). Esta folha é carregada POR ÚLTIMO e muda só a MOLDURA da página:

     - topo numa faixa só (logo + navegação + atalhos redondos), e a arena
       sobe para a primeira dobra (antes eram 185px de topo em 1366x768);
     - barra do herói com orbes de HP e MP, Nível/XP, Alma e Gold;
     - moldura dourada FORA da arena (outline: não ocupa espaço nem pinta
       dentro dela);
     - painéis de baixo no mesmo acabamento da Loja B;
     - no celular, barra inferior fixa (Batalha, Inventário, Loja, PvP, Mais).

   REGRA ABSOLUTA DO AUTOR: a arena de hordas NÃO muda. Nada aqui entra em
   #monsterCard (tamanho, cenário, personagem, mobs, HUD interna, câmera). O
   tamanho da arena vem de --arena-height e da largura do #gameShell, e os dois
   ficam como estavam. tests/combate-b-contract.mjs vigia isso.
   ===================================================================== */

#gameShell{
  --b-ouro:#f3cf7a;
  --b-ouro-2:#b8913f;
  --b-ouro-escuro:#6b5426;
  --b-borda:#3d311a;
  --b-texto:#f1e2b8;
  --b-texto-2:#b8a984;
  --b-painel:linear-gradient(180deg,#17120b,#110e0a);
}

/* ---------------------------------------------------------------------
   1. TOPO NUMA FAIXA SÓ
   --------------------------------------------------------------------- */
#gameShell>.topbar{
  display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap;
  gap:14px!important;min-height:64px!important;height:auto;margin:0 0 12px!important;padding:0 12px!important;
  border:0!important;border-bottom:1px solid #4a3b1c!important;border-radius:0!important;
  background:linear-gradient(180deg,#1b150c,#110e09)!important;
  box-shadow:0 1px 0 #000,0 8px 24px -12px rgba(215,169,68,.2)!important;
  position:relative;z-index:30;
}
#gameShell .game-brand{display:block!important;flex:0 0 auto;line-height:0}
#gameShell .game-brand>span,#gameShell .game-brand>h1{display:none!important}
/* O logo é o mesmo da tela inicial; o recorte mostra só a palavra. */
#gameShell .game-brand-logo{display:block;width:132px;height:50px;object-fit:cover;object-position:50% 57.8%}

/* A navegação é irmã do topo no DOM (seletores do Editor do autor), e sobe
   para a faixa dele com margem negativa: fica entre o logo e os atalhos. */
#gameShell>.main-nav{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:center;align-items:stretch;gap:0!important;
  position:relative;z-index:31;height:64px;
  margin:-76px 216px 12px 170px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  min-width:0;
}
#gameShell>.main-nav>.nav-button,
#gameShell>.main-nav>.nav-more-wrap>.nav-button{
  position:relative;flex:0 1 auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center;gap:7px!important;
  min-height:64px!important;height:64px;padding:0 10px!important;margin:0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  color:#bda984!important;font-family:var(--font-display),Georgia,serif!important;font-weight:700!important;
  font-size:calc(12px * var(--text-scale,1))!important;letter-spacing:.08em!important;white-space:nowrap;
}
#gameShell>.main-nav>.nav-more-wrap{display:flex!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;align-items:stretch;position:relative}
#gameShell>.main-nav>.nav-button>img,
#gameShell>.main-nav>.nav-more-wrap>.nav-button>img{width:24px!important;height:24px!important;flex:0 0 24px;object-fit:contain;margin:0!important}
#gameShell>.main-nav>.nav-button>.col-icone{width:24px!important;height:24px!important;flex:0 0 24px;font-size:18px!important;font-style:normal;display:inline-grid;place-items:center;margin:0!important}
#gameShell>.main-nav>.nav-button>.col-icone img{width:24px;height:24px;object-fit:contain}
#gameShell>.main-nav>.nav-button>span{max-width:none!important}
#gameShell>.main-nav>.nav-button:hover{color:#fff0c4!important;background:linear-gradient(180deg,transparent,rgba(215,169,68,.08))!important}
/* A aba ativa: brilho de baixo, fio dourado e o losango. */
#gameShell>.main-nav>.nav-button.active{color:#fff0c4!important;background:linear-gradient(180deg,transparent,rgba(215,169,68,.12))!important}
#gameShell>.main-nav>.nav-button.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--b-ouro),transparent)}
#gameShell>.main-nav>.nav-button.active::before{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:var(--b-ouro);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 10px var(--b-ouro);z-index:1}
#gameShell>.main-nav .nav-more-menu{top:calc(100% + 6px)!important;z-index:40}

/* Atalhos da direita: círculos com a arte do ícone; o número vermelho fica. */
#gameShell .topbar .save-panel{display:flex!important;flex:0 0 auto;align-items:center;gap:8px!important;margin:0 0 0 auto!important;flex-wrap:nowrap!important}
#gameShell .topbar .save-panel>.topbar-button,
#gameShell .topbar .conta-wrap>.conta-menu-button{
  position:relative;width:38px!important;height:38px!important;min-width:0!important;min-height:0!important;padding:0!important;
  border-radius:50%!important;border:1px solid var(--b-ouro-escuro)!important;
  background:radial-gradient(circle at 50% 35%,#3a2e17,#15110a)!important;box-shadow:none!important;
  display:grid!important;place-items:center;font-size:0!important;letter-spacing:0!important;color:transparent!important;overflow:visible;
}
#gameShell .topbar .save-panel>.topbar-button:hover,
#gameShell .topbar .conta-wrap>.conta-menu-button:hover{border-color:var(--b-ouro-2)!important;box-shadow:0 0 12px rgba(243,207,122,.25)!important}
#gameShell .topbar .save-panel>.topbar-button>.col-icone,
#gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone{font-size:18px;line-height:1;font-style:normal;color:#fff;width:22px;height:22px;display:grid;place-items:center;margin:0!important}
#gameShell .topbar .save-panel>.topbar-button>.col-icone img,
#gameShell .topbar .conta-wrap>.conta-menu-button>.col-icone img{width:22px;height:22px;object-fit:contain}
#gameShell .topbar .save-panel .nav-mail-badge{position:absolute!important;top:-4px!important;right:-4px!important;margin:0!important;font-size:10px!important;line-height:1.4;color:#fff!important;background:#b8322c!important;border:1px solid #1b150c;border-radius:9px;padding:0 5px!important;min-width:0}
#gameShell .topbar .save-panel>.save-status{font-size:calc(11px * var(--text-scale,1))}
/* A versão agora vive no menu CONTA, no rodapé dele. */
#gameShell .conta-menu .conta-menu-versao{display:block!important;margin:6px 10px 2px;color:#8f8467;font-size:11px;text-align:right}

/* ---------------------------------------------------------------------
   2. MOLDURA DOURADA DA ARENA
   Só `outline`: fica FORA da borda, não ocupa espaço e não pinta dentro.
   Com o Editor aberto ela sai, para não brigar com os contornos dele.
   --------------------------------------------------------------------- */
body:not(.col-editor-active) #gameShell #monsterCard.battle-stage-card{outline:3px solid var(--b-ouro-2);outline-offset:2px}

/* ---------------------------------------------------------------------
   3. BARRA DO HERÓI (a antiga faixa de 14 células)
   Orbe de HP à esquerda, orbe de MP à direita; no meio, Nível/XP/Alma/Gold
   em cima e os números de combate embaixo. As barras continuam as MESMAS
   (o jogo escreve a largura delas); dentro do orbe a barra gira -90°, e a
   largura vira altura: o orbe enche de baixo para cima.
   --------------------------------------------------------------------- */
@media (min-width:901px){
  #gameShell #battleVitalsStrip.battle-vitals-strip{
    display:grid!important;
    grid-template-columns:84px minmax(96px,auto) repeat(6,minmax(0,1fr)) 84px!important;
    grid-template-rows:38px 34px;
    gap:4px 8px!important;align-items:center;
    padding:6px 10px!important;margin-top:4px;
    border:1px solid #4a3b1c!important;border-radius:44px!important;
    background:linear-gradient(180deg,#17120a,#0f0c08)!important;box-shadow:0 10px 30px rgba(0,0,0,.35)!important;
  }
  #gameShell #battleVitalsStrip>.vital-divider{display:none!important}
  #gameShell #battleVitalsStrip>.vital-cell{min-width:0;padding:0 4px!important;border:0!important;background:none!important;box-shadow:none!important}
  #gameShell #battleVitalsStrip .vital-label{color:var(--b-texto-2)!important;letter-spacing:.08em}
  #gameShell #battleVitalsStrip .vital-value,#gameShell #battleVitalsStrip strong{color:var(--b-texto)!important}
  /* linha de cima */
  #gameShell #battleVitalsStrip>.vital-identity{grid-column:2;grid-row:1;display:flex!important;align-items:baseline;gap:6px;font-family:var(--font-display),Georgia,serif}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(2){grid-column:3/7;grid-row:1}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(3){grid-column:7/8;grid-row:1}
  #gameShell #battleVitalsStrip>.vital-gold{grid-column:8/9;grid-row:1;display:flex!important;align-items:center;justify-content:flex-end;gap:6px}
  #gameShell #battleVitalsStrip>.vital-gold strong{font-size:calc(15px * var(--text-scale,1))}
  #gameShell #battleVitalsStrip .xp-bar.vital-track{height:9px!important;border-radius:6px!important;background:#0a0806!important;border:1px solid var(--b-borda)!important}
  #gameShell #battleVitalsStrip .xp-fill{background:linear-gradient(90deg,#9a6b1f,var(--b-ouro))!important;box-shadow:0 0 10px rgba(243,207,122,.6)}
  /* linha de baixo: os sete números de combate */
  #gameShell #battleVitalsStrip>.vital-stat{grid-row:2;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px;border-top:1px solid #2a2112!important;padding-top:4px!important;height:100%}
  #gameShell #battleVitalsStrip>.vital-stat>*{display:inline-flex!important;align-items:center;gap:4px;margin:0!important}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(8){grid-column:2}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(9){grid-column:3}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(10){grid-column:4}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(11){grid-column:5}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(12){grid-column:6}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(13){grid-column:7}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(14){grid-column:8}
  /* os orbes */
  #gameShell #battleVitalsStrip>.vital-hp,#gameShell #battleVitalsStrip>.vital-mp{
    grid-row:1/3;width:76px;height:76px;padding:0!important;border-radius:50%!important;position:relative;overflow:hidden;isolation:isolate;
    display:grid!important;place-content:center;text-align:center;gap:0;
    border:2px solid var(--b-ouro-2)!important;box-shadow:inset 0 0 0 3px #120e08,0 0 14px rgba(0,0,0,.55)!important;
  }
  #gameShell #battleVitalsStrip>.vital-hp{grid-column:1;background:#1a0c0c!important}
  #gameShell #battleVitalsStrip>.vital-mp{grid-column:9;background:#0c1020!important}
  #gameShell #battleVitalsStrip>.vital-hp .vital-track,
  #gameShell #battleVitalsStrip>.vital-mp .vital-track{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;
    transform:rotate(-90deg);border:0!important;border-radius:0!important;background:none!important;z-index:-1;
  }
  #gameShell #battleVitalsStrip>.vital-hp .vital-track>div,
  #gameShell #battleVitalsStrip>.vital-mp .vital-track>div{height:100%!important;border-radius:0!important}
  #gameShell #battleVitalsStrip>.vital-hp .player-hp-fill{background:linear-gradient(90deg,#7d1719,#c0302f)!important}
  #gameShell #battleVitalsStrip>.vital-mp .mana-fill{background:linear-gradient(90deg,#1c3b8f,#3b6be0)!important}
  #gameShell #battleVitalsStrip>.vital-hp::after,#gameShell #battleVitalsStrip>.vital-mp::after{
    content:"";position:absolute;inset:7px 16px auto 16px;height:18px;border-radius:50%;background:linear-gradient(rgba(255,255,255,.3),transparent);pointer-events:none;
  }
  #gameShell #battleVitalsStrip>.vital-hp .vital-label,#gameShell #battleVitalsStrip>.vital-mp .vital-label{order:2;font-size:9px!important;letter-spacing:.14em;color:#ffe9e9!important;opacity:.85}
  #gameShell #battleVitalsStrip>.vital-hp .vital-label .col-icone,#gameShell #battleVitalsStrip>.vital-mp .vital-label .col-icone{display:none}
  #gameShell #battleVitalsStrip>.vital-hp .vital-value,#gameShell #battleVitalsStrip>.vital-mp .vital-value{
    order:1;font-size:calc(11px * var(--text-scale,1))!important;font-weight:800;color:#fff!important;text-shadow:0 1px 2px #000,0 0 6px #000;line-height:1.15;
  }
}

/* Telas estreitas: a mesma barra, empilhada. Orbes nas pontas, Nível/Gold e
   XP no meio, e os números de combate numa grade de quatro embaixo. */
@media (max-width:900px){
  #gameShell #battleVitalsStrip.battle-vitals-strip{
    display:grid!important;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 64px!important;grid-auto-flow:row dense;
    gap:6px 8px!important;align-items:center;padding:8px 10px!important;margin-top:4px;
    border:1px solid #4a3b1c!important;border-radius:18px!important;background:linear-gradient(180deg,#17120a,#0f0c08)!important;
  }
  #gameShell #battleVitalsStrip>.vital-divider{display:none!important}
  #gameShell #battleVitalsStrip>.vital-cell{min-width:0;padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important}
  #gameShell #battleVitalsStrip .vital-label{color:var(--b-texto-2)!important}
  #gameShell #battleVitalsStrip .vital-value,#gameShell #battleVitalsStrip strong{color:var(--b-texto)!important}
  #gameShell #battleVitalsStrip>.vital-identity{grid-column:2;grid-row:1;display:flex!important;align-items:baseline;gap:6px}
  #gameShell #battleVitalsStrip>.vital-gold{grid-column:3;grid-row:1;display:flex!important;align-items:center;justify-content:flex-end;gap:6px}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(2){grid-column:2/4;grid-row:2}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(3){grid-column:1/5;grid-row:3}
  #gameShell #battleVitalsStrip .xp-fill{background:linear-gradient(90deg,#9a6b1f,var(--b-ouro))!important}
  #gameShell #battleVitalsStrip>.vital-stat{grid-column:span 1;display:flex!important;flex-direction:column!important;align-items:center;gap:1px;border-top:1px solid #2a2112!important;padding-top:5px!important}
  #gameShell #battleVitalsStrip>.vital-stat .vital-label{font-size:9px!important;white-space:nowrap}
  #gameShell #battleVitalsStrip>.vital-hp,#gameShell #battleVitalsStrip>.vital-mp{
    grid-row:1/3;width:64px;height:64px;padding:0!important;border-radius:50%!important;position:relative;overflow:hidden;isolation:isolate;
    display:grid!important;place-content:center;text-align:center;gap:0;
    border:2px solid var(--b-ouro-2)!important;box-shadow:inset 0 0 0 3px #120e08!important;
  }
  #gameShell #battleVitalsStrip>.vital-hp{grid-column:1;background:#1a0c0c!important}
  #gameShell #battleVitalsStrip>.vital-mp{grid-column:4;background:#0c1020!important}
  #gameShell #battleVitalsStrip>.vital-hp .vital-track,#gameShell #battleVitalsStrip>.vital-mp .vital-track{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;
    transform:rotate(-90deg);border:0!important;border-radius:0!important;background:none!important;z-index:-1;
  }
  #gameShell #battleVitalsStrip>.vital-hp .vital-track>div,#gameShell #battleVitalsStrip>.vital-mp .vital-track>div{height:100%!important;border-radius:0!important}
  #gameShell #battleVitalsStrip>.vital-hp .player-hp-fill{background:linear-gradient(90deg,#7d1719,#c0302f)!important}
  #gameShell #battleVitalsStrip>.vital-mp .mana-fill{background:linear-gradient(90deg,#1c3b8f,#3b6be0)!important}
  #gameShell #battleVitalsStrip>.vital-hp .vital-label,#gameShell #battleVitalsStrip>.vital-mp .vital-label{order:2;font-size:8px!important;color:#ffe9e9!important}
  #gameShell #battleVitalsStrip>.vital-hp .vital-label .col-icone,#gameShell #battleVitalsStrip>.vital-mp .vital-label .col-icone{display:none}
  #gameShell #battleVitalsStrip>.vital-hp .vital-value,#gameShell #battleVitalsStrip>.vital-mp .vital-value{order:1;font-size:10px!important;font-weight:800;color:#fff!important;text-shadow:0 1px 2px #000}
}

/* ---------------------------------------------------------------------
   4. PAINÉIS DE BAIXO — o acabamento da Loja B
   --------------------------------------------------------------------- */
#gameShell .battle-left-rail>.card,
#gameShell .battle-command-deck>.card,
#gameShell .battle-right-rail>.card,
#gameShell .battle-right-rail>[data-rail-card]{
  background:var(--b-painel)!important;border:1px solid var(--b-borda)!important;border-radius:12px!important;
  box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
}
#gameShell .battle-left-rail h2,#gameShell .battle-left-rail h3,
#gameShell .battle-command-deck h2,#gameShell .battle-command-deck h3,
#gameShell .battle-right-rail h2,#gameShell .battle-right-rail h3{
  color:#e2c47e!important;font-family:var(--font-display),Georgia,serif!important;letter-spacing:.1em!important;
}

/* ---------------------------------------------------------------------
   5. TELAS MÉDIAS: o topo quebra em duas linhas (a navegação desce inteira)
   --------------------------------------------------------------------- */
@media (max-width:1180px){
  #gameShell>.topbar{margin-bottom:0!important}
  #gameShell .topbar .save-panel{margin-left:auto!important}
  #gameShell>.main-nav{height:auto;margin:0 0 12px!important;justify-content:space-between;border-bottom:1px solid #4a3b1c!important;background:linear-gradient(180deg,#140f09,#100d08)!important}
  #gameShell>.main-nav>.nav-button,
  #gameShell>.main-nav>.nav-more-wrap>.nav-button{flex:1 1 0!important;width:auto!important;min-width:0!important;flex-direction:column!important;
    min-height:54px!important;height:54px;padding:4px 2px!important;gap:3px!important;font-size:calc(10px * var(--text-scale,1))!important;letter-spacing:.04em!important}
  /* O MAIS ganhava só 32px (as outras abas ~100) e o rótulo encostava na borda. */
  #gameShell>.main-nav>.nav-more-wrap{flex:1 1 0!important;min-width:0!important;width:auto!important;display:flex!important}
  #gameShell>.main-nav>.nav-more-wrap>.nav-button{width:100%!important}
  #gameShell>.main-nav .nav-button>span{overflow:visible!important;text-overflow:clip!important}
  #gameShell #navMoreButton::before{height:24px!important;line-height:24px!important;color:#bda984!important}
}

/* ---------------------------------------------------------------------
   6. CELULAR: topo curto, navegação na barra de baixo
   --------------------------------------------------------------------- */
/* Camadas: acima da HUD da batalha (~80) e ABAIXO da camada de overlay (500,
   painel do pet), dos modais e do chat. */
.bottom-nav{display:none}
@media (max-width:699px){
  #gameShell>.topbar{min-height:52px!important;padding:0 8px!important;flex-wrap:nowrap!important;margin-bottom:8px!important}
  #gameShell .game-brand-logo{width:106px;height:40px}
  #gameShell .topbar .save-panel{gap:6px!important;margin-left:auto!important}
  #gameShell .topbar .save-panel>.topbar-button,
  #gameShell .topbar .conta-wrap>.conta-menu-button{width:34px!important;height:34px!important}
  /* A navegação do topo vira a folha do MAIS. */
  #gameShell>.main-nav{display:none!important}
  body.nav-folha-aberta .col-chat{display:none!important}
  body.nav-folha-aberta #gameShell>.main-nav{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;
    position:fixed;left:8px;right:8px;bottom:74px;z-index:450;padding:10px!important;margin:0!important;height:auto;
    background:linear-gradient(180deg,#1b150c,#0f0c08)!important;border:1px solid var(--b-ouro-escuro)!important;border-radius:14px!important;
    box-shadow:0 -10px 40px rgba(0,0,0,.6)!important;
  }
  body.nav-folha-aberta #gameShell>.main-nav>.nav-button,
  body.nav-folha-aberta #gameShell>.main-nav>.nav-more-wrap>.nav-button{
    flex-direction:column!important;height:auto;min-height:62px!important;padding:6px 2px!important;gap:3px!important;font-size:10px!important;
    border:1px solid #2e2413!important;border-radius:10px!important;background:#120e09!important;
  }
  body.nav-folha-aberta #gameShell>.main-nav>.nav-button.active::after,
  body.nav-folha-aberta #gameShell>.main-nav>.nav-button.active::before{display:none}
  body.nav-folha-aberta #gameShell>.main-nav .nav-more-menu{bottom:calc(100% + 6px);top:auto!important}

  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:400;height:64px;padding:0 4px env(safe-area-inset-bottom,0);
    justify-content:space-around;align-items:stretch;
    background:linear-gradient(180deg,#1b150c,#0f0c08);border-top:1px solid var(--b-ouro-escuro);box-shadow:0 -8px 24px rgba(0,0,0,.5);
  }
  #gameShell.hidden~.bottom-nav,#gameShell.hidden .bottom-nav{display:none}
  .bottom-nav>button{
    flex:1 1 0;min-width:0;display:grid;justify-items:center;align-content:center;gap:2px;padding:0!important;margin:0;
    border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
    color:#bda984!important;font:700 10px var(--font-display),Georgia,serif!important;letter-spacing:.06em;
  }
  .bottom-nav>button>img,.bottom-nav>button>.col-icone{width:26px;height:26px;object-fit:contain;font-size:20px;font-style:normal;display:grid;place-items:center}
  .bottom-nav>button>.col-icone img{width:26px;height:26px;object-fit:contain}
  .bottom-nav>button.active,.bottom-nav>button[aria-expanded="true"]{color:#fff0c4!important;text-shadow:0 0 8px rgba(243,207,122,.55)}
  .bottom-nav>button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* O botão do chat sobe para cima da barra (antes ele cobria o MAIS). */
  body:has(#gameShell:not(.hidden)) .col-chat{bottom:74px!important}
  /* O conteúdo não fica escondido atrás da barra. */
  #gameShell:not(.hidden){padding-bottom:84px!important}
}

/* ---------------------------------------------------------------------
   REVISÃO (28/09, tarde): "informações se sobrepondo". Em telas até 1180px
   o botão CHAT caía em cima do orbe de MP. Ele vira um círculo pequeno e a
   barra do herói guarda o canto direito para ele.
   --------------------------------------------------------------------- */
@media (max-width:1180px){
  body:has(#gameShell:not(.hidden)) .col-chat.is-collapsed .col-chat-toggle{
    width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font-size:0!important;letter-spacing:0;
    display:grid;place-items:center;align-self:flex-end}
  body:has(#gameShell:not(.hidden)) .col-chat.is-collapsed .col-chat-toggle::before{content:"💬";font-size:19px;line-height:1}
  #gameShell #battleVitalsStrip.battle-vitals-strip{padding-right:58px!important}
}
/* No celular a barra do herói não perde espaço: o círculo do chat entra na
   barra de baixo, num lugar só dele à direita do MAIS. Aberto, o chat volta a
   subir acima da barra como antes. */
@media (max-width:699px){
  #gameShell #battleVitalsStrip.battle-vitals-strip{padding-right:10px!important}
  .bottom-nav{padding-right:56px}
  body:has(#gameShell:not(.hidden)) .col-chat.is-collapsed{bottom:10px!important;right:6px!important;left:auto!important}
  body:has(#gameShell:not(.hidden)) .col-chat.is-collapsed .col-chat-toggle{border-color:#6b5426}
}
@media (max-width:420px){
  .bottom-nav>button{font-size:9px!important;letter-spacing:.01em}
}
/* A gaveta do menu CONTA (Área de Conta B) sobe de baixo no celular: enquanto
   ela está aberta, a barra de baixo e o chat saem para não cobrir SAIR/Discord. */
@media (max-width:699px){
  body:has(#contaMenu:not(.hidden)) .bottom-nav,
  body:has(#contaMenu:not(.hidden)) .col-chat{display:none!important}
}