/* =====================================================================
   HUD NA BASE DA ARENA (22/10, pedido do autor; opção B escolhida às 15:36Z):
   no PC (>900 px) a faixa da vida/mana sobe para DENTRO da base da arena:
   orbe de vida (o demônio caído) no canto de baixo à esquerda, orbe de mana
   (a anja) à direita, e entre eles, por baixo das skills, a EXP com os
   números e logo abaixo a linha roxa da Alma, também com os números.
   A arena não muda de tamanho nem de coordenadas (o nascimento dos monstros
   depende delas): a faixa só é puxada para cima (margem negativa) e fica
   transparente, por cima do chão. Os elementos são os mesmos da faixa (o
   game.js escreve nos mesmos ids). Celular: nada muda.
   16:12Z o autor mostrou a referência: orbes do Diablo 2. Cada orbe fica num
   encaixe de pedra com a estátua do lado de fora (demônio caído na vida, anja
   rezando na mana), artes do ElevenLabs em assets/ui/hud/orbe_*.webp, pintadas
   (16:24Z, pedido do autor) no dourado do aro antigo (#fbe7a6 → #b8862a → #6e4a12). O furo
   de cada arte foi medido (centro e diâmetro em fração da imagem); o orbe fica
   2,5% maior que o furo, para o aro de ouro cobrir a borda dele:
     vida: largura 1,605 × orbe, altura 1,421; furo em (63,16%, 50,68%)
     mana: largura 1,554 × orbe, altura 1,291; furo em (39,28%, 46,32%)
   ===================================================================== */
/* os números das barras só existem no HUD do PC (no celular a faixa já mostra os dela) */
.hud-num{display:none}
@media (min-width:901px){
  html:not(#_) #gameShell{
    --ahud-orbe:clamp(78px,6vw,98px);
    --ahud-lado:calc(var(--ahud-orbe) * .563 + 4px);    /* a estátua cabe dentro da arena */
    --ahud-baixo:calc(var(--ahud-orbe) * .325 + 22px);  /* a base fica no chão da arena, com a sombra à vista */
    --ahud-asa:calc(var(--ahud-orbe) * .1);            /* o aro de pedra do lado de dentro */
    --ahud-exp:11px;--ahud-alma:8px;--ahud-chao:14px;  /* as barras ficam logo acima da faixa dourada da arena */
    --ahud-alto:calc(var(--ahud-orbe) + var(--ahud-baixo));
  }
  html:not(#_) #gameShell #battleVitalsStrip.battle-vitals-strip.battle-vitals-strip{
    position:relative;z-index:31;height:var(--ahud-alto);min-height:0!important;
    margin-top:calc(-1 * var(--ahud-alto) - 8px)!important;margin-bottom:8px!important;margin-left:6px!important;margin-right:6px!important;
    padding:0 var(--ahud-lado) var(--ahud-chao)!important;background:none!important;border:0!important;box-shadow:none!important;
    grid-template-columns:var(--ahud-orbe) var(--ahud-asa) auto auto minmax(0,1fr) auto var(--ahud-asa) var(--ahud-orbe)!important;
    grid-template-rows:minmax(0,1fr) var(--ahud-exp) var(--ahud-alma)!important;column-gap:10px!important;row-gap:3px!important;align-items:end!important;
    pointer-events:none;
  }
  html:not(#_) #gameShell #battleVitalsStrip>*{pointer-events:auto}
  /* as molduras premium, por cima dos orbes (o furo do meio mostra o líquido) */
  html:not(#_) #gameShell #battleVitalsStrip::before,html:not(#_) #gameShell #battleVitalsStrip::after{
    content:"";position:absolute;z-index:3;pointer-events:none;background:center/100% 100% no-repeat}  /* a sombra no chão já vem na arte */
  html:not(#_) #gameShell #battleVitalsStrip::before{width:calc(var(--ahud-orbe) * 1.9581);height:calc(var(--ahud-orbe) * 1.6640);
    left:calc(var(--ahud-lado) + var(--ahud-orbe) * (.5 - 1.9581 * 0.6056));bottom:calc(var(--ahud-baixo) + var(--ahud-orbe) * (.5 - 1.6640 * 0.5600));
    background-image:url("../assets/ui/hud/orbe_vida.webp")}
  html:not(#_) #gameShell #battleVitalsStrip::after{width:calc(var(--ahud-orbe) * 1.9706);height:calc(var(--ahud-orbe) * 1.6539);
    right:calc(var(--ahud-lado) + var(--ahud-orbe) * (.5 - 1.9706 * 0.6075));bottom:calc(var(--ahud-baixo) + var(--ahud-orbe) * (.5 - 1.6539 * 0.5583));
    background-image:url("../assets/ui/hud/orbe_mana.webp")}
  /* orbes nos cantos (o aro de ouro antigo sai: a moldura faz esse papel) */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp,html:not(#_) #gameShell #battleVitalsStrip>.vital-mp{
    grid-row:1/4!important;width:var(--ahud-orbe)!important;height:var(--ahud-orbe)!important;margin:0 0 calc(var(--ahud-baixo) - var(--ahud-chao))!important;align-self:end;
    box-shadow:0 4px 12px rgba(0,0,0,.55)!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp::after,html:not(#_) #gameShell #battleVitalsStrip>.vital-mp::after{display:none!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp{grid-column:1!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-mp{grid-column:8!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp>span,html:not(#_) #gameShell #battleVitalsStrip>.vital-mp>span{z-index:4}

  /* EXP e Alma: barras com os números dentro (atual / próximo, % e quanto falta) */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar),
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar){
    grid-column:3/7!important;display:block!important;position:relative;padding:0!important;margin:0!important;background:none!important;border:0!important;
    align-self:stretch;min-width:0;backdrop-filter:none}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar){grid-row:2!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar){grid-row:3!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar) .vital-value,
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar) .vital-label,
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar) .vital-value,
  html:not(#_) #gameShell #battleVitalsStrip #resetContagem{display:none!important}
  /* 23/10: o rótulo EXP sai, mas o selo do Bônus de Recomeço (que mora nele) fica na ponta esquerda da barra;
     antes ele sumia junto no PC. Sem o selo, o rótulo fica vazio e não ocupa nada. */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar) .vital-label{
    display:flex!important;position:absolute;left:4px;top:50%;transform:translateY(-50%);z-index:3;margin:0!important;padding:0!important;
    font-size:0!important;line-height:0;gap:0;pointer-events:none}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar) .vital-label>:not(.recomeco-selo){display:none!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar) .vital-label>.recomeco-selo{margin:0;pointer-events:auto}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar) .xp-bar,
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar) .vital-track{
    display:block!important;height:100%!important;margin:0!important;border-radius:99px!important;overflow:hidden;
    background:linear-gradient(rgba(4,4,8,.92),rgba(14,12,20,.86))!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar) .xp-bar{box-shadow:0 0 0 1px rgba(227,191,106,.75),0 0 0 2px rgba(60,40,10,.9),0 3px 12px rgba(0,0,0,.65)!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar) .vital-track{box-shadow:0 0 0 1px rgba(176,124,255,.7),0 0 0 2px rgba(30,14,50,.9),0 3px 10px rgba(0,0,0,.6)!important}
  html:not(#_) #gameShell #battleVitalsStrip #xpBar{background:linear-gradient(180deg,#ffe6a0,#e3a93a 45%,#a8701c)!important;box-shadow:0 0 10px rgba(255,200,90,.55)}
  html:not(#_) #gameShell #battleVitalsStrip #soulXpBar{background:linear-gradient(180deg,#e6ccff,#a36cf2 50%,#6a3cc0)!important;box-shadow:0 0 8px rgba(176,124,255,.6)}
  html:not(#_) #gameShell #battleVitalsStrip .hud-num{
    display:flex!important;position:absolute;inset:0;align-items:center;justify-content:center;gap:10px;pointer-events:none;
    font-weight:800;letter-spacing:.04em;white-space:nowrap;overflow:hidden;color:#fff7e0;
    text-shadow:0 1px 2px #000,0 0 4px #000,0 0 8px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
  html:not(#_) #gameShell #battleVitalsStrip #hudExpNum{font-size:calc(9.5px * var(--text-scale,1))}
  html:not(#_) #gameShell #battleVitalsStrip #hudAlmaNum{font-size:calc(8px * var(--text-scale,1));color:#f1e6ff}
  html:not(#_) #gameShell #battleVitalsStrip .hud-num b{color:#ffd774;font-weight:900}
  html:not(#_) #gameShell #battleVitalsStrip #hudAlmaNum b{color:#d9b8ff}
  html:not(#_) #gameShell #battleVitalsStrip .hud-num i{font-style:normal;opacity:.85}

  /* plaquinhas acima da EXP, nas pontas (o meio é das skills): Nível/Reset e ATK/DEF à esquerda, Gold à direita */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity,
  html:not(#_) #gameShell #battleVitalsStrip>#faixaAtkDef,
  html:not(#_) #gameShell #battleVitalsStrip>.vital-gold{
    grid-row:1!important;align-self:end!important;margin:0 0 2px!important;padding:4px 10px!important;border-radius:8px!important;
    background:linear-gradient(rgba(14,12,10,.82),rgba(6,6,8,.74))!important;border:1px solid rgba(227,191,106,.35)!important;white-space:nowrap;
    display:flex!important;align-items:baseline;gap:6px;min-width:0;backdrop-filter:blur(2px);box-shadow:0 2px 10px rgba(0,0,0,.5)}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity{grid-column:3!important}
  html:not(#_) #gameShell #battleVitalsStrip>#faixaAtkDef{grid-column:4!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-gold{grid-column:6!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-divider,
  html:not(#_) #gameShell #battleVitalsStrip>#joiasVitais{display:none!important}
  /* 23/10 (autor, texto em 130% no PC: "o ATK/DEF tá passando por cima da barra das skills, as skills tão tapando o pet"):
     1. a plaquinha ATK/DEF sobe para cima da do Nível (as duas na ponta esquerda, em pé), e a ponta esquerda
        fica com a largura de UMA plaquinha, não de duas;
     2. a barra de skills da arena não cresce com o tamanho do texto: os ícones já se leem, e crescendo ela
        cobria o pet e encostava nas plaquinhas. Herói, pet e a área de acerto dos monstros não mudam. */
  html:not(#_) #gameShell #battleVitalsStrip.battle-vitals-strip.battle-vitals-strip{
    grid-template-rows:minmax(0,1fr) auto var(--ahud-exp) var(--ahud-alma)!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp,html:not(#_) #gameShell #battleVitalsStrip>.vital-mp{grid-row:1/5!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#xpBar){grid-row:3!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:has(#soulXpBar){grid-row:4!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity{grid-row:2!important}
  html:not(#_) #gameShell #battleVitalsStrip>#faixaAtkDef{grid-column:3!important;grid-row:1!important;justify-self:start}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-gold{grid-row:1/3!important}
  /* 23/10 (autor: "pode remover a estrelinha do pet ali que não agrega nada"): o "1★" em cima do pet sai da arena */
  html:not(#_) #gameShell #battlePetToggle .pet-toggle-level{display:none!important}
  html:not(#_) #gameShell #monsterCard .battle-skill-bar{--ui-scale:1;--text-scale:1;
    /* em tela de PC estreita a barra anda um pouco para a esquerda (para o lado das plaquinhas, que agora ocupam
       uma largura só), longe do pet, que fica à direita do herói */
    translate:calc(-1 * clamp(0px, (1700px - 100vw) * .14, 60px)) 0}
  /* 29/10 (autor: "o painel das skills ficou bem menor; o titan e a relíquia tá certo"): desde 23/10 os botões ficavam em
     38 px com qualquer texto, bem menores que o Titan e a Relíquia (53 px). Crescem com a largura da tela até 50 px
     (38 px em 1366, 50 px em 1920) e andam para a esquerda o que cresceram, longe do pet (hud-texto-grande-pc-browser).
     O Titan, a Relíquia e o resto da barra não mudam. */
  html:not(#_) #gameShell #monsterCard .battle-skill-bar{--skl:clamp(38px, calc(38px + (100vw - 1366px) * .0217), 50px);
    translate:calc(-1 * clamp(0px, (1700px - 100vw) * .14, 60px) - (var(--skl) - 38px) * 5.5) 0}
  html:not(#_) #gameShell #monsterCard .battle-skill-bar .battle-skill-slot,
  html:not(#_) #gameShell #monsterCard .battle-skill-bar .battle-horse-seal,
  html:not(#_) #gameShell #monsterCard .battle-skill-bar .ult-slot{width:var(--skl)!important;height:var(--skl)!important}   /* 29/10: a suprema também (foto do autor) */
  html:not(#_) #gameShell #monsterCard .battle-skill-bar .battle-skill-image{width:calc(var(--skl) * .6)!important;height:calc(var(--skl) * .6)!important}
  /* as skills sobem o bastante para a EXP e a Alma passarem por baixo sem encostar */
  html:not(#_) #gameShell #monsterCard .battle-skill-bar{bottom:calc(var(--ahud-chao) + var(--ahud-exp) + var(--ahud-alma) + 12px)!important}
  /* o atalho do Golden ficava no canto de baixo à direita: sobe para acima da anja */
  html:not(#_) #gameShell .golden-arena-botao{bottom:calc(var(--ahud-baixo) + var(--ahud-orbe) * 1.16 + 8px)!important;right:calc(var(--ahud-lado) + var(--ahud-orbe) / 2 - 33px)!important}
}

/* =====================================================================
   28/10 — ORBES DO PC NO CELULAR EM PÉ (autor: "já não dá pra trocar as orbs redondas pelas orbs da arena do pc?").
   As mesmas molduras (demônio caído na vida, anja na mana), menores. O orbe sai da grade e fica preso na ponta da
   placa (posição absoluta), com a estátua para fora; o meio (Nível, Gold, Alma) encolhe para caber entre as duas
   molduras. As medidas do furo são as do bloco do PC acima. Celular deitado e PC: nada muda.
   ===================================================================== */
@media (max-width:640px){
  html:not(#_) #gameShell{--cel-orbe:58px;--cel-orbe-topo:20px}
  html:not(#_) #gameShell #battleVitalsStrip.battle-vitals-strip{position:relative;grid-template-rows:46px 46px auto auto!important}
  html:not(#_) #gameShell #battleVitalsStrip.battle-vitals-strip>.vital-hp,
  html:not(#_) #gameShell #battleVitalsStrip.battle-vitals-strip>.vital-mp{
    position:absolute!important;grid-area:auto!important;top:var(--cel-orbe-topo);width:var(--cel-orbe)!important;height:var(--cel-orbe)!important;margin:0!important}
  /* a moldura da vida tem a estátua à esquerda: 0,686 orbe para fora; a da mana, 0,697 à direita */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp{left:calc(4px + var(--cel-orbe) * .686)}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-mp{right:calc(4px + var(--cel-orbe) * .697)}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp::after,html:not(#_) #gameShell #battleVitalsStrip>.vital-mp::after{display:none!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-hp .vital-label,html:not(#_) #gameShell #battleVitalsStrip>.vital-mp .vital-label{font-size:7.5px!important}
  html:not(#_) #gameShell #battleVitalsStrip::before,html:not(#_) #gameShell #battleVitalsStrip::after{
    content:"";position:absolute;z-index:3;pointer-events:none;background:center/100% 100% no-repeat}
  html:not(#_) #gameShell #battleVitalsStrip::before{width:calc(var(--cel-orbe) * 1.9581);height:calc(var(--cel-orbe) * 1.6640);left:4px;
    top:calc(var(--cel-orbe-topo) + var(--cel-orbe) * (.5 - 1.6640 * .4400));background-image:url("../assets/ui/hud/orbe_vida.webp")}
  html:not(#_) #gameShell #battleVitalsStrip::after{width:calc(var(--cel-orbe) * 1.9706);height:calc(var(--cel-orbe) * 1.6539);right:4px;
    top:calc(var(--cel-orbe-topo) + var(--cel-orbe) * (.5 - 1.6539 * .4417));background-image:url("../assets/ui/hud/orbe_mana.webp")}
  /* o meio fica entre as molduras; em tela de até 400 px o rótulo "NÍVEL" sai (o número com o R do lado já diz) */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity>.vital-label{white-space:nowrap}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity{grid-column:9/16!important;align-self:end}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity>strong{font-size:calc(19px * var(--text-scale,1))!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-gold{grid-column:16/22!important;align-self:end}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-meter:nth-child(3),
  html:not(#_) body:not(.col-v3-ativo).desbloq-falta-alma #gameShell #battleVitalsStrip>.vital-meter:nth-child(2){grid-column:9/22!important}
}
@media (max-width:400px){
  html:not(#_) #gameShell{--cel-orbe:52px}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity>.vital-label{display:none!important}
  /* Gold de 10 dígitos com texto 130% cabe (numeroQueCabe encolhe até 60%): o Gold pega a coluna que a moldura menor solta.
     28/10 (autor, foto do Android de ~385 px: Gold "38.389.765" em cima do aro da anja): a coluna 22 já é o aro; o Gold
     termina na 22 (o número encolhe um pouco mais; o Nível "58 R20" continua numa linha). */
  html:not(#_) #gameShell #battleVitalsStrip>.vital-identity{grid-column:9/15!important}
  html:not(#_) #gameShell #battleVitalsStrip>.vital-gold{grid-column:15/22!important}
}