/* ============================================================
   codex.css — the Codex/Bestiary overlay + the lore title card.
   Reuses the global arcane palette.
   ============================================================ */

#codex { position: fixed; inset: 0; pointer-events: none; z-index: 61; }
.cdx-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.28s ease; pointer-events: auto; }
.cdx-modal.is-open { opacity: 1; }
.cdx-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(18,12,38,0.74), rgba(4,3,9,0.92)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }

.cdx-panel {
  position: relative; width: min(900px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,17,42,0.97), rgba(11,8,22,0.98));
  border: 1px solid rgba(123,108,246,0.3); border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 60px rgba(123,108,246,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(18px) scale(0.98); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); outline: none; overflow: hidden;
}
.cdx-modal.is-open .cdx-panel { transform: translateY(0) scale(1); }

.cdx-head { display: flex; align-items: center; padding: 16px 22px 12px; border-bottom: 1px solid rgba(123,108,246,0.16); }
.cdx-sub { font-family: var(--font-body, serif); font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--arcane-bright, #b3a7ff); opacity: 0.8; }
.cdx-title { margin: 2px 0 0; font-family: var(--font-display, serif); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--gold, #e9c46a); text-shadow: 0 0 24px rgba(233,196,106,0.3); }
.cdx-close { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; pointer-events: auto; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--ink, #e8e2ff); font-size: 1rem; }
.cdx-close:hover { background: rgba(255,84,112,0.16); border-color: rgba(255,84,112,0.5); }

.cdx-tabs { display: flex; gap: 6px; padding: 12px 22px 0; }
.cdx-tab { font-family: var(--font-display, serif); font-size: 0.8rem; letter-spacing: 0.08em; padding: 8px 18px; border-radius: 9px 9px 0 0; cursor: pointer; pointer-events: auto; color: var(--ink-dim, #9a8fc0); border: 1px solid transparent; background: rgba(255,255,255,0.03); transition: color 0.15s, background 0.15s; }
.cdx-tab:hover { color: var(--ink, #e8e2ff); }
.cdx-tab.is-active { color: var(--gold, #e9c46a); background: rgba(233,196,106,0.1); border-color: rgba(233,196,106,0.3); border-bottom-color: transparent; }

.cdx-body { padding: 16px 22px 22px; overflow-y: auto; }
.cdx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cdx-card { --c: var(--gold, #e9c46a); display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, rgba(12,9,24,0.6)), rgba(10,7,18,0.5)); }
.cdx-card-head { display: flex; align-items: center; gap: 9px; }
.cdx-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex-shrink: 0; }
.cdx-name { font-family: var(--font-display, serif); font-weight: 600; font-size: 0.92rem; color: var(--ink, #e8e2ff); }
.cdx-tag { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.cdx-desc { font-family: var(--font-body, serif); font-size: 0.76rem; line-height: 1.32; color: var(--ink-dim, #9a8fc0); }
.cdx-branches { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 7px; }
.cdx-branch { display: flex; flex-direction: column; }
.cdx-branch-name { font-family: var(--font-display, serif); font-size: 0.74rem; font-weight: 600; color: var(--c); }
.cdx-branch-desc { font-family: var(--font-body, serif); font-size: 0.68rem; color: var(--ink-dim, #9a8fc0); line-height: 1.25; }

.cdx-foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.cdx-foe { --c: #b3a7ff; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025); }
.cdx-foe.is-boss { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 9%, rgba(10,7,18,0.5)); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 18%, transparent); }
.cdx-foe-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex-shrink: 0; }
.cdx-foe-top { display: flex; align-items: baseline; gap: 9px; }
.cdx-foe-name { font-family: var(--font-display, serif); font-weight: 600; font-size: 0.86rem; color: var(--ink, #e8e2ff); }
.cdx-foe-tier { font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.cdx-foe-traits { font-family: var(--font-body, serif); font-size: 0.7rem; color: var(--ink-dim, #9a8fc0); line-height: 1.3; }

.cdx-section { display: flex; align-items: center; gap: 12px; margin: 16px 0 11px; }
.cdx-section:first-child { margin-top: 0; }
.cdx-section-lbl { font-family: var(--font-display, serif); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold, #e9c46a); white-space: nowrap; }
.cdx-section-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(233,196,106,0.3), transparent); }
.cdx-rx { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 7px; }
.cdx-rx-row { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.cdx-rx-lhs { display: flex; align-items: center; gap: 5px; }
.cdx-rx-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.cdx-rx-plus { color: var(--ink-dim, #9a8fc0); font-size: 0.8rem; }
.cdx-rx-rhs { display: flex; flex-direction: column; }
.cdx-rx-name { font-family: var(--font-display, serif); font-weight: 600; font-size: 0.8rem; color: var(--ink, #e8e2ff); }
.cdx-rx-desc { font-family: var(--font-body, serif); font-size: 0.68rem; color: var(--ink-dim, #9a8fc0); }

/* ============================================================
   Lore title card (LoreCard.js)
   ============================================================ */
#lorecard { position: fixed; top: 16%; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 40; opacity: 0; }
#lorecard.is-show { animation: lore-card 4.4s ease forwards; }
.lc-inner { text-align: center; max-width: 640px; padding: 0 24px; }
.lc-rule { height: 1px; margin: 10px auto; width: 120px; background: linear-gradient(90deg, transparent, rgba(233,196,106,0.6), transparent); }
.lc-name { font-family: var(--font-display, serif); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold, #e9c46a); text-shadow: 0 0 28px rgba(233,196,106,0.45), 0 2px 8px rgba(0,0,0,0.6); }
.lc-text { font-family: var(--font-body, serif); font-style: italic; font-size: 0.95rem; color: var(--ink, #e8e2ff); margin-top: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
@keyframes lore-card {
  0% { opacity: 0; transform: translateY(10px); }
  14% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}