/* ── Encyclopedia page ──────────────────────────────────────────────────── */

#page-encyclopedia.active { overflow-y: auto; }

.enc-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.enc-title {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Search */
.enc-search {
  width: 320px;
  background: #0e0e0e;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.enc-search:focus { border-color: #6655cc; }
.enc-search::placeholder { color: #444; }

/* Type filter tabs */
.enc-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.enc-type-tab {
  background: #0e0e0e;
  border: 1px solid #1e1e1e;
  border-radius: 20px;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.enc-type-tab:hover { border-color: #444; color: #ccc; background: #151515; }

/* Per-type active colours */
.enc-type-tab.active                               { background: #1c1540; border-color: #6655cc; color: #a899ff; }
.enc-type-tab[data-type="Base Class"].active       { background: #2a1508; border-color: #e07030; color: #f09050; }
.enc-type-tab[data-type="Super Class"].active      { background: #1e0e38; border-color: #aa66ee; color: #cc99ff; }
.enc-type-tab[data-type="Sub Class"].active        { background: #061e1c; border-color: #33bbaa; color: #55ddcc; }
.enc-type-tab[data-type="Race"].active             { background: #0a1e0c; border-color: #55cc66; color: #77ee88; }
.enc-type-tab[data-type="Enchant"].active          { background: #1e1800; border-color: #ddaa00; color: #ffcc33; }
.enc-type-tab[data-type="Ore"].active              { background: #1e1208; border-color: #cc8833; color: #eeaa55; }
.enc-type-tab[data-type="Ingredient"].active       { background: #0a1a0a; border-color: #55aa55; color: #77cc77; }
.enc-type-tab[data-type="Weapon"].active           { background: #1e0a0a; border-color: #cc4444; color: #ee6666; }
.enc-type-tab[data-type="Gear"].active             { background: #0a0e22; border-color: #5577cc; color: #7799ee; }
.enc-type-tab[data-type="Artifact"].active         { background: #1e0a1e; border-color: #cc55cc; color: #ee77ee; }
.enc-type-tab[data-type="Lesser Artifact"].active  { background: #160d26; border-color: #9966cc; color: #bb88ee; }
.enc-type-tab[data-type="Weapon Modifier"].active  { background: #0d1a0e; border-color: #66aa44; color: #88cc66; }
.enc-type-tab[data-type="Boss"].active             { background: #1a0808; border-color: #cc3333; color: #ee5555; }
.enc-type-tab[data-type="Mob"].active              { background: #100e0a; border-color: #aa8844; color: #ccaa55; }
.enc-type-tab[data-type="Mark"].active             { background: #0e0818; border-color: #cc55ee; color: #ee77ff; }
.enc-type-tab[data-type="Quest"].active            { background: #081a14; border-color: #33bb77; color: #55ddaa; }
.enc-type-tab[data-type="Event"].active            { background: #1a1200; border-color: #ddaa00; color: #ffcc44; }
.enc-type-tab[data-type="Mechanic"].active         { background: #0e1520; border-color: #4477cc; color: #6699ee; }
.enc-type-tab[data-type="Significant NPC"].active  { background: #1a0e20; border-color: #aa66cc; color: #cc88ee; }
.enc-type-tab[data-type="Weapon Shard"].active     { background: #081820; border-color: #2299cc; color: #44bbee; }

/* ── Two-column body ────────────────────────────────────────────────────── */
.enc-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.enc-list-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.enc-no-results {
  color: #555;
  font-size: 13px;
  padding: 32px 0;
  text-align: center;
}

/* Section headers */
.enc-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.enc-section:has(.enc-weapon-group) { gap: 0; }

.enc-section-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding-bottom: 7px;
  border-bottom: 1px solid #1a1a1a;
}
.enc-section-icon { font-size: 13px; }
.enc-section-count { margin-left: auto; font-size: 11px; color: #444; font-weight: 500; letter-spacing: 0; }

/* Item grid */
.enc-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.enc-grid-column { flex-direction: column; align-items: flex-start; }

/* Weapon family groups */
.enc-weapon-group { display: flex; flex-direction: column; gap: 6px; }
.enc-trial-section-hdr {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
}
.enc-typed .enc-trial-section-hdr { color: #fff; }
.enc-weapon-group-hdr {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding-top: 6px;
}
.enc-typed .enc-weapon-group-hdr { color: #fff; }

.enc-group-desc {
  font-size: 11px;
  color: #555;
  font-style: italic;
  margin-bottom: 2px;
}

.enc-item-btn {
  background: #0e0e0e;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  color: #999;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  text-align: left;
  font-family: inherit;
}
.enc-item-btn:hover { background: #141420; border-color: #333; color: #ddd; }
.enc-item-btn.active { background: #1c1540; border-color: #6655cc; color: #c0b0ff; }

/* Parent item (has expand toggle) */
.enc-item-btn-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.enc-expand-icon {
  font-size: 9px;
  color: #555;
  padding-left: 10px;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.12s;
}
.enc-item-btn-parent:hover .enc-expand-icon { color: #aaa; }
.enc-item-btn-parent.active .enc-expand-icon { color: #9988ff; }

/* Child items (indented under parent) */
.enc-boss-children {
  padding-left: 18px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.enc-item-btn-child {
  font-size: 11px;
  padding: 4px 10px;
  opacity: 0.85;
  border-color: #181818;
}

/* ── Right: sticky detail panel ─────────────────────────────────────────── */
.enc-detail-wrap {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}

/* Empty state */
.enc-detail-empty {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 20px;
  color: #444;
}
.enc-de-icon { font-size: 36px; }
.enc-de-text { font-size: 12px; text-align: center; line-height: 1.5; }

/* Shared detail card shell */
.enc-detail-card {
  background: #0a0a0a;
  border: 1px solid #252525;
  border-radius: 10px;
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* ── Shared type badge ──────────────────────────────────────────────────── */
.enc-detail-type,
.enc-class-type,
.enc-move-type-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  background: #1a1a1a;
  color: #777;
}

/* ── Type colours ───────────────────────────────────────────────────────── */
.enc-type-Ore             { background: #1a130a; color: #cc8833; border: 1px solid #3a2810; }
.enc-type-Ingredient      { background: #0a160a; color: #55aa55; border: 1px solid #103310; }
.enc-type-Weapon          { background: #1a0a0a; color: #cc4444; border: 1px solid #3a1010; }
.enc-type-Gear            { background: #0a0d1a; color: #5577cc; border: 1px solid #101833; }
.enc-type-Artifact        { background: #180a1a; color: #cc55cc; border: 1px solid #331033; }
.enc-type-Lesser-Artifact { background: #110d1a; color: #9966cc; border: 1px solid #271040; }
.enc-type-Weapon-Modifier { background: #0d1510; color: #66aa44; border: 1px solid #162810; }
.enc-type-Armour          { background: #0a1218; color: #44aacc; border: 1px solid #102030; }
.enc-type-Enchant         { background: #1a1500; color: #ddaa00; border: 1px solid #3a3000; }
.enc-type-Boss            { background: #1a0808; color: #cc3333; border: 1px solid #3a1010; }
.enc-type-Mob             { background: #100e0a; color: #aa8844; border: 1px solid #2a2210; }
.enc-type-Mark            { background: #0e0818; color: #cc55ee; border: 1px solid #2a1040; }
.enc-type-Base-Class      { background: #1a0e06; color: #e07030; border: 1px solid #3a2010; }
.enc-type-Super-Class     { background: #140a1e; color: #aa66ee; border: 1px solid #2e1055; }
.enc-type-Sub-Class       { background: #061818; color: #33bbaa; border: 1px solid #0e3030; }
.enc-type-Race            { background: #0e1a10; color: #55cc66; border: 1px solid #143318; }
.enc-type-Quest             { background: #081a14; color: #33bb77; border: 1px solid #0e3320; }
.enc-type-Event             { background: #1a1000; color: #ddaa00; border: 1px solid #3a2c00; }
.enc-type-Mechanic          { background: #0a1020; color: #4477cc; border: 1px solid #162040; }
.enc-type-Significant-NPC  { background: #1a0e20; color: #aa66cc; border: 1px solid #3a1e50; }
.enc-type-Weapon-Shard     { background: #081820; color: #2299cc; border: 1px solid #0e3050; }

/* ── Shared name + desc ─────────────────────────────────────────────────── */
.enc-detail-name {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  word-break: break-word;
}
.enc-detail-desc {
  font-size: 13px;
  color: #aaa;
  line-height: 1.65;
}
.enc-detail-nodesc { color: #444; font-style: italic; }

/* ── Class / Race card extras ───────────────────────────────────────────── */
.enc-moves-label {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a1a1a;
  margin-top: 4px;
}

/* Innate passive rows */
.enc-passive-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
}
.enc-passive-name {
  font-size: 12px;
  font-weight: 700;
  color: #c8b8ff;
}
.enc-passive-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

/* Move buttons */
.enc-move-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  color: #bbb;
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.enc-move-btn:hover { background: #161628; border-color: #333; color: #ddd; }
.enc-move-btn-name { font-weight: 600; }
.enc-move-btn-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; color: #555; font-size: 11px; }

/* Move type pills (small) */
.enc-move-type-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #666;
  letter-spacing: 0.4px;
}
.enc-mpill-active   { background: #1a1040; color: #8877dd; }
.enc-mpill-passive  { background: #0e1a10; color: #44aa55; }
.enc-mpill-physical { background: #1a1208; color: #cc8844; }
.enc-mpill-magic    { background: #0e0e2a; color: #7766ee; }
.enc-mpill-dark     { background: #0e080e; color: #aa44cc; }
.enc-mpill-holy     { background: #1a1600; color: #ddcc22; }
.enc-mpill-nature   { background: #061a08; color: #44bb55; }
.enc-mpill-poison   { background: #0a1a04; color: #88cc22; }
.enc-mpill-fire     { background: #1a0800; color: #ee5522; }
.enc-mpill-ice      { background: #061420; color: #44aadd; }
.enc-mpill-hex      { background: #180826; color: #bb44ff; }

/* ── Move detail card ────────────────────────────────────────────────────── */
.enc-back-btn {
  background: none;
  border: 1px solid #252525;
  border-radius: 6px;
  color: #777;
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  width: fit-content;
  transition: color 0.12s, border-color 0.12s;
}
.enc-back-btn:hover { color: #ccc; border-color: #555; }

.enc-move-quote {
  font-size: 12px;
  color: #666;
  font-style: italic;
  line-height: 1.5;
  border-left: 2px solid #252525;
  padding-left: 10px;
}

/* Stat chips */
.enc-move-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.enc-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: #111;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 5px 10px;
  min-width: 44px;
}
.enc-stat-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.enc-stat-val   { font-size: 12px; color: #ddd; font-weight: 600; white-space: nowrap; }

/* ── Boss detail ─────────────────────────────────────────────────────────── */
.enc-boss-hp,
.enc-boss-res {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.enc-boss-passives,
.enc-boss-moves {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

/* Loot table collapsible */
.enc-loot-section {
  margin-bottom: 16px;
}
.enc-loot-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #0d0d12;
  border: 1px solid #2a2a40;
  border-radius: 6px;
  color: #aaa8cc;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', Arial, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.enc-loot-btn:hover { background: #13131e; border-color: #3a3a55; color: #ccc; }
.enc-loot-btn-arrow { font-size: 11px; flex-shrink: 0; color: #555; }
.enc-loot-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.enc-loot-cat-label {
  font-size: 10px;
  color: #555;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
}
.enc-loot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.enc-loot-chip {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  color: #bbb;
  font-size: 11px;
  padding: 2px 8px;
}
.enc-loot-chip-link {
  cursor: pointer;
  border-color: #2a2a40;
  color: #9090cc;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.enc-loot-chip-link:hover {
  background: #13131e;
  border-color: #4a4a66;
  color: #bbb;
}
.enc-loot-notes {
  font-size: 11px;
  color: #666;
  line-height: 1.6;
  padding-top: 4px;
  border-top: 1px solid #1a1a1a;
}

.enc-boss-section-label {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a1a1a;
  margin-top: 4px;
}

.enc-boss-hp-rows { display: flex; flex-direction: column; gap: 4px; }

.enc-boss-hp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 5px;
}
.enc-boss-hp-label { font-size: 12px; color: #777; }
.enc-boss-hp-val {
  font-size: 13px;
  font-weight: 700;
  color: #ddd;
  font-family: 'Rajdhani', Arial, sans-serif;
}
.enc-boss-hp-corrupted { color: #dd6644; }

.enc-boss-res-grid { display: flex; flex-wrap: wrap; gap: 5px; }

.enc-res-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #222;
  background: #111;
  min-width: 58px;
}
.enc-res-type {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}
.enc-res-val { font-size: 12px; font-weight: 700; color: #ddd; }

.enc-res-resist { background: #081a0d; border-color: #1a4a25; }
.enc-res-resist .enc-res-type { color: #4a8855; }
.enc-res-resist .enc-res-val  { color: #55ee77; }

.enc-res-weak { background: #1a0808; border-color: #4a1a1a; }
.enc-res-weak .enc-res-type { color: #885555; }
.enc-res-weak .enc-res-val  { color: #ee5555; }

/* Boss move detail extras */
.enc-boss-move-category {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  font-style: italic;
}
.enc-boss-move-condition {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  color: #888;
  background: #0e0e0e;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.enc-boss-move-cond-label {
  font-size: 9px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex-shrink: 0;
}

/* ── Artifact detail extras ─────────────────────────────────────────────── */
.enc-artifact-from {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}
.enc-artifact-from-label {
  color: #555;
}
.enc-artifact-from-sep {
  color: #555;
}
.enc-artifact-source {
  color: #888;
  font-style: italic;
}
.enc-artifact-source-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  color: #c9a84c;
  text-decoration: underline;
  text-decoration-color: #7a6030;
  text-underline-offset: 2px;
}
.enc-artifact-source-btn:hover {
  color: #e8c060;
}
.enc-desc-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  color: #c9a84c;
  text-decoration: underline;
  text-decoration-color: #7a6030;
  text-underline-offset: 2px;
}
.enc-desc-link:hover {
  color: #e8c060;
}
.enc-artifact-move-meta {
  font-size: 10px;
  color: #666;
  font-weight: 400;
  margin-left: 2px;
}


/* ── Venia Orb Tracker ───────────────────────────────────────────────────── */
#venia-tracker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
#venia-tracker-modal {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px;
  width: min(96vw, 920px);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vt-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vt-modal-title {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.vt-close-btn {
  background: none;
  border: 1px solid #333;
  border-radius: 5px;
  color: #777;
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.vt-close-btn:hover { color: #fff; border-color: #666; }

/* Tabs bar */
.vt-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 8px;
}
.vt-tab-wrap {
  display: flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #252525;
  background: #111;
}
.vt-tab-wrap.vt-tab-active {
  border-color: #4a3a88;
  background: #1a1230;
}
.vt-tab-btn {
  background: none;
  border: none;
  color: #666;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: color 0.15s;
  white-space: nowrap;
}
.vt-tab-wrap.vt-tab-active .vt-tab-btn { color: #c4b5fd; }
.vt-tab-btn:hover { color: #aaa; }
.vt-tab-del {
  background: none;
  border: none;
  border-left: 1px solid #252525;
  color: #444;
  font-size: 14px;
  padding: 4px 7px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.vt-tab-del:hover { color: #ee5555; background: #2a0f0f; }
.vt-tab-add {
  background: none;
  border: 1px dashed #2a2a2a;
  border-radius: 4px;
  color: #484848;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.vt-tab-add:hover { color: #9988dd; border-color: #4a3a88; }

.vt-modal-hint { font-size: 12px; color: #555; margin: 0; }
.vt-hint-green { color: #55ee77; font-weight: 600; }
.vt-hint-red   { color: #ee5555; font-weight: 600; }

.vt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
.vt-col { display: flex; flex-direction: column; gap: 3px; }
.vt-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #252525;
  margin-bottom: 4px;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #aaa;
}
.vt-col-warn {
  font-size: 10px;
  font-weight: 700;
  color: #cc8833;
  letter-spacing: 0.3px;
  margin-left: auto;
  margin-right: 6px;
}
.vt-reset-btn {
  background: none;
  border: 1px solid #252525;
  border-radius: 3px;
  color: #555;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s;
}
.vt-reset-btn:hover { color: #cc5555; border-color: #cc5555; }

.vt-cat-label {
  font-size: 9px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 7px 0 2px;
}
.vt-artifact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  color: #777;
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.vt-artifact-row:hover { background: #181818; border-color: #333; color: #ccc; }
.vt-artifact-icon { font-size: 11px; flex-shrink: 0; width: 12px; text-align: center; }

.vt-state-green { background: #081a0d; border-color: #1a4a25; color: #55ee77; }
.vt-state-green:hover { background: #0a2010; border-color: #255530; color: #77ff99; }
.vt-state-red   { background: #1a0808; border-color: #4a1a1a; color: #ee5555; }
.vt-state-red:hover   { background: #200d0d; border-color: #552525; color: #ff7777; }
.vt-state-collected { background: #0a0a0a; border-color: #1a1a1a; color: #2a2a2a; }
.vt-state-collected:hover { background: #111; border-color: #222; color: #333; }

/* Open tracker button inside class card */
.vt-open-btn {
  background: #0e0a1a;
  border: 1px solid #3a2a6a;
  border-radius: 6px;
  color: #9977dd;
  font-size: 12px;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 9px 14px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vt-open-btn:hover { background: #150f26; border-color: #5540aa; color: #bbaaff; }

/* ── Astra Tracker ───────────────────────────────────────────────────────── */
#astra-tracker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#astra-tracker-modal {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 20px 24px;
  width: min(560px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Petent Tracker ──────────────────────────────────────────────────────── */
#petent-tracker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#petent-tracker-modal {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 20px 24px;
  width: min(640px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Vertical layout for petent/astra in the PiP overlay */
.pt-tracker-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pt-loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* In the PiP window (340px wide) 3 columns is too cramped — use 2 */
#pip-content .pt-loc-grid {
  grid-template-columns: repeat(2, 1fr);
}
/* Tier bar */
.pt-tier-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 12px;
}
.pt-tier-label {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #444;
  margin-right: 2px;
}
.pt-tier-btn {
  background: #111;
  border: 1px solid #252525;
  border-radius: 4px;
  color: #555;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pt-tier-btn:hover { color: #aaa; border-color: #3a3a3a; }
.pt-tier-btn.pt-tier-active { background: #1a1230; border-color: #4a3a88; color: #c4b5fd; }

/* Info note */
.pt-info-note {
  font-size: 11px;
  color: #4a4a4a;
  font-style: italic;
  padding: 2px 0 4px;
  line-height: 1.5;
}

.pt-section-hdr {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #444;
  padding: 8px 0 4px;
  border-top: 1px solid #1a1a1a;
  margin-top: 4px;
}
.pt-section-hdr:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.pt-mob-note {
  font-size: 10px;
  color: #555;
  font-style: italic;
}

/* ── Self Destruct HP Calculator ────────────────────────────────────────── */
.enc-hp-calc {
  margin-top: 12px;
  padding: 10px 12px;
  background: #0e0e16;
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.enc-hp-calc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #555;
}
.enc-hp-calc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.enc-hp-calc-stat {
  font-size: 11px;
  color: #666;
  width: 72px;
  flex-shrink: 0;
}
.enc-hp-slider {
  flex: 1;
  accent-color: #7755cc;
  cursor: pointer;
}
.enc-hp-calc-pct {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}
.enc-hp-calc-dmg {
  font-size: 14px;
  font-weight: 700;
  color: #cc4444;
}

/* ── Scroll / Lost Scroll detail card ──────────────────────────────────── */
.enc-scroll-restrict {
  font-size: 11px;
  color: #555;
  font-style: italic;
  margin-bottom: 2px;
}

.enc-scroll-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

/* Elemental type chip colours */
.enc-elem-holy     { background: #1a160a; color: #d4a340; border: 1px solid #2e2010; }
.enc-elem-fire     { background: #1a0c08; color: #e06030; border: 1px solid #2e1508; }
.enc-elem-ice      { background: #08141a; color: #40a8d4; border: 1px solid #0a2030; }
.enc-elem-physical { background: #111316; color: #aab0bb; border: 1px solid #222630; }
.enc-elem-magic    { background: #11081a; color: #9966dd; border: 1px solid #1e1038; }
.enc-elem-dark     { background: #0d0812; color: #9055cc; border: 1px solid #1a1025; }
.enc-elem-hex      { background: #07100a; color: #44bb66; border: 1px solid #0c1e10; }
.enc-elem-nature   { background: #081408; color: #55cc55; border: 1px solid #0e2210; }
.enc-elem-poison   { background: #0d1208; color: #88cc44; border: 1px solid #172010; }

/* Buff / Attack kind chip */
.enc-scroll-buff   { background: #0a1015; color: #4488cc; border: 1px solid #102030; }
.enc-scroll-attack { background: #150a0a; color: #cc4444; border: 1px solid #301010; }

/* Scroll type badge colours */
.enc-type-Scroll      { background: #100f1a; color: #8877cc; border: 1px solid #1e1a35; }
.enc-type-Lost-Scroll { background: #160a16; color: #cc66cc; border: 1px solid #2e122e; }

/* ── Item section labels (Recipe / Note in potions etc.) ────────────────── */
.enc-item-section-label {
  display: block;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 10px;
  margin-bottom: 3px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .enc-body { flex-direction: column; }
  .enc-detail-wrap { width: 100%; position: static; }
  .enc-search { width: 100%; }
  .enc-detail-card { max-height: none; }
  .vt-grid { grid-template-columns: repeat(2, 1fr); }
  .pt-loc-grid { grid-template-columns: repeat(2, 1fr); }
  #petent-tracker-modal { padding: 16px; }
}

/* ── Event detail panel ─────────────────────────────────────────────────── */
.enc-event-timing {
  font-size: 11px;
  color: #cc9922;
  background: #130f00;
  border: 1px solid #302400;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1.5;
}
.enc-event-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Quest detail panel ─────────────────────────────────────────────────── */
.enc-quest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.enc-quest-petent-yes {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #091a10;
  border: 1px solid #33aa55;
  color: #55cc77;
  white-space: nowrap;
}
.enc-quest-petent-no {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: #160a0a;
  border: 1px solid #553333;
  color: #886666;
  white-space: nowrap;
}
.enc-quest-npc-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.enc-quest-npc-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  padding: 6px 10px;
  flex: 1;
  min-width: 80px;
}
.enc-quest-npc-label {
  font-size: 9px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.enc-quest-npc-val {
  font-size: 12px;
  color: #bbb;
  font-weight: 600;
}
.enc-quest-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.enc-quest-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.enc-quest-section-hdr {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #1c1c1c;
  padding-bottom: 3px;
}
.enc-quest-outcome {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 8px 10px;
}
.enc-quest-outcome-label {
  font-size: 11px;
  font-weight: 700;
  color: #999;
}
.enc-quest-prereq {
  font-size: 12px;
  color: #aa8833;
  background: #130f00;
  border: 1px solid #302400;
  border-radius: 6px;
  padding: 7px 10px;
  line-height: 1.5;
}
.enc-quest-prereq-label {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
  color: #cc9922;
}
.enc-quest-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.enc-quest-skill-effect {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
.enc-quest-progress-row {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.enc-quest-progress-range {
  font-size: 10px;
  font-weight: 700;
  color: #33bb77;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.enc-quest-progress-dialogue {
  font-size: 11px;
  color: #777;
  font-style: italic;
  line-height: 1.55;
}
.enc-quest-note {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  padding-left: 8px;
  border-left: 2px solid #222;
}
.enc-quest-location {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 6px 10px;
}
.enc-quest-location-num {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #33bb77;
  min-width: 14px;
  flex-shrink: 0;
}

/* ── Mechanic detail panel ──────────────────────────────────────────────── */
.enc-mech-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.enc-mech-note {
  font-size: 12px;
  color: #888;
  background: #0a0a0a;
  border: 1px solid #1c1c1c;
  border-radius: 6px;
  padding: 7px 10px;
  line-height: 1.5;
}
.enc-mech-tip {
  color: #aa8833;
  border-color: #302400;
  background: #130f00;
}
/* Soul Tree */
.enc-mech-branch { display: flex; flex-direction: column; gap: 4px; }
.enc-mech-branch-sub { font-size: 10px; color: #666; font-weight: 400; text-transform: none; letter-spacing: 0; }
.enc-mech-nodes { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.enc-mech-node {
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.enc-mech-node-name {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ddd;
}
.enc-mech-node-effect {
  font-size: 11px;
  color: #888;
  line-height: 1.5;
  white-space: pre-line;
}
.enc-mech-node-costs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.enc-mech-cost-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: #0e0e0e;
  border: 1px solid #252525;
  border-radius: 4px;
  padding: 3px 8px;
  min-width: 38px;
}
.enc-mech-cost-rank { font-size: 9px; font-weight: 700; color: #4477cc; text-transform: uppercase; letter-spacing: 0.5px; }
.enc-mech-cost-val  { font-size: 11px; color: #bbb; font-weight: 600; white-space: nowrap; }
/* Triumphs */
.enc-mech-triumph-list { display: flex; flex-direction: column; gap: 3px; }
.enc-mech-triumph-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 5px;
  padding: 5px 10px;
  gap: 8px;
}
.enc-mech-triumph-name   { font-size: 12px; color: #aaa; }
.enc-mech-triumph-reward { font-size: 11px; font-weight: 700; color: #4477cc; font-family: 'Rajdhani', Arial, sans-serif; letter-spacing: 0.5px; white-space: nowrap; }
/* Formula */
.enc-mech-formula {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #c8b8ff;
  background: #0e0d1a;
  border: 1px solid #2a2040;
  border-radius: 6px;
  padding: 8px 12px;
  letter-spacing: 0.3px;
}
.enc-mech-formula-vars { display: flex; flex-direction: column; gap: 4px; }
.enc-mech-formula-var  { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.enc-mech-var-name { font-weight: 700; color: #c8b8ff; min-width: 66px; flex-shrink: 0; }
.enc-mech-var-desc { color: #888; line-height: 1.5; }
.enc-mech-example { display: flex; flex-direction: column; gap: 4px; }
.enc-mech-example-desc { font-size: 11px; color: #666; }
/* Alignment */
.enc-mech-align-row { display: flex; gap: 6px; flex-wrap: wrap; }
.enc-mech-align-chip {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 7px 10px;
}
.enc-mech-align-type { font-family: 'Rajdhani', Arial, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.enc-mech-align-desc { font-size: 11px; color: #777; line-height: 1.4; }
/* Status Effects */
.enc-mech-status-list { display: flex; flex-direction: column; }
.enc-mech-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 4px;
  border-bottom: 1px solid #111;
}
.enc-mech-status:last-child { border-bottom: none; }
.enc-mech-status-name {
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #c8b8ff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-width: 82px;
  flex-shrink: 0;
  padding-top: 1px;
}
.enc-mech-status-desc { font-size: 12px; color: #888; line-height: 1.5; }
/* Generic sections */
.enc-mech-section {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.enc-mech-section-label { font-family: 'Rajdhani', Arial, sans-serif; font-size: 11px; font-weight: 700; color: #4477cc; text-transform: uppercase; letter-spacing: 0.5px; }
.enc-mech-section-text  { font-size: 12px; color: #888; line-height: 1.55; white-space: pre-line; }
/* DoT / Fatigue cards */
.enc-mech-dot-card, .enc-mech-fatigue-card {
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.enc-mech-dot-name  { font-family: 'Rajdhani', Arial, sans-serif; font-size: 13px; font-weight: 700; color: #ddd; }
.enc-mech-dot-desc  { font-size: 12px; color: #888; line-height: 1.5; }
/* Titles */
.enc-mech-title-grid { display: flex; flex-direction: column; gap: 4px; }
.enc-mech-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 5px;
  padding: 5px 10px;
  gap: 8px;
}
.enc-mech-title-name    { font-family: 'Rajdhani', Arial, sans-serif; font-size: 13px; font-weight: 700; color: #ddaa00; flex-shrink: 0; }
.enc-mech-title-achieve { font-size: 11px; color: #777; text-align: right; }

/* ── YouTube playlist link ──────────────────────────────────────────────── */
.enc-playlist-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 14px;
  background: #1a0808;
  border: 1px solid #cc2200;
  border-radius: 6px;
  color: #ff4422;
  font-family: 'Rajdhani', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.enc-playlist-link:hover {
  background: #2a0e08;
  border-color: #ff4422;
  color: #ff6644;
}

/* ── Significant NPC detail ─────────────────────────────────────────────── */
.enc-npc-info-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.enc-npc-body { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.enc-npc-stock-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; padding: 4px 0;
  border-bottom: 1px solid #222;
}
.enc-npc-stock-row:last-child { border-bottom: none; }
.enc-npc-stock-price { font-size: 12px; color: #ddaa00; font-weight: 700; margin-left: auto; }
.enc-npc-stock-note  { font-size: 11px; color: #777; font-style: italic; }