/* =====================================================================
   TELA DA HORDA SEM REPETIÇÃO — 19/10, opção B do autor
   ---------------------------------------------------------------------
   Quem move as peças: src/ui/horda-limpa.js. Este arquivo só muda a cara.
   Vem logo ANTES do combate-b.css (que tem de ser a última folha); os
   seletores daqui são mais fortes onde os dois mexem na mesma coisa.
   ===================================================================== */

/* 1. Cópias que saem do cartão do herói: Gold, Nível/Reset e o atalho dos
      Sets já aparecem na faixa de status e no cartão de Equipamentos.
      Os ids continuam no DOM (o game.js escreve neles). */
#gameShell .hero-card .hero-gold-box,
#gameShell .hero-card #heroLevelChip,
#gameShell .hero-card #heroResetChip,
#gameShell .hero-card #heroSetsAtalho{display:none!important}

/* 2. Faixa de status com uma linha só: as células de combate foram para o
      quadro COMBATE. Os orbes de vida e mana ficam do mesmo tamanho. */
@media (min-width:901px){
  #gameShell #battleVitalsStrip.battle-vitals-strip{grid-template-rows:64px!important}
  #gameShell #battleVitalsStrip>.vital-cell{grid-row:1!important;align-self:center}
}

/* 2b. ORBES MAIORES (19/10, opção B do autor: "o de hp ficou minusculo com os valores").
      No PC o orbe tem 112 px e passa por cima e por baixo da faixa, que continua fina.
      Dentro: o número atual grande, "/ máximo" menor embaixo e o rótulo HP/MP.
      O " / " solto do HTML some (font-size 0) e volta como ::before do máximo.
      Número que não cabe encolhe (src/ui/horda-limpa.js, caberNoOrbe).
      O .battle-vitals-strip a mais vence o font-size:11px!important do combate-b.css (carrega depois). */
#gameShell #battleVitalsStrip.battle-vitals-strip>.vital-hp .vital-value,#gameShell #battleVitalsStrip.battle-vitals-strip>.vital-mp .vital-value{
  font-size:0!important;max-width:none!important;display:flex!important;flex-direction:column;align-items:center;line-height:1.05!important;gap:1px;
}
#gameShell #battleVitalsStrip #playerHP,#gameShell #battleVitalsStrip #playerMana{font-size:min(calc(13.5px * var(--text-scale,1)),3.4vw);font-weight:900;white-space:nowrap}
#gameShell #battleVitalsStrip #playerMaxHP,#gameShell #battleVitalsStrip #playerMaxMana{font-size:min(calc(10px * var(--text-scale,1)),2.7vw);font-weight:700;opacity:.85;white-space:nowrap}
#gameShell #battleVitalsStrip #playerMaxHP::before,#gameShell #battleVitalsStrip #playerMaxMana::before{content:"/ "}
@media (min-width:901px){
  #gameShell #battleVitalsStrip.battle-vitals-strip.battle-vitals-strip{ /* classe repetida: vence o 84px do combate-b.css */
    grid-template-columns:136px minmax(96px,auto) repeat(6,minmax(0,1fr)) 136px!important;
    overflow:visible!important;margin-top:26px!important;margin-bottom:22px!important;
  }
  #gameShell #battleVitalsStrip>.vital-hp,#gameShell #battleVitalsStrip>.vital-mp{width:112px!important;height:112px!important;margin:-24px 0!important;justify-self:center}
  #gameShell #battleVitalsStrip #playerHP,#gameShell #battleVitalsStrip #playerMana{font-size:calc(19px * var(--text-scale,1))}
  #gameShell #battleVitalsStrip #playerMaxHP,#gameShell #battleVitalsStrip #playerMaxMana{font-size:calc(12px * var(--text-scale,1))}
  #gameShell #battleVitalsStrip>.vital-hp .vital-label,#gameShell #battleVitalsStrip>.vital-mp .vital-label{font-size:calc(10px * var(--text-scale,1))!important;margin-top:2px}
}

/* 2c. ATK e DEF de volta à faixa (pedido do autor, 19/10), numa linha discreta: no PC embaixo do
      Nível; no celular numa linha própria entre a Alma e as joias (a linha 4 ficou livre).
      Os números são cópia dos do quadro COMBATE (horda-limpa.js). */
#gameShell #battleVitalsStrip>#faixaAtkDef{display:flex;gap:14px;white-space:nowrap;color:var(--b-texto,#efe6cf);font:700 calc(12px * var(--text-scale,1))/1 Arial,sans-serif}
#gameShell #faixaAtkDef>span{display:inline-flex;align-items:baseline;gap:4px}
#gameShell #faixaAtkDef small{font-size:calc(9px * var(--text-scale,1));letter-spacing:.08em;color:var(--b-texto-2,#a59b84)}
@media (min-width:901px){
  #gameShell #battleVitalsStrip>.vital-identity{margin-bottom:22px!important}
  #gameShell #battleVitalsStrip>#faixaAtkDef{grid-column:2;grid-row:1;align-self:center;margin-top:24px;padding:0 4px}
}
@media (max-width:900px){
  #gameShell #battleVitalsStrip>#faixaAtkDef{grid-column:1/30;grid-row:4;justify-content:center;padding-top:6px}
}
#gameShell #battleVitalsStrip>.vital-cell .vital-label .col-icone{display:none!important}

/* 3. Quadro COMBATE no cartão do herói (as mesmas células, mesmos ids). */
#gameShell .hero-card .hero-combate-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;max-width:560px}
#gameShell .hero-card .hero-combate-grade>.vital-stat{
  display:flex!important;flex-direction:row!important;align-items:baseline!important;justify-content:space-between!important;gap:6px!important;min-width:0;width:auto!important;
  padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;height:auto!important;
}
#gameShell .hero-card .hero-combate-grade>.vital-stat .vital-label{
  display:block!important;flex:1 1 auto;min-width:0;color:var(--b-texto-2,#a59b84)!important;white-space:normal!important;overflow-wrap:anywhere;
  font:700 calc(10px * var(--text-scale,1))/1.2 Arial,sans-serif!important;letter-spacing:.06em!important;
}
#gameShell .hero-card .hero-combate-grade>.vital-stat .col-icone{display:none!important}
#gameShell .hero-card .hero-combate-grade>.vital-stat>strong{
  display:block!important;flex:none;width:auto!important;margin:0!important;color:var(--b-texto,#efe6cf)!important;font-size:calc(13px * var(--text-scale,1))!important;line-height:1.2;
  white-space:nowrap;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;letter-spacing:0!important;
}
/* Defesa traz "1.412 • 65.5%": vai para a última linha, inteira, para não espremer. */
#gameShell .hero-card .hero-combate-grade>.vital-stat:has(#battlePlayerDefense){grid-column:1/-1;order:9}
/* 3b. (22/10, plano 2.2) COMBATE fechado por padrão: o título é o botão. Rótulo sem quebra ("CURA/ABA" + "TE");
       quem encolhe é o número, pela largura do quadro. */
#gameShell .hero-card .hero-combate-botao{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:2px 0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:var(--cur-mao,pointer);text-align:left}
#gameShell .hero-card .hero-combate-seta{width:8px;height:8px;border-right:2px solid var(--b-ouro,#d7a944);border-bottom:2px solid var(--b-ouro,#d7a944);transform:rotate(45deg);margin:0 4px 3px 0;transition:transform .15s}
#gameShell .hero-card .hero-combate.fechado .hero-combate-seta{transform:rotate(-45deg);margin-bottom:0}
#gameShell .hero-card .hero-combate.fechado .hero-combate-grade{display:none}
#gameShell .hero-card .hero-combate-botao:focus-visible{outline:2px solid var(--b-ouro,#d7a944);outline-offset:2px}
#gameShell .hero-card .hero-combate-grade{container-type:inline-size}
#gameShell .hero-card .hero-combate-grade>.vital-stat .vital-label{white-space:nowrap!important;overflow-wrap:normal!important;flex:0 0 auto!important;font-size:min(calc(10px * var(--text-scale,1)),4.4cqi)!important}
#gameShell .hero-card .hero-combate-grade>.vital-stat>strong{flex:0 1 auto!important;font-size:min(calc(13px * var(--text-scale,1)),5.4cqi)!important}

/* 4. Ordens de Batalha: uma linha só. FARM AFK (sempre ATIVO), a pílula e a
      PREFERÊNCIA viram "Depois do chefe" + AVANÇAR | REPETIR. */
#gameShell #afkStatusTile,
#gameShell #autoBossStatusPill,
#gameShell .automation-card .automation-boss-controls{display:none!important}
#gameShell .horda-chefe-linha{
  grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  padding:10px 14px;border:1px solid #3a2e17;border-radius:12px;background:rgba(20,16,10,.55);
}
#gameShell .horda-chefe-texto{display:flex;flex-direction:column;gap:2px;flex:1 1 180px;min-width:0}
#gameShell .horda-chefe-texto b{display:inline-flex;align-items:center;gap:6px;color:#f1d79a;font:700 calc(12px * var(--text-scale,1))/1.2 var(--font-display,Georgia),Georgia,serif;letter-spacing:.06em}
#gameShell .horda-chefe-texto b .col-icone{font-style:normal;width:14px;height:14px}
#gameShell .horda-chefe-texto small{color:#8f8a7c;font-size:calc(11px * var(--text-scale,1))}
#gameShell .horda-chefe-afk{display:inline-flex;align-items:center;gap:6px;color:#6fd59a;font-size:calc(11px * var(--text-scale,1));white-space:nowrap}
#gameShell .horda-chefe-afk::before{content:"";width:7px;height:7px;border-radius:50%;background:#45d07f;box-shadow:0 0 6px #45d07f}
#gameShell .horda-chefe-escolha{display:inline-flex;border:1px solid #5a4520;border-radius:999px;overflow:hidden;flex:none}
#gameShell .horda-chefe-escolha button{
  appearance:none;border:0;margin:0;background:none;cursor:var(--cur-mao,pointer);min-height:32px;padding:0 14px;
  color:#a99a78;font:700 calc(11px * var(--text-scale,1))/1 Arial,sans-serif;letter-spacing:.08em;
}
#gameShell .horda-chefe-escolha button.on{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto)}
#gameShell .horda-chefe-escolha button:focus-visible{outline:2px solid #f1d79a;outline-offset:-2px}

/* 5. Chamados do Continente: lista fina. Nome à esquerda, situação à direita. O selo verde (4 ENTRADAS) fica no
      lugar do resumo. 22/10 (print 32): os títulos de grupo voltaram (src/ui/painel-grupos.js). */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner){
  padding:7px 10px!important;background:rgba(255,255,255,.015)!important;box-shadow:none!important;border-style:solid!important;
}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-icon{width:26px!important;height:26px!important;flex:0 0 26px!important;font-size:calc(13px * var(--text-scale,1))!important}
/* 19/10 (print do autor: "Inventá..." e "Colosseu..." cortados): o NOME nunca é cortado. Quando nome e
   situação não cabem na mesma linha, a situação desce para a linha de baixo, alinhada à direita. */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-copy{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:2px 8px!important;min-width:0}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-copy strong{
  flex:1 0 auto;max-width:100%;font-size:calc(13px * var(--text-scale,1))!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.2;
}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-copy em{
  flex:0 1 auto;margin-left:auto;max-width:100%!important;text-align:right;white-space:normal;line-height:1.2;color:#c9a35a!important;font-size:calc(11px * var(--text-scale,1))!important;
}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-copy{flex:1 1 auto!important}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:has(.rail-selo) .rail-toggle-copy em,
#gameShell .battle-right-rail.rail-em-grupos #socialRailSummary{display:none!important}
#gameShell .battle-right-rail.rail-em-grupos .rail-selo{position:static!important;transform:none!important}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card].rail-pronto:has(.rail-selo){border-color:rgba(74,222,128,.35)!important;padding:7px 10px!important}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card].rail-pronto:has(.rail-selo) .rail-toggle-icon{width:26px!important;height:26px!important}

/* 24/10 (autor: "esses icones tem uma caixinha em volta deles, que tal remover essa caixinha e aumentar eles um
   pouco?"): na lista de modos o ícone fica solto, sem a caixinha, e um pouco maior. */
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-icon,
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card].rail-pronto:has(.rail-selo) .rail-toggle-icon{
  width:34px!important;height:34px!important;flex:0 0 34px!important;font-size:calc(19px * var(--text-scale,1))!important;
  border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;
}
#gameShell .battle-right-rail.rail-em-grupos>[data-rail-card]:not(#goldenDragonEventBanner) .rail-toggle-icon .col-icone-img{width:100%;height:100%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* 6. Bônus do set numa linha só (quebra quando não cabe). */
#gameShell #setBonusPanel{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
#gameShell #setBonusPanel>*{width:auto!important;margin:0!important}

/* 4b. (22/10) Janela aberta no PC: a página de trás não rola junto (antes a rolagem do Altar dos Titãs e dos menus
      escorria para a arena). A largura da barra de rolagem fica reservada para nada pular de lado. */
@media (min-width:901px){
  html{scrollbar-gutter:stable}
  /* 23/10: classes do estado-da-pagina.js no lugar de html:has(...:not(.hidden)), que recalculava a página inteira (lag no Android). */
  html.col-com-titans,html.col-com-janela,html.col-com-ficha{overflow:hidden}
  .modal-card,.ta-corpo{overscroll-behavior:contain}
}