/* ============================================================================
 * arena-skin.css — PELE DA ARENA DE BOSS para as batalhas selvagem e narrada.
 *
 * Etapa E1 da Trilha A do estudo
 * (techterra-online-backend/docs/estudo-unificacao-telas-batalha.md).
 * Entrega: atmosfera + boss na cena. ZERO JS, ZERO markup novo.
 *
 * COMO DESLIGAR: tire o <link> do index.html. O jogo volta byte a byte — esta
 * folha nao e' pre-requisito de nada, so' sobrescreve.
 *
 * -------------------------------------------------------------------------
 * AS TRES TRAVAS (verificadas no disco em 2026-09-03, nao herdadas do estudo)
 *
 * 1. ESPECIFICIDADE MINIMA (0,4,0).
 *    O bloco de legibilidade da batalha (style.css:26944-26978) tem ~15 regras
 *    no formato `.mestrar-submodal.is-batalha.tem-cena .mestrar-bn-fighter`,
 *    que e' (0,4,0). Uma pele em (0,3,0) perderia em qualquer ordem de arquivo
 *    — e perderia justamente na batalha COM arte de Local, que e' o caso
 *    normal. Por isso todo seletor aqui comeca com o prefixo
 *        html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha
 *    que vale (0,3,1): html (0,0,1) + :not([attr]) (0,1,0) + duas classes.
 *    Somado a classe alvo da (0,4,1) — ganha do bloco de cima sem !important.
 *
 * 2. A GUARDA DE CELULAR E' OBRIGATORIA.
 *    A secao de batalha do mobile.css (1010-1300) tem exatamente QUATRO
 *    declaracoes `!important`, todas no bloco de largura/padding (:1017-1021).
 *    Fora dali os seletores de la sao `html[data-viewport="mobile"] .a.b`, ou
 *    seja (0,3,1) — esta folha em (0,4,1) GANHARIA deles e apagaria o layout de
 *    celular em silencio. O `:not([data-viewport="mobile"])` e' o que impede.
 *    Repare que a guarda exclui so' `data-viewport`, NAO `data-pointer`: em
 *    tablet (`coarse` sem `mobile`) a pele vale e as afordancias de toque
 *    tambem, que e' o desenho certo — `coarse` e' afordancia, nao fork.
 *
 * 3. NENHUM SELETOR COMECA EM `.mestrar-bn-`.
 *    Esse prefixo NAO e' de batalha: e' biblioteca. Sete modulos fora das tres
 *    telas usam ele (app.js, monster_detail.js, personagens.js,
 *    transferencias.js, mestre_expedicao.js, mestre_painel.js,
 *    simulador_arena.js) mais o bundle ui/battle-intro-player.bundle.js. Um
 *    seletor solto vazaria pra detalhe de monstro, ficha, transferencias, pool
 *    da expedicao e simulador.
 *
 * -------------------------------------------------------------------------
 * ORDEM DE CARGA: esta folha entra ANTES do mobile.css, nunca depois. O
 * comentario do index.html registra por que o mobile.css e' o ultimo (21
 * modulos JS injetam <style> em runtime e ganhariam o desempate por ordem de
 * fonte). Quebrar isso pra ganhar cascata seria trocar um problema por outro —
 * e a trava 2 ja resolve o unico conflito real.
 * ========================================================================= */


/* ===========================================================================
 * 1 · ATMOSFERA — as doses de scrim da raid
 *
 * A regra de hoje (style.css:26885) usa vinheta `transparent 52% -> .72` e
 * scrim `.58 -> .82`. A raid (style.css:36765) usa `56% -> .60` e `.34 -> .62`
 * — um degrau MAIS CLARO — e o comentario de la explica o porque: "aqui o boss
 * esta DENTRO da cena, entao a cena e' personagem. Quem devolve o contraste
 * perdido e' o HUD, que tem fundo escuro proprio + blur".
 *
 * Isso e' um PAR, nao duas mudancas soltas: afrouxar o scrim sem dar fundo
 * proprio a quem perdeu contraste deixa a tela pior, nao mais parecida com a
 * raid. Por isso a secao 2 vem junto nesta mesma folha, e nao numa etapa
 * seguinte.
 *
 * A lista de camadas e' copiada inteira de proposito (nao da' pra sobrescrever
 * so' uma camada de `background`), inclusive o fallback `none` do var(): sem
 * ele, `tem-cena` sem a variavel torna o `background` invalido, o CSS descarta
 * a propriedade INTEIRA e o modal fica transparente. Foi o bug da 0.229.0.
 * ======================================================================== */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha.tem-cena {
    background:
        radial-gradient(125% 120% at 50% 42%, transparent 56%, rgba(0, 0, 0, 0.60) 100%),
        linear-gradient(180deg, rgba(16, 11, 7, 0.34) 0%, rgba(16, 11, 7, 0.62) 100%),
        var(--bn-cena-img, none) center var(--bn-cena-focus, 45%) / cover no-repeat,
        radial-gradient(ellipse at 50% 30%, rgba(201, 168, 76, 0.12) 0%, rgba(201, 168, 76, 0) 60%),
        linear-gradient(160deg, #1a120a 0%, #100905 100%);
    background-origin: border-box;
}


/* ===========================================================================
 * 2 · O QUE PAGA O SCRIM AFROUXADO — vidro nas caixas que sobraram
 *
 * Receita literal do `.raid-boss-hud` (style.css:37028): fundo escuro
 * translucido + `backdrop-filter: blur()`. As duas coisas JUNTAS — o blur
 * sozinho nao da contraste, o fundo sozinho tapa a foto.
 *
 * O painel de acoes mantem a COR das duas variantes (roxo = mestre agindo,
 * azul = jogador). Nao e' decoracao: o proprio style.css:26962 registra que e'
 * "sinal de quem age". Aqui elas so' ganham o blur por baixo — a decisao D5 do
 * estudo (se a cor sobrevive) continua com o dono, e esta folha assume que SIM.
 * Se a resposta for "nao", some com as duas regras `.is-mestre`/`.is-jogador`
 * daqui e do style.css:26963-26969; nada mais depende delas.
 * ======================================================================== */
/* SO' o card do JOGADOR ganha vidro. O oponente saiu do card (secao 3) e quem
   devolve o contraste dele e' o RODAPE, que tem fundo proprio + blur. Escopar
   aqui e' obrigatorio: `.tem-cena .mestrar-bn-fighter` vale (0,5,1) e ganharia
   da regra de (0,4,1) que tira a caixa do oponente — o resultado era o boss
   dentro de um retangulo de vidro, que e' o oposto do que a tela quer. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha.tem-cena .mestrar-bn-fighter-jogador,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1.tem-cena .mestrar-bn-fighter-jogador {
    background: linear-gradient(180deg, rgba(8, 5, 3, 0.60), rgba(8, 5, 3, 0.80));
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* ⚠ O `position`/`z-index` NAO e' decoracao: e' o CONSERTO do vidro logo acima.
       `backdrop-filter` (qualquer valor != none) cria CONTEXTO DE EMPILHAMENTO, e um
       contexto em elemento NAO POSICIONADO pinta na camada `auto`, desempatada por
       ORDEM DE ARVORE. Como o painel de acoes vem DEPOIS no DOM (e `.tem-cena`
       tambem lhe da blur, logo abaixo), ele cobria a coluna do jogador INTEIRA — e
       junto tudo que o card desenha PRA FORA da propria caixa, que e' onde doi:

         - as colunas de selo de buff/debuff. `.mestrar-bn-status-col` tem
           `z-index: 6` (style.css:28313) e se ancora no CENTRO do card, andando
           `clamp(150px,19vw,210px)/2 + 4px` pro lado (secao 3) — ate' 109px, numa
           coluna de 190-260px: o selo NASCE fora dela. O 6 nao adiantava nada:
           preso dentro do contexto do vidro, ele so' disputa com os IRMAOS.
         - o balao do selo de "modo" (`.mestrar-bn-forma-tip`, z-index 60, injetado
           pelo battle_backend.js / mestrar_session.js), que abre pra CIMA.
         - o 'i' da linha do nome e o icone da forma anterior ao lado dele.
         - a ficha da escolta enquanto age (`.vgc-ficha.is-agindo`, z-index 4): a
           `.vgc-mini` vai de 26px pra 72px e acende um `box-shadow: 0 0 18px`, os
           dois pra fora da linha. O battle_backend.js ja' teve de desligar o
           `overflow` do `.vgc-banco` pra ela nao ser RECORTADA; faltava nao ser
           COBERTA — e' o mesmo sintoma, a outra metade.

       POR QUE 5: e' a faixa livre entre o que fica embaixo e o que fica em cima
       nesta mesma pilha —
           3  a arte do oponente        (secao 4)   \ o card do jogador passa por
           4  o conteudo do rodape dele (secao 4)   / cima: o balao abre pra la'
           5  A COLUNA DO JOGADOR       (esta regra)
           7  a gaveta do log / 8 o botao dela      \ seguem por cima: sao a saida
          12  a faixa do golpe (style.css:28421)    / da tela e o anuncio da acao
       Subir mais cobriria a gaveta; deixar em `auto` e' o bug.

       NAO troque isto por "tirar o blur": o vidro e' o que devolve contraste ao
       card sobre a arte do Local (secao 2 inteira). O contexto e' inevitavel; o
       que faltava era dizer em QUE camada ele fica.

       Vale nas TRES arenas pelo mesmo par de prefixos da regra: `.is-batalha` e'
       selvagem + narrada, `.raid-tela.v1` e' a raid. Na raid este no' e' o
       `involucroEu` dentro do `.v1-eu` (raid.js:4178) — mesma classe, mesmo
       conserto. Sem `.tem-cena` nao ha blur, nao ha contexto e nao ha o que
       consertar, entao a regra nao precisa (nem deve) sair deste seletor. */
    position: relative;
    z-index: 5;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha.tem-cena .mestrar-bn-action-panel {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha.tem-cena .mestrar-bn-log-side {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}


/* ===========================================================================
 * 3 · O OPONENTE SAI DO CARD — arte solta na cena
 *
 * Hoje o sprite e' 150px com borda dourada, fundo radial e padding
 * (style.css:27187): uma miniatura dentro de um quadrinho. A raid tirou tudo
 * isso e deixou a arte solta, com halo por tras e sombra de contato nos pes.
 *
 * A CAIXA ENCOSTA NA SILHUETA (`width: auto`) — decisao D3 do dono, 03/09.
 * E' isso que faz a sombra nascer do tamanho do BICHO e nao da largura da
 * coluna. So' foi possivel depois de consertar o `battleIntroEmbed.tsx`: o FLIP
 * da abertura mede este elemento e desistia quando a largura vinha 0 (imagem
 * ainda nao carregada), caindo no fade em silencio. Agora ele espera a imagem
 * ficar medivel antes de medir. Fazer isto ANTES daquilo entregaria a abertura
 * quebrada — dai a ordem.
 *
 * O card do JOGADOR nao muda de forma: ele continua card (na raid tambem e',
 * `.v1-baixo` com uma coluna estreita). Por isso as regras abaixo sao escopadas.
 * ======================================================================== */

/* -------- a caixa da arte do oponente: encosta na silhueta -------- */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte {
    position: relative;
    height: clamp(200px, 27vw, 300px);
    width: auto; max-width: 100%;
    margin: 0 auto;
    display: flex; align-items: flex-end; justify-content: center;
    /* nao e' mais um cartao */
    background: none; border: none; padding: 0;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .mestrar-bn-fighter-img-btn {
    height: 100%; width: auto; max-width: 100%;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .mestrar-bn-fighter-img {
    height: 100%; width: auto; max-width: 100%;
    object-fit: contain;
    border: none; background: none; padding: 0; border-radius: 0;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 4px rgba(255, 190, 90, 0.34));
}
/* HALO — luz por tras da silhueta. Medidas em % DESTA caixa, que tem o tamanho
   do bicho: e' o que impede o halo de seguir a largura da coluna. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte::before {
    content: '';
    position: absolute; left: 50%; top: 46%;
    transform: translate(-50%, -50%);
    width: 92%; height: 92%;
    pointer-events: none; z-index: 0; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 224, 102, 0.13) 0%, rgba(255, 150, 70, 0.07) 42%, rgba(255, 107, 60, 0) 72%);
    filter: blur(10px);
}
/* SOMBRA DE CONTATO — elipse no "chao". `bottom` negativo de proposito: encaixada
   dentro da caixa ela some atras de arte que termina em bruma clara. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte::after {
    content: '';
    position: absolute; left: 50%; bottom: -3%;
    transform: translateX(-50%);
    width: 62%; height: 9%; border-radius: 50%;
    pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.46) 44%, rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 0) 76%);
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .shiny-wrapper,
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .mestrar-bn-fighter-img {
    position: relative; z-index: 1;
}
/* SELOS de buff/debuff colados na arte. Aqui eles sao filhos da caixa que
   encosta na silhueta, entao `left:100%`/`right:100%` e' EXATO — nao precisa
   saber a largura da arte, que em CSS nao da' pra ler. E' o unico jeito de
   ancorar selo em arte de largura variavel. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .mestrar-bn-status-col {
    top: 6px;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .mestrar-bn-status-col.is-buff {
    left: 100%; right: auto; transform: translateX(4px);
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte .mestrar-bn-status-col.is-debuff {
    right: 100%; left: auto; transform: translateX(-4px);
}
/* o involucro do oponente deixa de ser caixa: a cena e' o fundo dele */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-fighter-mestre {
    background: none; border: none; padding: 0; gap: 4px;
}

/* -------- o card do JOGADOR: continua card, so' que maior e sem moldura --------
   NOS DOIS PREFIXOS: o card do jogador da raid passou a ser este mesmo componente
   (`fighterCardHtml`), dentro do mesmo involucro `.mestrar-bn-fighter-jogador`. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-fighter-jogador .mestrar-bn-fighter-img,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-fighter-jogador .mestrar-bn-fighter-img {
    width: clamp(150px, 19vw, 210px);
    height: clamp(150px, 19vw, 210px);
    border: none; background: none; padding: 0; border-radius: 0;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 4px rgba(255, 190, 90, 0.34));
}
/* o hover de hoje (style.css:27550) acende `box-shadow` — um brilho RETANGULAR
   em volta de um sprite que nao tem mais retangulo. Vai pra silhueta. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-fighter-img-btn:hover .mestrar-bn-fighter-img,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-fighter-img-btn:hover .mestrar-bn-fighter-img {
    box-shadow: none;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 8px rgba(255, 214, 130, 0.6));
}
/* Os selos do card do jogador seguem no esquema antigo (deslocamento a partir do
   centro do card), so' que o 79px de `style.css:28127` era METADE DOS 150px do
   sprite — o proprio CSS avisa disso. Com o sprite maior eles cairiam DENTRO da
   arte (medido: 26px pra dentro). Amarrado ao mesmo `clamp` pra nao quebrar de
   novo no proximo ajuste de tamanho. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-fighter-jogador .mestrar-bn-status-col.is-buff {
    transform: translateX(calc(clamp(150px, 19vw, 210px) / 2 + 4px));
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-fighter-jogador .mestrar-bn-status-col.is-debuff {
    transform: translateX(calc((clamp(150px, 19vw, 210px) / 2 + 4px) * -1));
}
/* (Na raid os selos NAO seguem esta ancoragem: a coluna dela e' mais estreita —
   220px no campo de grupo — e o `bindArena` os prende inline nas bordas do card.) */

/* NA RAID a coluna do jogador e' estreita (`minmax(190px, 236px)` no solo, 220px no
   campo de grupo) e a arte de 210px + o padding do involucro nao cabem: a arte
   encolhe ate a caixa, quadrada (`aspect-ratio`), em vez de vazar. */
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-fighter-jogador .mestrar-bn-fighter-img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-fighter-jogador .mestrar-bn-fighter-img-btn {
    max-width: 100%;
}
/* sem o rotulo "👤 nome" (o treinador ja' esta na linha de cima), o involucro da
   raid fica mais justo que o da selvagem. O roster embaixo do card fica IGUAL ao
   da selvagem (mesmo separador tracejado do style.css) — mesma peca, mesma cara. */
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-fighter-jogador {
    padding: 10px;
    gap: 8px;
}

/* O NOME do card (`fighterCardHtml`): a caixa que o auto-fit `fit-nome` do app.js
   mede. `min-width: 0` deixa o span encolher dentro do flex da linha do nome,
   `overflow: hidden` + `nowrap` fazem o excesso virar `scrollWidth > clientWidth`
   — e' esse sinal que encolhe a fonte e, se nao bastar, ABREVIA as palavras.
   ⚠ SEM a guarda de celular, declarado: e' markup novo (nenhuma folha estiliza
   `.mestrar-bn-fighter-nome`), e a abreviacao tem que valer tambem no celular —
   com quebra de linha livre o auto-fit nunca dispara e o nome vira duas linhas. */
.mestrar-submodal .mestrar-bn-fighter-name .mestrar-bn-fighter-nome {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    /* o `text-shadow` herdado (`.tem-cena .mestrar-bn-fighter-name`, 6px de blur)
       seria cortado nas bordas do span pelo `overflow: hidden`; o respiro
       compensado pela margem negativa deixa a sombra sair sem mover o texto. */
    padding: 0 6px;
    margin: 0 -6px;
}
/* A LINHA do nome tem que ser presa a largura do card: `.mestrar-bn-fighter-card` e'
   flex em coluna com `align-items: center` (style.css:27203), entao cada filho sai
   com a largura do PROPRIO conteudo — a linha crescia ate caber "Nome Comprido Nv.6
   [tipos] [i]" inteiro e vazava pelos dois lados do card (medido: 257px numa coluna
   de 236, invadindo a coluna "No campo" no grupo). Com o teto, quem encolhe e' o
   span do nome, e o auto-fit dispara. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-fighter-card > .mestrar-bn-fighter-name,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-fighter-card > .mestrar-bn-fighter-name {
    max-width: 100%;
    min-width: 0;
}


/* ===========================================================================
 * 4 · O RODAPE DO OPONENTE — a barra no pe da cena, NAS TRES ARENAS
 *
 * O markup e' UM (`AlternartBattleBackend.opRodapeHtml`, chamado pela selvagem,
 * pela narrada e pela raid), entao a regra tambem e' uma: cada seletor abaixo
 * sai em DOIS prefixos — `.is-batalha` (selvagem e narrada) e `.raid-tela.v1`
 * (raid) — porque a casca da raid NAO carrega `.is-batalha` (§6 do estudo: essa
 * classe ligaria ~15 regras de legibilidade escritas pra outra tela). Os dois
 * prefixos valem (0,4,1) contra a classe alvo.
 *
 * ANATOMIA (a do mock aprovado, 03/09):
 *   .mestrar-bn-op-rodape            a barra larga; `margin-top` negativo poe
 *     .mestrar-bn-op-dados           o painel ATRAS dos pes do bicho e o
 *       .mestrar-bn-fighter-name     `padding-top` devolve por dentro o que o
 *       .mestrar-bn-op-vida          negativo tirou (senao o conteudo subiria
 *       (mp) (vel)                   junto e ficaria debaixo da silhueta)
 *     .mestrar-bn-op-poder           so' a raid (D12): a tampa ESQUERDA
 *
 * Na raid o mesmo no' leva TAMBEM `.raid-boss-hud` (gancho do mobile.css, onde
 * esta pele nao vale). O style.css da' a essa classe borda em volta, sombra,
 * `align-items: center` e `flex: 1 1 250px` na caixa de dados — por isso essas
 * quatro aparecem zeradas/fixadas aqui, e nao so' o que muda: no desktop quem
 * manda e' o rodape, igual nas tres telas.
 * ======================================================================== */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-arena {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
/* CAMADAS — quem fica na frente de quem.
 *
 *   0  o VIDRO do rodape (o `::before`)      \  a arte passa por cima destes dois:
 *   3  a ARTE do oponente                    /  e' o "bicho pisando na barra" (M1)
 *   4  o CONTEUDO do rodape (nome, barras, poder)  <- NUNCA e' coberto
 *
 * Por que o vidro virou `::before`: `backdrop-filter` (e um `z-index` numerico)
 * cria CONTEXTO DE EMPILHAMENTO, e ai nenhum filho consegue subir acima da arte
 * — um `z-index` no conteudo ficaria preso dentro do rodape. Com o painel numa
 * pseudo-camada propria, o rodape deixa de criar contexto e o conteudo dele
 * sobe pro mesmo nivel da arte, so' que acima.
 *
 * O `::before` e' `position: absolute` de proposito: pseudo-elemento de um
 * container flex/grid vira ITEM, e um item a mais quebraria o layout — fora do
 * fluxo ele nao e' item nenhum.
 *
 * O QUE ISTO CONSERTA: a arte cobria o nome e a barra. Em repouso a folga era de
 * 6px de padding e a `drop-shadow` do sprite (0 5px 6px) ja' sangrava por cima
 * do nome; durante o AVANCO do golpe (`scale(1.08)`) a propria caixa da arte
 * entrava no texto — medido: +1px na selvagem e +5px na raid, no quadro dos 30%.
 * Empurrar o rodape pra baixo resolveria o avanco e nao a sombra, e nao
 * resistiria a proxima animacao; a ordem de pintura resolve os dois pra sempre. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape {
    position: relative; z-index: auto; width: 100%;
    margin-top: -44px; padding: 50px 16px 10px;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    border: none;
    border-radius: 0 0 12px 12px;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* o painel de vidro, ATRAS da arte */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape::before,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    border-top: 1px solid rgba(231, 76, 60, 0.30);
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(6, 4, 2, 0.30), rgba(6, 4, 2, 0.86) 55%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
/* o conteudo, NA FRENTE da arte */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-dados,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-dados,
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-poder,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-poder {
    position: relative; z-index: 4;
}
/* a caixa dos dados: uma coluna. Na raid ela tambem e' `.raid-boss-hud-txt`, que o
   style.css declara `flex: 1 1 250px` — num pai em COLUNA isso viraria 250px de
   ALTURA; por isso o `flex` e' fixado aqui. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-dados,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-dados {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 1 auto;
}
/* COM PODER (so' a raid, D12/M5): grade de duas colunas, a tampa do poder a
   ESQUERDA. No DOM o poder vem DEPOIS dos dados (no celular, sem esta pele, ele
   cai embaixo, como sempre caiu); o `order` e' o que o traz pra frente aqui. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape.mestrar-bn-op-com-poder,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape.mestrar-bn-op-com-poder {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-poder,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-poder {
    order: -1;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-poder .raid-poder-wrap,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-poder .raid-poder-wrap {
    width: 168px;
}
/* IDENTIDADE: uma linha que pode carregar mais que nome+nivel (tipos, kit, o 'i').
   `.mestrar-bn-fighter-name` ja e' flex com gap 8 (style.css:27206); aqui so' ganha
   a quebra e o `min-width` que deixa o nome encolher em vez de estourar. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape .mestrar-bn-fighter-name,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape .mestrar-bn-fighter-name {
    flex-wrap: wrap; min-width: 0; text-align: left;
}
/* a cauda (o 'i', e o que mais for pra direita) anda junto num bloco so'. Solto,
   era o 'i' sozinho que esticava a linha e quebrava o alinhamento. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-tail,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-tail {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
}
/* VIDA COM CONTADOR (M4): a barra e o "quebradas N de T" na MESMA linha, o
   contador com a altura da barra. Port da `.raid-vida-linha` do mock. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-vida,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-vida {
    display: flex; align-items: stretch; gap: 8px; min-width: 0;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-vida > .raid-barra-emp,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-vida > .raid-barra-emp,
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-vida > .mestrar-bn-bar,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-vida > .mestrar-bn-bar {
    flex: 1 1 auto; min-width: 0;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-vida .raid-contador,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-vida .raid-contador {
    flex: 0 0 auto; align-self: stretch; justify-content: center;
    /* `align-items: center`, e nao o `baseline` da regra base: esticado ate a
       altura da barra (32px), o baseline deixava o texto colado no TOPO do pill,
       com ~9px vazios embaixo (medido pela revisao). */
    align-items: center;
    padding: 0 12px; margin: 0;
}
/* a arte por CIMA da barra: e' o que faz o bicho pisar nela (a da raid e'
   `.raid-boss-arte`, na secao 6) */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-arte {
    z-index: 3;
}
/* O comparador vira LINHA. No jogo ele e' um grid 2x2 dentro do card
   (`.mestrar-bn-vel-grid`, style.css:27279); aqui a largura sobra e ele deita.
   Decisao D4 do dono, 03/09. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape .mestrar-bn-vel-grid,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape .mestrar-bn-vel-grid {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 2px;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape .mestrar-bn-vel-col,
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape .mestrar-bn-vel-col {
    flex-direction: row; align-items: center; gap: 5px;
}
@media (max-width: 900px) {
    html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-rodape.mestrar-bn-op-com-poder,
    html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-rodape.mestrar-bn-op-com-poder {
        grid-template-columns: minmax(0, 1fr);
    }
    /* numa coluna so', a tampa (168px) centrada em vez de largada a esquerda */
    html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-op-poder,
    html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .mestrar-bn-op-poder {
        justify-self: center;
    }
}

/* -------- o rodape de baixo: jogador | painel de acoes (R1) --------
   O mesmo `.v1-baixo` da raid (`style.css:37422`): coluna estreita pro monstro
   do jogador, o resto pras acoes. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-baixo {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 12px; align-items: start; margin-top: 12px;
}
@media (max-width: 900px) {
    html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-baixo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A FAIXA DO GOLPE estava em `top: 46%` ancorada na arena (style.css:28226) —
   "a junta entre os dois lados". Com a arena virando so' o oponente, 46% deixa
   de ser junta e vira "em cima do bicho". Desce pra costura entre a arena e o
   rodape de baixo, que e' onde a junta esta agora. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-golpe-faixa {
    top: auto; bottom: -14px;
}


/* ===========================================================================
 * 5 · O VS SOME
 * A raid nao tem VS, e com um lado so' na arena ele nao tem mais o que separar.
 * A selvagem ja nao emite mais o no'; a regra fica pela NARRADA, que ainda emite.
 * ======================================================================== */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-vs {
    display: none;
}


/* ===========================================================================
 * 6 · A RAID — o que sobra de proprio dela
 *
 * Decisao M2 do estudo, confirmada pelo dono em 03/09: o rodape substitui o
 * `.raid-boss-hud`. Feito: o boss da raid e' montado pelo MESMO
 * `opRodapeHtml` das outras duas, e a secao 4 ja sai no prefixo da raid.
 * O `.raid-boss-hud` de antes NAO existe mais como painel — a classe segue
 * no no' so' como gancho do mobile.css.
 *
 * PREFIXO PROPRIO, e nao o `.is-batalha` das outras duas: a casca da raid e'
 * `.mestrar-submodal.raid-tela.v1` e NAO carrega `.is-batalha` (§6 do estudo:
 * nunca adicionar essa classe a raid — ela ligaria de uma vez ~15 regras de
 * legibilidade escritas pra outra tela). Daqui sai (0,4,1), que ganha das
 * regras da propria raid, tipicamente (0,2,0).
 * ======================================================================== */

/* o palco deixa de ser estreito: o rodape e' uma barra de PE DE CENA.
   `:has(> .mestrar-bn-op-rodape)`: SO' quando o palco tem o rodape. O Simulador de
   Batalha do /admin (simulador_arena.js) desenha na MESMA casca `.raid-tela.v1`,
   mas ainda com o `.raid-boss-hud` antigo (painel de vidro, 620px, gap 10) — sem
   o escopo ele saia meio-pelado: palco de 940, gap 0, sombra da arte por cima da
   borda do painel. Com o escopo ele fica exatamente como era antes desta pele.
   (`:has()` ja e' usado no style.css, ex.: `.raid-topo:has(.vg-fila)`.) */
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .raid-boss-palco:has(> .mestrar-bn-op-rodape) {
    width: min(940px, 97%);
    gap: 0;
}
/* a arte por cima da barra — o boss pisa nela, em vez de flutuar sobre um painel */
html:not([data-viewport="mobile"]) .mestrar-submodal.raid-tela.v1 .raid-boss-palco:has(> .mestrar-bn-op-rodape) > .raid-boss-arte {
    position: relative;
    z-index: 3;
}

/* (O celular do boss — tampa do poder em linha propria, contador embaixo da
   barra — e' do mobile.css, ao lado do `.raid-boss-hud .raid-poder-wrap`. Nada
   de layout de celular mora nesta folha.) */

/* -------- A FICHA DO CAMPO E' CLICAVEL (abre o detalhar) --------
   Port literal das regras `.raid-tela .vgc-ficha[data-insp]` do style.css: o gancho
   virou `data-mon` (a chave da ficha) quando a inspecao saiu e o clique passou a
   abrir o DETALHAR do monstro, como no mock.
   ⚠ EXCECAO A TRAVA 2 (sem a guarda de celular), declarada: e' AFORDANCIA de um
   gancho novo, nao layout — o `raid.js` emite `data-mon` em todo viewport, e sem
   estas regras a ficha no celular seria clicavel sem cursor nem foco visivel
   (regressao de acessibilidade). O lugar natural seria o style.css, ao lado das
   regras `[data-insp]` que ficaram mortas; quando ele for revisto, mover. */
.mestrar-submodal.raid-tela.v1 .vgc-ficha[data-mon] {
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.mestrar-submodal.raid-tela.v1 .vgc-ficha[data-mon]:hover {
    border-color: rgba(201, 168, 76, 0.5);
    background: rgba(201, 168, 76, 0.1);
}
.mestrar-submodal.raid-tela.v1 .vgc-ficha[data-mon]:focus-visible {
    outline: 2px solid var(--gold, #c9a84c);
    outline-offset: 2px;
}

/* -------- AURA DE UNICO (M12/M13) --------
   Na raid a variante e' LUZ na silhueta, nunca moldura nem texto. Elite ja e' a
   animacao do proprio sprite (`.raid-boss-arte.elite`, style.css:37159). Unico
   ganha uma COPIA da arte atras do sprite com a aura dele: `filter` e' uma
   propriedade so' e duas animacoes nao escrevem o mesmo `filter` — cada variante
   precisa do proprio elemento pra brilhar junto (receita do mock, `.raid-aura`).
   O raio curto e' de proposito: blur grande junta os respingos e vira um borrao
   com o formato da CAIXA, o retangulo que esta solucao existe pra evitar.

   ⚠ EXCECAO A TRAVA 2 (sem a guarda de celular), declarada: e' MARKUP NOVO, sem
   regra concorrente em folha nenhuma, e sem posicionamento a copia seria um
   SEGUNDO boss visivel no celular. Nao ha layout de celular a preservar aqui. */
.mestrar-submodal.raid-tela.v1 .raid-boss-arte .raid-aura {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    width: 100%; height: 100%; object-fit: contain;
}
.mestrar-submodal.raid-tela.v1 .raid-boss-arte .aura-unico {
    animation: arenaSkinUnicoAura 3.2s ease-in-out infinite;
}
@keyframes arenaSkinUnicoAura {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 176, 112, 0.55)) drop-shadow(0 0 6px rgba(255, 176, 112, 0.20)); }
    50%      { filter: drop-shadow(0 0 3px rgba(255, 215, 135, 0.90)) drop-shadow(0 0 9px rgba(255, 176, 112, 0.38)); }
}
@media (prefers-reduced-motion: reduce) {
    /* Sem movimento a aura nao pode SUMIR — vira luz parada (nota do jogo). */
    .mestrar-submodal.raid-tela.v1 .raid-boss-arte .aura-unico {
        animation: none;
        filter: drop-shadow(0 0 2px rgba(255, 176, 112, 0.7));
    }
}


/* ===========================================================================
 * 6.5 · MUITOS MONSTROS NA FAIXA — a "faixa contida" (decisao M15)
 *
 * O bestiario do narrador tem centenas de monstros e a faixa de miniaturas
 * (`.mestrar-bn-roster`) quebra em quantas fileiras precisar: com 300 ela
 * empurrava o painel de acoes pra fora da dobra. Das tres opcoes avaliadas no
 * mock (A cap + chip de "N fora", B faixa contida, C gaveta lateral) o dono
 * escolheu a B: UMA fileira que rola na horizontal, com busca + funil em cima e
 * o contador (mais o "+") na MESMA linha — sem comer uma linha a mais de altura.
 *
 * Ligado pelo `mestrar_session.js` acima de `BN_ROSTER_MUITOS` monstros; abaixo
 * disso a faixa sai byte a byte como sempre saiu e nada aqui pega.
 *
 * ⚠ SEM a guarda de celular, declarado: sao classes NOVAS (nenhuma folha as
 * estiliza) e o problema que elas resolvem e' PIOR no telefone, onde a tela e'
 * mais curta. Nao ha layout de celular a preservar aqui.
 *
 * O FUNIL reusa o `.bestiary-filter-*` do style.css — o mesmo componente do
 * bestiario, do especie_detail e do item_picker. Zero regra duplicada.
 * ======================================================================== */
.mestrar-submodal .mestrar-bn-roster-box {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    padding-top: 4px;
    border-top: 1px dashed rgba(201, 168, 76, 0.15);
}
.mestrar-submodal .mestrar-bn-roster-barra {
    display: flex; align-items: center; gap: 6px; min-width: 0;
}
.mestrar-submodal .mestrar-bn-roster-busca {
    flex: 1 1 auto; min-width: 0;
    padding: 6px 9px; border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(201, 168, 76, 0.32);
    color: var(--text-light, #f0e6d2);
    font-family: 'Lora', serif; font-size: 0.78rem;
}
.mestrar-submodal .mestrar-bn-roster-busca:focus {
    outline: none; border-color: var(--gold, #c9a84c);
}
/* a faixa, o contador e o "+" na MESMA linha: o contador embaixo comeria a
   altura que a faixa contida existe pra economizar. */
.mestrar-submodal .mestrar-bn-roster-linha {
    display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
}
.mestrar-submodal .mestrar-bn-roster-linha > .mestrar-bn-roster {
    flex: 1 1 auto; min-width: 0;
    border-top: none; padding-top: 0;
}
/* UMA fileira que rola. `flex: 0 0 auto` na miniatura pra ela nao ser espremida
   pelo `nowrap` — sem isso 300 itens viram 300 tiras de 1px. */
.mestrar-submodal .mestrar-bn-roster.is-contido {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start; padding-bottom: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(201, 168, 76, 0.5) transparent;
}
.mestrar-submodal .mestrar-bn-roster.is-contido::-webkit-scrollbar { height: 6px; }
.mestrar-submodal .mestrar-bn-roster.is-contido::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3); border-radius: 3px;
}
.mestrar-submodal .mestrar-bn-roster.is-contido::-webkit-scrollbar-thumb {
    background: rgba(201, 168, 76, 0.45); border-radius: 3px;
}
.mestrar-submodal .mestrar-bn-roster.is-contido .mestrar-bn-roster-item { flex: 0 0 auto; }
/* escondido pelo filtro — ver a nota do `bnRosterCaixaHtml` sobre esconder em
   vez de remontar (o clique de cada miniatura carrega o slot original). */
.mestrar-submodal .mestrar-bn-roster-item.is-oculto { display: none; }
.mestrar-submodal .mestrar-bn-roster-conta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(201, 168, 76, 0.45);
    font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.06em;
    color: var(--gold-light, #e8d38a); white-space: nowrap;
}
/* o "+" tem o TAMANHO DE UMA MINIATURA: ele esta na mesma fileira e qualquer
   outra medida quebraria o ritmo dos quadradinhos. */
.mestrar-submodal .mestrar-bn-roster-add-linha {
    flex: 0 0 auto; width: 36px; height: 36px;
}
.mestrar-submodal .mestrar-bn-roster-resumo {
    font-family: 'Lora', serif; font-size: 0.64rem;
    color: var(--text-muted, #a09080); font-style: italic;
}
.mestrar-submodal .mestrar-bn-roster-resumo b { color: var(--gold-light, #e8d38a); font-style: normal; }
.mestrar-submodal .mestrar-bn-roster-vazio {
    font-family: 'Lora', serif; font-size: 0.74rem;
    color: var(--text-muted, #a09080); font-style: italic;
}


/* ===========================================================================
 * 7 · O LOG VIRA GAVETA (R2 / decisao D1 do dono)
 *
 * Hoje o log come uma coluna fixa de 260-320px (`.mestrar-bn-layout`,
 * style.css:26984) nas duas telas. Na raid ele ja e' gaveta. D1 foi decidida
 * vendo o mock: gaveta nas TRES — a coluna espremia a faixa de 5 habilidades a
 * ponto de o nome virar "G...".
 *
 * O `overflow-x: hidden` NAO e' cosmetico. A gaveta fechada fica em
 * `translateX(101%)`, ou seja FORA da caixa; sem recorte no pai ela estica o
 * `scrollWidth` da pagina e cria rolagem horizontal. Medido no mock: 673px de
 * scroll contra 485 de viewport. A raid ja resolve assim, e o comentario dela
 * (style.css:37442) diz exatamente isto — o `.mestrar-submodal` nao tem
 * `overflow-x` proprio, so' `overflow-y: auto` (:26766).
 *
 * A ancora e' o `.mestrar-bn-layout`, que precisa ganhar `position` (ele nao
 * tem): sem ancora o absoluto subiria ate o `.mestrar-submodal`, que e' o
 * SCROLLER — e a gaveta cobriria o cabecalho da tela.
 * ======================================================================== */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha {
    overflow-x: hidden;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-layout {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-log-side {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 7;
    width: min(320px, 80%);
    /* 101% da PROPRIA largura nao basta aqui: a gaveta se ancora no
       `.mestrar-bn-layout`, que e' a caixa de CONTEUDO do modal — e o modal tem
       `padding: 18px 22px` (style.css:26763). Parando em 101% ela ficava 22px
       aquem da borda e sobrava uma tira visivel com a gaveta "fechada"
       (medido: 29px). Os 34px cobrem os 22 de padding com folga — medido: com 24 ainda sobrava uma
       tira de 5px, porque `overflow` recorta na caixa de PADDING, nao na de
       conteudo. A raid nao tem esse
       problema porque `.raid-tela` zera o padding. */
    transform: translateX(calc(101% + 34px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, rgba(14, 10, 6, 0.97), rgba(8, 5, 3, 0.98));
    border-left: 1px solid rgba(201, 168, 76, 0.4);
    padding: 12px;
}
/* DOIS seletores porque o dono da classe muda por tela: na selvagem `log-aberto`
   cai num backdrop que ENVOLVE o modal; na narrada o `smRoot` E' o modal. */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha.log-aberto .mestrar-bn-log-side,
html:not([data-viewport="mobile"]) .log-aberto .mestrar-submodal.is-batalha .mestrar-bn-log-side {
    transform: none;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-drawer-btn {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    z-index: 8;
    font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.08em;
    writing-mode: vertical-rl; padding: 14px 5px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--gold-light, #e8d38a); cursor: pointer;
    border: 1px solid rgba(201, 168, 76, 0.4); border-right: none;
    border-radius: 8px 0 0 8px;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-drawer-btn:hover {
    background: rgba(201, 168, 76, 0.2);
}
@media (prefers-reduced-motion: reduce) {
    html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-log-side {
        transition: none;
    }
}


/* ===========================================================================
 * 8 · O LOG NO MODELO DA RAID
 *
 * As tres telas passam a usar o mesmo desenho de log: `<ul>/<li>` com o numero
 * em dourado e a linha colorida pela natureza do evento (cura em verde, quebra
 * de barra em vermelho). O CSS ja existia e NAO e' escopado em `.raid-tela`
 * (style.css:37523+), entao basta a lista carregar a classe `.raid-log` — sem
 * duplicar uma regra sequer.
 *
 * Duas coisas precisam ser desfeitas aqui, e as duas sao consequencia de o
 * `.raid-log` ter sido escrito pra ser o PAINEL inteiro na raid:
 *
 *   1. CAIXA DUPLA. Na raid o `.raid-log` e' quem desenha fundo, borda e
 *      padding. Aqui ele vive DENTRO do `<aside>` da gaveta, que ja tem os
 *      tres — sem zerar, aparece um retangulo dentro do outro.
 *
 *   2. QUEM ROLA. `.raid-log ul` declara `overflow-y: auto`, ou seja o
 *      scroller vira a <ul>. Mas o JS das duas telas rola o CONTAINER
 *      (`logEl.scrollTop = logEl.scrollHeight` no `#bn-log`, battle_backend.js)
 *      pra manter a ultima linha a vista. Com a rolagem na <ul> esse comando
 *      passa a nao fazer nada e o log congela na primeira linha.
 * ======================================================================== */
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-log-list.raid-log {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}
html:not([data-viewport="mobile"]) .mestrar-submodal.is-batalha .mestrar-bn-log-list.raid-log > ul {
    overflow: visible;
}