/* ═══════════════════════════════════════════════════════
   NoxusMU — Achievements Codex (scoped)
   All rules under .nx-codex to avoid bleed.
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Cinzel+Decorative:wght@700;900&family=Outfit:wght@300;400;500;600;700&display=swap');

.nx-codex {
  --nx-bg: #07060b;
  --nx-bg-2: #0d0a15;
  --nx-panel: #12101b;
  --nx-panel-2: #1a1526;
  --nx-border: #2a2138;
  --nx-border-light: #4a3968;
  --nx-gold: #d4a017;
  --nx-gold-light: #f5c842;
  --nx-gold-deep: #8a6a10;
  --nx-violet: #7b3fe4;
  --nx-violet-glow: #b070ff;
  --nx-violet-deep: #3b1d6d;
  --nx-text: #d6cfe4;
  --nx-text-dim: #8a80a0;
  --nx-text-mute: #5a5470;

  --r-common: #b8b0c8;
  --r-rare: #4aa8ff;
  --r-epic: #b070ff;
  --r-legend: #f5c842;

  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--nx-bg);
  color: var(--nx-text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient background: subtle rune glow, no glassmorphism */
.nx-codex::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(123,63,228,0.10), transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 90%, rgba(212,160,23,0.06), transparent 60%),
    radial-gradient(circle at 50% 0%, rgba(176,112,255,0.06), transparent 45%),
    #07060b;
}

.nx-codex-main {
  position: relative;
  z-index: 1;
  padding: 96px 24px 60px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ─────────────────────────── HEADER ─────────────────────────── */
.nx-header {
  position: relative;
  padding: 40px 40px 32px;
  border: 1px solid var(--nx-border);
  background:
    linear-gradient(180deg, rgba(26,21,38,0.85), rgba(13,10,21,0.95)),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(123,63,228,0.18), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(212,160,23,0.15), 0 20px 60px rgba(0,0,0,0.6);
}

.nx-header::before, .nx-header::after {
  content: ''; position: absolute; width: 56px; height: 56px;
  border: 1px solid var(--nx-gold); pointer-events: none;
}
.nx-header::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.nx-header::after  { top: -1px; right: -1px; border-left: none; border-bottom: none; }

.nx-header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}

.nx-header-left { min-width: 0; }

.nx-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 5px;
  color: var(--nx-violet-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nx-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
  margin: 0 0 12px;
  background: linear-gradient(180deg, #fbe089 0%, #d4a017 55%, #7a5808 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 40px rgba(212,160,23,0.15);
}

.nx-char {
  font-family: 'Cinzel', serif;
  color: var(--nx-text);
  font-size: 1rem;
  letter-spacing: 1.5px;
}
.nx-char-class {
  color: var(--nx-violet-glow);
  margin-left: 6px;
}
.nx-char-sep { color: var(--nx-text-mute); margin: 0 10px; }

.nx-header-progress {
  margin-top: 22px;
  max-width: 640px;
}

.nx-progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
}
.nx-progress-row-count { color: var(--nx-gold); letter-spacing: 1px; }
.nx-progress-row-pct { color: var(--nx-violet-glow); font-weight: 700; }

.nx-bar {
  height: 10px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--nx-border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
}
.nx-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6a2ecc 0%, #b070ff 55%, #f5c842 100%);
  box-shadow: 0 0 12px rgba(176,112,255,0.5);
  transition: width 0.5s ease;
}

.nx-header-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px;
}
.nx-ap-tile {
  min-width: 220px;
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(20,15,32,0.95), rgba(10,7,18,0.95));
  border: 1px solid var(--nx-gold-deep);
  position: relative;
  text-align: right;
}
.nx-ap-tile::before, .nx-ap-tile::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--nx-gold); pointer-events: none;
}
.nx-ap-tile::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.nx-ap-tile::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.nx-ap-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--nx-text-dim);
  text-transform: uppercase;
}
.nx-ap-val {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.2rem;
  color: var(--nx-gold-light);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 0 24px rgba(212,160,23,0.35);
}

/* Controls (search + filter) */
.nx-controls {
  display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap;
}
.nx-search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--nx-border);
}
.nx-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--nx-text); font-family: 'Outfit', sans-serif; font-size: 0.92rem;
  letter-spacing: 0.5px;
}
.nx-search input::placeholder { color: var(--nx-text-mute); }
.nx-search svg { color: var(--nx-text-dim); flex-shrink: 0; }

.nx-filter-group {
  display: flex; gap: 0;
  border: 1px solid var(--nx-border);
  background: rgba(0,0,0,0.4);
}
.nx-filter-btn {
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--nx-text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.nx-filter-btn + .nx-filter-btn { border-left: 1px solid var(--nx-border); }
.nx-filter-btn:hover { color: var(--nx-gold-light); background: rgba(212,160,23,0.04); }
.nx-filter-btn.active {
  color: var(--nx-gold-light);
  background: linear-gradient(180deg, rgba(212,160,23,0.14), rgba(212,160,23,0.04));
  text-shadow: 0 0 10px rgba(212,160,23,0.4);
}

/* ─────────────────────────── RECENT ─────────────────────────── */
.nx-recent {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid var(--nx-border);
  background: linear-gradient(180deg, rgba(20,15,32,0.7), rgba(10,7,18,0.85));
  position: relative;
}
.nx-recent-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 4px;
  color: var(--nx-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.nx-recent-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--nx-gold-deep), transparent);
}
.nx-recent-row {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px;
}
.nx-recent-row::-webkit-scrollbar { height: 4px; }
.nx-recent-row::-webkit-scrollbar-thumb { background: var(--nx-border); }

.nx-recent-item {
  flex-shrink: 0;
  min-width: 200px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--nx-border);
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  transition: all 0.2s;
}
.nx-recent-item:hover {
  border-color: var(--nx-gold-deep);
  background: rgba(212,160,23,0.05);
  transform: translateY(-1px);
}
.nx-recent-item-meta { min-width: 0; }
.nx-recent-item-name {
  font-family: 'Cinzel', serif;
  color: var(--nx-gold-light);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.nx-recent-item-date {
  font-size: 0.7rem; color: var(--nx-text-mute);
  margin-top: 2px; letter-spacing: 1px;
}

/* ─────────────────────────── BODY LAYOUT ─────────────────────────── */
.nx-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin-top: 28px;
}

/* Sidebar categories */
.nx-side {
  position: sticky;
  top: 90px;
  align-self: start;
  padding: 8px;
  border: 1px solid var(--nx-border);
  background: linear-gradient(180deg, rgba(20,15,32,0.9), rgba(10,7,18,0.95));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.nx-side::-webkit-scrollbar { width: 4px; }
.nx-side::-webkit-scrollbar-thumb { background: var(--nx-border-light); }

.nx-side-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--nx-text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.nx-side-btn:hover {
  color: var(--nx-gold-light);
  background: rgba(212,160,23,0.04);
}
.nx-side-btn.active {
  color: var(--nx-gold-light);
  background: linear-gradient(90deg, rgba(212,160,23,0.12), transparent);
  border-left-color: var(--nx-gold);
  text-shadow: 0 0 10px rgba(212,160,23,0.35);
}
.nx-side-count {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  color: var(--nx-text-mute);
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border: 1px solid var(--nx-border);
  letter-spacing: 0.5px;
}
.nx-side-btn.active .nx-side-count {
  color: var(--nx-gold);
  border-color: var(--nx-gold-deep);
}

/* Category panels */
.nx-panels { min-width: 0; display: flex; flex-direction: column; gap: 32px; }

.nx-panel {
  padding: 24px 24px 28px;
  border: 1px solid var(--nx-border);
  background:
    linear-gradient(180deg, rgba(18,14,28,0.7), rgba(10,7,18,0.9));
  position: relative;
}
.nx-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 3l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z' stroke='%232a2138' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  opacity: 0.15; pointer-events: none;
}
.nx-panel-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  position: relative;
}
.nx-panel-head h2 {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 4px;
  color: var(--nx-gold-light);
  margin: 0;
  text-shadow: 0 0 20px rgba(212,160,23,0.25);
}
.nx-panel-head-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--nx-gold), var(--nx-gold-deep) 20%, transparent);
  position: relative;
}
.nx-panel-head-line::after {
  content: '◆'; position: absolute; right: 0; top: 50%;
  transform: translate(50%, -50%);
  color: var(--nx-gold); font-size: 10px;
}
.nx-panel-count {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--nx-text-dim);
  letter-spacing: 2px;
}
.nx-panel-count strong { color: var(--nx-gold-light); }

/* Grid */
.nx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 20px 18px;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────── EMBLEM ─────────────────────────── */
.nx-em {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px 4px 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  transition: transform 0.25s ease;
}
.nx-em:hover { transform: translateY(-3px); }

.nx-em-frame {
  position: relative;
  width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.3s, transform 0.3s;
}

/* Ornate ring behind emblem */
.nx-em-frame::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(212,160,23,0.4), rgba(123,63,228,0.3), rgba(212,160,23,0.4),
    rgba(123,63,228,0.3), rgba(212,160,23,0.4));
  filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s;
}
.nx-em-frame::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,0.4);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(0,0,0,0.7);
  background:
    radial-gradient(circle at 50% 35%, rgba(212,160,23,0.15), transparent 60%),
    radial-gradient(circle at 50% 65%, rgba(123,63,228,0.12), transparent 70%),
    radial-gradient(circle at 50% 50%, #14101f, #050308 90%);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.nx-em-icon {
  position: relative; z-index: 2;
  color: var(--nx-gold-light);
  filter: drop-shadow(0 0 6px rgba(212,160,23,0.5));
  transition: color 0.3s, filter 0.3s, transform 0.3s;
}

.nx-em-name {
  position: relative; z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: var(--nx-text);
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.5px;
  max-width: 118px;
  word-wrap: break-word;
}

/* rarity ring color via data-attr */
.nx-em[data-rarity="common"]    .nx-em-frame::after { border-color: rgba(184,176,200,0.4); }
.nx-em[data-rarity="rare"]      .nx-em-frame::after { border-color: rgba(74,168,255,0.55); }
.nx-em[data-rarity="epic"]      .nx-em-frame::after { border-color: rgba(176,112,255,0.6); }
.nx-em[data-rarity="legendary"] .nx-em-frame::after {
  border-color: rgba(245,200,66,0.75);
  box-shadow:
    inset 0 0 14px rgba(245,200,66,0.15),
    inset 0 0 0 1px rgba(0,0,0,0.6);
}

/* unlocked hover */
.nx-em[data-unlocked="true"]:hover .nx-em-frame { transform: scale(1.06); }
.nx-em[data-unlocked="true"]:hover .nx-em-frame::before { opacity: 0.9; animation: nx-spin 6s linear infinite; }
.nx-em[data-unlocked="true"]:hover .nx-em-icon { filter: drop-shadow(0 0 12px rgba(212,160,23,0.9)); }
.nx-em[data-unlocked="true"]:hover .nx-em-name { color: var(--nx-gold-light); }

@keyframes nx-spin { to { transform: rotate(360deg); } }

/* locked state */
.nx-em[data-unlocked="false"] .nx-em-icon {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.52;
}
.nx-em[data-unlocked="false"] .nx-em-frame::after {
  background:
    radial-gradient(circle at 50% 50%, #0d0b13, #050308 90%);
}
.nx-em[data-unlocked="false"] .nx-em-name { color: var(--nx-text-mute); }
.nx-em[data-unlocked="false"]:hover .nx-em-icon { filter: grayscale(0.6) brightness(0.75); opacity: 0.75; }
.nx-em[data-unlocked="false"]:hover .nx-em-name { color: var(--nx-text-dim); }

/* Small indicators */
.nx-em-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f5c842, #a07a10);
  border: 1px solid #6a4808;
  color: #1a1005;
  box-shadow: 0 0 10px rgba(245,200,66,0.6);
  z-index: 3;
}
.nx-em-badge.locked {
  background: linear-gradient(180deg, #3a3448, #1c1826);
  border-color: #0a0812;
  color: var(--nx-text-mute);
  box-shadow: none;
}

/* small progress dot for in-progress */
.nx-em-prog {
  position: absolute; z-index: 3;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-family: 'Cinzel', serif;
  color: var(--nx-violet-glow);
  background: #0a0812;
  border: 1px solid var(--nx-border);
  padding: 1px 6px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ─────────────────────────── EMPTY / LOADING / ERROR ─────────────────────────── */
.nx-status {
  padding: 60px 24px;
  text-align: center;
  font-family: 'Cinzel', serif;
  color: var(--nx-text-dim);
  letter-spacing: 2px;
}
.nx-status.error { color: #ef6a6a; }
.nx-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px 18px; }
.nx-skeleton {
  height: 130px;
  background: linear-gradient(90deg, #14101f, #1a1526, #14101f);
  background-size: 200% 100%;
  animation: nx-shimmer 1.6s linear infinite;
  border: 1px solid var(--nx-border);
}
@keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─────────────────────────── INSPECT MODAL ─────────────────────────── */
.nx-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2,1,5,0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: flex-end;
  animation: nx-fade 0.2s ease-out;
}
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }

.nx-inspect {
  width: 440px; max-width: 92vw;
  height: 100vh;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(20,14,34,0.98), rgba(8,5,14,0.99)),
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(123,63,228,0.25), transparent 70%);
  border-left: 1px solid var(--nx-gold-deep);
  box-shadow: -30px 0 80px rgba(0,0,0,0.7);
  animation: nx-slide 0.3s cubic-bezier(0.2,0.7,0.3,1);
  padding: 30px 28px 40px;
  position: relative;
}
@keyframes nx-slide { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.nx-inspect-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--nx-border);
  color: var(--nx-text-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.nx-inspect-close:hover { color: var(--nx-gold-light); border-color: var(--nx-gold-deep); }

.nx-inspect-emblem {
  width: 168px; height: 168px;
  margin: 20px auto 24px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.nx-inspect-emblem::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(212,160,23,0.5), rgba(123,63,228,0.4),
    rgba(212,160,23,0.5), rgba(123,63,228,0.4));
  filter: blur(4px);
  animation: nx-spin 12s linear infinite;
}
.nx-inspect-emblem::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(212,160,23,0.65);
  background:
    radial-gradient(circle at 50% 35%, rgba(212,160,23,0.2), transparent 60%),
    radial-gradient(circle at 50% 65%, rgba(123,63,228,0.18), transparent 70%),
    radial-gradient(circle at 50% 50%, #14101f, #050308 90%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.7);
}
.nx-inspect-emblem svg {
  position: relative; z-index: 2;
  color: var(--nx-gold-light);
  filter: drop-shadow(0 0 16px rgba(212,160,23,0.7));
}
.nx-inspect.locked .nx-inspect-emblem svg { filter: grayscale(1) brightness(0.5); opacity: 0.55; }
.nx-inspect.locked .nx-inspect-emblem::before { opacity: 0.3; }

.nx-inspect-rarity {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.nx-inspect[data-rarity="common"] .nx-inspect-rarity    { color: var(--r-common); }
.nx-inspect[data-rarity="rare"] .nx-inspect-rarity      { color: var(--r-rare); }
.nx-inspect[data-rarity="epic"] .nx-inspect-rarity      { color: var(--r-epic); }
.nx-inspect[data-rarity="legendary"] .nx-inspect-rarity { color: var(--r-legend); text-shadow: 0 0 12px rgba(245,200,66,0.5); }

.nx-inspect-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.8rem;
  color: var(--nx-gold-light);
  text-align: center;
  margin: 0 0 6px;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(212,160,23,0.25);
}
.nx-inspect-status {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 22px;
  color: var(--nx-text-dim);
}
.nx-inspect-status.unlocked { color: #6fe27a; text-shadow: 0 0 10px rgba(111,226,122,0.3); }
.nx-inspect-status.locked { color: #c07a7a; }

.nx-inspect-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nx-gold-deep), transparent);
  margin: 4px 0 18px;
  position: relative;
}
.nx-inspect-divider::after {
  content: '◆';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--nx-gold);
  background: #0a0512;
  padding: 0 8px;
  font-size: 10px;
}

.nx-inspect-desc {
  color: var(--nx-text);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20px;
}

.nx-inspect-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.nx-inspect-cell {
  padding: 10px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--nx-border);
}
.nx-inspect-cell-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--nx-text-mute);
  text-transform: uppercase;
}
.nx-inspect-cell-val {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--nx-gold-light);
  margin-top: 2px;
}

.nx-inspect-progress {
  padding: 12px 14px;
  border: 1px solid var(--nx-border);
  background: rgba(0,0,0,0.4);
}
.nx-inspect-progress-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  font-family: 'Cinzel', serif; font-size: 0.85rem;
}
.nx-inspect-progress-row .l { color: var(--nx-text-dim); letter-spacing: 2px; }
.nx-inspect-progress-row .v { color: var(--nx-violet-glow); font-weight: 700; }

.nx-inspect-reward {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--nx-gold-deep);
  background: linear-gradient(180deg, rgba(212,160,23,0.08), rgba(0,0,0,0.4));
  display: flex; align-items: center; gap: 12px;
}
.nx-inspect-reward-icon { color: var(--nx-gold-light); }
.nx-inspect-reward-label {
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 2px;
  color: var(--nx-text-mute); text-transform: uppercase;
}
.nx-inspect-reward-val { font-family: 'Cinzel', serif; color: var(--nx-gold-light); font-size: 1rem; }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media (max-width: 1024px) {
  .nx-body { grid-template-columns: 1fr; }
  .nx-side {
    position: static; max-height: none;
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .nx-side-btn { width: auto; flex: 1 1 auto; border-left: none; border-bottom: 2px solid transparent; }
  .nx-side-btn.active { border-left: none; border-bottom-color: var(--nx-gold); }
  .nx-header-inner { grid-template-columns: 1fr; }
  .nx-header-right { align-items: flex-start; }
  .nx-ap-tile { min-width: 0; width: 100%; text-align: left; }
}

@media (max-width: 720px) {
  .nx-codex-main { padding: 84px 14px 40px; }
  .nx-header { padding: 26px 20px; }
  .nx-header::before, .nx-header::after { width: 36px; height: 36px; }
  .nx-title { letter-spacing: 3px; }
  .nx-em-frame { width: 72px; height: 72px; }
  .nx-em-name { font-size: 0.7rem; max-width: 96px; }
  .nx-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 10px; }
  .nx-panel { padding: 18px 14px; }
  .nx-panel-head h2 { font-size: 1.1rem; letter-spacing: 2px; }
  .nx-controls { flex-direction: column; }
  .nx-filter-group { width: 100%; }
  .nx-filter-btn { flex: 1; padding: 10px 4px; font-size: 0.72rem; letter-spacing: 1px; }
  .nx-inspect {
    width: 100%; max-width: 100%;
    height: 88vh;
    margin-top: auto;
    border-left: none; border-top: 1px solid var(--nx-gold-deep);
    padding: 22px 18px 30px;
  }
  .nx-scrim { align-items: flex-end; }
}

@media (max-width: 480px) {
  .nx-em-frame { width: 60px; height: 60px; }
  .nx-em-name { font-size: 0.64rem; max-width: 84px; }
  .nx-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* Live WebEngine integration: real PNG emblem sprites and existing site chrome. */
.nx-codex-live{ position:relative; isolation:isolate; }
.nx-codex-live .nx-codex-main{ padding-top:42px; }
.nx-codex-back{
  display:inline-flex;
  align-items:center;
  margin:0 0 16px;
  color:var(--nx-text-dim);
  font:600 .75rem/1 'Cinzel',serif;
  letter-spacing:1.5px;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s ease;
}
.nx-codex-back:hover{ color:var(--nx-gold-light); }
.nx-codex-live .nx-side-label{ display:inline-flex; align-items:center; gap:8px; }
.nx-codex-live .nx-side-label i{ width:16px; color:var(--nx-violet-glow); font-style:normal; text-align:center; }
.nx-codex-live .nx-em-icon.nx-badge-icon{
  position:absolute;
  inset:0;
  z-index:2;
  width:92px;
  height:92px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  pointer-events:none;
}
.nx-codex-live .nx-em-icon.nx-badge-icon img,
.nx-inspect .nx-badge-icon img{
  position:absolute;
  display:block;
  max-width:none;
  max-height:none;
  object-fit:unset;
}
.nx-codex-live .nx-em[data-unlocked="true"] .nx-em-icon{
  filter:drop-shadow(0 0 8px rgba(176,112,255,.72)) drop-shadow(0 0 5px rgba(245,200,66,.44));
}
.nx-codex-live .nx-em[data-unlocked="false"] .nx-em-icon{
  filter:grayscale(1) brightness(.58) contrast(.95);
  opacity:.52;
}
.nx-codex-live .nx-em-badge{ font:800 11px/1 Arial,sans-serif; }
.nx-codex-live .nx-recent-item{
  appearance:none;
  text-align:left;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.nx-codex-live .nx-recent-emblem{ width:46px; height:46px; flex:0 0 46px; }
.nx-codex-live .nx-recent-emblem .nx-badge-icon{ width:46px; height:46px; }
.nx-codex-live .nx-inspect-emblem .nx-badge-icon{
  position:absolute;
  inset:0;
  z-index:2;
  width:168px;
  height:168px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.nx-codex-live .nx-inspect.locked .nx-inspect-emblem .nx-badge-icon{
  filter:grayscale(1) brightness(.55) contrast(.9);
  opacity:.52;
}
.nx-codex-live .nx-inspect.unlocked .nx-inspect-emblem .nx-badge-icon{
  filter:drop-shadow(0 0 14px rgba(176,112,255,.82)) drop-shadow(0 0 8px rgba(245,200,66,.55));
}
.nx-codex-live .nx-inspect-wide{ grid-column:1/-1; }
.nx-codex-modal-open{ overflow:hidden!important; }
.nx-codex-live .nx-codex-loading{ min-height:260px; }
.nx-codex-live button{ font-family:inherit; }
@media(max-width:720px){
  .nx-codex-live .nx-codex-main{ padding-top:24px; }
  .nx-codex-live .nx-em-icon.nx-badge-icon{ width:72px; height:72px; }
}
@media(max-width:480px){
  .nx-codex-live .nx-em-icon.nx-badge-icon{ width:60px; height:60px; }
}

/* Wonder theme isolation. The host theme has generic .nx-* and button rules. */
.nx-codex-live,
.nx-codex-live *{
  box-sizing:border-box;
}
.nx-codex-live{
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--nx-bg);
  color:var(--nx-text);
  font-family:'Outfit',system-ui,sans-serif;
}
.nx-codex-live .nx-codex-main{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:1440px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:42px 24px 60px!important;
  overflow:visible!important;
}
.nx-codex-live .nx-codex-back{
  position:static!important;
  width:auto!important;
  height:auto!important;
}
.nx-codex-live .nx-header{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:40px 40px 32px!important;
  overflow:visible!important;
}
.nx-codex-live .nx-header-inner{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:32px!important;
  width:100%!important;
  height:auto!important;
  align-items:center!important;
}
.nx-codex-live .nx-header-left,
.nx-codex-live .nx-header-right{
  position:static!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.nx-codex-live .nx-title{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:4px 0 6px!important;
  padding:0!important;
  overflow:visible!important;
  white-space:normal!important;
  text-align:left!important;
}
.nx-codex-live .nx-controls{
  position:static!important;
  display:flex!important;
  width:100%!important;
  height:auto!important;
  margin:30px 0 0!important;
  padding:0!important;
  gap:12px!important;
  overflow:visible!important;
}
.nx-codex-live .nx-search{
  position:relative!important;
  display:flex!important;
  flex:1 1 auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
}
.nx-codex-live .nx-search input{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:44px!important;
  margin:0!important;
  padding:11px 14px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:var(--nx-text)!important;
  box-shadow:none!important;
}
.nx-codex-live button{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-width:0!important;
  min-height:0!important;
  border-radius:0!important;
  text-transform:none!important;
  box-shadow:none!important;
}
.nx-codex-live .nx-filter-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:12px 20px!important;
  background:transparent!important;
  border:0!important;
  color:var(--nx-text-dim)!important;
}
.nx-codex-live .nx-filter-btn.active{
  color:var(--nx-gold-light)!important;
  background:rgba(123,63,228,.16)!important;
}
.nx-codex-live .nx-recent{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:24px 0!important;
  overflow:visible!important;
}
.nx-codex-live .nx-recent-row{
  display:flex!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
}
.nx-codex-live .nx-recent-item{
  display:flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:210px!important;
  height:auto!important;
  min-height:58px!important;
  margin:0!important;
  padding:6px 12px!important;
  border:0!important;
  background:transparent!important;
}
.nx-codex-live .nx-body{
  position:relative!important;
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  gap:24px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.nx-codex-live .nx-side{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.nx-codex-live .nx-side-btn{
  display:flex!important;
  width:100%!important;
  height:auto!important;
  min-height:42px!important;
  margin:0!important;
  padding:10px 12px!important;
  border:0!important;
  border-left:2px solid transparent!important;
  background:transparent!important;
  color:var(--nx-text-dim)!important;
  cursor:pointer!important;
}
.nx-codex-live .nx-side-btn.active{
  border-left-color:var(--nx-gold)!important;
  background:linear-gradient(90deg,rgba(123,63,228,.18),transparent)!important;
  color:var(--nx-gold-light)!important;
}
.nx-codex-live .nx-panels,
.nx-codex-live .nx-panel{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.nx-codex-live .nx-grid{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;
  gap:20px 18px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
.nx-codex-live .nx-em{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:116px!important;
  margin:0!important;
  padding:6px 4px 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  overflow:visible!important;
  line-height:normal!important;
  cursor:pointer!important;
}
.nx-codex-live .nx-em-frame{
  position:relative!important;
  display:flex!important;
  flex:0 0 92px!important;
  width:92px!important;
  height:92px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.nx-codex-live .nx-em-frame::before,
.nx-codex-live .nx-em-frame::after{
  content:none!important;
  display:none!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.nx-codex-live .nx-em-name{
  position:relative!important;
  display:block!important;
  width:118px!important;
  max-width:118px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  white-space:normal!important;
  color:var(--nx-text)!important;
  text-align:center!important;
}
.nx-codex-live .nx-em[data-unlocked="false"] .nx-em-name{
  color:var(--nx-text-mute)!important;
}
.nx-codex-live-modal{
  box-sizing:border-box!important;
  z-index:100000!important;
}
.nx-codex-live-modal .nx-inspect{
  box-sizing:border-box!important;
}
.nx-codex-live-modal .nx-inspect-emblem{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:168px!important;
  height:168px!important;
  margin:20px auto 24px!important;
  overflow:visible!important;
}
.nx-codex-live-modal .nx-inspect-emblem::before,
.nx-codex-live-modal .nx-inspect-emblem::after{
  content:none!important;
  display:none!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.nx-codex-live-modal .nx-inspect-emblem .nx-badge-icon{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:168px!important;
  height:168px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.nx-codex-live-modal .nx-badge-icon img{
  position:absolute!important;
  display:block!important;
  max-width:none!important;
  max-height:none!important;
}
.nx-codex-live-modal .nx-inspect.unlocked .nx-badge-icon{
  filter:drop-shadow(0 0 14px rgba(176,112,255,.82)) drop-shadow(0 0 8px rgba(245,200,66,.55))!important;
}
.nx-codex-live-modal .nx-inspect.locked .nx-badge-icon{
  filter:grayscale(1) brightness(.58) contrast(.95)!important;
  opacity:.52!important;
}
.nx-codex-live-modal .nx-ach-claim{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:46px!important;
  margin:16px 0 0!important;
  padding:12px 18px!important;
  border:1px solid var(--nx-gold-deep)!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,rgba(123,63,228,.88),rgba(59,29,109,.92))!important;
  color:#fff3bd!important;
  font:700 .78rem/1 'Cinzel',serif!important;
  letter-spacing:2px!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  box-shadow:0 0 18px rgba(123,63,228,.28)!important;
}
.nx-codex-live-modal .nx-ach-claim:hover{
  filter:brightness(1.14)!important;
}
.nx-codex-live-modal .nx-ach-claim:disabled{
  cursor:wait!important;
  opacity:.72!important;
}
.nx-codex-live-modal .nx-ach-claimed{
  margin-top:16px!important;
  padding:12px!important;
  border:1px solid rgba(111,226,122,.35)!important;
  color:#6fe27a!important;
  font:700 .76rem/1 'Cinzel',serif!important;
  letter-spacing:2px!important;
  text-align:center!important;
  text-transform:uppercase!important;
}

.nx-codex-live .nx-recent-row{
  gap:22px!important;
  align-items:center!important;
}
.nx-codex-live .nx-recent-item{
  flex:0 0 270px!important;
  width:270px!important;
  min-width:270px!important;
  min-height:68px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  padding:8px 10px!important;
  overflow:visible!important;
}
.nx-codex-live .nx-recent-emblem{
  position:relative!important;
  display:block!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  margin:0!important;
  overflow:visible!important;
}
.nx-codex-live .nx-recent-emblem .nx-badge-icon{
  width:58px!important;
  height:58px!important;
}
.nx-codex-live .nx-recent-item-meta{
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:4px!important;
}
.nx-codex-live .nx-recent-item-name,
.nx-codex-live .nx-recent-item-date{
  display:block!important;
  position:static!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  line-height:1.25!important;
  white-space:normal!important;
  text-align:left!important;
}
@media(max-width:1024px){
  .nx-codex-live .nx-header-inner{ grid-template-columns:1fr!important; }
  .nx-codex-live .nx-body{ grid-template-columns:1fr!important; }
  .nx-codex-live .nx-side{ display:flex!important; flex-wrap:wrap!important; gap:4px!important; }
  .nx-codex-live .nx-side-btn{ width:auto!important; flex:1 1 auto!important; }
}
@media(max-width:720px){
  .nx-codex-live .nx-codex-main{ padding:24px 14px 40px!important; }
  .nx-codex-live .nx-header{ padding:26px 20px!important; }
  .nx-codex-live .nx-controls{ flex-direction:column!important; }
  .nx-codex-live .nx-filter-group{ width:100%!important; }
  .nx-codex-live .nx-filter-btn{ flex:1 1 0!important; padding:10px 4px!important; }
  .nx-codex-live .nx-grid{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important; gap:16px 10px!important; }
  .nx-codex-live .nx-em-frame{ flex-basis:72px!important; width:72px!important; height:72px!important; }
  .nx-codex-live .nx-em{ min-height:98px!important; }
}
@media(max-width:480px){
  .nx-codex-live .nx-grid{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr))!important; }
  .nx-codex-live .nx-em-frame{ flex-basis:60px!important; width:60px!important; height:60px!important; }
  .nx-codex-live .nx-em{ min-height:88px!important; }
}

/* Claim history: visible only to the character owner. */
.nx-codex-live .nx-claim-history{ margin:22px 0 0!important; border:1px solid rgba(212,160,23,.22)!important; background:linear-gradient(180deg,rgba(23,14,39,.82),rgba(8,5,15,.88))!important; box-shadow:inset 0 1px rgba(255,255,255,.025)!important; }
.nx-codex-live .nx-claim-history-head{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:18px!important; padding:18px 22px 14px!important; border-bottom:1px solid rgba(176,112,255,.16)!important; text-align:left!important; }
.nx-codex-live .nx-claim-history-head div>span{ color:var(--nx-violet-glow)!important; font:600 .62rem/1 'Cinzel',serif!important; letter-spacing:3px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-claim-history-head h2{ margin:5px 0 0!important; color:var(--nx-gold-light)!important; font:600 1.15rem/1 'Cinzel',serif!important; letter-spacing:2px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-claim-history-head>[data-codex="history-count"]{ color:var(--nx-text-dim)!important; font:600 .7rem/1 'Cinzel',serif!important; letter-spacing:1px!important; }
.nx-codex-live .nx-claim-history-list{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; max-height:360px!important; overflow:auto!important; }
.nx-codex-live .nx-claim-history-item{ display:grid!important; grid-template-columns:52px minmax(0,1fr) auto!important; align-items:center!important; gap:12px!important; min-width:0!important; padding:12px 18px!important; border-bottom:1px solid rgba(255,255,255,.045)!important; text-align:left!important; }
.nx-codex-live .nx-claim-history-item:nth-child(odd){ border-right:1px solid rgba(255,255,255,.045)!important; }
.nx-codex-live .nx-claim-history-icon,.nx-codex-live .nx-claim-history-icon .nx-badge-icon{ position:relative!important; display:block!important; width:48px!important; height:48px!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; overflow:hidden!important; }
.nx-codex-live .nx-claim-history-main{ min-width:0!important; }
.nx-codex-live .nx-claim-history-main strong,.nx-codex-live .nx-claim-history-main span{ display:block!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
.nx-codex-live .nx-claim-history-main strong{ color:#f3d482!important; font:600 .78rem/1.25 'Cinzel',serif!important; }
.nx-codex-live .nx-claim-history-main span{ margin-top:4px!important; color:var(--nx-text-dim)!important; font-size:.72rem!important; }
.nx-codex-live .nx-claim-history-item time{ color:var(--nx-text-mute)!important; font-size:.67rem!important; white-space:nowrap!important; }
.nx-codex-live .nx-claim-history-empty{ grid-column:1/-1; padding:28px!important; color:var(--nx-text-mute)!important; text-align:center!important; }

/* Owner-only selector for the three profile showcase slots. */
.nx-codex-live-modal .nx-showcase-picker{ margin-top:16px!important; padding:14px!important; border:1px solid rgba(176,112,255,.28)!important; background:rgba(10,5,20,.7)!important; }
.nx-codex-live-modal .nx-showcase-picker-label{ color:#f1cf78!important; font:700 .7rem/1 'Cinzel',serif!important; letter-spacing:2px!important; text-transform:uppercase!important; }
.nx-codex-live-modal .nx-showcase-picker p{ margin:7px 0 12px!important; color:var(--nx-text-mute)!important; font-size:.72rem!important; line-height:1.4!important; }
.nx-codex-live-modal .nx-showcase-slots{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:8px!important; }
.nx-codex-live-modal .nx-showcase-slot{ min-height:38px!important; border:1px solid rgba(176,112,255,.32)!important; border-radius:4px!important; background:#130925!important; color:#bfa9dd!important; font:700 .68rem/1 'Cinzel',serif!important; cursor:pointer!important; }
.nx-codex-live-modal .nx-showcase-slot:hover,.nx-codex-live-modal .nx-showcase-slot.active{ border-color:#e2b94f!important; color:#ffe49b!important; box-shadow:0 0 14px rgba(176,112,255,.25)!important; }

/* Rarity effects stay on the artwork itself: no rings or circular cards. */
.nx-codex-live .nx-em[data-unlocked="true"][data-rarity="rare"] .nx-em-icon{ filter:drop-shadow(0 0 8px rgba(74,168,255,.72))!important; }
.nx-codex-live .nx-em[data-unlocked="true"][data-rarity="epic"] .nx-em-icon{ filter:drop-shadow(0 0 10px rgba(176,112,255,.84)) drop-shadow(0 0 4px rgba(245,200,66,.32))!important; }
.nx-codex-live .nx-em[data-unlocked="true"][data-rarity="legendary"] .nx-em-icon,.nx-codex-live-modal .nx-inspect.unlocked[data-rarity="legendary"] .nx-badge-icon,.nx-profile-showcase-badge[data-rarity="legendary"] .nx-badge-icon{ animation:nx-legendary-badge 2.8s ease-in-out infinite!important; }
@keyframes nx-legendary-badge{ 0%,100%{ filter:drop-shadow(0 0 7px rgba(245,200,66,.58)) drop-shadow(0 0 4px rgba(176,112,255,.36)); } 50%{ filter:drop-shadow(0 0 16px rgba(245,200,66,.96)) drop-shadow(0 0 10px rgba(176,112,255,.72)); } }

/* Three public badges inside the existing character profile composition. */
.nx-armory-shell .nx-profile-showcase{ position:absolute; left:4.1%; top:70.4%; width:19.9%; height:11.2%; z-index:7; color:#e7bd67; text-align:center; }
.nx-armory-shell .nx-profile-showcase h3{ margin:0 0 4px; color:#d8bd83; font:600 clamp(8px,.62vw,11px)/1 Georgia,serif; letter-spacing:.16em; text-transform:uppercase; }
.nx-armory-shell .nx-profile-showcase-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:5%; align-items:start; }
.nx-armory-shell .nx-profile-showcase-badge{ display:flex; min-width:0; flex-direction:column; align-items:center; color:#d9c690; text-decoration:none; }
.nx-armory-shell .nx-profile-showcase-badge .nx-badge-icon{ position:relative; display:block; width:clamp(34px,3vw,54px); height:clamp(34px,3vw,54px); border:0; border-radius:0; background:none; box-shadow:none; overflow:hidden; }
.nx-armory-shell .nx-profile-showcase-badge[data-rarity="rare"] .nx-badge-icon{ filter:drop-shadow(0 0 6px rgba(74,168,255,.68)); }
.nx-armory-shell .nx-profile-showcase-badge[data-rarity="epic"] .nx-badge-icon{ filter:drop-shadow(0 0 7px rgba(176,112,255,.78)); }
.nx-armory-shell .nx-profile-showcase-name{ display:block; width:100%; margin-top:2px; overflow:hidden; color:#bcae99; font:600 clamp(6px,.48vw,9px)/1.1 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.nx-armory-shell .nx-profile-showcase-badge.empty{ display:grid; place-items:center; width:clamp(34px,3vw,54px); height:clamp(34px,3vw,54px); margin:auto; border:1px dashed rgba(231,189,103,.24); color:rgba(231,189,103,.42); }
@media(max-width:1200px){
  .nx-armory-shell .nx-profile-showcase{ position:static; width:auto; height:auto; padding:14px; border:1px solid rgba(231,189,103,.2); background:rgba(16,7,29,.72); }
  .nx-armory-shell .nx-profile-showcase-badge .nx-badge-icon{ width:64px; height:64px; }
  .nx-armory-shell .nx-profile-showcase-name{ font-size:10px; }
}
@media(max-width:760px){
  .nx-codex-live .nx-claim-history-list{ grid-template-columns:1fr!important; }
  .nx-codex-live .nx-claim-history-item:nth-child(odd){ border-right:0!important; }
  .nx-codex-live .nx-claim-history-item{ grid-template-columns:48px minmax(0,1fr)!important; }
  .nx-codex-live .nx-claim-history-item time{ grid-column:2; }
}

/* Claimable reward indicator and per-badge marker. */
.nx-codex-live .nx-reward-available{
  min-width:220px!important;
  padding:13px 18px!important;
  border:1px solid rgba(111,226,122,.42)!important;
  background:linear-gradient(180deg,rgba(20,46,39,.76),rgba(8,20,18,.9))!important;
  text-align:right!important;
  cursor:pointer!important;
  box-shadow:0 0 20px rgba(70,220,150,.1)!important;
}
.nx-codex-live .nx-reward-available:hover{ border-color:#6fe27a!important; box-shadow:0 0 24px rgba(70,220,150,.2)!important; }
.nx-codex-live .nx-reward-available-label{ color:#78e6ad!important; font:700 .66rem/1 'Cinzel',serif!important; letter-spacing:2px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-reward-available-value{ margin-top:5px!important; color:#c7bada!important; font:600 .74rem/1 'Cinzel',serif!important; }
.nx-codex-live .nx-reward-available-value b{ color:#fff0ad!important; font-size:1rem!important; }
.nx-codex-live .nx-em-reward-ready{
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:-5px!important;
  transform:translateX(-50%)!important;
  padding:3px 7px!important;
  border:1px solid rgba(111,226,122,.48)!important;
  border-radius:8px!important;
  background:#0c2019!important;
  color:#79efb3!important;
  font:700 8px/1 Arial,sans-serif!important;
  letter-spacing:.6px!important;
  text-transform:uppercase!important;
  box-shadow:0 0 10px rgba(70,220,150,.22)!important;
}

/* Achievement leaderboard. */
.nx-codex-live .nx-ach-leaderboard{
  margin:22px 0 0!important;
  border:1px solid rgba(212,160,23,.24)!important;
  background:linear-gradient(150deg,rgba(27,15,48,.92),rgba(8,5,15,.94))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 16px 45px rgba(0,0,0,.18)!important;
}
.nx-codex-live .nx-ach-leaderboard-head{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:20px!important; padding:19px 22px 14px!important; border-bottom:1px solid rgba(176,112,255,.16)!important; text-align:left!important; }
.nx-codex-live .nx-ach-leaderboard-head>div>span{ color:var(--nx-violet-glow)!important; font:600 .62rem/1 'Cinzel',serif!important; letter-spacing:3px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-ach-leaderboard-head h2{ margin:5px 0 0!important; color:var(--nx-gold-light)!important; font:600 1.15rem/1 'Cinzel',serif!important; letter-spacing:2px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-ach-leaderboard-head label{ display:flex!important; align-items:center!important; gap:10px!important; color:var(--nx-text-mute)!important; font:600 .65rem/1 'Cinzel',serif!important; letter-spacing:1px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-ach-leaderboard-head select{ min-width:180px!important; padding:9px 30px 9px 11px!important; border:1px solid rgba(176,112,255,.35)!important; background:#0c0617!important; color:#eadcff!important; font:600 .72rem/1 'Cinzel',serif!important; }
.nx-codex-live .nx-ach-leaderboard-points{ padding:9px 22px!important; border-bottom:1px solid rgba(255,255,255,.04)!important; color:#756785!important; font-size:.67rem!important; letter-spacing:.4px!important; text-align:left!important; }
.nx-codex-live .nx-ach-leaderboard-list{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; }
.nx-codex-live .nx-ach-leader-row{ display:grid!important; grid-template-columns:46px minmax(0,1fr) 78px 86px!important; align-items:center!important; gap:10px!important; min-width:0!important; min-height:66px!important; padding:10px 16px!important; border-bottom:1px solid rgba(255,255,255,.045)!important; color:inherit!important; text-decoration:none!important; text-align:left!important; }
.nx-codex-live .nx-ach-leader-row:nth-child(odd){ border-right:1px solid rgba(255,255,255,.045)!important; }
.nx-codex-live .nx-ach-leader-row:hover,.nx-codex-live .nx-ach-leader-row.current{ background:linear-gradient(90deg,rgba(123,63,228,.13),transparent)!important; }
.nx-codex-live .nx-ach-rank-medal,.nx-codex-live .nx-ach-rank-number{ display:grid!important; place-items:center!important; width:34px!important; height:34px!important; color:#8d7d9f!important; font:700 .8rem/1 'Cinzel',serif!important; }
.nx-codex-live .nx-ach-rank-medal{ border:1px solid currentColor!important; transform:rotate(45deg)!important; }
.nx-codex-live .nx-ach-rank-medal.rank-1{ color:#f5c842!important; box-shadow:0 0 12px rgba(245,200,66,.25)!important; }
.nx-codex-live .nx-ach-rank-medal.rank-2{ color:#c9d5e6!important; }
.nx-codex-live .nx-ach-rank-medal.rank-3{ color:#d78b4d!important; }
.nx-codex-live .nx-ach-rank-medal i{ font-style:normal!important; transform:rotate(-45deg)!important; }
.nx-codex-live .nx-ach-leader-name,.nx-codex-live .nx-ach-leader-unlocks,.nx-codex-live .nx-ach-leader-score{ min-width:0!important; }
.nx-codex-live .nx-ach-leader-name strong,.nx-codex-live .nx-ach-leader-name small,.nx-codex-live .nx-ach-leader-unlocks b,.nx-codex-live .nx-ach-leader-unlocks small,.nx-codex-live .nx-ach-leader-score b,.nx-codex-live .nx-ach-leader-score small{ display:block!important; }
.nx-codex-live .nx-ach-leader-name strong{ overflow:hidden!important; color:#f2d27d!important; font:600 .82rem/1.2 'Cinzel',serif!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
.nx-codex-live .nx-ach-leader-name small,.nx-codex-live .nx-ach-leader-unlocks small,.nx-codex-live .nx-ach-leader-score small{ margin-top:4px!important; color:#746783!important; font-size:.58rem!important; letter-spacing:.6px!important; text-transform:uppercase!important; }
.nx-codex-live .nx-ach-leader-unlocks b{ color:#c7b8d8!important; font-size:.8rem!important; }
.nx-codex-live .nx-ach-leader-score{ text-align:right!important; }
.nx-codex-live .nx-ach-leader-score b{ color:#7fe5b2!important; font:700 .9rem/1 'Cinzel',serif!important; }
.nx-codex-live .nx-ach-leaderboard-loading{ grid-column:1/-1!important; padding:28px!important; color:#817390!important; text-align:center!important; }
.nx-codex-live .nx-ach-leaderboard-loading.error{ color:#d47c86!important; }

/* One-time achievement unlock popup. */
.nx-unlock-scrim{ position:fixed!important; inset:0!important; z-index:100100!important; display:grid!important; place-items:center!important; padding:22px!important; background:rgba(2,1,6,.82)!important; backdrop-filter:blur(8px)!important; }
.nx-unlock-popup{ position:relative!important; width:min(470px,94vw)!important; padding:30px 32px 26px!important; border:1px solid rgba(212,160,23,.46)!important; background:radial-gradient(circle at 50% 15%,rgba(125,55,210,.24),transparent 42%),linear-gradient(180deg,#160b2a,#08040f)!important; color:#e9ddf5!important; text-align:center!important; box-shadow:0 30px 100px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.04)!important; }
.nx-unlock-popup::before{ content:''!important; position:absolute!important; inset:8px!important; border:1px solid rgba(176,112,255,.14)!important; pointer-events:none!important; }
.nx-unlock-kicker{ color:#75e9ae!important; font:700 .68rem/1 'Cinzel',serif!important; letter-spacing:4px!important; text-transform:uppercase!important; }
.nx-unlock-icon{ position:relative!important; width:150px!important; height:150px!important; margin:14px auto 4px!important; overflow:hidden!important; }
.nx-unlock-icon .nx-badge-icon{ position:absolute!important; inset:0!important; width:150px!important; height:150px!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; overflow:visible!important; }
.nx-unlock-rarity{ color:#b070ff!important; font:700 .66rem/1 'Cinzel',serif!important; letter-spacing:3px!important; text-transform:uppercase!important; }
.nx-unlock-popup[data-rarity="legendary"] .nx-unlock-rarity{ color:#f5c842!important; }
.nx-unlock-popup[data-rarity="legendary"] .nx-badge-icon{ animation:nx-legendary-badge 2.8s ease-in-out infinite!important; }
.nx-unlock-popup h2{ margin:8px 0 7px!important; color:#f4d67e!important; font:600 1.65rem/1.12 'Cinzel Decorative','Cinzel',serif!important; }
.nx-unlock-popup>p{ margin:0 auto 14px!important; max-width:360px!important; color:#a99bb8!important; font-size:.84rem!important; line-height:1.5!important; }
.nx-unlock-reward{ margin:12px 0 0!important; padding:10px!important; border:1px solid rgba(111,226,122,.22)!important; background:rgba(43,116,82,.1)!important; color:#80dcae!important; font-size:.76rem!important; }
.nx-unlock-reward strong{ color:#fff0ad!important; }
.nx-unlock-actions{ position:relative!important; z-index:2!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; margin-top:20px!important; }
.nx-unlock-actions button{ min-height:42px!important; border:1px solid rgba(176,112,255,.4)!important; border-radius:3px!important; background:#1b0c32!important; color:#d9c4ef!important; font:700 .7rem/1 'Cinzel',serif!important; letter-spacing:1px!important; text-transform:uppercase!important; cursor:pointer!important; }
.nx-unlock-actions button:last-child{ border-color:rgba(212,160,23,.5)!important; background:linear-gradient(180deg,#8150d1,#43216f)!important; color:#fff1bc!important; }
.nx-unlock-actions button:hover{ filter:brightness(1.15)!important; }

@media(max-width:900px){
  .nx-codex-live .nx-ach-leaderboard-list{ grid-template-columns:1fr!important; }
  .nx-codex-live .nx-ach-leader-row:nth-child(odd){ border-right:0!important; }
}
@media(max-width:620px){
  .nx-codex-live .nx-ach-leaderboard-head{ align-items:stretch!important; flex-direction:column!important; }
  .nx-codex-live .nx-ach-leaderboard-head label{ justify-content:space-between!important; }
  .nx-codex-live .nx-ach-leader-row{ grid-template-columns:38px minmax(0,1fr) 66px!important; }
  .nx-codex-live .nx-ach-leader-unlocks{ display:none!important; }
  .nx-codex-live .nx-reward-available{ width:100%!important; min-width:0!important; text-align:left!important; }
  .nx-unlock-popup{ padding:26px 18px 20px!important; }
}

/* Live per-achievement progress. */
.nx-codex-live .nx-em-live-progress{
  display:flex!important;
  width:104px!important;
  max-width:100%!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
  margin-top:auto!important;
  color:#8f819f!important;
  font:600 9px/1 'Outfit',Arial,sans-serif!important;
  letter-spacing:.2px!important;
  white-space:nowrap!important;
}
.nx-codex-live .nx-em-live-progress>i{
  display:block!important;
  width:100%!important;
  height:3px!important;
  overflow:hidden!important;
  border:1px solid rgba(176,112,255,.18)!important;
  background:#08040e!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8)!important;
}
.nx-codex-live .nx-em-live-progress>i>b{
  display:block!important;
  height:100%!important;
  background:linear-gradient(90deg,#7133c7,#b070ff,#d9a93a)!important;
  box-shadow:0 0 7px rgba(176,112,255,.5)!important;
}
.nx-codex-live .nx-em[data-unlocked="true"] .nx-em-live-progress{ color:#c3aa6d!important; }
.nx-codex-live .nx-em[data-unlocked="true"] .nx-em-live-progress>i>b{ background:linear-gradient(90deg,#88701f,#f0c751)!important; }
.nx-codex-live-modal .nx-inspect-live-progress{
  margin:0 0 18px!important;
  padding:12px 14px!important;
  border:1px solid rgba(176,112,255,.24)!important;
  background:rgba(0,0,0,.28)!important;
}
.nx-codex-live-modal .nx-inspect-live-progress>div:first-child{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; }
.nx-codex-live-modal .nx-inspect-live-progress span{ color:#8f819f!important; font:600 .66rem/1 'Cinzel',serif!important; letter-spacing:1.5px!important; text-transform:uppercase!important; }
.nx-codex-live-modal .nx-inspect-live-progress strong{ color:#ead18a!important; font:700 .78rem/1 'Cinzel',serif!important; }
.nx-codex-live-modal .nx-inspect-live-track{ height:6px!important; margin-top:10px!important; overflow:hidden!important; border:1px solid rgba(176,112,255,.2)!important; background:#07030c!important; }
.nx-codex-live-modal .nx-inspect-live-track i{ display:block!important; height:100%!important; background:linear-gradient(90deg,#7133c7,#b070ff,#e0b94c)!important; box-shadow:0 0 10px rgba(176,112,255,.55)!important; }
@media(max-width:720px){
  .nx-codex-live .nx-em-live-progress{ width:84px!important; font-size:8px!important; }
}