/* PerunOTS codex (30.10.2026): item, monster and NPC pages, hover preview cards and quick search. Same look as the character profile. */
@property --cxp { syntax:'<number>'; inherits:false; initial-value:0; }

/* links with sprites */
.cx-l { display:inline-flex; align-items:center; gap:5px; color:#0b1fa3; text-decoration:none; font-weight:bold; vertical-align:middle; }
.cx-l:hover span { text-decoration:underline; }
.cx-l .cx-sprite { width:24px; height:24px; object-fit:contain; image-rendering:pixelated; flex:none; }
.cx-lm .cx-sprite, .cx-ln .cx-sprite { width:28px; height:28px; }

/* hero */
.cx-hero { --accent:#8a6d3b; position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; margin:0 0 10px; padding:16px 18px; color:#f1e0c6;
	background:radial-gradient(ellipse at 15% 40%, color-mix(in srgb, var(--accent) 50%, #1a120b) 0%, #1a120b 62%), #1a120b; border:2px solid #8a6d3b;
	box-shadow:inset 0 0 0 1px #000, inset 0 0 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); animation:cx-in .35s ease-out both; }
.cx-hero:before, .cx-hero:after { content:''; position:absolute; width:14px; height:14px; border:2px solid #d9b45a; pointer-events:none; }
.cx-hero:before { top:4px; left:4px; border-right:0; border-bottom:0; } .cx-hero:after { bottom:4px; right:4px; border-left:0; border-top:0; }
.cx-shine { position:absolute; top:0; bottom:0; width:90px; left:-140px; background:linear-gradient(100deg, transparent, rgba(255,235,180,.15), transparent); transform:skewX(-18deg); animation:cx-shine 8s ease-in-out infinite; pointer-events:none; }
@keyframes cx-shine { 0%,60% { left:-140px } 100% { left:115% } }
@keyframes cx-in { from { opacity:0; transform:translateY(6px); } }
.cx-stage { position:relative; flex:none; width:96px; height:96px; display:flex; align-items:center; justify-content:center; }
.cx-glow { position:absolute; left:50%; top:50%; width:104px; height:104px; margin:-52px 0 0 -52px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, #fff) 0%, transparent 68%); opacity:.5; animation:cx-pulse 3.6s ease-in-out infinite; }
@keyframes cx-pulse { 50% { opacity:.85; transform:scale(1.08); } }
.cx-stage img { position:relative; z-index:1; image-rendering:pixelated; max-width:64px; max-height:64px; animation:cx-float 3.2s ease-in-out infinite; filter:drop-shadow(0 4px 3px rgba(0,0,0,.6)); }
.cx-stage.big img { max-width:80px; max-height:80px; }
@keyframes cx-float { 50% { transform:translateY(-4px); } }
.cx-main { flex:1; min-width:0; position:relative; z-index:1; }
.cx-kicker { font:bold 10px Verdana,Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; color:#bfa77f; }
.cx-name { font:900 26px Cinzel, Georgia, 'Times New Roman', serif; letter-spacing:1px; color:#ffe3a1; text-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent), 2px 2px 0 #000; line-height:1.15; }
.cx-desc { margin:4px 0 0; font-style:italic; color:#d9c39b; font-size:12px; }
.cx-chips { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 0; }
.cx-chip { display:inline-flex; align-items:center; gap:4px; padding:1px 9px; font:bold 11px Verdana,Arial,sans-serif; background:rgba(0,0,0,.4); border:1px solid rgba(217,180,90,.45); color:#e6d3b5; border-radius:10px; text-decoration:none; }
.cx-chip b { color:#ffe3a1; }
.cx-chip.acc { background:var(--accent); border-color:rgba(255,255,255,.45); color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.cx-chip.warn { background:#7a1f1f; color:#fff; border-color:#c9575a; }
.cx-chip.ok { border-color:#5fd45f; color:#b8f5b8; }
a.cx-chip:hover { border-color:#ffd24a; color:#fff; }
.cx-side { flex:none; position:relative; z-index:1; display:grid; gap:6px; min-width:150px; }
.cx-stat { background:rgba(0,0,0,.45); border:1px solid rgba(217,180,90,.35); padding:5px 10px; text-align:right; }
.cx-stat small { display:block; font:bold 9px Verdana,Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase; color:#bfa77f; }
.cx-stat b { font:900 20px Cinzel, Georgia, serif; color:#ffe3a1; text-shadow:0 0 8px rgba(255,200,90,.35); }

/* meters (stats compared with the other items of the same type) */
.cx-meters { margin:10px 0 0; display:grid; gap:4px; max-width:440px; }
.cx-meter { display:grid; grid-template-columns:62px 1fr 120px; align-items:center; gap:7px; font-size:10px; }
.cx-meter span { color:#bfa77f; font-weight:bold; letter-spacing:.5px; text-transform:uppercase; } .cx-meter em { font-style:normal; color:#f1e0c6; }
.cx-track { position:relative; height:10px; background:rgba(0,0,0,.6); border:1px solid #000; border-radius:5px; box-shadow:inset 0 1px 2px #000; overflow:hidden; }
.cx-track i { position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:linear-gradient(90deg,#b8860b,#ffd24a); animation:cx-fill 1.1s cubic-bezier(.2,.8,.2,1) both; }
.cx-track i.hp { background:linear-gradient(90deg,#8f1d12,#e0452f); } .cx-track i.xp { background:linear-gradient(90deg,#1f3f9c,#4f86f0); }
.cx-track i:after { content:''; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.35), transparent 55%); }
@keyframes cx-fill { from { width:0 !important; } }

/* section titles and cards */
.cx-title { margin:12px 0 6px; padding:4px 10px; background:linear-gradient(90deg,#5f4d41,#3c2f26); color:#ffd24a; font:bold 12px Verdana,Arial,sans-serif; letter-spacing:.5px; border-left:4px solid #d9b45a; display:flex; justify-content:space-between; align-items:center; }
.cx-title small { color:#e6d3b5; font-weight:normal; }
.cx-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cx-box { background:#f1e0c6; border:1px solid #8a7560; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.cx-empty { padding:8px 10px; color:#7a5a3a; font-style:italic; }

/* "trade route" summary */
.cx-deal { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:stretch; margin:0 0 4px; }
.cx-deal > div { background:linear-gradient(#f6e8cf,#e3cfa8); border:2px solid #5f4d41; padding:7px 10px; position:relative; }
.cx-deal small { display:block; font:bold 9px Verdana,Arial,sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:#7a5a3a; }
.cx-deal b.p { display:block; font:900 20px Cinzel, Georgia, serif; color:#3c1e00; }
.cx-deal .buy { border-color:#2e6b2e; } .cx-deal .sell { border-color:#b8860b; }
.cx-deal .arrow { display:flex; align-items:center; justify-content:center; background:none !important; border:0 !important; font:bold 22px Georgia,serif; color:#8a6d3b; padding:0 2px !important; }
.cx-deal .gain { grid-column:1 / -1; text-align:center; background:none; border:1px dashed #8a6d3b; padding:3px; font-size:11px; color:#3c1e00; }

/* tables */
.cx-table { width:100%; border-collapse:collapse; font-size:12px; }
.cx-table th { background:linear-gradient(#e3cfa8,#d4c0a1); color:#5a2800; text-transform:uppercase; font-size:10px; letter-spacing:.6px; padding:5px 8px; text-align:left; }
.cx-table td { padding:4px 8px; border-top:1px solid #d9c39b; vertical-align:middle; }
.cx-table tr:nth-child(even) td { background:rgba(255,255,255,.25); }
.cx-table tbody tr { transition:background .12s; } .cx-table tbody tr:hover td { background:#fff1d4; }
.cx-table tbody tr:hover td:first-child { box-shadow:inset 3px 0 0 #d19a1f; }
.cx-table .num { text-align:right; white-space:nowrap; font-weight:bold; color:#5a2800; }
.cx-table tr.best td { background:#fdf0c4; } .cx-table tr.best .num { color:#2e6b2e; }
.cx-badge { display:inline-block; margin-left:5px; padding:0 6px; border-radius:8px; font:bold 9px Verdana,Arial,sans-serif; letter-spacing:.5px; color:#fff; background:#2e6b2e; vertical-align:middle; text-transform:uppercase; }
.cx-badge.gold { background:#b8860b; } .cx-badge.only { background:#6a3e8e; } .cx-badge.dim { background:#8a7560; }
.cx-muted { color:#7a5a3a; font-size:11px; }

/* loot / drop tiles */
.cx-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:6px; padding:6px; }
.cx-tile { position:relative; display:flex; align-items:center; gap:7px; padding:5px 7px 9px; background:linear-gradient(#f6e8cf,#e3cfa8); border:1px solid #8a7560; text-decoration:none; color:#3c1e00; transition:transform .15s, box-shadow .15s, border-color .15s; animation:cx-pop .4s ease-out both; animation-delay:var(--d,0ms); }
.cx-tile:hover { transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.28); border-color:#d19a1f; z-index:1; }
@keyframes cx-pop { from { opacity:0; transform:translateY(6px) scale(.96); } }
.cx-tile img { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; flex:none; }
.cx-tile .t { min-width:0; } .cx-tile .t b { display:block; font-size:11px; line-height:1.2; color:#0b1fa3; }
.cx-tile .t small { display:block; font-size:10px; color:#7a5a3a; }
.cx-tile .bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(0,0,0,.12); }
.cx-tile .bar i { position:absolute; left:0; top:0; bottom:0; }
.cx-tile.common .bar i { background:#5f8f3e; } .cx-tile.uncommon .bar i { background:#2f7fb3; } .cx-tile.semirare .bar i { background:#8a4fbf; }
.cx-tile.rare .bar i { background:#d19a1f; } .cx-tile.veryrare .bar i { background:#c0392b; }
.cx-tile.rare, .cx-tile.veryrare { border-color:#b8860b; }
.cx-tile.veryrare:after { content:''; position:absolute; inset:-1px; border:1px solid #f5c94a; box-shadow:0 0 8px rgba(245,201,74,.55); pointer-events:none; animation:cx-pulse 3s ease-in-out infinite; }
.cx-legend { display:flex; flex-wrap:wrap; gap:10px; padding:0 8px 6px; font-size:10px; color:#7a5a3a; }
.cx-legend i { display:inline-block; width:10px; height:3px; margin-right:4px; vertical-align:middle; }

/* key facts row */
.cx-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; margin:0 0 6px; }
.cx-facts div { background:#f1e0c6; border:1px solid #8a7560; border-top:3px solid #5f4d41; padding:4px 9px 5px; transition:transform .15s, box-shadow .15s; }
.cx-facts div:hover { transform:translateY(-2px); box-shadow:0 3px 6px rgba(0,0,0,.25); }
.cx-facts small { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.7px; color:#7a5a3a; }
.cx-facts b { display:block; font-size:12px; color:#3c1e00; margin-top:1px; }

/* search bar on the codex pages */
.cx-search { position:relative; margin:0 0 10px; }
.cx-search input { width:100%; box-sizing:border-box; padding:8px 12px 8px 34px; font:13px Verdana,Arial,sans-serif; border:2px solid #5f4d41; background:#fffaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f4d41' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 10px center; }
.cx-search input:focus { outline:0; border-color:#d19a1f; box-shadow:0 0 0 3px rgba(245,201,74,.35); }
.cx-search kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); font:bold 10px Verdana,Arial,sans-serif; color:#7a5a3a; border:1px solid #8a7560; border-radius:3px; padding:0 5px; background:#f1e0c6; }
.cx-results { position:absolute; left:0; right:0; top:100%; z-index:60; max-height:360px; overflow:auto; background:#fffaf0; border:2px solid #5f4d41; border-top:0; box-shadow:0 8px 20px rgba(0,0,0,.35); display:none; }
.cx-results.open { display:block; }
.cx-results a { display:flex; align-items:center; gap:8px; padding:4px 10px; color:#3c1e00; text-decoration:none; font-size:12px; }
.cx-results a img { width:28px; height:28px; object-fit:contain; image-rendering:pixelated; }
.cx-results a em { margin-left:auto; font-style:normal; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#fff; background:#8a7560; border-radius:8px; padding:0 6px; }
.cx-results a em.item { background:#2f7fb3; } .cx-results a em.monster { background:#8f1d12; } .cx-results a em.npc { background:#2e6b2e; }
.cx-results a.on, .cx-results a:hover { background:#f6e1b0; }

/* hover preview card */
.cx-pop { position:fixed; z-index:9999; width:260px; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; color:#f1e0c6; font:11px Verdana,Arial,sans-serif;
	background:radial-gradient(ellipse at 20% 20%, #3a2a1a 0%, #1a120b 70%); border:2px solid #8a6d3b; box-shadow:0 8px 24px rgba(0,0,0,.55), inset 0 0 0 1px #000; padding:9px 10px; }
.cx-pop.show { opacity:1; transform:none; }
.cx-pop .h { display:flex; align-items:center; gap:8px; margin:0 0 6px; }
.cx-pop .h img { width:36px; height:36px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.cx-pop .h b { display:block; font:bold 13px Georgia,serif; color:#ffe3a1; } .cx-pop .h small { color:#bfa77f; }
.cx-pop dl { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; }
.cx-pop dt { color:#bfa77f; } .cx-pop dd { margin:0; color:#fff; text-align:right; font-weight:bold; }
.cx-pop .f { margin-top:6px; padding-top:5px; border-top:1px solid rgba(217,180,90,.3); color:#d9c39b; font-size:10px; }

@media (max-width:640px) {
	.cx-hero { flex-wrap:wrap; justify-content:center; text-align:center; } .cx-chips { justify-content:center; }
	.cx-side { grid-template-columns:1fr 1fr; width:100%; } .cx-grid2, .cx-deal { grid-template-columns:1fr; } .cx-deal .arrow { display:none; }
	.cx-meter { grid-template-columns:52px 1fr 90px; }
}
@media (prefers-reduced-motion: reduce) { .cx-hero, .cx-hero *, .cx-tile, .cx-track i { animation:none !important; } }

/* category tabs (items, codex lists) */
.cx-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; }
.cx-tabs a { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 4px; background:linear-gradient(#f6e8cf,#e3cfa8); border:1px solid #8a7560; color:#3c1e00; text-decoration:none; font:bold 11px Verdana,Arial,sans-serif; transition:transform .12s, border-color .12s, box-shadow .12s; }
.cx-tabs a img { width:24px; height:24px; object-fit:contain; image-rendering:pixelated; }
.cx-tabs a em { font-style:normal; font-weight:normal; font-size:9px; color:#7a5a3a; background:rgba(0,0,0,.08); border-radius:7px; padding:0 5px; }
.cx-tabs a:hover { transform:translateY(-1px); border-color:#d19a1f; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.cx-tabs a.on { background:linear-gradient(90deg,#5f4d41,#3c2f26); color:#ffd24a; border-color:#d9b45a; }
.cx-tabs a.on em { color:#ffe3a1; background:rgba(255,255,255,.12); }

/* category cards */
.cx-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.cx-cat { position:relative; display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:8px 10px; text-decoration:none !important;
	background:linear-gradient(#f6e8cf,#e3cfa8); border:2px solid #5f4d41; color:#3c1e00; transition:transform .15s, box-shadow .15s, border-color .15s; animation:cx-pop .4s ease-out both; animation-delay:var(--d,0ms); overflow:hidden; }
.cx-cat img { grid-row:1 / 3; width:40px; height:40px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); transition:transform .2s; }
.cx-cat b { font:bold 13px Verdana,Arial,sans-serif; } .cx-cat small { font-size:10px; color:#7a5a3a; line-height:1.3; }
.cx-cat:hover { transform:translateY(-3px); border-color:#d19a1f; box-shadow:0 5px 12px rgba(0,0,0,.3), 0 0 0 1px #f5c94a; }
.cx-cat:hover img { transform:scale(1.15) rotate(-5deg); }
.cx-cat:after { content:''; position:absolute; top:0; bottom:0; width:40px; left:-60px; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); transition:left .5s; }
.cx-cat:hover:after { left:110%; }

/* sortable tables */
.cx-filter { padding:6px; border-bottom:1px solid #d9c39b; }
.cx-filter input { width:100%; box-sizing:border-box; padding:5px 9px; font:12px Verdana,Arial,sans-serif; border:1px solid #8a7560; background:#fffaf0; }
.cx-filter input:focus { outline:0; border-color:#d19a1f; box-shadow:0 0 0 2px rgba(245,201,74,.35); }
.cx-sort th[data-t] { cursor:pointer; user-select:none; white-space:nowrap; }
.cx-sort th[data-t]:hover { color:#000; }
.cx-sort th[data-t]:after { content:'\2195'; margin-left:4px; opacity:.35; }
.cx-sort th.asc:after { content:'\25B2'; opacity:1; } .cx-sort th.desc:after { content:'\25BC'; opacity:1; }
.cx-table td.ic { width:36px; text-align:center; padding:2px 4px; } .cx-table td.ic img { width:32px; height:32px; object-fit:contain; image-rendering:pixelated; }
.cx-table td.big { font:bold 14px Verdana,Arial,sans-serif; color:#3c1e00; }
.cx-table td.bon span { display:inline-block; margin:1px 3px 1px 0; padding:0 6px; border-radius:8px; background:rgba(95,77,65,.12); font-size:10px; color:#5a2800; white-space:nowrap; }
.cx-table td.bon span.v { background:#6a3e8e; color:#fff; }
.cx-table td.bon b { color:#3c1e00; } .cx-table td.bon span.v b { color:#fff; }