/* batalha.css — dono: rn-investimentos-30. Todas as classes começam com bt- (exceto estados genéricos). */
#batalha.hidden{display:none!important}
.bt-raiz{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;animation:btEntrar .35s;font-family:'Segoe UI',system-ui,sans-serif;color:#eee;user-select:none}
@keyframes btEntrar{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.bt-arena{flex:1;display:flex;justify-content:space-around;align-items:center;position:relative;min-height:0}
.bt-topo{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:16px;font-size:13px}
.bt-tempo{min-width:44px;text-align:center;font-weight:700}
.bt-tempo.alerta{color:#ff6b6b}
.bt-auto{font:inherit;font-size:12px;background:#2c2a45;color:#eee;border:1px solid #5a5690;border-radius:8px;padding:3px 10px;cursor:pointer}
.bt-auto.on{background:#2f6b3a;border-color:#6c6}
.bt-lado{display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center;max-height:100%}
.bt-ladoB{display:grid;grid-template-columns:repeat(2,auto);gap:16px 26px;align-items:center}
.bt-un{display:flex;flex-direction:column;align-items:center;width:132px;position:relative;transition:transform .2s,opacity .5s,filter .5s;border-radius:10px;padding:6px}
.bt-bola{border-radius:50%;border:3px solid rgba(255,255,255,.65);box-shadow:0 6px 14px rgba(0,0,0,.5),inset -8px -8px 0 rgba(0,0,0,.18)}
.bt-nome{font-size:12px;margin-top:5px;text-align:center;text-shadow:0 1px 2px #000}
.bt-nome small{color:#bbb}
.bt-st{height:17px;font-size:12px;display:flex;gap:3px}
.bt-st b.up{color:#7f7}.bt-st b.down{color:#f88}
.bt-barra{width:112px;height:9px;background:#333;border-radius:5px;overflow:hidden;margin-top:3px;position:relative}
.bt-barra>i{display:block;height:100%;transition:width .25s}
.bt-barra>span{position:absolute;inset:0;font-size:8px;line-height:9px;text-align:center;color:#fff;text-shadow:0 0 2px #000}
.bt-hp>i{background:linear-gradient(#ef6b6b,#b52424)}
.bt-mp>i{background:linear-gradient(#6b9cef,#2448b5)}
.bt-un.morto{opacity:.28;filter:grayscale(1)}
.bt-un.capturado{opacity:0;transform:scale(.3);pointer-events:none}
.bt-un.miravel{cursor:pointer;background:rgba(255,255,255,.08);outline:2px dashed #ffd84a}
.bt-un.miravel:hover{background:rgba(255,216,74,.2)}
.bt-un.vez{background:rgba(155,140,255,.18);outline:2px solid #9b8cff}
.bt-un.avD{transform:translateX(50px)}
.bt-un.avE{transform:translateX(-50px)}
.bt-un.conj .bt-bola{box-shadow:0 0 22px 8px #b39cff}
.bt-un.tremer{animation:btTremer .3s}
@keyframes btTremer{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.bt-flut{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:800;font-size:21px;animation:btSubir 1.1s forwards;pointer-events:none;text-shadow:0 2px 3px #000;white-space:nowrap;z-index:2}
.bt-flut.crit{color:#ffcf3a;font-size:27px}.bt-flut.cura{color:#7f7}.bt-flut.erro{color:#ccc;font-size:14px}.bt-flut.mana{color:#7af}.bt-flut.veneno{color:#c7f;font-size:16px}
@keyframes btSubir{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-50px}}
.bt-painel{height:200px;display:flex;background:rgba(12,11,22,.95);border-top:1px solid #444}
.bt-log{flex:1;padding:10px 14px;font-size:13px;line-height:1.5;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#bbb}
.bt-log div:last-child{color:#fff}
.bt-cmd{width:430px;padding:12px;border-left:1px solid #333;display:flex;flex-direction:column;gap:8px;overflow:auto}
.bt-tit{font-size:13px;color:#aaa}
.bt-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bt-grade button,.bt-continuar{font:inherit;font-size:13px;cursor:pointer;background:#2c2a45;color:#eee;border:1px solid #5a5690;border-radius:8px;padding:6px 8px}
.bt-grade button:hover:not(:disabled),.bt-continuar:hover{background:#3d3a63}
.bt-grade button:disabled{opacity:.4;cursor:default}
.bt-grade button small{display:block;font-size:10px;color:#aab}
.bt-fim{font-size:13px;line-height:1.6}
.bt-res{font-size:16px}.bt-res.ok{color:#7f7}.bt-res.erro{color:#f77}
.bt-continuar{margin-top:auto;padding:9px}
@media (max-width:760px){.bt-painel{flex-direction:column;height:260px}.bt-cmd{width:auto;border-left:0;border-top:1px solid #333}.bt-un{width:100px}.bt-barra{width:90px}}

/* =====================================================================
   COLUNA DE COMANDOS no visual do Lumenar (js/ui_extra.js põe .bc-ativo na raiz
   e move #btCmd e #btAuto para dentro de .bc-col). Sem o ui_extra.js, vale o layout acima.
   Paleta: índigo/roxo escuro, dourado do título, brilho de cristal.
   ===================================================================== */
.bc-ativo{--bc-ouro:#f0cf74;--bc-ouro2:#b8954a;--bc-ouro3:#6e5626;--bc-tinta:#f6e7bd;--bc-fundo1:#2a2149;--bc-fundo2:#140f25;--bc-cristal:#8fd8ff;--bc-larg:188px}
/* a arena deixa o lado direito para a coluna; o painel de baixo fica só com o registro */
.bc-ativo .bt-arena{margin-right:calc(var(--bc-larg) + 24px)}
.bc-ativo .bt-painel{height:118px}
html body.pa-em-batalha .ui-atalhos.ui-atalhos.ui-atalhos{bottom:126px!important}
.bc-ativo .bt-log{padding:8px 16px;font-size:12.5px;line-height:1.45}
.bc-col{position:absolute;z-index:3;right:12px;top:52px;bottom:130px;width:var(--bc-larg);display:flex;flex-direction:column;justify-content:center;gap:6px;pointer-events:none}
.bc-col>*{pointer-events:auto}
.bc-cab{align-self:stretch;text-align:center;font:700 11px/1 Georgia,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--bc-ouro);
  text-shadow:0 1px 0 #000,0 0 10px rgba(240,190,90,.35);padding:2px 0 4px}
.bc-cab span{font-size:9px;color:var(--bc-ouro2);letter-spacing:0;vertical-align:1px}
/* a moldura da coluna: vidro índigo com cantos dourados */
.bc-ativo .bc-col #btCmd{width:auto;border:1px solid rgba(184,149,74,.55);border-radius:12px;padding:10px 8px;gap:7px;max-height:100%;overflow:auto;
  background:
    linear-gradient(var(--bc-ouro),var(--bc-ouro)) top left/14px 2px no-repeat,linear-gradient(var(--bc-ouro),var(--bc-ouro)) top left/2px 14px no-repeat,
    linear-gradient(var(--bc-ouro),var(--bc-ouro)) top right/14px 2px no-repeat,linear-gradient(var(--bc-ouro),var(--bc-ouro)) top right/2px 14px no-repeat,
    linear-gradient(var(--bc-ouro),var(--bc-ouro)) bottom left/14px 2px no-repeat,linear-gradient(var(--bc-ouro),var(--bc-ouro)) bottom left/2px 14px no-repeat,
    linear-gradient(var(--bc-ouro),var(--bc-ouro)) bottom right/14px 2px no-repeat,linear-gradient(var(--bc-ouro),var(--bc-ouro)) bottom right/2px 14px no-repeat,
    radial-gradient(ellipse at 50% 0,rgba(143,216,255,.10),rgba(0,0,0,0) 60%),
    linear-gradient(rgba(34,26,62,.88),rgba(13,10,26,.92));
  box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,233,176,.10);backdrop-filter:blur(3px);scrollbar-width:thin;scrollbar-color:#6e5626 transparent}
.bc-ativo .bc-col .bt-tit{font:600 11.5px/1.3 "Segoe UI",system-ui,sans-serif;color:#d9cfae;text-align:center;padding:0 2px 6px;border-bottom:1px solid rgba(184,149,74,.28)}
.bc-ativo .bc-col .bt-grade{display:flex;flex-direction:column;gap:5px}
/* botão de comando: placa índigo com borda dourada e o ícone dentro de um cristal */
.bc-ativo .bc-col .bt-grade button{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:38px;
  padding:4px 10px 4px 46px;text-align:left;font:700 13.5px/1.15 "Segoe UI",system-ui,sans-serif;color:var(--bc-tinta);letter-spacing:.02em;
  background:linear-gradient(180deg,#3a2d66 0%,var(--bc-fundo1) 45%,var(--bc-fundo2) 100%);border:1px solid var(--bc-ouro3);border-radius:9px;
  box-shadow:inset 0 1px 0 rgba(255,233,176,.16),inset 0 -1px 0 rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.45);text-shadow:0 1px 2px #000;transition:transform .12s,box-shadow .12s,border-color .12s}
.bc-ativo .bc-col .bt-grade button small{display:block;margin-top:1px;font:600 10px/1.2 "Segoe UI",sans-serif;color:#b9a77a;letter-spacing:0;text-shadow:none}
.bc-ativo .bc-col .bt-grade button:hover:not(:disabled){border-color:var(--bc-ouro);transform:translateX(-3px);background:linear-gradient(180deg,#4a3a80 0%,#33285c 45%,#1b1433 100%);
  box-shadow:inset 0 1px 0 rgba(255,233,176,.25),0 0 12px rgba(240,207,116,.35),0 2px 6px rgba(0,0,0,.5)}
.bc-ativo .bc-col .bt-grade button:active:not(:disabled){transform:translateX(-1px) scale(.98)}
.bc-ativo .bc-col .bt-grade button:disabled{opacity:.42;filter:grayscale(.7);cursor:default}
.bc-ativo .bc-col .bt-grade button .bc-ic{position:absolute;left:7px;top:50%;width:30px;height:30px;margin-top:-15px;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;color:var(--bc-ouro)}
/* o "cristal" atrás do ícone */
.bc-ativo .bc-col .bt-grade button .bc-ic::before{content:'';position:absolute;inset:3px;transform:rotate(45deg);border-radius:5px;
  background:radial-gradient(circle at 35% 30%,rgba(143,216,255,.38),rgba(80,60,160,.35) 55%,rgba(20,14,40,.9));border:1px solid var(--bc-ouro2);
  box-shadow:0 0 6px rgba(143,216,255,.25),inset 0 0 4px rgba(0,0,0,.6)}
.bc-ativo .bc-col .bt-grade button:hover:not(:disabled) .bc-ic::before{border-color:var(--bc-ouro);box-shadow:0 0 10px rgba(143,216,255,.55),inset 0 0 4px rgba(0,0,0,.6)}
.bc-ativo .bc-col .bt-grade button .bc-ic .pa-sis{position:relative;width:22px;height:22px}
.bc-ativo .bc-col .bt-grade button .bc-k{position:absolute;right:7px;top:50%;margin-top:-8px;font:600 9px/14px monospace;color:#bba76a;border:1px solid #5a4a2a;border-radius:4px;padding:0 4px;background:rgba(0,0,0,.35)}
/* ordem do menu principal (como uma coluna de comandos): Atacar, Defender, Habilidade, Capturar, Pet, Posição, Item, Fugir */
.bc-ativo .bc-col .bt-grade button[data-bc="atacar"]{order:1}
.bc-ativo .bc-col .bt-grade button[data-bc="defender"]{order:2}
.bc-ativo .bc-col .bt-grade button[data-bc="habilidade"]{order:3}
.bc-ativo .bc-col .bt-grade button[data-bc="capturar"]{order:4}
.bc-ativo .bc-col .bt-grade button[data-bc="pet"]{order:5}
.bc-ativo .bc-col .bt-grade button[data-bc="posicao"]{order:6}
.bc-ativo .bc-col .bt-grade button[data-bc="item"]{order:7}
.bc-ativo .bc-col .bt-grade button[data-bc="fugir"]{order:8}
.bc-ativo .bc-col .bt-grade button[data-bc="voltar"],.bc-ativo .bc-col .bt-grade button[data-bc="recolher"]{order:9}
.bc-ativo .bc-col .bt-grade button[data-bc="fugir"]{color:#ffd8c8;border-color:#7a3a2a;background:linear-gradient(180deg,#4a2a46 0%,#2e1a32 45%,#170c1c 100%)}
.bc-ativo .bc-col .bt-grade button[data-bc="voltar"]{min-height:30px;font-size:12.5px;padding-left:40px}
.bc-ativo .bc-col .bt-grade button[data-bc="voltar"] .bc-ic{width:26px;height:26px;margin-top:-13px;font-size:15px}
/* sub-menus (habilidades, itens, pets, alvo): a coluna alarga um pouco e os botões encolhem */
.bc-ativo .bc-col.bc-sub{--bc-larg:250px}
.bc-ativo .bc-col.bc-sub .bt-grade button:not(.bc-bt){min-height:34px;padding:4px 8px;font-size:12.5px}
.bc-ativo .bc-col.bc-sub .bt-grade button.bt-ic{flex-direction:row;align-items:center;gap:8px}
.bc-ativo .bc-col.bc-sub .bt-grade button.bt-ic .pa-ic{width:30px;height:30px;flex:none}
/* itens: só os ícones, em grade */
.bc-ativo .bc-col .bt-grade:has(> .bt-soic){display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
.bc-ativo .bc-col .bt-grade:has(> .bt-soic) > button[data-bc="voltar"]{grid-column:1/-1}
.bc-ativo .bc-col .bt-grade .bt-soic{align-items:center;justify-content:center;padding:4px;min-height:52px}
/* fim da batalha: a coluna vira um quadro de resultado mais largo */
.bc-ativo .bc-col.bc-fim{--bc-larg:330px}
.bc-ativo .bc-col.bc-fim .bt-fim{color:#e8e0c8}
.bc-ativo .bc-col.bc-fim .bt-continuar{background:linear-gradient(#ffe79a,#e0b54a 55%,#b8862a);color:#2a1d05;border:1px solid #f7dc8c;font-weight:800;border-radius:9px}
/* botão Automático no pé da coluna */
.bc-ativo .bc-col .bt-auto.bc-auto{position:relative;align-self:stretch;min-height:36px;padding:4px 10px 4px 46px;text-align:left;font:800 13px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.03em;
  color:#d9cfae;background:linear-gradient(180deg,#2b2546,#15111f);border:1px solid var(--bc-ouro3);border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:pointer}
.bc-ativo .bc-col .bt-auto.bc-auto::before{content:'⟳';position:absolute;left:10px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--bc-ouro);background:radial-gradient(circle at 35% 30%,rgba(143,216,255,.3),rgba(20,14,40,.9));border:1px solid var(--bc-ouro2)}
.bc-ativo .bc-col .bt-auto.bc-auto::after{content:'A';position:absolute;right:8px;top:50%;margin-top:-8px;font:600 9px/14px monospace;color:#bba76a;border:1px solid #5a4a2a;border-radius:4px;padding:0 4px;background:rgba(0,0,0,.35)}
.bc-ativo .bc-col .bt-auto.bc-auto:hover{border-color:var(--bc-ouro);filter:brightness(1.15)}
.bc-ativo .bc-col .bt-auto.bc-auto.on{color:#e9ffd8;border-color:#7fd07a;background:linear-gradient(180deg,#2f6b3a,#16331d);box-shadow:0 0 12px rgba(127,208,122,.4),0 2px 6px rgba(0,0,0,.5)}
.bc-ativo .bc-col .bt-auto.bc-auto.on::before{animation:bcGira 1.6s linear infinite;color:#c8ffb8}
@keyframes bcGira{to{transform:rotate(360deg)}}
@media (max-width:900px){.bc-ativo{--bc-larg:150px}.bc-ativo .bc-col .bt-grade button{font-size:12px;padding-left:40px}.bc-ativo .bc-col .bt-grade button small{display:none}}
@media (max-width:760px){.bc-ativo .bt-painel{height:90px}.bc-col{bottom:100px}}