/*
 * DELVE — Medieval AAA-style UI theme overlay.
 *
 * Loaded AFTER the inline <style> in client/index.html so its rules win the
 * cascade for same-specificity selectors. Everything here is purely visual:
 * the DOM structure (and class names that the JS sets) is unchanged.
 *
 * Palette: parchment + brass + dark wood + blood, inspired by WoW unit
 * frames and RuneScape inventory panels. Typography: Cinzel for display
 * (titles, item names), IM Fell DW Pica for body (stats, prose).
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=IM+Fell+DW+Pica:ital@0;1&display=swap');

:root {
  /* Parchment palette */
  --mw-parchment:        #e6d3a3;
  --mw-parchment-warm:   #f0dfb0;
  --mw-parchment-dark:   #c2a872;
  --mw-parchment-edge:   #7a5a2a;
  --mw-parchment-burn:   #4a3018;
  /* Wood (frames) */
  --mw-wood-dark:        #2a1610;
  --mw-wood:             #432016;
  --mw-wood-light:       #6a3a22;
  /* Brass / gold */
  --mw-gold:             #b08542;
  --mw-gold-bright:      #f0c870;
  --mw-gold-glow:        #e8b850;
  --mw-gold-dark:        #6c4a18;
  /* Ink (text) */
  --mw-ink:              #2a1810;
  --mw-ink-dim:          #5a3a22;
  --mw-ink-faint:        #8a6a44;
  /* Blood / accent */
  --mw-blood:            #8a1f1f;
  --mw-blood-bright:     #c93030;
  /* Stat bar fills */
  --mw-hp:               #b02828;
  --mw-hp-bright:        #e84a4a;
  --mw-mp:               #2a4a9a;
  --mw-mp-bright:        #4a7adc;
  --mw-stam:             #c69828;
  --mw-stam-bright:      #f0c850;
  /* Rarity (kept aligned with existing) */
  --mw-rar-common:       #6a5a3a;
  --mw-rar-uncommon:     #3a8a4e;
  --mw-rar-rare:         #3a7aa8;
  --mw-rar-epic:         #8a4abf;
  --mw-rar-legend:       #d6a04a;
  /* Shadow + glow */
  --mw-shadow-soft:      0 2px 8px rgba(0, 0, 0, 0.55);
  --mw-shadow-deep:      0 8px 28px rgba(0, 0, 0, 0.75);
  --mw-inner-glow:       inset 0 0 24px rgba(110, 60, 18, 0.18);
}

/* ===========================================================================
 *  Typography
 * ========================================================================= */

body, .hud-chat-input input {
  font-family: 'IM Fell DW Pica', 'Garamond', 'Times New Roman', serif !important;
  color: var(--mw-parchment-warm);
}

/* Display headings — Cinzel for titles, headers, item names. */
.hub-title, .inv-title, .shop-title, .form-card h1,
.tt-name, .hub-name, .hub-section, .shop-tab-label,
.hud-gold {
  font-family: 'Cinzel', 'Cinzel Decorative', 'Georgia', serif !important;
  letter-spacing: 0.06em !important;
}

/* ===========================================================================
 *  Parchment frame primitive — used by every overlay panel.
 *  A wood-brass-edged scroll/tome look applied via layered backgrounds
 *  and four corner ornament pseudo-elements (gold flourishes via ::before).
 * ========================================================================= */

.hub-card, .inv-card, .shop-card, .form-card {
  background:
    /* Same dark-wood interior the HUD bar housing uses. */
    radial-gradient(ellipse at 30% 25%, rgba(255, 220, 160, 0.04) 0%, transparent 55%),
    linear-gradient(180deg, rgba(40, 22, 10, 0.97), rgba(20, 10, 4, 0.99))
    !important;
  border: 2px solid var(--mw-wood-dark) !important;
  box-shadow:
    /* Brass inner line, deep stone inset, drop shadow — same recipe as the
       HUD bar wrapper so all on-screen UI feels like one armor set. */
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 0 2px var(--mw-gold),
    inset 0 0 0 3px var(--mw-wood-dark),
    inset 0 0 26px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    var(--mw-shadow-deep) !important;
  border-radius: 4px !important;
  padding: 28px 32px !important;
  color: #f0dfb0 !important;
  position: relative !important;
}

/* Corner brass rivets — bright dots in each interior corner. */
.hub-card::after, .inv-card::after, .shop-card::after, .form-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 5px 5px, var(--mw-gold-bright) 0px, var(--mw-gold) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--mw-gold-bright) 0px, var(--mw-gold) 2.5px, transparent 3.5px),
    radial-gradient(circle at 5px calc(100% - 5px), var(--mw-gold-bright) 0px, var(--mw-gold) 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), var(--mw-gold-bright) 0px, var(--mw-gold) 2.5px, transparent 3.5px);
  background-repeat: no-repeat;
}

/* Override the existing ::before decorative-bar on hub-card so it doesn't
   compete with the gold/wood rim. We replace it with a centered gold
   fleur-de-lis flourish at the top edge. */
.hub-card::before, .shop-card::before, .inv-card::before, .form-card::before {
  content: '✦  ⚜  ✦' !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  letter-spacing: 0.4em !important;
  color: var(--mw-gold-bright) !important;
  background: none !important;
  height: auto !important;
  opacity: 0.85 !important;
  text-shadow: 0 1px 0 var(--mw-gold-dark), 0 0 4px rgba(240, 200, 112, 0.4) !important;
  pointer-events: none !important;
}

/* ===========================================================================
 *  Page background — set behind any overlay so the parchment doesn't
 *  float against pure black. Subtle dark vignette over a warm tone.
 * ========================================================================= */
.inv-overlay, .hub-overlay, .shop-overlay, #overlay {
  background:
    radial-gradient(ellipse at center, rgba(20, 8, 4, 0.65) 0%, rgba(8, 4, 2, 0.92) 100%)
    !important;
}

/* ===========================================================================
 *  HUD — the always-visible in-game overlay
 * ========================================================================= */

/* ---- Resource bars: HP / MP / EXP (vertical stack, bottom-left) ---- */

.hud-bars {
  top: auto !important;
  right: auto !important;
  left: 12px !important;
  bottom: 12px !important;
  gap: 5px !important;
  padding: 8px 10px !important;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.85), rgba(20, 10, 4, 0.92)) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 12px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

.hud-bar {
  width: 170px !important;
  height: 14px !important;
  background:
    linear-gradient(180deg, #18100a 0%, #2a1a10 50%, #18100a 100%) !important;
  border: 1px solid #000 !important;
  border-radius: 2px !important;
  box-shadow:
    /* Brass rim */
    0 0 0 1px var(--mw-gold-dark),
    0 0 0 2px var(--mw-gold),
    /* Deep inset */
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

.hud-bar-fill {
  position: relative !important;
  transition: width 140ms ease-out !important;
}

/* HP — deep red with bright top gloss */
.hud-bar-hp .hud-bar-fill {
  background:
    linear-gradient(180deg, var(--mw-hp-bright) 0%, var(--mw-hp) 50%, #5a1010 100%) !important;
  box-shadow: inset 0 0 6px rgba(255, 100, 100, 0.4) !important;
}

/* Mana — deep blue with bright top gloss */
.hud-bar-mana .hud-bar-fill {
  background:
    linear-gradient(180deg, var(--mw-mp-bright) 0%, var(--mw-mp) 50%, #1a2a5a 100%) !important;
  box-shadow: inset 0 0 6px rgba(80, 130, 255, 0.4) !important;
}

/* Stamina — kept for legacy bar; rows are hidden in the HUD layout. */
.hud-bar-stamina .hud-bar-fill {
  background:
    linear-gradient(180deg, var(--mw-stam-bright) 0%, var(--mw-stam) 50%, #6a4a10 100%) !important;
  box-shadow: inset 0 0 6px rgba(240, 200, 80, 0.45) !important;
}

/* EXP bar — warm gold gradient, with a brighter sheen than Stamina so it
   reads as "progress / accomplishment" not "depleting resource". */
.hud-bar-exp .hud-bar-fill {
  background:
    linear-gradient(180deg, var(--mw-gold-bright) 0%, var(--mw-gold) 45%, #6a4a18 100%) !important;
  box-shadow: inset 0 0 6px rgba(240, 200, 112, 0.55) !important;
}

/* Top gloss highlight that runs across every bar fill — sells the
   "polished glass over liquid" feel WoW unit frames have. */
.hud-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.10) 30%, transparent 60%);
  pointer-events: none;
}

.hud-bar-label {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: #fff7e0 !important;
  text-shadow:
    0 0 2px #000,
    0 1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.9) !important;
}

/* ---- Ability bar — centered bottom, parchment slots in brass frames ---- */

.hud-abilities {
  bottom: 14px !important;
  gap: 5px !important;
  padding: 6px 10px !important;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.86), rgba(20, 10, 4, 0.92)) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    0 6px 22px rgba(0, 0, 0, 0.75) !important;
}

/* 42px cells = 20% smaller than the 52px previous size. */
.hud-ability {
  width: 42px !important;
  height: 42px !important;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 220, 160, 0.15) 0%, transparent 55%),
    linear-gradient(160deg, #3a261a 0%, #1f130a 100%) !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  box-shadow:
    /* Brass rim */
    0 0 0 1px var(--mw-gold-dark),
    0 0 0 2px var(--mw-gold),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 1px 1px 0 rgba(255, 220, 150, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85) !important;
  transition: transform 100ms ease, box-shadow 100ms ease !important;
  pointer-events: auto !important;
}

/* Utility slots — slightly darker / faded so they read as "spare" pockets
   distinct from the active ability slots. Same rim treatment for visual
   continuity along the bar. */
.hud-ability-util {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 220, 160, 0.06) 0%, transparent 60%),
    linear-gradient(160deg, #261610 0%, #150a06 100%) !important;
  opacity: 0.85 !important;
}

.hud-ability:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px var(--mw-gold-bright),
    0 0 0 2px var(--mw-gold),
    0 0 12px rgba(240, 200, 112, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 1px 1px 0 rgba(255, 220, 150, 0.2) !important;
}

.hud-ability-cd {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: grayscale(0.6) !important;
}

.hud-ability-key {
  font-family: 'Cinzel', serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  bottom: 2px !important;
  right: 5px !important;
  color: var(--mw-gold-bright) !important;
  text-shadow:
    0 0 2px #000,
    0 1px 0 #000,
    1px 1px 0 var(--mw-wood-dark) !important;
  letter-spacing: 0.04em !important;
}

/* ---- Meta panel (gold + skills) — small parchment scroll, top-right ---- */

.hud-meta {
  top: 14px !important;
  right: 14px !important;
  padding: 10px 16px !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 235, 180, 0.06) 0%, transparent 60%),
    linear-gradient(178deg, var(--mw-parchment-warm) 0%, var(--mw-parchment-dark) 100%) !important;
  border: none !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, 0.5),
    inset 0 0 0 3px var(--mw-gold-dark),
    inset 0 0 18px rgba(70, 40, 14, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.6) !important;
  font-family: 'IM Fell DW Pica', serif !important;
  color: var(--mw-ink) !important;
  gap: 6px !important;
}

.hud-gold {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--mw-gold-dark) !important;
  text-shadow:
    0 1px 0 rgba(255, 235, 180, 0.5),
    0 0 4px rgba(180, 140, 60, 0.4) !important;
  letter-spacing: 0.08em !important;
}

.hud-gold::before {
  content: '⛁  ';
  color: var(--mw-gold);
}

.hud-skills {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 12px !important;
  color: var(--mw-ink-dim) !important;
  gap: 12px !important;
}

.hud-skill {
  font-style: italic;
}

/* ---- Chat log — translucent parchment strip ---- */

.hud-chat-log {
  background:
    linear-gradient(90deg, rgba(40, 22, 10, 0.78), rgba(40, 22, 10, 0.55) 80%, rgba(40, 22, 10, 0.4)) !important;
  border-left: 2px solid var(--mw-gold-dark) !important;
  padding: 8px 14px !important;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 13px !important;
  color: #f0dfb0 !important;
}

.hud-chat-from {
  color: var(--mw-gold-bright) !important;
  font-weight: 600;
  font-style: italic;
}

.hud-chat-input input {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 15px !important;
  background: rgba(20, 10, 4, 0.92) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 8px rgba(0, 0, 0, 0.5) !important;
  color: #f0dfb0 !important;
  padding: 8px 14px !important;
}

/* ===========================================================================
 *  Character Hub — opened-tome layout
 * ========================================================================= */

.hub-card {
  min-width: 880px !important;
  max-width: 1020px !important;
  gap: 22px !important;
}

.hub-title {
  font-family: 'Cinzel', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--mw-gold-bright) !important;
  text-transform: uppercase !important;
  padding-left: 0 !important;
  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(240, 200, 112, 0.35) !important;
}

.hub-title::before {
  content: '⚜' !important;
  position: static !important;
  transform: none !important;
  font-size: 16px !important;
  color: var(--mw-gold-bright) !important;
  opacity: 1 !important;
  margin-right: 12px !important;
}

.hub-title::after {
  content: '⚜';
  font-size: 16px;
  color: var(--mw-gold-bright);
  margin-left: 12px;
  vertical-align: baseline;
}

.hub-close {
  width: 32px !important;
  height: 32px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background:
    radial-gradient(ellipse at 30% 30%, #c93030 0%, var(--mw-blood) 50%, #4a1010 100%) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  color: #fff7e0 !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 200, 0.3),
    inset -2px -3px 6px rgba(0, 0, 0, 0.5),
    inset 2px 3px 4px rgba(255, 180, 180, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.6) !important;
  cursor: pointer !important;
  transition: transform 120ms ease, filter 120ms ease !important;
}

.hub-close:hover {
  transform: scale(1.08) !important;
  filter: brightness(1.15) !important;
  border-color: #000 !important;
  color: #fff !important;
}

.hub-name {
  font-family: 'Cinzel', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(240, 200, 112, 0.35) !important;
  letter-spacing: 0.04em !important;
}

.hub-class {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #c5a878 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
}

.hub-bar-head {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  color: #d6c084 !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
}

/* Stat bars in the hub get the same brass-frame treatment as the HUD */
.hub-bar {
  height: 12px !important;
  background: linear-gradient(180deg, #18100a 0%, #2a1a10 100%) !important;
  border: 1px solid #000 !important;
  box-shadow:
    0 0 0 1px var(--mw-gold-dark),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  border-radius: 2px !important;
}

.hub-bar-fill::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 60%) !important;
}

.hub-gold-row {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 220, 160, 0.08) 0%, transparent 70%),
    linear-gradient(90deg, rgba(176, 133, 66, 0.15), transparent) !important;
  border: 1px solid var(--mw-gold-dark) !important;
  border-left: 3px solid var(--mw-gold) !important;
  padding: 8px 14px !important;
  color: #f0dfb0 !important;
}

.hub-gold {
  font-family: 'Cinzel', serif !important;
  font-size: 15px !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 200, 112, 0.35) !important;
}

.hub-section {
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  border-bottom: 1px solid var(--mw-gold-dark) !important;
  padding-bottom: 6px !important;
  letter-spacing: 0.24em !important;
  position: relative !important;
  text-shadow: 0 1px 0 #000 !important;
}

.hub-section::after {
  content: '❦';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--mw-gold) !important;
  font-size: 11px;
}

.hub-skill-head {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 13px !important;
  color: #f0dfb0 !important;
}

.hub-skill-lvl {
  font-family: 'Cinzel', serif !important;
  color: var(--mw-gold-bright) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.hub-skill-xp {
  font-family: 'IM Fell DW Pica', serif !important;
  color: #a08858 !important;
  font-style: italic;
}

.hub-skill-bar {
  height: 6px !important;
  background: #18100a !important;
  border: 1px solid var(--mw-gold-dark) !important;
}

.hub-skill-fill {
  background: linear-gradient(90deg, #2a5a78 0%, #4a8fb8 100%) !important;
  box-shadow: 0 0 4px rgba(74, 143, 184, 0.5) !important;
}

/* Doll portrait frame — brass picture frame */
.hub-doll-ring {
  background:
    radial-gradient(ellipse at center 60%, rgba(176, 133, 66, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, #1a0e08 0%, #0c0604 100%) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 0 3px var(--mw-gold),
    inset 0 0 0 4px var(--mw-wood-dark),
    inset 0 0 32px rgba(0, 0, 0, 0.8),
    0 4px 16px rgba(0, 0, 0, 0.7) !important;
  border-radius: 4px !important;
}

.hub-doll-ring::before, .hub-doll-ring::after {
  display: none !important;
}

.hub-hint {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  font-size: 12px !important;
  color: #a08858 !important;
  border-top: 1px solid var(--mw-gold-dark) !important;
  padding-top: 8px !important;
}

/* ===========================================================================
 *  Shop — opened tome / scroll with two columns
 * ========================================================================= */

.shop-card {
  min-width: 760px !important;
  max-width: 900px !important;
  gap: 18px !important;
}

.shop-title {
  font-family: 'Cinzel', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  letter-spacing: 0.16em !important;
  text-shadow:
    0 1px 0 #000,
    0 0 8px rgba(240, 200, 112, 0.4) !important;
  text-transform: uppercase !important;
}

.shop-title-row {
  position: relative;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mw-gold-dark);
}

.shop-title-row::after {
  content: '⚜  ❦  ⚜';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #28160a;
  padding: 0 14px;
  color: var(--mw-gold-bright);
  font-size: 12px;
  letter-spacing: 0.3em;
}

/* Tabs (BUY / SELL) styled as inlaid plaques */
.shop-tabs, .shop-tab-row {
  gap: 10px !important;
}

.shop-tab, .shop-tab-btn {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  background:
    linear-gradient(180deg, #3a2410 0%, #1c0e06 100%) !important;
  color: #d6c084 !important;
  border: 1px solid #000 !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 1px 0 rgba(240, 200, 112, 0.18),
    0 2px 0 #000 !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: transform 100ms, filter 100ms !important;
}

.shop-tab-active, .shop-tab-btn-active, .shop-tab[aria-selected="true"] {
  background:
    linear-gradient(180deg, var(--mw-gold-bright) 0%, var(--mw-gold) 50%, var(--mw-gold-dark) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 180, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(176, 133, 66, 0.5) !important;
}

.shop-tab:hover, .shop-tab-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Shop item rows — inset dark strip with rarity-colored left bar */
.shop-row {
  background:
    linear-gradient(180deg, rgba(60, 36, 16, 0.55), rgba(36, 20, 10, 0.7)) !important;
  border: 1px solid var(--mw-gold-dark) !important;
  border-left: 4px solid var(--mw-gold) !important;
  border-radius: 2px !important;
  color: #f0dfb0 !important;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  transition: background 100ms, transform 100ms !important;
}

.shop-row:hover {
  background:
    linear-gradient(180deg, rgba(80, 48, 22, 0.7), rgba(50, 28, 14, 0.8)) !important;
  transform: translateX(2px);
}

.shop-row.rarity-uncommon { border-left-color: var(--mw-rar-uncommon) !important; }
.shop-row.rarity-rare     { border-left-color: var(--mw-rar-rare) !important; }
.shop-row.rarity-epic     { border-left-color: var(--mw-rar-epic) !important; }
.shop-row.rarity-legendary { border-left-color: var(--mw-rar-legend) !important;
                              box-shadow: inset 4px 0 8px rgba(214, 160, 74, 0.3) !important; }

.shop-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: #f0dfb0 !important;
}

.shop-price {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000 !important;
}

.shop-price::before {
  content: '⛁ ';
  color: var(--mw-gold);
}

/* Two-column tome layout — left column has buy ledger, right has sell. */
.shop-cols {
  gap: 22px !important;
  position: relative;
}

.shop-cols::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--mw-gold-dark) 10%, var(--mw-gold-dark) 90%, transparent 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

.shop-col-header {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--mw-gold-bright) !important;
  border-bottom: 1px solid var(--mw-gold-dark) !important;
  padding-bottom: 6px !important;
  text-shadow: 0 1px 0 #000 !important;
}

.shop-empty {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #a08858 !important;
  font-size: 13px !important;
  text-align: center;
  padding: 20px 0 !important;
}

.shop-hint {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #a08858 !important;
  font-size: 12px !important;
  border-top: 1px solid var(--mw-gold-dark) !important;
  padding-top: 10px !important;
}

.shop-gold {
  font-family: 'Cinzel', serif !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 220, 160, 0.10) 0%, transparent 70%),
    linear-gradient(90deg, rgba(176, 133, 66, 0.18), transparent) !important;
  border: 1px solid var(--mw-gold-dark) !important;
  border-left: 3px solid var(--mw-gold) !important;
  padding: 8px 14px !important;
  color: #f0dfb0 !important;
}

.shop-gold-label {
  color: #d6c084 !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 0.18em !important;
}

.shop-gold-amt {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 200, 112, 0.4) !important;
}

.shop-gold-amt::before {
  content: '⛁ ';
  color: var(--mw-gold);
}

.shop-close {
  width: 32px !important;
  height: 32px !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  background:
    radial-gradient(ellipse at 30% 30%, #c93030 0%, var(--mw-blood) 50%, #4a1010 100%) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  color: #fff7e0 !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 200, 0.3),
    inset -2px -3px 6px rgba(0, 0, 0, 0.5),
    inset 2px 3px 4px rgba(255, 180, 180, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.6) !important;
  cursor: pointer !important;
  transition: transform 120ms !important;
}

.shop-close:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}

/* Item icon cell INSIDE a shop row — small inset stone tile that holds
   the rendered LPC sprite. */
.shop-icon {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 220, 160, 0.06) 0%, transparent 55%),
    linear-gradient(160deg, #2a1610 0%, #14080a 100%) !important;
  border: 1px solid #000 !important;
  border-radius: 2px !important;
  box-shadow:
    0 0 0 1px var(--mw-gold-dark),
    inset 1px 1px 0 rgba(255, 220, 150, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85) !important;
}

.shop-icon-count {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 0 3px #000, 1px 1px 0 #000 !important;
}

.shop-row-meta {
  font-family: 'IM Fell DW Pica', serif !important;
  color: #f0dfb0 !important;
}

.shop-row-sub {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #c5a878 !important;
  font-size: 12px !important;
}

/* shop-btn is the per-row Buy/Sell button. Same wax-seal red pill. */
.shop-btn {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background:
    radial-gradient(ellipse at 30% 25%, #d04040 0%, var(--mw-blood) 50%, #4a1010 100%) !important;
  color: #fff7e0 !important;
  border: 1px solid #000 !important;
  border-radius: 4px !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 200, 0.4),
    inset 0 1px 0 rgba(255, 220, 220, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 2px 0 var(--mw-wood-dark) !important;
  transition: transform 100ms, filter 100ms !important;
}

.shop-btn:hover:not([disabled]) {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.shop-btn[disabled] {
  background:
    linear-gradient(180deg, #6a5a3a 0%, #3a2a1a 100%) !important;
  color: var(--mw-ink-faint) !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4) brightness(0.85);
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    0 1px 0 var(--mw-wood-dark) !important;
}

/* Legacy buy/sell button names — same styling in case any old code uses them. */
.shop-buy-btn, .shop-sell-btn {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background:
    radial-gradient(ellipse at 30% 25%, #d04040 0%, var(--mw-blood) 50%, #4a1010 100%) !important;
  color: #fff7e0 !important;
  border: 1px solid #000 !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 200, 0.4),
    inset 0 1px 0 rgba(255, 220, 220, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 2px 0 var(--mw-wood-dark) !important;
  transition: transform 100ms, filter 100ms !important;
}

.shop-buy-btn:hover:not([disabled]),
.shop-sell-btn:hover:not([disabled]) {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.shop-buy-btn:disabled, .shop-sell-btn:disabled {
  background:
    linear-gradient(180deg, #6a5a3a 0%, #3a2a1a 100%) !important;
  color: var(--mw-ink-faint) !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4) brightness(0.85);
}

/* ===========================================================================
 *  Shop — MMORPG-style two-grid window (player pack + shopkeeper stock)
 * ========================================================================= */

.shop-card-mmo {
  min-width: 1080px !important;
  max-width: 1180px !important;
  padding: 0 !important;
  gap: 0 !important;
  background:
    /* Soft inner highlight near the top */
    radial-gradient(ellipse at 50% 0%, rgba(240, 200, 112, 0.12) 0%, transparent 55%),
    /* Parchment grain */
    repeating-linear-gradient(135deg, rgba(80, 56, 24, 0.04) 0 2px, transparent 2px 4px),
    /* Base body */
    linear-gradient(180deg, #1a0f06 0%, #120a04 60%, #0c0602 100%) !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 0 4px #0a0604,
    inset 0 0 0 5px var(--mw-gold),
    inset 0 0 32px rgba(0, 0, 0, 0.7),
    0 12px 36px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.8) !important;
}

/* ---- Header banner with crest & close ----------------------------- */
.shop-mmo-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 14px;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(240, 200, 112, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #3a2310 0%, #1c0e06 100%);
  border-bottom: 3px double var(--mw-gold-dark);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(240, 200, 112, 0.18);
}

.shop-mmo-banner::before,
.shop-mmo-banner::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mw-gold), transparent);
  transform: translateY(-50%);
}
.shop-mmo-banner::before { left: 130px; }
.shop-mmo-banner::after  { right: 130px; }

.shop-mmo-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.shop-mmo-crest {
  font-size: 22px;
  color: var(--mw-gold-bright);
  text-shadow:
    0 1px 0 #000,
    0 0 12px rgba(240, 200, 112, 0.7);
  filter: drop-shadow(0 0 4px rgba(240, 200, 112, 0.4));
}

.shop-mmo-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mw-gold-bright);
  text-shadow:
    0 1px 0 #000,
    0 2px 6px rgba(240, 200, 112, 0.5),
    0 0 18px rgba(240, 200, 112, 0.2);
}

.shop-mmo-close {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
}
.shop-mmo-close:hover {
  transform: translateY(-50%) scale(1.1) !important;
}

/* ---- Two-panel layout with central divider ----------------------- */
.shop-mmo-panels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: 18px 22px 14px;
  align-items: stretch;
}

.shop-mmo-divider {
  position: relative;
  width: 14px;
  margin: 6px 6px;
  background:
    linear-gradient(180deg,
      transparent 0%,
      var(--mw-gold-dark) 12%,
      var(--mw-gold-dark) 88%,
      transparent 100%);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.shop-mmo-divider > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: var(--mw-gold-bright);
  background: #120a04;
  padding: 6px 0;
  text-shadow:
    0 0 6px rgba(240, 200, 112, 0.6),
    0 1px 0 #000;
}

/* ---- Per-panel chrome ------------------------------------------- */
.shop-mmo-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-mmo-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 4px;
  border-bottom: 1px solid rgba(176, 133, 66, 0.45);
}

.shop-mmo-panel-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mw-gold-bright);
  text-shadow:
    0 1px 0 #000,
    0 0 8px rgba(240, 200, 112, 0.4);
}

.shop-mmo-panel-sub {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  font-size: 11px;
  color: #a08858;
}

/* ---- Inventory grid container — dark stone tray --------------- */
.shop-mmo-grid-wrap {
  padding: 8px;
  /* Bound the height to the viewport and let the grid scroll. The
     full item catalog is north of 80 entries; an 8-col grid needs
     ~10 visible rows for the buyer to skim everything without each
     panel pushing the page off-screen. */
  max-height: 60vh;
  overflow-y: auto;
  /* Custom dark scrollbar so it doesn't clash with the parchment UI. */
  scrollbar-width: thin;
  scrollbar-color: var(--mw-gold-dark) #0a0502;
  background:
    /* Highlight at top edge */
    linear-gradient(180deg, rgba(240, 200, 112, 0.05) 0%, transparent 8%),
    /* Stone surface */
    radial-gradient(ellipse at 50% 0%, rgba(60, 40, 20, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #1a0d05 0%, #0a0502 100%);
  border: 2px solid #000;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 18px rgba(0, 0, 0, 0.85),
    inset 0 0 0 2px #0a0604,
    0 1px 0 rgba(240, 200, 112, 0.1);
}

.shop-mmo-grid-wrap::-webkit-scrollbar {
  width: 8px;
}
.shop-mmo-grid-wrap::-webkit-scrollbar-track {
  background: #0a0502;
}
.shop-mmo-grid-wrap::-webkit-scrollbar-thumb {
  background: var(--mw-gold-dark);
  border-radius: 2px;
}

.shop-mmo-grid {
  display: grid;
  gap: 4px;
  justify-content: center;
}

/* ---- Individual cells ----------------------------------------- */
.shop-mmo-cell {
  position: relative;
  cursor: pointer;
  transition: transform 90ms ease, filter 90ms ease;
}

.shop-mmo-cell-empty {
  cursor: default;
  /* Visually muted slot — show the iron bevel but no glow. */
  box-shadow:
    0 0 0 2px #2a221a,
    inset 1px 1px 0 rgba(220, 200, 160, 0.08),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85),
    inset -2px -2px 4px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

.shop-mmo-cell-locked {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.35) 0 4px,
      rgba(20, 12, 6, 0.5) 4px 8px),
    linear-gradient(160deg, #1a1208 0%, #0a0604 100%);
  box-shadow:
    0 0 0 2px #1a1208,
    inset -1px -1px 0 rgba(0, 0, 0, 0.9),
    inset 1px 1px 0 rgba(120, 90, 60, 0.08);
  filter: grayscale(0.4);
}

.shop-mmo-cell:not(.shop-mmo-cell-empty):not(.shop-mmo-cell-locked):not(.shop-mmo-cell-cantafford):not(.shop-mmo-cell-unsellable):hover {
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.18) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.75));
  z-index: 5;
}

.shop-mmo-cell-cantafford {
  filter: grayscale(0.7) brightness(0.6);
  cursor: not-allowed;
}
.shop-mmo-cell-cantafford .shop-mmo-price {
  color: #e89a9a !important;
}
.shop-mmo-cell-cantafford .shop-mmo-price::before {
  color: #e89a9a !important;
}

.shop-mmo-cell-unsellable {
  cursor: default;
}

/* ---- Price label — coin + amount stamped into the cell corner. No box,
   just bright gold text with a heavy black stroke so it stays legible over
   any item swatch. */
.shop-mmo-price {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mw-gold-bright);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 4px rgba(0, 0, 0, 0.9),
     0 0 6px rgba(240, 200, 112, 0.45);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  line-height: 1;
}

.shop-mmo-price::before {
  content: '⛁';
  margin-right: 2px;
  color: var(--mw-gold-bright);
}

/* Sell price uses a silvery tint so buy vs. sell reads at a glance. */
.shop-mmo-price-sell {
  color: #e6e0c8;
}
.shop-mmo-price-sell::before {
  color: #e6e0c8;
}

/* ---- Footer with gold purse + interaction hint ----------------- */
.shop-mmo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 14px;
  border-top: 2px solid var(--mw-gold-dark);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240, 200, 112, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #1a0e06 0%, #0c0602 100%);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.6);
}

.shop-mmo-gold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  padding: 6px 18px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 220, 160, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #2a1810 0%, #14080a 100%);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 1px 0 rgba(240, 200, 112, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

.shop-mmo-gold-coin {
  font-size: 18px;
  color: var(--mw-gold-bright);
  text-shadow:
    0 0 6px rgba(240, 200, 112, 0.6),
    0 1px 0 #000;
}

.shop-mmo-gold-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--mw-gold-bright);
  text-shadow:
    0 1px 0 #000,
    0 0 8px rgba(240, 200, 112, 0.4);
  letter-spacing: 0.06em;
}

.shop-mmo-gold-label {
  font-size: 11px;
  color: #c5a878;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.shop-mmo-hint {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: #a08858;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.shop-mmo-hint kbd {
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 10px;
  color: #f0dfb0;
  background: linear-gradient(180deg, #3a2818 0%, #1c0e06 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 1px 0 rgba(240, 200, 112, 0.2);
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: 2px;
  letter-spacing: 0.06em;
}

/* ===========================================================================
 *  Compass minimap — top-left, brass ring around a stone disc
 * ========================================================================= */

.compass {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background:
    /* Brass outer ring with gold highlights */
    radial-gradient(circle at 30% 25%, #f5d68c 0%, transparent 35%),
    radial-gradient(circle at center, transparent 78%, var(--mw-gold) 80%, var(--mw-gold-dark) 92%, var(--mw-wood-dark) 100%) !important;
  box-shadow:
    0 0 0 2px var(--mw-wood-dark),
    inset 0 0 0 2px var(--mw-gold-dark),
    inset 0 0 0 6px var(--mw-gold),
    inset 0 0 0 8px var(--mw-wood-dark),
    inset 0 0 28px rgba(0, 0, 0, 0.75),
    0 6px 22px rgba(0, 0, 0, 0.7) !important;
}

.compass-inner {
  position: absolute !important;
  inset: 18px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 160, 0.06) 0%, transparent 55%),
    radial-gradient(circle at center, #1a1208 0%, #08040 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.8),
    inset 0 0 22px rgba(0, 0, 0, 0.8) !important;
}

.compass-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated !important;
  /* The canvas is square but the container is a circle — overflow:hidden
     on .compass-inner clips it cleanly. */
}

.compass-card {
  position: absolute !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--mw-gold-bright) !important;
  text-shadow:
    0 0 2px #000,
    0 1px 0 #000,
    1px 1px 0 var(--mw-wood-dark) !important;
  letter-spacing: 0.05em !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.compass-card-n { top: 3px; left: 50%; transform: translateX(-50%); }
.compass-card-e { right: 5px; top: 50%; transform: translateY(-50%); }
.compass-card-s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.compass-card-w { left: 5px; top: 50%; transform: translateY(-50%); }

/* ===========================================================================
 *  Inventory dock — persistent right-side satchel (RuneScape-style)
 * ========================================================================= */

.dock-inv {
  position: fixed !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 4px 5px !important;
  width: auto !important;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.95), rgba(20, 10, 4, 0.98)) !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold) !important,
    0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

.dock-inv-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 2px 2px 3px !important;
  border-bottom: 1px solid var(--mw-gold-dark) !important;
  gap: 6px !important;
}

.dock-inv-title {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000 !important;
}

.dock-inv-title::before {
  content: '';
}

.dock-inv-open {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1px solid #000 !important;
  background:
    radial-gradient(ellipse at 30% 30%, var(--mw-gold-bright) 0%, var(--mw-gold) 60%, var(--mw-gold-dark) 100%) !important;
  color: var(--mw-wood-dark) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 180, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.4) !important;
  padding: 0 !important;
  transition: transform 100ms, filter 100ms !important;
  line-height: 14px !important;
}

.dock-inv-open:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

.dock-inv-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 44px) !important;
  gap: 4px !important;
  justify-content: center !important;
}

.dock-inv-gold {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--mw-gold-bright) !important;
  text-align: center !important;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(240, 200, 112, 0.4) !important;
  padding: 3px 0 1px !important;
  border-top: 1px solid var(--mw-gold-dark) !important;
  margin-top: 1px !important;
}

.dock-inv-gold::before {
  content: '⛁ ';
  color: var(--mw-gold-bright);
}

/* Gold cell row — sits below the inventory grid, single cell representing
 *  the player's gold balance (per design: gold occupies one inventory slot,
 *  stacks infinitely). Painted like a regular legendary-rim inventory cell
 *  so it visually belongs in the dock. */
.dock-inv-gold-row {
  display: flex !important;
  justify-content: center !important;
  padding: 4px 0 2px !important;
  border-top: 1px solid var(--mw-gold-dark, #8a6a2a) !important;
  margin-top: 2px !important;
}

.dock-inv-gold-cell {
  /* Always legendary-rim style; gold is the prize you came for. */
}

/* Inventory cells inside the dock — overrides the .inv-cell defaults
   (68px) since the dock is tight on space. The .inv-cell base styling
   still drives the bevel + rarity rim treatment. */
.dock-inv-grid .inv-cell {
  width: 44px !important;
  height: 44px !important;
}

.dock-inv-grid .inv-swatch {
  inset: 2px !important;
}

/* Rarity color FILLS the whole filled cell — a radial wash from the
 *  rarity color (brighter at center) plus a solid rarity rim, so the cell
 *  reads its tier at a glance instead of just a thin border. --rarity-color
 *  is set per-cell in inventory-dock.ts. */
.dock-inv-grid .inv-cell-filled {
  background:
    radial-gradient(circle at 50% 42%,
      color-mix(in srgb, var(--rarity-color, #888) 55%, transparent) 0%,
      color-mix(in srgb, var(--rarity-color, #888) 22%, transparent) 70%,
      rgba(0, 0, 0, 0.25) 100%) !important;
  border-color: var(--rarity-color, #888) !important;
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--rarity-color, #888) 45%, transparent) !important;
}

.dock-inv-grid .inv-cell-empty-label {
  display: none !important;
}

/* Dock cell currently being dragged over with a bag item — highlights the
 *  drop target so the player can see which slot will accept the loot. */
.dock-inv-grid .inv-cell.bag-drop-hover {
  outline: 2px solid var(--mw-gold-bright) !important;
  outline-offset: 1px !important;
  filter: brightness(1.18) !important;
}

/* ===========================================================================
 *  Tabbed character dock — INV / GEAR / STATS tabs in the same right-side
 *  satchel that used to only show inventory. The old full-screen hub overlay
 *  is gone; everything lives here.
 * ========================================================================= */

.dock-inv-tabbed {
  /* Constant width across tabs — switching INV/STATS/SKILLS must NOT
   *  resize the dock. All panes layout to this width. */
  width: 210px !important;
  min-width: 0 !important;
  max-width: 210px !important;
}

.dock-inv-tabs {
  display: flex !important;
  gap: 2px !important;
  flex: 1 !important;
}

.dock-inv-tab {
  flex: 1 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #8a704a !important;
  background:
    linear-gradient(180deg, #1c120a 0%, #100804 100%) !important;
  border: 1px solid #000 !important;
  border-bottom: none !important;
  border-radius: 3px 3px 0 0 !important;
  padding: 4px 0 3px !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark) !important;
  transition: filter 100ms, color 100ms !important;
  text-shadow: 0 1px 0 #000 !important;
}

.dock-inv-tab:hover {
  color: var(--mw-gold-bright) !important;
  filter: brightness(1.1) !important;
}

.dock-inv-tab-active {
  color: var(--mw-gold-bright) !important;
  background:
    linear-gradient(180deg, #3a2210 0%, #1c0e06 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold) !important;
  text-shadow:
    0 1px 0 #000,
    0 0 6px rgba(240, 200, 112, 0.45) !important;
}

.dock-inv-body {
  display: block;
}

.dock-inv-pane {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.dock-inv-pane-inv {
  align-items: center;
  padding: 2px 0 !important;
  gap: 3px !important;
}

/* ----- GEAR pane: paper-doll + equipment slot ring ----- */
/* Paperdoll subsection inside the STATS pane (the standalone GEAR tab
 * was removed). Three columns: left (helm/amulet/armor/boots), centre
 * (the LPC figure spanning rows), right (weapon/offhand). Slots use
 * grid-area names set on the cells by JS. */
.dock-paperdoll {
  display: grid !important;
  grid-template-columns: 32px 96px 32px;
  grid-template-rows: 32px 32px 32px 32px;
  /* Helm now sits in the LEFT column, vertically aligned with the other
   * slots; weapon + offhand stack in the RIGHT column. */
  grid-template-areas:
    "helm   doll weapon "
    "amulet doll offhand"
    "armor  doll .      "
    "boots  doll .      ";
  gap: 3px;
  justify-content: center;
  padding: 2px 0;
  align-items: center;
}

.dock-doll {
  grid-area: doll;
  width: 96px !important;
  height: 106px !important;
  background:
    radial-gradient(ellipse at center 60%, rgba(176, 133, 66, 0.22) 0%, transparent 65%),
    linear-gradient(180deg, #1a0e08 0%, #0c0604 100%) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 0 2px var(--mw-gold),
    inset 0 0 28px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.8) !important;
  border-radius: 4px !important;
  overflow: hidden;
}

.dock-doll-layer {
  pointer-events: none;
}

/* The slots used to be a single flex row; in the paperdoll they're each
 * pinned to their named grid-area by JS. The grid lives on the pane, not
 * on this wrapper, so this rule just keeps the wrapper inert. */
.dock-equip-slots {
  display: contents !important;
}

.dock-equip-cell {
  width: 32px !important;
  height: 32px !important;
  cursor: pointer;
  position: relative;
}

.dock-equip-cell .inv-swatch {
  width: 28px !important;
  height: 28px !important;
}

.dock-equip-label {
  font-family: 'Cinzel', serif !important;
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
  color: #8a6f4a !important;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* ----- STATS pane: HP/Mana/Stam bars + skill bars ----- */
.dock-inv-pane-stats {
  align-items: stretch;
  padding: 4px 2px;
  gap: 8px;
}

.dock-stats-name {
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(240, 200, 112, 0.4) !important;
  text-align: center;
  letter-spacing: 0.04em;
}

.dock-stats-class {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 10px !important;
  font-style: italic;
  color: #c5a878 !important;
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  margin-top: -1px;
  margin-bottom: 2px;
}

.dock-stats-section {
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #8a7656 !important;
  letter-spacing: 0.2em !important;
  padding-bottom: 1px !important;
  margin-bottom: 1px !important;
  text-shadow: 0 1px 0 #000 !important;
  text-align: center;
}

.dock-bar-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
}

.dock-bar-head {
  display: flex;
  justify-content: space-between;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  color: #d6c084 !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}

.dock-bar {
  height: 8px !important;
  background: linear-gradient(180deg, #18100a 0%, #2a1a10 100%) !important;
  border: 1px solid #000 !important;
  box-shadow:
    0 0 0 1px var(--mw-gold-dark),
    inset 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  border-radius: 2px !important;
  overflow: hidden;
  position: relative;
}

.dock-bar-fill {
  height: 100% !important;
  transition: width 220ms ease;
}

.dock-skills-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dock-skill-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dock-skill-head {
  display: flex;
  justify-content: space-between;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 11px !important;
  color: #f0dfb0 !important;
}

.dock-skill-lvl {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
}

.dock-skill-bar {
  height: 4px !important;
  background: #18100a !important;
  border: 1px solid var(--mw-gold-dark) !important;
}

.dock-skill-fill {
  height: 100%;
  background: linear-gradient(90deg, #2a5a78 0%, #4a8fb8 100%) !important;
  box-shadow: 0 0 4px rgba(74, 143, 184, 0.5) !important;
}

/* ===========================================================================
 *  Player debuff row — sits just above the bottom-left resource bars.
 *  Each active debuff renders as a small icon + seconds-remaining chip.
 *  Hidden (empty) when no effect is active. Pointer-events: none so it
 *  never blocks clicks on the world.
 * ========================================================================= */
.hud-debuffs {
  position: fixed !important;
  left: 10px !important;
  bottom: 80px !important;
  z-index: 7 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
}

.hud-debuff {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 4px;
  background: rgba(10, 6, 2, 0.78);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark, #8a6a2a),
    0 1px 3px rgba(0, 0, 0, 0.7);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
}
.hud-debuff-glyph {
  font-size: 14px;
  line-height: 1;
}
.hud-debuff-time {
  font-size: 10px;
  color: #e8d4a0;
  font-weight: 600;
}
.hud-debuff-poison .hud-debuff-glyph { color: #6acc80; text-shadow: 0 0 4px rgba(106, 204, 128, 0.7); }
.hud-debuff-slow   .hud-debuff-glyph { color: #6abedc; text-shadow: 0 0 4px rgba(106, 190, 220, 0.7); }
.hud-debuff-blind  .hud-debuff-glyph { color: #b48cff; text-shadow: 0 0 4px rgba(180, 140, 255, 0.7); }

/* Coord readout is now appended to the perf overlay (.hud-coords class
 * removed). See setPerfOverlayExtras in client/src/ui/perf-overlay.ts. */

/* ===========================================================================
 *  STATS pane — stat allocation rows live inside the stats pane now (the
 *  old BUILD tab was merged into here). The .dock-build-* classnames are
 *  shared with the old layout so the row visuals stay identical.
 * ========================================================================= */
.dock-inv-pane-stats {
  flex-direction: column !important;
  gap: 4px !important;
  padding: 4px !important;
  overflow: visible !important;
}

.dock-stats-header {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 1px 4px 2px;
  /* De-boxed — no frame/background; the name + level read as a free header. */
  background: none;
  border: none;
}
/* Smaller, scoped to the stats header so the skills tab is unaffected. */
.dock-stats-header .dock-stats-name { font-size: 11px !important; }
.dock-stats-header .dock-stats-class { font-size: 8.5px !important; margin-bottom: 1px; }
.dock-stats-header .dock-build-xpnum { font-size: 8.5px !important; }
.dock-stats-header .dock-build-pts { font-size: 9.5px !important; }
.dock-stats-header .dock-build-xpbar { height: 5px; }

.dock-stats-alloc {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid #3a2a14;
  border-radius: 2px;
  background: rgba(15, 10, 6, 0.45);
}

.dock-stats-profs {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Profession icon row — small icons (~half the old size) centered in a row,
 * each with a level chip + radial XP ring. */
.dock-prof-row {
  display: flex !important;
  justify-content: center;
  gap: 12px;
  padding: 1px 0;
}

.dock-prof-cell {
  --prof-ring-pct: 0%;
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--mw-gold-bright, #f4d27a) 0 var(--prof-ring-pct),
      #2a1a10 var(--prof-ring-pct) 100%
    );
  padding: 2.5px;
  box-sizing: border-box;
  cursor: help;
  transition: filter 100ms;
}
.dock-prof-cell:hover {
  filter: brightness(1.15);
}
.dock-prof-swatch {
  position: absolute;
  inset: 3px;
  background-color: #14100a;
  border-radius: 50%;
  border: 1px solid #000;
  display: block;
}
.dock-prof-lvl {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, #f8d870, #a07028);
  color: #1a0e04;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  border-radius: 7px;
  border: 1px solid #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  line-height: 1;
}

/* ===========================================================================
 *  SKILLS pane — 8 tomes (4 active + 4 passive) for the player's class.
 * ========================================================================= */
.dock-inv-pane-skills {
  flex-direction: column !important;
  gap: 4px !important;
  padding: 4px !important;
  overflow: visible !important;
}

.dock-skills-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 3px 6px;
  background: rgba(20, 14, 8, 0.55);
  border: 1px solid var(--mw-gold-dark);
  border-radius: 2px;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  color: #c0b090 !important;
}
.dock-skills-pts-val {
  color: #b48cff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.dock-tome-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

/* Two-column vertical stack: ACTIVE column on the left, PASSIVE on the
 * right. Each column has 4 tomes stacked top-to-bottom. */
.dock-tome-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
}
.dock-tome-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: center;
}
.dock-tome-col-hdr {
  margin-top: 0 !important;
  text-align: center;
}
.dock-tome-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 4px !important;
}

.dock-skill-tome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0;
  padding: 0;
}
/* No outer outline — tomes stand alone on the dark dock background. */

.dock-tome-cover {
  position: relative;
  width: 92px;
  height: 112px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: -webkit-optimize-contrast;
  cursor: pointer;
  transition: transform 100ms, filter 100ms;
}
.dock-tome-cover:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.dock-tome-title {
  position: absolute;
  top: 11px;
  left: 12px;
  right: 12px;
  height: 13px;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: #f4dca0 !important;
  text-align: center;
  line-height: 13px;
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dock-tome-dots {
  position: absolute;
  bottom: 11px;
  left: 0;
  right: 0;
  display: flex !important;
  justify-content: center;
  gap: 2px;
}
.dock-tome-dot {
  width: 6px;
  height: 6px;
}

/* Small hotkey badge in the top-right of an active tome when bound. */
.dock-tome-slot-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  background: radial-gradient(circle at 30% 30%, #f8d870, #a07028);
  color: #1a0e04;
  border: 1px solid #000;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  line-height: 1;
}
.dock-tome-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a1208;
  border: 1px solid #3a2a14;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);
}
.dock-tome-dot-filled {
  background: radial-gradient(circle, #f8d870, #a07028);
  border-color: #c8a050;
  box-shadow: 0 0 3px rgba(200, 160, 80, 0.8);
}

/* MAX-rank "Empowered" active skill — a warm glow around the tome plus a
 * gem-tag badge so a maxed spell reads as finished/special at a glance. */
.dock-skill-tome-empowered .dock-tome-cover {
  box-shadow:
    0 0 8px 2px rgba(248, 216, 112, 0.85),
    0 0 16px 4px rgba(255, 180, 60, 0.45);
  border-radius: 4px;
}
.dock-tome-empowered-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  padding: 0 4px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  letter-spacing: 0.5px;
  background: radial-gradient(circle at 30% 30%, #fff2c0, #d8902a);
  color: #2a1404;
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(255, 200, 90, 0.9);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.dock-tome-tt-empowered {
  color: #ffd870;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(255, 200, 90, 0.7);
}

/* Old +/- and dropdown controls under the tome were removed — click +
 * right-click on the cover now drive allocation and slot binding. */

/* Shared tooltip used by tome hover. Reuses .inv-tooltip skin from inventory
 * cells, with a couple of extra rows for skill metadata. */
.dock-tome-tt-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--mw-gold-bright) !important;
}
.dock-tome-tt-meta {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 10px !important;
  color: #c0b090 !important;
  margin-bottom: 3px;
}
.dock-tome-tt-desc {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 11px !important;
  color: #e8d4a0 !important;
  line-height: 1.3;
  max-width: 220px;
}
.dock-tome-tt-hint {
  margin-top: 4px;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 10px !important;
  color: #8a7a5a !important;
  font-style: italic;
}

/* Legacy BUILD pane width (kept for backwards-compat references in CSS
 * below; the pane itself has been folded into the stats tab). */
.dock-inv-pane-build {
  flex-direction: column !important;
  gap: 6px !important;
  padding: 6px !important;
  overflow-y: auto !important;
  max-height: 360px;
}
.dock-build-stats,
.dock-build-skills {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.dock-build-head {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3px 6px;
  padding: 3px 5px;
  background: rgba(20, 14, 8, 0.55);
  border: 1px solid var(--mw-gold-dark);
  border-radius: 2px;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 11px !important;
  color: #f0dfb0 !important;
}
.dock-build-lvl {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
}
.dock-build-xpbar {
  grid-column: 1 / 3;
  height: 5px;
  background: #18100a;
  border: 1px solid var(--mw-gold-dark);
}
.dock-build-xpfill {
  height: 100%;
  background: linear-gradient(90deg, #5a8a3a, #c8dc7a);
  box-shadow: 0 0 4px rgba(200, 220, 122, 0.5);
}
.dock-build-xpnum {
  grid-column: 1 / 3;
  text-align: center;
  font-size: 10px !important;
  color: #c0b090 !important;
}
.dock-build-pts {
  grid-column: 1 / 3;
  display: flex;
  justify-content: space-between;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
}
.dock-build-pts-stat b { color: #c8dc7a !important; }
.dock-build-pts-skill b { color: #b48cff !important; }

/* Stat allocation row — compact two-liner with the hint as small italic
 * text beneath the stat name. No container border / background — just
 * inline rows, separated by a faint divider via :not(:last-child). */
.dock-build-stat-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "name val  btn"
    "hint hint btn";
  align-items: center;
  gap: 0 6px;
  padding: 2px 4px;
  font-family: 'IM Fell DW Pica', serif !important;
  color: #e8d4a0 !important;
}
.dock-build-stat-row + .dock-build-stat-row {
  border-top: 1px solid rgba(58, 42, 20, 0.5);
}
.dock-build-stat-name {
  grid-area: name;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  color: var(--mw-gold-bright) !important;
  line-height: 1.1;
}
.dock-build-stat-val {
  grid-area: val;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-align: right;
  line-height: 1.1;
}
.dock-build-stat-cap {
  color: #786448 !important;
  font-weight: 400 !important;
  font-size: 9px !important;
}
.dock-build-stat-hint {
  grid-area: hint;
  font-size: 9px !important;
  font-style: italic;
  color: #8a7656 !important;
  line-height: 1.15;
}
/* Combat Stats rows — effective totals (Max HP, Armor, Crit, etc.). Label
 * left, value right, with a green (+gear) delta tag. */
.dock-cs-row {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 1px 4px;
  font-family: 'IM Fell DW Pica', serif !important;
}
.dock-cs-row + .dock-cs-row {
  border-top: 1px solid rgba(58, 42, 20, 0.4);
}
.dock-cs-label {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  letter-spacing: 0.03em;
  color: #c8b488 !important;
}
.dock-cs-val {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--mw-gold-bright) !important;
  text-align: right;
}
.dock-cs-gear {
  color: #6fcf6f !important;
  font-weight: 700 !important;
  font-size: 10px !important;
}
/* Stone-tab + button — chiseled grey-brown pill, only visible when the
 * player actually has stat points to spend (JS toggles the .is-hidden
 * class). Sits on the right of the stat row, spanning both lines. */
.dock-build-stat-add,
.dock-build-skill-add {
  grid-area: btn;
  width: 20px;
  height: 20px;
  background:
    radial-gradient(ellipse at 35% 30%, #b0a48a 0%, #8a7e64 45%, #4a4034 100%);
  border: 1px solid #2a2218;
  color: #1a140a;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.35),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5),
    0 1px 1px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.25);
  padding: 0;
}
.dock-build-stat-add:hover:not(:disabled),
.dock-build-skill-add:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5),
    0 0 6px rgba(200, 180, 130, 0.5);
}
.dock-build-stat-add.is-hidden,
.dock-build-skill-add.is-hidden {
  visibility: hidden;
}

.dock-build-section {
  margin-top: 6px;
  padding: 3px 6px;
  background: linear-gradient(90deg, #2a1e0c, #1a1208 70%, transparent);
  border-left: 2px solid var(--mw-gold-bright);
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 1px;
  color: var(--mw-gold-bright) !important;
}

.dock-build-skill-row {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head ctrl"
    "desc ctrl"
    "dots ctrl";
  gap: 2px 6px;
  padding: 4px 6px;
  background: rgba(15, 10, 6, 0.5);
  border: 1px solid #3a2a14;
  border-radius: 2px;
}
.dock-build-skill-active { border-left: 2px solid #c8a04a; }
.dock-build-skill-passive { border-left: 2px solid #5a7aa8; }
.dock-build-skill-head {
  grid-area: head;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.dock-build-skill-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--mw-gold-bright) !important;
}
.dock-build-skill-rank {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 10px !important;
  color: #c0b090 !important;
}
.dock-build-skill-desc {
  grid-area: desc;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 10px !important;
  color: #c8b08a !important;
  line-height: 1.25;
}
.dock-build-skill-dots {
  grid-area: dots;
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.dock-build-skill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a1208;
  border: 1px solid #3a2a14;
}
.dock-build-skill-dot-filled {
  background: radial-gradient(circle, #f8d870, #a07028);
  border-color: #c8a050;
  box-shadow: 0 0 3px rgba(200, 160, 80, 0.7);
}
.dock-build-skill-ctrl {
  grid-area: ctrl;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.dock-build-skill-slot {
  background: linear-gradient(180deg, #2a1e0c, #18100a);
  color: var(--mw-gold-bright);
  border: 1px solid var(--mw-gold-dark);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  padding: 1px 3px;
  border-radius: 2px;
  cursor: pointer;
}
.dock-build-skill-slot:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===========================================================================
 *  Player right-click context menu — appears at the cursor when the
 *  user right-clicks a remote player in the dungeon scene.
 * ========================================================================= */
.player-context-menu {
  position: fixed;
  z-index: 30;
  min-width: 160px;
  background: linear-gradient(180deg, #1a1a22 0%, #101016 100%);
  border: 1px solid var(--accent, #a87b3e);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.7);
  padding: 6px 0;
  font-family: 'Courier New', monospace;
}

.player-context-title {
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--mw-gold-bright, #f0c870) !important;
  padding: 4px 12px 6px 12px;
  border-bottom: 1px solid #2c2c38;
  text-align: center;
}

.player-context-btn {
  display: block;
  width: 100%;
  background: transparent !important;
  border: none !important;
  color: var(--fg, #d0d0d0) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.player-context-btn:hover {
  background: rgba(168, 123, 62, 0.15) !important;
  color: var(--mw-gold-bright, #f0c870) !important;
}

.player-context-cancel {
  border-top: 1px solid #2c2c38;
  color: #888 !important;
}

/* ===========================================================================
 *  Incoming party invite popup — centered modal with Accept / Decline.
 * ========================================================================= */
.party-invite-popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
  z-index: 28;
  pointer-events: auto;
}

.party-invite-card {
  background: linear-gradient(180deg, #16161e 0%, #101016 100%);
  border: 1px solid var(--accent, #a87b3e);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
  text-align: center;
  font-family: 'Courier New', monospace;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.7);
}

.party-invite-title {
  font-family: 'Cinzel', serif !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--mw-gold-bright, #f0c870);
}

.party-invite-body {
  font-size: 13px;
  color: var(--fg, #d0d0d0);
}

.party-invite-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 4px;
}

/* ===========================================================================
 *  Bag search modal — opens when the player clicks a dropped loot bag.
 *  Full-screen overlay; ESC or X closes. Items click-to-take or drag.
 * ========================================================================= */
.bag-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.78));
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', monospace;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

.bag-card {
  background: linear-gradient(180deg, #16161e 0%, #101016 100%);
  border: 1px solid #2c2c38;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 540px;
  max-width: 760px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 12px 36px rgba(0, 0, 0, 0.6);
}

.bag-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.55;
}

.bag-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bag-card-title {
  flex: 1;
  font-family: 'Cinzel', serif !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 220, 130, 0.45);
}

.bag-take-all {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  background: linear-gradient(180deg, #2a1f12 0%, #16100a 100%) !important;
  border: 1px solid #000 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 200, 112, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.bag-take-all:hover {
  filter: brightness(1.2);
}

.bag-card-grid {
  display: grid;
  /* Matches the inventory dock's 4×4 layout (68 px cells, 10 px gap) so
   * the bag reads as "a chunk of inventory floating in space". */
  grid-template-columns: repeat(4, 68px);
  gap: 10px;
  justify-content: center;
  padding: 8px 0;
  min-height: 68px;
}

.bag-card-empty {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 13px !important;
  font-style: italic !important;
  color: #8a7050 !important;
  text-align: center;
  padding: 8px 0;
}

/* ===========================================================================
 *  Treasure chest panel — account-shared stash storage in town.
 * ========================================================================= */
.stash-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.78));
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', monospace;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

.stash-card {
  background: linear-gradient(180deg, #16161e 0%, #101016 100%);
  border: 1px solid #2c2c38;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 760px;
  max-width: 900px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 12px 36px rgba(0, 0, 0, 0.6);
}

.stash-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.55;
}

.stash-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stash-title {
  font-family: 'Cinzel', serif !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent);
  text-transform: uppercase;
}

.stash-cols {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 18px;
}

.stash-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stash-grid {
  display: grid;
  gap: 6px;
}

.stash-grid-inv {
  grid-template-columns: repeat(4, 52px);
}

.stash-grid-chest {
  grid-template-columns: repeat(6, 52px);
}

/* Gold deposit row at the bottom of the stash card — carried wallet on
 *  the left, chest balance on the right, amount input + buttons. */
.stash-gold-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #2a2118;
  background: linear-gradient(90deg, rgba(168, 123, 62, 0.10), transparent);
  border-left: 2px solid var(--accent);
}

.stash-gold-label {
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 200, 112, 0.4) !important;
  min-width: 120px;
}

.stash-gold-label-chest {
  text-align: right;
  margin-left: auto;
}

.stash-gold-input {
  width: 80px;
  background: #0d0d12 !important;
  border: 1px solid #2c2c38 !important;
  color: var(--fg, #d0d0d0) !important;
  padding: 6px 8px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 13px !important;
}

.stash-gold-input:focus {
  outline: 1px solid var(--accent);
}

/* ===========================================================================
 *  Luck Multiplier — top-right HUD panel. Shows the live loot-rate boost
 *  that grows with dungeon time. Replaces the gold + skill abbreviation
 *  meta strip that used to live here.
 * ========================================================================= */
.hud-luck {
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: center !important;
  min-width: 0 !important;
  /* No box / border / shadow — just the text floats in the top-right. */
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.hud-luck-title {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.24em !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  text-shadow: 0 1px 0 #000 !important;
  text-align: center;
}

.hud-luck-value {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: 0.04em !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  text-align: center;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(240, 200, 112, 0.55) !important;
  line-height: 1;
}

.hud-luck-bar {
  position: relative;
  height: 6px;
  background: #08080c;
  border: 1px solid #2a2118;
  border-radius: 2px;
  overflow: hidden;
}

.hud-luck-fill {
  height: 100%;
  background: linear-gradient(90deg, #a06030 0%, #d8a040 50%, #ffd87a 100%);
  box-shadow: 0 0 6px rgba(240, 200, 112, 0.6);
  transition: width 250ms linear;
}

.hud-luck-sub {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 10px !important;
  color: #c8b888 !important;
  text-align: center;
}

.hud-luck-maxed .hud-luck-value {
  color: #fff7d0 !important;
  text-shadow: 0 1px 0 #000, 0 0 16px rgba(255, 232, 144, 0.85) !important;
  animation: hud-luck-pulse 1.4s ease-in-out infinite;
}

.hud-luck-maxed .hud-luck-fill {
  background: linear-gradient(90deg, #ffd87a 0%, #fff7d0 50%, #ffd87a 100%);
}

@keyframes hud-luck-pulse {
  0%, 100% { filter: brightness(1.0); }
  50%      { filter: brightness(1.35); }
}

/* Audio settings popover — sits above the inventory dock, opened by the
 *  small ♪ button in the dock header. Two-row mixer (master, music). */
.dock-settings {
  position: absolute !important;
  right: 0 !important;
  bottom: 100% !important;
  margin-bottom: 6px !important;
  z-index: 7 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  min-width: 200px;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.97), rgba(20, 10, 4, 0.99)) !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold, #f0c870),
    0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

.dock-settings-row {
  display: grid;
  grid-template-columns: 50px 1fr 36px;
  align-items: center;
  gap: 6px;
}

.dock-settings-label {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  text-shadow: 0 1px 0 #000 !important;
}

.dock-settings-value {
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  color: #c8b888 !important;
  text-align: right;
}

/* Slider styled to match the gold/wood theme. -webkit-appearance + -moz prefix
 *  because Firefox + Chromium use different shadow DOMs for <input type=range>. */
.dock-settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2a1f12 0%, #4a3a22 100%);
  border: 1px solid #000;
  border-radius: 2px;
  cursor: pointer;
}

.dock-settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 14px;
  background:
    linear-gradient(180deg, var(--mw-gold-bright, #f0c870) 0%, var(--mw-gold, #c89538) 60%, var(--mw-gold-dark, #8a6a2a) 100%);
  border: 1px solid #000;
  border-radius: 2px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.dock-settings-slider::-moz-range-thumb {
  width: 12px;
  height: 14px;
  background:
    linear-gradient(180deg, var(--mw-gold-bright, #f0c870) 0%, var(--mw-gold, #c89538) 60%, var(--mw-gold-dark, #8a6a2a) 100%);
  border: 1px solid #000;
  border-radius: 2px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Mark the dock as positioning context for the absolutely-placed popover. */
.dock-inv {
  position: fixed !important;
}

/* ===========================================================================
 *  Ability bar — bigger, bevel-framed, SVG-icon cells with a tooltip on
 *  hover. Replaces the earlier 44px atlas-sprite cells.
 * ========================================================================= */
.hud-abilities {
  gap: 8px !important;
}

.hud-ability {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid #000 !important;
  border-radius: 4px !important;
  background-color: #14121a !important;
  position: relative !important;
  pointer-events: auto !important;
  box-shadow:
    0 0 0 2px #2a2118,
    inset 0 1px 0 rgba(220, 200, 160, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.7) !important;
  cursor: help !important;
  transition: transform 100ms, box-shadow 120ms !important;
}

.hud-ability:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px var(--mw-gold, #c89538),
    0 0 14px rgba(240, 200, 112, 0.45),
    inset 0 1px 0 rgba(255, 220, 160, 0.25),
    inset -1px -1px 0 rgba(0, 0, 0, 0.85),
    0 3px 6px rgba(0, 0, 0, 0.7) !important;
}

.hud-ability-key {
  bottom: 1px !important;
  right: 3px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #f0d8a0 !important;
  text-shadow: 0 1px 0 #000, 0 0 3px #000 !important;
  z-index: 3 !important;  /* on top of any atlas-frame icon child */
}

/* Quickslot count badge — sits in the bottom-right corner of the cell. */
.quickslot-count {
  position: absolute !important;
  bottom: 1px !important;
  right: 3px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 0 3px #000, 0 0 1px #000, 1px 1px 0 #000 !important;
  z-index: 3 !important;
  pointer-events: none;
}

/* Drop-hover state — fired by quickslot drop listeners while a draggable
 *  consumable hovers a quickslot cell. */
.quickslot-drop-hover {
  outline: 2px solid #4abf6a !important;
  outline-offset: 2px !important;
  filter: brightness(1.2) !important;
}

.hud-ability-cd {
  border-radius: 3px !important;
  background: rgba(0, 0, 0, 0.7) !important;
}

.hud-ability-util {
  background:
    repeating-linear-gradient(45deg, rgba(40, 22, 10, 0.95) 0 6px, rgba(20, 10, 4, 0.98) 6px 12px) !important;
  cursor: default !important;
}

/* Tooltip — fixed-position parchment card above the hovered ability cell. */
.hud-ability-tooltip {
  position: fixed !important;
  display: none;
  z-index: 50;
  pointer-events: none;
  min-width: 200px;
  max-width: 280px;
  padding: 10px 12px;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 13px !important;
  color: #f0dfb0 !important;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.98), rgba(20, 10, 4, 0.99)) !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark, #8a6a2a),
    inset 0 0 0 2px var(--mw-gold, #c89538),
    0 6px 20px rgba(0, 0, 0, 0.7) !important;
}

.hat-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  margin-bottom: 4px;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 200, 112, 0.4);
}

.hat-desc {
  line-height: 1.4;
  margin-bottom: 6px;
  color: #d8c8a0 !important;
}

.hat-stats {
  display: flex;
  gap: 8px;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  border-top: 1px solid #2a2118 !important;
  padding-top: 5px;
}

.hat-dmg {
  color: #ff9070 !important;
  font-weight: 700;
}

.hat-mana {
  color: #6aafd8 !important;
  font-weight: 700;
}

.hat-cd {
  color: #b8a878 !important;
  font-weight: 700;
}

/* ===========================================================================
 *  Quickslot bar — 3 consumable shortcuts pinned above the inventory dock.
 * ========================================================================= */
.quickslot-bar {
  position: fixed !important;
  right: 12px !important;
  /* Dock is at bottom:12 with ~232px height — sit 6px above it. */
  bottom: 248px !important;
  z-index: 6 !important;
  display: flex !important;
  gap: 4px !important;
  padding: 5px 7px !important;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.95), rgba(20, 10, 4, 0.98)) !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold, #c89538),
    0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

.quickslot-cell {
  position: relative !important;
  background:
    radial-gradient(ellipse at 32% 22%, rgba(220, 200, 160, 0.06) 0%, transparent 55%),
    linear-gradient(160deg, #2a241c 0%, #1a1612 35%, #0e0b08 100%);
  border: 1px solid #000;
  box-shadow:
    0 0 0 2px #3a3026,
    inset 1px 1px 0 rgba(220, 200, 160, 0.14),
    inset -1px -1px 0 rgba(0, 0, 0, 0.9),
    0 2px 3px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: filter 100ms, transform 100ms;
}

.quickslot-cell:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.quickslot-filled {
  box-shadow:
    0 0 0 2px var(--mw-gold-bright, #f0c870),
    0 0 10px rgba(240, 200, 112, 0.35),
    inset 1px 1px 0 rgba(255, 220, 160, 0.2),
    inset -1px -1px 0 rgba(0, 0, 0, 0.9),
    0 2px 3px rgba(0, 0, 0, 0.7);
}

.quickslot-drop-hover {
  box-shadow:
    0 0 0 2px #4abf6a,
    0 0 12px rgba(74, 191, 106, 0.5) !important;
}

.quickslot-swatch {
  position: absolute;
  inset: 3px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
}

.quickslot-key {
  position: absolute;
  top: 2px;
  left: 3px;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  text-shadow: 0 1px 0 #000, 0 0 3px #000;
}

/* Slot waiting for keybind capture — pulse to make "press a key" obvious. */
.quickslot-key-rebinding {
  color: #ffe080 !important;
  animation: quickslot-rebind-pulse 0.7s ease-in-out infinite;
}

/* Whole-cell cyan capture ring shown while a quickslot awaits a new
 * keybind (entered via Ctrl+click or right-click). Pulses the glow so
 * "press a key now" reads at a glance. Esc cancels. */
.quickslot-rebinding {
  outline: 2px solid #4ad6e0 !important;
  outline-offset: 2px !important;
  animation: quickslot-cell-rebind-pulse 0.8s ease-in-out infinite !important;
}

@keyframes quickslot-cell-rebind-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #4ad6e0, 0 0 8px rgba(74, 214, 224, 0.4); }
  50%      { box-shadow: 0 0 0 2px #4ad6e0, 0 0 18px rgba(74, 214, 224, 0.9); }
}

@keyframes quickslot-rebind-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}

.quickslot-count {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 0 3px #000, 0 0 1px #000, 1px 1px 0 #000;
}

/* ===========================================================================
 *  Bag panel — pops up to the LEFT of the inventory dock when the player
 *  walks near a dropped loot bag. Title colored by the bag's rarity tier;
 *  items click-or-drag into the inventory dock.
 * ========================================================================= */
.bag-panel {
  position: fixed !important;
  /* Pinned just left of the inventory dock (which sits at right: 12px and
     measures ~190px wide). Bottom-aligned so the two panels share a baseline. */
  right: 210px !important;
  bottom: 12px !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 7px;
  min-width: 180px;
  max-width: 220px;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.95), rgba(20, 10, 4, 0.98)) !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--bag-tier-rgb, 240, 200, 112), 0.7),
    0 0 18px rgba(var(--bag-tier-rgb, 240, 200, 112), 0.25),
    0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

.bag-panel-title {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-align: center;
  padding: 1px 0 3px;
  border-bottom: 1px solid rgba(var(--bag-tier-rgb, 240, 200, 112), 0.45);
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(var(--bag-tier-rgb, 240, 200, 112), 0.4) !important;
}

.bag-panel-gold-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cinzel', serif !important;
  font-size: 10px;
  padding: 2px 2px 3px;
  border-bottom: 1px solid #2a2118;
}

.bag-panel-gold-label {
  color: var(--mw-gold-dark, #8a6a2a);
  letter-spacing: 0.18em;
}

.bag-panel-gold-amt {
  flex: 1;
  color: var(--mw-gold-bright, #f0c870);
  font-weight: 700;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(240, 200, 112, 0.4);
}

.bag-panel-take-gold {
  background: linear-gradient(180deg, #2a1f12 0%, #16100a 100%) !important;
  border: 1px solid #000 !important;
  color: var(--mw-gold-bright, #f0c870) !important;
  padding: 2px 8px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 200, 112, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.bag-panel-take-gold:hover {
  filter: brightness(1.18) !important;
}

.bag-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 3px;
  min-height: 40px;
}

.bag-panel-cell {
  cursor: grab !important;
}

.bag-panel-cell:active {
  cursor: grabbing !important;
}

.bag-panel-empty {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: #8a7050 !important;
  text-align: center;
  padding: 2px 0 0;
}

/* ===========================================================================
 *  Inventory — preserve the existing cell aesthetic (the user said it
 *  looks good) but reframe the surrounding container.
 * ========================================================================= */

.inv-title {
  font-family: 'Cinzel', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 200, 112, 0.35) !important;
}

.inv-close {
  width: 30px !important;
  height: 30px !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  background:
    radial-gradient(ellipse at 30% 30%, #c93030 0%, var(--mw-blood) 50%, #4a1010 100%) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  color: #fff7e0 !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 200, 0.3),
    inset -2px -3px 6px rgba(0, 0, 0, 0.5),
    inset 2px 3px 4px rgba(255, 180, 180, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.6) !important;
  cursor: pointer !important;
  transition: transform 120ms !important;
}

.inv-close:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}

.inv-hint {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #a08858 !important;
  font-size: 12px !important;
}

.inv-count {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  color: var(--mw-gold-bright) !important;
  text-shadow:
    0 0 3px #000,
    0 0 1px #000,
    1px 1px 0 #000 !important;
}

.inv-cell-empty-label {
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  color: rgba(176, 133, 66, 0.35) !important;
  letter-spacing: 0.24em !important;
}

/* ===========================================================================
 *  Item tooltips — parchment scrap
 * ========================================================================= */

.inv-tooltip {
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 13px !important;
  background:
    linear-gradient(180deg, rgba(40, 22, 10, 0.97), rgba(20, 10, 4, 0.99)) !important;
  border: 2px solid var(--mw-wood-dark) !important;
  border-radius: 3px !important;
  color: #f0dfb0 !important;
  /* Many-affix items (legendary = up to 8 affix rows) can make this tall;
   * cap the height + width and scroll the overflow so the box never clips
   * off-screen. placeTooltipAt() keeps the capped box inside the viewport. */
  max-width: 320px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 0 2px var(--mw-gold),
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    var(--mw-shadow-deep) !important;
}

.tt-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 1px 0 #000 !important;
}

.tt-common    { color: #c8b888 !important; }
.tt-uncommon  { color: #6ad88a !important; }
.tt-rare      { color: #6aafd8 !important; }
.tt-epic      { color: #d9aaff !important; }
.tt-legendary { color: var(--mw-gold-bright) !important; text-shadow: 0 1px 0 #000, 0 0 8px rgba(240, 200, 112, 0.5) !important; }

.tt-pill {
  font-family: 'Cinzel', serif !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: var(--mw-gold-dark) !important;
  color: #d6c084 !important;
}

.tt-section-head {
  font-family: 'Cinzel', serif !important;
  color: var(--mw-gold-bright) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-shadow: 0 1px 0 #000 !important;
}

.tt-stat-label { color: #c5a878 !important; }
.tt-stat-value { color: #fff7e0 !important; font-weight: 700 !important; text-shadow: 0 1px 0 #000 !important; }
/* Stat NUMBERS use a readable lining-figure font — the themed serifs
 * ('IM Fell DW Pica' old-style figures + Cinzel's stylized numerals) make
 * +bonuses nearly illegible at small sizes. Tabular nums keep columns aligned. */
.tt-stat-value, .tt-stat-label,
.dock-cs-val, .dock-cs-gear,
.dock-build-stat-val {
  font-family: 'Georgia', 'Trebuchet MS', 'Segoe UI', sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em !important;
}

.tt-affix-row .tt-stat-label {
  color: #98c8a8 !important;
  font-style: italic !important;
}
.tt-affix-row .tt-stat-value {
  color: #6ad88a !important;
  text-shadow: 0 0 4px rgba(106, 216, 138, 0.3) !important;
}

.tt-flavor {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #a08858 !important;
  font-size: 12px !important;
  border-bottom-color: var(--mw-gold-dark) !important;
}

.tt-section, .tt-meta, .tt-head {
  border-bottom-color: var(--mw-gold-dark) !important;
}

.tt-footer {
  background: rgba(0, 0, 0, 0.25) !important;
}

.tt-price-amt {
  font-family: 'Cinzel', serif !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 200, 112, 0.4) !important;
}

.tt-bar-common    { background: linear-gradient(90deg, #6a5a3a, #c8b888, #6a5a3a) !important; }
.tt-bar-uncommon  { background: linear-gradient(90deg, #2a5a30, #4abf6a, #2a5a30) !important; }
.tt-bar-rare      { background: linear-gradient(90deg, #2a5a78, #4a8fb8, #2a5a78) !important; }
.tt-bar-epic      { background: linear-gradient(90deg, #5a3a8a, #c98aff, #5a3a8a) !important; }
.tt-bar-legendary {
  background: linear-gradient(90deg, #8a6a2a, var(--mw-gold-bright), #8a6a2a) !important;
  box-shadow: 0 0 8px rgba(240, 200, 112, 0.6) !important;
}

/* ===========================================================================
 *  Forms (login / character select) — same parchment treatment
 * ========================================================================= */

.form-card h1 {
  font-family: 'Cinzel', serif !important;
  color: var(--mw-gold-bright) !important;
  letter-spacing: 0.14em !important;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(240, 200, 112, 0.4) !important;
}

.form-sub {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #c5a878 !important;
}

.form-card input, .form-card select {
  background: #18100a !important;
  border: 2px solid var(--mw-wood-dark) !important;
  font-family: 'IM Fell DW Pica', serif !important;
  font-size: 15px !important;
  color: #f0dfb0 !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-dark),
    inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
  border-radius: 2px !important;
  padding: 10px 14px !important;
}

.form-card input:focus, .form-card select:focus {
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px var(--mw-gold-bright),
    inset 0 0 6px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(240, 200, 112, 0.3) !important;
}

.form-card button {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  background:
    linear-gradient(180deg, var(--mw-gold-bright) 0%, var(--mw-gold) 50%, var(--mw-gold-dark) 100%) !important;
  color: var(--mw-wood-dark) !important;
  border: 1px solid #000 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 180, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 var(--mw-wood-dark) !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: transform 100ms, filter 100ms !important;
  border-radius: 3px !important;
}

.form-card button:hover:not([disabled]) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.form-error {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: var(--mw-blood-bright) !important;
}

.char-row {
  background:
    linear-gradient(180deg, rgba(60, 36, 16, 0.55), rgba(36, 20, 10, 0.7)) !important;
  border: 1px solid var(--mw-gold-dark) !important;
  border-left: 3px solid var(--mw-gold) !important;
}

.char-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--mw-gold-bright) !important;
  text-shadow: 0 1px 0 #000 !important;
}

.char-meta {
  font-family: 'IM Fell DW Pica', serif !important;
  font-style: italic !important;
  color: #c5a878 !important;
}

/* ===================================================================== */
/* SYSTEMS UPDATE — HUD overhaul + modals (Phase 2+).                     */
/* Namespaced `dlv-` so these rules don't collide with existing UI.      */
/* Palette + pixel-font theme per DELVE-UPDATE-PLAN.md.                   */
/* ===================================================================== */
:root {
  --dlv-panel: #1c2028;
  --dlv-panel-light: #262b36;
  --dlv-slot: #14171d;
  --dlv-modal: #21252e;
  --dlv-tooltip: #1a1e26;
  --dlv-canvas: #0e1115;
  --dlv-border: #3a4252;
  --dlv-cyan: #4dd6e0;
  --dlv-text: #ffffff;
  --dlv-text2: #a8b0bb;
  --dlv-dim: #6b7280;
  --dlv-gold: #f0c040;
  --dlv-yellow: #ffd84d;
  --dlv-hp: #e63946;
  --dlv-mp: #4a90e2;
  --dlv-fame: #f0a040;
  --dlv-progress: #5cb85c;
  --dlv-font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --dlv-font-mono: 'VT323', 'Courier New', monospace;
}

@keyframes dlv-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---- Modal host ---------------------------------------------------- */
.dlv-modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.dlv-modal-card {
  position: relative;
  background: var(--dlv-modal);
  border: 2px solid var(--dlv-border);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  min-width: 420px; max-width: 680px; width: 640px;
  max-height: 88vh; display: flex; flex-direction: column;
  color: var(--dlv-text);
}
.dlv-modal-wide { width: 90vw; max-width: 90vw; height: 90vh; max-height: 90vh; }
.dlv-modal-titlebar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dlv-border);
  background: var(--dlv-panel);
  border-radius: 4px 4px 0 0;
}
.dlv-modal-title {
  font-family: var(--dlv-font-pixel); font-size: 11px; letter-spacing: 1px;
  color: var(--dlv-cyan); text-transform: uppercase;
}
.dlv-modal-close {
  background: none; border: none; color: var(--dlv-text2);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.dlv-modal-close:hover { color: var(--dlv-cyan); }
.dlv-modal-body {
  padding: 16px; overflow: auto; font-family: var(--dlv-font-mono); font-size: 18px;
}
/* Cyan pixel-bracket corner decorations on the title bar. */
.dlv-bracket { position: absolute; width: 12px; height: 12px; pointer-events: none; }
.dlv-bracket-tl { top: 4px; left: 4px; border-top: 2px solid var(--dlv-cyan); border-left: 2px solid var(--dlv-cyan); }
.dlv-bracket-tr { top: 4px; right: 4px; border-top: 2px solid var(--dlv-cyan); border-right: 2px solid var(--dlv-cyan); }

/* ---- Nameplate (top-left) ----------------------------------------- */
.dlv-nameplate {
  position: fixed; top: 8px; left: 8px; z-index: 6;
  display: flex; gap: 8px; align-items: center;
  background: var(--dlv-panel); border: 2px solid var(--dlv-border);
  border-radius: 6px; padding: 6px 10px 6px 6px;
}
/* Luck-multiplier badge — pinned to the flag's top-right corner. */
.dlv-np-luck {
  position: absolute; top: -8px; right: -8px; z-index: 1;
  display: flex; align-items: center; gap: 2px;
  padding: 2px 7px 2px 5px; border-radius: 10px;
  background: var(--dlv-slot); border: 1px solid var(--dlv-border);
  font-family: var(--dlv-font-mono); line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.dlv-np-luck-bolt { font-size: 13px; color: var(--dlv-dim); }
.dlv-np-luck-val { font-size: 14px; font-weight: bold; color: var(--dlv-text2); }
/* Lit up while in a dungeon (luck actually accruing). */
.dlv-np-luck.dlv-np-luck-active { border-color: var(--dlv-yellow); }
.dlv-np-luck.dlv-np-luck-active .dlv-np-luck-bolt { color: var(--dlv-yellow); }
.dlv-np-luck.dlv-np-luck-active .dlv-np-luck-val { color: var(--dlv-text); }
/* Maxed (5×) — gold pop. */
.dlv-np-luck.dlv-np-luck-maxed {
  border-color: var(--dlv-gold);
  box-shadow: 0 0 8px rgba(240,192,64,0.6), 0 2px 6px rgba(0,0,0,0.5);
}
.dlv-np-luck.dlv-np-luck-maxed .dlv-np-luck-bolt,
.dlv-np-luck.dlv-np-luck-maxed .dlv-np-luck-val { color: var(--dlv-gold); }
.dlv-portrait {
  width: 56px; height: 56px; border: 2px solid var(--dlv-border);
  border-radius: 4px; background: var(--dlv-slot);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dlv-font-pixel); font-size: 18px; color: var(--dlv-cyan);
}
.dlv-np-info { display: flex; flex-direction: column; gap: 2px; }
.dlv-np-name { font-family: var(--dlv-font-mono); font-size: 20px; font-weight: bold; color: var(--dlv-text); line-height: 1; }
.dlv-np-guild { font-family: var(--dlv-font-mono); font-size: 14px; color: var(--dlv-text2); }
.dlv-np-flag { color: var(--dlv-progress); }
.dlv-np-level { font-family: var(--dlv-font-mono); font-size: 15px; color: var(--dlv-gold); display: flex; align-items: center; gap: 3px; }
.dlv-np-star { color: var(--dlv-yellow); }
.dlv-np-status { display: flex; gap: 4px; }
.dlv-np-dot { width: 16px; height: 16px; border-radius: 3px; background: var(--dlv-slot); border: 1px solid var(--dlv-border); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; color: var(--dlv-text2); }

/* ---- Action rail (7 quick-action buttons) -------------------------- */
.dlv-actions {
  position: fixed; top: 8px; right: 8px; z-index: 6;
  display: flex; gap: 6px;
  background: var(--dlv-panel); border: 2px solid var(--dlv-border);
  border-radius: 6px; padding: 6px;
}
.dlv-action-btn {
  width: 38px; height: 38px; border: 1px solid var(--dlv-border);
  border-radius: 4px; background: var(--dlv-panel-light);
  color: var(--dlv-text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.dlv-action-btn svg { width: 20px; height: 20px; }
.dlv-action-btn:hover { color: var(--dlv-text); border-color: var(--dlv-cyan); }
.dlv-action-btn.active {
  color: var(--dlv-cyan); border-color: var(--dlv-cyan);
  box-shadow: 0 0 8px rgba(77,214,224,0.5);
}

/* ---- Resource bar add-ons (Fame; reuses HUD bar look) -------------- */
.dlv-fame-fill { background: linear-gradient(90deg, #f0a040, #f0c040) !important; }

/* ---- Generic stat / progress rows used by Stats + Exaltations ------ */
.dlv-stat-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid rgba(58,66,82,0.4); }
.dlv-stat-icon { width: 32px; height: 32px; image-rendering: pixelated; flex: 0 0 auto; }
.dlv-stat-name { flex: 1 1 auto; }
.dlv-stat-name .code { color: var(--dlv-dim); font-size: 14px; margin-left: 4px; }
.dlv-stat-total { font-size: 22px; color: var(--dlv-text); font-weight: bold; }
.dlv-stat-breakdown { font-size: 13px; color: var(--dlv-dim); }
.dlv-col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dlv-col-head { font-family: var(--dlv-font-pixel); font-size: 9px; color: var(--dlv-cyan); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.dlv-gain-pos { color: var(--dlv-progress); }
.dlv-gain-zero { color: var(--dlv-dim); opacity: 0.5; }
.dlv-xpbar { height: 14px; background: var(--dlv-slot); border: 1px solid var(--dlv-border); border-radius: 7px; overflow: hidden; margin-top: 6px; }
.dlv-xpbar-fill { height: 100%; background: var(--dlv-progress); }
.dlv-card { background: var(--dlv-panel); border: 1px solid var(--dlv-border); border-radius: 5px; padding: 10px; margin-top: 10px; }

/* ---- Tooltip (shared by stat rows / skill nodes) ------------------- */
.dlv-tooltip {
  position: fixed; z-index: 70; pointer-events: none; display: none;
  background: var(--dlv-tooltip); border: 1px solid var(--dlv-cyan);
  border-radius: 5px; padding: 8px 10px; max-width: 240px;
  font-family: var(--dlv-font-mono); font-size: 15px; color: var(--dlv-text2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.dlv-tooltip .tt-title { color: var(--dlv-text); font-size: 17px; margin-bottom: 3px; }

/* ---- Exaltations modal -------------------------------------------- */
.dlv-exalt-cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 10px 0; }
.dlv-exalt-cat { background: var(--dlv-panel); border: 1px solid var(--dlv-border); border-radius: 5px; padding: 8px; text-align: center; }
.dlv-exalt-cat.active { border-color: var(--dlv-cyan); box-shadow: 0 0 6px rgba(77,214,224,0.4); }
.dlv-exalt-cat .bonus { color: var(--dlv-yellow); font-size: 16px; }
.dlv-exalt-row.selected { background: linear-gradient(90deg, rgba(74,144,226,0.35), transparent); }
.dlv-exalt-bar { height: 6px; background: var(--dlv-slot); border-radius: 3px; overflow: hidden; flex: 1 1 auto; }
.dlv-exalt-bar-fill { height: 100%; background: var(--dlv-progress); }
.dlv-crown { color: var(--dlv-gold); }

/* ---- Skill-tree modal (ARPG passive-tree reskin) ------------------- */
.dlv-tree-wrap { display: flex; height: 100%; gap: 12px; --dlv-tree-accent: var(--dlv-cyan); }
.dlv-tree-side { width: 212px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* Sidebar cards — elevated panel look with a top class-accent rule. */
.dlv-tree-points-card, .dlv-tree-controls-card {
  position: relative; margin-top: 0;
  background: linear-gradient(180deg, var(--dlv-panel-light), var(--dlv-panel));
  border: 1px solid var(--dlv-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.4);
}
.dlv-tree-points-card::before, .dlv-tree-controls-card::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--dlv-tree-accent), transparent);
  opacity: 0.65; border-radius: 2px;
}
.dlv-tree-card-head {
  font-family: var(--dlv-font-pixel); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dlv-tree-accent); margin-bottom: 8px;
}
.dlv-points-big { display: flex; flex-direction: column; line-height: 1.1; }
.dlv-points-big .dlv-points-num {
  font-family: var(--dlv-font-pixel); font-size: 26px; color: var(--dlv-text);
  text-shadow: 0 0 10px var(--dlv-tree-accent);
}
.dlv-points-big .dlv-points-lbl {
  font-family: var(--dlv-font-mono); font-size: 14px; color: var(--dlv-tree-accent);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 2px;
}
.dlv-points-big .dlv-points-spent {
  font-family: var(--dlv-font-mono); font-size: 14px; color: var(--dlv-dim); margin-top: 6px;
}
.dlv-tree-controls-card { display: flex; flex-direction: column; gap: 9px; }
.dlv-tree-label { font-family: var(--dlv-font-mono); font-size: 13px; color: var(--dlv-dim); margin-bottom: 3px; }
.dlv-tree-hint { font-family: var(--dlv-font-mono); font-size: 13px; color: var(--dlv-dim); line-height: 1.5; padding: 0 2px; }

.dlv-tree-canvas-wrap {
  flex: 1 1 auto; position: relative; background: #070910;
  border: 1px solid var(--dlv-border); border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.7);
}
.dlv-tree-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.dlv-tree-canvas:active { cursor: grabbing; }

/* Hover detail card — game-panel styling with class-color name accent. */
.dlv-tree-detail {
  position: absolute; top: 12px; right: 12px; width: 248px; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,36,48,0.96), rgba(18,22,30,0.96));
  border: 1px solid var(--dlv-border); border-radius: 6px; padding: 11px 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6); backdrop-filter: blur(2px);
}
.dlv-tree-detail-head { display: flex; align-items: center; gap: 7px; }
.dlv-tree-detail-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex: 0 0 auto; }
.dlv-tree-detail-name { font-family: var(--dlv-font-mono); font-size: 20px; line-height: 1; }
.dlv-tree-detail-kind {
  font-family: var(--dlv-font-pixel); font-size: 8px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dlv-dim); margin: 5px 0 7px;
}
.dlv-tree-detail-pips { display: flex; gap: 5px; margin-bottom: 8px; }
.dlv-tree-detail-pip {
  width: 11px; height: 11px; border-radius: 50%; background: #1d2530;
  border: 1px solid #2a3340; box-sizing: border-box;
}
.dlv-tree-detail-pip.on {
  background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 70%);
  border-color: rgba(255,255,255,0.6); box-shadow: 0 0 6px var(--pc);
}
.dlv-tree-detail-desc { font-family: var(--dlv-font-mono); font-size: 15px; color: var(--dlv-text); line-height: 1.35; }
.dlv-tree-detail-effects { margin-top: 7px; display: flex; flex-direction: column; gap: 2px; }
.dlv-tree-eff-row { font-family: var(--dlv-font-mono); font-size: 13px; color: #ffd84d; }
.dlv-tree-eff-row b { color: var(--dlv-text2); font-weight: 700; }
.dlv-tree-eff-next { color: #7fd98a; opacity: 0.85; }
.dlv-tree-detail-status { margin-top: 8px; font-family: var(--dlv-font-mono); font-size: 14px; color: var(--dlv-text2); }
.dlv-tree-detail-action { margin-top: 3px; font-family: var(--dlv-font-mono); font-size: 13px; color: var(--dlv-cyan); }

.dlv-tree-minimap {
  position: absolute; bottom: 12px; right: 12px; width: 160px; height: 160px;
  background: rgba(7,9,16,0.85); border: 1px solid var(--dlv-border);
  border-radius: 6px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}

.dlv-reset-btn {
  background: linear-gradient(180deg, rgba(230,57,70,0.14), rgba(230,57,70,0.04));
  border: 1px solid var(--dlv-hp); color: var(--dlv-hp); border-radius: 5px;
  padding: 7px; cursor: pointer; font-family: var(--dlv-font-mono); font-size: 15px;
  letter-spacing: 0.5px; transition: background 0.12s, box-shadow 0.12s;
}
.dlv-reset-btn:hover { background: rgba(230,57,70,0.28); box-shadow: 0 0 10px rgba(230,57,70,0.4); }
.dlv-tree-input {
  background: var(--dlv-slot); border: 1px solid var(--dlv-border); color: var(--dlv-text);
  border-radius: 4px; padding: 6px; font-family: var(--dlv-font-mono); font-size: 15px;
  width: 100%; box-sizing: border-box; transition: border-color 0.12s, box-shadow 0.12s;
}
.dlv-tree-input:focus {
  outline: none; border-color: var(--dlv-tree-accent);
  box-shadow: 0 0 0 1px var(--dlv-tree-accent), 0 0 8px rgba(77,214,224,0.25);
}

/* ===================================================================== */
/* SYSTEMS UPDATE — full-screen right-column HUD (RotMG-style layout).    */
/* ===================================================================== */
.dlv-rcol {
  /* South-anchored (bottom-right). NOTE: no CSS `transform` here — a
     transformed ancestor breaks position:fixed tooltips AND HTML5 drag-drop
     drop-target hit-testing (equip/unequip + potion-slot bugs). The ~10%
     smaller size is achieved via width + compact gaps instead. */
  position: fixed; bottom: 30px; right: 8px; z-index: 6;
  width: 270px; max-height: calc(100vh - 38px);
  display: flex; flex-direction: column; gap: 6px;
  /* Panel space at 90% opacity (slightly see-through); the functional widgets
     below (slots/buttons/bars/minimap) keep their own opaque backgrounds. */
  background: rgba(28, 32, 40, 0.9); border: 2px solid var(--dlv-border);
  border-radius: 8px; padding: 7px; box-sizing: border-box;
  overflow-y: auto; overflow-x: hidden;
  font-family: var(--dlv-font-mono);
}
/* Minimap host — re-home the top-left "compass" into the column top. */
.dlv-rcol-minimap { display: flex; justify-content: center; }
.dlv-rcol-minimap .compass {
  position: relative !important; top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important; margin: 0 !important;
  transform: none !important;
}
/* Action buttons — override the standalone cluster's fixed positioning. */
.dlv-rcol-actions {
  position: static !important; top: auto; right: auto;
  justify-content: space-between; padding: 4px; flex-wrap: nowrap;
}
.dlv-rcol-actions .dlv-action-btn { width: 34px; height: 34px; }

/* Resource bars. */
.dlv-rcol-bars { display: flex; flex-direction: column; gap: 4px; }
.dlv-rcol-bar {
  position: relative; height: 18px; border-radius: 9px; overflow: hidden;
  background: var(--dlv-slot); border: 1px solid var(--dlv-border);
}
.dlv-rcol-bar-fill { height: 100%; transition: width 0.12s linear; }
.dlv-rcol-bar-hp .dlv-rcol-bar-fill { background: var(--dlv-hp); }
.dlv-rcol-bar-mp .dlv-rcol-bar-fill { background: var(--dlv-mp); }
.dlv-rcol-bar-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

/* Section headers. */
.dlv-rcol-head {
  font-family: var(--dlv-font-pixel); font-size: 9px; letter-spacing: 1px;
  color: var(--dlv-cyan); text-transform: uppercase; margin: 4px 0 0;
}

/* Equipment + inventory grids. */
.dlv-rcol-equip, .dlv-rcol-inv {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.dlv-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 4px;
  background: var(--dlv-slot); border: 2px solid var(--dlv-border);
  overflow: hidden; cursor: grab;
}
.dlv-cell-equip { border-style: dashed; }
/* Children don't intercept pointer/drag — the draggable cell is the sole drag
   source (carries the item_move payload) + hover target. Without this an inner
   icon <img> can hijack the drag, sending no payload → equip/potion fail. */
.dlv-cell-swatch, .dlv-cell-count, .dlv-cell-glyph { pointer-events: none; }
.dlv-cell-swatch { position: absolute; inset: 3px; }
.dlv-cell-glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--dlv-dim); opacity: 0.45;
}
.dlv-cell-count {
  position: absolute; right: 2px; bottom: 1px; font-size: 12px; color: #fff;
  text-shadow: 0 1px 2px #000; font-family: var(--dlv-font-mono);
}
.dlv-cell-drophover { border-color: var(--dlv-progress) !important; box-shadow: 0 0 6px var(--dlv-progress); }
.dlv-cell.rarity-common { border-color: #6b7280; }
.dlv-cell.rarity-uncommon { border-color: #4cc44a; }
.dlv-cell.rarity-rare { border-color: #3a8bff; }
.dlv-cell.rarity-epic { border-color: #b14aff; }
.dlv-cell.rarity-legendary { border-color: #ffb02e; box-shadow: inset 0 0 8px rgba(255,176,46,0.4); }

/* Wallet — gold/silver/copper readout under the resource bars. */
.dlv-rcol-wallet {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  margin: 2px 0 4px; padding: 3px 6px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--dlv-border); border-radius: 6px;
  font-family: var(--dlv-font-mono); font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
.dlv-coin { display: inline-flex; align-items: baseline; gap: 1px; }
.dlv-coin i { font-style: normal; font-size: 11px; opacity: 0.7; }
.dlv-coin-g { color: #f4cf57; }
.dlv-coin-s { color: #cdd2da; }
.dlv-coin-c { color: #cd8b50; }

/* Potion quickslots row. */
.dlv-rcol-potions { display: flex; gap: 8px; justify-content: center; margin-top: 2px; }
.dlv-rcol-potion {
  position: relative; width: 52px; height: 52px; border-radius: 6px;
  background: var(--dlv-slot); border: 2px solid var(--dlv-border); overflow: hidden;
}
.dlv-rcol-potion .hud-ability-key {
  position: absolute; left: 3px; top: 1px; font-size: 12px; color: var(--dlv-cyan);
  font-family: var(--dlv-font-mono); z-index: 2;
}