.tagline{font-size:11px;letter-spacing:4px;color:#444;text-transform:uppercase;}
.hint{font-size:10px;letter-spacing:2px;color:#272737;text-transform:uppercase;margin-top:2px;}
.stat-row{display:flex;gap:44px;margin:8px 0;}
.stat-box{text-align:center;}
.stat-val{font-size:34px;font-weight:900;color:#f59e0b;}
.stat-lbl{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;}
.name-row{margin:18px 0 4px;}
.name-input{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;color:#e2e8f0;font-size:14px;font-weight:600;
  letter-spacing:1px;padding:10px 18px;text-align:center;width:220px;
  outline:none;transition:border-color .2s,box-shadow .2s;
  font-family:'Segoe UI',sans-serif;
}
.name-input::placeholder{color:#374151;letter-spacing:.5px;font-weight:400;}
.name-input:focus{border-color:rgba(168,85,247,.6);box-shadow:0 0 16px rgba(168,85,247,.25);}

#dev-move-pad[hidden]{display:none!important;}
#class-portrait{order:0;}
#bars-left-meters{order:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}

/* ── CLASS PORTRAIT (ENERGY-HUD-01) ── */
.class-portrait{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35);border-radius:9px;
  box-shadow:inset 0 0 8px rgba(34,211,238,.12),0 0 0 1px rgba(0,0,0,.4);pointer-events:auto;}
.class-portrait-glyph{font-size:20px;line-height:1;filter:drop-shadow(0 0 4px rgba(34,211,238,.4));}
/* Empty energy = grey (WCAG: no saturated red). Soft cyan pulse on reject only. */
#energy-track.energy-empty .si-energy,.energy-empty{}
#energy-track.energy-flash{animation:energy-flash .4s ease-in-out 2 alternate;}
.energy-warning--show{height:auto;min-height:14px;opacity:1;color:#cbd5e1;}
.buff-icon{position:relative;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);cursor:default;}
.buff-icon--buff{border-color:rgba(34,211,238,.45);box-shadow:0 0 6px rgba(34,211,238,.18);}
.buff-icon--debuff{border-color:rgba(168,85,247,.45);box-shadow:0 0 6px rgba(168,85,247,.18);}
.buff-icon--zone-heal{border-color:rgba(34,197,94,.55);box-shadow:0 0 6px rgba(34,197,94,.25);color:#22c55e;}
.buff-glyph{font-size:13px;line-height:1;}
.buff-dur{position:absolute;bottom:-2px;right:-2px;font-size:7px;background:rgba(0,0,0,.7);color:#e5e7eb;
  padding:0 2px;border-radius:3px;font-variant-numeric:tabular-nums;}
.buff-icon:hover,.buff-icon:focus{outline:1px solid rgba(34,211,238,.6);outline-offset:1px;}
.hp-critical{animation:hp-low-pulse .55s ease-in-out infinite alternate;}
.hp-shake{animation:hp-shake .32s ease-out;}
.wm-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.wm-title{font-size:14px;font-weight:900;letter-spacing:4px;color:#c0923a;text-transform:uppercase;}
.wm-sub{font-size:9px;letter-spacing:1px;color:#333;text-transform:uppercase;margin-top:4px;}
.wm-close{background:transparent;border:1px solid rgba(255,255,255,.1);color:#555;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:10px;letter-spacing:1px;flex-shrink:0;}
.wm-close:hover{color:#aaa;border-color:rgba(255,255,255,.25);}
.wm-body{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.wm-graph{position:relative;height:220px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.25);}
.wm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.wm-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(8,8,18,.9);cursor:pointer;transition:all .18s;pointer-events:all;min-width:64px;text-align:center;}
.wm-node:hover{border-color:var(--nc);background:rgba(255,255,255,.03);}
.wm-node.wm-sel{border-color:var(--nc);background:rgba(255,255,255,.04);box-shadow:0 0 14px var(--nc);}
.wm-node.wm-current::before{content:'▲ YOU';position:absolute;top:-16px;font-size:7px;letter-spacing:1px;color:var(--nc);}
.wm-ic{font-size:15px;line-height:1;}
.wm-lb{font-size:7px;letter-spacing:2px;text-transform:uppercase;color:#555;}
.wm-node.wm-sel .wm-lb,.wm-node.wm-current .wm-lb{color:var(--nc);}
.wm-stars{font-size:7px;color:#444;}
.wm-node.wm-sel .wm-stars{color:var(--nc);}
.wm-node.wm-dest{border-color:#fde68a;box-shadow:0 0 14px rgba(253,230,138,.6);animation:wmDestPulse 1.6s ease-in-out infinite;}
.wm-node.wm-dest .wm-lb{color:#fde68a;}
.wm-dest-pin{position:absolute;top:-14px;right:-8px;font-size:14px;line-height:1;filter:drop-shadow(0 0 4px rgba(253,230,138,.9));pointer-events:none;}
.wm-detail{padding:16px 20px;overflow-y:auto;flex:1;}
.wm-det-hdr{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.wm-det-ic{font-size:26px;}
.wm-det-name{font-size:15px;font-weight:900;letter-spacing:3px;color:#c0923a;}
.wm-det-danger{font-size:10px;color:#555;margin-top:3px;letter-spacing:1px;}
.wm-det-tagline{font-size:11px;color:#666;font-style:italic;margin-bottom:12px;line-height:1.5;}
.wm-det-grid{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.wm-route-hint{text-align:center;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(192,146,58,.6);border:1px dashed rgba(192,146,58,.2);border-radius:6px;padding:8px;margin-bottom:8px;}
.wm-town-hint{padding:24px;text-align:center;font-size:12px;color:#444;letter-spacing:1px;}

/* ── INVENTORY PANEL (fixed floating, shown by toggleInv()) ── */
#inv-panel{
  position:fixed;right:8px;top:52px;width:190px;z-index:50;
  pointer-events:auto;
  background:rgba(5,5,12,0.92);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:0 0 0 8px;
  display:none;overflow-y:auto;overflow-x:hidden;
  max-height:calc(100vh - 60px);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent;
}
.ip-section{margin-bottom:4px;}
.ip-section-hd{
  font-size:8px;letter-spacing:1.8px;color:#334155;
  text-transform:uppercase;padding:6px 10px 3px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.ip-section:first-child .ip-section-hd{border-top:none;}
/* CREDITS-V0-06 (#3894) — currency section: amber accent, slightly larger text */
.ip-section--currency .ip-section-hd{color:#92620a;letter-spacing:1.8px;}
.ip-currency-row .ip-mat-lbl{font-size:11px;font-weight:600;}
.ip-currency-row .ip-mat-qty{font-size:11px;font-weight:700;color:#fbbf24;}
.ip-item{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;cursor:default;
  transition:background .1s;
}
.ip-item:hover{background:rgba(255,255,255,0.05);}
.ip-item-icon{font-size:13px;line-height:1;flex-shrink:0;}
.ip-item-name{flex:1;font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ip-item-badge{font-size:7px;font-weight:700;letter-spacing:.5px;padding:1px 4px;border-radius:3px;text-transform:uppercase;flex-shrink:0;}
.ip-badge-eq {background:rgba(74,222,128,0.15);color:#4ade80;}
.ip-badge-bag{background:rgba(100,116,139,0.12);color:#475569;}
.ip-mat{
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 10px;cursor:default;transition:background .1s;
}
.ip-mat:hover{background:rgba(255,255,255,0.05);}
.ip-mat.ip-mat-pulse{animation:ip-mat-stabilized-pulse 1.6s ease-out forwards;border-radius:6px;}
.ip-consumable{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 10px;cursor:pointer;transition:background .1s;
  border-left:2px solid rgba(34,197,94,0.25);
}
.ip-consumable:hover{background:rgba(34,197,94,0.06);border-left-color:rgba(34,197,94,0.6);}
.ip-mat-lbl{font-size:10px;white-space:nowrap;}
.ip-mat-qty{font-size:10px;font-weight:700;color:#94a3b8;}
.ip-empty{padding:10px;font-size:9px;color:#334155;text-align:center;font-style:italic;}
/* Weight bar */
.ip-weight{padding:6px 10px 8px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2px;}
.ip-weight-lbl{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.5px;margin-bottom:4px;color:#94a3b8;}
.ip-weight-track{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.ip-weight-bar{height:100%;border-radius:3px;transition:width .3s,background .3s;}
/* Mira rest row in craft panel */
.mira-rest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;background:rgba(192,146,58,.05);border:1px solid rgba(192,146,58,.15);
  border-radius:8px;margin:6px 0 2px;}
.mira-rest-info{display:flex;flex-direction:column;gap:3px;}
.mira-rest-btn{padding:6px 14px;border:1px solid rgba(192,146,58,.4);background:rgba(192,146,58,.08);
  color:#c0923a;border-radius:6px;cursor:pointer;font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
.mira-rest-btn:disabled{opacity:.38;cursor:default;}
.it-header{padding:10px 12px 8px;display:flex;justify-content:space-between;align-items:center;border-radius:9px 9px 0 0;}
.it-mat-name{font-size:13px;font-weight:700;}
.it-stock{font-size:10px;color:#64748b;}
.it-body{padding:4px 0 8px;}
.it-section-lbl{font-size:8px;letter-spacing:1.5px;color:#475569;padding:2px 12px 5px;text-transform:uppercase;}
.it-recipe{padding:5px 12px;border-top:1px solid rgba(255,255,255,0.04);}
.it-recipe.craftable{background:rgba(74,222,128,0.04);}
.it-recipe-top{display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.it-recipe-icon{font-size:13px;line-height:1;}
.it-recipe-name{flex:1;font-size:11px;font-weight:600;color:#e2e8f0;}
.it-badge{font-size:8px;font-weight:700;letter-spacing:1px;padding:2px 5px;border-radius:4px;text-transform:uppercase;white-space:nowrap;}
.it-badge-ready{background:rgba(74,222,128,0.18);color:#4ade80;border:1px solid rgba(74,222,128,0.3);}
.it-badge-missing{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.2);}
.it-badge-locked{background:rgba(100,116,139,0.15);color:#64748b;border:1px solid rgba(100,116,139,0.2);}
.it-recipe-mats{display:flex;flex-wrap:wrap;gap:3px;}
.it-mat-chip{font-size:9px;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,0.05);color:var(--mc);}
.it-mat-chip.ok{box-shadow:inset 0 0 0 1px rgba(74,222,128,0.2);}
.it-mat-chip.bad{color:#f87171!important;box-shadow:inset 0 0 0 1px rgba(239,68,68,0.25);}
.it-no-recipes{padding:8px 12px;color:#475569;font-style:italic;font-size:10px;}
/* XP bars (Base + Class) — slim rows under HP/Energy, separated by a hairline.
   Each row shows its level as an inline "Lv N" tag (.pvf-lv) next to the label;
   percent is right-aligned. (The portrait level badge was retired in favor of
   these consistent inline tags.) */
#player-vital-frame .pvf-xp{display:flex;flex-direction:column;gap:3px;margin-top:2px;
  padding-top:5px;border-top:1px solid rgba(255,255,255,.06);}
#player-vital-frame .pvf-xp .ph-skill{cursor:default;padding:1px 0;gap:2px;}
#player-vital-frame .pvf-xp .ph-skill-head{align-items:baseline;gap:5px;}
#player-vital-frame .pvf-xp .ph-skill-name{flex:0 0 auto;color:#7a7a8a;}
#player-vital-frame .pvf-xp .ph-xp-pct{margin-left:auto;}
/* Level as a small inline "Lv N" tag next to the row label (Base + Class) — not a big floating number */
#player-vital-frame .pvf-xp .pvf-lv{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#6a6a85;line-height:1;}
#player-vital-frame .pvf-xp .pvf-lv b{font-size:10px;font-weight:700;letter-spacing:0;color:#cbd5e1;font-variant-numeric:tabular-nums;}
#prog-hud.collapsed #prog-body{display:none;}
.ph-drag-grip.dragging{cursor:grabbing;background:rgba(255,255,255,.08);}
#prog-hud.locked .ph-lock-btn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4);color:#fbbf24;}
#prog-hud.locked .ph-lock-btn::before{content:'🔒';}
#prog-hud.locked .ph-lock-btn:hover{background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.6);}
#prog-hud.locked .ph-drag-grip{cursor:default;}
#prog-hud.locked .ph-skill,#prog-hud.locked .ph-hp{cursor:default;}
#prog-hud.locked .ph-resize-grip{pointer-events:none;opacity:.1;}
/* Active skill — subtle label brightening for 4s after XP gain */
.ph-skill.ph-active{background:rgba(255,255,255,.04);}
.ph-skill.ph-active .ph-skill-name{color:#aaa;}
.ph-skill.ph-active .ph-xp-pct{color:#aaa;}
.ph-bar-fill.ph-xp-flash{animation:ph-xp-flash .55s ease-out forwards;}
.ph-skill.ph-near-level .ph-bar-fill{animation:ph-near-pulse 1.2s ease-in-out infinite;}
.ph-skill.ph-near-level .ph-xp-pct{color:#fbbf24;font-weight:700;}
/* PROG-LEVEL-HUD-MAX-01 (#4133): Survivor MAX (product ceiling) — a celebrated,
   mastered terminal state on the base level row (class set by src/hud-survivor-level.js).
   Gold-accented FULL bar + "MAX" label, distinct from the in-progress bar so the
   player reads "mastered", not "stuck". Static (no flashing) — WCAG-safe (#3862). */
.psk-row--maxlevel .ph-bar-fill{
  width:100% !important;
  background:linear-gradient(90deg,#fbbf24,#fde68a) !important;
  box-shadow:0 0 6px 1px rgba(251,191,36,.45);
}
.psk-row--maxlevel .ph-xp-pct{color:#fbbf24;font-weight:900;letter-spacing:.5px;}
.psk-row--maxlevel .ph-skill-lvl{color:#fde68a;}
.ph-skill.ph-job-levelup{animation:ph-job-levelup 1.5s ease-out forwards;}
.ph-hp{display:flex;align-items:center;gap:5px;padding:3px 4px;border-radius:5px;cursor:grab;transition:background .3s;}
.ph-hp-icon{font-size:10px;line-height:1;flex-shrink:0;}
.ph-hp-txt{font-size:9px;color:#ef4444;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
/* Row sort — drag to reorder within HUD */
.ph-skill.ph-sorting,.ph-hp.ph-sorting{opacity:.35;cursor:grabbing;}
.ph-skill.ph-sort-above,.ph-hp.ph-sort-above{border-top:2px solid rgba(255,255,255,.35);margin-top:-2px;}
/* Identity block — HUD-PLAYER-FRAME-CONSOLIDATE-01 */
.ph-identity{display:flex;flex-direction:row;align-items:center;gap:7px;padding:4px 4px 5px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2px;}
.ph-id-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
/* ENERGY-HUD-01-FIX-01: compact class portrait for the #prog-hud identity (the
   38px .class-portrait was sized for the hidden legacy #bars-left panel). */
#prog-hud .class-portrait{width:24px;height:24px;}
#prog-hud .class-portrait-glyph{font-size:15px;}
/* Energy bar row in #prog-hud — mirrors .ph-hp; #energy-track/#energy-bar keep
   their id-based styling (relocated from the hidden #bars-left). */
.ph-energy{display:flex;align-items:center;gap:5px;padding:2px 4px;border-radius:5px;}
.ph-energy #energy-track{flex:1;height:7px;}
.ph-energy #energy-text{width:auto;color:#7dd3fc;}

/* Hunt tracker row in prog-hud */
.ph-hunt{padding:4px 4px 3px;border-radius:5px;border-top:1px solid rgba(245,158,11,.12);margin-top:2px;}
.ph-hunt-head{display:flex;align-items:center;gap:4px;margin-bottom:3px;}
.ph-hunt-icon{font-size:10px;line-height:1;flex-shrink:0;}
.ph-hunt-name{font-size:8px;letter-spacing:1.5px;color:#f59e0b;text-transform:uppercase;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.ph-hunt-count{font-size:9px;font-weight:900;color:#f59e0b;line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums;}
.ph-hunt-bar{transition:width .35s ease-out;}
.ph-hunt-sub{font-size:7px;color:#6a5030;letter-spacing:1px;margin-top:2px;text-align:right;}
/* Milestone variant — stronger glow ring */
#levelup-screen.milestone{border-width:2px;}
#levelup-screen.milestone #lu-lvl{
  text-shadow:0 0 28px currentColor,0 0 60px currentColor,0 0 120px currentColor;
}
.perk-btn{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 20px;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px;width:162px;transition:all .15s;text-align:center;}
.perk-btn:hover{background:rgba(168,85,247,.18);border-color:#a855f7;transform:translateY(-5px);box-shadow:0 10px 28px rgba(168,85,247,.35);}
.perk-icon{font-size:34px;}.perk-name{font-size:13px;font-weight:700;letter-spacing:1px;}.perk-desc{font-size:11px;color:#777;line-height:1.5;}
#item-popup.show{transform:translateX(0);}
#target-card.tc-tier-boss{ box-shadow:0 0 18px rgba(239,68,68,0.25); }
#target-card.tc-tier-boss .tc-name{ font-size:14px; }
.tc-hp-fill--mid { background:linear-gradient(to right, #b45309, #f59e0b); }
.tc-hp-fill--low { background:linear-gradient(to right, #991b1b, #ef4444); }
/* Open state: arrow glyph flips from ▼ to ▲ via JS; label stays "INSPECT"
   so the affordance is stable. Button background brightens. */
.tc-expand-btn.tc-expand-btn--open{
  background:rgba(var(--tc-accent-rgb, 209,213,219), 0.2);
  color:#fff;
}
#target-inspect.ti-tier-boss{ box-shadow:0 0 18px rgba(var(--ti-accent-rgb,239,68,68),0.22); }
#skill-notif.show{top:16px;}
#matter-stabilized-toast.show{top:18px;opacity:1;}
#danger-room-warning.show{top:72px;opacity:1;}
.nav-icon-btn.active img{
  filter:brightness(1.15) drop-shadow(0 0 6px rgba(255,190,90,0.5));
}
/* Gentle pulse — stays on while action is pending */
.btn-notify      {animation:btn-notify       2.4s ease-in-out infinite;}
/* Three bright flashes — one-shot, overrides gentle pulse while it runs */
.btn-notify-flash{animation:btn-notify-flash 2s ease-in-out forwards;}
/* Codex new unlock → purple */
#codex-btn.btn-notify,#codex-btn.btn-notify-flash{--bn-glow:rgba(167,139,250,.6);}
/* Friends request incoming → cyan (FW-FEEL-06) */
#friends-btn.btn-notify,#friends-btn.btn-notify-flash{--bn-glow:rgba(100,220,255,.6);}
/* fp-hud-badge-pulse: brief flash via the existing flash animation */
.fp-hud-badge-pulse{animation:btn-notify-flash 2s ease-in-out forwards;--bn-glow:rgba(100,220,255,.6);}
/* Unspent-points badge: red numeric badge (Albion-style) shared by the Skills
   button (skill points) and Equipment button (attribute points). Clears when
   the spending panel opens, reappears on the next grant. */
#attrib-btn.skill-pts-badge::after{content:attr(data-skillpts);}
/* CHAR-SHEET-SPLIT-01: AP badge moved #char-btn (Inventory) → #char-sheet-btn
   (Character Sheet — where AP is actually spent). */
#char-sheet-btn.attr-pts-badge::after{content:attr(data-attrpts);}
#attrib-btn.skill-pts-badge::after,#char-sheet-btn.attr-pts-badge::after{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 3px;border-radius:9px;
  background:#ef4444;color:#fff;font:700 10px/16px sans-serif;text-align:center;
  box-shadow:0 0 0 1.5px rgba(10,10,18,.9),0 0 6px 2px rgba(239,68,68,.75);
  pointer-events:none;
  animation:pts-badge-pulse 1.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  #attrib-btn.skill-pts-badge::after,#char-sheet-btn.attr-pts-badge::after{animation:none;}
}
/* PROGRESSION-HUB-01: FTUE red dot — first time the Progression panel has
   ever been opened. Same mechanism as #attrib-btn.skills-ftue-dot above
   (src/ftue-badges.js is the shared coordinator), re-scoped to the new icon. */
#progression-btn.progression-ftue-dot{--bn-glow:rgba(239,68,68,.6);animation:btn-notify 2.4s ease-in-out infinite;}
#progression-btn.progression-ftue-dot::after{
  content:'';position:absolute;top:5px;right:5px;
  width:8px;height:8px;border-radius:50%;pointer-events:none;
  background:#ef4444;
  box-shadow:0 0 0 1.5px rgba(10,10,18,.9),0 0 6px 2px rgba(239,68,68,.75);
  animation:skills-ftue-pulse 1.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  #progression-btn.progression-ftue-dot,#progression-btn.progression-ftue-dot::after{animation:none;}
}
.ap-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.ap-pts-block{display:flex;align-items:baseline;gap:5px;}
.ap-pts{font-size:24px;font-weight:900;color:#f59e0b;line-height:1;}
.ap-pts-sub{font-size:9px;color:#555;font-weight:400;letter-spacing:.5px;}
.ap-build{font-size:9px;color:#555;letter-spacing:1px;text-align:right;}
.ap-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.ap-row:last-of-type{border-bottom:none;}
.ap-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0;padding-top:2px;}
.ap-body{flex:1;min-width:0;}
.ap-top-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.ap-name{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;}
.ap-cur{font-size:8px;color:#3a3a4a;font-weight:400;letter-spacing:.4px;}
.ap-track{height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:5px;}
.ap-fill{height:100%;border-radius:2px;transition:width .25s;}
.ap-stat{font-size:10px;color:#94a3b8;font-weight:600;letter-spacing:.2px;}
.ap-next{font-size:9px;color:#4ade80;margin-top:4px;opacity:.85;letter-spacing:.2px;}
.ap-btn{padding:4px 10px;border:1px solid;background:rgba(0,0,0,.3);border-radius:5px;cursor:pointer;font-size:14px;font-weight:900;line-height:1;transition:all .12s;flex-shrink:0;margin-top:2px;}
.ap-btn:hover:not([disabled]){filter:brightness(1.4);}
.ap-btn[disabled]{opacity:.2;cursor:default;}
.ap-totals{margin:10px 0 8px;padding:10px 12px;background:rgba(255,255,255,.025);border-radius:8px;border:1px solid rgba(255,255,255,.06);}
.ap-totals-hd{font-size:8px;letter-spacing:2px;color:#333;text-transform:uppercase;margin-bottom:8px;}
.ap-totals-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;}
.ap-tc{display:flex;justify-content:space-between;align-items:center;}
.ap-tl{font-size:9px;color:#444;letter-spacing:.3px;}
.ap-tv{font-size:10px;font-weight:700;color:#94a3b8;font-variant-numeric:tabular-nums;}

/* QUEST TRACKER */
#quest-tracker{position:fixed;bottom:90px;right:16px;z-index:10;display:none;flex-direction:column;gap:5px;pointer-events:none;width:186px;}
.qt-quest{background:rgba(8,8,14,.9);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px 9px;}
.qt-name{font-size:8px;font-weight:700;color:#bbb;letter-spacing:.4px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qt-track{height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:2px;}
.qt-fill{height:100%;border-radius:2px;transition:width .35s;}
.qt-prog{font-size:7px;color:#444;}

/* ── SHARED FULL-WIDTH CLOSE BUTTON ──
   Applies to every "footer" close button inside a panel.
   #close-craft is intentionally excluded — it sits in a flex header row. */
#close-attrib,#close-quest,#close-char,#close-harkon{
  display:block;width:100%;
  border:1px solid rgba(255,255,255,.1);background:transparent;color:#555;
  border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;transition:color .15s,border-color .15s;}
#close-attrib                         {margin-top:10px;padding:7px;}
#close-quest                          {margin-top:14px;padding:7px;}
#close-char                           {padding:9px;letter-spacing:3px;}
#close-attrib:hover,#close-quest:hover{color:#ccc;border-color:rgba(255,255,255,.3);}
#close-char:hover                     {color:#fff;border-color:rgba(255,255,255,.3);}
#quest-log h2{font-size:20px;letter-spacing:6px;color:#06b6d4;margin-bottom:2px;}
.ql-sub{font-size:10px;color:#555;letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;}
.ql-section{font-size:9px;letter-spacing:3px;color:#333;text-transform:uppercase;margin:14px 0 8px;}
.ql-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:11px 13px;background:rgba(255,255,255,.02);margin-bottom:8px;}
.ql-card.done{opacity:.45;}
.ql-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:7px;}
.ql-icon{font-size:20px;flex-shrink:0;line-height:1.2;}
.ql-info{flex:1;}.ql-name{font-size:12px;font-weight:700;letter-spacing:.5px;}
.ql-desc{font-size:10px;color:#666;margin-top:2px;}
.ql-reward{font-size:10px;color:#f59e0b;font-weight:700;white-space:nowrap;padding-top:2px;}
.ql-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:3px;}
.ql-fill{height:100%;border-radius:2px;transition:width .3s;}
.ql-prog-lbl{font-size:9px;color:#555;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ql-card.ql-critical{border-color:rgba(253,230,138,.45);background:linear-gradient(180deg,rgba(253,230,138,.06),rgba(253,230,138,.02));}
.ql-critical-tag{display:inline-block;font-size:8px;letter-spacing:2px;color:#fde68a;background:rgba(253,230,138,.12);border:1px solid rgba(253,230,138,.3);border-radius:3px;padding:1px 6px;margin-left:6px;vertical-align:middle;}
.ql-skip-btn{font-size:9px;color:#888;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:2px 7px;cursor:pointer;letter-spacing:.5px;transition:color .15s,border-color .15s;}
.ql-skip-btn:hover{color:#fde68a;border-color:rgba(253,230,138,.3);}
#close-craft{flex-shrink:0;align-self:flex-start;padding:6px 14px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#555;border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;transition:color .15s,border-color .15s;}
.wb-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;}
.wb-icon{font-size:48px;line-height:1;}
.wb-title{font-size:14px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#fb923c;}
.wb-desc{font-size:11px;letter-spacing:1px;text-align:center;line-height:1.8;color:#555;}
#close-craft:hover{color:#ccc;border-color:rgba(255,255,255,.35);}
/* ── compact quality / context strip ── */
#craft-prog{margin-bottom:12px;}
.cq-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;}
.cq-lbl{font-size:8px;letter-spacing:2px;color:#444;text-transform:uppercase;flex-shrink:0;}
.cq-badge{font-size:8px;padding:2px 8px;border-radius:10px;border:1px solid;letter-spacing:.5px;white-space:nowrap;}
.cq-note{font-size:8px;color:#333;letter-spacing:.4px;}
.cb-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
.cb-unlocked{font-size:10px;color:#4ade80;}.cb-upcoming{font-size:10px;color:#3a3a55;}
/* ── recipe grid ── */
#recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:10px;}
/* ── base card ── */
.recipe-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;background:rgba(255,255,255,.02);transition:border-color .2s,box-shadow .2s;position:relative;}
/* state: all materials available — highlight the card */
.recipe-card.rc-ready{border-color:rgba(251,146,36,.45);background:rgba(251,146,36,.04);}
.recipe-card.rc-ready:hover{border-color:rgba(251,146,36,.8);box-shadow:0 0 18px rgba(251,146,36,.12);}
/* state: locked by craft level — strongly dimmed, no interaction */
.recipe-card.rc-locked{opacity:.25;pointer-events:none;}
.rc-lock{position:absolute;top:9px;right:10px;font-size:13px;line-height:1;opacity:.5;}
/* ── card layout ── */
.rc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.rc-icon{font-size:26px;line-height:1;flex-shrink:0;}
.rc-info{flex:1;min-width:0;}
.rc-name{font-size:12px;font-weight:700;letter-spacing:.4px;line-height:1.3;margin-bottom:2px;}
.rc-stat{font-size:10px;color:#fb923c;}
/* badge row: craft-level req + slot type */
.rc-badges{display:flex;align-items:center;gap:5px;margin-bottom:8px;flex-wrap:wrap;}
.rc-lvl-badge{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.06);color:#555;letter-spacing:.8px;}
.rc-slot-badge{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.04);color:#3a3a55;letter-spacing:.8px;text-transform:capitalize;}
/* CRAFT-SPEC-UI-06: specialization badge + quality tier chips (recipe cards + mastery panel) */
.rc-spec-badge{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(13,148,136,.18);color:#0d9488;letter-spacing:.6px;}
/* Tier chips use the canonical BODY_PART_ROLL_TIERS colors (content/items.js):
   Tuned #6eb4dc / Prime #fbbf24 — same vocabulary as the Crafting Mastery
   panel and item tier displays (CRAFT-SPEC-UI-QUALITY-01 #4349). */
.cv3-tier-chip{font-size:7px;padding:1px 6px;border-radius:8px;background:rgba(156,163,175,.14);color:#9ca3af;letter-spacing:.5px;}
.cv3-tier-chip--tuned{background:rgba(110,180,220,.16);color:#6eb4dc;}
.cv3-tier-chip--prime{background:rgba(251,191,36,.16);color:#fbbf24;}
.cv3-tier-chip--locked{background:rgba(107,114,128,.12);color:#6b7280;}
.craft-mastery-btn{font-size:9px;padding:2px 8px;border-radius:8px;background:rgba(13,148,136,.15);color:#0d9488;border:1px solid rgba(13,148,136,.35);cursor:pointer;letter-spacing:.5px;margin-left:8px;}
.craft-mastery-btn:hover{background:rgba(13,148,136,.28);color:#5eead4;}
/* Crafting Mastery panel (.cmp-*) styles were module-injected by
   src/crafting-mastery-panel.js (CRAFT-SPEC-UI-QUALITY-01 #4349). That
   panel is retired (PROGRESSION-BOARD-02, Step 2) — its content now
   lives in the Progression Board's node drawers (src/progression-panel.js,
   .pg-drawer-* styles, same file's _injectStyles()). */
/* WBR-T3-PANEL-POLISH-01 (#3273): Body Reconstruction group header in the craft panel */
.rc-group-header{width:100%;grid-column:1/-1;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#6eb4dc;margin:8px 0 2px;padding-top:8px;border-top:1px solid rgba(110,180,220,.18);}
/* material list */
.rc-mats{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;}
.rc-mat-line{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;}
.rc-mat-name{color:#555;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-mat-qty{font-variant-numeric:tabular-nums;font-weight:700;flex-shrink:0;}
.mat-ok{color:#22c55e;}.mat-no{color:#ef4444;}
/* forge / brew button */
.rc-btn{width:100%;padding:8px;border:none;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:all .15s;}
.rc-btn:disabled{background:rgba(255,255,255,.05);color:#333;cursor:not-allowed;}

/* ══ WBR-SALVAGE: Workbench top tab bar (🔨 Craft | ♻️ Salvage) ══
   V3: segmented-pill control so the tabs read as obviously-clickable tabs
   right away (V2's underline-text style was too easy to miss). */
.wb-tabs{display:flex;gap:6px;padding:4px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:11px;}
.wb-tab{appearance:none;flex:0 0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#9aa4b2;padding:9px 20px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.wb-tab:hover{background:rgba(255,255,255,.08);color:#e5e7eb;border-color:rgba(255,255,255,.22);}
.wb-tab-active{background:rgba(110,180,220,.18);border-color:rgba(110,180,220,.65);color:#9fd6f5;box-shadow:0 0 14px rgba(110,180,220,.18);}
.wb-tab-active:hover{background:rgba(110,180,220,.24);color:#bfe6ff;border-color:rgba(110,180,220,.8);}
/* ── Salvage tab body ── */
.sv-intro{grid-column:1/-1;font-size:10px;line-height:1.7;color:#8a8a9a;letter-spacing:.3px;margin:2px 0 4px;}
.sv-intro b{color:#cbd5e1;font-weight:700;}
.sv-bulk{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02);margin-bottom:4px;}
.sv-bulk-hint{font-size:9px;color:#6b7280;letter-spacing:.4px;}
.sv-bulk-hint b{color:#9ca3af;font-weight:700;}
.sv-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center;color:#6b7280;font-size:11px;}
.sv-empty-icon{font-size:42px;line-height:1;opacity:.5;}
.sv-empty-sub{font-size:10px;color:#555;}
.sv-empty-sub b{color:#8a8a9a;}
/* salvage card — reuses .recipe-card chrome; locked stays fully interactive
   (NO pointer-events:none — that was the V1 can't-unlock bug). */
.sv-card{display:flex;flex-direction:column;}
.sv-card.sv-locked{border-color:rgba(110,180,220,.35);background:rgba(110,180,220,.04);}
.sv-tier{font-size:8px;padding:2px 8px;border-radius:10px;border:1px solid;letter-spacing:1px;text-transform:uppercase;font-weight:700;}
.sv-locked-badge{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(110,180,220,.12);color:#6eb4dc;letter-spacing:.6px;}
.sv-actions{display:flex;gap:6px;margin-top:auto;padding-top:8px;}
/* lock = neutral outline; scrap (and bulk scrap) = red/destructive */
.sv-lock-btn{flex:1;padding:7px 4px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:transparent;color:#9ca3af;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.sv-lock-btn:hover{border-color:rgba(255,255,255,.4);color:#e5e7eb;}
.sv-lock-btn.sv-on{border-color:rgba(110,180,220,.5);background:rgba(110,180,220,.1);color:#6eb4dc;}
.sv-scrap-btn,.sv-bulk-btn{border:1px solid rgba(239,68,68,.5);border-radius:6px;background:rgba(239,68,68,.1);color:#f87171;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.sv-scrap-btn{flex:1;padding:7px 4px;}
.sv-bulk-btn{align-self:flex-start;padding:7px 14px;font-size:10px;letter-spacing:1.5px;border-radius:7px;}
.sv-scrap-btn:disabled,.sv-bulk-btn:disabled{opacity:.35;cursor:not-allowed;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#555;}
/* SALVAGE-BULK-TIERS-01 #3442: per-tier bulk scrap chips (one per tier present) */
.sv-chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.sv-tier-chip{align-self:auto;padding:6px 11px;}
/* top tier (Prime/Superior) — extra-destructive: scrapping your best rolls */
.sv-bulk-top{border-color:rgba(239,68,68,.85);background:rgba(239,68,68,.2);color:#fecaca;box-shadow:0 0 9px rgba(239,68,68,.22);}

/* ══ GAME-CONFIRM-01: in-game confirmation modal (replaces window.confirm) ══ */
.gc-overlay{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;background:rgba(4,8,14,.66);backdrop-filter:blur(2px);}
.gc-box{width:min(380px,92vw);background:linear-gradient(180deg,#10161f,#0b1018);border:1px solid rgba(110,180,220,.28);border-radius:14px;padding:22px 22px 18px;box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 30px rgba(110,180,220,.08);text-align:center;}
.gc-icon{font-size:30px;line-height:1;margin-bottom:8px;}
.gc-title{font-size:14px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#8fd0f0;margin-bottom:8px;}
.gc-body{font-size:11px;line-height:1.7;color:#aab4c0;margin-bottom:18px;}
.gc-body b{color:#e5e7eb;font-weight:700;}
.gc-actions{display:flex;gap:10px;justify-content:center;}
.gc-btn{flex:1;max-width:150px;padding:10px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .15s;border:1px solid;}
.gc-cancel{background:transparent;border-color:rgba(255,255,255,.18);color:#cbd5e1;}
.gc-cancel:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);color:#fff;}
.gc-confirm{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#e5e7eb;}
.gc-confirm:hover{filter:brightness(1.12);}
.gc-confirm.gc-danger{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.6);color:#fca5a5;}
.gc-confirm.gc-danger:hover{background:rgba(239,68,68,.26);border-color:rgba(239,68,68,.9);color:#fecaca;}
/* recoverable-materials list inside the confirm body (salvage refund preview) */
.gc-mats{margin:12px auto 0;max-width:250px;display:flex;flex-direction:column;gap:4px;text-align:left;}
.gc-mat{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;padding:5px 10px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(255,255,255,.02);}
.gc-mat-q{font-variant-numeric:tabular-nums;color:#cbd5e1;font-weight:700;white-space:nowrap;}
/* QUEST-OFFER-CARD-01 — structured quest accept card inside the GameConfirm body.
   The offered quest reads at a glance: crisp flavour, the objective checklist,
   and reward chips (crafted-item prize highlighted). Low-chrome: dark, cyan
   accents, no bright fills. Widen + left-align the box only when a .qo is present
   (icon + title stay centred). */
.gc-box:has(.qo){width:min(440px,94vw);}
.gc-body .qo{text-align:left;margin-top:2px;}
.qo-flavor{font-size:12px;line-height:1.5;color:#93a7bb;font-style:italic;margin:0 0 13px;}
.qo-underway{font-size:11px;color:#67e8f9;letter-spacing:.03em;margin:0 0 10px;}
.qo-block{margin:11px 0;}
.qo-block:last-child{margin-bottom:0;}
.qo-head{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5f7d95;margin-bottom:6px;}
.qo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.qo-step{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.35;color:#8296aa;}
.qo-step--now{color:#e8f4f9;font-weight:600;}
.qo-box{flex:0 0 auto;color:#3aa9bd;margin-top:1px;font-size:12px;}
.qo-step--now .qo-box{color:#67e8f9;}
.qo-step-label{flex:1 1 auto;}
.qo-rewards{display:flex;flex-wrap:wrap;gap:6px;}
.qo-chip{font-size:11.5px;line-height:1.2;padding:5px 10px;border-radius:999px;background:rgba(6,182,212,.09);border:1px solid rgba(6,182,212,.26);color:#bfe6f0;white-space:nowrap;}
.qo-chip--prize{background:rgba(6,182,212,.17);border-color:rgba(103,232,249,.55);color:#e6fdff;font-weight:700;}
/* FIRST-SPARK-TURNIN-01: skill-XP reward chip on the hand-in card — a mint accent
   (distinct from the cyan prize chip) so "Crafting XP +25" reads as the standout
   payoff the player is about to be paid. */
.qo-chip--xp{background:rgba(45,212,191,.16);border-color:rgba(45,212,191,.6);color:#ccfbef;font-weight:700;}
#harkon-panel h2{font-size:20px;letter-spacing:5px;margin-bottom:2px;}
#close-harkon{margin-top:12px;padding:10px;}
#close-harkon:hover{color:#ccc;border-color:rgba(255,255,255,.3);}
.npc-item-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02);margin-bottom:8px;cursor:pointer;transition:border-color .18s;}
.npc-item-row:hover{border-color:rgba(168,85,247,.35);}
.npc-item-row.selected{border-color:#a855f7;background:rgba(168,85,247,.08);}
.npc-item-row.enchanted{border-color:rgba(168,85,247,.3);opacity:.6;cursor:default;}
.npc-action-btn{width:100%;padding:11px;border:none;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;margin-top:10px;transition:all .15s;}
.npc-action-btn:disabled{background:rgba(255,255,255,.05);color:#333;cursor:not-allowed;}
.go-skills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:11px;color:#444;margin-top:4px;letter-spacing:2px;}
.go-skills span{color:#888;}

/* CHAR PANEL */
#char-panel{position:fixed;right:16px;top:56px;bottom:16px;z-index:150;width:min(600px,95vw);background:rgba(6,6,12,.97);border:1px solid rgba(255,255,255,.12);border-radius:14px;display:none;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);}
#char-header{padding:18px 24px 14px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
#char-header h2{font-size:18px;font-weight:900;letter-spacing:6px;color:#06b6d4;margin-bottom:2px;}
#char-headersub{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;}
.char-tabs{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;padding:0 8px;}
.char-tab{background:none;border:none;border-bottom:2px solid transparent;color:#555;padding:10px 16px;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:color .15s,border-color .15s;}
.char-tab:hover{color:#9ca3af;}
.char-tab.active{color:#06b6d4;border-bottom-color:#06b6d4;}
#char-body{display:block;flex:1;overflow:hidden;position:relative;}
.char-tab-content{display:none;height:100%;overflow-y:auto;}
.char-tab-content.active{display:block;}
.char-tab-pad{padding:16px 20px;}
#char-slots{padding:16px 20px;display:flex;flex-direction:column;gap:6px;}
#char-slots-title{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;margin-bottom:4px;flex-shrink:0;}
#char-bag{padding:16px 20px;overflow-y:auto;}
.char-slot{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.015);transition:border-color .2s;}
.char-slot.equipped{background:rgba(255,255,255,.03);}
.cs-sloticon{font-size:18px;width:26px;text-align:center;flex-shrink:0;}
.cs-info{flex:1;min-width:0;}
.cs-label{font-size:8px;letter-spacing:3px;color:#444;text-transform:uppercase;}
.cs-empty{font-size:11px;color:#2a2a3a;margin-top:2px;}
.cs-iname{font-size:12px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-idesc{font-size:10px;color:#666;margin-top:1px;}
.cs-uneq{flex-shrink:0;padding:5px 9px;border:1px solid rgba(239,68,68,.35);background:transparent;color:#ef4444;border-radius:6px;cursor:pointer;font-size:8px;letter-spacing:1px;text-transform:uppercase;transition:background .15s;}
.cs-uneq:hover{background:rgba(239,68,68,.18);}
/* ── Card Sockets ── */
.cs-sockets{display:flex;gap:4px;margin-top:5px;}
.cs-socket{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1.5px solid;font-size:13px;cursor:default;}
.cs-socket.empty{border-color:rgba(255,255,255,.15);color:#333;font-size:14px;}
.cs-socket.filled{cursor:pointer;transition:filter .15s;}
.cs-socket.filled:hover{filter:brightness(1.3);}
/* ── Upgrade level badge ── */
.cs-upg-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:rgba(249,115,22,.18);border:1px solid rgba(249,115,22,.35);color:#f97316;font-size:10px;font-weight:700;vertical-align:middle;}
/* ── LOOT-04-DUR-01 (#674) durability bar + broken indicator ── */
.cs-dur-row{margin-top:5px;display:flex;flex-direction:column;gap:2px;}
.cs-dur-lbl{font-size:9px;letter-spacing:1px;font-weight:700;}
.cs-dur-track{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.cs-dur-bar{height:100%;border-radius:2px;transition:width .25s ease;}
.cs-dur-low .cs-dur-track{box-shadow:0 0 6px rgba(239,68,68,.45);}
.cs-dur-broken .cs-dur-lbl{animation:cs-broken-pulse 1.6s ease-in-out infinite;}
.char-slot.cs-broken{border-color:rgba(239,68,68,.45)!important;background:rgba(239,68,68,.05);}
.cs-broken-x{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;color:#ef4444;font-size:22px;font-weight:900;text-shadow:0 0 6px rgba(239,68,68,.6);pointer-events:none;}
.cs-sloticon{position:relative;}
/* ── LOOT-04-DUR-01 (#674) Garrett repair section (inside craft panel) ── */
.gr-section{padding:10px 12px;margin-bottom:12px;border:1px solid rgba(251,146,60,.25);background:rgba(251,146,60,.05);border-radius:8px;}
.gr-empty{border-color:rgba(34,197,94,.18);background:rgba(34,197,94,.04);}
.gr-hd{font-size:10px;letter-spacing:2px;color:#fb923c;font-weight:700;margin-bottom:8px;text-transform:uppercase;}
.gr-empty .gr-hd{color:#22c55e;}
.gr-hd-sub{font-size:9px;color:#666;font-weight:400;letter-spacing:1px;margin-left:6px;}
.gr-empty-line{font-size:10px;color:#666;}
.gr-item{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:5px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);}
.gr-item-broken{border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.04);}
.gr-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0;}
.gr-info{flex:1;min-width:0;}
.gr-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gr-state{margin-left:6px;padding:1px 6px;border-radius:3px;font-size:8px;letter-spacing:1px;font-weight:700;vertical-align:middle;}
.gr-broken{background:rgba(239,68,68,.18);color:#ef4444;border:1px solid rgba(239,68,68,.35);}
.gr-damaged{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.3);}
.gr-meta{font-size:9px;color:#555;letter-spacing:1px;margin-top:2px;}
.gr-loc{}
.gr-costs{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px;}
.gr-cost{display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:1px 5px;border-radius:3px;border:1px solid rgba(255,255,255,.06);}
.gr-cost-q{font-weight:700;}
.gr-cost-ok{border-color:rgba(34,197,94,.25);}
.gr-cost-no{border-color:rgba(239,68,68,.3);color:#ef4444;}
.gr-btn{flex-shrink:0;padding:6px 10px;border:none;border-radius:6px;background:linear-gradient(135deg,#fb923c,#f97316);color:#fff;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:filter .15s;}
.gr-btn:disabled{opacity:.45;cursor:not-allowed;}
.gr-all-row{margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.gr-all-cost{font-size:9px;color:#888;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.gr-all-btn{padding:7px 14px;border:none;border-radius:6px;background:linear-gradient(135deg,#ef4444,#fb923c);color:#fff;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:filter .15s;}
.gr-all-btn:disabled{opacity:.45;cursor:not-allowed;}
.bag-title{font-size:9px;letter-spacing:3px;color:#444;text-transform:uppercase;margin-bottom:10px;}
.bag-empty{color:#2a2a3a;font-size:12px;line-height:1.8;margin-top:24px;text-align:center;}
.bag-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-left:3px solid #333;border-radius:0 8px 8px 0;background:rgba(255,255,255,.015);margin-bottom:6px;transition:background .15s;}
.bag-item:hover{background:rgba(255,255,255,.03);}
.bi-icon{font-size:20px;flex-shrink:0;}
.bi-info{flex:1;min-width:0;}
.bi-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bi-desc{font-size:10px;color:#666;margin-top:1px;}
.bi-btns{display:flex;gap:5px;flex-shrink:0;}
.bi-eq{padding:6px 12px;border:none;border-radius:6px;background:linear-gradient(135deg,#06b6d4,#3b82f6);color:#fff;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;transition:filter .15s;}
.bi-eq:hover{filter:brightness(1.2);}
.bi-del{padding:6px 9px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#444;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;transition:all .15s;}
.bi-del:hover{color:#ef4444;border-color:rgba(239,68,68,.4);}
#char-footer{padding:12px 24px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
@media(max-width:1024px){
  #char-panel{left:16px;right:16px;width:auto;}
}

/* ── Departure Panel ── */
#depart-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(520px,94vw);background:#08080f;border:1px solid rgba(192,146,58,.32);
  border-radius:18px;padding:22px 24px;z-index:120;box-shadow:0 0 60px rgba(192,146,58,.12);
  display:none;flex-direction:column;gap:0;}
#dp-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
#dp-zone-icon{font-size:32px;flex-shrink:0;}
#dp-title{font-size:18px;font-weight:700;letter-spacing:3px;color:#c0923a;}
#dp-danger{font-size:11px;color:#555;margin-top:3px;letter-spacing:1px;}
#dp-tagline{font-size:11px;color:#888;font-style:italic;margin-bottom:14px;line-height:1.5;}
#dp-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.dp-row{display:flex;gap:10px;font-size:10px;align-items:flex-start;}
.dp-label{color:#444;min-width:62px;flex-shrink:0;letter-spacing:1px;text-transform:uppercase;padding-top:1px;}
#dp-grid span:last-child{color:#888;line-height:1.5;}
#dp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.dp-tab{padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);color:#444;cursor:pointer;font-size:10px;
  letter-spacing:1px;transition:all .15s;}
.dp-tab:hover{border-color:rgba(192,146,58,.4);color:#c0923a;}
.dp-tab.dp-active{border-color:rgba(192,146,58,.6);color:#c0923a;background:rgba(192,146,58,.08);}
#dp-portal-hint{width:100%;text-align:center;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(192,146,58,.55);
  border:1px dashed rgba(192,146,58,.22);border-radius:8px;
  padding:9px 0;margin-bottom:10px;}
#dp-readiness{padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;margin-bottom:10px;}
.dp-ready-row{display:flex;gap:18px;font-size:11px;font-weight:700;}
.dp-warn{font-size:9px;color:#f97316;letter-spacing:1px;margin-top:5px;}
#dp-actions{display:flex;}
#dp-close-btn{flex:1;padding:10px 16px;border:1px solid rgba(255,255,255,.08);background:transparent;color:#555;border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;transition:background .15s;}
#dp-close-btn:hover{background:rgba(255,255,255,.05);color:#888;}

/* ── Run Summary (slide-up toast) ── */
#run-summary{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  min-width:260px;padding:14px 20px;background:rgba(8,8,15,.92);
  border:1px solid rgba(192,146,58,.3);border-radius:12px;z-index:200;
  text-align:center;pointer-events:none;
  animation:rsSlideIn .4s ease-out both;}
#rs-zone{font-size:10px;letter-spacing:3px;color:#c0923a;text-transform:uppercase;margin-bottom:6px;}
#rs-stats{display:flex;gap:18px;justify-content:center;font-size:12px;font-weight:700;}
.rs-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.rs-stat span:first-child{font-size:16px;font-weight:700;}
.rs-stat span:last-child{font-size:8px;color:#555;letter-spacing:1px;text-transform:uppercase;}

/* Active and Town tabs are not info-clickable — suppress pointer */
.map-tab.active,.map-tab[data-map="town"]{cursor:default;}
.adm-section{ display:flex; flex-direction:column; gap:5px; }
.adm-section-title{
  font-size:9px; letter-spacing:2px; color:#6b7280; font-weight:700;
  text-transform:uppercase; padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:1px;
}
.adm-row{ display:flex; flex-wrap:wrap; gap:4px; }
.adm-btn{
  padding:4px 9px; font-size:10px; border-radius:4px; cursor:pointer;
  font-family:'Segoe UI',sans-serif; font-weight:600; letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:#d1d5db; transition:background .12s;
}
.adm-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
/* ADMIN-GOTO-LABEL-01: map buttons read "<id>" over its display name, because
   two maps can share a name (zone_forest / forest_v1 are both "The Verdant
   Wood") and the id is what the travel gate keys on. */
.adm-btn .adm-sub{
  display:block; font-size:9px; font-weight:400; letter-spacing:.2px;
  color:#9ca3af; margin-top:1px; text-transform:none;
}
.adm-btn:hover .adm-sub{ color:#d1d5db; }
.adm-btn.adm-active{ background:rgba(139,92,246,.28); border-color:rgba(139,92,246,.6); color:#c4b5fd; }
.adm-btn.adm-danger{ border-color:rgba(239,68,68,.4); color:#fca5a5; }
.adm-btn.adm-danger:hover{ background:rgba(239,68,68,.22); }
.adm-btn.adm-green{ border-color:rgba(34,197,94,.4); color:#86efac; }
.adm-btn.adm-green:hover{ background:rgba(34,197,94,.18); }
.adm-btn.adm-gold{ border-color:rgba(251,191,36,.4); color:#fde68a; }
.adm-btn.adm-gold:hover{ background:rgba(251,191,36,.18); }
.adm-input-row{ display:flex; gap:4px; align-items:center; }
.adm-input{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:4px; color:#f3f4f6; font-size:11px; padding:3px 7px;
  width:64px; font-family:'Segoe UI',sans-serif;
}
.adm-label{ font-size:10px; color:#6b7280; min-width:48px; }
/* Town-entry tabs (direct portal from Town) get a gold underline */
.map-tab.town-entry{border-bottom:2px solid rgba(192,146,58,.4);}
.map-tab.town-entry:not(.active):hover{border-bottom-color:rgba(192,146,58,.75);}

/* ══════════════════════════════════════════════════════════════════
   POE CRAFTING PANEL  (#poe-craft-panel)
══════════════════════════════════════════════════════════════════ */
#poe-craft-panel{
  position:fixed;inset:0;z-index:152;background:rgba(6,6,12,.97);
  display:none;flex-direction:column;overflow:hidden;
}
.poe-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 24px 14px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.poe-hdr-title{font-size:17px;font-weight:900;letter-spacing:4px;color:#c4b5fd;}
.poe-hdr-sub{font-size:10px;color:#555;margin-top:3px;letter-spacing:.5px;}
.poe-close-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#9ca3af;font-size:11px;padding:6px 14px;border-radius:6px;cursor:pointer;white-space:nowrap;
}
.poe-close-btn:hover{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444;}
.poe-close-btn kbd{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:3px;font-size:9px;padding:1px 4px;margin-left:5px;
}

/* ── Two-column layout ── */
.poe-body{display:flex;flex:1;min-height:0;overflow:hidden;}

/* ── Left: item list ── */
.poe-item-list{
  width:220px;min-width:180px;flex-shrink:0;overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.06);padding:10px 0;
}
.poe-item-row{
  display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;
  border-left:2px solid transparent;transition:background .15s,border-color .15s;
}
.poe-item-row:hover{background:rgba(255,255,255,.04);}
.poe-item-sel{
  background:rgba(168,85,247,.12)!important;border-left-color:#a855f7!important;
}
.poe-item-row-icon{font-size:15px;flex-shrink:0;}
.poe-item-row-name{font-size:11px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.poe-list-tag{font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;}
.poe-list-eq{font-size:7px;font-weight:700;letter-spacing:.5px;background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.35);border-radius:3px;padding:1px 4px;flex-shrink:0;}
.poe-empty-list{padding:20px 14px;font-size:11px;color:#4b5563;line-height:1.5;}

/* ── Right: modification panel ── */
.poe-right-panel{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px;}
.poe-no-sel{color:#4b5563;font-size:12px;padding:30px 0;text-align:center;}

/* Item header */
.poe-item-hdr{display:flex;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.poe-item-hdr-icon{font-size:24px;flex-shrink:0;}
.poe-item-hdr-name{font-size:15px;font-weight:800;letter-spacing:1px;}
.poe-item-hdr-meta{font-size:10px;color:#6b7280;margin-top:3px;display:flex;align-items:center;gap:6px;}
.poe-rar-tag{font-size:8px;font-weight:700;letter-spacing:1px;padding:1px 6px;border-radius:3px;border:1px solid;}

.poe-warn{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:7px 12px;font-size:11px;color:#fca5a5;}
.poe-base-stat{font-size:10px;color:#4b5563;font-weight:500;letter-spacing:.3px;}
.poe-base-stat-label{font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#374151;margin-right:4px;}

/* Affix list */
.poe-affixes{display:flex;flex-direction:column;gap:3px;}
.poe-affix-line{display:flex;align-items:center;gap:7px;padding:4px 8px;background:rgba(255,255,255,.03);border-radius:4px;}
.poe-affix-badge{font-size:9px;font-weight:800;padding:1px 5px;border-radius:3px;min-width:16px;text-align:center;}
.poe-tier-badge{font-size:9px;font-weight:800;padding:1px 5px;border-radius:3px;border:1px solid;letter-spacing:.5px;min-width:20px;text-align:center;}
.poe-affix-lbl{font-size:11px;font-weight:600;flex:1;}
.poe-affix-nm{font-size:9px;color:#6b7280;font-style:italic;}
.poe-crafted-line{border:1px solid rgba(34,197,94,.2);}
.poe-rm-crafted{background:none;border:none;color:#6b7280;cursor:pointer;font-size:11px;padding:0 4px;margin-left:auto;}
.poe-rm-crafted:hover{color:#ef4444;}
.poe-no-affixes{font-size:11px;color:#4b5563;font-style:italic;padding:4px 0;}

/* Slot pips */
.poe-slots-row{display:flex;align-items:center;gap:8px;font-size:10px;color:#6b7280;}
.poe-slots-lbl{font-weight:700;letter-spacing:.5px;min-width:42px;}
.poe-slots-pips{letter-spacing:3px;font-size:12px;color:#a855f7;}
.poe-slots-sep{flex:1;}

/* Section label */
.poe-section-title{font-size:10px;font-weight:700;letter-spacing:2px;color:#6b7280;margin-bottom:6px;text-transform:uppercase;}

/* Currency grid */
.poe-cur-section{}
.poe-cur-grid{display:flex;flex-direction:column;gap:4px;}
.poe-cur-btn{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;
  border:1px solid rgba(255,255,255,.07);cursor:pointer;transition:background .15s,border-color .15s;
  background:rgba(255,255,255,.03);
}
.poe-cur-btn.enabled:hover{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.45);}
.poe-cur-btn.disabled{opacity:.35;cursor:not-allowed;}
.poe-cur-icon{font-size:16px;flex-shrink:0;}
.poe-cur-body{flex:1;min-width:0;}
.poe-cur-name{font-size:11px;font-weight:700;color:#e2e8f0;}
.poe-cur-hint{font-size:9px;color:#6b7280;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.poe-cur-qty{font-size:11px;font-weight:700;color:#4b5563;min-width:28px;text-align:right;}
.poe-cur-qty.poe-has-qty{color:#a855f7;}

/* Bench craft */
.poe-bench-section{border-top:1px solid rgba(255,255,255,.06);padding-top:10px;}
.poe-bench-hint{font-size:11px;color:#6b7280;font-style:italic;}
.poe-bench-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.poe-bench-opt{
  font-size:10px;font-weight:600;padding:5px 10px;border-radius:5px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#d1d5db;
  transition:background .15s,border-color .15s;
}
.poe-bench-opt:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#4ade80;}
.poe-bench-opt.bench-sel{background:rgba(34,197,94,.18);border-color:#22c55e;color:#4ade80;}
.poe-bench-opt.disabled{opacity:.3;cursor:not-allowed;}
.poe-bench-apply{
  width:100%;padding:9px 16px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(135deg,#16a34a,#15803d);border:none;color:#fff;cursor:pointer;
  transition:opacity .15s;
}
.poe-bench-apply:hover{opacity:.85;}

/* Salvage */
.poe-salvage-row{margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);}
.poe-salvage-btn{
  width:100%;padding:8px 16px;border-radius:6px;font-size:11px;font-weight:600;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#fca5a5;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.poe-salvage-btn:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.55);}

/* Modify button in char panel bag */
.bi-mod{
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
  color:#a855f7;font-size:12px;padding:4px 8px;border-radius:5px;cursor:pointer;
}
.bi-mod:hover{background:rgba(168,85,247,.25);border-color:#a855f7;}
.bi-affix{font-size:9px;color:#9ca3af;margin-top:1px;display:flex;align-items:center;gap:4px;}
.bi-affix.bi-crafted{color:#22c55e;}
.bi-tier{font-size:8px;font-weight:700;padding:0 4px;border-radius:3px;border:1px solid;letter-spacing:.5px;flex-shrink:0;}

/* ══════════════════════════════════════════
   CONTRACT BOARD PANEL
══════════════════════════════════════════ */
#board-panel{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:150;background:rgba(8,8,14,.97);border:1px solid rgba(255,255,255,.12);
  width:min(640px,96vw);max-height:84vh;display:flex;flex-direction:column;
  padding:0;border-radius:4px;overflow:hidden;
}
.bd-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 20px 10px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.bd-title{font-size:16px;font-weight:900;letter-spacing:5px;color:#e8c580;line-height:1;}
.bd-sub{font-size:9px;letter-spacing:1.5px;color:#555;text-transform:uppercase;margin-top:4px;}
.bd-close-btn{
  flex-shrink:0;align-self:flex-start;padding:6px 14px;
  border:1px solid rgba(255,255,255,.1);background:transparent;color:#555;
  border-radius:6px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  transition:color .15s,border-color .15s;
}
.bd-close-btn:hover{color:#ccc;border-color:rgba(255,255,255,.35);}
.bd-tabs{
  display:flex;gap:0;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.bd-tab{
  flex:1;padding:10px 0;background:transparent;border:none;
  color:#444;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;transition:color .15s,background .15s;
  border-bottom:2px solid transparent;
}
.bd-tab:hover{color:#888;background:rgba(255,255,255,.02);}
.bd-tab.active{color:#e8c580;border-bottom-color:#e8c580;}
#bd-content{overflow-y:auto;flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:8px;}
.bd-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:12px 14px;position:relative;
  transition:border-color .2s,background .2s;
}
.bd-card:hover{background:rgba(255,255,255,.05);}
.bd-card.bd-ready{
  border-color:rgba(245,158,11,.4);
  background:rgba(245,158,11,.04);
  box-shadow:0 0 12px rgba(245,158,11,.08);
}
.bd-card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.bd-chain-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.bd-card-name{font-size:13px;font-weight:700;letter-spacing:1px;flex:1;}
.bd-card-desc{font-size:10px;color:#666;margin-bottom:8px;line-height:1.4;}
.bd-reward-row{display:flex;align-items:center;gap:10px;font-size:10px;color:#555;margin-bottom:8px;}
.bd-reward-tag{
  padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);color:#888;letter-spacing:1px;
}
.bd-prog-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:6px;}
.bd-prog-fill{height:100%;border-radius:2px;transition:width .3s;}
.bd-prog-lbl{font-size:9px;color:#444;text-align:right;margin-bottom:6px;}
.bd-btn-row{display:flex;justify-content:flex-end;gap:8px;}
.bd-accept-btn{
  padding:6px 18px;border-radius:4px;border:1px solid rgba(6,182,212,.3);
  background:rgba(6,182,212,.08);color:#06b6d4;font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.bd-accept-btn:hover{background:rgba(6,182,212,.18);border-color:rgba(6,182,212,.6);}
.bd-accept-btn:disabled{opacity:.25;cursor:not-allowed;}
.bd-claim-btn{
  padding:8px 22px;border-radius:4px;border:1px solid rgba(245,158,11,.5);
  background:rgba(245,158,11,.12);color:#f59e0b;font-size:11px;font-weight:900;
  letter-spacing:3px;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
  animation:claimPulse 1.8s ease-in-out infinite;
}
.bd-claim-btn:hover{background:rgba(245,158,11,.28);border-color:rgba(245,158,11,.8);box-shadow:0 0 18px rgba(245,158,11,.2);}
.bd-empty{text-align:center;padding:40px 20px;color:#333;font-size:11px;letter-spacing:2px;}
.bd-streak{
  text-align:center;padding:6px 12px;background:rgba(251,146,36,.08);
  border:1px solid rgba(251,146,36,.2);border-radius:4px;color:#fb923c;
  font-size:10px;font-weight:700;letter-spacing:2px;
}
.cx-tab.cx-tab-new::after{
  content:'';display:inline-block;width:6px;height:6px;
  background:#a78bfa;border-radius:50%;margin-left:5px;vertical-align:middle;
  box-shadow:0 0 4px rgba(167,139,250,.6);
  animation:cxTabPulse 2s ease-in-out infinite;
}
/* stat row */
.cx-stat-row{
  display:flex;gap:24px;margin-bottom:14px;
  font-size:10px;color:#6a5030;letter-spacing:2px;
}
/* ── Bestiary ── */
.cx-bestiary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.cx-enemy-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.12);
  border-radius:4px;padding:10px 12px;position:relative;
  border-left:3px solid var(--ec,#c0923a);
}
.cx-enemy-card.cx-mastered-card{
  border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.04);
}
.cx-enemy-card.cx-new{
  border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.06);
  box-shadow:0 0 0 1px rgba(167,139,250,.2);
}
.cx-locked{opacity:.5;border-left-color:rgba(100,80,40,.4)!important;}
.cx-silhouette{opacity:.12;filter:grayscale(1);font-size:28px;}
.cx-enemy-hint{font-size:8px;color:#4a3a1a;font-style:italic;margin-top:4px;letter-spacing:.5px;}
.cx-enemy-icon{font-size:22px;margin-bottom:4px;}
.cx-enemy-name{font-size:11px;font-weight:700;color:#c0923a;letter-spacing:1px;}
.cx-enemy-zone{font-size:9px;color:#4a3a1a;margin:2px 0;}
.cx-enemy-tier{
  display:inline-block;font-size:8px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;padding:1px 5px;border-radius:2px;margin:3px 0;
  background:rgba(255,255,255,.05);color:#6a5030;border:1px solid rgba(180,130,50,.15);
}
.cx-enemy-tier.boss{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.3);}
.cx-enemy-tier.miniboss{background:rgba(245,158,11,.1);color:#f59e0b;border-color:rgba(245,158,11,.3);}
.cx-enemy-tier.elite{background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.3);}
/* Info tags */
.cx-tags{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0;}
.cx-tag{font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:1px 5px;border-radius:2px;background:rgba(255,255,255,.04);
  color:#6a5030;border:1px solid rgba(180,130,50,.1);}
.cx-tag-elem{color:#8a7a5a;border-color:rgba(180,130,50,.2);}
/* Combat hints */
.cx-combat-hints{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:3px 0;}
.cx-tag-combat{color:#c0923a;border-color:rgba(192,146,58,.25);}
.cx-hint-temper{font-size:7px;color:#5a4a2a;font-style:italic;letter-spacing:.5px;}
/* Lore & drops */
.cx-lore{font-size:9px;color:#6a5030;margin:5px 0 3px;line-height:1.5;}
.cx-drops{font-size:9px;color:#4a6830;line-height:1.5;}
.cx-locked-text{font-style:italic;opacity:.5;}
/* Drop table */
.cx-drop-table{margin:5px 0 3px;border-top:1px solid rgba(180,130,50,.08);padding-top:4px;}
.cx-drop-hdr{font-size:7px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a6a3a;margin-bottom:3px;}
.cx-drop-row{font-size:8px;color:#6a5030;display:flex;justify-content:space-between;padding:1px 0;line-height:1.6;}
.cx-drop-pct{color:#4a3a1a;font-variant-numeric:tabular-nums;}
.cx-drop-ore{color:#c0923a;}
.cx-drop-card{color:#a78bfa;}
/* Stat bars (mastery+) */
.cx-stat-bars{display:flex;flex-direction:column;gap:3px;margin:6px 0 2px;}
.cx-sbar{display:flex;align-items:center;gap:4px;}
.cx-sbar-label{font-size:7px;font-weight:700;letter-spacing:1px;color:#6a5030;width:22px;text-align:right;}
.cx-sbar-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;}
.cx-sbar-fill{height:100%;border-radius:2px;transition:width .3s;}
.cx-sbar-hp{background:linear-gradient(90deg,#22c55e,#4ade80);}
.cx-sbar-dmg{background:linear-gradient(90deg,#ef4444,#f87171);}
.cx-sbar-spd{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
/* Filter/sort toolbar */
.cx-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.cx-filter-group,.cx-sort-group{display:flex;align-items:center;gap:3px;}
.cx-sort-label{font-size:7px;color:#4a3a1a;letter-spacing:1px;margin-right:2px;}
.cx-filter-btn{font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;cursor:pointer;border:1px solid rgba(180,130,50,.15);
  background:rgba(255,255,255,.03);color:#6a5030;transition:all .15s;}
.cx-filter-btn:hover{background:rgba(192,146,58,.1);color:#c0923a;border-color:rgba(192,146,58,.3);}
.cx-filter-btn.active{background:rgba(192,146,58,.15);color:#c0923a;border-color:rgba(192,146,58,.4);}
.cx-kills-bar{
  height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin:6px 0 2px;
}
.cx-kills-bar>div{height:100%;background:#c0923a;border-radius:2px;transition:width .3s;}
.cx-kills-count{font-size:8px;color:#4a3a1a;}
.cx-mastered{
  font-size:9px;font-weight:900;color:#fbbf24;letter-spacing:3px;
  margin-top:6px;text-shadow:0 0 8px rgba(251,191,36,.4);
}
.cx-perfected{
  font-size:9px;font-weight:900;color:#e879f9;letter-spacing:3px;
  margin-top:6px;text-shadow:0 0 8px rgba(232,121,249,.4);
}
.cx-enemy-card.cx-perfected-card{
  border-color:rgba(232,121,249,.35);background:rgba(232,121,249,.04);
  border-left-color:rgba(232,121,249,.6);
}
.cx-perf-bar>div{background:linear-gradient(90deg,#fbbf24,#e879f9);}
.cx-codex-tier{font-size:8px;font-weight:700;letter-spacing:1.5px;margin:2px 0 1px;}
.cx-bar-perf>div{background:linear-gradient(90deg,#c084fc,#e879f9);}
/* ── Map Mastery ── */
.cx-map-list{display:flex;flex-direction:column;gap:10px;}
.cx-map-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.15);
  border-radius:4px;padding:12px 14px;
}
.cx-map-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.cx-map-name{font-size:12px;font-weight:700;color:#c0923a;letter-spacing:2px;}
.cx-map-tier{font-size:9px;color:#4a3a1a;letter-spacing:2px;margin-top:2px;}
.cx-stars{font-size:14px;color:#f59e0b;letter-spacing:2px;}
.cx-map-stats{
  display:flex;gap:16px;font-size:9px;color:#6a5030;letter-spacing:1px;margin-bottom:8px;
}
.cx-progress-label{font-size:9px;color:#6a5030;letter-spacing:1px;margin-bottom:4px;}
.cx-progress-bar{
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:4px;
}
.cx-progress-bar>div{height:100%;background:linear-gradient(90deg,#c0923a,#f59e0b);border-radius:2px;transition:width .3s;}
.cx-progress-detail{display:flex;gap:12px;font-size:9px;color:#4a3a1a;}
.cx-map-unvisited{font-size:9px;color:#3a2a10;font-style:italic;}
.cx-map-preview{font-size:8px;color:#4a3a1a;margin-top:3px;letter-spacing:.5px;font-style:normal;}
.cx-map-tagline{font-size:9px;color:#5a4a2a;font-style:italic;margin-bottom:6px;line-height:1.4;}
.cx-map-mastered{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.03);}
.cx-mastered-row{font-size:9px;font-weight:900;color:#fbbf24;letter-spacing:3px;margin-top:8px;text-shadow:0 0 8px rgba(251,191,36,.4);}
/* Map checklist sections */
.cx-map-section{margin:6px 0;}
.cx-map-section-hdr{font-size:7px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#5a4a2a;margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;}
.cx-map-section-count{font-size:8px;font-weight:900;color:#6a5030;letter-spacing:1px;}
.cx-checklist{display:flex;flex-wrap:wrap;gap:4px;}
.cx-check{font-size:8px;padding:2px 6px;border-radius:3px;border:1px solid rgba(180,130,50,.1);background:rgba(255,255,255,.02);}
.cx-check-found{color:var(--cc,#c0923a);border-color:rgba(192,146,58,.25);background:rgba(192,146,58,.06);}
.cx-check-missing{color:#3a2a10;font-style:italic;opacity:.5;}
.cx-check-boss{font-weight:700;}
/* ── Collection ── */
.cx-section-label{
  font-size:9px;font-weight:700;letter-spacing:3px;color:#4a3a1a;
  text-transform:uppercase;margin:14px 0 8px;padding-bottom:4px;
  border-bottom:1px solid rgba(180,130,50,.1);
}
.cx-mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;}
.cx-mat-cell{
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.12);
  border-radius:3px;padding:8px 6px;text-align:center;
}
.cx-mat-locked{opacity:.2;}
.cx-mat-icon{font-size:18px;margin-bottom:3px;}
.cx-mat-name{font-size:8px;color:#c0923a;letter-spacing:1px;}
.cx-mat-total{font-size:8px;color:#4a3a1a;margin-top:2px;}
.cx-card-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.cx-card-pill{
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.2);
  border-radius:12px;padding:4px 10px;font-size:9px;color:#a78bfa;letter-spacing:1px;
}
.cx-empty{font-size:9px;color:#3a2a10;font-style:italic;padding:8px 0;}

/* ── Codex Overview ── */
.cx-ov-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0 14px;border-bottom:1px solid rgba(180,130,50,.12);margin-bottom:14px;
}
.cx-ov-title{font-size:14px;font-weight:900;color:#c0923a;letter-spacing:2px;}
.cx-ov-title span{color:#f0d080;}
.cx-ov-pts{font-size:10px;color:#6a5030;letter-spacing:2px;}
.cx-completion-grid{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.cx-compl-row{display:grid;grid-template-columns:80px 1fr 42px;gap:8px;align-items:center;}
.cx-compl-label{font-size:9px;color:#6a5030;letter-spacing:2px;text-transform:uppercase;}
.cx-compl-bar{
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;
}
.cx-compl-bar>div{height:100%;background:linear-gradient(90deg,#6a5030,#c0923a);border-radius:2px;transition:width .4s;}
.cx-compl-nums{font-size:9px;color:#4a3a1a;text-align:right;}
.cx-compl-sub{font-size:9px;color:#3a2a10;font-style:italic;margin-top:6px;}
/* Active hunt block */
.cx-hunt-active{
  display:flex;gap:12px;align-items:center;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);
  border-radius:4px;padding:10px 12px;margin-bottom:4px;
}
.cx-hunt-icon{font-size:24px;flex-shrink:0;}
.cx-hunt-info{flex:1;min-width:0;}
.cx-hunt-name{font-size:11px;font-weight:700;color:#f59e0b;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.cx-hunt-progress{
  height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:4px;
}
.cx-hunt-progress>div{height:100%;background:linear-gradient(90deg,#b45309,#f59e0b);border-radius:2px;transition:width .3s;}
.cx-hunt-zone{font-size:8px;color:#6a5030;letter-spacing:1px;}
/* Goals list */
.cx-goals{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.cx-goal-cat{border-radius:4px;overflow:hidden;}
.cx-goal-cat-hdr{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:5px 10px;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
}
.cx-goal-cat-sub{font-size:8px;font-weight:400;letter-spacing:1px;opacity:.6;text-transform:none;}
.cx-goal-quick .cx-goal-cat-hdr{color:#22c55e;background:rgba(34,197,94,.06);}
.cx-goal-session .cx-goal-cat-hdr{color:#c0923a;background:rgba(192,146,58,.06);}
.cx-goal-chase .cx-goal-cat-hdr{color:#c084fc;background:rgba(192,132,252,.06);}
.cx-goal-row{
  display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;
  background:rgba(255,255,255,.02);border:1px solid rgba(180,130,50,.09);
  padding:8px 10px;
}
.cx-goal-icon{font-size:14px;padding-top:2px;}
.cx-goal-body{min-width:0;}
.cx-goal-label{font-size:10px;color:#c0923a;font-weight:700;letter-spacing:1px;margin-bottom:4px;}
.cx-goal-zone{font-size:9px;color:#4a3a1a;font-weight:400;}
.cx-goal-bar{
  height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin-bottom:3px;
}
.cx-goal-bar>div{height:100%;border-radius:2px;transition:width .3s;}
.cx-goal-quick .cx-goal-bar>div{background:linear-gradient(90deg,#16a34a,#22c55e);}
.cx-goal-session .cx-goal-bar>div{background:linear-gradient(90deg,#c0923a,#f59e0b);}
.cx-goal-chase .cx-goal-bar>div{background:linear-gradient(90deg,#a855f7,#e879f9);}
.cx-goal-detail{display:flex;justify-content:space-between;font-size:8px;color:#4a3a1a;}
.cx-goal-pct{color:#6a5030;font-weight:700;}
.cx-goal-reward{font-size:8px;color:#22c55e;letter-spacing:1px;white-space:nowrap;padding-top:3px;}
/* Titles */
.cx-titles-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.cx-title-pill{
  background:rgba(192,146,58,.08);border:1px solid rgba(192,146,58,.2);
  border-radius:12px;padding:4px 10px;font-size:9px;color:#c0923a;letter-spacing:1px;
}
.cx-title-pill.active{
  background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);
  color:#f0d080;font-weight:700;
}
/* Hunt button */
.cx-hunt-btn{
  background:rgba(180,130,50,.08);border:1px solid rgba(180,130,50,.25);
  color:#6a5030;padding:3px 8px;border-radius:3px;cursor:pointer;
  font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  transition:all .15s;
}
.cx-hunt-btn:hover{background:rgba(245,158,11,.12);color:#c0923a;border-color:rgba(245,158,11,.4);}
.cx-hunt-btn.active{
  background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);
  color:#f59e0b;
}
/* Bestiary hunt highlighting */
.cx-hunted{
  border-color:rgba(245,158,11,.5)!important;
  background:rgba(245,158,11,.05)!important;
  box-shadow:0 0 0 1px rgba(245,158,11,.15);
}
.cx-enemy-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px;}
/* Map insights */
.cx-insights{margin:8px 0 6px;display:flex;flex-direction:column;gap:3px;}
.cx-insight{
  font-size:8px;color:#6a5030;font-style:italic;line-height:1.5;
  padding-left:8px;border-left:2px solid rgba(192,146,58,.3);
}
.cx-insight-locked{
  font-size:8px;color:#2a1a08;font-style:italic;
  padding-left:8px;border-left:2px solid rgba(255,255,255,.04);
}
/* Collection sets */
.cx-set-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.cx-mat-set{
  background:rgba(255,255,255,.02);border:1px solid rgba(180,130,50,.1);
  border-radius:4px;padding:10px 12px;
}
.cx-set-complete{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.03);}
.cx-set-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.cx-set-hdr>div{display:flex;align-items:center;gap:6px;}
.cx-set-icon{font-size:14px;}
.cx-set-name{font-size:10px;font-weight:700;color:#c0923a;letter-spacing:2px;}
.cx-set-done{font-size:8px;font-weight:900;color:#fbbf24;letter-spacing:2px;padding:1px 6px;background:rgba(251,191,36,.1);border-radius:2px;}
.cx-set-count{font-size:9px;color:#4a3a1a;letter-spacing:1px;}
.cx-set-bar{
  height:3px;background:rgba(255,255,255,.05);border-radius:2px;margin-bottom:8px;
}
.cx-set-bar>div{height:100%;background:linear-gradient(90deg,#6a5030,#c0923a);border-radius:2px;transition:width .3s;}
.cx-set-complete .cx-set-bar>div{background:linear-gradient(90deg,#b45309,#fbbf24);}
.cx-set-mats{display:flex;flex-wrap:wrap;gap:6px;}
.cx-set-mat{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.03);border:1px solid rgba(180,130,50,.1);
  border-radius:3px;padding:5px 8px;min-width:120px;
}
.cx-set-mat.cx-mat-locked{opacity:.25;}
.cx-set-mat .cx-mat-icon{font-size:16px;flex-shrink:0;}
.cx-set-mat-info{min-width:0;}
.cx-set-mat-info .cx-mat-name{font-size:9px;color:#c0923a;letter-spacing:1px;}
.cx-mat-source{font-size:8px;color:#3a2a10;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}



/* ══════════════════════════════════════════
   QUICK START OVERLAY
══════════════════════════════════════════ */
#qs-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(4,4,10,.88);backdrop-filter:blur(6px);}
#qs-card{background:linear-gradient(135deg,rgba(18,14,28,.98),rgba(10,10,20,.98));border:1px solid rgba(168,85,247,.35);border-radius:18px;padding:32px 36px 26px;max-width:500px;width:90%;box-shadow:0 0 60px rgba(168,85,247,.2),0 20px 60px rgba(0,0,0,.6);}
#qs-logo{font-size:22px;font-weight:900;letter-spacing:4px;text-align:center;margin-bottom:22px;background:linear-gradient(135deg,#a855f7,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#qs-grid{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;}
.qs-row{display:flex;align-items:baseline;gap:14px;}
.qs-key{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#a855f7;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);border-radius:5px;padding:3px 8px;white-space:nowrap;min-width:80px;text-align:center;flex-shrink:0;}
.qs-desc{font-size:12px;color:#94a3b8;line-height:1.4;}
#qs-close-btn{display:block;width:100%;padding:11px;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:opacity .15s;}
#qs-close-btn:hover{opacity:.85;}
#qs-footer{text-align:center;font-size:9px;letter-spacing:2px;color:#2a2a40;margin-top:10px;text-transform:uppercase;}
#ctx-hint.visible{opacity:1;}
#onb-hint.show{opacity:1;}
/* .intro snaps immediately to the centered state (no slide-up from bottom).
   Only opacity transitions (for smooth fade-in). When .intro is removed,
   the base transition takes over and the hint smoothly settles to the bottom. */
#onb-hint.intro{bottom:20%;font-size:22px;padding:14px 36px;border-color:rgba(168,85,247,.7);transform:translateX(-50%) scale(1);animation:onb-pulse .6s ease-in-out 5;text-shadow:0 0 18px rgba(168,85,247,.7);transition:opacity .4s;}

/* ══════════════════════════════════════════
   SIDE PANEL — improved button styles
══════════════════════════════════════════ */
.side-btn-row button{font-size:10.5px;letter-spacing:.3px;}
.side-btn-row button kbd{font-size:8px;opacity:.5;margin-left:3px;}
.lb-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 18px 10px;border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);flex-shrink:0;
}
.lb-title{font-size:14px;font-weight:900;color:#e2e8f0;letter-spacing:1.5px;text-transform:uppercase;}
.lb-sub{font-size:9px;color:#374151;margin-top:3px;letter-spacing:.5px;}
.lb-hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.lb-badge{font-size:9px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.5px;}
.lb-badge-on{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.28);}
.lb-badge-off{background:rgba(107,114,128,.12);color:#6b7280;border:1px solid rgba(107,114,128,.25);}
.lb-close-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#6b7280;font-size:10px;padding:3px 9px;cursor:pointer;font-family:inherit;transition:all .12s;}
.lb-close-btn:hover{background:rgba(255,255,255,.1);color:#e2e8f0;}
.lb-close-btn kbd{background:rgba(0,0,0,.4);padding:1px 4px;border-radius:3px;font-size:9px;}
/* Column header row */
.lb-col-row{
  display:flex;align-items:center;
  padding:5px 18px;border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.015);
}
.lb-col-rank{width:32px;font-size:8px;color:#374151;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.lb-col-name{flex:1;font-size:8px;color:#374151;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding-right:10px;}
.lb-ch{width:38px;text-align:center;font-size:14px;flex-shrink:0;}
/* Data rows */
.lb-row{
  display:flex;align-items:center;
  padding:8px 18px;border-bottom:1px solid rgba(255,255,255,.035);
  transition:background .1s;
}
.lb-row:last-child{border-bottom:none;}
.lb-row:hover{background:rgba(255,255,255,.035);}
.lb-row-self{
  background:rgba(245,158,11,.06)!important;
  border-left:2px solid rgba(245,158,11,.5);
  padding-left:16px;
}
.lb-rank{width:32px;font-size:15px;flex-shrink:0;line-height:1;}
.lb-name{
  flex:1;font-size:12px;color:#cbd5e1;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-right:10px;display:flex;align-items:center;gap:6px;
}
.lb-you{
  font-size:7px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(245,158,11,.18);color:#f59e0b;
  border:1px solid rgba(245,158,11,.35);border-radius:3px;padding:1px 5px;
  flex-shrink:0;
}
.lb-val{
  width:38px;text-align:center;font-size:12px;font-weight:700;
  color:#374151;flex-shrink:0;
}
.lb-val-hi{color:#22c55e;}
.lb-val-max{color:#f59e0b;}
.lb-row-offline{opacity:.45;}
.lb-row-offline .lb-rank{filter:grayscale(1);}
.lb-offline-tag{
  font-size:7px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(107,114,128,.15);color:#6b7280;
  border:1px solid rgba(107,114,128,.25);border-radius:3px;padding:1px 5px;
  flex-shrink:0;
}
.lb-empty{padding:28px 18px;font-size:12px;color:#374151;text-align:center;letter-spacing:.5px;}

/* ══════════════════════════════════════════
   HISCORES (RuneScape-style) — hs-* classes
══════════════════════════════════════════ */

/* Tab bar */
.hs-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px 6px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.hs-tab{
  padding:4px 10px;font-size:12px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);color:#6b7280;transition:all .15s;
}
.hs-tab:hover{color:#e2e8f0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);}
.hs-tab-on{color:#f59e0b!important;border-color:rgba(245,158,11,.4)!important;background:rgba(245,158,11,.1)!important;}

/* Scrollable body */
.hs-body{overflow-y:auto;flex:1;min-height:0;}

/* Column headers */
.hs-col-hdr{
  display:grid;grid-template-columns:32px 1fr 52px 28px;
  padding:4px 12px;font-size:10px;color:#4b5563;letter-spacing:.5px;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;
}
.hs-col-r{text-align:center;}
.hs-col-n{}
.hs-col-v{text-align:right;}
.hs-col-c{text-align:center;}

/* Skill banner (shows above column header on skill tabs) */
.hs-skill-banner{
  padding:8px 12px 4px;font-size:13px;font-weight:600;color:#a78bfa;
  letter-spacing:.5px;flex-shrink:0;
}

/* Rank rows */
.hs-row{
  display:grid;grid-template-columns:32px 1fr 52px 28px;
  padding:5px 12px;font-size:13px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.03);transition:background .1s;
}
.hs-row:hover{background:rgba(255,255,255,.04);}
.hs-row-self{background:rgba(167,139,250,.06)!important;}
.hs-row-self:hover{background:rgba(167,139,250,.1)!important;}
.hs-row-offline{opacity:.45;}

/* Row cells */
.hs-rank{text-align:center;color:#4b5563;font-size:12px;font-weight:600;}
.hs-name{color:#d1d5db;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.hs-lv{text-align:right;color:#6b7280;font-variant-numeric:tabular-nums;}
.hs-lv-hi{color:#34d399;}
.hs-lv-max{color:#f59e0b;font-weight:700;}

/* Online dot */
.hs-dot{color:#22c55e;font-size:8px;flex-shrink:0;}

/* Compare button */
.hs-cmp-btn{
  background:none;border:none;cursor:pointer;color:#4b5563;font-size:13px;
  padding:2px 4px;border-radius:4px;transition:color .15s;display:flex;align-items:center;justify-content:center;
  min-width:20px;
}
.hs-cmp-btn:hover{color:#a78bfa;}

/* ── Compare view ──────────────────────────────────────── */
.hs-cmp-wrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;}

.hs-cmp-bar{
  display:flex;align-items:center;gap:10px;padding:10px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.hs-back{
  background:none;border:1px solid rgba(255,255,255,.1);border-radius:6px;
  color:#9ca3af;font-size:12px;padding:4px 10px;cursor:pointer;transition:all .15s;
}
.hs-back:hover{color:#e2e8f0;border-color:rgba(255,255,255,.25);}

.hs-cmp-names{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;font-size:13px;}
.hs-cmp-you{color:#a855f7;font-weight:600;}
.hs-vs{color:#4b5563;font-size:11px;}
.hs-cmp-them{color:#22d3ee;font-weight:600;}

.hs-cmp-col-hdr{
  display:grid;grid-template-columns:24px 1fr 44px 28px 44px;
  padding:4px 12px;font-size:10px;color:#4b5563;letter-spacing:.5px;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;
}
.hs-cmp-row{
  display:grid;grid-template-columns:24px 1fr 44px 28px 44px;
  padding:5px 12px;font-size:13px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.hs-cmp-total{border-top:1px solid rgba(255,255,255,.1);font-weight:700;margin-top:2px;}
.hs-cmp-icon{text-align:center;font-size:14px;}
.hs-cmp-lbl{color:#9ca3af;font-size:12px;}
.hs-cmp-v{text-align:right;font-variant-numeric:tabular-nums;color:#6b7280;}
.hs-cmp-mid{text-align:center;color:#4b5563;font-size:11px;}
.hs-win{color:#34d399;font-weight:700;}
.hs-lose{color:#f87171;}
.drag-handle-bar.dragging{
  cursor:grabbing;
  background:rgba(255,255,255,.10);
}

/* ══════════════════════════════════════════
   CHAT PANEL  —  Ticket P2S1-1
   Permanent docked HUD element, bottom-left.
══════════════════════════════════════════ */
.chat-panel{
  position:fixed; left:12px; bottom:12px; width:360px; height:200px;
  display:flex; flex-direction:column;
  background:rgba(8,8,14,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  font-family:'Segoe UI',sans-serif; font-size:12px; color:#e2e8f0;
  /* CHAT-INTERACTION-01: sit above the HUD stack (#hud-root z-index:100 in
     src/hud-layout.css, pointer-events:auto children) so the panel always
     receives its own clicks/right-clicks. Below .screen (110) + modals (150+). */
  z-index:105;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
  user-select:text; -webkit-user-select:text;
}
.chat-panel.collapsed{ height:28px; overflow:hidden; }
.chat-panel .chat-header{
  display:flex; align-items:center; justify-content:space-between;
  height:28px; flex-shrink:0;
  padding:0 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-panel .chat-tabs{ display:flex; gap:4px; }
.chat-panel .chat-tab{
  background:transparent; border:none; color:#64748b; cursor:pointer;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; padding:4px 8px; border-radius:4px;
  font-family:inherit; position:relative;
}
.chat-panel .chat-tab:hover{ color:#cbd5e1; background:rgba(255,255,255,.04); }
.chat-panel .chat-tab-active{ color:#a855f7; background:rgba(168,85,247,.1); }
/* SOCIAL-CHAT-03: per-channel active-tab accent — instant channel identity. */
.chat-panel .chat-tab[data-ch="world"].chat-tab-active{ color:#22d3ee; background:rgba(34,211,238,.12); }
.chat-panel .chat-tab[data-ch="help"].chat-tab-active{  color:#34d399; background:rgba(52,211,153,.12); }
.chat-panel .chat-tab[data-ch="trade"].chat-tab-active{ color:#fbbf24; background:rgba(251,191,36,.12); }
.chat-panel .chat-tab-unread::after{
  content:''; position:absolute; top:3px; right:3px;
  width:6px; height:6px; border-radius:50%;
  background:#06b6d4; box-shadow:0 0 6px #06b6d4;
}
.chat-panel .chat-collapse{
  background:transparent; border:none; color:#64748b; cursor:pointer;
  font-size:16px; line-height:1; padding:2px 8px;
  font-family:inherit;
}
.chat-panel .chat-collapse:hover{ color:#e2e8f0; }
.chat-panel .chat-log{
  flex:1; min-height:0; overflow-y:auto;
  padding:4px 6px;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.chat-panel .chat-log::-webkit-scrollbar{ width:6px; }
.chat-panel .chat-log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
.chat-panel .chat-row{
  display:flex; gap:6px; line-height:1.3;
  word-break:break-word;
}
.chat-panel .chat-row-time{ color:#475569; flex-shrink:0; font-variant-numeric:tabular-nums; font-size:10px; padding-top:1px; }
.chat-panel .chat-row-name{ color:#06b6d4; flex-shrink:0; font-weight:700; }
/* CHAT-INTERACTION-04 (#3700): interactive-name affordance. Scoped to [role="button"]
   so only real player names (not system rows) react. Speaker color is set inline per
   name and intentionally preserved — we only add background + underline + soft glow. */
.chat-panel .chat-row-name[role="button"]{
  /* FW-FEEL-08: subtle dotted underline in rest state signals the name is
     interactive before the player even hovers — right-click affordance. */
  cursor:context-menu; border-radius:4px; padding:0 4px;
  text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:2px; text-decoration-color:rgba(6,182,212,.4);
  transition:background-color 80ms ease, text-shadow 80ms ease, text-decoration-color 80ms ease;
}
/* Keyboard-only ring: suppress the outline on mouse/click focus. */
.chat-panel .chat-row-name[role="button"]:focus:not(:focus-visible){ outline:none; }
.chat-panel .chat-row-text{ color:#cbd5e1; flex:1; }
.chat-panel .chat-row-system .chat-row-name{ color:#64748b; font-style:italic; font-weight:400; }
.chat-panel .chat-row-system .chat-row-text{ color:#94a3b8; font-style:italic; }
/* FRIENDS-WHISPER-V1 P10 (FW-28): whisper row styling — distinct from chat rows. */
.chat-panel .chat-row-whisper{ background:rgba(100,220,255,.04); border-left:2px solid rgba(100,220,255,.3); padding-left:6px; margin:1px 0; }
.chat-panel .chat-row-whisper .chat-row-whisper-label{ color:#7ae0ff; font-style:italic; font-weight:500; }
.chat-panel .chat-row-whisper .chat-row-text{ color:#a8d4e8; }
/* CHAT-INTERACTION-02 (#3683): right-click options menu. Appended to document.body
   (NOT inside .chat-panel), so these selectors are top-level. Mirrors the
   char-inv-ctx-menu styling for consistency. */
.chat-name-menu{
  position:fixed; z-index:9000; min-width:132px; max-width:260px;
  background:#1e293b; border:1px solid rgba(255,255,255,.15); border-radius:6px;
  padding:4px 0; box-shadow:0 4px 16px rgba(0,0,0,.5); font-family:inherit;
}
.chat-name-menu-head{
  padding:6px 14px 4px; font-size:12px; font-weight:700; color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-name-menu-btn{
  display:block; width:100%; padding:7px 14px; background:none; border:none;
  color:#e2e8f0; font-size:13px; text-align:left; cursor:pointer; font-family:inherit;
}
.chat-name-menu-btn:hover{ background:rgba(255,255,255,.08); }
/* SOCIAL-CHAT-04: own-message highlight — subtle tint + accent + (you) tag. */
.chat-panel .chat-row-own{
  background:rgba(168,85,247,.08);
  border-left:2px solid rgba(168,85,247,.55);
  margin-left:-6px; padding-left:4px; border-radius:0 3px 3px 0;
}
.chat-panel .chat-row-own .chat-row-name::after{
  content:' (you)'; opacity:.55; font-weight:400; font-size:10px; font-style:italic;
}
.chat-panel .chat-input-row{
  flex-shrink:0; padding:4px 6px;
  border-top:1px solid rgba(255,255,255,.08);
}
.chat-panel .chat-input{
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:4px;
  color:#e2e8f0; padding:4px 8px; font-size:12px;
  font-family:inherit; outline:none;
}
.chat-panel .chat-input:focus{ border-color:rgba(168,85,247,.5); box-shadow:0 0 8px rgba(168,85,247,.2); }

/* ── Social event feed (SOCIAL-FEED-06/07) ──────────────────────────────
   A distinct lane docked inside #chatPanel (above .chat-log) — a SEPARATE DOM
   subtree from chat's message pipeline, so channel switching (which clears only
   .chat-log) never wipes it. Collapses to zero height when empty. */
.event-feed-lane{
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(34,211,238,.04);
}
.event-feed-lane.event-feed-lane-empty{ display:none; }
.event-feed-lane .event-feed-list{
  max-height:64px; overflow-y:auto;
  display:flex; flex-direction:column; gap:1px;
  padding:3px 6px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.event-feed-lane .event-feed-list::-webkit-scrollbar{ width:6px; }
.event-feed-lane .event-feed-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
.event-feed-row{
  display:flex; gap:6px; align-items:baseline;
  font-size:11px; line-height:1.3; word-break:break-word;
}
.event-feed-row .event-feed-icon{ flex-shrink:0; font-size:11px; line-height:1.3; color:#94a3b8; }
.event-feed-row .event-feed-text{ flex:1; color:#cbd5e1; }
.event-feed-row .event-feed-time{ flex-shrink:0; color:#475569; font-size:10px; font-variant-numeric:tabular-nums; }
/* per-kind tint (icon + accent) */
.event-feed-kind-rare_drop        .event-feed-icon{ color:#fbbf24; }
.event-feed-kind-project_complete .event-feed-icon{ color:#34d399; }
.event-feed-kind-death_recovery   .event-feed-icon{ color:#22d3ee; }
.event-feed-kind-relay_event      .event-feed-icon{ color:#a855f7; }
.event-feed-kind-system_notice    .event-feed-icon{ color:#94a3b8; }
/* global-scope events read louder than zone */
.event-feed-row.event-feed-global{
  border-left:2px solid rgba(251,191,36,.6);
  margin-left:-6px; padding-left:4px; background:rgba(251,191,36,.06);
}
.event-feed-row.event-feed-global .event-feed-text{ color:#fde68a; font-weight:600; }
/* Clickable item name inside rare_drop feed rows */
.event-feed-item-link{
  background:none; border:none; padding:0; margin:0;
  font:inherit; font-weight:600;
  color:#67e8f9;          /* cyan accent */
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.event-feed-item-link:hover{ color:#ffffff; }
.event-feed-row.event-feed-global .event-feed-item-link{ color:#fbbf24; } /* amber on global rows */
.event-feed-row.event-feed-global .event-feed-item-link:hover{ color:#ffffff; }
/* fail-open standalone dock (no #chatPanel present) */
.event-feed-lane.event-feed-standalone{
  position:fixed; left:12px; bottom:220px; width:360px;
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  background:rgba(8,8,14,.97); z-index:105;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}
.npc-dialogue-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.npc-dialogue-lines p{margin:0;font-size:13px;line-height:1.45;color:#cbd5e1;overflow-wrap:anywhere;}
.npc-dialogue-actions--one .npc-dialogue-btn{min-width:132px;}
.npc-dialogue-actions--two .npc-dialogue-btn{min-width:112px;}
.npc-dialogue-btn:hover,.npc-dialogue-btn:focus{background:rgba(34,211,238,.13);outline:1px solid rgba(34,211,238,.5);outline-offset:2px;}

/* Quest log side-button pip while a critical quest is pending. */
.side-btn-pip{
  position:absolute; top:-3px; right:-3px; width:10px; height:10px;
  border-radius:50%; background:#fde68a;
  box-shadow:0 0 8px rgba(253,230,138,.85), 0 0 0 1.5px #1a1408;
  pointer-events:none;
  animation:sbPipPulse 1.6s ease-in-out infinite;
}
/* Reconnecting — amber, spinner visible */
#reconnect-widget[data-state="reconnecting"]{
  border-color:rgba(251,191,36,.45);
  box-shadow:0 0 24px rgba(251,191,36,.18);
  animation:rcFadeIn .25s ease;
}
/* Connected — green flash before fade-out */
#reconnect-widget[data-state="connected"]{
  border-color:rgba(34,197,94,.5);
  box-shadow:0 0 24px rgba(34,197,94,.25);
  animation:none;
}
#reconnect-widget[data-state="reconnecting"] .rc-spinner{display:block;}
#reconnect-widget[data-state="reconnecting"] #reconnect-status{color:#fbbf24;}
#reconnect-widget[data-state="connected"]    #reconnect-status{color:#22c55e;}
#reconnect-widget[data-state="connected"] #reconnect-btn{display:none;}
#fullscreen-btn:focus-visible{outline:2px solid #06b6d4;outline-offset:3px;}
#fullscreen-btn.is-fs{border-color:rgba(6,182,212,.3);color:#22d3ee;}
#fullscreen-btn.is-fs:hover{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.5);}
#fullscreen-btn.is-fs .fs-expand {opacity:0;transform:scale(.5);}
#fullscreen-btn.is-fs .fs-compress{opacity:1;transform:scale(1);}
#char-v3-close:focus-visible{ outline:2px solid #6eb4dc; outline-offset:2px; }
.cv3-loadout-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.cv3-loadout-sub{ font-size:8px; color:#516176; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
#char-v3-body-rail [data-slot-key="head"]{ grid-area:head; }
#char-v3-body-rail [data-slot-key="torso"]{ grid-area:torso; }
#char-v3-body-rail [data-slot-key="legs"]{ grid-area:legs; }
#char-v3-body-rail [data-slot-key="weapon"]{ grid-area:weapon; }
#char-v3-body-rail [data-slot-key="consumable"]{ grid-area:consumable; }
.cv3-slot{
  position:relative; min-width:0; aspect-ratio:1 / 1; box-sizing:border-box;
  display:grid; place-items:center; overflow:hidden;
  padding:9px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(110,180,220,.20); background:rgba(255,255,255,.02);
}
.cv3-slot:hover{ border-color:#6eb4dc; background:rgba(110,180,220,.10); }
.cv3-slot:focus-visible{ outline:2px solid #6eb4dc; outline-offset:2px; }
.cv3-slot-empty{ border-style:dashed; }
.cv3-slot-short{ position:absolute; top:8px; left:8px; z-index:2; max-width:65%; overflow:hidden;
  font-size:9px; letter-spacing:1.2px; color:#6eb4dc; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.cv3-slot-icon{ font-size:38px; line-height:1; transform:translateY(-3px); }
.cv3-slot-empty-icon{ font-size:30px; color:#334155; opacity:.55; transform:translateY(-3px); }
.cv3-slot-name{ position:absolute; left:7px; right:7px; bottom:8px; z-index:2;
  font-size:10px; line-height:1.15; color:#e2e8f0; text-align:center; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv3-slot-label{ display:none; }
.cv3-slot-tier{ position:absolute; top:7px; right:7px; z-index:2; max-width:40%; overflow:hidden;
  font-size:8px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; }
.cv3-dim{ color:#64748b; font-style:italic; }

/* DEATH-DUR-UI at-a-glance: per-slot durability on the body-reconstruction tiles.
   Rendered only for damaged/critical/low/broken (healthy slots stay clean so worn
   parts pop). Multi-signal — icon+word (.cv3-slot-dur-cond) + a thin bar; colour is
   a redundant channel keyed by the condition class (WCAG 2.2 §1.4.1). */
.cv3-slot-dur{ position:absolute; inset:auto 5px 2px; z-index:3; height:4px; }
.cv3-slot-dur-track{ width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.cv3-slot-dur-fill{ height:100%; border-radius:2px; background:currentColor; }
.cv3-slot-dur-cond{ position:absolute; right:2px; bottom:7px; max-width:80%; overflow:hidden; text-overflow:ellipsis;
  font-size:7px; font-weight:700; letter-spacing:.3px; white-space:nowrap; }
.cv3-slot-dur--damaged { color:#fde047; }
.cv3-slot-dur--critical{ color:#fb923c; }
.cv3-slot-dur--low     { color:#f87171; }
.cv3-slot-dur--broken  { color:#ef4444; }
/* Broken slot: warm border draws the eye to the most critical state — paired with
   the icon+word above, never colour alone. Mirrors the existing .char-slot.cs-broken. */
.cv3-slot--broken{ border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.07); }
.cv3-slot--broken:hover{ border-color:#ef4444; background:rgba(239,68,68,.12); }
/* ITEM-REQUIREMENTS-V1 (#4267): inactive slot — equipped item reqs no longer met.
   Amber palette; paired with stat bars, never colour alone (WCAG 1.4.1). */
.cv3-slot--inactive{ border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.06); opacity:.65; }
.cv3-slot--inactive:hover{ border-color:#fbbf24; background:rgba(251,191,36,.11); opacity:1; }

/* CHAR-V3-GEAR-SLOTS-01: section header separating Body Parts from Gear in the left rail */
.cv3-rail-header{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#6eb4dc; font-weight:600; opacity:.85; padding:2px 2px 0; margin-top:4px; }
.cv3-rail-header:first-child{ margin-top:0; }
.cv3-cell{
  min-width:0; min-height:0; aspect-ratio:1 / 1; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px; border-radius:10px; cursor:pointer; text-align:center; overflow:hidden;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02);
}
.cv3-cell:hover{ border-color:#6eb4dc; background:rgba(110,180,220,.10); }
.cv3-cell:focus-visible{ outline:2px solid #6eb4dc; outline-offset:2px; }
/* CHARPANEL-UX-05 (#3964): :active click feedback + selected state.
   :active gives immediate click confirmation (scale+brighten) before the
   info panel opens. .cv3-cell--active persists the highlight on the cell
   whose info panel is currently open. Industry: D4/Lost Ark (2026) keep
   the selected cell highlighted while tooltip/panel is shown. */
.cv3-cell:active,.cv3-slot:active{ transform:scale(0.97); background:rgba(110,180,220,.16); transition:none; }
.cv3-cell--active{ border-color:rgba(110,180,220,.8)!important; background:rgba(110,180,220,.12); }
.cv3-cell-icon{ font-size:28px; line-height:1; }
.cv3-cell-name{ font-size:10px; line-height:1.15; color:#e2e8f0; max-width:100%; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; }
.cv3-cell-qty{ font-size:11px; color:#94a3b8; }
/* CREDITS-V0-06 (#3894) + CHARPANEL-UX-01 (#3961) + CHARPANEL-UX-04 (#3959):
   currency/material section headers. Colors updated for readability on dark bg.
   grid-column:1/-1 makes headers span ALL grid columns — they appear as full-width
   visual dividers instead of narrow 1-column cells. Industry: D4/ARC Raiders use
   full-width dividers to separate currency from material sections. */
.cv3-section-hd{
  font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#64748b;
  font-weight:600; padding:6px 2px 2px; width:100%;
  grid-column:1 / -1;  /* span all grid columns in #char-v3-inventory display:grid */
  border-top:1px solid rgba(255,255,255,.06); margin-top:4px;
}
.cv3-section-hd:first-child{ border-top:none; margin-top:0; }
.cv3-section-hd--currency{ color:#fbbf24; border-top:none; margin-top:0; }
.cv3-cell-qty--currency{ font-weight:700; }
/* INV-CONSOLIDATE-01 — ported from the retired legacy #inv-panel */
.cv3-weight{ grid-column:1 / -1; padding:6px 2px 2px; }
.cv3-weight-lbl{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:1px; color:#94a3b8; margin-bottom:3px; }
.cv3-weight-track{ height:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.cv3-weight-bar{ height:100%; border-radius:3px; transition:width .25s; }
.cv3-weight-warn{ font-size:9px; letter-spacing:1px; margin-top:3px; font-weight:600; }
.cv3-section-hd--risk{ color:#f87171; display:flex; align-items:baseline; gap:8px; }
.cv3-risk-count{ font-size:8px; color:#f87171; font-weight:400; letter-spacing:1px; }
.cv3-prot-badge{ font-size:7px; letter-spacing:1px; font-weight:700; color:#34d399;
  border:1px solid rgba(52,211,153,.4); border-radius:4px; padding:1px 4px; }
.cv3-use-btn{ font-size:8px; letter-spacing:1px; font-weight:700; color:#22c55e;
  background:transparent; border:1px solid rgba(34,197,94,.45); border-radius:4px;
  padding:2px 6px; cursor:pointer; }
.cv3-use-btn:hover{ background:rgba(34,197,94,.12); border-color:#22c55e; }
.cv3-use-btn:disabled{ opacity:.4; cursor:default; }
/* CONSUMABLE-SLOT-01 - commit ONE consumable; only that one can be used.
   Cyan is reserved (visual language doc), so the committed state uses amber -
   distinct from USE's green without competing with it. */
.cv3-slot-btn{ font-size:8px; letter-spacing:1px; font-weight:700; color:#f59e0b;
  background:transparent; border:1px solid rgba(245,158,11,.45); border-radius:4px;
  padding:2px 6px; cursor:pointer; margin-left:4px; }
.cv3-slot-btn:hover{ background:rgba(245,158,11,.12); border-color:#f59e0b; }
/* Committed: filled, not just outlined - state must not be colour-alone
   (WCAG 2.2 1.4.1), and the label itself changes to "SLOTTED". */
.cv3-slot-btn--active{ background:rgba(245,158,11,.18); border-color:#f59e0b; color:#fbbf24; }
/* Live count on the worn consumable tile. Read from `inventory` every render -
   never cached in the slot, so it cannot drift from the bag. */
.cv3-slot-qty{ font-size:9px; font-weight:700; color:#cbd5e1; letter-spacing:.5px; }
/* Zero is SHOWN, not hidden: an empty-but-committed slot is a legal state
   (you drank the last one) and the player needs to see it, not guess. */
.cv3-slot-qty--empty{ color:#f59e0b; }
.cv3-slot-empty-text{ font-size:8px; color:#64748b; letter-spacing:.5px; }
/* INV-INTERACT-R2 */
.cv3-legacytool-badge{ font-size:7px; letter-spacing:1px; font-weight:700; color:#94a3b8;
  border:1px solid rgba(148,163,184,.35); border-radius:4px; padding:1px 4px; }
.cv3-inv-drop{ outline:2px dashed rgba(34,211,238,.55); outline-offset:-4px; border-radius:10px; }
.cv3-slot-filled{ cursor:grab; }
.cv3-cell-filler{ cursor:default; opacity:.35; border-style:dashed; }
.cv3-cell-filler:hover{ border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.02); }
/* INV-DRAG-EQUIP-01 — legal destination slot highlight while dragging a bag item.
   Applies whether the slot is empty or occupied (a drop swaps via equipItem). */
.cv3-slot-drop{ border-color:#22d3ee !important;
  box-shadow:0 0 10px rgba(34,211,238,.45), inset 0 0 6px rgba(34,211,238,.18);
  animation:cv3-slot-drop-pulse 1.1s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .cv3-slot-drop{ animation:none; } }
/* WAKE-BAY-QUEST-REBUILD-01 — the crafted onboarding item, highlighted in the
   bag BEFORE the player picks it up (pairs with .cv3-slot-drop above, which
   this ticket's guidance layer now also triggers proactively, not just
   reactively mid-drag). Same cyan pulse convention. */
.cv3-cell--quest-target{ border-color:#22d3ee !important;
  box-shadow:0 0 10px rgba(34,211,238,.45), inset 0 0 6px rgba(34,211,238,.18);
  animation:cv3-slot-drop-pulse 1.1s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .cv3-cell--quest-target{ animation:none; } }
/* DEATH-DUR-UI-10 at-a-glance: durability on a bag equippable cell. Rendered only
   for damaged/critical/low/broken (healthy/no-data cells stay clean). Compact
   variant of .cv3-slot-dur — same shared condition colours; multi-signal icon+word
   (.cv3-cell-dur-cond) + a thin bar, colour redundant (WCAG 2.2 §1.4.1). */
.cv3-cell-dur{ width:100%; display:flex; align-items:center; gap:6px; margin-top:1px; }
.cv3-cell-dur-track{ flex:0 0 40px; height:3px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.cv3-cell-dur-fill{ height:100%; border-radius:2px; background:currentColor; }
.cv3-cell-dur-cond{ font-size:10px; font-weight:600; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv3-cell-dur--damaged { color:#fde047; }
.cv3-cell-dur--critical{ color:#fb923c; }
.cv3-cell-dur--low     { color:#f87171; }
.cv3-cell-dur--broken  { color:#ef4444; }
/* Broken bag cell: warm border draws the eye, paired with the icon+word — never
   colour alone. Mirrors .cv3-slot--broken. */
.cv3-cell--broken{ border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.07); }
.cv3-cell--broken:hover{ border-color:#ef4444; background:rgba(239,68,68,.12); }

/* BODY-RECON-EQUIP-01 (#4158): ℹ info icon — top-right corner of each equippable cell.
   Stays hidden until the cell is hovered so it doesn't clutter the resting grid.
   Clicking the icon opens ItemInfoPanel; clicking the cell body equips directly. */
.cv3-info-btn{
  display:none; position:absolute; top:3px; right:3px;
  width:18px; height:18px; border-radius:50%;
  background:rgba(110,180,220,.20); border:1px solid rgba(110,180,220,.35);
  color:#6eb4dc; font-size:11px; line-height:18px; text-align:center;
  cursor:pointer; padding:0; z-index:2;
}
.cv3-cell[data-equip-cell]{ position:relative; }
.cv3-cell[data-equip-cell]:hover .cv3-info-btn{ display:block; }
.cv3-info-btn:hover{ background:rgba(110,180,220,.40); border-color:#6eb4dc; }
.cv3-slot--equip-flash{ animation:cv3SlotEquipFlash 0.55s ease-out forwards; }

/* BODY-RECON-DRAG-DELETE-01 (#4160): drag cursor + discard zone overlay.
   .cv3-cell[data-equip-cell] gets cursor:grab to signal draggability. */
.cv3-cell[data-equip-cell]{ cursor:grab; }
.cv3-cell[data-equip-cell]:active{ cursor:grabbing; }

/* INV-DRAG-EQUIP-01 feel fix: the zone is an INVISIBLE drop-catcher for the
   whole drag (it resolves equip vs no-op vs discard by coordinates). The red
   danger tint + 🗑 label only ARM when the cursor actually leaves the panel
   (dragover hit-test adds .cv3-discard-zone--armed) — an equip-bound drag no
   longer screams "you are about to destroy this item". */
.cv3-discard-zone{
  display:none; position:fixed; inset:0; z-index:3000;
  align-items:center; justify-content:center;
  background:transparent; border:none;
  /* INV-POINTER-DRAG-01: visual-only. Pointer capture owns the gesture, so this
     layer must never replace the real equipment/inventory hit targets. */
  pointer-events:none;
}
.cv3-discard-zone--armed{
  background:rgba(239,68,68,.10); border:2px dashed rgba(239,68,68,.50);
}
.cv3-discard-zone-label{
  display:none;
  background:rgba(239,68,68,.80); color:#fff; font-size:16px;
  font-weight:700; letter-spacing:2px; padding:12px 28px; border-radius:8px;
  pointer-events:none;
}
.cv3-discard-zone--armed .cv3-discard-zone-label{ display:block; }
.cv3-drag-ghost{
  position:fixed; left:0; top:0; z-index:3001; margin:0!important;
  pointer-events:none!important; opacity:.88; overflow:hidden;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));
  transform-origin:top left; will-change:transform;
}
.cv3-section-toggle{
  width:100%; background:none; border:none; color:#6eb4dc; font-size:11px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:600; padding:6px 10px;
  text-align:left; cursor:pointer; display:flex; align-items:center; gap:4px;
}
.cv3-section-toggle:hover{ background:rgba(110,180,220,.07); }
.cv3-section-body{ padding:4px 8px 8px; }
.iip-header{ display:flex; align-items:center; gap:10px; margin-bottom:8px; padding-right:22px; }
/* Explicit close (✕) — discoverable dismiss so the player isn't relying on
   click-outside/Esc. Floats top-right over the panel's padding. */
.iip-close{
  position:absolute; top:8px; right:10px; width:24px; height:24px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:6px; background:transparent;
  color:#94a3b8; font-size:15px; line-height:1; cursor:pointer;
}
.iip-close:hover{ background:rgba(110,180,220,.16); color:#e2e8f0; }
.iip-close:focus-visible{ outline:2px solid #6eb4dc; outline-offset:2px; }
.iip-icon{ font-size:26px; line-height:1; }
.iip-name{ font-size:16px; font-weight:600; }
.iip-badge{
  display:inline-block; font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:#6eb4dc; border:1px solid rgba(110,180,220,.40); border-radius:6px;
  padding:2px 8px; margin-bottom:10px;
}
.iip-meta{ font-size:12px; color:#94a3b8; margin:2px 0; }
/* PROG-ATLAS-01 follow-up (2026-07-23): authored ui.shortDesc/promise line —
   full-panel only (see item-info-panel.js::_flavorText); the hover tooltip's
   max-width:240px makes a 2-3 sentence description wrap too tall for a
   glance-length preview, so it renders here instead, where there's room. */
.iip-flavor{ font-size:12px; color:#cbd5e1; line-height:1.4; margin:6px 0 10px; }
/* ITEM-POWER-01 (#6477): the headline gear-comparison number. Sized above the
   stat lines it summarises, in the panel's existing cyan accent — no new hue.
   The --none variant is muted: "this slot contributes nothing" is information,
   not an alert, and the gathering-kit case is a deliberate player choice. */
.iip-ip{ display:flex; align-items:baseline; gap:8px; margin:6px 0 10px; }
.iip-ip__label{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#6eb4dc; }
.iip-ip__value{ font-size:20px; font-weight:700; color:#e2e8f0; line-height:1; }
.iip-ip__none{ font-size:12px; color:#94a3b8; font-style:italic; }
/* CHARPANEL-UX-06 (#3962): "Replaces:" callout — muted but distinct from plain meta */
.iip-replaces{ color:#64748b; font-style:italic; margin-top:6px; }
.iip-stat{ font-size:13px; color:#5eead4; margin:3px 0; }
/* CHARPANEL-UX-07 (#3965) + STAT-COMP-V1 (#4243): stat delta badges.
   Wong colorblind-safe palette replaces the V0 red/green pair which failed
   WCAG 1.4.1 in deuteranopia/protanopia. Wong 2011 (Nature Methods). */
.iip-stat-compare{ display:flex; align-items:baseline; gap:6px; }
.iip-stat-compare .iip-glyph{ font-size:14px; flex:0 0 auto; opacity:0.95; }
.iip-stat-compare .iip-stat-text{ flex:0 1 auto; }
.iip-delta-better{ font-size:11px; color:#009E73; font-weight:600; }
.iip-delta-worse{ font-size:11px; color:#D55E00; font-weight:600; }

/* STAT-COMP-V1 (#4243) AC5: verdict glyph header at the top of the item info panel.
   role="heading" aria-level="3" so screen readers announce the verdict as a
   level-3 heading before stat rows. Wong-palette variant classes color the
   verdict text per outcome. */
.iip-verdict-hdr{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 4px 0; padding:4px 8px;
  font-size:13px; font-weight:700; letter-spacing:0.04em;
  border-radius:6px; background:rgba(15,23,42,0.55);
}
.iip-verdict-hdr .iip-glyph{ font-size:24px; line-height:1; }
.iip-verdict-hdr .iip-verdict-word{ font-size:13px; }
.iip-verdict-up   { color:#009E73; }   /* Wong bluish-green */
.iip-verdict-down { color:#D55E00; }   /* Wong vermillion   */
.iip-verdict-side { color:#94a3b8; }   /* slate-400 neutral */
.iip-verdict-new  { color:#5eead4; }   /* existing cyan accent for new-item gains */

/* ITEM-REQUIREMENTS-V1 (#4267): equipment requirements section in the item-info panel.
   Survivor Lv + attr gates + job level. Met = cyan; unmet = vermillion (Wong palette). */
.iip-req-section{ margin:8px 0 4px; padding:6px 8px; border-radius:6px; background:rgba(15,23,42,.5); border:1px solid rgba(110,180,220,.15); }
.iip-req-header{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; margin-bottom:5px; }
.iip-req-row{ display:flex; justify-content:space-between; font-size:12px; margin:2px 0; }
.iip-req-row.iip-req--met .iip-req-label,
.iip-req-row.iip-req--met .iip-req-val{ color:#5eead4; }
.iip-req-row.iip-req--unmet .iip-req-label,
.iip-req-row.iip-req--unmet .iip-req-val{ color:#D55E00; font-weight:600; }
.cv3-req-err{ color:#ef4444; font-size:12px; padding:3px 8px; margin:2px 0; }
.rc-equip-warn{ font-size:10px; color:#fbbf24; margin:4px 0 0; }

/* STAT-COMP-V1 (#4243) AC4: derived-stat regression warning row, positioned
   directly under the verdict header and ABOVE stat rows. Amber palette is
   intentionally distinct from upgrade (green) and downgrade (vermillion). */
.iip-derived-warn{
  display:flex; align-items:center; gap:6px;
  margin:2px 0 4px 0; padding:3px 8px;
  font-size:12px; color:#F5A623; font-weight:600;
  border-left:2px solid #F5A623; background:rgba(245,166,35,0.08);
  border-radius:0 4px 4px 0;
}
.iip-derived-warn .iip-glyph{ font-size:14px; }
.iip-desc{ font-size:12px; color:#94a3b8; margin-top:10px; line-height:1.45; font-style:italic; }
.iip-action{
  margin-top:14px; width:100%; padding:9px 0; border-radius:8px;
  border:1px solid #6eb4dc; background:rgba(110,180,220,.16); color:#e2e8f0;
  font-size:13px; letter-spacing:1px; cursor:pointer;
}
.iip-action:hover{ background:rgba(110,180,220,.30); }
.iip-action:focus-visible{ outline:2px solid #6eb4dc; outline-offset:2px; }
.iip-tip-name{ font-size:12px; color:#e2e8f0; }
.iip-tip-badge{ font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#6eb4dc; }
.iip-tip-stat{ font-size:11px; color:#5eead4; }
/* Hover durability warning — icon+word (never colour-alone, WCAG 1.4.1); colour
   is a redundant channel keyed by condition. Only non-healthy items show it. */
.iip-tip-dur{ font-size:11px; font-weight:600; }
.iip-tip-dur--damaged { color:#fde047; }
.iip-tip-dur--critical{ color:#fb923c; }
.iip-tip-dur--low     { color:#f87171; }
.iip-tip-dur--broken  { color:#ef4444; }

/* STAT-COMP-V1 PR-2 (#4243): hover tooltip auto-pop compare section. Glyph +
   word verdict header + ≤3 sorted-DESC delta rows + optional warning line.
   Industry 2026 standard (D4 had to ship this as an opt-in setting; community
   complains it's OFF by default). NN/g: tooltip max 3 chunked lines. */
.iip-tip-compare-hdr{
  display:flex; align-items:center; gap:6px;
  margin-top:4px; padding-top:4px;
  border-top:1px solid rgba(110,180,220,.25);
  font-size:11px; font-weight:700; letter-spacing:0.02em;
}
.iip-tip-compare-hdr .iip-glyph{ font-size:14px; line-height:1; }
.iip-tip-compare-hdr.iip-verdict-up  { color:#009E73; }   /* Wong bluish-green */
.iip-tip-compare-hdr.iip-verdict-down{ color:#D55E00; }   /* Wong vermillion   */
.iip-tip-compare-hdr.iip-verdict-side{ color:#94a3b8; }
.iip-tip-compare-hdr.iip-verdict-new,
.iip-tip-cmp-new                    { color:#5eead4; }

.iip-tip-delta{
  display:flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600;
}
.iip-tip-delta .iip-glyph{ font-size:12px; opacity:0.95; }
.iip-tip-delta-text{ font-variant-numeric:tabular-nums; }

/* Warning row in tooltip mode — compact variant of .iip-derived-warn. */
.iip-derived-warn-tip{
  display:flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:#F5A623;
  border-left:none; background:transparent; padding:0; margin:0;
  border-radius:0;
}

/* DEATH-DUR-UI-11/13/14 (#3653 sprint 6.5) — item-info durability section.
   Multi-signal per WCAG 2.2 §1.4.1: bar width + colored fill + current/max number
   + condition label + icon. Color SUPPORTS, never the sole signal. */
.iip-dur{ margin:8px 0 4px; padding:8px 10px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.iip-dur__head{ font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; margin-bottom:4px; }
.iip-dur__row{ display:flex; align-items:center; gap:8px; }
.iip-dur__track{ flex:1; height:8px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.iip-dur__fill{ height:100%; border-radius:4px; background:#34d399; transition:width .2s ease; }
.iip-dur__num{ font-variant-numeric:tabular-nums; font-size:12px; color:#e2e8f0; min-width:52px; text-align:right; }
.iip-dur__condition{ font-size:12px; margin-top:5px; color:#cbd5e1; }
.iip-dur__broken{ font-size:11px; margin-top:3px; color:#fca5a5; }
.iip-dur--healthy  .iip-dur__fill{ background:#34d399; } /* green */
.iip-dur--damaged  .iip-dur__fill{ background:#facc15; } /* yellow */
.iip-dur--critical .iip-dur__fill{ background:#fb923c; } /* orange */
.iip-dur--low      .iip-dur__fill{ background:#f87171; } /* red */
.iip-dur--broken   .iip-dur__fill{ background:#ef4444; }
.iip-dur--broken{ border-color:rgba(239,68,68,.4); }
.iip-dur--healthy  .iip-dur__condition{ color:#86efac; }
.iip-dur--damaged  .iip-dur__condition{ color:#fde68a; }
.iip-dur--critical .iip-dur__condition{ color:#fdba74; }
.iip-dur--low      .iip-dur__condition,
.iip-dur--broken   .iip-dur__condition{ color:#fca5a5; }
.cv3-rail-header{font:700 10px/1 var(--k-disp);letter-spacing:.15em;color:var(--k-ink3)}
/* slots + cells become chiclets */
.cv3-slot{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);box-shadow:var(--k-inset)}
.cv3-slot:hover{background:linear-gradient(180deg,var(--k-hov-a),var(--k-hov-b));border-color:var(--k-line2)}
.cv3-slot-empty{background:rgba(11,17,24,.55);box-shadow:none;border-style:dashed;border-color:var(--k-line2)}
.cv3-slot-short{font:800 10px/1.2 var(--k-disp);letter-spacing:.12em;color:var(--k-ink3)}
.cv3-slot-name{font-weight:700;color:var(--k-ink)}
.cv3-slot-label{color:var(--k-ink4)}
.cv3-cell{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);box-shadow:var(--k-inset)}
.cv3-cell:hover{background:linear-gradient(180deg,var(--k-hov-a),var(--k-hov-b));border-color:var(--k-cy-deep)}
.cv3-cell--active{border-color:var(--k-cy)!important;
  box-shadow:var(--k-inset),0 0 0 1px rgba(53,201,236,.28),0 0 16px -4px var(--k-cy-glow)}
.cv3-cell-name{font-weight:700;color:var(--k-ink)}
.cv3-cell-qty{font:700 11px/1 var(--k-mono);color:var(--k-ink3)}
.cv3-cell-filler{background:rgba(11,17,24,.5);border:1px dashed var(--k-line);box-shadow:none}
.cv3-section-hd{font:700 9.5px/1 var(--k-disp);letter-spacing:.15em;color:var(--k-ink3);
  border-top:1px solid var(--k-line)}
.cv3-section-hd--currency{color:var(--k-act-a)}
/* rendered item/material art inside icon slots */
.cv3-icon-art{display:inline-grid;place-items:center}
.cv3-cell-icon.cv3-icon-art img{width:36px;height:36px;object-fit:contain}
.cv3-slot-icon.cv3-icon-art img{width:58px;height:58px;object-fit:contain}
.cv3-cell-icon .mat-icon-img{width:34px;height:34px}
#leaderboard-panel h2,#leaderboard-panel h3,#codex-panel h2,#codex-panel h3,
#worldmap-panel h2,#worldmap-panel h3,#craft-panel h2,#craft-panel h3,
#attrib-panel h2,#attrib-panel h3,#claim-panel h2,#claim-panel h3{
  font-family:var(--k-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink);
}
/* leaderboard rows → chiclets; self-row = cyan selection */
.lb-row{background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);border-radius:var(--k-rad-tile);box-shadow:var(--k-inset);
  margin-bottom:6px;}
.lb-row:hover{background:linear-gradient(180deg,var(--k-hov-a),var(--k-hov-b));border-color:var(--k-line2);}
.lb-row-self{border-color:var(--k-cy);
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-cy) 12%,var(--k-tile-a)),color-mix(in srgb,var(--k-cy) 5%,var(--k-tile-b)));
  box-shadow:var(--k-inset),0 0 0 1px rgba(53,201,236,.28);}
/* codex cards → chiclets */
.cx-enemy-card,.cx-drop-card,.cx-card-pill{
  background:linear-gradient(180deg,var(--k-tile-a),var(--k-tile-b));
  border:1px solid var(--k-line);border-radius:var(--k-rad-tile);box-shadow:var(--k-inset);}
.cx-enemy-card:hover{background:linear-gradient(180deg,var(--k-hov-a),var(--k-hov-b));border-color:var(--k-line2);}
.chat-panel.chat-tab-log-active .chat-input-row{ display:none; }
.chat-panel .chat-row-event .chat-row-event-tag{
  font-family:var(--k-disp); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; padding-top:2px; cursor:default;
}
.chat-panel .chat-row-event .chat-row-text{ color:var(--k-ink2); }
.chat-panel .chat-row-log-empty .chat-row-text{ color:var(--k-ink4); font-style:italic; }