/* batalha (battle.js): cena Battle (level3) do client. 1 unidade = 120 px (câmera ortográfica de size 3). */
.bt { position: absolute; inset: 0; overflow: hidden; }

/* UI/BackgroundBattle: CaveBattle e FieldBattle em modo Tiled (16 x 6.5625 u), escala 1.2, centro em (4.5, -0.501) e cada
   Split a ±8 u: cada metade mostra um ladrilho de 9.6 x 7.875 u (1152 x 945 px) encostado na divisão, topo a -18.8 px. */
.bt .half { background-size: 1152px 945px; background-position-y: -18.8px; }
.bt .half.left { background-position-x: right; background-color: #3f1e1f; }
.bt .half.right { background-position-x: left; background-color: #1a3212; }
/* BackgroundSplit: a sombra estreita sobre a divisão */
.bt .split { position: absolute; left: 636px; top: 0; bottom: 0; width: 8px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.3) 50%, rgba(0,0,0,0)); pointer-events: none; }

/* pets: .bp fica no espaço (BoardView.GetLocalPosition) e anda (MoveMinion, entrada, arremesso); .stack faz o golpe
   (TradeAnimation: recuo, giro, avanço); .juice treme (DODamage) e pulsa (DOPunchScale). Tudo gira em torno do centro do pet. */
.bt #pets { position: absolute; inset: 0; }
.bp, .bp .stack, .bp .juice, .proj { position: absolute; width: 0; height: 0; }
.bp .stack, .bp .juice { left: 0; top: 0; }
.bp .num { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; pointer-events: none; }
/* contorno vermelho pulsante dos dois que trocam golpes: battle.js (setFight) escreve o filtro drop-shadow a cada quadro */

/* TextFX: número do dano em vermelho, 0.7 unidade, com contorno escuro */
.dmgnum { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; color: #ff1a1a; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; pointer-events: none; z-index: 5; }
/* StickerGainAttack / StickerGainHealth */
.gain { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 4px; pointer-events: none; z-index: 5; }
.gain .g { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 26px; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.gain .g img { width: 30px; height: 30px; margin-right: -4px; }
.gain.tmp .g { color: #9fe0ff; }
.proj { z-index: 6; }
/* card de habilidade (CardController.ShowCard): o .tip da loja, acima dos pets e abaixo dos projéteis */
.bt .bcard { z-index: 5; }

/* UIBattleIntro: rótulos com o sprite ComicFlat em 9-slice (borda de 24 px: contorno preto de 8/128 e cantos arredondados,
   refeitos em CSS para não deixar emendas), ancorados a 65% da altura; no palco o canvas de 1920 x 1080 sai a 0.633 (medido
   na imagem de referência). Jogador: (-450, 0), 550 de largura, texto #00B5FF; "VS": 140; oponente: (500, 0), 650 de largura,
   texto #FF6B2D. Crescem com Ease.OutElastic e somem ao fim da entrada. */
.bt .intro { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.bt .lab { position: absolute; top: 252px; height: 58px; translate: -50% -50%; visibility: hidden; background: #fff; border: 4px solid #000; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--display); font-weight: 700; white-space: nowrap; overflow: hidden; }
.bt .lab span { display: block; font-size: 34px; line-height: 1; padding: 0 2px; }
.bt .lab.mine { left: 355px; width: 348px; color: #00b5ff; }
.bt .lab.vs { left: 640px; width: 89px; height: 81px; color: var(--ink); }
.bt .lab.vs span { font-size: 44px; }
.bt .lab.theirs { left: 956px; width: 411px; color: #ff6b2d; }
.bt .clickarea { position: absolute; inset: 0; z-index: 5; }
.bt .clock { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* UI/Static/UserContainer (UIBattlePlayerLabel): caixa BoxWhite preta a 30% no canto, padding 10, ícones 60 x 80 com número a
   0.7, nome de usuário e equipe em versalete de 32. Canvas -> palco a 0.326, como na imagem de referência. */
.bbar { position: absolute; bottom: 6px; z-index: 3; pointer-events: none; }
.bbar.mine { left: 11px; }
.bbar.theirs { right: 11px; }
.bbar .box { display: flex; align-items: center; padding: 2px 3px; background: rgba(0,0,0,.3); border-radius: 4px; }
.bbar .st { position: relative; width: 25px; height: 28px; display: flex; align-items: center; justify-content: center; }
.bbar .st img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bbar .st b { position: relative; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.bbar .who { display: flex; flex-direction: column; padding: 0 3px; font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 1.1; font-variant: small-caps; white-space: nowrap; }
.bbar.theirs .who { align-items: flex-end; }
.bbar .user { color: #fff; font-size: 11px; letter-spacing: .02em; }
.bbar.mine .team { color: #3dc7ff; }
.bbar.theirs .team { color: #ff6b2d; }

/* log e controles (velocidade e Pular) */
.bt .blog:empty { display: none; }
.bt .blog { left: 12px; top: 12px; width: 300px; max-height: 150px; font-size: 12px; background: rgba(0,0,0,.45); z-index: 3; }
.bt .controls { left: 50%; bottom: 8px; translate: -50% 0; z-index: 6; }