/* ===== css/codex.css ===== */
/* Bestiário e Codex. A janela reaproveita a moldura clássica e as abas do
   ranking: é mais uma "janela de consulta", e não um sistema com visual
   próprio. */

.codex-modal {
    position: fixed;
    z-index: 10085;
    left: 50%;
    top: 50%;
    width: min(720px, calc(100vw - 24px));
    max-height: min(78vh, 720px);
    transform: translate(-50%, -50%);
}
.codex-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(min(78vh, 720px) - 44px);
    padding: 12px;
    overflow: hidden;
    background: #080d0e;
    color: #d0e0df;
}
.codex-tabs { flex: 0 0 auto; }
.codex-summary {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #33484b;
    background: rgba(10, 18, 19, .8);
    color: #a9c3c2;
    font: 11px Arial, sans-serif;
}
.codex-summary b { color: #f0d98c; }
.codex-summary i { color: #7fd8b4; font-style: normal; }
.codex-content { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; }

.codex-group { margin-bottom: 12px; }
.codex-group h4 {
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #2f4245;
    color: #9fd6e4;
    font: 700 11px Georgia, serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.codex-group h4 small { color: #7d9496; font: 700 10px Consolas, monospace; }

/* ---- Bestiário ---- */
.codex-mob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; }
.codex-mob {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 7px;
    padding: 6px;
    border: 1px solid #33484b;
    background: linear-gradient(145deg, rgba(16, 26, 27, .9), rgba(6, 11, 12, .95));
}
/* Criatura nunca enfrentada aparece como silhueta: descobrir faz parte. */
.codex-mob.is-unknown { opacity: .55; }
.codex-mob.is-unknown .codex-mob-art { filter: brightness(0) saturate(0); }
.codex-mob-art { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 1px solid #2b3c3e; background: #0a1213; }
.codex-mob-art img { width: 100%; height: 100%; object-fit: cover; }
.codex-mob-fallback { color: #4d6062; font: 700 20px Georgia, serif; }
.codex-mob-info { display: grid; gap: 2px; min-width: 0; }
.codex-mob-info strong { color: #e7f2f1; font: 700 12px Georgia, serif; }
.codex-mob-info em { color: #d9b463; font: 700 9px Arial, sans-serif; font-style: normal; letter-spacing: .4px; text-transform: uppercase; }
.codex-mob-info small { color: #9db3b3; font: 10px/1.35 Arial, sans-serif; overflow-wrap: anywhere; }
.codex-hint { color: #6f8688 !important; font-style: italic; }
.codex-drops { color: #8fd6b6 !important; }
/* O bônus de conhecimento é a recompensa por completar: merece destaque. */
.codex-bonus { color: #f0d78d !important; font-weight: 700; }

/* ---- Codex de itens ---- */
.codex-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; }
.codex-item {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border: 1px solid #2c3e40;
    background: rgba(8, 14, 15, .85);
}
.codex-item i { color: #3f5254; font: 700 13px Georgia, serif; font-style: normal; }
.codex-item.is-found { border-color: #5c8a72; background: linear-gradient(145deg, rgba(19, 38, 30, .9), rgba(6, 14, 12, .95)); }
.codex-item-icon { display: block; width: 88%; height: 88%; background-repeat: no-repeat; background-position: center; background-size: contain; }

@media (max-width: 700px) {
    .codex-mob-grid { grid-template-columns: 1fr; }
    .codex-modal { width: calc(100vw - 12px); max-height: calc(100vh - 24px); }
}