/* Item Codex. Mirrors the iOS screen: a plain header, glass chips, bare tiles. */
.item-codex { --codex-ink:#223127; --codex-muted:#748378; --codex-faint:rgba(34,49,39,.06); --codex-ghost:rgba(34,49,39,.035); --codex-glass:rgba(255,255,255,.62); --codex-glass-line:rgba(255,255,255,.85); --codex-gold:#d68f38; --codex-indigo:#5856d6; color:var(--codex-ink); }
html[data-theme="dark"] .item-codex { --codex-ink:#eef0f5; --codex-muted:#a9b1bd; --codex-faint:rgba(255,255,255,.07); --codex-ghost:rgba(255,255,255,.04); --codex-glass:rgba(255,255,255,.07); --codex-glass-line:rgba(255,255,255,.1); }

.item-codex-progress { display:grid; gap:10px; margin:0 0 20px; }
.item-codex-progress > div { display:flex; align-items:baseline; gap:7px; }
.item-codex-progress strong { font:900 44px/1 var(--serif); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.item-codex-progress span { color:var(--codex-muted); font-size:14px; }
.item-codex-progress b { margin-left:auto; color:var(--codex-gold); font-size:16px; font-variant-numeric:tabular-nums; }
.item-codex-progress > i { display:block; height:6px; overflow:hidden; border-radius:99px; background:var(--codex-faint); }
.item-codex-progress > i > i { display:block; height:100%; min-width:6px; border-radius:inherit; background:var(--codex-gold); }

.item-codex-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.item-codex-segments { display:flex; padding:3px; border-radius:11px; background:var(--codex-faint); }
.item-codex-segments button { min-height:32px; padding:0 14px; border:0; border-radius:8px; background:transparent; color:var(--codex-ink); font:600 13px var(--sans, inherit); }
.item-codex-segments button.active { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.1); }
html[data-theme="dark"] .item-codex-segments button.active { background:#5a5e69; }
.item-codex-tools input { flex:1 1 200px; max-width:280px; min-height:38px; padding:0 13px; border:1px solid transparent; border-radius:11px; background:var(--codex-faint); color:var(--codex-ink); font:inherit; font-size:14px; }
.item-codex-tools input:focus-visible { outline:2px solid var(--codex-indigo); outline-offset:1px; }

.item-codex-chips { display:flex; gap:8px; margin:0 -4px 22px; padding:2px 4px 6px; overflow-x:auto; scrollbar-width:none; }
.item-codex-chips::-webkit-scrollbar { display:none; }
.item-codex-chip { flex:none; min-height:36px; padding:0 15px; border:1px solid var(--codex-glass-line); border-radius:99px; background:var(--codex-glass); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 2px 8px rgba(0,0,0,.05); color:var(--codex-ink); font-size:14px; font-weight:600; }
.item-codex-chip:hover { border-color:rgba(88,86,214,.35); }
.item-codex-chip.active { border-color:transparent; background:var(--codex-indigo); color:#fff; }

.item-codex-section { margin-bottom:22px; }
.item-codex-section > header,.item-codex-block > header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.item-codex-section h2,.item-codex-block h2 { margin:0; font-size:17px; font-weight:700; }
.item-codex-section > header span,.item-codex-block > header span { color:var(--codex-muted); font-size:14px; font-variant-numeric:tabular-nums; }
.item-codex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px 10px; }
@media(max-width:620px) { .item-codex-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

.item-codex-tile { display:grid; gap:6px; min-width:0; padding:0; border:0; background:none; color:inherit; text-align:center; }
.item-codex-slot { display:grid; place-items:center; aspect-ratio:1; border-radius:16px; background:var(--codex-faint); transition:transform .15s ease, background .15s ease; }
button.item-codex-tile:hover .item-codex-slot { background:rgba(88,86,214,.09); }
button.item-codex-tile:active .item-codex-slot { transform:scale(.96); }
button.item-codex-tile:focus-visible { outline:none; }
button.item-codex-tile:focus-visible .item-codex-slot { outline:2px solid var(--codex-indigo); outline-offset:2px; }
.item-codex-slot img { width:78%; height:78%; object-fit:contain; }
.item-codex-tile.is-undiscovered .item-codex-slot { background:var(--codex-ghost); }
.item-codex-silhouette { width:72%; height:72%; background:currentColor; opacity:.14; -webkit-mask:var(--silhouette) center/contain no-repeat; mask:var(--silhouette) center/contain no-repeat; }
.item-codex-name { display:-webkit-box; min-height:26px; overflow:hidden; font-size:11px; font-weight:500; line-height:1.2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }

.item-codex-empty { display:grid; justify-items:center; gap:6px; padding:40px 0; color:var(--codex-muted); text-align:center; }
.item-codex-empty img { width:48px; height:48px; opacity:.6; }
html[data-theme="dark"] .item-codex-empty img,html[data-theme="dark"] .item-codex-stats img,html[data-theme="dark"] .item-codex-property img[src*="properties"],html[data-theme="dark"] .item-codex-property img[src*="requirement"] { filter:brightness(0) invert(1); opacity:.85; }
.item-codex-empty strong { color:var(--codex-ink); font-size:17px; }

/* Detail */
.item-codex-detail { display:grid; justify-items:center; max-width:560px; margin:0 auto; }
.item-codex-back { justify-self:start; margin-bottom:6px; padding:6px 0; border:0; background:none; color:var(--codex-indigo); font-size:15px; font-weight:600; }
html[data-theme="dark"] .item-codex-back { color:#a5a4ff; }
.item-codex-hero { position:relative; display:grid; place-items:center; width:200px; height:150px; }
.item-codex-glow { position:absolute; top:50%; left:50%; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--codex-accent) 26%, transparent) 2%, transparent 70%); transform:translate(-50%,-50%); }
html[data-theme="dark"] .item-codex-glow { background:radial-gradient(circle, color-mix(in srgb, var(--codex-accent) 38%, transparent) 2%, transparent 70%); }
.item-codex-shadow { position:absolute; bottom:6px; width:80px; height:12px; border-radius:50%; background:rgba(0,0,0,.12); filter:blur(5px); }
html[data-theme="dark"] .item-codex-shadow { background:rgba(0,0,0,.35); }
.item-codex-hero img { position:relative; width:112px; height:112px; object-fit:contain; }
.item-codex-detail h1 { margin:8px 0 8px; font-size:24px; font-weight:700; line-height:1.15; text-align:center; text-wrap:balance; }
.item-codex-tag { padding:3px 9px; border-radius:99px; background:color-mix(in srgb, var(--codex-accent) 15%, transparent); color:var(--codex-accent); font-size:11px; font-weight:700; }
.item-codex-description { max-width:440px; margin:10px 0 0; color:var(--codex-muted); font-size:14px; line-height:1.45; text-align:center; text-wrap:pretty; }

.item-codex-stats { display:flex; width:100%; margin:24px 0; padding:12px 4px; border:1px solid var(--codex-glass-line); border-radius:20px; background:var(--codex-glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 4px 18px rgba(0,0,0,.05); }
.item-codex-stats > div { display:grid; flex:1; justify-items:center; gap:3px; min-width:0; padding:0 4px; }
.item-codex-stats > div + div { border-left:1px solid var(--codex-faint); }
.item-codex-stats span { display:flex; align-items:center; gap:4px; }
.item-codex-stats img { width:16px; height:16px; }
.item-codex-stats b { overflow:hidden; font-size:14px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.item-codex-stats small { overflow:hidden; color:var(--codex-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

.item-codex-block { width:100%; margin-bottom:24px; }
.item-codex-block > header { padding:0 4px; }
.item-codex-properties { display:grid; gap:10px; padding:0 4px; }
.item-codex-property { display:flex; align-items:center; gap:10px; }
.item-codex-property img { width:18px; height:18px; }
.item-codex-property span { color:var(--codex-muted); font-size:14px; }
.item-codex-property b { margin-left:auto; font-size:16px; font-variant-numeric:tabular-nums; }

.item-codex-sources { display:grid; padding:0 14px; border:1px solid var(--codex-glass-line); border-radius:20px; background:var(--codex-glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 4px 18px rgba(0,0,0,.05); }
.item-codex-sources > button { display:grid; grid-template-columns:36px minmax(0,1fr) auto 10px; align-items:center; gap:12px; min-height:52px; padding:0; border:0; background:none; color:inherit; font-size:15px; text-align:left; }
.item-codex-sources > button + button { border-top:1px solid var(--codex-faint); }
.item-codex-sources > button > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-codex-sources small { color:var(--codex-muted); font-size:14px; font-variant-numeric:tabular-nums; }
.item-codex-sources b { color:var(--codex-muted); opacity:.6; }
.item-codex-source-art img { display:block; width:36px; height:36px; object-fit:contain; }
.item-codex-source-art.is-unseen { opacity:.5; }
.item-codex-sources > .item-codex-more { display:block; min-height:46px; color:var(--codex-indigo); font-size:15px; font-weight:600; text-align:center; }
html[data-theme="dark"] .item-codex-sources > .item-codex-more { color:#a5a4ff; }
.item-codex-footnote { margin:0; color:var(--codex-muted); font-size:12px; text-align:center; }