/* ★ 2026-10-08 · THE CODEX (zyrex-codex.html) */
.zx-tools{ display:grid; grid-template-columns:1fr auto auto; gap:10px; margin:22px 0 12px; }
.zx-tools label{ display:flex; flex-direction:column; gap:5px; margin:0; }
.zx-tools label > span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; color:var(--muted); }
.zx-tools input,.zx-tools select{ font:inherit; font-size:.9rem; color:var(--text); background:var(--panel-3); border:1px solid var(--gold-deep); padding:.6rem .75rem; min-height:44px; border-radius:0; }
.zx-tools input:focus-visible,.zx-tools select:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:1px; }
.zx-tools select option{ background:#0b0915; }
.zx-types{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.zx-tf{ display:inline-flex; align-items:center; gap:7px; padding:.42rem .65rem; cursor:pointer; font-family:var(--tiny); font-size:.5rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); background:var(--panel-3); border:1px solid var(--gold-deep); transition:opacity .2s, border-color .2s; }
.zx-tf i,.zx-type i{ width:9px; height:9px; flex:0 0 9px; background:var(--c); box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 8px -1px var(--c); }
.zx-tf:hover{ border-color:var(--c); color:var(--text); }
.zx-types.picked .zx-tf{ opacity:.45; }
.zx-tf[aria-pressed="true"]{ opacity:1 !important; border-color:var(--c); color:var(--text); background:color-mix(in srgb,var(--c) 18%,var(--panel-3)); }
.zx-tf:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
.zx-count{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--muted); margin:0 0 10px; }
.zx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.zx-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 10px 12px; cursor:pointer; font:inherit; color:var(--text);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 18%,transparent),transparent 65%),var(--panel-3); border:1px solid var(--gold-deep); border-top:2px solid var(--c);
  transition:transform .15s, border-color .15s; }
.zx-card:hover,.zx-card:focus-visible{ transform:translateY(-2px); border-color:var(--c); outline:none; }
.zx-card img{ width:96px; height:96px; object-fit:contain; }
.zx-no{ align-self:flex-start; font-family:var(--mono); font-size:.6rem; color:var(--muted); }
.zx-nm{ font-family:var(--pixel); font-size:1rem; text-align:center; line-height:1.2; }
.zx-ty{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.zx-type{ display:inline-flex; align-items:center; gap:5px; font-family:var(--tiny); font-size:.44rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--gold-deep); padding:.2rem .4rem; margin:0 4px 4px 0; }
.zx-sil{ width:96px; height:96px; display:block; background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 60%);
  -webkit-mask:radial-gradient(circle,#000 55%,transparent 56%); mask:radial-gradient(circle,#000 55%,transparent 56%); }
.zx-sil.big{ width:120px; height:120px; }
.zx-empty{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:42px 20px;
  background:var(--panel-3); border:1px dashed var(--gold-deep); }
.zx-empty p{ margin:0; max-width:52ch; color:var(--text-dim); font-size:.92rem; }
.zx-empty-k{ font-family:var(--tiny); font-size:.55rem !important; letter-spacing:.08em; color:var(--gold-hi) !important; }
.zx-empty-gem{ width:34px; height:34px; margin:6px; transform:rotate(45deg); background:linear-gradient(135deg,#fff,#B87CFF 45%,#3b1f6e);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 22px -2px #B87CFF; animation:zx-pulse 3s ease-in-out infinite; }
@keyframes zx-pulse{ 50%{ filter:brightness(1.4); } }
.zx-none{ grid-column:1 / -1; color:var(--muted); }
.zx-entry{ margin:18px 0 0; padding:20px 22px; background:var(--panel); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); border-top:3px solid var(--c); }
.zx-e-head{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; }
.zx-e-head img{ width:120px; height:120px; object-fit:contain; }
.zx-e-k{ margin:0; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--muted); }
.zx-e-nm{ margin:2px 0 8px; padding:0; border:none; font-family:var(--pixel); font-size:1.7rem; color:var(--text); }
.zx-x{ width:36px; height:36px; font-size:1.1rem; cursor:pointer; color:var(--text); background:var(--panel-3); border:1px solid var(--gold-deep); }
.zx-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0 8px; padding:14px 0; border-block:1px solid var(--gold-deep); }
.zx-facts div{ margin:0; } .zx-facts dt{ font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; color:var(--muted); margin-bottom:4px; } .zx-facts dd{ margin:0; color:var(--text); }
.zx-lore{ color:var(--text-dim); margin:8px 0 0; }
.zx-anatomy{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:20px 0; }
.zx-anatomy div{ background:var(--panel-3); border:1px solid var(--gold-deep); padding:12px 14px; }
.zx-anatomy b{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; color:var(--gold-hi); margin-bottom:6px; font-weight:700; }
.zx-anatomy p{ margin:0; font-size:.84rem; color:var(--text-dim); line-height:1.5; }
@media (max-width:640px){ .zx-tools{ grid-template-columns:1fr 1fr; } .zx-search{ grid-column:1 / -1; } .zx-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } .zx-e-head{ grid-template-columns:80px 1fr auto; } .zx-e-head img,.zx-sil.big{ width:80px; height:80px; } }