/* Destruitor Idle — ADDON 3 com level e pontos (addon3.js): o resumo no bloco "Addon 3: Aura", a sub-aba "Addon 3" da
   aba Outfit (no estilo da ficha de skills) e o aviso de level novo (o mesmo .lvup do level do personagem). */

/* as sub-abas da direita: Outfits | Montarias | Addon 3 (uma coluna para cada) */
.o-sub { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* resumo (esquerda) */
.a3-resumo { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; padding: 7px 10px; border: 1px solid #3a3320; border-radius: 6px; background: linear-gradient(180deg, #1b1810, #121624); }
.a3-resumo .a3-rl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.a3-resumo .a3-rl b { color: var(--gold-2); font-size: 13px; }
.a3-resumo .a3-rl span { color: #c9cfdb; font-size: 11.5px; }
.a3-resumo .fbar { grid-column: 1 / -1; height: 7px; grid-row: 2; }
.a3-resumo .a3-ir { grid-column: 2; grid-row: 1; white-space: nowrap; }
.a3-resumo.a3-off { opacity: .8; }

/* painel (sub-aba Addon 3) */
.a3-painel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.a3-cab { display: flex; align-items: stretch; gap: 8px; }
.a3-lv { flex: 1; display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid #3a3320; border-radius: 8px; background: radial-gradient(ellipse at 0% 0%, #2c2412, #121624 70%); }
.a3-lv small { font: 700 11px/1 Verdana, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffe39a; }
.a3-lv b { font-size: 22px; color: var(--gold-2); }
.a3-livres { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 92px; padding: 6px 10px; border: 1px solid #2c3346; border-radius: 8px; background: #121624; text-align: center; }
.a3-livres b { font-size: 22px; line-height: 1; color: #9aa4ad; }
.a3-livres span { font-size: 11px; color: #9aa4ad; }
.a3-livres.tem { border-color: #4f7a35; background: #15200f; }
.a3-livres.tem b, .a3-livres.tem span { color: #b6ec8e; }
.a3-xp { display: flex; flex-direction: column; gap: 3px; }
.a3-xp small { color: #9aa4ad; font-size: 11.5px; }
.a3-regra { margin: 0; line-height: 1.35; }
.a3-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #5a4620; border-radius: 6px; background: #241c0d; color: #f3dca4; font-size: 12.5px; line-height: 1.35; }

/* os 7 atributos: o mesmo visual da tabela de skills da ficha */
table.a3-tab td { padding: 3px 4px; vertical-align: middle; }
table.a3-tab tr.tem td:first-child { color: #e6ecff; }
table.a3-tab .a3-n { white-space: nowrap; color: #9aa4ad; }
table.a3-tab .a3-n b { color: #e6ecff; font-weight: 600; }
table.a3-tab .a3-bc { width: 30%; }
table.a3-tab .a3-b { width: 44px; }
.a3-bar { height: 8px; background: #1d2333; border-radius: 1px; overflow: hidden; }
.a3-bar i { display: block; height: 100%; background: #6cc04a; }
table.a3-tab .skb.off { color: #7d8496; text-decoration: line-through; }
.g .a3-mais, .a3-mais { width: 34px; height: 34px; border: 1px solid #3c5a2c; border-radius: 6px; background: #1a2a13; color: #b6ec8e; font: 700 18px/1 Verdana, sans-serif; cursor: pointer; }
.a3-mais:hover:not(:disabled) { background: #24391a; border-color: #5d8a3f; }
.a3-mais:disabled { border-color: #2c3346; background: #121624; color: #4f5668; cursor: default; }

/* redistribuir */
.a3-redist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid #2c3346; }
.a3-redist p { margin: 0; flex-basis: 100%; font-size: 13px; }
.a3-opcoes { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.a3-opcoes .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; }
.a3-opcoes .btn small { color: #9aa4ad; font-size: 11px; font-weight: 400; }
.a3-vazio { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px; border: 1px dashed #3a4153; border-radius: 8px; }
.a3-vazio p { margin: 0; line-height: 1.4; }

/* aviso de level novo (por cima do .lvup do app.css) */
.lvup.a3up .lvup-c { background: radial-gradient(ellipse at 50% 0%, #2a2f12ee, #10140aee 70%); }
.lvup.a3up .lvup-c small { color: #e8f5a9; text-shadow: 0 0 8px #b6ec8e; }
.lvup.a3up .lvup-c .btn { margin-top: 8px; min-height: 36px; }

/* celular: tudo em uma coluna, botoes de 44 px */
@media (max-width: 759px) {
  .g .o-sub button { min-height: 44px; }
  .g .a3-mais, .a3-mais { width: 44px; height: 44px; }
  .a3-resumo .a3-ir, .a3-redist .btn, .a3-aviso .btn, .a3-vazio .btn { min-height: 44px; }
  table.a3-tab .a3-bc { width: 22%; }
  .lvup.a3up .lvup-c .btn { min-height: 44px; }
}
@media (max-width: 400px) {
  table.a3-tab th.a3-bc, table.a3-tab td.a3-bc { display: none; }
  .a3-lv b { font-size: 19px; }
}