/* =====================================================================
   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}
/* Logo próprio do topo (04/10, pedido do autor): só o nome, horizontal, já
   recortado no arquivo (assets/ui/logo-topo.webp, 720x283). Antes era o brasão
   da tela inicial recortado por object-fit e as pontas das letras cortavam. */
#gameShell .game-brand-logo{display:block;width:132px;height:52px;object-fit:contain;object-position:50% 50%}

/* 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.
   Flex e não grid: o texto escondido do botão ("RANKINGS", "CORREIO"…) virava uma segunda
   linha da grade e empurrava o ícone 4 px para cima (pedido do autor, 29/09). */
#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:flex!important;align-items:center;justify-content:center;font-size:0!important;letter-spacing:0!important;color:transparent!important;overflow:visible;
}
/* 07/10: o display:flex!important acima vencia o .hidden: o ícone CAÇADAS aparecia mesmo com as Caçadas desligadas
   (ou trancadas no nível). Botão do topo com .hidden some de verdade. */
#gameShell .topbar .save-panel>.topbar-button.hidden{display:none!important}
#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
   Fica FORA da borda, não ocupa espaço e não pinta dentro: um anel de 2px
   da cor do fundo (o antigo outline-offset) + um anel dourado de 3px, como
   `box-shadow` na frente das sombras que o cartão já tinha (battle.css).
   NÃO voltar para `outline`: com outline o Chrome redesenha o cartão inteiro
   da arena (e a sombra de 70px) toda vez que algo dentro dele se mexe, ou
   seja, a cada quadro (lag, 3ª revisão, 03/10: +59% de quadros no PC).
   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:none;box-shadow:0 0 0 2px rgb(11,13,18),0 0 0 5px var(--b-ouro-2),0 26px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.02)!important}
body:not(.col-editor-active) #gameShell #monsterCard.battle-stage-card.boss-card{box-shadow:0 0 0 2px rgb(11,13,18),0 0 0 5px var(--b-ouro-2),0 26px 70px rgba(0,0,0,.55),0 0 46px rgba(215,169,68,.14)!important}
body:not(.col-editor-active) #gameShell #monsterCard.battle-stage-card.rare-event-card{box-shadow:0 0 0 2px rgb(11,13,18),0 0 0 5px var(--b-ouro-2),0 26px 70px rgba(0,0,0,.55),0 0 60px rgba(255,182,77,.22)!important}

/* ---------------------------------------------------------------------
   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}
  /* 10/10: com número inteiro de milhões o rótulo (DEFESA, CURA/ABATE) era espremido e sumia; quem encolhe é o número (game.js). */
  #gameShell #battleVitalsStrip>.vital-stat>.vital-label{flex-shrink:0}
  #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 (desenho do autor, 30/09): tudo compacto numa placa só.
   Orbe de HP à esquerda e de MP à direita; no meio Nível + Gold e o XP embaixo;
   a Alma na largura inteira; e os sete números de combate numa linha só.
   A grade tem 29 colunas finas (sem espaço entre elas) para repartir a largura:
   orbe 6, meio 17, orbe 6; embaixo 4 para cada número, 3 para o ATK e 5 para DEFESA e CURA/ABATE. */
@media (max-width:900px){
  #gameShell #battleVitalsStrip.battle-vitals-strip{
    display:grid!important;grid-template-columns:repeat(29,minmax(0,1fr))!important;grid-auto-flow:row;
    gap:3px 0!important;align-items:center;padding:8px 8px 6px!important;margin-top:4px;
    border:1px solid #6b5423!important;border-radius:14px!important;
    background:linear-gradient(180deg,#17120a,#0f0c08)!important;box-shadow:inset 0 0 0 1px #0a0806,0 0 0 1px rgba(243,207,122,.18)!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;letter-spacing:.06em}
  #gameShell #battleVitalsStrip .vital-value,#gameShell #battleVitalsStrip strong{color:var(--b-texto)!important}
  /* meio: Nível e Gold */
  #gameShell #battleVitalsStrip>.vital-identity{grid-column:7/16;grid-row:1;display:flex!important;align-items:baseline;justify-content:center;gap:5px;padding-top:2px!important}
  #gameShell #battleVitalsStrip>.vital-identity>strong{font-size:calc(22px * var(--text-scale,1))!important;line-height:1}
  #gameShell #battleVitalsStrip>.vital-gold{grid-column:16/24;grid-row:1;display:flex!important;flex-direction:column;align-items:center;gap:0;padding-top:2px!important}
  #gameShell #battleVitalsStrip>.vital-gold .vital-label{display:inline-flex;align-items:center;gap:3px;font-size:8px!important}
  #gameShell #battleVitalsStrip>.vital-gold .col-icone,#gameShell #battleVitalsStrip>.vital-gold .col-icone img{width:12px;height:12px;font-size:11px;font-style:normal}
  #gameShell #battleVitalsStrip>.vital-gold strong{font-size:calc(14px * var(--text-scale,1))!important;line-height:1.1}
  /* 24/10 (autor: "o exp normal deveria tá no lugar da alma, que demanda menos espaço"): no celular a EXP
     ganha a linha inteira e a Alma vai para o meio, entre os orbes. Antes do nível 30 a Alma some
     (desbloq-falta-alma) e a EXP volta para o meio, sem deixar buraco embaixo do Nível. */
  /* meio: Alma (rótulo e valor na mesma linha, a barra embaixo) */
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(3){grid-column:7/24;grid-row:2;display:flex!important;flex-flow:row wrap;align-items:baseline;gap:0 6px;padding:0 6px!important}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(3) .vital-label{color:#c7a8ff!important}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(3) .vital-track{flex:1 0 100%;height:6px!important;background:#0a0806!important;border:1px solid #3a2a55!important}
  /* EXP: largura inteira, entre o meio e os números */
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(2){grid-column:1/30;grid-row:3;display:flex!important;flex-flow:row wrap;align-items:baseline;gap:0 8px;padding:5px 4px 0!important;border-top:1px solid #2a2112!important}
  #gameShell #battleVitalsStrip>.vital-meter:nth-child(2) .vital-track{flex:1 0 100%;height:7px!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 8px rgba(243,207,122,.5)}
  body:not(.col-v3-ativo).desbloq-falta-alma #gameShell #battleVitalsStrip>.vital-meter:nth-child(2){grid-column:7/24;grid-row:2;gap:0 6px;padding:0 6px!important;border-top:0!important}
  #gameShell #battleVitalsStrip .soul-xp-fill{background:linear-gradient(90deg,#6d34d6,#b27cff)!important;box-shadow:0 0 8px rgba(178,124,255,.5)}
  /* os sete números numa linha só: ícone à esquerda, rótulo em cima do valor */
  #gameShell #battleVitalsStrip>.vital-stat{
    grid-row:4;display:grid!important;grid-template-columns:auto;justify-items:center;align-content:center;gap:1px;
    border-top:1px solid #2a2112!important;padding:5px 1px 1px!important;height:100%;
  }
  #gameShell #battleVitalsStrip>.vital-stat+.vital-stat{box-shadow:inset 1px 0 0 #2a2112!important}
  #gameShell #battleVitalsStrip>.vital-stat .vital-label{display:inline-flex;align-items:center;gap:2px;font-size:6.5px!important;letter-spacing:0!important;white-space:nowrap;line-height:1.1}
  #gameShell #battleVitalsStrip>.vital-stat .col-icone,#gameShell #battleVitalsStrip>.vital-stat .col-icone img{width:10px;height:10px;font-size:9px;font-style:normal;flex:0 0 10px}
  #gameShell #battleVitalsStrip>.vital-stat>strong{font-size:calc(11.5px * var(--text-scale,1))!important;line-height:1.1;white-space:nowrap}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(9)>strong{font-size:calc(10px * var(--text-scale,1))!important;letter-spacing:-.02em}
  /* 06/10 (autor, print a 130%): "387 • 40.8%" passava da célula da DEFESA e entrava no CRÍTICO. A letra segue o
     texto, mas nunca passa do que a célula (5/29 da largura) comporta. */
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(9)>strong{font-size:min(calc(10px * var(--text-scale,1)),2.75vw)!important}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(8){grid-column:1/4}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(9){grid-column:4/9}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(10){grid-column:9/13}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(11){grid-column:13/17}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(12){grid-column:17/21}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(13){grid-column:21/26}
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(14){grid-column:26/30}
  /* os orbes (o aro e o líquido estão no bloco 3b, que vale para as duas telas) */
  #gameShell #battleVitalsStrip>.vital-hp,#gameShell #battleVitalsStrip>.vital-mp{
    grid-row:1/3;justify-self:center;width:76px;height:76px;padding:0!important;position:relative;isolation:isolate;
    display:grid!important;place-content:center;text-align:center;gap:0;
  }
  #gameShell #battleVitalsStrip>.vital-hp{grid-column:1/7}
  #gameShell #battleVitalsStrip>.vital-mp{grid-column:24/30}
  #gameShell #battleVitalsStrip>.vital-hp .vital-label,#gameShell #battleVitalsStrip>.vital-mp .vital-label{order:2;font-size:9px!important;color:#ffe9e9!important;letter-spacing:.12em}
  #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:11px!important;font-weight:800;color:#fff!important;text-shadow:0 1px 2px #000,0 0 5px #000}
}

/* ---------------------------------------------------------------------
   3b. ORBES COM LÍQUIDO (desenho do autor, 30/09) — PC e celular
   Ele provou o hexágono e preferiu o círculo: orbe redondo com aro de ouro. Dentro dele a barra
   continua a MESMA do jogo, girada -90°: a largura que o jogo escreve vira a
   altura do líquido. A borda de cima do líquido é uma onda que corre de lado,
   e o nível sobe/desce devagar. Os números ficam por cima de tudo.
   --------------------------------------------------------------------- */
#gameShell #battleVitalsStrip>.vital-hp,#gameShell #battleVitalsStrip>.vital-mp{
  border:0!important;box-shadow:none!important;overflow:hidden;
  border-radius:50%!important;clip-path:circle(50%);
}
#gameShell #battleVitalsStrip>.vital-hp{background:radial-gradient(circle at 50% 40%,#2a1212,#120707 70%)!important}
#gameShell #battleVitalsStrip>.vital-mp{background:radial-gradient(circle at 50% 40%,#121a33,#070a16 70%)!important}
/* o aro de ouro por cima do líquido */
#gameShell #battleVitalsStrip>.vital-hp::after,#gameShell #battleVitalsStrip>.vital-mp::after{
  content:"";position:absolute;inset:0;height:auto;border-radius:50%;pointer-events:none;z-index:1;
  background:linear-gradient(160deg,#fbe7a6 0%,#b8862a 38%,#f3cf7a 62%,#6e4a12 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(circle closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
}
/* brilho de vidro no alto */
#gameShell #battleVitalsStrip>.vital-hp::before,#gameShell #battleVitalsStrip>.vital-mp::before{
  content:"";position:absolute;left:26%;right:26%;top:9%;height:14%;border-radius:50%;pointer-events:none;z-index:1;
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0));mix-blend-mode:screen;
}
#gameShell #battleVitalsStrip>.vital-hp>span,#gameShell #battleVitalsStrip>.vital-mp>span{position:relative;z-index:2}
/* número grande (ex.: 12.345 / 12.345) quebra depois da barra em vez de sair do orbe */
#gameShell #battleVitalsStrip>.vital-hp .vital-value,#gameShell #battleVitalsStrip>.vital-mp .vital-value{white-space:normal!important;max-width:60px;margin:0 auto;line-height:1.05!important;letter-spacing:-.02em}
/* 10/10: cada número fica inteiro (quebra só na barra "/"); se um sozinho não couber, a letra encolhe (game.js). */
#gameShell #battleVitalsStrip>.vital-hp .vital-value>span,#gameShell #battleVitalsStrip>.vital-mp .vital-value>span{white-space:nowrap}
#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;overflow:visible!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-mp .mana-fill{position:relative}
#gameShell #battleVitalsStrip>.vital-hp .player-hp-fill{background:linear-gradient(90deg,#6a1014,#b3242a 70%,#e0413f)!important;transition:width .45s cubic-bezier(.3,.7,.3,1)!important;box-shadow:none!important}
#gameShell #battleVitalsStrip>.vital-hp .player-hp-delayed{background:linear-gradient(90deg,#4a1a1a,#8a3b3b)!important;box-shadow:none!important}
#gameShell #battleVitalsStrip>.vital-mp .mana-fill{background:linear-gradient(90deg,#122a70,#2753c4 70%,#4f86f0)!important;transition:width .45s cubic-bezier(.3,.7,.3,1)!important}
/* a onda: meia-luas enfileiradas na ponta da barra (que na tela é o topo do líquido) */
#gameShell #battleVitalsStrip>.vital-hp .player-hp-fill::after,#gameShell #battleVitalsStrip>.vital-mp .mana-fill::after,
#gameShell #battleVitalsStrip>.vital-hp .player-hp-fill::before,#gameShell #battleVitalsStrip>.vital-mp .mana-fill::before{
  content:"";position:absolute;top:-40px;bottom:-40px;right:-5px;width:10px;pointer-events:none;
  background:radial-gradient(circle at 0 50%,var(--onda) 5px,transparent 5.6px) 0 0/10px 18px repeat-y;
  animation:colOndaOrbe 1.8s linear infinite;
}
#gameShell #battleVitalsStrip>.vital-hp .player-hp-fill::before,#gameShell #battleVitalsStrip>.vital-mp .mana-fill::before{
  right:-4px;opacity:.45;animation-duration:2.6s;animation-direction:reverse;background-size:10px 26px;
}
#gameShell #battleVitalsStrip>.vital-hp .player-hp-fill{--onda:#e0413f}
#gameShell #battleVitalsStrip>.vital-mp .mana-fill{--onda:#4f86f0}
@keyframes colOndaOrbe{from{transform:translateY(0)}to{transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  #gameShell #battleVitalsStrip>.vital-hp .player-hp-fill::after,#gameShell #battleVitalsStrip>.vital-mp .mana-fill::after,
  #gameShell #battleVitalsStrip>.vital-hp .player-hp-fill::before,#gameShell #battleVitalsStrip>.vital-mp .mana-fill::before{animation:none}
}

/* ---------------------------------------------------------------------
   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
   26/10 (auditoria Android, opção A do autor): vale também para o celular
   DEITADO (tela de até 500 px de altura e até 900 de largura). Antes, deitado
   em 800 × 360 o jogo virava o layout de PC: topo + menu tomavam 240 px e
   sobravam 120 px de arena. Os três blocos "(max-width:699px)" abaixo têm a
   mesma condição.
   --------------------------------------------------------------------- */
/* 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),(max-height:500px) and (max-width:900px){
  #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}
  /* O menu do MAIS dentro da folha. style.css deixa `.nav-more-menu` position:fixed no
     celular, então `bottom:calc(100% + 6px)` valia contra a TELA inteira e o menu
     abria 250 px acima do topo: o toque no MAIS "não fazia nada" (bug do Android,
     30/09). Agora o `.nav-more-wrap` fica static e o menu é absoluto em relação à
     própria folha: abre logo acima dela, na largura dela. */
  /* 01/10 (print do autor): a folha repetia BATALHA, INVENTÁRIO e LOJA, que já
     estão na barra de baixo, e tinha um segundo MAIS que abria outro menu por
     cima. Agora a folha mostra só o que NÃO está na barra, e o que morava no
     MAIS de dentro (Sets, Pets, Contratos, Bestiário, Baú) entra solto nela:
     um MAIS só, um toque só. O desbloqueio continua escondendo o que falta. */
  body.nav-folha-aberta #gameShell>.main-nav>.nav-button:is([data-view="battle"],[data-view="inventory"],[data-view="store"]),
  body.nav-folha-aberta #gameShell #navPvpButton,
  body.nav-folha-aberta #gameShell #navMoreButton{display:none!important}
  body.nav-folha-aberta #gameShell>.main-nav>.nav-more-wrap,
  body.nav-folha-aberta #gameShell>.main-nav #navMoreMenu{display:contents!important}
  body.nav-folha-aberta #gameShell #navMoreMenu>.nav-button{
    flex-direction:column;justify-content:center;align-items:center;text-align:center;width:auto;
    height:auto;min-height:62px!important;padding:6px 2px!important;gap:3px;font-size:10px!important;
    border:1px solid #2e2413;border-radius:10px;background:#120e09;
    font-family:Georgia,"Times New Roman",serif!important;font-weight:700!important;letter-spacing:.4px!important;color:#bda984!important;
  }
  body.nav-folha-aberta #gameShell #navMoreMenu>.nav-button img{width:24px;height:24px}

  .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 ponto vermelho do MAIS de dentro da folha (que sumiu) passa para o MAIS da barra. */
  #bottomNavMais{position:relative}
  /* 01/10 (autor): o MAIS usa os três pontos do PC, não a engrenagem das Opções. */
  .bottom-nav>button>.bottom-nav-pontos{width:26px;height:26px;display:grid;place-items:center;font-style:normal;font-size:14px;letter-spacing:2px;line-height:1;color:#bda984}
  .bottom-nav>button[aria-expanded="true"]>.bottom-nav-pontos{color:#fff0c4}
  #bottomNavMais>.nav-novidade{top:10px;left:calc(50% + 10px);right:auto}
  /* O botão do chat sobe para cima da barra (antes ele cobria o MAIS). */
  html.col-no-jogo .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.
   29/09: o mesmo acontecia em 1366 e 1600 (o autor: "menus se sobrepondo na
   arena"). A regra vale até 1700px, onde a página ainda encosta no canto.
   --------------------------------------------------------------------- */
@media (max-width:1700px){
  html.col-no-jogo .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}
  /* O ícone é um desenho no fundo do botão, centrado de verdade: o 💬 em
     ::before dividia a grade com o texto escondido e subia (29/09, o autor:
     "o ícone do chat não tá alinhado"). */
  html.col-no-jogo .col-chat.is-collapsed .col-chat-toggle{color:transparent!important;overflow:visible;
    background:rgba(12,11,16,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H10l-4.5 3.8V16.5H4A1.5 1.5 0 0 1 2.5 15V6A1.5 1.5 0 0 1 4 4.5z' fill='%23f3d58a'/%3E%3Ccircle cx='8' cy='10.5' r='1.3' fill='%231a140b'/%3E%3Ccircle cx='12' cy='10.5' r='1.3' fill='%231a140b'/%3E%3Ccircle cx='16' cy='10.5' r='1.3' fill='%231a140b'/%3E%3C/svg%3E") 50% 54%/22px 22px no-repeat!important}
  /* 27/10 (o autor: "ícone do chat tem uma meia bolinha vermelha"): o overflow:hidden do
     círculo cortava o selo de não lidas. O texto já some com font-size:0; o selo fica inteiro
     no canto de cima do círculo. */
  html.col-no-jogo .col-chat.is-collapsed .col-chat-toggle>.col-chat-badge{top:-4px;right:-4px}
  #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),(max-height:500px) and (max-width:900px){
  #gameShell #battleVitalsStrip.battle-vitals-strip{padding-right:10px!important}
  .bottom-nav{padding-right:56px}
  html.col-no-jogo .col-chat.is-collapsed{bottom:10px!important;right:6px!important;left:auto!important}
  html.col-no-jogo .col-chat.is-collapsed .col-chat-toggle{border-color:#6b5426}
}
/* 26/10 (auditoria Android): deitado no celular (até 500 de altura e 900 de largura) o
   chat fechado fica na barra de baixo como em pé, e não no topo (varredura.css item 19,
   que vale para 700+ de largura): com as duas regras juntas ele ficava com top E bottom,
   esticado e rolando com a página. A bolinha "instalar app" volta para cima do círculo
   (coluna): na borda direita, o arco girando passava da tela e criava rolagem de lado. */
@media (max-height:500px) and (max-width:900px){
  html.col-no-jogo .col-chat.is-collapsed{position:fixed;top:auto;flex-direction:column;align-items:flex-end;margin:0}
  html.col-no-jogo .col-chat.is-collapsed .col-app-instalar{order:0}
  html.col-no-jogo .col-chat.is-collapsed .col-app-balao{position:static;top:auto;left:auto;order:0}
}
@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),(max-height:500px) and (max-width:900px){
  body.conta-menu-aberto .bottom-nav,
  body.conta-menu-aberto .col-chat{display:none!important}
}

/* TÍTULOS DAS COLUNAS (28/09, noite; nomes do protótipo B que o autor escolheu).
   order:-1 mantém o título no topo mesmo quando o Editor reordena os cartões. */
#battleView .battle-hud-layout .coluna-titulo{order:-1;margin:0 2px 2px;padding:0 0 6px;font:700 12px/1.2 "Cinzel",Georgia,serif;letter-spacing:.14em;color:#d9b76a;border-bottom:1px solid rgba(217,183,106,.28);display:flex;align-items:center;gap:8px}
#battleView .battle-hud-layout .coluna-titulo::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:#d9b76a;flex:none}

/* Varredura de telas (03/10): entre 901 e 1180 px (tablet e celular deitado grande) com texto em 130%,
   "DEFESA 5 • 1.0%" não cabia na célula de 78 px e o rótulo vazava. Rótulo em cima, número embaixo. */
@media (min-width:901px) and (max-width:1180px){
  #gameShell #battleVitalsStrip>.vital-stat{flex-direction:column!important;gap:1px!important;padding-left:2px!important;padding-right:2px!important}
  #gameShell #battleVitalsStrip>.vital-stat .vital-label{font-size:calc(8.2px * var(--text-scale,1))!important;letter-spacing:0!important;white-space:nowrap}
  /* com texto 120-130% o ícone não cabe ao lado de CURA/ABATE: fica só o rótulo */
  :root[data-text-scale="1.2"] #gameShell #battleVitalsStrip>.vital-stat .vital-label .col-icone,:root[data-text-scale="1.3"] #gameShell #battleVitalsStrip>.vital-stat .vital-label .col-icone{display:none!important}
  /* 06/10: celular deitado (915 px) a 130%: "387 • 40.8%" passava da célula. Mesmo teto da tela em pé. */
  #gameShell #battleVitalsStrip>.vital-stat:nth-child(9)>strong{font-size:min(calc(14px * var(--text-scale,1)),1.3vw)!important;letter-spacing:-.02em}
}