/* =====================================================================
   BESTIÁRIO A — escolha do autor na auditoria de 29/09 ("vamos de A").
   Áreas numa coluna à esquerda, os monstros da área em quadradinhos no meio
   e a ficha do monstro num painel FIXO à direita. A tabela de drop aparece
   uma vez só, no painel (antes era repetida em todos os 64 cartões).
   Larguras (mesma regra do Inventário C: a ficha nunca desce para baixo):
     > 1240 px  três colunas;
     900-1240   as áreas viram uma fileira em cima; grade e ficha lado a lado;
     < 900      uma coluna; a ficha abre numa gaveta de baixo.
   Quem preenche: renderCodex e amigos no game.js. Só a tela; nada de regra.
   ===================================================================== */
#codexView.bx-a{--bx-card:#141a26;--bx-card2:#101723;--bx-linha:#2d3a52;--bx-ouro:#f6d58a;--bx-ouro2:#e0ad4c;--bx-tinta:#e3e9f3;--bx-mudo:#8c95a8;
  max-width:1560px;margin:0 auto;padding:12px 16px 24px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;color:var(--bx-tinta)}
#codexView.bx-a *{box-sizing:border-box}
#codexView.bx-a>*{min-width:0}

/* topo */
.bx-topo{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;padding:12px 18px;border:1px solid #6b5426;border-radius:14px;
  background:radial-gradient(120% 140% at 0% 0%,#2a2113 0%,#141a26 55%,#0e131c 100%)}
.bx-titulo{display:grid;gap:2px}
.bx-titulo span{font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.16em;color:var(--bx-ouro2);font-weight:800}
.bx-titulo h2{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(26px * var(--text-scale,1));color:#fff;line-height:1}
.bx-cap{margin-left:auto;display:grid;gap:5px;min-width:180px;font-size:calc(12px * var(--text-scale,1));color:var(--bx-mudo)}
.bx-cap strong{color:#fff;font-size:calc(15px * var(--text-scale,1));font-variant-numeric:tabular-nums}
.bx-cap i{display:block;height:6px;border-radius:4px;background:#0b111a;border:1px solid var(--bx-linha);overflow:hidden}
.bx-cap i em{display:block;height:100%;width:0;background:linear-gradient(90deg,#c8923a,#f6d58a)}
.bx-busca{display:flex;gap:8px;min-width:0}
.bx-busca input,.bx-busca select{min-height:38px;padding:7px 12px;border-radius:9px;border:1px solid var(--bx-linha);background:var(--bx-card2);color:var(--bx-tinta);
  font-size:calc(13px * var(--text-scale,1));font-weight:600;min-width:0}
.bx-busca input{width:260px}

/* corpo: áreas | grade | ficha */
.bx-corpo{display:grid;grid-template-columns:250px minmax(0,1fr) 400px;gap:12px;align-items:start}
.bx-corpo>*{min-width:0}
.bx-rail-card,.bx-grade-card{border:1px solid var(--bx-linha);border-radius:14px;background:var(--bx-card);padding:12px}
.bx-rail-card{position:sticky;top:10px;max-height:calc(100vh - 20px);display:grid;grid-template-rows:auto minmax(0,1fr)}
.bx-rail-cab{font-size:calc(10.5px * var(--text-scale,1));letter-spacing:.16em;font-weight:800;color:var(--bx-mudo);padding:0 4px 8px}
.bx-rail{display:grid;gap:4px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a4660 transparent;align-content:start}
.bx-area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 10px;border-radius:9px;border:1px solid transparent;background:var(--bx-card2);
  color:var(--bx-tinta);text-align:left;cursor:pointer;font:inherit}
.bx-area:hover{border-color:#44516b}
.bx-area b{font-size:calc(13px * var(--text-scale,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-area small{font-size:calc(11px * var(--text-scale,1));color:var(--bx-mudo)}
.bx-area .n{font-size:calc(11.5px * var(--text-scale,1));font-weight:800;color:#c9d2e0;align-self:center;grid-row:1/3;grid-column:2;font-variant-numeric:tabular-nums}
.bx-area i{grid-column:1/-1;height:3px;border-radius:2px;background:#0b111a;overflow:hidden;display:block}
.bx-area i em{display:block;height:100%;background:var(--bx-ouro2)}
.bx-area.on{border-color:var(--bx-ouro2);background:#211c14}
.bx-area.fechada{opacity:.45}.bx-area.fechada.on{opacity:1}

.bx-secao{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.bx-secao h3{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(19px * var(--text-scale,1));color:#fff}
.bx-secao small{color:var(--bx-mudo);font-size:calc(12px * var(--text-scale,1))}
.bx-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.bx-mon{position:relative;display:grid;gap:4px;justify-items:center;align-content:start;padding:10px 6px 8px;border-radius:11px;border:1px solid var(--bx-linha);
  background:radial-gradient(80% 70% at 50% 40%,#1d2638,#0d131d);color:var(--bx-tinta);font:inherit;cursor:pointer;min-width:0}
.bx-mon:hover{border-color:#56627a;filter:brightness(1.1)}
.bx-mon .arte{width:92px;height:92px;display:grid;place-items:center;font-size:48px;line-height:1}
.bx-mon .arte img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 3px 4px #000)}
.bx-mon b{font-size:calc(12.5px * var(--text-scale,1));text-align:center;line-height:1.2;overflow-wrap:anywhere}
.bx-mon small{font-size:calc(10.5px * var(--text-scale,1));color:var(--bx-mudo);text-align:center}
.bx-mon.codex-boss,.bx-mon.codex-rare{border-color:#8a6a2c;background:radial-gradient(80% 70% at 50% 40%,#3a2a12,#120e09)}
.bx-mon.codex-boss::before{content:"👑";position:absolute;left:6px;top:4px;font-size:13px}
.bx-mon.elite::before{content:"⭐";position:absolute;left:6px;top:4px;font-size:12px}
.bx-mon.oculto .arte img{filter:brightness(0) drop-shadow(0 0 1px #56627a)}
.bx-mon.oculto .arte{color:transparent;text-shadow:0 0 0 #1b2230}
.bx-mon.oculto b{color:var(--bx-mudo)}
.bx-mon.sel{outline:2px solid var(--bx-ouro);outline-offset:2px}
.bx-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:calc(11.5px * var(--text-scale,1));color:var(--bx-mudo)}

/* ficha */
.bx-detalhe{position:sticky;top:10px;align-self:start;max-height:calc(100vh - 20px);overflow:auto;overscroll-behavior:contain;
  border:1px solid #6b5426;border-radius:14px;background:linear-gradient(180deg,#171e2c,#10151f)}
.bx-vazio{padding:22px 16px;color:var(--bx-mudo);text-align:center}
#codexView .bx-det{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:14px;margin:0;border:0;background:none;box-shadow:none;position:relative}
#codexView .bx-det p{margin:0;font-size:calc(12.5px * var(--text-scale,1));color:#c9d2e0;line-height:1.45}
#codexView .bx-det h3{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(22px * var(--text-scale,1));color:#fff}
#codexView .bx-grande{width:100%;height:200px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--bx-linha);font-size:90px;line-height:1;
  background:radial-gradient(70% 70% at 50% 55%,#2a3550,#0d131d)}
#codexView .bx-grande img,#codexView .bx-grande .monster-asset{width:auto;height:auto;max-height:180px;max-width:90%;object-fit:contain;filter:drop-shadow(0 6px 8px #000)}
#codexView .bx-grande.oculto img{filter:brightness(0) drop-shadow(0 0 1px #56627a)}
#codexView .bx-grande.oculto{color:transparent;text-shadow:0 0 0 #1b2230}
.bx-tags{display:flex;gap:6px;flex-wrap:wrap}
.bx-tags span{font-size:calc(10.5px * var(--text-scale,1));font-weight:800;letter-spacing:.08em;border:1px solid var(--bx-linha);border-radius:6px;padding:2px 7px;color:#c9d2e0}
.bx-tags .codex-kind{color:var(--bx-ouro);border-color:#6b5426}
.bx-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.bx-stats div{display:grid;gap:1px;padding:6px 4px;text-align:center;border-radius:8px;background:#0c121c;border:1px solid #243049;min-width:0}
.bx-stats small{font-size:calc(9.5px * var(--text-scale,1));letter-spacing:.12em;color:var(--bx-mudo);font-weight:800}
.bx-stats b{font-size:calc(14px * var(--text-scale,1));color:#fff;font-variant-numeric:tabular-nums}
#codexView .bx-det .codex-drops{margin:0}
.bx-fechar{display:none}
.bx-fundo{display:none}

/* 900-1240: áreas viram fileira em cima; grade e ficha lado a lado */
@media (max-width:1240px){
  .bx-corpo{grid-template-columns:minmax(0,1fr) 340px}
  .bx-rail-card{grid-column:1/-1;position:static;max-height:none;display:block;padding:8px}
  .bx-rail-cab{display:none}
  .bx-rail{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .bx-area{flex:0 0 auto;min-width:150px}
}
/* < 900: uma coluna; a ficha é uma gaveta de baixo */
@media (max-width:899px){
  #codexView.bx-a{padding:8px 8px 90px;gap:8px}
  .bx-topo{gap:8px 12px;padding:10px 12px}
  .bx-titulo h2{font-size:calc(21px * var(--text-scale,1))}
  .bx-cap{min-width:120px}
  .bx-busca{width:100%}.bx-busca input{flex:1;width:auto}
  .bx-corpo{display:block}
  .bx-rail-card{margin-bottom:8px;padding:6px}
  .bx-rail{scrollbar-width:none}.bx-rail::-webkit-scrollbar{display:none}
  .bx-area{min-width:128px;padding:6px 9px}
  .bx-grade-card{padding:10px}
  .bx-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bx-mon .arte{width:74px;height:74px;font-size:40px}
  .bx-detalhe{position:fixed;left:0;right:0;top:auto;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:1300;max-height:calc(100dvh - 140px);
    border-radius:18px 18px 0 0;border-width:1px 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.7);transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  .bx-detalhe.aberto{transform:none;visibility:visible}
  .bx-fundo{display:block;position:fixed;inset:0;z-index:1290;background:rgba(0,0,0,.55)}
  .bx-fundo.hidden{display:none!important}
  .bx-fechar{display:grid;place-items:center;position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--bx-linha);background:#0f141d;color:var(--bx-tinta);font-size:15px}
  #codexView .bx-grande{height:130px}#codexView .bx-grande img,#codexView .bx-grande .monster-asset{max-height:118px}
  .bx-stats b{font-size:calc(12px * var(--text-scale,1))}
}
@media (max-width:380px){ .bx-grade{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .bx-detalhe{transition:none} }