/* ============================================================================
   BombHero — GRIMÓRIO · folha de estilo
   Tema do jogo: metalurgia bronze/ouro sobre madeira/pedra quase-preta, brilho
   âmbar de lanterna, tipografia serifada de fantasia (Cinzel) + corpo legível.
   Pintado em CSS (molduras, cantoneiras, rebites) para deployar junto do binário,
   sem depender de imagens externas. A arte do jogo entra como ícones de conteúdo.
   ========================================================================== */
:root {
  /* superfícies (madeira/pedra escura) */
  --bg:        #0c0a07;
  --bg2:       #100c08;
  --panel:     #181208;
  --panel2:    #221a0e;
  --inset:     #0e0a06;
  --line:      #4a3718;
  --line-soft: #2c2110;
  /* metal */
  --bronze:    #a87c34;
  --bronze-hi: #e8c879;
  --bronze-lo: #6b4e22;
  --gold:      #f0c668;
  --gold-soft: #d8af5e;
  --amber:     #ef8a2e;
  --amber-hi:  #ffb05a;
  /* texto */
  --txt:       #e9dcc0;
  --dim:       #a7916a;
  --acc:       #ffcf8a;
  --ok:        #74c265;
  --bad:       #e0574f;
  --shadow:    0 8px 26px rgba(0,0,0,.55);
  --fxserif:   'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --fxbody:    'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--txt); font: 14.5px/1.55 var(--fxbody);
  background:
    radial-gradient(1200px 520px at 50% -120px, #241a0c 0%, transparent 70%),
    linear-gradient(180deg, #0e0a06, var(--bg) 220px);
  background-attachment: fixed;
  min-height: 100vh;
}
/* textura/vinheta sutil por cima de tudo (não captura clique) */
.bgfx {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.018) 0 1px, transparent 1px) 0 0/22px 22px,
    radial-gradient(900px 600px at 50% 110%, rgba(0,0,0,.5), transparent 60%);
  mix-blend-mode: screen; opacity: .5;
}
body > * { position: relative; z-index: 1; }

a { color: var(--acc); text-decoration: none; cursor: pointer; }
a:hover { color: var(--gold); }
code { font: 12.5px/1 Consolas, 'Cascadia Code', monospace; color: var(--acc);
       background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 4px; }

/* ---- moldura ornamentada reutilizável (rebites dourados nos 4 cantos) ---- */
.framed {
  position: relative; border-radius: 8px;
  background:
    radial-gradient(circle at 9px 9px,                       var(--gold-soft) 0 1.7px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 9px) 9px,          var(--gold-soft) 0 1.7px, transparent 2.4px),
    radial-gradient(circle at 9px calc(100% - 9px),          var(--gold-soft) 0 1.7px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--gold-soft) 0 1.7px, transparent 2.4px),
    linear-gradient(180deg, var(--panel), var(--bg2));
  background-repeat: no-repeat;
  border: 1px solid var(--bronze-lo);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 38px rgba(0,0,0,.35);
}
.framed::before {  /* fio de bronze interno (a 2ª linha da moldura do jogo) */
  content: ""; position: absolute; inset: 4px; border-radius: 5px; pointer-events: none;
  border: 1px solid transparent;
  border-image: linear-gradient(150deg, var(--bronze-lo), var(--bronze-hi) 28%,
                var(--bronze) 52%, var(--bronze-lo) 76%, var(--gold-soft)) 1;
  opacity: .8;
}

/* ============================== TOPO / MARCA ============================== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background:
    linear-gradient(180deg, #1d1408 0%, #140e07 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--bronze) 18%, var(--bronze-hi) 50%, var(--bronze) 82%, transparent) 1;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 12px 20px 8px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.lantern {
  width: 26px; height: 30px; flex: none; border-radius: 6px 6px 8px 8px;
  background:
    radial-gradient(circle at 50% 42%, #ffd98a 0 5px, #f0a23a 6px 9px, #b6701f 10px 13px, transparent 14px),
    linear-gradient(180deg, #3a2a12, #221708);
  border: 1px solid var(--bronze); position: relative;
  box-shadow: 0 0 18px rgba(255,150,40,.45), inset 0 0 8px rgba(255,180,80,.4);
}
.lantern::before { content:""; position:absolute; left:50%; top:-5px; width:8px; height:6px;
  transform:translateX(-50%); border:1px solid var(--bronze); border-bottom:none;
  border-radius:6px 6px 0 0; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand h1 {
  margin: 0; font: 700 25px/1 'Cinzel Decorative', var(--fxserif);
  letter-spacing: .04em;
  background: linear-gradient(180deg, #ffe6ad, var(--gold) 55%, #b87f26 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.4); filter: drop-shadow(0 1px 6px rgba(255,170,60,.25));
}
.brand-sub { color: var(--dim); font-size: 12px; letter-spacing: .14em;
             text-transform: uppercase; margin-top: 3px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.live-note { color: var(--dim); font-size: 12px; max-width: 360px; text-align: right; }
.gemstrip { display: flex; gap: 5px; padding: 4px 8px; border-radius: 999px;
  background: var(--inset); border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.6); }
.gemstrip img { width: 17px; height: 17px; image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

/* ================================ ABAS ================================== */
.tabs {
  max-width: 1180px; margin: 0 auto; padding: 4px 16px 0;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.tab {
  appearance: none; cursor: pointer; color: var(--dim);
  font: 600 13.5px/1 var(--fxserif); letter-spacing: .03em;
  padding: 9px 15px 11px; border: 1px solid transparent; border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #170f07, #100b06);
  display: inline-flex; align-items: center; gap: 7px; transition: all .12s;
}
.tab .ti { font-size: 14px; filter: grayscale(.3) brightness(.9); }
.tab:hover { color: var(--acc); background: linear-gradient(180deg, #221709, #160f07);
             border-color: var(--line-soft); }
.tab.on {
  color: var(--gold); border-color: var(--bronze);
  background: linear-gradient(180deg, #2c2010, #1b130a);
  box-shadow: 0 -2px 12px rgba(255,160,50,.12), inset 0 2px 0 var(--amber);
}
.tab.on .ti { filter: none; }

/* ================================ CORPO ================================= */
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 24px; }
.view { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* títulos de seção: serifado dourado + filete em gradiente + losango */
h2 {
  position: relative; font: 600 16px/1.2 var(--fxserif); color: var(--gold);
  letter-spacing: .04em; margin: 26px 0 12px; padding-bottom: 9px;
  display: flex; align-items: center; gap: 9px;
}
h2::before { content: "◆"; color: var(--amber); font-size: 11px;
             text-shadow: 0 0 8px rgba(239,138,46,.6); }
h2::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--bronze) 0%, var(--bronze-hi) 8%,
              var(--bronze-lo) 40%, transparent 80%);
  border-radius: 2px;
}
.view > h2:first-child { margin-top: 4px; }

/* ------------------------------- cards ---------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
         gap: 12px; margin: 6px 0 16px; }
.card { padding: 13px 16px; }
.card .k { color: var(--dim); font-size: 11.5px; text-transform: uppercase;
           letter-spacing: .07em; display: flex; align-items: center; gap: 7px; }
.card .v { font: 600 22px/1.15 var(--fxserif); color: var(--txt); margin-top: 5px; }
.card .v small { font: 400 12px var(--fxbody); color: var(--dim); }

/* ------------------------------- tabelas -------------------------------- */
table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 56%;
        margin-bottom: 16px; border-radius: 9px; overflow: hidden;
        border: 1px solid var(--line); background: var(--bg2); box-shadow: var(--shadow); }
th, td { padding: 8px 12px; text-align: left; white-space: nowrap;
         border-bottom: 1px solid var(--line-soft); }
thead th, tr:first-child th {
  background: linear-gradient(180deg, #2a1f0f, #1d1509); color: var(--gold-soft);
  font: 600 11.5px/1 var(--fxbody); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--bronze-lo); position: sticky; top: 0;
}
tbody tr:nth-child(even) td, tr:nth-child(even) td { background: rgba(255,200,110,.022); }
tr:hover td { background: rgba(255,170,60,.07); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
                 font-feature-settings: "tnum"; }
.scroll { max-height: 520px; overflow: auto; border-radius: 9px;
          border: 1px solid var(--line); box-shadow: var(--shadow); }
.scroll table { margin: 0; border: none; box-shadow: none; border-radius: 0; min-width: 100%; }
.scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.scroll::-webkit-scrollbar-track { background: var(--inset); }
.scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--bronze), var(--bronze-lo));
  border-radius: 6px; border: 2px solid var(--inset); }

/* ------------------------- chips / badges / toolbar --------------------- */
.toolbar { display: flex; gap: 7px; align-items: center; margin: 8px 0 14px; flex-wrap: wrap; }
.toolbar .lab { color: var(--dim); font-size: 12px; text-transform: uppercase;
                letter-spacing: .06em; margin-right: 2px; }
.chip {
  cursor: pointer; padding: 6px 12px; border-radius: 999px; font: 600 12.5px var(--fxbody);
  color: var(--dim); background: var(--panel); border: 1px solid var(--line-soft);
  transition: all .12s;
}
.chip:hover { border-color: var(--bronze); color: var(--acc); }
.chip.on {
  color: #1a1206; border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  box-shadow: 0 2px 10px rgba(240,198,104,.3); font-weight: 700;
}
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; margin: 1px;
  border-radius: 999px; font-size: 12px; white-space: nowrap;
  background: var(--inset); border: 1px solid var(--line-soft);
}

/* ------------------------------ banner / nota --------------------------- */
.banner {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 16px; margin: 6px 0 16px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(60,42,16,.5), rgba(30,22,10,.5));
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  color: #d9c9a4; font-size: 13.5px;
}
.banner b { color: var(--acc); }
.muted { color: var(--dim); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .grid2 { grid-template-columns: 1fr; } }

/* gates */
.gatecell { color: var(--amber); }

/* fórmulas (combate) */
.formula {
  font: 13px/1.5 Consolas, 'Cascadia Code', monospace; color: #e6d7b4;
  background: var(--inset); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--bronze); border-radius: 7px;
  padding: 9px 13px; margin: 7px 0; overflow-x: auto; white-space: nowrap;
}
.formula b { color: var(--gold); }

/* ------------------------------- ícones --------------------------------- */
.ico { width: 22px; height: 22px; object-fit: contain; vertical-align: middle;
       image-rendering: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.ico-lg  { width: 30px; height: 30px; }
.ico-slot{ width: 26px; height: 26px; opacity: .92; }
.gem { width: 16px; height: 16px; object-fit: contain; vertical-align: middle;
       filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.gem-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  background: var(--gc, #888); transform: rotate(45deg);
  box-shadow: 0 0 6px var(--gc, #888), inset 0 0 0 1px rgba(255,255,255,.35); }

/* slot de item (silhueta) emoldurado, estilo inventário */
.islot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 7px; flex: none;
  background: radial-gradient(circle at 50% 30%, #221a0e, #0e0a06);
  border: 1px solid var(--line); box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.islot .ico-slot { width: 28px; height: 28px; }

/* nome + ícone juntos numa célula */
.cellname { display: inline-flex; align-items: center; gap: 9px; }

/* faixa-herói (topo da aba Heróis) */
.hero-hero { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin-bottom: 16px; }
.hero-portrait { width: 78px; height: 78px; flex: none; border-radius: 12px; image-rendering: auto;
  background: radial-gradient(circle at 50% 35%, #2a2012, #0e0a06);
  border: 1px solid var(--bronze); box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 16px rgba(255,160,50,.12);
  padding: 6px; }
@media (max-width: 560px) { .hero-hero { flex-direction: column; text-align: center; } }

/* destaque de tier na árvore de skill */
.badge.tg-key    { color: #ffd27a; border-color: #b8893f; background: rgba(184,137,63,.16);
                   box-shadow: 0 0 8px rgba(240,198,104,.18); font-weight: 700; }
.badge.tg-unlock { color: #7fc9ff; border-color: #3a6e96; background: rgba(58,110,150,.16); }

/* divisor dourado do jogo (section_bar) entre blocos grandes */
.divider { display: block; height: 22px; margin: 18px auto; max-width: 540px;
  background: url(/wiki/static/assets/frames/section_bar.png) center/contain no-repeat;
  opacity: .9; }

/* ------------------------------- rodapé --------------------------------- */
.foot { max-width: 1180px; margin: 10px auto 0; padding: 0 20px 40px; text-align: center; }
.foot p { color: var(--dim); font-size: 12.5px; max-width: 720px; margin: 6px auto 0; }
.foot b { color: var(--gold-soft); }

#loaderr { display: none; color: #fff; background: #5a1d1a; border: 1px solid var(--bad);
  border-radius: 9px; padding: 12px 16px; margin-bottom: 14px; }

/* busca por tabela (filtra linhas client-side; não re-renderiza, preserva foco) */
.tsearch { width: 100%; max-width: 320px; margin: 0 0 10px; padding: 7px 10px;
  background: var(--inset); color: var(--txt); border: 1px solid var(--line); border-radius: 7px;
  font: 400 13px/1.2 var(--fxbody); }
.tsearch::placeholder { color: var(--dim); }

@media (max-width: 620px) {
  .brand h1 { font-size: 21px; }
  .live-note { display: none; }
  .wrap { padding: 16px 12px 24px; }
  table { font-size: 13px; }
  th, td { white-space: normal; }  /* deixa colunas longas (Efeito/Requer) quebrarem no celular */
}