/* =====================================================================
   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}
/* Uma rolagem só (22/10): nenhuma coluna tem barra própria no PC. As três grudam no alto (sticky); quando uma é mais
   alta que a tela, codexColunas (game.js) dá a ela um top negativo e ela desce com a página até mostrar o fim. */
.bx-rail-card,.bx-grade-card{position:sticky;top:10px;align-self:start}
.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{position:relative;display:grid;gap:4px;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:var(--cur-mao,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-area .n u{text-decoration:none;margin-right:6px;padding:1px 5px;border-radius:5px;background:#3a2c12;border:1px solid var(--bx-ouro2);color:var(--bx-ouro)}
.bx-area-mais{display:block;text-align:center;font-size:calc(11.5px * var(--text-scale,1));font-weight:800;color:var(--bx-ouro2);border:1px dashed #44516b;background:transparent}
.bx-area-mais:hover{border-color:var(--bx-ouro2)}

/* guia de quem chega (22/10): 4 passos numa faixa; fecha e lembra (localStorage) */
.bx-guia{border:1px solid #4a3c20;border-radius:14px;background:linear-gradient(180deg,#191a1c,#11151d);padding:0}
.bx-guia summary{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:var(--cur-mao,pointer);list-style:none;font-size:calc(12.5px * var(--text-scale,1));font-weight:800;color:var(--bx-ouro)}
.bx-guia summary::-webkit-details-marker{display:none}
.bx-guia-tit{min-width:0;overflow-wrap:anywhere}
.bx-guia-ver,.bx-guia-esc{margin-left:auto;flex:0 0 auto;font-size:calc(11px * var(--text-scale,1));font-weight:700;color:var(--bx-mudo);border:1px solid var(--bx-linha);border-radius:7px;padding:3px 9px}
.bx-guia[open] .bx-guia-ver,.bx-guia:not([open]) .bx-guia-esc{display:none}
.bx-guia ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:2px 16px 12px;list-style:none}
.bx-guia.sem-missoes ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.bx-guia.sem-missoes .bx-guia-mis{display:none}
.bx-guia li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:11px;border:1px solid var(--bx-linha);background:var(--bx-card2);min-width:0}
.bx-guia li>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(#f6d58a,#c8923a);color:#1a1307;font-size:calc(14px * var(--text-scale,1));font-family:var(--font-display,Georgia,serif)}
.bx-guia li div{display:grid;gap:3px;min-width:0}
.bx-guia li strong{font-size:calc(13px * var(--text-scale,1));color:#fff;overflow-wrap:anywhere}
.bx-guia li span{font-size:calc(11.5px * var(--text-scale,1));color:#b9c3d4;line-height:1.4;overflow-wrap:anywhere}
.bx-guia-prontas{display:block;margin:6px 0 0;min-height:34px;padding:6px 14px;border-radius:9px;border:1px solid var(--bx-ouro2);background:linear-gradient(#3a2c12,#251b0b);color:var(--bx-ouro);
  font:inherit;font-size:calc(12px * var(--text-scale,1));font-weight:800;cursor:var(--cur-mao,pointer);min-width:0;white-space:normal;text-align:center;animation:bxPulso 2.4s ease-in-out infinite}
@keyframes bxPulso{50%{box-shadow:0 0 0 3px rgba(246,213,138,.18)}}
.bx-mon.pronta{border-color:var(--bx-ouro2);box-shadow:inset 0 0 0 1px rgba(246,213,138,.25),0 0 12px rgba(224,173,76,.25)}
.bx-pronta{position:absolute;right:5px;top:4px;font-style:normal;font-size:calc(10.5px * var(--text-scale,1));font-weight:800;padding:1px 6px;border-radius:6px;background:#3a2c12;border:1px solid var(--bx-ouro2);color:var(--bx-ouro)}

.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:var(--cur-mao,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;
  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;scrollbar-width:thin;scrollbar-color:rgba(201,154,74,.6) transparent}
  .bx-guia ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .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-grade-card{position:static}
  .bx-guia summary{padding:8px 12px}
  .bx-guia ol,.bx-guia.sem-missoes ol{grid-template-columns:minmax(0,1fr);gap:5px;padding:0 10px 10px}
  .bx-guia li{padding:7px 9px;gap:8px}
  .bx-guia li>b{width:24px;height:24px;font-size:calc(12px * var(--text-scale,1))}
  .bx-guia li strong{font-size:calc(12px * var(--text-scale,1))}
  .bx-guia li span{font-size:calc(11px * var(--text-scale,1));line-height:1.35}
  .bx-guia-prontas{width:100%}
  .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!important;overflow:auto;overscroll-behavior:contain;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} }
/* MISSÕES DO BESTIÁRIO (17/10, SQL 1837): 3 barras (Normal/Hard/Hardcore) e o botão RESGATAR na ficha */
.bx-missoes{margin-top:8px;padding:8px 9px;border:1px solid #3a3322;border-radius:9px;background:rgba(24,19,10,.45)}
.bx-missoes ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.bx-mis{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:3px 8px;min-width:0}
.bx-mis b{font-size:calc(11px * var(--text-scale,1));color:var(--bx-ouro,#f6d58a)}
.bx-mis-1 b{color:#c9a7ff}.bx-mis-2 b{color:#ff8e8e}
.bx-mis-n{justify-self:end;font-size:calc(11px * var(--text-scale,1));color:var(--bx-mudo,#8c95a8);font-variant-numeric:tabular-nums;white-space:nowrap}
.bx-mis i{grid-column:1/-1;display:block;height:6px;border-radius:4px;background:#0b111a;border:1px solid var(--bx-linha,#2d3a52);overflow:hidden}
.bx-mis i u{display:block;height:100%;background:var(--bx-ouro2,#e0ad4c)}
.bx-mis.ok i u{background:#3fae6d}
.bx-mis small,.bx-mis-ok{grid-column:1/-1;font-size:calc(10.5px * var(--text-scale,1));color:var(--bx-mudo,#8c95a8);min-width:0;overflow-wrap:anywhere}
.bx-mis-ok{color:#9fe0b8}
.bx-mis-btn{grid-column:1/-1;min-height:32px;padding:5px 10px;border-radius:8px;border:1px solid var(--bx-ouro2,#e0ad4c);background:linear-gradient(#3a2c12,#251b0b);
  color:var(--bx-ouro,#f6d58a);font:inherit;font-size:calc(11.5px * var(--text-scale,1));font-weight:800;cursor:var(--cur-mao,pointer);min-width:0;white-space:normal}
.bx-mis-resumo{display:block;margin-top:3px;color:var(--bx-ouro2,#e0ad4c)!important;overflow-wrap:anywhere}
.bx-mis-premio{margin:2px 0 4px;font-size:calc(11.5px * var(--text-scale,1));line-height:1.35;color:#e9dcc0;overflow-wrap:anywhere}
.bx-mis-agora{margin:0 0 8px;font-size:calc(11px * var(--text-scale,1));font-weight:700;color:var(--bx-ouro2,#e0ad4c);overflow-wrap:anywhere}