/* =====================================================================
   tema_janelas.css — tema comum das janelas PA.Janela (.pa-janela) com a
   identidade do Lumenar: índigo/roxo escuro, molduras e títulos dourados,
   cristais. Organização inspirada nos painéis de MMO clássico (abas no topo,
   grades em cartões, paginação, rodapé com moedas), arte própria.

   A moldura base (.pa-janela, .pj-*) é criada em oficios.js; aqui só o visual.
   Os seletores começam com "html body" para vencer o <style> que oficios.js
   injeta depois deste arquivo.

   Componentes reutilizáveis (prefixo tj-), para qualquer janela:
     .tj-painel  .tj-desc  .tj-cats/.tj-cat  .tj-grade(--cols)  .tj-card
     .tj-fita (selo de oferta)  .tj-pag  .tj-rodape  .tj-busca  .tj-moedas/.tj-moeda
     .tj-slot(.grande .vazio .on)  .tj-arvore/.tj-ramo/.tj-folha  .tj-chance
     .pj-bt.tj-ouro (botão principal)  .tj-mini  .tj-cols (layout em colunas)
   ===================================================================== */
:root {
  --tj-fundo: #15122a;
  --tj-fundo2: #1d1938;
  --tj-fundo3: #2a2350;
  --tj-poco: #0c0a18;
  --tj-ouro: #f0cf74;
  --tj-ouro2: #b8954a;
  --tj-ouro3: #6e5626;
  --tj-texto: #ece8dc;
  --tj-fraco: #a9a3c4;
  --tj-linha: #3d3466;
  --tj-cristal: #8fe3ff;
  --tj-violeta: #8a6cff;
  --tj-bom: #7ddc8a;
  --tj-ruim: #ff8a7a;
}

/* ---------------- moldura ---------------- */
html body .pa-janela {
  max-width: 96vw;
  color: var(--tj-texto);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(138,108,255,.16), transparent 70%),
    radial-gradient(ellipse 50% 30% at 100% 100%, rgba(143,227,255,.06), transparent 70%),
    linear-gradient(#1a1633, #100d20);
  border: 1px solid var(--tj-ouro2);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(240,207,116,.12), 0 18px 50px rgba(0,0,0,.7), 0 0 30px rgba(138,108,255,.12);
}
/* cantoneiras douradas */
html body .pa-janela::before {
  content: ''; position: absolute; inset: 4px; pointer-events: none; z-index: 2; border-radius: 8px;
  background:
    linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) top left / 16px 1px no-repeat, linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) top left / 1px 16px no-repeat,
    linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) top right / 16px 1px no-repeat, linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) top right / 1px 16px no-repeat,
    linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) bottom left / 16px 1px no-repeat, linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) bottom right / 16px 1px no-repeat, linear-gradient(var(--tj-ouro2), var(--tj-ouro2)) bottom right / 1px 16px no-repeat;
  opacity: .8;
}

/* ---------------- barra de título ---------------- */
html body .pa-janela .pj-topo {
  position: relative; justify-content: center; min-height: 38px; padding: 6px 44px;
  background: linear-gradient(#2e2560, #1b1640 60%, #161233);
  border-bottom: 1px solid var(--tj-ouro3);
  box-shadow: inset 0 1px 0 rgba(240,207,116,.22), 0 1px 0 rgba(240,207,116,.12);
  border-radius: 9px 9px 0 0;
}
html body .pa-janela .pj-topo::after {   /* filete dourado sob o título */
  content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tj-ouro), transparent);
}
html body .pa-janela .pj-topo b {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 15px Georgia, 'Times New Roman', serif; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff5cf 10%, #f0cf74 50%, #c08a2c 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #1a1005);
}
/* cristais dos lados do título */
html body .pa-janela .pj-topo b::before, html body .pa-janela .pj-topo b::after {
  content: ''; width: 7px; height: 7px; transform: rotate(45deg); flex: none;
  background: linear-gradient(135deg, #e6fbff, var(--tj-cristal) 45%, var(--tj-violeta));
  box-shadow: 0 0 6px rgba(143,227,255,.8);
}
html body .pa-janela .pj-x {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid #7a3b2b; background: linear-gradient(#5a2222, #2c0f12); color: #f6e7bd;
  font: 700 12px/22px 'Segoe UI', sans-serif; text-align: center; box-shadow: inset 0 1px 0 rgba(255,200,170,.2);
}
html body .pa-janela .pj-x:hover { background: linear-gradient(#8a2a2a, #4a1414); color: #fff; border-color: var(--tj-ouro2); }
html body .pa-janela .pj-corpo { padding: 12px 14px 14px; scrollbar-width: thin; scrollbar-color: #6e5626 #120f22; }

/* ---------------- abas ---------------- */
html body .pa-janela .pj-abas {
  gap: 3px; margin-bottom: 10px; padding: 0 4px; border-bottom: 1px solid rgba(184,149,74,.5);
}
html body .pa-janela .pj-aba {
  margin-bottom: -1px; padding: 5px 12px; border-radius: 7px 7px 0 0;
  background: linear-gradient(#2a2350, #1a1634); border: 1px solid #4a3f6e; border-bottom-color: rgba(184,149,74,.5);
  color: #cbbf9d; font: 600 12px 'Segoe UI', sans-serif;
}
html body .pa-janela .pj-aba:hover { color: #fff3cf; border-color: var(--tj-ouro2); }
html body .pa-janela .pj-aba.on {
  color: #2a1d05; border-color: #f7dc8c; border-bottom-color: transparent;
  background: linear-gradient(#ffe79a, #e0b54a 60%, #b8862a);
  box-shadow: inset 0 1px 0 #fff6cf, 0 -2px 10px rgba(240,190,70,.25);
}
/* faixas de nível (botões pequenos, não são abas de pasta) */
html body .pa-janela .sf-faixas .pj-aba, html body .pa-janela .tj-pilulas .pj-aba { border-radius: 12px; border-bottom-color: #4a3f6e; margin-bottom: 0; padding: 2px 9px; font-size: 11px; }
html body .pa-janela .sf-faixas .pj-aba.on, html body .pa-janela .tj-pilulas .pj-aba.on { border-color: #f7dc8c; }

/* ---------------- botões ---------------- */
html body .pa-janela .pj-bt {
  background: linear-gradient(#3a2f62, #241d44); border: 1px solid #7a6436; color: #f3ead0;
  border-radius: 6px; padding: 5px 11px; font: 600 12px 'Segoe UI', sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.12);
}
html body .pa-janela .pj-bt:hover:not(:disabled) { background: linear-gradient(#4c3f80, #2f2658); border-color: var(--tj-ouro); color: #fff; }
html body .pa-janela .pj-bt:disabled { opacity: .42; filter: grayscale(.6); }
html body .pa-janela .pj-bt.on { border-color: var(--tj-ouro); background: linear-gradient(#5a4a22, #3a2f14); }
html body .pa-janela .pj-bt.tj-ouro {
  color: #2a1d05; border-color: #f7dc8c; background: linear-gradient(#ffe79a, #e0b54a 55%, #b8862a);
  box-shadow: inset 0 1px 0 #fff6cf, 0 0 0 1px rgba(0,0,0,.45), 0 3px 12px rgba(240,190,70,.25);
}
html body .pa-janela .pj-bt.tj-ouro:hover:not(:disabled) { color: #1a1003; background: linear-gradient(#fff0b8, #ecc35a 55%, #c8962f); }
html body .pa-janela .pj-bt.tj-grande { padding: 8px 26px; font-size: 14px; letter-spacing: .04em; }
html body .pa-janela .pj-bt.tj-mini, html body .pa-janela .sf-mini { padding: 1px 7px; font-size: 11px; border-radius: 5px; }
html body .pa-janela .sf-mini { background: linear-gradient(#3a2f62, #241d44); border: 1px solid #6a5634; color: #f3ead0; }
html body .pa-janela .sf-mini:hover:not(:disabled) { border-color: var(--tj-ouro); }
html body .pa-janela .pj-icbt { background: linear-gradient(#251f45, #18142e); border-color: var(--tj-linha); }
html body .pa-janela .pj-icbt:hover { background: #2f2858; border-color: var(--tj-ouro2); }

/* ---------------- textos, listas, campos ---------------- */
html body .pa-janela .pj-sub { color: var(--tj-fraco); }
html body .pa-janela .pj-ok { color: var(--tj-bom); }
html body .pa-janela .pj-no { color: var(--tj-ruim); }
html body .pa-janela h4 { color: var(--tj-ouro); font: 700 13px Georgia, serif; letter-spacing: .04em; }
html body .pa-janela .pj-item {
  background: linear-gradient(rgba(46,38,86,.55), rgba(24,20,44,.55)); border: 1px solid rgba(110,86,38,.45); border-radius: 7px;
}
html body .pa-janela .pj-item small { color: var(--tj-fraco); }
html body .pa-janela .pj-barra { background: #0c0a18; border: 1px solid #2e2650; }
html body .pa-janela input, html body .pa-janela select {
  background: var(--tj-poco); color: #f6e7bd; border: 1px solid var(--tj-ouro3); border-radius: 5px; font: 12px 'Segoe UI', sans-serif; padding: 3px 6px;
}
html body .pa-janela input:focus, html body .pa-janela select:focus { outline: none; border-color: var(--tj-ouro); box-shadow: 0 0 8px rgba(240,190,70,.25); }
html body .pa-janela .ui-lcel { background: linear-gradient(#251f45, #16122b); border-color: var(--tj-linha); }
html body .pa-janela .ui-lcel:hover { border-color: var(--tj-ouro3); }
html body .pa-janela ::-webkit-scrollbar { width: 8px; height: 8px; }
html body .pa-janela ::-webkit-scrollbar-track { background: #120f22; }
html body .pa-janela ::-webkit-scrollbar-thumb { background: linear-gradient(#8a6d32, #5a4520); border-radius: 4px; }

/* ===================== componentes tj- ===================== */
.pa-janela .tj-painel {
  position: relative; background: rgba(9,7,18,.55); border: 1px solid rgba(184,149,74,.35); border-radius: 8px;
  box-shadow: inset 0 0 22px rgba(0,0,0,.45); padding: 8px;
}
.pa-janela .tj-painel > h4:first-child, .pa-janela .tj-tit { margin: 0 0 8px; color: var(--tj-ouro); font: 700 12px Georgia, serif; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.pa-janela .tj-tit::before { content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: var(--tj-cristal); box-shadow: 0 0 5px var(--tj-cristal); flex: none; }
.pa-janela .tj-desc {
  background: rgba(9,7,18,.6); border: 1px solid rgba(184,149,74,.3); border-left: 2px solid var(--tj-ouro2); border-radius: 0 7px 7px 0;
  padding: 7px 10px; margin-bottom: 10px; color: #d6d0c0; font-size: 12px; line-height: 1.45; max-height: 92px; overflow: auto;
}
.pa-janela .tj-desc b { color: #fff3cf; }
.pa-janela .tj-desc .pa-ic { width: 22px; height: 22px; vertical-align: middle; border-width: 1px; }
.pa-janela .tj-desc .pa-ic .pa-q { font-size: 9px; }
.pa-janela .tj-cols { display: flex; gap: 10px; align-items: stretch; }
.pa-janela .tj-cols > .tj-flex { flex: 1; min-width: 0; }

/* abas de categoria (presas no topo do painel da grade) */
.pa-janela .tj-cats { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 -1px 6px; position: relative; z-index: 1; }
.pa-janela .tj-cat {
  padding: 3px 10px; border: 1px solid #4a3f6e; border-bottom-color: rgba(184,149,74,.35); border-radius: 6px 6px 0 0;
  background: linear-gradient(#221c40, #15122a); color: #b9b0d6; font: 600 11px 'Segoe UI', sans-serif; cursor: pointer;
}
.pa-janela .tj-cat b { font-weight: 400; opacity: .65; margin-left: 4px; font-size: 10px; }
.pa-janela .tj-cat:hover { color: #fff3cf; }
.pa-janela .tj-cat.on { color: #fff3cf; border-color: var(--tj-ouro2); border-bottom-color: transparent; background: linear-gradient(#3e3170, #1c1738); box-shadow: inset 0 2px 0 var(--tj-ouro); }
.pa-janela .tj-cat.vazia { opacity: .45; }
.pa-janela .tj-cats + .tj-painel { border-top-left-radius: 0; }

/* grade de cartões */
.pa-janela .tj-grade { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.pa-janela .tj-vazio { grid-column: 1 / -1; text-align: center; color: var(--tj-fraco); padding: 26px 0; }
.pa-janela .tj-card {
  --rc: #4a3f6e; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 8px; align-items: center;
  padding: 6px 7px; min-height: 62px; border: 1px solid var(--tj-linha); border-radius: 7px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%), linear-gradient(#251f45, #16122b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pa-janela .tj-card:hover { border-color: var(--tj-ouro3); }
.pa-janela .tj-card.on { border-color: var(--tj-ouro); box-shadow: 0 0 0 1px rgba(240,207,116,.35), 0 0 12px rgba(240,190,70,.25); }
.pa-janela .tj-card.tj-off { opacity: .45; filter: grayscale(.5); }
.pa-janela .tj-card.tj-clic { cursor: pointer; }
.pa-janela .tj-card-ic { display: flex; align-items: center; justify-content: center; }
.pa-janela .tj-card-ic .pa-ic { width: 44px; height: 44px; }
.pa-janela .tj-card-ic .pet-ic-box { border: 2px solid var(--rc); }
.pa-janela .tj-card-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pa-janela .tj-nome { font: 600 12px 'Segoe UI', sans-serif; color: #f3ead0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-janela .tj-card small { color: var(--tj-fraco); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-janela .tj-card-pe { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding-top: 4px; border-top: 1px solid rgba(184,149,74,.15); }
.pa-janela .tj-card-pe .pj-bt { padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.pa-janela .tj-carimbo { position: absolute; right: 6px; top: 6px; padding: 0 5px; border: 1px solid #8a8aa0; border-radius: 3px; color: #c8c8d8; font: 800 9px 'Segoe UI', sans-serif; letter-spacing: .1em; transform: rotate(8deg); }
/* selo de oferta (preço abaixo do comum) */
.pa-janela .tj-fita {
  position: absolute; right: -24px; bottom: 9px; width: 84px; transform: rotate(-40deg); text-align: center; pointer-events: none;
  background: linear-gradient(#ff9a52, #d6402a); color: #fff; font: 800 9px/14px 'Segoe UI', sans-serif; letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.pa-janela .tj-fita.tj-fita-top { bottom: auto; top: 9px; transform: rotate(40deg); }

/* preço / moedas */
.pa-janela .tj-preco { display: inline-flex; align-items: center; gap: 3px; color: #ffe08a; font: 700 12px 'Segoe UI', sans-serif; white-space: nowrap; }
.pa-janela .tj-preco em { color: var(--tj-fraco); font: 400 10px 'Segoe UI', sans-serif; }
.pa-janela .tj-preco.tj-falta { color: var(--tj-ruim); }
.pa-janela .tj-svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.pa-janela .tj-moedas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pa-janela .tj-moeda {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 4px; border-radius: 12px;
  background: var(--tj-poco); border: 1px solid #4a3f6e; color: #f3ead0; font: 700 12px 'Segoe UI', sans-serif; white-space: nowrap;
}
.pa-janela .tj-moeda .tj-svg { width: 18px; height: 18px; }
.pa-janela .tj-moeda.prata b { color: #e6ebf2; } .pa-janela .tj-moeda.ouro b { color: #ffcf3a; } .pa-janela .tj-moeda.cristal b { color: var(--tj-cristal); }
.pa-janela .tj-moeda b { font-weight: 700; }

/* paginação */
.pa-janela .tj-pag { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; color: var(--tj-fraco); font-size: 11px; }
.pa-janela .tj-pag .pj-bt { width: 26px; height: 22px; padding: 0; font-size: 11px; border-radius: 11px; }
.pa-janela .tj-pag b { min-width: 52px; text-align: center; padding: 2px 10px; border-radius: 11px; background: var(--tj-poco); border: 1px solid var(--tj-ouro3); color: #fff3cf; font: 700 12px 'Segoe UI', sans-serif; }
.pa-janela .tj-pag .tj-pag-info { flex: 1; text-align: right; }
.pa-janela .tj-pag .tj-pag-info:first-child { text-align: left; }

/* rodapé: busca + moedas */
.pa-janela .tj-rodape {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 7px 9px;
  background: linear-gradient(rgba(42,35,80,.5), rgba(14,11,28,.6)); border: 1px solid rgba(184,149,74,.35); border-radius: 8px;
}
.pa-janela .tj-busca { position: relative; display: inline-flex; align-items: center; }
.pa-janela .tj-busca input { width: 190px; padding-left: 24px; }
.pa-janela .tj-busca::before { content: ''; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: 2px solid var(--tj-ouro2); border-radius: 50%; pointer-events: none; }
.pa-janela .tj-busca::after { content: ''; position: absolute; left: 17px; top: 50%; width: 2px; height: 6px; margin-top: 2px; background: var(--tj-ouro2); transform: rotate(-45deg); pointer-events: none; }
.pa-janela .tj-receber { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 14px; border: 1px solid var(--tj-ouro); background: rgba(90,70,20,.35); color: #fff3cf; font-size: 12px; animation: tjPulsa 1.6s ease-in-out infinite; }
@keyframes tjPulsa { 50% { box-shadow: 0 0 12px rgba(240,190,70,.45); } }

/* espaços (slots) */
.pa-janela .tj-slot {
  position: relative; width: 50px; height: 50px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tj-ouro3); border-radius: 7px; background: radial-gradient(circle at 50% 40%, #241e44, #0b0916 75%);
  box-shadow: inset 0 0 10px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
}
.pa-janela .tj-slot .pa-ic { width: 42px; height: 42px; }
.pa-janela .tj-slot.grande { width: 70px; height: 70px; border-radius: 10px; }
.pa-janela .tj-slot.grande .pa-ic { width: 58px; height: 58px; }
.pa-janela .tj-slot.vazio::after { content: ''; width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid rgba(143,227,255,.35); background: rgba(143,227,255,.06); }
.pa-janela .tj-slot.on { border-color: var(--tj-ouro); box-shadow: inset 0 0 10px rgba(0,0,0,.7), 0 0 10px rgba(240,190,70,.4); }
.pa-janela .tj-slot.bloq { opacity: .4; }
.pa-janela .tj-slot.bloq::after { content: '✕'; color: #6a5a80; font-size: 14px; border: 0; background: none; transform: none; width: auto; height: auto; }
.pa-janela .tj-slot-rot { display: block; text-align: center; font-size: 10.5px; color: var(--tj-fraco); margin-top: 3px; }
.pa-janela .tj-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pa-janela .tj-slotbox { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
.pa-janela .tj-slotbox .tj-cont { font: 700 11px 'Segoe UI', sans-serif; color: #f3ead0; }
.pa-janela .tj-slotbox .tj-cont.tj-falta { color: var(--tj-ruim); }
.pa-janela .tj-slotbox .tj-bts { display: flex; gap: 2px; }
.pa-janela .tj-seta { color: var(--tj-ouro); font-size: 18px; align-self: center; text-shadow: 0 0 6px rgba(240,190,70,.5); }

/* árvore de categorias (à esquerda) */
.pa-janela .tj-arvore { display: flex; flex-direction: column; gap: 2px; }
.pa-janela .tj-ramo { display: flex; align-items: center; gap: 6px; padding: 4px 6px; cursor: pointer; border-radius: 5px; color: #e6dcc0; font: 700 12px 'Segoe UI', sans-serif; background: none; border: 0; text-align: left; width: 100%; }
.pa-janela .tj-ramo:hover { background: rgba(255,255,255,.04); }
.pa-janela .tj-ramo i { width: 13px; height: 13px; flex: none; border: 1px solid var(--tj-ouro2); border-radius: 3px; font: 700 11px/11px 'Segoe UI', sans-serif; font-style: normal; text-align: center; color: var(--tj-ouro); background: var(--tj-poco); }
.pa-janela .tj-folha { display: flex; align-items: center; gap: 7px; width: 100%; padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: #cfc8e6; font: 12px 'Segoe UI', sans-serif; text-align: left; cursor: pointer; }
.pa-janela .tj-folha.sub { padding-left: 22px; }
.pa-janela .tj-folha:hover { background: rgba(255,255,255,.04); }
.pa-janela .tj-folha.on { border-color: var(--tj-ouro2); background: linear-gradient(90deg, rgba(240,207,116,.18), rgba(240,207,116,.02)); color: #fff3cf; }
.pa-janela .tj-folha .pa-ic { width: 26px; height: 26px; border-width: 1px; }
.pa-janela .tj-folha span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-janela .tj-folha em { font-style: normal; font-size: 10px; color: var(--tj-fraco); }

/* chances por qualidade */
.pa-janela .tj-chance { display: flex; flex-direction: column; gap: 5px; }
.pa-janela .tj-chance-l { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 6px; font-size: 11px; }
.pa-janela .tj-chance-l .tj-bar { height: 10px; border-radius: 5px; background: var(--tj-poco); border: 1px solid #2e2650; overflow: hidden; }
.pa-janela .tj-chance-l .tj-bar i { display: block; height: 100%; background: linear-gradient(currentColor, currentColor); opacity: .85; box-shadow: inset 0 3px 0 rgba(255,255,255,.25); }
.pa-janela .tj-chance-l b { text-align: right; }

/* chips de atributos */
.pa-janela .tj-bonus { display: flex; flex-wrap: wrap; gap: 3px; }
.pa-janela .tj-bonus span { padding: 1px 6px; border-radius: 4px; background: rgba(80,200,110,.12); color: #8fe6a6; font-size: 11px; }