/* ============================================================
   ASHFALL IDLE - Dark Fantasy Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-deep: #0a0b0f;
  --bg-main: #0f1117;
  --bg-card: #161822;
  --bg-card-hover: #1c1f2e;
  --bg-elevated: #1e2133;
  --bg-input: #12141e;

  --border: #252840;
  --border-light: #2e3252;

  --text: #c8cad4;
  --text-dim: #7a7e94;
  --text-bright: #e8eaf2;

  --accent: #c9873e;
  --accent-glow: #d4993f;
  --accent-dim: #8a5e2a;
  --accent-bg: rgba(201,135,62,0.08);

  --red: #c44040;
  --red-dim: #7a2828;
  --green: #3a9e5c;
  --green-dim: #245e38;
  --blue: #4a7ec4;
  --blue-dim: #2a4e7a;
  --purple: #8a5ec4;
  --yellow: #c4a83a;

  --hp-player: #3a9e5c;
  --hp-monster: #c44040;

  --sidebar-w: 240px;
  --header-h: 0px;

  --radius: 6px;
  --radius-lg: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── LAYOUT ─────────────────────────────────────────── */
.app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-main);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

#main-area {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

#main-area::-webkit-scrollbar { width: 6px; }
#main-area::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

#main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 32px 60px;
  animation: pageIn 0.2s ease-out;
}

/* ── SIDEBAR ────────────────────────────────────────── */
.sidebar-header {
  padding: 20px 18px 10px;
  border-bottom: 1px solid var(--border);
}

.logo-text {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(201,135,62,0.3);
}

.logo-sub {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 8px;
  margin-top: -2px;
}

.player-info {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.pi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 2px 0;
  color: var(--text-dim);
}

.pi-val { color: var(--text-bright); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.gold-val { color: var(--yellow) !important; }

.nav-section { padding: 8px 0 4px; }

.nav-header {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  padding: 4px 18px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  font-size: 14px;
  color: var(--text);
  border-left: 2px solid transparent;
}

.nav-item:hover {
  background: var(--bg-card);
  color: var(--text-bright);
}

.nav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-left-color: var(--accent);
}

.nav-label { flex: 1; }

.nav-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-deep);
  padding: 1px 6px;
  border-radius: 3px;
  min-width: 26px;
  text-align: center;
}

.nav-item.active .nav-level { color: var(--accent); background: rgba(201,135,62,0.12); }

/* ── ICONS ──────────────────────────────────────────── */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; }

/* ── PAGE HEADER ────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.ph-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.ph-info h1 {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.2;
}

.ph-info p {
  color: var(--text-dim);
  font-size: 14px;
  margin-top: 2px;
}

/* ── SKILL HEADER BAR ───────────────────────────────── */
.skill-header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--bg-card);
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.sh-level {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
}

.sh-xp-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-deep);
  border-radius: 4px;
  overflow: hidden;
}

.sh-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 4px;
  transition: width 0.3s;
}

.sh-xp-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── ACTIVE ACTION BAR ──────────────────────────────── */
.active-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--accent-bg);
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-dim);
}

.aa-label {
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
}

.aa-progress {
  flex: 1;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.aa-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* ── ACTION CARDS / GRID ────────────────────────────── */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  align-items: stretch;
}

.action-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.action-card:hover:not(.locked) {
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.action-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(201,135,62,0.15);
}

.action-card.locked {
  opacity: 0.45;
  cursor: default;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,11,15,0.7);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.ac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ac-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ac-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--text-bright);
}

.ac-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-deep);
  padding: 2px 6px;
  border-radius: 3px;
}

.recipe-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
  min-height: 20px;
}

.recipe-mat {
  font-size: 11px;
  color: var(--green);
  background: rgba(58,158,92,0.08);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.recipe-mat.mat-missing { color: var(--red); background: rgba(196,64,64,0.08); }

.recipe-output {
  font-size: 12px;
  color: var(--blue);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}

.ac-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}

.ac-xp { font-size: 12px; color: var(--green); }
.ac-time { font-size: 12px; color: var(--text-dim); }
.ac-mastery { font-size: 11px; color: var(--purple); }

/* ── COMBAT ─────────────────────────────────────────── */
.combat-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.combat-style-select, .spell-select {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.spell-label { font-size: 13px; color: var(--text-dim); margin-right: 4px; }
.spell-btn { font-size: 11px !important; }
.spell-btn.locked { opacity: 0.35; }

.food-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
}

.food-label { color: var(--text-dim); }
.food-item { color: var(--green); }
.food-empty { color: var(--text-dim); font-style: italic; }

.auto-eat-label {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  cursor: pointer;
}

.combat-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.combatant {
  flex: 1;
  max-width: 300px;
}

.combatant-name {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.combatant-name small { font-size: 12px; color: var(--text-dim); }

.hp-bar {
  height: 14px;
  background: var(--bg-deep);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 4px;
  border: 1px solid var(--border);
}

.hp-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.15s;
}

.player-hp { background: linear-gradient(90deg, var(--green-dim), var(--green)); }
.monster-hp { background: linear-gradient(90deg, var(--red-dim), var(--red)); }

.hp-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.combat-vs {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: var(--accent);
  text-shadow: 0 0 15px rgba(201,135,62,0.4);
}

.dungeon-progress {
  text-align: center;
  margin-bottom: 12px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--accent);
}

.area-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.4;
}

.area-monsters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.monster-btn { font-size: 12px !important; }

.dungeon-rewards {
  font-size: 12px;
  color: var(--purple);
  margin: 6px 0;
}

/* ── BANK ───────────────────────────────────────────── */
.bank-gold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: var(--yellow);
  margin-bottom: 16px;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.bank-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 0.15s;
}

.bi-name { font-size: 14px; color: var(--text-bright); flex: 1; min-width: 100px; }
.bi-qty { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.bi-actions { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; }
.bank-empty { grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 40px; }

/* ── EQUIPMENT ──────────────────────────────────────── */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.equip-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.es-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.es-item { display: flex; justify-content: space-between; align-items: center; }
.es-name { font-size: 13px; color: var(--accent); }
.es-none { font-size: 13px; color: var(--text-dim); font-style: italic; }

.stat-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
}

.stat-row span:last-child { color: var(--green); font-family: 'JetBrains Mono', monospace; }

.food-display {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 14px;
  color: var(--text);
}

/* ── FARMING ────────────────────────────────────────── */
.farm-plots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.farm-plot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.plot-empty { color: var(--text-dim); font-style: italic; padding: 10px 0; }
.plot-growing { color: var(--green); margin-bottom: 8px; }
.plot-ready { color: var(--accent); font-family: 'Cinzel', serif; margin-bottom: 8px; }
.plot-timer { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.growing-fill { background: linear-gradient(90deg, var(--green-dim), var(--green)) !important; }

/* ── ACHIEVEMENTS ───────────────────────────────────── */
.achievement-card { cursor: default; }
.ach-done { border-color: var(--accent-dim); background: var(--accent-bg); }
.ach-check { color: var(--accent); font-size: 12px; font-family: 'Cinzel', serif; }

/* ── WIKI ───────────────────────────────────────────── */
.wiki-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}

.wiki-entry {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
}

.wiki-entry:last-child { border-bottom: none; }
.wiki-entry strong { color: var(--accent); font-family: 'Cinzel', serif; }

.wiki-subheader {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--text-bright);
  margin: 12px 0 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.wiki-subheader:first-child { border-top: none; margin-top: 0; padding-top: 0; }

/* ── STATISTICS ─────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
}

.stat-label { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; color: var(--text-bright); }

/* ── SETTINGS ───────────────────────────────────────── */
.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-section h3 { font-family: 'Cinzel', serif; color: var(--text-bright); width: 100%; margin-bottom: 4px; }
.settings-section p { font-size: 14px; color: var(--text-dim); width: 100%; }

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  padding: 7px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}

.btn:hover { background: var(--bg-card-hover); border-color: var(--accent-dim); color: var(--text-bright); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn:disabled:hover { background: var(--bg-elevated); border-color: var(--border-light); color: var(--text); }

.btn-sm { font-size: 11px; padding: 4px 10px; }
.btn-xs { font-size: 10px; padding: 3px 8px; }

.btn-danger { border-color: var(--red-dim); color: var(--red); }
.btn-danger:hover { background: rgba(196,64,64,0.12); border-color: var(--red); }

.btn-success { border-color: var(--green-dim); color: var(--green); }
.btn-success:hover { background: rgba(58,158,92,0.12); border-color: var(--green); }

.btn-sell { border-color: var(--yellow); color: var(--yellow); opacity: 0.7; }
.btn-sell:hover { opacity: 1; background: rgba(196,168,58,0.12); }

.btn-active { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-bg) !important; }

.shop-btns { display: flex; gap: 6px; margin-top: 8px; }

/* ── SECTION TITLES ─────────────────────────────────── */
.section-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--text-bright);
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── TOASTS ─────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 350px;
}

.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: 'Crimson Text', serif;
  opacity: 0;
  transform: translateX(30px);
  transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
  pointer-events: auto;
  border: 1px solid;
}

.toast-show { opacity: 1; transform: translateX(0); }

.toast-info { background: var(--bg-elevated); border-color: var(--border-light); color: var(--text); }
.toast-warn { background: rgba(196,168,58,0.12); border-color: var(--yellow); color: var(--yellow); }
.toast-success { background: rgba(58,158,92,0.1); border-color: var(--green); color: var(--green); }
.toast-danger { background: rgba(196,64,64,0.12); border-color: var(--red); color: var(--red); }
.toast-levelup { background: rgba(201,135,62,0.15); border-color: var(--accent); color: var(--accent); }
.toast-rare { background: rgba(138,94,196,0.15); border-color: var(--purple); color: var(--purple); }
.toast-achievement { background: rgba(201,135,62,0.2); border-color: var(--accent-glow); color: var(--accent-glow); font-family: 'Cinzel', serif; }

/* ── MOBILE TOGGLE ──────────────────────────────────── */
#sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 1001;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: var(--bg-deep);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.page-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-size: 16px;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: left 0.3s;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }

  #sidebar.open { left: 0; }
  #sidebar-toggle { display: flex; align-items: center; justify-content: center; }

  #main-content { padding: 20px 16px 80px; }

  .combat-arena { flex-direction: column; gap: 12px; }
  .combatant { max-width: 100%; }
  .combat-vs { font-size: 16px; }

  .actions-grid { grid-template-columns: 1fr; }
  .bank-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .equip-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .page-header { flex-direction: column; gap: 8px; }
  .ph-icon { width: 36px; height: 36px; }
  .ph-info h1 { font-size: 20px; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── v2 ADDITIONS ───────────────────────────────────────── */

/* PERSISTENT TRAINING BAR (top of main area) */
#training-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
  padding: 8px 16px;
}
.tb-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tb-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.tb-label strong { color: var(--accent); }
.tb-progress {
  flex: 1;
  height: 4px;
  background: var(--bg-deep);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}
.tb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 0.1s linear;
}
.tb-idle .tb-label { color: var(--text-dim); }
.tb-idle .tb-label strong { color: var(--text-dim); }

/* ALIGNMENT BADGE in sidebar */
.align-val { color: var(--purple) !important; font-family: 'Cinzel', serif !important; letter-spacing: 1px; }

/* NAV active count badge */
.nav-active-count { background: var(--accent) !important; color: var(--bg-deep) !important; }

/* STATUS EFFECTS */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.status-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}

/* ABILITY BAR */
.ability-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.ability-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  font-family: 'Cinzel', serif;
}
.ability-slot:hover:not(.empty):not(.on-cd) {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.ability-slot.on-cd {
  opacity: 0.45;
  cursor: not-allowed;
}
.ability-slot.empty {
  border-style: dashed;
  color: var(--text-dim);
  font-size: 11px;
}
.ab-name { font-size: 12px; color: var(--text-bright); margin-bottom: 4px; }
.ab-cd { font-size: 11px; color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.ability-slot.on-cd .ab-cd { color: var(--red); }

.ability-slots-equip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.ability-slot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}

/* WORLD BOSS RESPAWN */
.boss-respawn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px;
}

/* NPC CARDS */
.npc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.npc-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.npc-avatar {
  width: 48px;
  height: 48px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.npc-name { font-family: 'Cinzel', serif; color: var(--text-bright); font-size: 16px; }
.npc-title { font-size: 12px; color: var(--accent); font-style: italic; }
.npc-faction { font-size: 11px; color: var(--purple); }
.npc-location { font-size: 11px; color: var(--text-dim); }
.npc-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.5; }
.npc-quests { display: flex; flex-direction: column; gap: 6px; }
.quest-section-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-top: 6px;
}
.quest-mini {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.quest-mini.in-progress { border-color: var(--accent-dim); }
.qm-name { font-size: 13px; color: var(--text-bright); font-family: 'Cinzel', serif; }
.qm-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }

/* QUEST PAGE */
.quest-card { cursor: default; }
.quest-objectives { margin: 8px 0; }
.qo-row { margin-bottom: 6px; }
.qo-label { font-size: 12px; color: var(--text); margin-bottom: 2px; }
.quest-rewards {
  font-size: 12px;
  color: var(--green);
  margin: 6px 0;
  font-style: italic;
}

/* FACTIONS */
.rep-bar {
  height: 8px;
  background: var(--bg-deep);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}
.rep-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), #b585e0);
  border-radius: 4px;
  transition: width 0.3s;
}
.faction-perk {
  font-size: 12px;
  color: var(--accent);
  margin-top: 6px;
  font-style: italic;
}

/* ALIGNMENT */
.alignment-display {
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.al-current { font-family: 'Cinzel', serif; font-size: 18px; color: var(--accent); margin-bottom: 6px; }
.al-current strong { color: var(--accent); }
.al-desc { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.al-points {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
}
.al-points > div { margin: 2px 0; }
.alignment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.align-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}
.align-cell.current {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 16px rgba(201,135,62,0.2);
}
.al-axis {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 2px;
}
.align-cell .al-name { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text); margin: 2px 0; }
.al-bonus { font-size: 11px; color: var(--text-dim); line-height: 1.3; }

.muted { color: var(--text-dim); font-size: 13px; font-style: italic; padding: 12px; }

@media (max-width: 768px) {
  .ability-bar { grid-template-columns: repeat(2, 1fr); }
  .alignment-grid { grid-template-columns: 1fr; }
  .tb-content { flex-wrap: wrap; }
}

/* SPRITES */
.item-sprite svg { width: 100%; height: 100%; display: block; }
.bi-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}
.es-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

/* Better bank item layout with sprite — merged into primary .bank-item above */
.bank-item:hover {
  border-color: var(--accent-dim);
}
.bi-name {
  font-size: 12px;
  color: var(--text-bright);
  text-align: center;
  line-height: 1.2;
}
.bi-qty {
  font-size: 11px;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
}
.bi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
}
/* .bank-grid columns merged into primary selector above */

/* Equipment slot with icon */
.es-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Animations for combat feedback */
.hp-fill.player-hp {
  background: linear-gradient(90deg, #4a8a3e, #6db850);
}
.hp-fill.monster-hp {
  background: linear-gradient(90deg, #8a3a3a, #b84040);
}
.hp-bar {
  position: relative;
  height: 14px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.hp-fill {
  height: 100%;
  transition: width 0.15s ease-out;
}
.hp-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
  margin-top: 2px;
  text-align: center;
}
.combatant {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  flex: 1;
}
.combatant-name {
  font-family: 'Cinzel', serif;
  color: var(--text-bright);
  font-size: 15px;
  margin-bottom: 6px;
}
.combat-arena {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
}
.combat-vs {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  font-size: 20px;
  letter-spacing: 2px;
  flex-shrink: 0;
}
.monster-side { border-left: 3px solid #8a3a3a; }
.player-side { border-left: 3px solid #4a8a3e; }

@media (max-width: 640px) {
  .combat-arena { flex-direction: column; }
  .combat-vs { transform: rotate(90deg); }
  .bank-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── v3 SYSTEMS ─────────────────────────────────────────── */

/* Prayer info / Slayer info boxes */
.prayer-info {
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.prayer-info .stat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.prayer-info .pi-val {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--accent);
}

/* Prayer combat bar */
.prayer-combat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
}

/* Pet cards */
.action-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* ── ONLINE SYSTEMS ─────────────────────────────────────── */

/* Online/Offline indicator */
.online-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4a8a3e;
  margin-right: 4px;
  box-shadow: 0 0 4px #4a8a3e;
}
.offline-dot::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8a3a3a;
  margin-right: 4px;
}

/* Chat */
#chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  max-height: 600px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-msg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--bg-deep);
}
.chat-msg.chat-mine { background: var(--accent-bg); }
.chat-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--text-bright);
  font-weight: 700;
}
.chat-name small { color: var(--text-dim); font-weight: 400; }
.chat-text { color: var(--text); flex: 1; word-break: break-word; }
.chat-time { font-size: 10px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.chat-input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: 'Crimson Text', serif;
  outline: none;
}
.chat-input:focus { border-color: var(--accent); }

/* Leaderboard */
.leaderboard-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lb-header, .lb-row {
  display: grid;
  grid-template-columns: 40px 1fr 80px 80px 70px;
  gap: 8px;
  padding: 10px 14px;
  align-items: center;
}
.lb-header {
  background: var(--bg-elevated);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.lb-row {
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--bg-deep); }
.lb-me { background: rgba(201,135,62,0.08) !important; border-left: 3px solid var(--accent); }
.lb-rank {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.lb-name { color: var(--text-bright); }
.lb-rating {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  text-align: center;
}
.lb-wl, .lb-cb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

/* Settings section reuse */
.settings-section h3 {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--text-bright);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .lb-header, .lb-row { grid-template-columns: 30px 1fr 60px 60px; }
  .lb-cb { display: none; }
}

/* ── v3.2 UX OVERHAUL ──────────────────────────────────── */

/* Hit Splats */
.splat-area {
  position: relative;
  height: 24px;
  overflow: visible;
}
.hit-splat {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  animation: splatRise 0.9s ease-out forwards;
  z-index: 10;
  white-space: nowrap;
}
.splat-hit {
  color: #fff;
  background: #c44040;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.splat-big {
  color: #fff;
  background: linear-gradient(135deg, #d63a1a, #ff6030);
  font-size: 20px;
  text-shadow: 0 0 8px rgba(255,100,0,0.6);
}
.splat-miss {
  color: var(--text-dim);
  background: var(--bg-elevated);
  font-size: 13px;
  opacity: 0.7;
}
@keyframes splatRise {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  20% { transform: translateY(-12px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

/* Combat style groups */
.combat-style-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.style-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.style-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Prayer panel in combat */
.prayer-combat-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.prayer-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.prayer-btn {
  font-size: 10px !important;
  padding: 3px 6px !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
/* old .prayer-active removed - see v6.3 polish section */

/* Equipment stat chips in combat */
.equip-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.es-chip {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--accent);
}

/* Ready glow on abilities */
.ready-glow {
  color: #4a8a3e !important;
  text-shadow: 0 0 4px rgba(74,138,62,0.5);
}

/* Bank Tabs */
.bank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.bank-tab {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bank-tab:hover { color: var(--text); border-color: var(--accent-dim); }
.bank-tab.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  border-bottom-color: transparent;
}

/* Bank item stats display */
.bi-stats {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  text-align: center;
  line-height: 1.3;
  max-width: 140px;
  word-wrap: break-word;
  margin-bottom: 2px;
}

/* Smooth transitions for all bars */
.hp-fill, .sh-xp-fill, .aa-fill, .tb-fill, .rep-fill {
  transition: width 0.15s ease-out;
}

/* Level up flash animation */
@keyframes levelFlash {
  0% { box-shadow: 0 0 0 0 rgba(201,135,62,0.8); }
  50% { box-shadow: 0 0 20px 4px rgba(201,135,62,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(201,135,62,0); }
}
.level-up-flash {
  animation: levelFlash 0.8s ease-out;
}

/* Toast animation improvements */
.toast {
  transform: translateX(100%);
  transition: transform 0.3s ease-out, opacity 0.3s;
  opacity: 0;
}
.toast-show {
  transform: translateX(0);
  opacity: 1;
}
.toast-achievement, .toast-levelup {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-bg), var(--bg-elevated));
}

/* Pulse animation for active training card */
.action-card.active {
  animation: activePulse 2s ease-in-out infinite;
}
@keyframes activePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,135,62,0); }
  50% { box-shadow: 0 0 12px 2px rgba(201,135,62,0.2); }
}

/* Combat stats bar improved */
.combat-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 13px;
}
.combat-stats-bar b {
  color: var(--accent);
  font-family: 'Cinzel', serif;
}

/* Food display improved */
.food-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 13px;
}
.food-item small { color: #4a8a3e; }

/* Mobile fixes */
@media (max-width: 640px) {
  .prayer-quick-btns { max-height: 80px; overflow-y: auto; }
  .bank-tabs { gap: 2px; }
  .bank-tab { font-size: 10px; padding: 4px 8px; }
}

/* ── v3.3 LEVEL TRACKER + MONSTER ART ─────────────────── */

/* Compact Level Tracker Grid in sidebar */
.level-tracker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 6px 10px;
  margin: 0 8px 8px;
  background: var(--bg-deep);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.lt-skill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  font-size: 10px;
  border-radius: 2px;
  cursor: default;
  transition: background 0.15s;
}
.lt-skill:hover { background: var(--bg-card); }
.lt-abbr {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
}
.lt-lvl {
  font-family: 'Cinzel', serif;
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
}

/* Monster Art in Combat */
.monster-art {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  animation: monsterIdle 3s ease-in-out infinite;
}
.monster-art svg {
  width: 100%;
  height: 100%;
}
@keyframes monsterIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Monster button improvements - show HP/style */
.monster-btn {
  text-align: left !important;
}
.monster-btn small {
  color: var(--text-dim);
}

/* Necromancy accent */
.action-card[style*="5a2a5a"] .ac-name { color: #b585e0; }

@media (max-width: 768px) {
  .level-tracker { grid-template-columns: repeat(3, 1fr); }
}

/* ── v3.4 COMBAT XP + CHARACTER + GUILDS ──────────────── */

/* Combat XP Panel */
.combat-xp-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
}

/* Character Profile Card */
.char-profile-card {
  display: flex;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.char-avatar {
  width: 128px;
  height: 128px;
  border: 3px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-deep);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.char-avatar img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.char-info { flex: 1; }
.char-name {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 4px;
}
.char-title {
  font-size: 13px;
  color: var(--purple);
  font-style: italic;
  margin-bottom: 8px;
}
.char-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
.char-stats span { background: var(--bg-deep); padding: 2px 8px; border-radius: 3px; }
.char-bio {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* Character Customizer */
.char-customizer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.cc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  width: 110px;
  flex-shrink: 0;
}
.cc-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 64px;
  overflow-y: auto;
}
.cc-colors {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cc-swatch {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.cc-swatch:hover { border-color: var(--text); transform: scale(1.1); }
.cc-swatch-active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(201,135,62,0.5);
  transform: scale(1.15);
}

/* Equipment Guide */
.equip-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.eg-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-deep);
  border-radius: 4px;
  font-size: 13px;
}
.eg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eg-name { color: var(--text-bright); font-family: 'Cinzel', serif; }
.eg-level { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.eg-note {
  width: 100%;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}

/* Avatar in sidebar */
.player-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--accent-dim);
  image-rendering: pixelated;
}

@media (max-width: 768px) {
  .char-profile-card { flex-direction: column; align-items: center; text-align: center; }
  .combat-xp-panel { grid-template-columns: repeat(2, 1fr); }
  .cc-label { width: 80px; }
}

/* ── v4.1 COMBAT OVERHAUL ─────────────────────────────── */

/* XP Panel - highlight active skills */
.combat-xp-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.cxp-row {
  display: grid;
  grid-template-columns: 16px 82px 26px 1fr 48px 28px;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.cxp-active {
  background: rgba(201,135,62,0.1);
  border-left: 3px solid var(--accent);
  padding-left: 3px;
}
.cxp-icon { flex-shrink:0; display:flex; }
.cxp-name { font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; letter-spacing:0.5px; }
.cxp-active .cxp-name { color:var(--accent); font-weight:700; }
.cxp-level { text-align:center; font-family:'Cinzel',serif; font-weight:700; color:var(--accent); font-size:13px; }
.cxp-bar { height:8px; background:var(--bg-deep); border-radius:4px; overflow:hidden; }
.cxp-fill { height:100%; background:var(--border); border-radius:4px; transition:width 0.2s; }
.cxp-fill-active { background:linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.cxp-xp { text-align:right; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); }
.cxp-pct { text-align:right; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); font-weight:700; }

/* Combat Controls */
.combat-controls {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.cc-group { flex:1; min-width:200px; }
.cc-label { font-family:'Cinzel',serif; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:4px; }
.cc-btns { display:flex; gap:4px; flex-wrap:wrap; }
.cc-btn {
  display:flex; align-items:center; gap:4px; padding:6px 12px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:12px; cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.cc-btn:hover { border-color:var(--accent-dim); color:var(--accent); }
.cc-btn-active { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); font-weight:700; }
.cc-info { font-size:11px; color:var(--text-dim); padding:6px; }

/* Combat Sections */
.combat-section {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px; margin-bottom:10px;
}
.cs-header { font-family:'Cinzel',serif; font-size:12px; color:var(--text-bright); display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cs-sub { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); }

/* Spell Grid */
.spell-grid { display:flex; flex-wrap:wrap; gap:4px; }
.spell-card {
  padding:6px 10px; background:var(--bg-deep); border:1px solid var(--border);
  border-radius:4px; cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; text-align:center;
}
.spell-card:hover:not(.locked) { border-color:var(--accent-dim); }
.spell-active { border-color:var(--accent)!important; background:var(--accent-bg)!important; }
.sc-name { font-size:11px; color:var(--text-bright); font-family:'Cinzel',serif; }
.sc-info { font-size:9px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }
.sc-runes { font-size:9px; color:var(--text-dim); margin-top:2px; line-height:1.3; }
.rune-free { color:#4ae04a; font-weight:600; }
.spell-tags { display:flex; flex-wrap:wrap; gap:3px; margin:4px 0; }
.spell-tag  { font-size:9px; padding:1px 5px; background:var(--accent-bg); border:1px solid var(--accent-dim); border-radius:10px; color:var(--accent); text-transform:capitalize; }
.info-banner { background:var(--accent-bg); border:1px solid var(--accent-dim); border-radius:4px; padding:8px 12px; margin-bottom:12px; font-size:12px; color:var(--text); }

/* Prayer Grid - see v6.3 polish section for updated styles */

/* Combat Loadout */
.combat-loadout { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.cl-food, .cl-stats { flex:1; min-width:200px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:10px; }
.cl-food-item { display:flex; align-items:center; gap:6px; font-size:13px; margin:6px 0; }
.cl-food-btns { display:flex; align-items:center; gap:8px; }
.cl-stat-chips { display:flex; flex-wrap:wrap; gap:3px; }
.stat-chip { font-size:10px; font-family:'JetBrains Mono',monospace; padding:2px 6px; background:var(--bg-deep); border-radius:3px; color:var(--accent); }
.stat-zero { color:var(--text-dim); }
.stat-speed { color:var(--green); }

/* Combat Arena V2 */
.combat-arena-v2 {
  display:flex; gap:16px; align-items:stretch; margin:16px 0;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; position:relative; overflow:hidden;
}
.combat-arena-v2::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(201,135,62,0.03) 0%, transparent 70%);
  pointer-events:none;
}
.ca-side { flex:1; text-align:center; position:relative; z-index:1; }
.ca-player { border-right:1px solid var(--border-light); padding-right:16px; }
.ca-monster { padding-left:16px; }
.ca-name { font-family:'Cinzel',serif; font-size:16px; color:var(--text-bright); margin-bottom:4px; }
.ca-level { font-size:11px; color:var(--text-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.ca-hp-container { margin:8px 0; }
.ca-hp-bar { height:18px; background:var(--bg-deep); border-radius:9px; overflow:hidden; border:1px solid var(--border); position:relative; }
.ca-hp-fill { height:100%; border-radius:8px; transition:width 0.15s ease-out, background 0.3s; }
.ca-hp-text { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text); text-align:center; margin-top:4px; }
.ca-center { display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.ca-vs-badge {
  font-family:'Cinzel',serif; font-size:24px; font-weight:700; color:var(--accent);
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--accent); border-radius:50%;
  background:var(--accent-bg); text-shadow:0 0 8px rgba(201,135,62,0.3);
}
.ca-kills { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); margin-top:8px; }
.monster-art { width:80px; height:80px; margin:0 auto 8px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5)); animation:monsterIdle 3s ease-in-out infinite; }
.monster-art-placeholder { width:80px; height:80px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); opacity:0.3; }

/* Ability Bar V2 */
.ability-bar-v2 { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; }
.ab-slot-v2 {
  position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 8px; text-align:center; cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.ab-slot-v2:hover:not(.ab-cd):not(.ab-empty) { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.ab-cd-overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(140,50,50,0.3); transition:height 0.15s; pointer-events:none; }
.ab-content { position:relative; z-index:1; }
.ab-slot-v2 .ab-name { font-family:'Cinzel',serif; font-size:11px; color:var(--text-bright); }
.ab-slot-v2 .ab-timer { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); }
.ab-cd .ab-timer { color:var(--red); }
.ab-empty { border-style:dashed; cursor:default; }
.ab-empty .ab-content { color:var(--text-dim); font-size:11px; }

/* Area Grid V2 */
.area-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.area-card-v2 {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.area-card-v2:hover:not(.area-locked) { border-color:var(--accent-dim); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.area-locked { opacity:0.5; }
.area-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.area-name { font-family:'Cinzel',serif; font-size:14px; color:var(--text-bright); }
.area-req { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); background:var(--accent-bg); padding:2px 6px; border-radius:3px; }
/* .area-desc merged above */
.area-monsters-v2 { display:flex; flex-direction:column; gap:4px; }
.monster-btn-v2 {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-deep); border:1px solid var(--border); border-radius:4px;
  cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; text-align:left; width:100%;
}
.monster-btn-v2:hover:not(:disabled) { border-color:var(--accent-dim); background:var(--accent-bg); }
.mb-art { width:32px; height:32px; flex-shrink:0; }
.mb-art svg { width:100%; height:100%; }
.mb-name { font-family:'Cinzel',serif; font-size:12px; color:var(--text-bright); }
.mb-info { font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }

/* Dungeon + Slayer bars */
.dungeon-progress-v2 { display:flex; justify-content:space-between; padding:8px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); font-size:12px; color:var(--text); margin-bottom:8px; }
.slayer-combat-bar { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg-card); border:1px solid var(--accent-dim); border-radius:var(--radius); font-size:12px; margin-bottom:8px; }

/* Flee button */
.btn-flee { display:flex; align-items:center; gap:6px; justify-content:center; width:100%; padding:10px; font-size:14px; }

@media (max-width: 768px) {
  .combat-arena-v2 { flex-direction:column; }
  .ca-player { border-right:none; border-bottom:1px solid var(--border-light); padding:0 0 12px; }
  .ca-monster { padding:12px 0 0; }
  .ca-center { flex-direction:row; gap:12px; padding:8px 0; }
  .ability-bar-v2 { grid-template-columns:repeat(2,1fr); }
  .combat-xp-panel { grid-template-columns:1fr; }
}

/* ── QUANTITY CONTROLS ────────────────────────────────── */
.bi-sell-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  margin-top: 4px;
}
.qty-input {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
}
.qty-input:focus { border-color: var(--accent); outline: none; }
.sell-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
}

/* ── LANDING PAGE ─────────────────────────────────────── */
.landing-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease-out;
}
.landing-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0604 0%, #1a0e06 30%, #0d0906 60%, #060404 100%);
  z-index: 0;
}
.landing-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(201,135,62,0.06) 0%, transparent 60%);
}
.landing-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 600px;
  padding: 40px;
  animation: landingFadeIn 1.5s ease-out;
}
@keyframes landingFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.landing-logo-svg {
  width: 420px;
  max-width: 95vw;
  height: auto;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 20px rgba(201,135,62,0.3));
}
.landing-tagline {
  font-family: 'Crimson Text', serif;
  font-size: 18px;
  color: #a08060;
  font-style: italic;
  margin-bottom: 24px;
  letter-spacing: 2px;
}
.landing-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.landing-features span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 12px;
  background: rgba(201,135,62,0.08);
  border: 1px solid rgba(201,135,62,0.2);
  border-radius: 20px;
  color: #c9873e;
  letter-spacing: 1px;
}
.landing-desc {
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: #7a6a5a;
  line-height: 1.6;
  margin-bottom: 32px;
}
.landing-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 48px;
  background: linear-gradient(180deg, rgba(201,135,62,0.15) 0%, rgba(201,135,62,0.05) 100%);
  border: 2px solid #c9873e;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.landing-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(201,135,62,0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.landing-btn:hover {
  border-color: #e0a855;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,135,62,0.25), 0 0 60px rgba(201,135,62,0.1);
}
.landing-btn:hover::before { opacity: 1; }
.lb-text {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #c9873e;
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.lb-sub {
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: #7a6a5a;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.landing-footer {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 32px;
}
.landing-footer span {
  font-size: 11px;
  color: #4a3a2a;
  font-family: 'Crimson Text', serif;
}

/* Ember particles */
.landing-embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ember {
  position: absolute;
  bottom: -10px;
  background: #c9873e;
  border-radius: 50%;
  animation: emberRise linear infinite;
  box-shadow: 0 0 6px rgba(201,135,62,0.6);
}
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

/* Admin badge */
.admin-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #c9873e, #d4a83a);
  color: #0a0604;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 1px;
  vertical-align: middle;
  margin-left: 6px;
}

/* XP panel responsive fix */
@media (max-width: 640px) {
  .combat-xp-panel { grid-template-columns: 1fr; }
  .cxp-row { grid-template-columns: 16px 72px 24px 1fr 42px 26px; gap: 2px; padding: 3px 4px; }
  .cxp-name { font-size: 9px; }
  .landing-logo-svg { width: 300px; }
  .landing-btn { padding: 12px 32px; }
}

/* XP Gain Popup */
.xp-gain-popup {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #4a8a3e;
  text-shadow: 0 0 8px rgba(74,138,62,0.5);
  white-space: nowrap;
  pointer-events: none;
  animation: xpPopup 1.5s ease-out forwards;
  z-index: 20;
  background: rgba(10,6,4,0.85);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(74,138,62,0.3);
}
@keyframes xpPopup {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  30% { opacity: 1; transform: translateX(-50%) translateY(-12px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
}

/* ── RANDOM EVENTS ────────────────────────────────────── */
.random-event-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,4,4,0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.re-modal {
  background: var(--bg-elevated);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 32px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 0 40px rgba(201,135,62,0.3), 0 20px 60px rgba(0,0,0,0.5);
  animation: modalPop 0.4s ease-out;
}
@keyframes modalPop {
  0% { transform: scale(0.8) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.re-icon {
  color: var(--accent);
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(201,135,62,0.5));
}
.re-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.re-text {
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 20px;
}
.re-btn {
  padding: 10px 32px;
  font-size: 14px;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

/* ── LEADERBOARD ──────────────────────────────────────── */
.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.lb-tab {
  padding: 4px 10px;
  font-size: 11px;
  font-family: 'Cinzel', serif;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.lb-tab:hover { border-color: var(--accent-dim); color: var(--text); }
.lb-tab-active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.leaderboard-table { width: 100%; }
.lb-header {
  display: grid;
  grid-template-columns: 36px 1fr 80px 60px 60px;
  gap: 8px;
  padding: 8px 12px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr 80px 60px 60px;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}
.lb-row:hover { background: var(--bg-card); }
.lb-me { background: rgba(201,135,62,0.08); border-left: 3px solid var(--accent); }
.lb-gold .lb-rank { color: #d4a83a; font-weight: 700; }
.lb-silver .lb-rank { color: #b0b0b0; font-weight: 700; }
.lb-bronze .lb-rank { color: #a06a3c; font-weight: 700; }
.lb-rank { font-family: 'Cinzel', serif; font-weight: 700; color: var(--text-dim); }
.lb-name { color: var(--text-bright); }
.lb-me .lb-name { color: var(--accent); }
.lb-val { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; text-align: right; }
.lb-total, .lb-cb { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-size: 12px; text-align: right; }
@media (max-width: 640px) {
  .lb-header, .lb-row { grid-template-columns: 28px 1fr 60px 48px; }
  .lb-cb { display: none; }
}

/* ── LEADERBOARD ──────────────────────────────────────── */
.lb-tabs {
  margin-bottom: 14px;
}
.lb-tab-section {
  margin-bottom: 8px;
}
.lb-tab-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.lb-tab-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.lb-tab {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  font-family: 'Crimson Text', serif;
}
.lb-tab:hover { border-color: var(--accent-dim); color: var(--text); }
.lb-tab-active {
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 700;
}
.leaderboard-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lb-header {
  display: grid;
  grid-template-columns: 40px 1fr 90px 70px 60px;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-deep);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}
.lb-row {
  display: grid;
  grid-template-columns: 40px 1fr 90px 70px 60px;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  transition: background 0.15s;
}
.lb-row:hover { background: rgba(201,135,62,0.04); }
.lb-row:last-child { border-bottom: none; }
.lb-me { background: rgba(201,135,62,0.08) !important; border-left: 3px solid var(--accent); }
.lb-gold .lb-rank { font-size: 18px; }
.lb-silver .lb-rank { font-size: 16px; }
.lb-bronze .lb-rank { font-size: 15px; }
.lb-gold { background: rgba(255,215,0,0.05); }
.lb-silver { background: rgba(192,192,192,0.04); }
.lb-bronze { background: rgba(205,127,50,0.04); }
.lb-rank { text-align: center; font-family: 'JetBrains Mono', monospace; color: var(--text-dim); }
.lb-name { font-family: 'Cinzel', serif; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; text-align: right; }
.lb-total, .lb-cb { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); text-align: center; }
@media (max-width: 640px) {
  .lb-header, .lb-row { grid-template-columns: 32px 1fr 70px 50px; }
  .lb-cb { display: none; }
}

/* ── CHAT V2 ──────────────────────────────────────────── */
.chat-container-v2 {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.ch-title { font-family: 'Cinzel', serif; color: var(--text-bright); letter-spacing: 1px; }
.ch-online { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent); }
.chat-messages-v2 {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-msg {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  padding: 3px 0;
  line-height: 1.4;
}
.chat-mine { background: rgba(201,135,62,0.04); border-radius: 4px; padding: 3px 6px; }
.chat-admin-msg { border-left: 2px solid var(--accent); padding-left: 8px; }
.chat-system {
  text-align: center;
  padding: 6px 12px;
  background: rgba(201,135,62,0.08);
  border-radius: 4px;
  border: 1px solid rgba(201,135,62,0.15);
}
.chat-sys-text { font-family: 'Cinzel', serif; font-size: 12px; color: var(--accent); letter-spacing: 0.5px; }
.chat-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  padding: 1px 4px;
  background: var(--accent);
  color: var(--bg-deep);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.chat-name { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text-bright); flex-shrink: 0; }
.chat-level { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-dim); flex-shrink: 0; }
.chat-text { color: var(--text); word-break: break-word; }
.chat-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-dim); flex-shrink: 0; }
.chat-input-bar-v2 {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
}
.chat-input-v2 {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
}
.chat-input-v2:focus { border-color: var(--accent); outline: none; }
.chat-admin-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  padding: 4px 12px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-light);
}

/* ── STORYLINE ────────────────────────────────────────── */
.story-alignment {
  background: var(--bg-card);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.sa-title { font-family: 'Cinzel', serif; font-size: 16px; color: var(--accent); margin-bottom: 4px; }
.sa-desc { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.sa-meters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.sa-meter { flex: 1; min-width: 180px; }
.sa-label { font-family: 'Cinzel', serif; font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 1px; }
.sa-bar { height: 10px; background: var(--bg-deep); border-radius: 5px; overflow: hidden; margin: 4px 0; border: 1px solid var(--border); }
.sa-fill-good { height: 100%; background: linear-gradient(90deg, #8a3a3a, #5a5a5a 50%, #4a8a3e); border-radius: 4px; transition: width 0.3s; }
.sa-fill-order { height: 100%; background: linear-gradient(90deg, #8a5a1a, #5a5a5a 50%, #4a7a9a); border-radius: 4px; transition: width 0.3s; }
.sa-val { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); }
.sa-hint { font-size: 11px; color: var(--text-dim); font-style: italic; line-height: 1.5; }

.story-chain {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.story-done { border-color: #4a8a3e; opacity: 0.7; }
.sc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sc-name { font-family: 'Cinzel', serif; font-size: 18px; color: var(--text-bright); }
.sc-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 3px 8px; border-radius: 3px; font-weight: 700; letter-spacing: 0.5px; }
.sc-active { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }
.sc-complete { background: rgba(74,138,62,0.15); color: #4a8a3e; border: 1px solid #4a8a3e; }
.sc-desc { font-size: 13px; color: var(--text-dim); font-style: italic; margin-bottom: 12px; }

.sc-chapter {
  border-left: 3px solid var(--border);
  padding-left: 16px;
  margin-bottom: 12px;
  margin-left: 8px;
}
.ch-done { border-color: #4a8a3e; }
.ch-active { border-color: var(--accent); }
.ch-locked { opacity: 0.4; }
.ch-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--text-bright);
  margin-bottom: 8px;
}
.ch-done .ch-title { color: #4a8a3e; }
.ch-active .ch-title { color: var(--accent); }

.ch-step {
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.step-done { opacity: 0.5; }
.step-active {
  background: rgba(201,135,62,0.06);
  border: 1px solid var(--accent-dim);
}
.step-text {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 8px;
}
.step-objective {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
}
.so-text { font-size: 12px; color: var(--text); }
.so-progress { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); font-weight: 700; }
.step-rewards { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sr-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
}
.sr-gold { color: var(--accent); border-color: var(--accent-dim); }
.sr-item { color: #4a8a3e; border-color: #4a8a3e; }
.sr-align { color: #b585e0; border-color: #5a2a5a; }

/* ── ASHEN BAZAAR ─────────────────────────────────────── */
.bazaar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ba-gold { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent); }
.bazaar-post, .bazaar-search {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.bp-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bz-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.bz-header {
  display: grid;
  grid-template-columns: 1fr 50px 80px 80px 100px 70px;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-deep);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}
.bz-row {
  display: grid;
  grid-template-columns: 1fr 50px 80px 80px 100px 70px;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  align-items: center;
  transition: background 0.15s;
}
.bz-row:hover { background: rgba(201,135,62,0.04); }
.bz-mine { background: rgba(201,135,62,0.06); border-left: 3px solid var(--accent); }
.bz-item { font-family: 'Cinzel', serif; color: var(--text-bright); }
.bz-qty, .bz-price, .bz-total { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.bz-price { color: var(--accent); }
.bz-total { color: var(--text); font-weight: 700; }
.bz-seller { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }

/* ── GEAR SETS ────────────────────────────────────────── */
.gs-save {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.gs-current {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.gs-slot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
}
.gs-empty { color: var(--text-dim); border-style: dashed; }
.gs-list { display: flex; flex-direction: column; gap: 8px; }
.gs-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color 0.15s;
}
.gs-card:hover { border-color: var(--accent-dim); }
.gs-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gs-card-name { font-family: 'Cinzel', serif; font-size: 15px; color: var(--accent); }
.gs-card-btns { display: flex; gap: 4px; }
.gs-items { display: flex; flex-wrap: wrap; gap: 4px; }
.gs-item {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .bz-header, .bz-row { grid-template-columns: 1fr 40px 60px 60px 60px; }
  .bz-seller { display: none; }
}

/* ── THIEVING LOOT TABLES ─────────────────────────────── */
.thiev-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.thiev-loot {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}
.thiev-drop {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  color: var(--text);
}
.thiev-drop small { color: var(--text-dim); }

/* ── NPC ART ──────────────────────────────────────────── */
.npc-avatar {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npc-avatar svg {
  width: 100%;
  height: 100%;
}

/* ── FISHING ZONES ────────────────────────────────────── */
.fz-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 6px 0;
}
.fz-fish {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  color: var(--text);
  cursor: default;
}
.fz-fish small { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 9px; }

/* ── WILDERNESS ───────────────────────────────────────── */
.wild-header {
  background: linear-gradient(135deg, rgba(140,50,50,0.15), rgba(60,20,20,0.2));
  border: 1px solid rgba(140,50,50,0.3);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
}
.wild-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #c44040;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.wild-sub { font-size: 13px; color: #8a5a5a; font-style: italic; }

.wild-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ws-stat {
  flex: 1;
  min-width: 100px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}
.ws-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); display: block; }
.ws-val { font-family: 'Cinzel', serif; font-size: 18px; color: var(--text-bright); display: block; margin-top: 4px; }
.ws-streak { color: #c44040; }

.wild-warnings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.ww-item {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
}
.ww-danger { background: rgba(140,50,50,0.1); border: 1px solid rgba(140,50,50,0.2); color: #c47070; }
.ww-info { background: rgba(201,135,62,0.06); border: 1px solid rgba(201,135,62,0.15); color: var(--text-dim); }

.wild-zone { border-color: rgba(140,50,50,0.3) !important; }
.wild-zone:hover:not(.area-locked) { border-color: #c44040 !important; }
.wild-pvp-badge { background: rgba(140,50,50,0.2) !important; color: #c44040 !important; border-color: rgba(140,50,50,0.3) !important; }

.wild-combat-active {
  background: rgba(140,50,50,0.1);
  border: 2px solid #c44040;
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
  animation: activePulse 2s ease-in-out infinite;
}
.wca-title { font-family: 'Cinzel', serif; font-size: 16px; color: #c44040; letter-spacing: 2px; margin-bottom: 4px; }
.wca-vs { font-size: 14px; color: var(--text); margin-bottom: 10px; }
.wca-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── ALTAR INFO ───────────────────────────────────────── */
.altar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  margin: 4px 0;
  background: rgba(181,133,224,0.06);
  border-left: 2px solid rgba(181,133,224,0.3);
  border-radius: 0 4px 4px 0;
}
.altar-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #b585e0;
  letter-spacing: 0.5px;
}
.altar-desc {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
}

/* ── ITEM RARITY ──────────────────────────────────────── */
.rarity-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}
/* Rarity border glow on bank items */
.bank-item[data-rarity="mythic"] { border-color: #c44040 !important; box-shadow: 0 0 8px rgba(196,64,64,0.2); }
.bank-item[data-rarity="legendary"] { border-color: #d4a83a !important; box-shadow: 0 0 6px rgba(212,168,58,0.15); }
.bank-item[data-rarity="epic"] { border-color: #b585e0 !important; }
.bank-item[data-rarity="rare"] { border-color: #4a90d4 !important; }
.bank-item[data-rarity="uncommon"] { border-color: #4a8a3e !important; }

/* Critical hit splat */
.splat-crit {
  color: #fff;
  background: linear-gradient(135deg, #d4a83a, #ff8040);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(255,128,0,0.8);
  padding: 3px 10px;
}
.splat-crit::after {
  content: ' CRIT!';
  font-size: 10px;
  letter-spacing: 1px;
}

/* ── STATISTICS SKILL TABLE ───────────────────────────── */
.stats-skills {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
}
.ss-row {
  display: grid;
  grid-template-columns: 100px 30px 1fr 70px 60px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.ss-row:hover { background: rgba(201,135,62,0.04); }
.ss-name { font-family: 'Cinzel', serif; font-size: 11px; color: var(--text); }
.ss-level { font-family: 'Cinzel', serif; font-weight: 700; color: var(--accent); text-align: center; }
.ss-bar { height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; }
.ss-fill { height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 3px; }
.ss-xp { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); text-align: right; }
.ss-actions { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); text-align: right; }

/* Shop buttons */
.shop-btns { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }

@media (max-width: 640px) {
  .ss-row { grid-template-columns: 70px 24px 1fr 50px; }
  .ss-actions { display: none; }
}

/* ── SUMMONING ────────────────────────────────────────── */
.familiar-active {
  background: linear-gradient(135deg, rgba(74,138,62,0.1), rgba(74,138,62,0.05));
  border: 2px solid #4a8a3e;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
}
.fa-header { font-family: 'Cinzel', serif; font-size: 16px; color: #4a8a3e; margin-bottom: 4px; }
.fa-timer { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.fa-buffs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 8px; }
.fa-buff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(74,138,62,0.15);
  border: 1px solid rgba(74,138,62,0.3);
  border-radius: 3px;
  color: #4a8a3e;
}
.familiar-none {
  padding: 12px;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 14px;
}
.charm-inv {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.charm-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 80px;
}
.charm-name { font-size: 11px; color: var(--text-dim); margin-bottom: 2px; }
.charm-qty { font-family: 'Cinzel', serif; font-size: 18px; color: var(--accent); font-weight: 700; }

/* ── FAMILIAR IN COMBAT ───────────────────────────────── */
.familiar-combat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px;
  background: rgba(74,138,62,0.08);
  border: 1px solid rgba(74,138,62,0.2);
  border-radius: var(--radius);
  margin-top: 8px;
}
.fc-name { font-family: 'Cinzel', serif; font-size: 12px; color: #4a8a3e; }
.fc-timer { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); }

/* Wilderness combat buttons */
.wild-combat-btns {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  justify-content: center;
}

/* ── POTION BELT ──────────────────────────────────────── */
.cl-potions {
  flex: 1;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.potion-belt {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.pb-slot {
  padding: 6px 4px;
  text-align: center;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.pb-empty {
  background: var(--bg-deep);
  color: var(--text-dim);
  border-style: dashed;
  cursor: default;
}
.pb-filled {
  background: rgba(74,138,62,0.1);
  border-color: rgba(74,138,62,0.3);
  cursor: pointer;
}
.pb-filled:hover {
  border-color: #4a8a3e;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(74,138,62,0.2);
}
.pb-name { font-family: 'Cinzel', serif; font-size: 9px; color: var(--text); display: block; line-height: 1.2; }
.pb-qty { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #4a8a3e; font-weight: 700; display: block; margin-top: 2px; }

/* Potion belt management on equipment page */
.pb-manage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.pb-manage-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.pb-label { font-family: 'Cinzel', serif; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.pb-current { font-size: 12px; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pb-empty-text { color: var(--text-dim); font-style: italic; }
.pb-select { font-size: 11px; padding: 4px 6px; width: 100%; }

/* ── ACTIVE BUFFS BAR ─────────────────────────────────── */
.active-buffs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
  margin: 4px 0;
}
.buff-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(74,138,62,0.12);
  border: 1px solid rgba(74,138,62,0.25);
  border-radius: 4px;
  color: #4a8a3e;
  animation: buffPulse 2s ease-in-out infinite;
}
.buff-chip small { color: var(--text-dim); margin-left: 4px; }
@keyframes buffPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,138,62,0); }
  50% { box-shadow: 0 0 6px 1px rgba(74,138,62,0.15); }
}

/* ── MULTI-MOB ENCOUNTERS ─────────────────────────────── */
.multi-mob-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(196,64,64,0.3);
}
.mm-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c44040;
  margin-bottom: 4px;
}
.mm-btn {
  border-left: 3px solid #c44040 !important;
}
.mm-btn:hover:not(:disabled) {
  border-color: #c44040 !important;
  background: rgba(196,64,64,0.08) !important;
}
.mm-name { color: #c44040 !important; }

/* ================================================================
   v6.3 POLISH - Prayer, Rune Pouch, Animations
   ================================================================ */

/* ── PRAYER FIX (was black on black) ──────────────────── */
.prayer-section {
  background: rgba(201,135,62,0.04);
  border: 1px solid rgba(201,135,62,0.15);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
}
.prayer-pts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  margin-left: 6px;
}
.prayer-slots {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 4px;
}
.prayer-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prayer-btn {
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
  text-align: center;
  color: var(--text); /* FIX: explicit light text */
}
.prayer-btn:hover { border-color: var(--accent-dim); background: var(--bg-card-hover); }
.prayer-btn.prayer-active {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, rgba(201,135,62,0.2), rgba(201,135,62,0.1)) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(201,135,62,0.3);
  animation: prayerGlow 2s ease-in-out infinite;
}
.prayer-btn .pc-name {
  font-size: 10px;
  font-family: 'Cinzel', serif;
  color: inherit;
}
.prayer-btn .pc-cost {
  font-size: 8px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
}
.prayer-btn.prayer-active .pc-cost { color: var(--accent-dim); }
@keyframes prayerGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(201,135,62,0.2); }
  50% { box-shadow: 0 0 16px rgba(201,135,62,0.4); }
}

/* ── RUNE POUCH ───────────────────────────────────────── */
.rune-pouch-section {
  background: rgba(138,94,196,0.04);
  border: 1px solid rgba(138,94,196,0.15);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
}
.rune-pouch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.rp-rune {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: default;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.rp-rune:hover { border-color: rgba(138,94,196,0.4); }
.rp-icon { width: 18px; height: 18px; flex-shrink: 0; }
.rp-qty {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
}

/* ── SKILL PAGE POLISH ────────────────────────────────── */
/* Action cards: subtle hover animation */
.action-card {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.action-card:not(.locked):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.action-card.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(201,135,62,0.15);
  animation: activeGlow 3s ease-in-out infinite;
}
@keyframes activeGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(201,135,62,0.1); }
  50% { box-shadow: 0 0 16px rgba(201,135,62,0.25); }
}

/* Active training bar animation */
.aa-fill {
  transition: width 0.1s linear;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-glow));
  background-size: 200% 100%;
  animation: fillShimmer 2s linear infinite;
}
@keyframes fillShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hit splat improvements */
.hit-splat {
  position: absolute;
  animation: splatPop 1.1s ease-out forwards;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  border-radius: 4px;
  padding: 2px 7px;
  z-index: 20;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
@keyframes splatPop {
  0%   { transform: scale(0.6) translateY(0);    opacity: 1; }
  20%  { transform: scale(1.3) translateY(-8px);  opacity: 1; }
  60%  { transform: scale(1.0) translateY(-20px); opacity: 0.9; }
  100% { transform: scale(0.8) translateY(-42px); opacity: 0; }
}

/* Player deals damage — type-colored */
.splat-melee   { background: #8b2020; color: #ffcc88; font-size: 15px; border: 1px solid #c44; }
.splat-ranged  { background: #1a5e2e; color: #88ffaa; font-size: 15px; border: 1px solid #3a9; }
.splat-magic   { background: #1e2e7a; color: #aabbff; font-size: 15px; border: 1px solid #46f; }
.splat-ability { background: #6b3a10; color: #ffd060; font-size: 15px; border: 1px solid #c9873e; box-shadow: 0 0 8px rgba(201,135,62,0.5); }

/* Damage taken by player */
.splat-taken   { background: #550000; color: #ff6666; font-size: 14px; border: 1px solid #900; }

/* Crit — overlays on any type */
.splat-crit    { font-size: 18px !important; letter-spacing: 0.5px; box-shadow: 0 0 12px rgba(255,200,0,0.6) !important; border-color: #ffd700 !important; }

/* Miss / dodge */
.splat-miss    { background: #2a2a2a; color: #888; font-size: 12px; border: 1px solid #444; font-weight: 600; }
.splat-dodge   { background: #2a3a4a; color: #66ccff; font-size: 13px; border: 1px solid #4af; font-weight: 700; }

/* Large / giant hits */
.splat-big     { font-size: 17px !important; }
.splat-giant   { font-size: 21px !important; animation: splatBoom 1.1s ease-out forwards; }
@keyframes splatBoom {
  0%   { transform: scale(0.4) translateY(0);    opacity: 1; }
  15%  { transform: scale(1.6) translateY(-6px);  opacity: 1; }
  60%  { transform: scale(1.1) translateY(-22px); opacity: 0.9; }
  100% { transform: scale(0.9) translateY(-50px); opacity: 0; }
}

/* Legacy aliases kept for compat */
.splat-hit { background: #8b2020; color: #ffcc88; font-size: 15px; border: 1px solid #c44; }

/* Status effect DoT splats */
.splat-burn   { background: #6b2800; color: #ff8c30; font-size: 13px; border: 1px solid #d67338; }
.splat-poison { background: #1a3a0a; color: #7dcc44; font-size: 13px; border: 1px solid #5ab04b; }
.splat-bleed  { background: #3a0000; color: #ff4444; font-size: 13px; border: 1px solid #a02a2a; font-style: italic; }

/* ── SESSION DAMAGE TRACKER ──────────────────────────── */
.sl-dmg-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--border);
}
.sl-dmg-title { font-family: 'Cinzel', serif; font-size: 12px; color: var(--amber); font-weight: 700; letter-spacing: 0.5px; }
.sl-dmg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 6px 8px;
}
.sl-dmg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 6px; border-radius: 3px; font-size: 12px;
}
.sl-dmg-type { color: var(--text-dim); font-size: 11px; }
.sl-dmg-val  { font-weight: 700; font-family: 'Cinzel', serif; font-size: 12px; }
.sl-dmg-melee   { background: rgba(139,32,32,0.25); }
.sl-dmg-melee   .sl-dmg-val { color: #ffaa66; }
.sl-dmg-ranged  { background: rgba(26,94,46,0.25); }
.sl-dmg-ranged  .sl-dmg-val { color: #66dd88; }
.sl-dmg-magic   { background: rgba(30,46,122,0.25); }
.sl-dmg-magic   .sl-dmg-val { color: #88aaff; }
.sl-dmg-ability { background: rgba(107,58,16,0.25); }
.sl-dmg-ability .sl-dmg-val { color: #c9873e; }
.sl-dmg-total   { background: rgba(255,255,255,0.05); grid-column: 1 / -1; }
.sl-dmg-total   .sl-dmg-val { color: #ddd; }
.sl-dmg-taken   { background: rgba(80,0,0,0.25); }
.sl-dmg-taken   .sl-dmg-val { color: #ff6666; }
.sl-dmg-burn    { background: rgba(107,40,0,0.25); }
.sl-dmg-burn    .sl-dmg-val { color: #ff8c30; }
.sl-dmg-poison  { background: rgba(26,58,10,0.25); }
.sl-dmg-poison  .sl-dmg-val { color: #7dcc44; }
.sl-dmg-bleed2  { background: rgba(58,0,0,0.25); }
.sl-dmg-bleed2  .sl-dmg-val { color: #ff4444; }
.sl-dmg-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--border);
}
.sl-dmg-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.04); border-radius: 4px;
  padding: 3px 8px; font-size: 13px; font-weight: 700;
  color: var(--text); flex: 1;
}
.sl-dmg-stat-label { font-size: 9px; color: var(--text-dim); font-weight: 400; margin-bottom: 1px; text-transform: uppercase; letter-spacing: 0.5px; }
.sl-loot-title { font-size: 11px; color: var(--text-dim); padding: 6px 8px 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* HP bar animations */
.hp-fill {
  transition: width 0.3s ease;
}
.php-fill {
  background: linear-gradient(90deg, #2a7a3e, #3a9e5c, #4abe6c);
}
.mhp-fill {
  background: linear-gradient(90deg, #8a2828, #c44040, #e05050);
}

/* Monster art pulse when in combat */
.monster-art svg {
  animation: monsterIdle 4s ease-in-out infinite;
}
@keyframes monsterIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Level up flash */
.level-up-flash {
  animation: levelFlash 0.8s ease-out;
}
@keyframes levelFlash {
  0% { background: rgba(201,135,62,0.3); }
  100% { background: transparent; }
}

/* XP gain text float */
.xp-gain-float {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(201,135,62,0.5);
  pointer-events: none;
  animation: xpFloat 1.5s ease-out forwards;
  z-index: 100;
}
@keyframes xpFloat {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px); }
}

/* Notification toast animation */
.notification-toast {
  animation: toastSlide 0.3s ease-out;
}
@keyframes toastSlide {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Sidebar nav hover effect */
.nav-item:hover {
  background: var(--bg-card-hover);
  padding-left: 20px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.nav-item.active {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
}

/* Bank item hover */
.bank-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}

/* Recipe output bank qty styling */
.recipe-output small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 3px;
}

/* ── BAZAAR IMPROVEMENTS ──────────────────────────────── */
.bazaar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.bz-gold { font-family: 'Cinzel', serif; font-size: 16px; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.bz-select { max-width: 300px; }
.bp-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bz-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bz-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 80px; gap: 4px; padding: 8px 12px; background: var(--bg-elevated); font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.bz-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 80px; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12px; align-items: center; transition: background 0.15s; }
.bz-row:hover { background: var(--bg-card-hover); }
.bz-mine { background: rgba(201,135,62,0.04); border-left: 3px solid var(--accent); }
.bz-price { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.bz-total { color: var(--text-bright); font-weight: 600; }

/* ── TOOL BONUS DISPLAY ───────────────────────────────── */
.tool-bonus {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #4a8a3e;
  margin-left: 6px;
}

/* ================================================================
   v6.5 VISUAL OVERHAUL - Animations, Effects, Polish
   ================================================================ */

/* ── AMBIENT PARTICLES (skill pages) ──────────────────── */
/* @keyframes float — removed: orphaned, overhead-float is defined separately */

/* ── RARITY ITEM GLOW ─────────────────────────────────── */
.bank-item[data-rarity="mythic"] {
  border-color: #c44040 !important;
  box-shadow: 0 0 12px rgba(196,64,64,0.25);
  animation: mythicPulse 3s ease-in-out infinite;
}
.bank-item[data-rarity="legendary"] {
  border-color: #d4a83a !important;
  box-shadow: 0 0 8px rgba(212,168,58,0.2);
  animation: legendaryPulse 4s ease-in-out infinite;
}
@keyframes mythicPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(196,64,64,0.15); }
  50% { box-shadow: 0 0 20px rgba(196,64,64,0.35); }
}
@keyframes legendaryPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(212,168,58,0.1); }
  50% { box-shadow: 0 0 14px rgba(212,168,58,0.25); }
}

/* ── NOTIFICATION TOASTS ──────────────────────────────── */
.notif-container {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}
.notif {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  animation: notifIn 0.3s ease-out;
  backdrop-filter: blur(8px);
  border: 1px solid;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.notif-info { background: rgba(22,24,34,0.92); border-color: var(--border); color: var(--text); }
.notif-success { background: rgba(22,40,28,0.92); border-color: rgba(58,158,92,0.4); color: #4abe6c; }
.notif-warn { background: rgba(40,36,22,0.92); border-color: rgba(201,135,62,0.4); color: var(--accent); }
.notif-danger { background: rgba(40,22,22,0.92); border-color: rgba(196,64,64,0.4); color: #e05050; }
.notif-rare { background: rgba(22,28,42,0.92); border-color: rgba(74,144,212,0.4); color: #6ab4e8; }
.notif-achievement { background: rgba(40,36,22,0.92); border-color: rgba(212,168,58,0.5); color: #d4a83a; text-shadow: 0 0 8px rgba(212,168,58,0.3); }
.notif-levelup { background: rgba(40,36,22,0.92); border-color: var(--accent); color: var(--accent); font-family: 'Cinzel', serif; font-weight: 600; animation: notifIn 0.3s ease-out, levelGlow 1s ease-out; }
@keyframes notifIn {
  0% { transform: translateX(100%) scale(0.9); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes levelGlow {
  0% { box-shadow: 0 0 30px rgba(201,135,62,0.6); }
  100% { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
}

/* ── COMBAT ARENA EFFECTS ─────────────────────────────── */
.combat-arena {
  position: relative;
  overflow: hidden;
}
.combat-arena::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(196,64,64,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Status effect icons in combat */
.status-effects {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.status-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  animation: statusPulse 1.5s ease-in-out infinite;
}
.status-burn { background: rgba(196,64,64,0.15); border: 1px solid rgba(196,64,64,0.3); color: #e05050; }
.status-poison { background: rgba(58,158,92,0.15); border: 1px solid rgba(58,158,92,0.3); color: #4abe6c; }
.status-freeze { background: rgba(74,144,212,0.15); border: 1px solid rgba(74,144,212,0.3); color: #6ab4e8; }
.status-bleed { background: rgba(140,50,50,0.15); border: 1px solid rgba(140,50,50,0.3); color: #c47070; }
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── SKILL PAGE HEADER ENHANCEMENTS ───────────────────── */
.skill-header {
  position: relative;
  overflow: hidden;
}
.skill-header::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 200px;
  background: linear-gradient(90deg, transparent, rgba(201,135,62,0.03));
  pointer-events: none;
}

/* XP bar glow on progress */
.sh-xp-fill {
  transition: width 0.3s ease;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  box-shadow: 0 0 6px rgba(201,135,62,0.3);
}

/* ── LANDING PAGE ENHANCEMENTS ────────────────────────── */
.landing-title {
  animation: titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(201,135,62,0.3), 0 0 40px rgba(201,135,62,0.1); }
  50% { text-shadow: 0 0 30px rgba(201,135,62,0.5), 0 0 60px rgba(201,135,62,0.2); }
}

/* Feature badge hover */
.feature-badge {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.feature-badge:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ── SIDEBAR POLISH ───────────────────────────────────── */
.sidebar-header {
  position: relative;
  /* overflow:hidden removed - was clipping logo */
}
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Nav category headers */
.nav-header {
  position: relative;
  padding-left: 12px;
}
.nav-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
}

/* ── SCROLLBAR STYLING ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── AREA CARD IMPROVEMENTS ───────────────────────────── */
.area-card-v2 {
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.area-card-v2:hover:not(.area-locked) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.area-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-dim));
  opacity: 0;
  transition: opacity 0.3s;
}
.area-card-v2:hover::before { opacity: 1; }

/* ── MONSTER BUTTON IMPROVEMENTS ──────────────────────── */
.monster-btn-v2 {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.monster-btn-v2:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.monster-btn-v2:hover:not(:disabled)::after {
  content: 'FIGHT';
  position: absolute;
  top: 4px; right: 4px;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent);
  background: rgba(10,11,15,0.8);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ── EQUIPMENT SLOT POLISH ────────────────────────────── */
.equip-slot {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.equip-slot:hover {
  background: var(--bg-card-hover);
}

/* ── LOADING SHIMMER (for async content) ──────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.loading-shimmer {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
  min-height: 40px;
}

/* ── HEADER DIVIDER ───────────────────────────────────── */
.header-divider {
  width: 100%;
  height: 8px;
  margin: 8px 0 14px;
  opacity: 0.6;
}
.sh-tool-bonus {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #4a8a3e;
  margin-top: 2px;
}

/* ── SMOOTHER PAGE TRANSITIONS ────────────────────────── */
/* #main-content animation merged into primary selector above */
@keyframes pageIn {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── SPEC BAR ─────────────────────────────────────────── */
.spec-bar-section {
  margin: 10px 0;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.spec-bar-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.spec-bar-label span {
  font-family: 'JetBrains Mono', monospace;
  color: #4ac4a0;
}
.spec-bar {
  position: relative;
  height: 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.spec-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a5a4a, #2a9a7a, #4ac4a0);
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(74,196,160,0.3);
}
.spec-segments {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.spec-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,0.5);
  border-left: 1px solid rgba(255,255,255,0.1);
}
.spec-btn {
  width: 100%;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: #4ac4a0;
  background: rgba(74,196,160,0.08);
  border: 1px solid rgba(74,196,160,0.3);
  padding: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.spec-btn:hover:not(:disabled) {
  background: rgba(74,196,160,0.15);
  box-shadow: 0 0 12px rgba(74,196,160,0.2);
  transform: translateY(-1px);
}
.spec-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.spec-no-weapon {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
}

/* ── SKILL CATEGORY TABS ──────────────────────────────── */
.skill-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cat-tab {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  padding: 5px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  letter-spacing: 0.5px;
}
.cat-tab:hover {
  border-color: var(--accent-dim);
  color: var(--text);
  background: var(--bg-card-hover);
}
.cat-tab.cat-active {
  background: rgba(201,135,62,0.12);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(201,135,62,0.15);
}
.cat-header {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 1px;
  padding: 8px 0 4px;
  border-bottom: 1px solid rgba(201,135,62,0.15);
  margin-bottom: 8px;
}
.skill-cat-section {
  margin-bottom: 8px;
}

/* ── ATTACK ANIMATIONS ────────────────────────────────── */
.atk-anim {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  animation: atkFade 0.5s ease-out forwards;
}
.atk-slash {
  width: 80px; height: 80px;
  top: 30%; right: 25%;
}
.atk-arrow {
  width: 100px; height: 40px;
  top: 45%; left: 10%;
}
.atk-spell {
  width: 80px; height: 80px;
  top: 30%; right: 20%;
}
.atk-claw {
  width: 60px; height: 60px;
  top: 25%; left: 20%;
}
@keyframes atkFade {
  0% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Monster shake on hit */
.monster-art.hit-shake {
  animation: monsterShake 0.2s ease-out;
}
@keyframes monsterShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* Player flash on hit */
.player-side.hit-flash {
  animation: playerFlash 0.3s ease-out;
}
@keyframes playerFlash {
  0% { background: rgba(196,64,64,0.2); }
  100% { background: transparent; }
}

/* ── FOOD BAG ─────────────────────────────────────────── */
.food-bag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0;
}
.fb-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.fb-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.fb-clickable:hover { background: rgba(60,50,40,0.6); border-color: var(--accent); }
.fb-clickable:active { transform: scale(0.97); }
.fb-name { flex: 1; color: var(--text); font-family: 'Cinzel', serif; font-size: 11px; }
.fb-qty { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; font-size: 12px; }
.fb-heals { font-family: 'JetBrains Mono', monospace; color: #3a9e5c; font-size: 10px; }

/* Food bag management on equipment page */
.fb-manage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.fb-manage-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  min-height: 36px;
}
.fb-current { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.fb-empty { color: var(--text-dim); font-style: italic; font-size: 12px; }

/* ── FRIENDS ──────────────────────────────────────────── */
.friends-grid { display: flex; flex-direction: column; gap: 4px; }
.friend-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.friend-card:hover { border-color: var(--accent-dim); }
.fc-name { font-family: 'Cinzel', serif; color: var(--text-bright); }
.fc-btns { display: flex; gap: 4px; }

/* ── INBOX V2 ────────────────────────────────────────── */
.inbox-compose {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px;
}
.inbox-compose-title { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); margin: 0 0 10px 0; }
.inbox-compose-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
}
.inbox-compose-field { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 150px; }
.icf-label { font-size: 11px; color: var(--text-dim); font-family: 'Cinzel', serif; white-space: nowrap; }

.inbox-tabs {
  display: flex; gap: 2px; margin-bottom: 12px;
  background: var(--bg-deep); border-radius: var(--radius); padding: 3px; border: 1px solid var(--border);
}
.inbox-tab {
  flex: 1; padding: 8px 12px; background: transparent; border: none; color: var(--text-dim);
  font-family: 'Cinzel', serif; font-size: 12px; cursor: pointer; border-radius: 4px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.inbox-tab:hover { color: var(--text-bright); background: rgba(255,255,255,0.03); }
.inbox-tab-active { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

.inbox-toolbar { display: flex; gap: 6px; margin-top: 12px; }

.inbox-convo-list, .inbox-notif-list, .inbox-blocked-list { display: flex; flex-direction: column; gap: 4px; }

.inbox-convo-v2 {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.inbox-convo-v2:hover { border-color: var(--accent-dim); background: var(--bg-card-hover); }
.icv2-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-deep); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 15px; color: var(--accent); flex-shrink: 0;
}
.icv2-body { flex: 1; min-width: 0; }
.icv2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icv2-name { font-family: 'Cinzel', serif; font-size: 13px; color: var(--accent); }
.icv2-time { font-size: 10px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.icv2-preview { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.icv2-arrow { color: var(--text-dim); font-size: 20px; flex-shrink: 0; }

.inbox-notif-v2 {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px;
}
.inbox-notif-unread { border-left: 3px solid var(--accent); background: rgba(201,135,62,0.04); }
.inot-icon { font-size: 16px; color: var(--accent); flex-shrink: 0; }
.inot-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.inot-from { font-family: 'Cinzel', serif; color: var(--text-bright); font-size: 12px; }
.inot-text { color: var(--text-dim); flex: 1; min-width: 100px; }
.inot-time { font-size: 10px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }

.inbox-blocked-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; color: var(--text);
}

/* ── DM V2 ───────────────────────────────────────────── */
.dm-section { display: flex; flex-direction: column; height: 550px; }
.dm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.dm-header-left { display: flex; align-items: center; gap: 10px; }
.dm-partner-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); }
.dm-header-actions { display: flex; gap: 4px; }
.dm-messages {
  flex: 1; overflow-y: auto; padding: 12px; background: var(--bg-deep);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.dm-input {
  display: flex; gap: 6px; padding: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
.dm-msg-v2 { display: flex; max-width: 80%; }
.dm-mine-v2 { align-self: flex-end; }
.dm-theirs-v2 { align-self: flex-start; }
.dmv2-bubble {
  padding: 8px 12px; border-radius: 12px; font-size: 13px;
}
.dm-mine-v2 .dmv2-bubble {
  background: rgba(201,135,62,0.12); border: 1px solid rgba(201,135,62,0.2);
  border-bottom-right-radius: 4px;
}
.dm-theirs-v2 .dmv2-bubble {
  background: var(--bg-card); border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.dmv2-text { color: var(--text); line-height: 1.5; word-wrap: break-word; }
.dmv2-meta {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 4px;
}
.dmv2-time { font-size: 10px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.dmv2-delete {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 14px; padding: 0; line-height: 1; opacity: 0; transition: opacity 0.15s;
}
.dm-msg-v2:hover .dmv2-delete { opacity: 1; }
.dmv2-delete:hover { color: #c44040; }

/* ── PLAYER COMBAT AVATAR ─────────────────────────────── */
.ca-avatar {
  margin-bottom: 6px;
}
.player-combat-avatar {
  border-radius: 6px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 12px rgba(201,135,62,0.2);
  image-rendering: pixelated;
  background: var(--bg-deep);
}

/* ── GOOGLE SIGN-IN BUTTON ────────────────────────────── */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: #444 !important;
  border: 1px solid #ddd !important;
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.google-btn:hover {
  background: #f7f7f7 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.divider-or {
  text-align: center;
  position: relative;
  margin: 4px 0;
}
.divider-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.divider-or span {
  position: relative;
  background: var(--bg-main);
  padding: 0 12px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* ── LOGO IMAGE ───────────────────────────────────────── */
.landing-logo-img {
  width: 360px;
  max-width: 90vw;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(201,135,62,0.3));
  animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.sidebar-logo-img {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 8px rgba(201,135,62,0.2));
}
.landing-stats {
  display: flex;
  gap: 20px;
  margin: 16px 0;
  flex-wrap: wrap;
  justify-content: center;
}
.ls-col { text-align: center; }
.ls-num { display: block; font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700; color: var(--accent); }
.ls-label { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
.landing-contact { margin-top: 12px; }
.discord-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #7289da; font-family: 'Cinzel', serif; font-size: 13px;
  text-decoration: none; padding: 8px 16px;
  border: 1px solid rgba(114,137,218,0.3); border-radius: 6px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.discord-link:hover { background: rgba(114,137,218,0.1); border-color: #7289da; }

/* ── GUILD V2 ─────────────────────────────────────────── */
.guild-rank {
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(255,255,255,0.06); margin-right: 6px;
}
.rank-select {
  background: var(--bg-deep); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; font-size: 11px; padding: 2px 6px;
  font-family: 'Cinzel', serif; cursor: pointer;
}
.rank-select:hover { border-color: var(--accent-dim); }

.guild-input {
  background: var(--bg-deep); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; font-family: 'Crimson Text', serif;
  font-size: 14px; transition: border-color 0.15s; outline: none;
}
.guild-input:focus { border-color: var(--accent); }
.guild-input::placeholder { color: var(--text-dim); }
.guild-tag-input { width: 80px; text-transform: uppercase; text-align: center; letter-spacing: 2px; font-family: 'Cinzel', serif; }
.guild-textarea {
  background: var(--bg-deep); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; font-family: 'Crimson Text', serif;
  font-size: 14px; width: 100%; resize: vertical; outline: none; transition: border-color 0.15s;
}
.guild-textarea:focus { border-color: var(--accent); }

.guild-header-panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.guild-banner {
  padding: 16px 18px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); background: rgba(201,135,62,0.04);
}
.guild-name-main {
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.5px;
}
.guild-role-badge {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; background: rgba(255,255,255,0.06);
}
.guild-tabs {
  display: flex; gap: 0; overflow-x: auto;
}
.guild-tab {
  padding: 10px 16px; background: transparent; border: none; color: var(--text-dim);
  font-family: 'Cinzel', serif; font-size: 12px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; white-space: nowrap;
}
.guild-tab:hover { color: var(--text-bright); background: rgba(255,255,255,0.02); }
.guild-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
.gt-icon { font-size: 14px; margin-right: 4px; }

.guild-tab-content { min-height: 200px; }

/* Guild Overview */
.guild-overview { display: flex; flex-direction: column; gap: 12px; }
.guild-motd-panel {
  background: rgba(201,135,62,0.06); border: 1px solid rgba(201,135,62,0.15);
  border-radius: var(--radius); padding: 14px;
}
.guild-motd-label { font-family: 'Cinzel', serif; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.guild-motd-text { font-size: 14px; color: var(--text-bright); line-height: 1.5; }
.guild-stats-row { display: flex; gap: 8px; flex-wrap: wrap; }
.guild-stat {
  flex: 1; min-width: 80px; text-align: center; padding: 12px 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.gs-val { display: block; font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; color: var(--accent); }
.gs-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.guild-desc-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.guild-desc-label { font-family: 'Cinzel', serif; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.guild-desc-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.guild-leave-row { display: flex; justify-content: flex-end; }

/* Guild Members */
.guild-invite-row {
  display: flex; gap: 8px; margin-bottom: 12px; align-items: center;
}
.guild-members-grid { display: flex; flex-direction: column; gap: 4px; }
.guild-member-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.guild-member-card:hover { border-color: var(--accent-dim); }
.guild-member-me { border-left: 3px solid var(--accent); }
.gmc-left { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.gmc-online-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.gmc-dot-on { background: #3a9e5c; box-shadow: 0 0 6px rgba(58,158,92,0.5); }
.gmc-dot-off { background: #444; }
.gmc-info { display: flex; flex-direction: column; gap: 2px; }
.gmc-name { font-family: 'Cinzel', serif; font-size: 13px; color: var(--text-bright); }
.gmc-meta { font-size: 11px; color: var(--text-dim); flex: 1; }
.gmc-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; }

/* Guild Bank */
.guild-bank-section { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.guild-bank-balance {
  text-align: center; padding: 20px 32px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); width: 100%; max-width: 300px;
}
.gbb-amount { display: block; font-family: 'Cinzel', serif; font-size: 28px; font-weight: 700; color: var(--accent); }
.gbb-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.guild-bank-info { font-size: 12px; color: var(--text-dim); text-align: center; }
.guild-bank-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn-withdraw { background: rgba(201,135,62,0.15); border-color: rgba(201,135,62,0.3); }
.btn-withdraw:hover { background: rgba(201,135,62,0.25); }
.guild-bank-your-gold { font-size: 12px; color: var(--text-dim); }

/* Guild Log */
.guild-log-list { display: flex; flex-direction: column; gap: 3px; }
.guild-sub-title { font-family: 'Cinzel', serif; font-size: 14px; color: var(--text-bright); margin: 16px 0 8px 0; }
.guild-log-entry {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px;
}
.gle-icon { font-size: 14px; color: var(--text-dim); flex-shrink: 0; width: 20px; text-align: center; }
.gle-text { flex: 1; color: var(--text); }
.gle-time { font-size: 10px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.gle-deposit .gle-icon { color: #3a9e5c; }
.gle-withdraw .gle-icon { color: #c44040; }

/* Guild Settings */
.guild-settings-grid { display: flex; flex-direction: column; gap: 12px; }
.guild-setting-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px;
}
.guild-setting-card h4 { font-family: 'Cinzel', serif; font-size: 13px; color: var(--accent); margin: 0 0 8px 0; }

/* Guild Join / Browse */
.guild-join-section { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.guild-join-panel {
  flex: 1; min-width: 260px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.guild-join-title { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); margin: 0 0 6px 0; }
.guild-join-desc { font-size: 12px; color: var(--text-dim); margin: 0 0 10px 0; }
.guild-join-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.guild-browse-section { margin-top: 8px; }
.guild-search-row { margin-bottom: 12px; }
.guild-browse-grid { display: flex; flex-direction: column; gap: 6px; }
.guild-browse-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.gbc-top { display: flex; align-items: center; gap: 6px; min-width: 180px; }
.gbc-tag { font-family: 'Cinzel', serif; font-size: 12px; color: var(--accent); font-weight: 700; }
.gbc-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--text-bright); }
.gbc-info { display: flex; gap: 12px; flex: 1; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.gbc-type {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px;
  border-radius: 3px; background: rgba(58,158,92,0.15); color: #3a9e5c;
}
.gbc-invite { background: rgba(196,64,64,0.15); color: #c44040; }

/* Guild Invite Banner */
.guild-invite-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 8px;
  background: rgba(201,135,62,0.08); border: 1px solid rgba(201,135,62,0.2);
  border-radius: var(--radius);
}
.gi-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gi-tag { font-family: 'Cinzel', serif; font-size: 12px; color: var(--accent); font-weight: 700; }
.gi-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--text-bright); }
.gi-from { font-size: 11px; color: var(--text-dim); }
.gi-btns { display: flex; gap: 4px; }

/* Guild Chat container */
.guild-chat-container {
  display: flex; flex-direction: column; height: 450px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}

/* Guild Item Bank */
.guild-item-bank-controls {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center;
}
.guild-item-bank-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px;
  margin-bottom: 16px;
}
.guild-bank-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px;
}
.gbi-name { flex: 1; font-family: 'Cinzel', serif; font-size: 12px; }
.gbi-qty { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-size: 11px; }

/* Admin Remote Modification */
.adm-remote-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px;
}
.adm-remote-card {
  background: rgba(30,25,20,0.5); border: 1px solid rgba(80,70,60,0.3);
  border-radius: 6px; padding: 10px;
}
.adm-rc-label {
  display: block; font-family: 'Cinzel', serif; font-size: 11px;
  color: var(--accent); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Gift dim button */
.btn-dim { opacity: 0.5; }

/* ================================================================
   v8.9 VISUAL OVERHAUL - Chat, Skill Art, Monster Drops, Loot Bag
   ================================================================ */

/* ── ACTION CARD ART ──────────────────────────────────── */
.ac-art {
  width: 48px;
  height: 48px;
  margin: 0 auto 4px;
  border-radius: 6px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-art svg { width: 44px; height: 44px; }
/* Only center content when a card has art */
.action-card:has(.ac-art) { text-align: center; }

/* ── MONSTER DROP PREVIEW ─────────────────────────────── */
.mb-drops {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
}
.md-drop {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  padding: 1px 4px;
  border-radius: 2px;
}
.md-drop small { color: var(--accent); margin-left: 2px; }
.mb-tables {
  font-size: 8px;
  color: var(--accent-dim);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
  display: block;
}

/* ── GLOBAL CHAT OVERHAUL ─────────────────────────────── */
.gchat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  max-height: 700px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-deep);
}
.gchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
  border-bottom: 1px solid var(--border);
}
.gchat-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 1px;
}
.gchat-user { display: flex; align-items: center; gap: 6px; }
.gchat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a9e5c;
  box-shadow: 0 0 6px rgba(58,158,92,0.4);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.gchat-uname { font-family: 'Cinzel', serif; font-size: 13px; color: var(--text-bright); }
.gchat-ulevel { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); }

/* Chat channel tabs */
.gchat-channels {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); background: rgba(10,11,15,0.5);
}
.gchat-ch-tab {
  padding: 8px 16px; background: transparent; border: none; color: var(--text-dim);
  font-family: 'Cinzel', serif; font-size: 12px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.gchat-ch-tab:hover { color: var(--text-bright); }
.gchat-ch-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Chat hint */
.gchat-hint {
  font-size: 10px; color: var(--text-dim); padding: 2px 12px;
  font-family: 'JetBrains Mono', monospace;
}

/* Chat emote */
.gchat-emote {
  padding: 4px 10px; font-size: 13px; color: var(--text-dim); font-style: italic;
}
.gchat-emote-name { color: var(--accent); font-style: normal; font-family: 'Cinzel', serif; font-size: 12px; }

/* Chat item links */
.gchat-item-link {
  font-family: 'Cinzel', serif; font-weight: 600; cursor: default;
  border-bottom: 1px dotted currentColor;
}

/* Player popup */
.gchat-player-popup {
  position: fixed; z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--accent-dim);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5); min-width: 160px;
}
.gpp-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); font-weight: 700; }
.gpp-level { font-size: 11px; color: var(--text-dim); }
.gpp-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.gpp-close {
  position: absolute; top: 4px; right: 8px; background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 16px;
}
.gpp-close:hover { color: var(--text); }

.gchat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-main);
}
.gchat-msg {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s;
  animation: msgIn 0.2s ease-out;
}
.gchat-msg:hover { background: rgba(255,255,255,0.02); }
@keyframes msgIn {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.gchat-mine { background: rgba(201,135,62,0.04); }
.gchat-admin { background: rgba(212,168,58,0.06); border-left: 2px solid #d4a83a; }

.gchat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--bg-deep);
  flex-shrink: 0;
}
.gchat-admin .gchat-avatar {
  background: linear-gradient(135deg, #c44040, #d4a83a);
}
.gchat-body { flex: 1; min-width: 0; }
.gchat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.gchat-name { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text-bright); }
.gchat-name-me { color: var(--accent); }
.gchat-lvl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); }
.gchat-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); margin-left: auto; }
.gchat-text { font-size: 13px; color: var(--text); line-height: 1.5; word-wrap: break-word; }
.gchat-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: #d4a83a;
  background: rgba(212,168,58,0.15);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.gchat-sys {
  text-align: center;
  padding: 6px;
  font-size: 11px;
  color: var(--accent-dim);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}
.gchat-sys-icon { color: var(--accent); margin-right: 4px; }

.gchat-input-area {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.gchat-admin-bar {
  padding: 4px 12px;
  font-size: 10px;
  color: #d4a83a;
  background: rgba(212,168,58,0.06);
  border-bottom: 1px solid rgba(212,168,58,0.1);
}
.gchat-admin-tag {
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 4px;
  background: rgba(212,168,58,0.15);
  border-radius: 3px;
  margin-right: 6px;
}
.gchat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
}
.gchat-input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Crimson Text', serif;
  outline: none;
  transition: border-color 0.2s;
}
.gchat-input:focus { border-color: var(--accent); }
.gchat-input::placeholder { color: var(--text-dim); }
.gchat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201,135,62,0.1);
  border: 1px solid var(--accent-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.gchat-send:hover {
  background: rgba(201,135,62,0.2);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(201,135,62,0.2);
}

/* ── LOOT BAG ─────────────────────────────────────────── */
.loot-bag {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(201,135,62,0.05);
  border: 1px solid rgba(201,135,62,0.15);
  border-radius: 6px;
  animation: lootBagIn 0.3s ease-out;
}
@keyframes lootBagIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.loot-bag-title {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.loot-bag-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.loot-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  animation: lootItemPop 0.3s ease-out;
}
@keyframes lootItemPop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.loot-item-name { color: var(--text); }
.loot-item-qty { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; }
.loot-item-rare { border-color: rgba(74,144,212,0.4); background: rgba(74,144,212,0.06); }
.loot-item-epic { border-color: rgba(138,94,196,0.4); background: rgba(138,94,196,0.06); }
.loot-item-legendary { border-color: rgba(212,168,58,0.4); background: rgba(212,168,58,0.06); }

/* ── ORE BAG ──────────────────────────────────────────── */
.ore-bag-section {
  background: rgba(201,135,62,0.04);
  border: 1px solid rgba(201,135,62,0.15);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 12px;
}
.ob-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ob-title { font-family: 'Cinzel', serif; font-size: 14px; color: var(--accent); }
.ob-capacity { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); margin-left: auto; }
.ob-bar {
  height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; margin-bottom: 6px;
}
.ob-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 3px;
  transition: width 0.3s; box-shadow: 0 0 4px rgba(201,135,62,0.3);
}
.ob-contents { display: flex; flex-wrap: wrap; gap: 4px; }
.ob-ore {
  display: flex; align-items: center; gap: 4px; padding: 3px 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; font-size: 11px;
}
.ob-ore-name { color: var(--text); }
.ob-ore-qty { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; }
.ob-empty { font-size: 11px; color: var(--text-dim); font-style: italic; }
.ob-stats {
  display: flex; gap: 12px; margin-top: 6px; font-size: 10px; color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* ── MINING EVENT POPUP ───────────────────────────────── */
.mining-event {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--bg-elevated); border: 2px solid var(--accent);
  border-radius: 8px; padding: 20px; z-index: 100;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  animation: eventPop 0.3s ease-out;
  text-align: center; max-width: 300px;
}
@keyframes eventPop {
  0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.me-art { width: 64px; height: 64px; margin: 0 auto 8px; }
.me-title { font-family: 'Cinzel', serif; font-size: 16px; color: var(--accent); margin-bottom: 4px; }
.me-desc { font-size: 12px; color: var(--text); }

/* ── DODGE SPLAT ──────────────────────────────────────── */
.splat-dodge {
  background: rgba(96,192,224,0.3);
  color: #60c0e0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-style: italic;
}

/* ── SESSION LOOT BAG ─────────────────────────────────── */
.session-loot-section {
  background: linear-gradient(135deg, rgba(201,135,62,0.04), rgba(201,135,62,0.02));
  border: 1px solid rgba(201,135,62,0.20);
  border-radius: var(--radius);
  padding: 10px;
  margin-top: 10px;
}
.sl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sl-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.5px;
}
.sl-kills {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(201,135,62,0.10);
  padding: 2px 8px;
  border-radius: 10px;
}
.sl-items {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.sl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.sl-item:hover { border-color: var(--accent-dim); }
.sl-name { color: var(--text); }
.sl-qty { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; }
.sl-gold { border-color: rgba(212,168,58,0.3); }
.sl-gold .sl-name { color: #d4a83a; }
.sl-gold .sl-qty { color: #d4a83a; }
.sl-rare { border-color: rgba(74,144,212,0.3); }
.sl-rare .sl-name { color: #6ab4e8; }
.sl-epic { border-color: rgba(138,94,196,0.3); }
.sl-epic .sl-name { color: #b585e0; }
.sl-legendary { border-color: rgba(212,168,58,0.4); }
.sl-legendary .sl-name { color: #d4a83a; }
.sl-empty { font-size: 11px; color: var(--text-dim); font-style: italic; text-align: center; padding: 8px; }

/* ── LOOT FLASH (per-kill notification) ───────────────── */
.loot-flash {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
  z-index: 50;
  animation: lootFlashIn 0.3s ease-out;
}
@keyframes lootFlashIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.lf-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4abe6c;
  background: rgba(10,11,15,0.85);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(74,190,108,0.3);
  white-space: nowrap;
  animation: lootFlashPop 0.4s ease-out;
}
@keyframes lootFlashPop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── MONSTER ATTACK ANIMATIONS ────────────────────────── */
.atk-fireball { width: 80px; height: 80px; top: 25%; left: 15%; }
.atk-iceblast { width: 80px; height: 80px; top: 20%; left: 20%; }
.atk-poison   { width: 70px; height: 70px; top: 15%; left: 18%; }
.atk-darkbolt { width: 80px; height: 80px; top: 25%; left: 12%; }
.atk-bite     { width: 60px; height: 60px; top: 30%; left: 22%; }
.atk-slam     { width: 80px; height: 80px; top: 20%; left: 15%; }
.atk-volley   { width: 80px; height: 60px; top: 35%; left: 10%; }
.atk-tentacle { width: 70px; height: 70px; top: 25%; left: 15%; }
.atk-bonestrike { width: 60px; height: 60px; top: 25%; left: 22%; }
.atk-swordstrike { width: 70px; height: 70px; top: 20%; left: 18%; }

/* Player status effect display */
.player-status-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.pse-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  animation: statusPulse 1.5s ease-in-out infinite;
}
.pse-burn   { background: rgba(255,64,0,0.15); border-color: rgba(255,64,0,0.3); color: #ff6030; }
.pse-poison { background: rgba(74,190,108,0.15); border-color: rgba(74,190,108,0.3); color: #4abe6c; }
.pse-freeze { background: rgba(96,192,224,0.15); border-color: rgba(96,192,224,0.3); color: #60c0e0; }
.pse-bleed  { background: rgba(196,112,112,0.15); border-color: rgba(196,112,112,0.3); color: #c47070; }
.pse-curse  { background: rgba(138,94,196,0.15); border-color: rgba(138,94,196,0.3); color: #b585e0; }
.pse-shock  { background: rgba(224,224,64,0.15); border-color: rgba(224,224,64,0.3); color: #e0e040; }

/* ============================================================
   FIGHT CAVE STYLES
   ============================================================ */

.fight-cave-page { max-width:800px; margin:0 auto; padding:1rem; }

.fc-header { text-align:center; margin-bottom:1.5rem; padding:1.5rem; background:linear-gradient(135deg, rgba(180,60,20,0.15), rgba(60,20,10,0.2)); border:1px solid rgba(180,60,20,0.3); border-radius:8px; }
.fc-title { font-size:1.8rem; color:#e8a040; margin:0 0 0.5rem 0; font-family:'Cinzel',serif; letter-spacing:2px; }
.fc-title .icon { vertical-align:middle; margin-right:8px; }
.fc-subtitle { color:#b0a090; margin:0; font-size:0.95rem; }

.fc-requirements { margin-bottom:1rem; padding:1rem; background:rgba(30,25,20,0.5); border:1px solid rgba(80,70,60,0.3); border-radius:6px; }
.fc-req-row { padding:4px 0; font-size:0.9rem; }
.fc-req-met { color:#4abe6c; }
.fc-req-unmet { color:#e74c3c; }

.fc-reward-card { margin-bottom:1rem; padding:1rem; background:linear-gradient(135deg, rgba(200,100,30,0.1), rgba(180,60,20,0.15)); border:1px solid rgba(200,100,30,0.4); border-radius:6px; text-align:center; }
.fc-reward-stats { font-size:0.95rem; color:#e8a040; font-weight:bold; margin:0.5rem 0; }
.fc-reward-desc { color:#b0a090; font-size:0.85rem; margin:0; font-style:italic; }

.fc-phases { margin-bottom:1rem; padding:1rem; background:rgba(30,25,20,0.5); border:1px solid rgba(80,70,60,0.3); border-radius:6px; }
.fc-phase-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid rgba(60,50,40,0.3); align-items:center; flex-wrap:wrap; }
.fc-phase-row:last-child { border-bottom:none; }
.fc-phase-waves { font-weight:bold; color:#e8a040; min-width:60px; font-size:0.85rem; }
.fc-phase-name { color:#d4c4a0; font-weight:bold; min-width:120px; font-size:0.9rem; }
.fc-phase-tip { color:#908070; font-size:0.82rem; flex:1; }

.fc-bestiary { margin-bottom:1rem; }
.fc-monster-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:8px; }
.fc-monster-card { padding:10px; background:rgba(30,25,20,0.6); border:1px solid rgba(80,70,60,0.3); border-radius:6px; }
.fc-mon-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.fc-mon-name { font-weight:bold; color:#d4c4a0; font-size:0.9rem; }
.fc-mon-level { font-size:0.78rem; font-weight:bold; }
.fc-mon-stats { font-size:0.8rem; color:#908070; margin-bottom:4px; }
.fc-mon-desc { font-size:0.78rem; color:#807060; margin:0; }

.fc-stats { margin-bottom:1rem; padding:1rem; background:rgba(30,25,20,0.5); border:1px solid rgba(80,70,60,0.3); border-radius:6px; }
.fc-stat-row { padding:2px 0; font-size:0.9rem; color:#b0a090; }

.fc-warning { margin-bottom:1rem; padding:1rem; background:rgba(180,40,20,0.1); border:1px solid rgba(180,40,20,0.3); border-radius:6px; text-align:center; }
.fc-warning p { margin:0.3rem 0; font-size:0.85rem; color:#c08060; }

.fc-enter { text-align:center; margin-bottom:2rem; }
.fc-enter .btn-lg { font-size:1.1rem; padding:12px 32px; font-family:'Cinzel',serif; letter-spacing:1px; }

/* ── ACTIVE FIGHT CAVE ──────────────────────────────────── */
.fight-cave-active { max-width:800px; margin:0 auto; padding:0.5rem; }

.fc-wave-bar { margin-bottom:0.8rem; }
.fc-wave-label { font-size:1.1rem; font-weight:bold; color:#e8a040; margin-bottom:4px; font-family:'Cinzel',serif; }
.fc-progress-track { height:8px; background:rgba(40,35,30,0.8); border-radius:4px; overflow:hidden; border:1px solid rgba(80,70,60,0.3); }
.fc-progress-fill { height:100%; background:linear-gradient(90deg, #b85c20, #e8a040); transition:width 0.3s; border-radius:4px; }

.fc-phase-indicator { display:flex; gap:8px; align-items:center; margin-bottom:0.6rem; flex-wrap:wrap; }
.fc-phase-badge { background:rgba(200,100,30,0.2); color:#e8a040; padding:3px 10px; border-radius:4px; font-size:0.8rem; font-weight:bold; border:1px solid rgba(200,100,30,0.3); }
.fc-phase-advice { color:#908070; font-size:0.8rem; }

.fc-between-waves { text-align:center; padding:2rem; background:rgba(30,25,20,0.6); border:1px solid rgba(80,70,60,0.3); border-radius:8px; }
.fc-between-waves h2 { color:#4abe6c; margin:0 0 0.5rem 0; }
.fc-between-tip { color:#e8a040; font-weight:bold; margin:0.5rem 0; }
.fc-manual-actions { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:0.8rem; }

.fc-player-status { display:flex; gap:12px; margin-bottom:0.6rem; flex-wrap:wrap; align-items:center; }
.fc-stat-bar { flex:1; min-width:150px; }
.fc-bar-label { font-size:0.8rem; color:#b0a090; display:block; margin-bottom:2px; }
.fc-bar-track { height:14px; background:rgba(40,35,30,0.8); border-radius:3px; overflow:hidden; border:1px solid rgba(80,70,60,0.3); position:relative; }
.fc-bar-fill { height:100%; transition:width 0.2s; border-radius:3px; }
.fc-hp-fill { background:linear-gradient(90deg, #c04040, #40b040); }
.fc-pp-fill { background:linear-gradient(90deg, #3060c0, #60c0e0); }

.fc-active-prayers { display:flex; gap:4px; flex-wrap:wrap; }
.fc-prayer-active { background:rgba(60,180,220,0.15); color:#60c0e0; padding:2px 8px; border-radius:3px; font-size:0.75rem; border:1px solid rgba(60,180,220,0.3); }
.fc-no-prayer { color:#705040; font-size:0.75rem; font-style:italic; }

.fc-supply-bar { display:flex; gap:12px; margin-bottom:0.6rem; flex-wrap:wrap; padding:6px; background:rgba(30,25,20,0.4); border-radius:4px; }
.fc-supply-section { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.fc-supply-label { color:#908070; font-size:0.78rem; font-weight:bold; }
.fc-supply-item { background:rgba(60,50,40,0.5); color:#d4c4a0; padding:2px 6px; border-radius:3px; font-size:0.75rem; border:1px solid rgba(80,70,60,0.3); }
.fc-supply-empty { color:#504030; font-size:0.75rem; }
.fc-potion-btn { cursor:pointer; }
.fc-potion-btn:hover { background:rgba(80,70,50,0.6); }

.fc-monster-display { padding:10px; background:rgba(40,30,25,0.6); border:1px solid rgba(100,80,60,0.3); border-radius:6px; margin-bottom:0.6rem; }
.fc-jad-display { background:linear-gradient(135deg, rgba(180,40,20,0.15), rgba(60,20,10,0.3)); border-color:rgba(180,60,20,0.5); }
.fc-mon-current-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.fc-mon-current-name { font-weight:bold; color:#d4c4a0; font-size:1rem; }
.fc-mon-current-style { font-size:0.8rem; font-weight:bold; text-transform:uppercase; }
.fc-mon-current-level { color:#908070; font-size:0.8rem; }
.fc-mon-hp-bar { margin-top:4px; }
.fc-monster-fill { background:linear-gradient(90deg, #c04040, #e06030); }

.fc-wave-queue { margin-bottom:0.6rem; }
.fc-queue-label { font-size:0.8rem; color:#908070; font-weight:bold; margin-bottom:4px; display:block; }
.fc-queue-list { display:flex; gap:4px; flex-wrap:wrap; }
.fc-queue-monster { padding:3px 8px; border-radius:3px; font-size:0.75rem; color:#b0a090; background:rgba(40,35,30,0.5); border:1px solid rgba(80,70,60,0.3); border-left:3px solid; }
.fc-queue-current { color:#e8a040; font-weight:bold; background:rgba(60,50,40,0.6); }

.fc-prayer-hint { margin-bottom:0.6rem; }
.fc-hint-danger { background:rgba(200,50,50,0.15); border:1px solid rgba(200,50,50,0.3); color:#e08060; padding:6px 10px; border-radius:4px; font-size:0.85rem; font-weight:bold; text-align:center; animation:fc-pulse 1.5s ease-in-out infinite; }
.fc-hint-warn { background:rgba(200,150,50,0.15); border:1px solid rgba(200,150,50,0.3); color:#e0b060; padding:6px 10px; border-radius:4px; font-size:0.85rem; font-weight:bold; text-align:center; }

@keyframes fc-pulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.7; }
}

.fc-prayer-toggles { display:flex; gap:6px; align-items:center; margin-bottom:0.6rem; flex-wrap:wrap; }
.fc-prayer-label { font-size:0.8rem; color:#908070; font-weight:bold; }
.btn-active-prayer { background:rgba(60,180,220,0.2) !important; border-color:rgba(60,180,220,0.5) !important; color:#60c0e0 !important; }

.fc-flee { text-align:center; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(60,50,40,0.3); }

/* ── JAD BOSS PANEL ─────────────────────────────────────── */
.fc-jad-panel { margin-top:0.8rem; }

.fc-jad-telegraph { margin-bottom:0.8rem; }

.fc-jad-charging { padding:12px; background:rgba(40,30,25,0.5); border:1px solid rgba(80,60,40,0.3); border-radius:6px; text-align:center; }
.fc-jad-charge-label { color:#c09060; font-size:0.9rem; margin-bottom:6px; }
.fc-jad-charge-track { height:10px; }
.fc-jad-charge-fill { background:linear-gradient(90deg, #604020, #e08030); }

.fc-jad-telegraph-alert { padding:16px; border:2px solid; border-radius:8px; text-align:center; animation:fc-telegraph-flash 0.4s ease-in-out 3; }
.fc-jad-telegraph-icon { font-size:2.5rem; margin-bottom:4px; }
.fc-jad-telegraph-style { font-size:1.4rem; font-weight:bold; font-family:'Cinzel',serif; letter-spacing:3px; }
.fc-jad-telegraph-desc { font-size:0.85rem; color:#b0a090; margin-top:4px; }

@keyframes fc-telegraph-flash {
  0%, 100% { opacity:1; }
  50% { opacity:0.5; }
}

.fc-jad-input-window { margin-top:8px; text-align:center; }
.fc-jad-timer-label { font-size:1.1rem; font-weight:bold; color:#e74c3c; margin-bottom:4px; animation:fc-pulse 0.5s ease-in-out infinite; }
.fc-jad-timer-track { height:8px; }
.fc-jad-timer-fill { background:linear-gradient(90deg, #e74c3c, #e8a040); }

.fc-jad-prayer-buttons { display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.fc-jad-pray-btn { display:flex; flex-direction:column; align-items:center; padding:12px 18px; border:2px solid rgba(100,80,60,0.4); border-radius:8px; background:rgba(40,35,30,0.7); cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; min-width:100px; color:#d4c4a0; font-size:0.85rem; }
.fc-jad-pray-btn:hover { transform:scale(1.05); }
.fc-jad-pray-btn:active { transform:scale(0.95); }
.fc-pray-icon { font-size:1.8rem; margin-bottom:4px; }
.fc-pray-text { font-weight:bold; font-size:0.8rem; }

.fc-pray-melee { border-color:rgba(231,76,60,0.4); }
.fc-pray-melee:hover { background:rgba(231,76,60,0.15); border-color:rgba(231,76,60,0.7); }
.fc-pray-ranged { border-color:rgba(230,126,34,0.4); }
.fc-pray-ranged:hover { background:rgba(230,126,34,0.15); border-color:rgba(230,126,34,0.7); }
.fc-pray-magic { border-color:rgba(52,152,219,0.4); }
.fc-pray-magic:hover { background:rgba(52,152,219,0.15); border-color:rgba(52,152,219,0.7); }

.fc-jad-resolving { padding:10px; text-align:center; }
.fc-jad-resolve-text { color:#908070; font-size:0.85rem; }

/* ── JAD HEALERS ────────────────────────────────────────── */
.fc-jad-healers { margin-top:0.8rem; padding:10px; background:rgba(40,30,25,0.5); border:1px solid rgba(180,60,20,0.3); border-radius:6px; }
.fc-healer-title { color:#e08060; font-size:0.9rem; margin:0 0 8px 0; }
.fc-healer-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:6px; }
.fc-healer-card { padding:8px; border-radius:4px; text-align:center; }
.fc-healer-healing { background:rgba(200,50,50,0.1); border:1px solid rgba(200,50,50,0.3); }
.fc-healer-tagged { background:rgba(60,180,100,0.1); border:1px solid rgba(60,180,100,0.3); }
.fc-healer-label { font-weight:bold; color:#d4c4a0; font-size:0.8rem; }
.fc-healer-status { font-size:0.7rem; font-weight:bold; margin:2px 0; }
.fc-healer-healing .fc-healer-status { color:#e74c3c; }
.fc-healer-tagged .fc-healer-status { color:#4abe6c; }
.fc-healer-hp-track { height:6px; margin:4px 0; }
.fc-healer-hp-fill { background:#c04040; }
.fc-healer-hp { font-size:0.7rem; color:#908070; }

/* ── MOBILE RESPONSIVE ──────────────────────────────────── */
@media (max-width:600px) {
  .fc-monster-grid { grid-template-columns:1fr; }
  .fc-jad-prayer-buttons { flex-direction:row; }
  .fc-jad-pray-btn { flex:1; min-width:80px; padding:10px 8px; }
  .fc-healer-grid { grid-template-columns:repeat(2,1fr); }
  .fc-phase-row { flex-direction:column; gap:2px; }
  .fc-supply-bar { flex-direction:column; }
}

/* ── FIGHT CAVE MONSTER ART ─────────────────────────────── */
.fc-mon-art { width:48px; height:48px; margin:0 auto 6px; }
.fc-mon-art svg { width:48px; height:48px; }
.fc-combat-art { width:80px; height:80px; margin:0 auto 8px; }
.fc-combat-art svg { width:80px; height:80px; }
.fc-jad-display .fc-combat-art { width:120px; height:120px; }
.fc-jad-display .fc-combat-art svg { width:120px; height:120px; }
.fc-monster-card { text-align:center; }

/* ── FIGHT CAVE TARGET SELECTION ────────────────────────── */
.fc-wave-monsters { margin-bottom:0.6rem; }
.fc-target-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:6px; margin-top:4px; }
.fc-target-card { padding:8px; background:rgba(40,35,30,0.5); border:2px solid rgba(80,70,60,0.3); border-radius:6px; cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; text-align:center; }
.fc-target-card:hover { background:rgba(60,50,40,0.6); transform:scale(1.02); }
.fc-target-active { background:rgba(200,100,30,0.15) !important; border-width:2px !important; }
.fc-target-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.fc-target-name { font-weight:bold; color:#d4c4a0; font-size:0.8rem; }
.fc-target-style { font-size:0.7rem; font-weight:bold; text-transform:uppercase; }
.fc-target-hp-track { height:6px; margin:3px 0; }
.fc-target-hp { font-size:0.7rem; color:#908070; }
.fc-target-fighting { font-size:0.7rem; font-weight:bold; color:#e8a040; margin-top:2px; }
.fc-target-switch { font-size:0.65rem; color:#706050; margin-top:2px; }
@media (max-width:600px) { .fc-target-grid { grid-template-columns:repeat(2,1fr); } }

/* ── BANK SEARCH BAR ────────────────────────────────────── */
.bank-search-bar { display:flex; gap:6px; align-items:center; margin-bottom:8px; padding:0 4px; }
.bank-search-input { flex:1; padding:8px 12px; background:var(--bg-deep); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:'Crimson Text',serif; font-size:14px; outline:none; transition:border-color 0.2s; }
.bank-search-input:focus { border-color:var(--accent); }
.bank-search-input::placeholder { color:rgba(180,160,140,0.4); }
.bank-search-clear { font-size:14px; padding:4px 8px; }
.bank-tab-count { font-size:0.7rem; opacity:0.6; margin-left:2px; }

/* ── ADMIN PANEL ─────────────────────────────────────────── */
.admin-panel { max-width:900px; margin:0 auto; padding:1rem; }
.admin-header-bar { background:linear-gradient(135deg,#180808,#280a0a); border:1px solid #802020; border-radius:8px; padding:14px 18px; margin-bottom:12px; }
.ahb-title { font-family:'Cinzel',serif; font-size:20px; color:#e04040; font-weight:700; margin-bottom:2px; }
.ahb-sub { font-size:11px; color:#804040; font-family:'JetBrains Mono',monospace; }

.admin-tabs { display:flex; flex-wrap:wrap; gap:2px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.admin-tab { background:none; border:none; border-bottom:2px solid transparent; color:#908070; padding:7px 12px; cursor:pointer; font-size:12px; font-family:inherit; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s; }
.admin-tab.active { border-bottom-color:#c44040; color:#e04040; font-weight:600; }
.admin-tab:hover { color:#d4c4a0; }

.adm-section { margin-bottom:16px; padding:12px; background:rgba(30,25,20,0.5); border:1px solid rgba(80,70,60,0.3); border-radius:6px; }
.adm-section h3 { margin:0 0 8px 0; font-size:14px; color:#c9873e; font-family:'Cinzel',serif; }

.adm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:6px; }
.adm-stat { font-size:12px; color:#b0a090; padding:4px 0; }
.adm-stat strong { color:#d4c4a0; }

.adm-btn-grid { display:flex; flex-wrap:wrap; gap:6px; }
.adm-row-flex { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.adm-item-list { max-height:400px; overflow-y:auto; margin-top:8px; }
.adm-item-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-bottom:1px solid rgba(60,50,40,0.2); font-size:12px; }
.adm-item-row:hover { background:rgba(60,50,40,0.3); }
.adm-item-name { flex:1; color:#d4c4a0; font-weight:bold; }
.adm-item-id { color:#706050; font-family:'JetBrains Mono',monospace; font-size:10px; min-width:120px; }
.adm-item-qty { color:#c9873e; font-family:'JetBrains Mono',monospace; font-size:11px; min-width:40px; }

.adm-skill-grid { display:flex; flex-direction:column; gap:4px; }
.adm-skill-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-bottom:1px solid rgba(60,50,40,0.2); font-size:12px; }
.adm-skill-row:hover { background:rgba(60,50,40,0.3); }
.adm-sk-name { min-width:100px; color:#d4c4a0; font-weight:bold; }
.adm-sk-level { min-width:50px; color:#c9873e; }
.adm-sk-xp { min-width:90px; color:#908070; font-family:'JetBrains Mono',monospace; font-size:10px; }

.adm-quest-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-bottom:1px solid rgba(60,50,40,0.2); font-size:12px; }
.adm-q-done { opacity:0.5; }
.adm-q-active { color:#c9873e; }
.adm-q-status { font-size:14px; min-width:16px; }
.adm-q-name { flex:1; color:#d4c4a0; }
.adm-q-id { color:#706050; font-family:'JetBrains Mono',monospace; font-size:10px; }

.adm-mon-grid { display:flex; flex-direction:column; gap:6px; }
.adm-mon-card { display:flex; align-items:center; gap:10px; padding:8px; background:rgba(40,35,30,0.4); border:1px solid rgba(80,70,60,0.2); border-radius:4px; }
.adm-mon-thumb { width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:4px; background:rgba(20,15,10,0.5); }
.adm-mon-thumb img, .adm-mon-thumb svg { width:100%; height:100%; object-fit:contain; }
.adm-mon-info { flex:1; min-width:0; }
.adm-mon-actions { display:flex; gap:4px; flex-shrink:0; }
.adm-mon-name { font-weight:bold; color:#d4c4a0; font-size:13px; }
.adm-mon-name small { color:#706050; font-weight:normal; }
.adm-mon-stats { font-size:11px; color:#908070; margin:2px 0; font-family:'JetBrains Mono',monospace; }
.adm-mon-drops { font-size:10px; color:#706050; margin-top:2px; }
.adm-mon-no-art { color:#504030; font-size:18px; }
.adm-mon-preview-large { width:180px; height:180px; background:rgba(20,15,10,0.6); border:1px solid rgba(80,70,60,0.3); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:10px; }
.adm-mon-preview-large img, .adm-mon-preview-large svg { max-width:100%; max-height:100%; object-fit:contain; }
.adm-mon-no-art-lg { color:#504030; font-size:28px; }
.adm-badge-img { font-size:9px; padding:1px 5px; background:#2a4a2a; color:#4ae04a; border-radius:10px; margin-left:4px; }
.adm-badge-svg { font-size:9px; padding:1px 5px; background:#2a3a4a; color:#4a9ed4; border-radius:10px; margin-left:4px; }
.adm-img-upload-area { padding:10px; background:rgba(20,15,10,0.4); border:1px dashed rgba(80,70,60,0.4); border-radius:6px; }
.adm-img-status { margin-top:6px; font-size:12px; color:#c9873e; min-height:16px; }
.adm-img-hint { margin-top:6px; font-size:10px; color:#605040; }
.adm-img-note { font-size:11px; color:#4a9ed4; align-self:center; }
.adm-edit-grid { display:grid; grid-template-columns:140px 1fr; gap:6px 12px; align-items:center; }
.adm-edit-grid label { font-size:12px; color:#908070; text-align:right; padding-right:6px; }
.adm-drop-list { display:flex; flex-direction:column; gap:4px; max-height:250px; overflow-y:auto; margin-bottom:8px; }
.adm-drop-row { display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(30,25,20,0.4); border-radius:3px; font-size:12px; color:#b0a090; }
.adm-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; }
.adm-modal { background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:20px; min-width:320px; max-width:480px; }
.adm-modal h4 { margin:0 0 12px; color:var(--accent); font-family:'Cinzel',serif; }
.monster-art-img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:crisp-edges; }

.adm-state-output { background:rgba(20,18,15,0.8); border:1px solid rgba(60,50,40,0.3); border-radius:4px; padding:10px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#b0a090; max-height:300px; overflow:auto; white-space:pre-wrap; word-break:break-all; margin-top:8px; }

/* ── ADMIN v3.0 ADDITIONS ── */
.ahb-ver { font-size:11px; color:var(--text-dim); margin-left:6px; font-family:'JetBrains Mono',monospace; }
.adm-col-flex { display:flex; flex-direction:column; gap:6px; }
.adm-dashboard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-bottom:14px; }
.adm-kpi { background:rgba(40,30,20,0.6); border:1px solid rgba(100,80,50,0.3); border-radius:8px; padding:10px; text-align:center; }
.adm-kpi-val { font-size:20px; font-weight:700; color:var(--accent); font-family:'Cinzel',serif; }
.adm-kpi-lbl { font-size:10px; color:var(--text-dim); margin-top:2px; text-transform:uppercase; letter-spacing:0.5px; }
.adm-dash-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.adm-dash-half { margin-bottom:0 !important; }

/* Player table */
.adm-player-table { display:flex; flex-direction:column; gap:2px; }
.adm-pt-header { display:grid; grid-template-columns:2fr 1.5fr 50px 50px 60px 1fr; gap:8px; padding:4px 8px; font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
.adm-pt-row { display:grid; grid-template-columns:2fr 1.5fr 50px 50px 60px 1fr; gap:8px; align-items:center; padding:4px 8px; border-bottom:1px solid rgba(60,50,40,0.15); font-size:12px; }
.adm-pt-row:hover { background:rgba(60,50,40,0.25); }
.adm-pt-me { border-left:2px solid var(--accent); }
.adm-pt-btns { display:flex; gap:4px; flex-wrap:wrap; }

/* Item edit layout */
.adm-item-edit-layout { display:grid; grid-template-columns:180px 1fr; gap:16px; }
.adm-item-preview-col { display:flex; flex-direction:column; align-items:center; }
.adm-item-preview-box { width:160px; height:160px; background:rgba(20,15,10,0.6); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.adm-item-preview-box img, .adm-item-preview-box svg { max-width:100%; max-height:100%; object-fit:contain; }
.adm-no-img-placeholder { color:var(--text-dim); font-size:12px; text-align:center; }
.adm-item-stats-col { flex:1; }
.adm-item-thumb { width:20px; height:20px; object-fit:contain; margin-right:2px; vertical-align:middle; }
.adm-item-dot { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }

/* XP bar in skill row */
.adm-sk-xpbar { flex:1; height:4px; background:rgba(60,50,40,0.4); border-radius:2px; overflow:hidden; min-width:40px; }
.adm-sk-xpfill { height:100%; background:var(--accent); border-radius:2px; }

/* Flags grid */
.adm-flags-grid { display:flex; flex-direction:column; gap:6px; }
.adm-flag-row { display:grid; grid-template-columns:1fr 80px 120px; gap:8px; align-items:center; padding:6px 8px; background:rgba(30,25,20,0.4); border-radius:4px; font-size:12px; }
.adm-flag-name { color:var(--text-bright); font-weight:600; }
.adm-flag-desc { color:var(--text-dim); font-size:10px; }
.adm-flag-val { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); }
.adm-flag-actions { display:flex; gap:4px; }

/* Log rows */
.adm-log-row { display:grid; grid-template-columns:130px 100px 130px 1fr; gap:8px; padding:4px 8px; border-bottom:1px solid rgba(60,50,40,0.15); font-size:11px; }
.adm-log-row:hover { background:rgba(60,50,40,0.2); }
.adm-log-time { color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:10px; }
.adm-log-by { color:var(--accent); }
.adm-log-action { color:var(--text-bright); font-weight:600; }
.adm-log-data { color:var(--text-dim); }

/* Roadmap */
.adm-roadmap { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.adm-rm-section h4 { margin:0 0 8px; font-size:12px; color:var(--accent); font-family:'Cinzel',serif; }
.adm-rm-item { padding:5px 8px; border-radius:4px; font-size:11px; margin-bottom:4px; }
.adm-rm-planned { background:rgba(40,60,40,0.4); border-left:2px solid #4a8a3e; color:#b0d0a0; }
.adm-rm-backlog  { background:rgba(40,40,60,0.4); border-left:2px solid #4a60a0; color:#a0b0d0; }
.adm-rm-idea     { background:rgba(50,40,60,0.4); border-left:2px solid #8060a0; color:#c0a0d0; }

/* Monster art img */
.monster-art-img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:crisp-edges; }

@media (max-width:600px) { .adm-grid { grid-template-columns:1fr; } .adm-item-row { flex-wrap:wrap; } }

/* ══════════════════════════════════════════════════════════════
   KILL LOOT POPUP — per-kill floating item display
   ══════════════════════════════════════════════════════════════ */
.loot-flash {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 60;
  animation: lootSlideUp 0.35s cubic-bezier(0.22,1,0.36,1);
  min-width: 180px;
  max-width: 280px;
}
@keyframes lootSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.loot-flash-header {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.7;
}
.loot-flash-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.lf-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4abe6c;
  background: rgba(10,11,15,0.92);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(74,190,108,0.25);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.lf-item.lf-rare     { color: #6ab4e8; border-color: rgba(106,180,232,0.3); }
.lf-item.lf-epic     { color: #b585e0; border-color: rgba(181,133,224,0.35); }
.lf-item.lf-legendary{ color: #d4a83a; border-color: rgba(212,168,58,0.4); animation: legendaryPulse 1.5s ease-in-out infinite; }
.lf-item.lf-gold     { color: #d4a83a; border-color: rgba(212,168,58,0.25); }
.lf-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lf-icon svg { width: 16px; height: 16px; }
.lf-qty  { font-weight: 700; }
.lf-name { color: inherit; }
@keyframes legendaryPulse {
  0%,100% { box-shadow: 0 0 4px rgba(212,168,58,0.3); }
  50%      { box-shadow: 0 0 12px rgba(212,168,58,0.6); }
}

/* ══════════════════════════════════════════════════════════════
   SESSION LOOT PANEL — cumulative session tracking
   ══════════════════════════════════════════════════════════════ */
.session-loot-section {
  background: linear-gradient(135deg, rgba(10,11,15,0.8), rgba(20,16,10,0.6));
  border: 1px solid rgba(201,135,62,0.18);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 10px;
}
.sl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sl-title {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sl-kills {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(201,135,62,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(201,135,62,0.12);
}
.sl-reset-btn {
  font-size: 9px;
  padding: 2px 6px;
  opacity: 0.6;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.sl-reset-btn:hover { opacity: 1; border-color: var(--danger); color: var(--danger); }
.sl-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
}
.sl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  font-size: 11px;
  transition: border-color 0.15s;
  min-width: 0;
}
.sl-item:hover { border-color: rgba(201,135,62,0.2); }
.sl-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sl-icon svg { width: 14px; height: 14px; }
.sl-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.sl-qty  { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-weight: 700; font-size: 10px; flex-shrink: 0; }
.sl-gold .sl-name { color: #d4a83a; }
.sl-gold .sl-qty  { color: #d4a83a; }
.sl-rare  .sl-name { color: #6ab4e8; }
.sl-epic  .sl-name { color: #b585e0; }
.sl-legendary .sl-name { color: #d4a83a; }
.sl-empty { font-size: 11px; color: var(--text-dim); font-style: italic; text-align: center; padding: 10px; }

/* ══════════════════════════════════════════════════════════════
   PRAYER PAGE — polished categories, icons, live drain bar
   ══════════════════════════════════════════════════════════════ */
.prayer-dash {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.prayer-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-align: center;
}
.prayer-kpi-val {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.prayer-kpi-lbl {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.prayer-pts-bar-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.prayer-pts-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.prayer-pts-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
}
.prayer-pts-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9873e, #d4a83a);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.prayer-category {
  margin-bottom: 18px;
}
.prayer-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.prayer-cat-icon { width: 16px; height: 16px; opacity: 0.6; }
.prayer-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.prayer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.prayer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,135,62,0.06), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.prayer-card:hover::before { opacity: 1; }
.prayer-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.prayer-card.prayer-active-v2 {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, rgba(201,135,62,0.15), rgba(201,135,62,0.06)) !important;
  box-shadow: 0 0 14px rgba(201,135,62,0.25), inset 0 0 10px rgba(201,135,62,0.06);
  animation: prayerCardGlow 2s ease-in-out infinite;
}
@keyframes prayerCardGlow {
  0%,100% { box-shadow: 0 0 10px rgba(201,135,62,0.2); }
  50%      { box-shadow: 0 0 20px rgba(201,135,62,0.4); }
}
.prayer-card.prayer-locked-v2 { opacity: 0.4; cursor: not-allowed; }
.prayer-card.prayer-locked-v2:hover { transform: none; border-color: var(--border); }
.prayer-card-icon {
  width: 28px; height: 28px;
  margin-bottom: 5px;
  display: flex; align-items: center; justify-content: center;
}
.prayer-card-icon svg { width: 28px; height: 28px; }
.prayer-card-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--text-bright);
  line-height: 1.2;
  margin-bottom: 3px;
}
.prayer-card.prayer-active-v2 .prayer-card-name { color: var(--accent); }
.prayer-card-stats {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.3;
}
.prayer-card-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 4px;
}
.prayer-card.prayer-active-v2 .prayer-card-cost { color: var(--accent-dim); }
.prayer-card-lv {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 9px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}
.prayer-active-badge {
  display: inline-block;
  font-size: 8px;
  background: var(--accent);
  color: #0a0b0f;
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
/* Bone burial polished grid */
.bone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.bone-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.bone-card.bone-have { border-color: rgba(201,135,62,0.25); }
.bone-card:hover.bone-have { border-color: var(--accent-dim); }
.bone-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bone-icon { font-size: 18px; }
.bone-name { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text-bright); }
.bone-qty-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  background: rgba(201,135,62,0.1);
  padding: 1px 6px;
  border-radius: 8px;
}
.bone-stats { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.bone-btns { display: flex; gap: 4px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   FARMING v2 — Plots, watering, compost, tools strip
   ══════════════════════════════════════════════════════════════ */
.farm-tools-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 14px; font-size: 11px;
}
.farm-tools-label  { color: var(--text-dim); font-weight: 600; }
.farm-tools-sep    { color: var(--text-dim); margin-left: 6px; }
.farm-tool-have { color: #4abe6c; background: rgba(74,190,108,0.1); border: 1px solid rgba(74,190,108,0.2); border-radius: 4px; padding: 1px 7px; }
.farm-tool-miss { color: var(--text-dim); opacity: 0.6; }

.farm-patch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px;
}
.farm-plot-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; transition: border-color 0.15s;
  position: relative;
}
.farm-plot-card:hover { border-color: var(--accent-dim); }
.farm-plot-empty  { border-color: rgba(255,255,255,0.05); }
.farm-plot-growing{ border-color: rgba(74,190,108,0.25); }
.farm-plot-ready  { border-color: rgba(212,168,58,0.5); background: linear-gradient(135deg,rgba(212,168,58,0.08),rgba(212,168,58,0.03)); box-shadow: 0 0 12px rgba(212,168,58,0.15); }
.farm-plot-dead   { border-color: rgba(196,64,64,0.3); background: rgba(196,64,64,0.04); }

.fp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fp-plot-num { font-size: 10px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.fp-state { font-family: 'Cinzel', serif; font-size: 12px; margin-bottom: 6px; }
.fp-empty   { color: var(--text-dim); }
.fp-growing { color: #4abe6c; }
.fp-ready   { color: #d4a83a; }
.fp-dead    { color: #c44040; }

.fp-grow-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fp-grow-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.fp-grow-bar-fill  { height: 100%; background: linear-gradient(90deg,#4abe6c,#d4a83a); border-radius: 3px; transition: width 0.5s; }
.fp-timer { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); white-space: nowrap; }

.fp-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.fp-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; }
.fp-watered { background: rgba(74,158,212,0.15); color: #4a9ed4; border: 1px solid rgba(74,158,212,0.25); }
.fp-compost { background: rgba(74,140,50,0.15); color: #4abe6c; border: 1px solid rgba(74,190,108,0.2); }
.fp-weeds   { background: rgba(180,140,50,0.15); color: #d4a83a; border: 1px solid rgba(212,168,58,0.25); animation: weedsPulse 1.5s ease-in-out infinite; }
@keyframes weedsPulse { 0%,100%{opacity:0.7}50%{opacity:1} }
.fp-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fp-no-seeds { font-size: 10px; color: var(--text-dim); font-style: italic; }
.fp-yield-hint { font-size: 10px; color: var(--text-dim); margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════
   COMBAT PETS — cards, active banner, action flash
   ══════════════════════════════════════════════════════════════ */
.active-pet-banner {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg,rgba(201,135,62,0.08),rgba(201,135,62,0.03));
  border: 1px solid rgba(201,135,62,0.30); border-radius: var(--radius);
  padding: 14px; margin-bottom: 16px;
}
.apb-art { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.apb-art svg { width: 60px; height: 60px; }
.apb-info { flex: 1; }
.apb-name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--text-bright); margin-bottom: 4px; }
.apb-active-badge { font-size: 9px; background: var(--accent); color: #0a0b0f; border-radius: 3px; padding: 1px 5px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.apb-desc { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.apb-action { font-size: 11px; color: var(--text); margin-bottom: 2px; }
.apb-passive { font-size: 10px; color: var(--text-dim); }

.pet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.pet-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.pet-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.pet-owned { border-color: rgba(201,135,62,0.20); }
.pet-locked { opacity: 0.5; filter: grayscale(0.6); }
.pet-active-card { border-color: var(--accent) !important; box-shadow: 0 0 14px rgba(201,135,62,0.25); }

.pet-art-wrap { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.pet-art-wrap svg { width: 48px; height: 48px; }
.pet-unknown-art { width: 48px; height: 48px; background: rgba(255,255,255,0.04); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-dim); }

.pet-info { flex: 1; }
.pet-name { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text-bright); margin-bottom: 4px; }
.pet-type-badge { display: inline-block; font-size: 9px; padding: 1px 7px; border-radius: 10px; border: 1px solid; margin-bottom: 4px; text-transform: capitalize; }
.pet-desc { font-size: 10px; color: var(--text-dim); line-height: 1.4; margin-bottom: 4px; }
.pet-ability { font-size: 10px; color: var(--text); }
.pet-source { font-size: 9px; color: var(--text-dim); margin-top: 4px; }
.pet-card-btns { display: flex; gap: 6px; margin-top: auto; }
.pet-equipped-label { font-size: 10px; color: var(--accent); font-family: 'Cinzel', serif; }

/* Pet action flash (combat) */
.pet-action-flash {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(10,11,15,0.90); border: 1px solid rgba(201,135,62,0.25);
  border-radius: 4px; padding: 4px 10px; font-size: 11px; pointer-events: none;
  z-index: 55; white-space: nowrap; backdrop-filter: blur(4px);
  animation: petFlashIn 0.3s ease-out, petFlashOut 0.4s ease-in 1.6s forwards;
}
@keyframes petFlashIn  { from { opacity:0; transform:translateX(-50%) translateY(-6px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes petFlashOut { from { opacity:1; } to { opacity:0; } }
.pa-pet-name { font-family: 'JetBrains Mono', monospace; }

/* Pet in combat sidebar strip */
.pet-combat-strip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(201,135,62,0.04); border: 1px solid rgba(201,135,62,0.15);
  border-radius: var(--radius); padding: 7px 10px; margin-bottom: 8px; cursor: pointer;
}
.pcs-art { width: 28px; height: 28px; }
.pcs-art svg { width: 28px; height: 28px; }
.pcs-name { font-family: 'Cinzel', serif; font-size: 11px; color: var(--accent); flex: 1; }
.pcs-ability { font-size: 9px; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   THIEVING v2 — HP bar, anger meter, target cards
   ══════════════════════════════════════════════════════════════ */
.thiev-status-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
}
.thiev-hp-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.thiev-hp-label { font-family: 'Cinzel', serif; font-size: 11px; color: var(--text-dim); width: 20px; }
.thiev-hp-track { width: 160px; height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
.thiev-hp-fill  { height: 100%; border-radius: 5px; transition: width 0.4s, background 0.3s; }
.thiev-hp-val   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.thiev-food-strip { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.thiev-food-btn  {
  font-size: 10px; padding: 3px 8px; background: rgba(74,190,108,0.08);
  border: 1px solid rgba(74,190,108,0.2); border-radius: 4px; color: #4abe6c;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.thiev-food-btn:hover { background: rgba(74,190,108,0.18); }
.thiev-no-food { font-size: 10px; color: var(--text-dim); font-style: italic; }

.thiev-active-bar {
  background: rgba(201,135,62,0.06); border: 1px solid rgba(201,135,62,0.25);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.tab-title { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text-bright); }
.thiev-prog-row, .thiev-anger-row { display: flex; align-items: center; gap: 8px; }
.thiev-prog-label, .thiev-anger-label { font-size: 10px; color: var(--text-dim); width: 80px; flex-shrink: 0; }
.thiev-prog-track { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.thiev-prog-fill  { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s; }
.thiev-anger-track { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.thiev-anger-fill  { height: 100%; background: linear-gradient(90deg,#d4a83a,#c44040); border-radius: 3px; transition: width 0.3s; }
.thiev-fight-chance { font-size: 10px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }

.thiev-target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 20px; }
.thiev-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; position: relative;
  display: flex; flex-direction: column; gap: 7px; transition: border-color 0.15s;
}
.thiev-card:hover { border-color: var(--accent-dim); }
.thiev-active { border-color: var(--accent) !important; background: rgba(201,135,62,0.06) !important; }

.thiev-card-header { display: flex; align-items: flex-start; gap: 8px; }
.thiev-portrait { font-size: 24px; flex-shrink: 0; line-height: 1; }
.thiev-card-info { flex: 1; min-width: 0; }
.thiev-card-name { font-family: 'Cinzel', serif; font-size: 13px; color: var(--text-bright); }
.thiev-card-desc { font-size: 10px; color: var(--text-dim); line-height: 1.3; margin-top: 2px; }
.thiev-lv-badge  { font-size: 9px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }

.thiev-stats-row, .thiev-danger-row { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--text-dim); }
.thiev-danger-row { font-size: 10px; }
.thiev-anger-mini { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.thiev-anger-track-sm { flex: 1; height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; min-width: 60px; }
.thiev-anger-fill-sm  { height: 100%; border-radius: 2px; transition: width 0.3s; }
.thiev-loot-row { display: flex; flex-wrap: wrap; gap: 4px; }
.thiev-drop-sm  { font-size: 9px; padding: 1px 5px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim); }

.thiev-mechanics-note {
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius); padding: 12px 14px; margin-top: 20px; font-size: 12px;
}
.thiev-mechanics-note h4 { font-family: 'Cinzel', serif; color: var(--accent); margin-bottom: 8px; }
.thiev-mechanics-note p { margin-bottom: 5px; color: var(--text-dim); line-height: 1.5; }
.thiev-mechanics-note strong { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   MULTI-MOB ENCOUNTER ARENA — per-mob HP bars, target switching
   ══════════════════════════════════════════════════════════════ */
.mm-encounter-arena {
  background: linear-gradient(135deg,rgba(15,10,5,0.9),rgba(20,8,8,0.8));
  border: 1px solid rgba(196,64,64,0.3);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
  box-shadow: 0 0 30px rgba(196,64,64,0.12), inset 0 0 40px rgba(0,0,0,0.4);
}
.mm-player-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,20,30,0.6); border: 1px solid rgba(74,138,62,0.3);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 12px;
}
.mm-player-name { font-family:'Cinzel',serif; font-size:12px; color:var(--text-bright); white-space:nowrap; min-width:90px; }
.mm-hp-track { flex:1; height:10px; background:rgba(255,255,255,0.06); border-radius:5px; overflow:hidden; }
.mm-hp-fill  { height:100%; border-radius:5px; transition:width 0.3s,background 0.3s; }
.mm-hp-val   { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); white-space:nowrap; min-width:80px; text-align:right; }
.mm-flee-btn { flex-shrink:0; }

.mm-mob-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.mm-mob-row {
  display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px;
  background:rgba(30,15,10,0.5); border:1px solid rgba(80,40,30,0.3);
  border-radius:6px; padding:8px 10px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.mm-mob-row.mm-target {
  border-color:rgba(196,64,64,0.6);
  background:rgba(50,10,10,0.6);
  box-shadow:0 0 14px rgba(196,64,64,0.2);
  animation:mmTargetPulse 2s ease-in-out infinite;
}
@keyframes mmTargetPulse {
  0%,100%{box-shadow:0 0 10px rgba(196,64,64,0.15)}
  50%{box-shadow:0 0 22px rgba(196,64,64,0.35)}
}
.mm-mob-row.mm-dead { opacity:0.35; filter:grayscale(0.8); }
.mm-mob-art { width:48px;height:48px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;background:rgba(10,8,5,0.5); }
.mm-mob-art svg { width:48px;height:48px; }
.mm-mob-art img { width:48px;height:48px;object-fit:contain; }
.mm-no-art { font-size:22px; text-align:center; }
.mm-mob-info { min-width:0; }
.mm-mob-name { font-family:'Cinzel',serif; font-size:12px; color:var(--text-bright); margin-bottom:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mm-mob-lv { font-size:9px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }
.mm-targeting-badge { font-size:9px; background:rgba(196,64,64,0.2); color:#c44040; border:1px solid rgba(196,64,64,0.4); border-radius:3px; padding:1px 5px; font-family:'Cinzel',serif; animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0.5} }
.mm-dead-badge { font-size:9px; background:rgba(100,100,100,0.1); color:#666; border:1px solid rgba(100,100,100,0.2); border-radius:3px; padding:1px 5px; }
.mm-hp-track-mob { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; margin-bottom:3px; }
.mm-hp-fill-mob  { height:100%; border-radius:3px; transition:width 0.3s,background 0.3s; }
.mm-hp-val-mob   { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); }
.mm-target-btn { font-size:10px; padding:4px 10px; white-space:nowrap; }
.mm-swords { font-size:18px; animation:mmSword 0.8s ease-in-out infinite alternate; }
@keyframes mmSword { from{transform:scale(1)} to{transform:scale(1.2)} }

.mm-log {
  background:rgba(10,8,5,0.6); border:1px solid rgba(60,40,30,0.3);
  border-radius:4px; padding:6px 10px; max-height:60px; overflow-y:auto;
  margin-bottom:8px;
}
.mm-log-entry { font-size:11px; color:var(--text-dim); line-height:1.4; }

.mm-quick-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mm-eat-btn   { background:rgba(74,190,108,0.1); border-color:rgba(74,190,108,0.25); color:#4abe6c; }
.mm-spec-btn  { background:rgba(212,168,58,0.1); border-color:rgba(212,168,58,0.25); color:#d4a83a; }
.mm-prayer-pts{ font-size:11px; color:var(--text-dim); padding:0 4px; }

/* Multi-mob card additions (uses fc-target-card base styles) */
.mm-target-card { transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.mm-dead-card   { opacity:0.35; filter:grayscale(0.7); pointer-events:none; }
.mm-card-art    { width:48px; height:48px; margin:4px auto; display:flex; align-items:center; justify-content:center; }
.mm-card-art svg, .mm-card-art img { width:48px; height:48px; object-fit:contain; }
.mm-warning-banner {
  text-align:center; font-family:'Cinzel',serif; font-size:12px;
  color:#c44040; background:rgba(196,64,64,0.08); border:1px solid rgba(196,64,64,0.25);
  border-radius:4px; padding:6px 12px; margin-bottom:10px; letter-spacing:0.5px;
  animation:mmWarnPulse 2s ease-in-out infinite;
}
@keyframes mmWarnPulse { 0%,100%{opacity:0.8} 50%{opacity:1} }

/* ================================================================
   THEATRE OF ASH — Full Styles
   ================================================================ */

/* ── LOCK SCREEN ── */
.toa-locked { text-align:center; padding:60px 24px; }
.toa-lock-icon { font-size:48px; margin-bottom:16px; }
.toa-lock-title { font-family:'Cinzel',serif; font-size:22px; color:var(--text-dim); margin-bottom:8px; }
.toa-lock-desc { color:#5a4a3a; margin-bottom:8px; }
.toa-lock-tip { font-style:italic; color:#3a2a1a; font-size:13px; }

/* ── ENTRY SCREEN ── */
.toa-entry-screen { display:flex; flex-direction:column; align-items:center; gap:20px; padding:16px; }
.toa-header-art { margin-bottom:8px; }
.toa-entry-stats { display:flex; gap:0; border:1px solid rgba(155,48,208,0.2); }
.toa-stat { text-align:center; padding:10px 18px; border-right:1px solid rgba(155,48,208,0.15); }
.toa-stat:last-child { border-right:none; }
.toa-stat-n { display:block; font-family:'Cinzel',serif; font-size:18px; color:#9b30d0; }
.toa-stat-l { display:block; font-size:9px; color:#5a4a5a; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }

.toa-tier-table { width:100%; max-width:480px; display:flex; flex-direction:column; gap:6px; }
.toa-tier-row { display:flex; align-items:center; gap:12px; padding:6px 12px; background:rgba(155,48,208,0.05); border:1px solid rgba(155,48,208,0.1); font-size:13px; color:#7a6a7a; }

.toa-tier-badge { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:1px; padding:2px 8px; border-radius:2px; }
.toa-tier-bronze { background:rgba(205,127,50,0.2); color:#cd7f32; border:1px solid rgba(205,127,50,0.4); }
.toa-tier-silver { background:rgba(192,192,192,0.15); color:#c0c0c0; border:1px solid rgba(192,192,192,0.4); }
.toa-tier-gold   { background:rgba(212,168,58,0.15); color:#d4a83a; border:1px solid rgba(212,168,58,0.4); }
.toa-tier-purple { background:rgba(155,48,208,0.15); color:#c060f0; border:1px solid rgba(155,48,208,0.4); }

.toa-rooms-list { width:100%; max-width:580px; display:flex; flex-direction:column; gap:4px; }
.toa-room-preview { display:grid; grid-template-columns:24px 140px 140px 1fr; gap:8px; align-items:center; padding:7px 10px; background:rgba(20,8,28,0.4); border:1px solid rgba(155,48,208,0.1); font-size:12px; }
.toa-room-num { font-family:'Cinzel',serif; color:#9b30d0; font-size:14px; text-align:center; }
.toa-room-name { color:#8a7a8a; }
.toa-boss-name { color:#d4a83a; }
.toa-boss-info { color:#4a3a4a; font-size:10px; }
.toa-boss-mechanic { color:#5a4a5a; font-size:10px; font-style:italic; grid-column:2 / span 3; }

.toa-unique-preview { width:100%; max-width:580px; }
.toa-unique-title { font-family:'Cinzel',serif; font-size:13px; color:#9b30d0; margin-bottom:10px; text-transform:uppercase; letter-spacing:2px; }
.toa-unique-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; }
.toa-unique-item { text-align:center; padding:8px 4px; background:rgba(155,48,208,0.06); border:1px solid rgba(155,48,208,0.15); cursor:default; transition:border-color 0.2s; }
.toa-unique-item:hover { border-color:rgba(155,48,208,0.4); }
.toa-ui-icon { display:flex; align-items:center; justify-content:center; height:36px; margin-bottom:4px; }
.toa-ui-name { font-size:10px; color:#7a6a7a; line-height:1.3; }

.toa-entry-warning { font-size:12px; color:#6a4a3a; text-align:center; max-width:480px; padding:8px 16px; border:1px solid rgba(196,64,64,0.15); background:rgba(196,64,64,0.05); }
.toa-enter-btn { font-family:'Cinzel',serif; letter-spacing:2px; font-size:14px; padding:14px 36px; background:rgba(155,48,208,0.1); border:2px solid #9b30d0; color:#9b30d0; cursor:pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.toa-enter-btn:hover { background:rgba(155,48,208,0.2); box-shadow:0 0 20px rgba(155,48,208,0.3); transform:translateY(-2px); }

/* ── PROGRESS MAP ── */
.toa-progress-map { display:flex; gap:2px; margin-bottom:8px; overflow-x:auto; }
.toa-prog-room { flex:1; min-width:70px; padding:6px 4px; text-align:center; background:rgba(20,8,28,0.4); border:1px solid rgba(155,48,208,0.1); transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.toa-prog-cleared { background:rgba(58,158,92,0.1); border-color:rgba(58,158,92,0.3); }
.toa-prog-current { background:rgba(155,48,208,0.15); border-color:#9b30d0; animation:toaRoomPulse 1.5s ease-in-out infinite; }
.toa-prog-next { border-color:rgba(212,168,58,0.3); }
@keyframes toaRoomPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px rgba(155,48,208,0.4)} }
.toa-prog-num { display:block; font-family:'Cinzel',serif; font-size:16px; color:#9b30d0; }
.toa-prog-name { display:block; font-size:9px; color:#5a4a5a; margin:2px 0; }
.toa-prog-status { display:block; font-size:14px; color:#9b30d0; }
.toa-prog-cleared .toa-prog-num, .toa-prog-cleared .toa-prog-status { color:#3a9e5c; }

/* ── PERF BAR ── */
.toa-perf-bar { display:flex; gap:8px; align-items:center; padding:6px 12px; background:rgba(10,5,20,0.5); border:1px solid rgba(155,48,208,0.12); margin-bottom:10px; flex-wrap:wrap; }
.toa-perf-item { display:flex; flex-direction:column; align-items:center; min-width:50px; }
.toa-perf-label { font-size:9px; color:#4a3a4a; letter-spacing:1px; text-transform:uppercase; }
.toa-perf-val { font-family:'Cinzel',serif; font-size:14px; color:#9b30d0; }
.toa-deaths-bad { color:#c44040 !important; }
.toa-flee-btn { margin-left:auto; font-size:10px; padding:3px 8px; }

/* ── BETWEEN ROOMS ── */
.toa-between-rooms { text-align:center; padding:30px 24px; background:rgba(10,5,20,0.5); border:1px solid rgba(155,48,208,0.15); margin:8px 0; }
.toa-between-title { font-family:'Cinzel',serif; font-size:16px; color:#d4a83a; margin-bottom:8px; }
.toa-between-next { color:#9b30d0; margin-bottom:8px; }
.toa-between-next strong { font-family:'Cinzel',serif; }
.toa-between-timer { font-family:'JetBrains Mono',monospace; font-size:22px; color:#c9873e; margin:10px 0; }
.toa-hp-bar { height:10px; background:rgba(255,255,255,0.06); border-radius:5px; overflow:hidden; margin:6px 0; }
.toa-hp-fill { height:100%; border-radius:5px; transition:width 0.3s; }
.toa-hp-text { font-size:11px; color:#5a4a5a; }

/* ── BOSS ARENA ── */
.toa-boss-arena { display:flex; flex-direction:column; gap:10px; }
.toa-boss-info-bar { display:flex; align-items:center; gap:14px; padding:14px; background:rgba(5,0,20,0.6); border:2px solid rgba(155,48,208,0.25); border-radius:4px; }
.toa-boss-art { flex-shrink:0; width:80px; display:flex; align-items:center; justify-content:center; }
.toa-boss-art svg { width:80px; height:100px; }
.toa-boss-center { flex:1; }
.toa-boss-name-big { font-family:'Cinzel',serif; font-size:18px; color:#d4a83a; margin-bottom:4px; }
.toa-boss-phase { font-size:11px; color:#7a5a8a; margin-bottom:8px; }
.toa-boss-hp-wrap { display:flex; flex-direction:column; }
.toa-boss-hp-bar { height:14px; }
.toa-boss-hp-fill { height:100%; border-radius:5px; transition:width 0.3s; }
.toa-player-hp-col { flex-shrink:0; width:160px; display:flex; flex-direction:column; }

/* ── MECHANIC ZONE ── */
.toa-mechanic-zone { padding:12px; background:rgba(10,5,20,0.5); border:1px solid rgba(155,48,208,0.15); border-radius:4px; }
.toa-mechanic-alert { animation:toaMechPulse 0.8s ease-in-out infinite; }
@keyframes toaMechPulse { 0%,100%{border-color:rgba(196,64,64,0.1)} 50%{border-color:rgba(196,64,64,0.5)} }
.toa-mech-name { font-family:'Cinzel',serif; font-size:14px; color:#c44040; margin-bottom:4px; }
.toa-mech-desc { font-size:12px; color:#7a5a5a; margin-bottom:8px; }
.toa-mech-timer-bar { height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.toa-mech-fill { height:100%; border-radius:4px; transition:width 0.2s, background 0.2s; }
.toa-handle-btn { font-family:'Cinzel',serif; letter-spacing:1px; padding:8px 20px; background:rgba(196,64,64,0.1); border:2px solid #c44040; color:#c44040; cursor:pointer; width:100%; font-size:13px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.toa-handle-btn:hover { background:rgba(196,64,64,0.2); box-shadow:0 0 15px rgba(196,64,64,0.3); }
.toa-no-mechanic { color:#3a2a3a; font-size:12px; text-align:center; padding:8px; }
.toa-splat-row { display:flex; gap:8px; }
.toa-splat-row .splat-area { flex:1; min-height:22px; }

/* ── FOOD STRIP ── */
.toa-food-strip { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.toa-food-btn { font-size:10px; padding:3px 6px; background:rgba(58,158,92,0.1); border:1px solid rgba(58,158,92,0.3); color:#5ab04b; cursor:pointer; border-radius:2px; transition:background 0.15s; }
.toa-food-btn:hover { background:rgba(58,158,92,0.25); }
.toa-no-food { font-size:11px; color:#4a3a4a; }

/* ── CHEST SCREEN ── */
.toa-chest-screen { display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px; }
.toa-complete-banner { padding:20px 32px; text-align:center; border:2px solid; border-radius:4px; background:rgba(5,0,20,0.5); }
.toa-complete-title { font-family:'Cinzel',serif; font-size:22px; margin-bottom:8px; }
.toa-complete-tier { margin:10px 0; font-size:20px; }
.toa-complete-stats { display:flex; gap:20px; justify-content:center; font-size:12px; color:#5a4a5a; margin-top:10px; }
.toa-chest-container { cursor:pointer; transition:transform 0.2s; }
.toa-chest-container:hover { transform:translateY(-4px); }
.toa-chest-prompt { text-align:center; font-family:'Cinzel',serif; font-size:12px; color:#7a5a8a; margin-top:8px; letter-spacing:1px; }
.toa-chest-art { margin:8px auto; display:block; }
.toa-chest-open { margin:8px auto; display:block; }
.toa-chest-bronze { filter:drop-shadow(0 0 8px rgba(205,127,50,0.4)); }
.toa-chest-silver { filter:drop-shadow(0 0 8px rgba(192,192,192,0.4)); }
.toa-chest-gold   { filter:drop-shadow(0 0 12px rgba(212,168,58,0.6)); }
.toa-chest-purple { filter:drop-shadow(0 0 16px rgba(155,48,208,0.7)); animation:chestGlow 1.5s ease-in-out infinite; }
@keyframes chestGlow { 0%,100%{filter:drop-shadow(0 0 12px rgba(155,48,208,0.5))} 50%{filter:drop-shadow(0 0 24px rgba(155,48,208,0.9))} }

/* ── UNIQUE DROP BANNER ── */
.toa-unique-drop-banner { position:relative; text-align:center; padding:20px; border:2px solid #9b30d0; background:rgba(5,0,20,0.8); overflow:hidden; width:100%; max-width:400px; animation:uniqueFlash 0.6s ease 3; }
@keyframes uniqueFlash { 0%,100%{background:rgba(5,0,20,0.8)} 50%{background:rgba(155,48,208,0.2)} }
.toa-unique-glow { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(155,48,208,0.2) 0%, transparent 70%); pointer-events:none; }
.toa-unique-text { font-family:'Cinzel',serif; font-size:22px; color:#d4a83a; letter-spacing:4px; text-shadow:0 0 20px rgba(212,168,58,0.8); }
.toa-unique-item-name { font-family:'Cinzel',serif; font-size:16px; color:#c060f0; margin:8px 0; }
.toa-unique-icon { display:flex; justify-content:center; margin-top:8px; }

/* ── LOOT GRID ── */
.toa-loot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; width:100%; max-width:560px; }
.toa-loot-item { text-align:center; padding:10px 6px; background:rgba(10,5,20,0.5); border:1px solid; border-radius:3px; }
.toa-li-icon { display:flex; justify-content:center; margin-bottom:4px; height:42px; align-items:center; }
.toa-li-name { font-size:11px; line-height:1.3; margin-bottom:2px; }
.toa-li-qty { font-family:'JetBrains Mono',monospace; font-size:12px; color:#5a4a5a; }
.toa-no-loot { color:#4a3a4a; font-size:13px; text-align:center; padding:16px; }

/* ── ABILITY BAR uses original styles from line 2023 ── */

/* Ability used flash */
.ab-used-flash {
  animation: abUsedFlash 0.5s ease-out;
}
@keyframes abUsedFlash {
  0% { box-shadow: 0 0 0 0 rgba(155,48,208,0.8); border-color: #9b30d0; }
  50% { box-shadow: 0 0 20px 6px rgba(155,48,208,0.6); border-color: #c060f0; }
  100% { box-shadow: none; border-color: rgba(155,48,208,0.25); }
}

/* Player shield flash for defensive abilities */
.ability-shield-flash {
  animation: shieldFlash 0.5s ease-out;
}
@keyframes shieldFlash {
  0%,100% { background: transparent; }
  50% { background: rgba(74,126,196,0.2); box-shadow: inset 0 0 20px rgba(74,126,196,0.3); }
}

/* ── ABILITY ANIMATION OVERLAY ── */
.ability-anim-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  animation: abilityFadeOut 0.9s ease-out forwards;
}
@keyframes abilityFadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
.ab-anim-svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.ab-anim-wide {
  width: 100%; height: 50%;
  top: 25%; left: 0;
}

/* ── ACTIVE BUFF CHIPS V2 ── */
/* .active-buffs-bar merged above */
.buff-chip-v2 {
  display:flex; align-items:center; gap:6px; padding:5px 8px;
  border:1px solid; border-radius:4px; position:relative;
  overflow:hidden; min-width:100px; animation:buffSlideIn 0.3s ease-out;
}
@keyframes buffSlideIn {
  from { opacity:0; transform:translateY(-8px) scale(0.9); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}
.buff-chip-icon { font-size:16px; flex-shrink:0; }
.buff-chip-body { display:flex; flex-direction:column; gap:1px; }
.buff-chip-label { font-family:'Cinzel',serif; font-size:11px; font-weight:600; line-height:1; }
.buff-chip-dur   { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); }
.buff-chip-bar   { position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(255,255,255,0.06); }
.buff-chip-fill  { height:100%; transition:width 0.5s linear; }

/* Ability used pop-in animation for buff chips */
.ability-buff-popup {
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  background:rgba(10,8,20,0.92); border:1px solid var(--accent); border-radius:4px;
  padding:4px 10px; font-family:'Cinzel',serif; font-size:11px; color:var(--accent);
  white-space:nowrap; pointer-events:none; z-index:100;
  animation:buffPopup 1.5s ease-out forwards;
}
@keyframes buffPopup {
  0%   { opacity:0; transform:translateX(-50%) translateY(0); }
  15%  { opacity:1; transform:translateX(-50%) translateY(-4px); }
  70%  { opacity:1; transform:translateX(-50%) translateY(-8px); }
  100% { opacity:0; transform:translateX(-50%) translateY(-16px); }
}

/* ── ADMIN NEW TABS ── */
.adm-ability-row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 10px; border-bottom:1px solid var(--border); gap:12px; }
.adm-ab-info { display:flex; flex-direction:column; gap:2px; flex:1; }
.adm-ab-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.adm-ab-slot-row { display:flex; gap:10px; align-items:center; padding:6px 10px; border-bottom:1px solid var(--border); }

/* ================================================================
   UPGRADES v1.0 — Combat Log, Tracker, Item Comparison,
   Notification History, Settings, Keyboard Shortcuts
   ================================================================ */

/* ── COMBAT LOG ── */
.combat-log-panel {
  margin-top:12px; border:1px solid var(--border); border-radius:6px;
  background:rgba(10,11,15,0.85); overflow:hidden;
}
.clog-header {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:rgba(201,135,62,0.08); cursor:pointer; user-select:none;
  border-bottom:1px solid var(--border);
}
.clog-header:hover { background:rgba(201,135,62,0.14); }
.clog-arrow { font-size:10px; color:var(--accent); width:14px; }
.clog-title { font-family:'Cinzel',serif; font-size:13px; color:var(--accent); flex:1; }
.clog-clear-btn {
  background:none; border:1px solid rgba(255,255,255,0.12); border-radius:3px;
  color:var(--text-dim); font-size:10px; padding:2px 8px; cursor:pointer;
}
.clog-clear-btn:hover { border-color:var(--accent); color:var(--accent); }
.clog-body {
  max-height:180px; overflow-y:auto; padding:4px 0;
  scrollbar-width:thin; scrollbar-color:rgba(201,135,62,0.3) transparent;
}
.clog-body::-webkit-scrollbar { width:4px; }
.clog-body::-webkit-scrollbar-thumb { background:rgba(201,135,62,0.3); border-radius:2px; }
.clog-entry {
  display:flex; gap:8px; padding:2px 12px; font-size:12px;
  line-height:1.5; font-family:'Crimson Text',serif;
}
.clog-ts { color:rgba(255,255,255,0.2); font-size:10px; min-width:48px; font-family:monospace; }
.clog-text { flex:1; }
.clog-entry.clog-death { background:rgba(196,64,64,0.08); }
.clog-entry.clog-levelup { background:rgba(255,215,0,0.06); }
.clog-entry.clog-loot { background:rgba(74,138,62,0.06); }

/* ── SESSION TRACKER ── */
.tracker-panel {
  margin-top:12px; border:1px solid var(--border); border-radius:6px;
  background:rgba(10,11,15,0.85); overflow:hidden;
}
.tracker-header {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:rgba(201,135,62,0.08); border-bottom:1px solid var(--border);
}
.tracker-title { font-family:'Cinzel',serif; font-size:13px; color:var(--accent); flex:1; }
.tracker-time { font-size:11px; color:var(--text-dim); font-family:monospace; }
.tracker-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-bottom:1px solid var(--border);
}
.tracker-stat {
  display:flex; flex-direction:column; align-items:center; padding:8px 4px;
  border-right:1px solid var(--border);
}
.tracker-stat:last-child { border-right:none; }
.ts-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.ts-val { font-size:16px; font-family:'Cinzel',serif; color:var(--text); }
.tracker-xp { padding:6px 12px; }
.tracker-xp-row {
  display:flex; justify-content:space-between; padding:2px 0;
  font-size:12px; font-family:'Crimson Text',serif;
}
.txr-name { color:var(--text-dim); }
.txr-rate { color:var(--accent); font-family:monospace; }

/* ── ITEM COMPARISON ── */
.bi-compare {
  display:flex; flex-wrap:wrap; gap:4px 8px; padding:4px 0;
  font-size:11px; font-family:'Crimson Text',serif; align-items:center;
}
.bi-compare-vs {
  color:rgba(255,255,255,0.25); font-size:10px; margin-right:4px;
  font-style:italic;
}

/* ── NOTIFICATION HISTORY ── */
.notif-history-panel {
  position:fixed; top:0; right:0; width:340px; height:100vh;
  background:rgba(10,11,15,0.97); border-left:1px solid var(--border);
  z-index:10000; display:flex; flex-direction:column;
  box-shadow:-4px 0 20px rgba(0,0,0,0.5);
  animation:nhSlideIn 0.2s ease-out;
}
@keyframes nhSlideIn {
  from { transform:translateX(100%); }
  to   { transform:translateX(0); }
}
.nh-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
  font-family:'Cinzel',serif; font-size:15px; color:var(--accent);
  background:rgba(201,135,62,0.06);
}
.nh-entries {
  flex:1; overflow-y:auto; padding:4px 0;
  scrollbar-width:thin; scrollbar-color:rgba(201,135,62,0.3) transparent;
}
.nh-entries::-webkit-scrollbar { width:4px; }
.nh-entries::-webkit-scrollbar-thumb { background:rgba(201,135,62,0.3); border-radius:2px; }
.nh-entry {
  display:flex; gap:10px; padding:6px 16px; font-size:12px;
  font-family:'Crimson Text',serif; border-bottom:1px solid rgba(255,255,255,0.03);
}
.nh-ts { color:rgba(255,255,255,0.2); font-size:10px; min-width:48px; font-family:monospace; }
.nh-text { flex:1; color:var(--text); line-height:1.4; }
.nh-entry.nh-achievement .nh-text { color:#ffd700; }
.nh-entry.nh-levelup .nh-text { color:#ffd700; }
.nh-entry.nh-danger .nh-text { color:#c44040; }
.nh-entry.nh-success .nh-text { color:#4a8a3e; }
.nh-entry.nh-warn .nh-text { color:#c4a83a; }
.nh-empty { padding:40px 16px; text-align:center; color:var(--text-dim); font-size:13px; }

/* ── ACTIVITY LOG BUTTON (sidebar) ── */
.activity-log-btn {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  cursor:pointer; color:var(--text-dim); font-size:13px;
  font-family:'Crimson Text',serif; border-bottom:1px solid var(--border);
  position:relative; transition:background 0.15s;
}
.activity-log-btn:hover { background:rgba(201,135,62,0.08); color:var(--accent); }
.activity-log-btn svg { flex-shrink:0; }
.nh-badge {
  position:absolute; top:6px; left:26px; width:7px; height:7px;
  background:#c44040; border-radius:50%;
}

/* ── SETTINGS TOGGLES ── */
.setting-toggle {
  display:flex; align-items:center; gap:10px; padding:6px 0;
  font-size:13px; font-family:'Crimson Text',serif; color:var(--text);
  cursor:pointer;
}
.setting-toggle input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; width:18px; height:18px;
  border:1px solid var(--border); border-radius:3px; background:rgba(10,11,15,0.6);
  cursor:pointer; position:relative; flex-shrink:0;
}
.setting-toggle input[type="checkbox"]:checked {
  background:var(--accent); border-color:var(--accent);
}
.setting-toggle input[type="checkbox"]:checked::after {
  content:'✓'; position:absolute; top:-1px; left:3px;
  font-size:13px; color:#0a0b0f; font-weight:bold;
}

/* ── KEYBOARD SHORTCUTS DISPLAY ── */
.kb-shortcuts-grid {
  display:flex; flex-direction:column; gap:6px; padding:4px 0;
}
.kb-row {
  font-size:13px; font-family:'Crimson Text',serif; color:var(--text-dim);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
kbd {
  display:inline-block; padding:2px 7px; font-size:11px;
  font-family:monospace; background:rgba(255,255,255,0.06);
  border:1px solid var(--border); border-radius:3px;
  color:var(--accent); min-width:20px; text-align:center;
}

/* ── SESSION OVERVIEW (settings page) ── */
.session-overview {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.so-stat {
  display:flex; justify-content:space-between; padding:6px 10px;
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:4px; font-size:12px; font-family:'Crimson Text',serif;
}
.so-stat span:first-child { color:var(--text-dim); }
.so-stat span:last-child { color:var(--accent); font-family:monospace; }

/* ── XP/HR BADGE (on skill pages) ── */
.xphr-badge {
  margin-left:8px; font-size:11px; color:var(--accent);
  font-family:monospace; background:rgba(201,135,62,0.1);
  border:1px solid rgba(201,135,62,0.2); border-radius:3px;
  padding:1px 6px;
}

/* ── RESPONSIVE: tracker 2-col on mobile ── */
@media (max-width:600px) {
  .tracker-stats { grid-template-columns:repeat(2,1fr); }
  .notif-history-panel { width:100vw; }
  .session-overview { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════
   CODEX — Collection Log + Bestiary
   ════════════════════════════════════════════════════════════ */

/* Tabs */
.codex-tabs {
  display:flex; gap:4px; margin-bottom:16px;
  border-bottom:1px solid var(--border); padding-bottom:8px;
}
.codex-tab {
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  padding:8px 18px; border-radius:4px 4px 0 0; cursor:pointer;
  font-family:'Cinzel',serif; font-size:13px; letter-spacing:.03em;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.codex-tab:hover { color:var(--text); border-color:var(--accent); }
.codex-tab-active {
  background:rgba(201,135,62,0.12); color:var(--accent);
  border-color:var(--accent); border-bottom-color:transparent;
}

/* ── OVERVIEW ── */
.codex-overview {
  display:flex; gap:32px; align-items:center; flex-wrap:wrap;
  margin-bottom:20px; padding:16px;
  background:rgba(255,255,255,0.015); border:1px solid var(--border);
  border-radius:6px;
}
.codex-ring-wrap {
  position:relative; width:130px; height:130px; flex-shrink:0;
}
.codex-ring { width:100%; height:100%; }
.codex-ring-fill { transition:stroke-dashoffset .6s ease; }
.codex-ring-label {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.codex-ring-pct { font-family:'Cinzel',serif; font-size:28px; color:var(--accent); line-height:1; }
.codex-ring-sub { font-size:11px; color:var(--text-dim); margin-top:2px; }
.codex-summary { flex:1; min-width:200px; }
.codex-stat-row {
  display:flex; justify-content:space-between; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.04); font-size:14px;
}
.codex-stat-label { color:var(--text-dim); }
.codex-stat-val { color:var(--accent); font-family:monospace; }

/* Category bars */
.codex-cat-bars { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.codex-cat-bar {
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:4px; padding:8px 12px;
}
.ccb-header { display:flex; justify-content:space-between; margin-bottom:4px; font-size:13px; }
.ccb-name { color:var(--text); font-family:'Cinzel',serif; }
.ccb-count { color:var(--text-dim); font-family:monospace; }
.ccb-track {
  height:6px; background:#1a1b22; border-radius:3px; overflow:hidden;
}
.ccb-fill {
  height:100%; background:linear-gradient(90deg, #c9873e, #e4a855);
  border-radius:3px; transition:width .4s ease;
}
.ccb-fill-red { background:linear-gradient(90deg, #8a3a3a, #c44040); }

/* Milestones */
.codex-milestones { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.codex-milestone {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border:1px solid var(--border); border-radius:4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.cm-earned {
  background:rgba(201,135,62,0.08); border-color:rgba(201,135,62,0.3);
}
.cm-locked { opacity:0.45; }
.cm-icon { font-size:20px; color:var(--accent); width:28px; text-align:center; }
.cm-locked .cm-icon { color:var(--text-dim); }
.cm-info { flex:1; }
.cm-title { font-family:'Cinzel',serif; font-size:14px; color:var(--text); }
.cm-desc { font-size:12px; color:var(--text-dim); margin-top:2px; }
.cm-pct { font-family:monospace; font-size:13px; color:var(--accent); }
.cm-locked .cm-pct { color:var(--text-dim); }

/* Recent discoveries */
.codex-recent-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:6px; margin-bottom:16px;
}
.codex-recent-card {
  padding:8px 10px; border-left:3px solid var(--border);
  background:rgba(255,255,255,0.02); border-radius:3px;
}
.crc-name { font-size:13px; font-family:'Cinzel',serif; }
.crc-type { font-size:11px; color:var(--text-dim); text-transform:capitalize; }

/* ── FILTER BAR ── */
.codex-filter-bar {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:14px;
}
.codex-filter {
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  color:var(--text-dim); padding:5px 12px; border-radius:3px;
  cursor:pointer; font-size:12px; font-family:'Crimson Text',serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.codex-filter:hover { border-color:var(--accent); color:var(--text); }
.cf-active { background:rgba(201,135,62,0.12); border-color:var(--accent); color:var(--accent); }
.cf-count { font-family:monospace; font-size:11px; opacity:0.7; }

/* ── BESTIARY GRID ── */
.codex-bestiary-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:8px;
}
.codex-monster-card {
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:5px; padding:10px; cursor:pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.codex-monster-card:hover { border-color:rgba(201,135,62,0.4); }
.cmc-expanded { border-color:var(--accent); background:rgba(201,135,62,0.04); }
.cmc-undiscovered { opacity:0.4; }
.cmc-undiscovered:hover { opacity:0.6; }
.cmc-top { display:flex; gap:10px; align-items:center; }
.cmc-art {
  width:56px; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:4px;
  background:rgba(0,0,0,0.2);
}
.cmc-art svg { width:52px; height:52px; }
.cmc-art-hidden { filter:brightness(0) saturate(0); }
.cmc-silhouette {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#333; font-family:'Cinzel',serif;
}
.cmc-info { flex:1; min-width:0; }
.cmc-name { font-family:'Cinzel',serif; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmc-level { font-size:11px; color:var(--text-dim); }
.cmc-kills { font-size:12px; color:var(--accent); font-family:monospace; }
.cmc-undiscovered .cmc-name { color:#555; }
.cmc-undiscovered .cmc-kills { color:#444; }

/* Monster expanded details */
.cmc-details {
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}
.cmc-stats-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
  margin-bottom:8px;
}
.cmc-stat {
  display:flex; justify-content:space-between; padding:3px 6px;
  background:rgba(0,0,0,0.15); border-radius:3px; font-size:12px;
}
.cmc-sl { color:var(--text-dim); }
.cmc-sv { color:var(--accent); font-family:monospace; }
.cmc-evasion {
  font-size:11px; color:var(--text-dim); margin-bottom:8px;
  padding:4px 6px; background:rgba(0,0,0,0.1); border-radius:3px;
}
.cmc-drops-title {
  font-family:'Cinzel',serif; font-size:13px; color:var(--text);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;
}
.cmc-drops { display:flex; flex-direction:column; gap:3px; }
.cmc-drop {
  display:flex; align-items:center; gap:8px; padding:3px 6px;
  border-radius:3px; font-size:12px;
}
.cmc-drop-found { background:rgba(255,255,255,0.02); }
.cmc-drop-missing { background:rgba(0,0,0,0.1); }
.cmc-drop-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmc-drop-chance { color:var(--text-dim); font-family:monospace; font-size:11px; }
.cmc-drop-qty { color:var(--text-dim); font-family:monospace; font-size:11px; width:30px; text-align:right; }
.cmc-drop-table-name {
  font-size:11px; color:var(--accent); margin-top:6px; margin-bottom:2px;
  text-transform:uppercase; letter-spacing:.03em;
}

/* ── COLLECTION LOG GRID ── */
.codex-collection-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:5px;
}
.codex-item-card {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:4px; font-size:13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.cic-found { background:rgba(255,255,255,0.025); }
.cic-found:hover { background:rgba(255,255,255,0.05); }
.cic-missing { background:rgba(0,0,0,0.15); opacity:0.35; }
.cic-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.cic-name {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-family:'Crimson Text',serif;
}
.cic-stats { font-size:10px; color:var(--text-dim); font-family:monospace; margin-top:1px; }
.codex-item-card { flex-direction:column; align-items:flex-start; gap:2px; }
.codex-item-card .cic-dot { position:absolute; right:6px; top:6px; }
.codex-item-card { position:relative; padding-right:20px; }

/* Responsive */
@media (max-width:600px) {
  .codex-overview { flex-direction:column; align-items:stretch; }
  .codex-ring-wrap { align-self:center; }
  .codex-bestiary-grid { grid-template-columns:1fr; }
  .codex-collection-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .cmc-stats-grid { grid-template-columns:repeat(2, 1fr); }
  .codex-tabs { overflow-x:auto; }
}

/* ── BOUNTY BOARD ──────────────────────────────────────────── */
.bounty-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.bounty-tab { background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-dim); padding:6px 14px; border-radius:4px; cursor:pointer; font-size:12px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.bounty-tab:hover,.bounty-tab.active { background:rgba(201,135,62,0.15); border-color:var(--amber); color:var(--amber); }

.bounty-post-panel { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:6px; margin-bottom:16px; overflow:hidden; }
.bounty-post-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; cursor:pointer; font-family:'Cinzel',serif; font-size:13px; color:var(--amber); }
.bounty-post-header:hover { background:rgba(255,255,255,0.03); }
.bp-gold { font-size:11px; color:var(--text-dim); }
.bounty-post-body { display:none; padding:14px; border-top:1px solid var(--border); }
.bounty-post-panel.open .bounty-post-body { display:flex; flex-direction:column; gap:10px; }
.bp-type-row,.bp-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bp-row label,.bp-type-row label { font-size:12px; color:var(--text-dim); min-width:100px; }
.bp-quick-btns { display:flex; gap:4px; }

.bounty-list-section { margin-top:4px; }
.bounty-list-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.bounty-cards { display:flex; flex-direction:column; gap:10px; }

.bounty-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:8px; padding:14px; transition:border-color 0.2s; }
.bounty-card:hover { border-color:rgba(201,135,62,0.4); }
.bounty-card-done { opacity:0.6; }
.bounty-card-top { display:flex; align-items:flex-start; gap:12px; }
.bounty-type-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.bounty-card-info { flex:1; min-width:0; }
.bounty-card-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.bounty-card-target { font-size:14px; color:var(--text); font-family:'Cinzel',serif; margin-bottom:4px; }
.bounty-card-target strong { color:var(--amber); }
.bounty-card-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); }
.bounty-timer { color:#5aafff; }
.bounty-claimer { color:#7dcc44; }

.bounty-reward { font-family:'Cinzel',serif; font-size:20px; font-weight:900; color:#f0d060; flex-shrink:0; text-align:right; line-height:1; }
.bounty-gold-label { font-size:11px; color:var(--amber); display:block; text-align:right; }

.bounty-badge { padding:2px 7px; border-radius:10px; font-size:10px; font-weight:700; letter-spacing:0.4px; }
.bounty-badge-active   { background:rgba(90,175,90,0.2);  color:#7dcc44;  border:1px solid #7dcc44; }
.bounty-badge-claimed  { background:rgba(201,135,62,0.2); color:var(--amber); border:1px solid var(--amber); }
.bounty-badge-expired  { background:rgba(80,80,80,0.2);   color:#888;     border:1px solid #555; }
.bounty-badge-cancelled{ background:rgba(180,60,60,0.2);  color:#cc6666;  border:1px solid #cc4444; }

.bounty-progress-row { display:flex; align-items:center; gap:8px; margin:8px 0 4px; }
.bounty-prog-bar { flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.bounty-prog-fill { height:100%; background:linear-gradient(90deg,#c9873e,#f0a040); border-radius:3px; transition:width 0.3s; }
.bounty-prog-text { font-size:11px; color:var(--text-dim); white-space:nowrap; }

.bounty-card-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); }
.bounty-claim { background:rgba(90,175,62,0.15) !important; border-color:#4a9a3a !important; color:#7dcc44 !important; }
.bounty-claim:hover { background:rgba(90,175,62,0.3) !important; }
.bounty-cancel { background:rgba(180,60,60,0.1) !important; border-color:#883333 !important; color:#cc6666 !important; font-size:10px !important; }
.bounty-action-hint { font-size:11px; color:var(--text-dim); font-style:italic; }

/* ── BOUNTY PLAYER SEARCH ────────────────────────────────── */
.bb-player-dropdown { position:absolute; top:100%; left:0; right:0; background:var(--bg-panel); border:1px solid var(--amber); border-radius:0 0 6px 6px; z-index:100; max-height:200px; overflow-y:auto; box-shadow:0 4px 16px rgba(0,0,0,0.6); }
.bb-player-option { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border); transition:background 0.15s; }
.bb-player-option:last-child { border-bottom:none; }
.bb-player-option:hover { background:rgba(201,135,62,0.12); }
.bb-player-name { font-family:'Cinzel',serif; font-size:13px; color:var(--text); }
.bb-player-stats { font-size:11px; color:var(--text-dim); }
.bounty-live-badge { font-size:11px; color:#7dcc44; font-weight:700; animation:livePulse 2s infinite; }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── QUEST SYSTEM v2 ─────────────────────────────────────────────── */
.qp-banner { background:rgba(201,135,62,0.08); border:1px solid rgba(201,135,62,0.3); border-radius:6px; padding:10px 14px; margin-bottom:16px; }
.qp-info { display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
.qp-num { font-family:'Cinzel',serif; font-size:24px; font-weight:900; color:var(--amber); }
.qp-label { color:var(--text-dim); font-size:13px; }
.qp-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.qp-fill { height:100%; background:linear-gradient(90deg,#8b4a1a,var(--amber)); border-radius:3px; transition:width 0.4s; }

.quest-section { margin-bottom:20px; }
.qs-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.qs-timer { font-size:12px; color:#5aafff; }

.daily-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.daily-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:6px; padding:12px; transition:border-color 0.2s; }
.daily-card:hover { border-color:rgba(201,135,62,0.4); }
.daily-done { opacity:0.55; border-color:rgba(90,175,62,0.4) !important; }
.dc-name { font-family:'Cinzel',serif; font-size:13px; color:var(--text); margin-bottom:3px; }
.daily-done .dc-name { color:#7dcc44; }
.dc-desc { font-size:11px; color:var(--text-dim); margin-bottom:8px; }
.dc-prog-bar { height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.dc-prog-fill { height:100%; background:var(--amber); border-radius:2px; transition:width 0.3s; }
.daily-done .dc-prog-fill { background:#7dcc44; }
.dc-reward { font-size:10px; color:var(--text-dim); }

.quest-card-full { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-left:3px solid var(--amber); border-radius:6px; padding:14px; margin-bottom:12px; }
.qcf-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.qcf-name { font-family:'Cinzel',serif; font-size:15px; color:var(--text); font-weight:700; }
.qcf-series { font-size:11px; color:var(--text-dim); background:rgba(255,255,255,0.06); padding:2px 8px; border-radius:10px; }
.qcf-qp { font-size:11px; color:var(--amber); margin-left:auto; font-weight:700; }
.qcf-desc { font-size:12px; color:var(--text-dim); margin-bottom:10px; }
.qcf-objectives { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.qo-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.qo-row.qo-done { opacity:0.65; }
.qo-check { width:16px; color:#7dcc44; font-weight:900; flex-shrink:0; }
.qo-label { flex:1; color:var(--text-dim); }
.qo-done .qo-label { text-decoration:line-through; color:#556; }
.qo-count { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.qo-bar { width:80px; height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; flex-shrink:0; }
.qo-fill { height:100%; background:var(--amber); border-radius:2px; }
.qo-done .qo-fill { background:#7dcc44; }
.qcf-footer { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); flex-wrap:wrap; gap:8px; }
.qcf-rewards { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11px; }
.qcf-gold { color:#f0d060; font-weight:700; }
.qcf-xp  { color:#5aafff; }
.qcf-item { color:var(--amber); }

.quest-series-group { margin-bottom:14px; }
.qsg-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.quest-available-card { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:5px; padding:10px 12px; margin-bottom:6px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.quest-available-card.qa-locked { opacity:0.55; }
.qa-name { font-family:'Cinzel',serif; font-size:13px; color:var(--text); flex:1; }
.qa-qp { font-size:10px; color:var(--amber); margin-left:4px; }
.qa-desc { font-size:11px; color:var(--text-dim); width:100%; }
.qa-reqs { font-size:10px; color:#cc6666; width:100%; }

.completed-grid { display:flex; flex-direction:column; gap:4px; }
.completed-quest { display:flex; align-items:center; gap:8px; padding:6px 10px; background:rgba(90,175,62,0.06); border-radius:4px; }
.cq-check { color:#7dcc44; font-weight:900; flex-shrink:0; }
.cq-name { flex:1; font-size:13px; color:var(--text-dim); }
.cq-qp { font-size:11px; color:var(--amber); }

/* NPC updates */
.npc-quest-badge { background:var(--amber); color:#000; border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; margin-left:4px; }
.quest-mini-locked { opacity:0.6; }
.qm-qp { font-size:10px; color:var(--amber); }
.npc-shop-preview { margin-top:8px; }
.npc-shop-item { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.npc-shop-more { font-size:10px; color:var(--text-dim); text-align:right; margin-top:2px; font-style:italic; }

/* ================================================================
   PARTY SYSTEM + CHAMBERS STYLES
   ================================================================ */

/* Party Create */
.party-create-section { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; }
.party-create-title { font-family:'Cinzel',serif; font-size:14px; color:var(--amber); margin-bottom:10px; }
.party-create-form { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.party-divider { text-align:center; color:var(--text-dim); font-size:12px; margin:12px 0; }
.input-field { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:4px; color:var(--text); padding:6px 10px; font-size:13px; flex:1; outline:none; }
.input-field:focus { border-color:var(--amber); }

/* Party Bonuses Info */
.party-bonuses-info { background:rgba(201,135,62,0.06); border:1px solid rgba(201,135,62,0.2); border-radius:8px; padding:14px; margin-bottom:16px; }
.party-bonus-row { display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.party-bonus-row span:last-child { color:var(--text); }

/* Party Finder */
.party-finder-section { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:16px; }
.party-finder-btns { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.party-finder-result { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:4px; margin-bottom:6px; font-size:12px; gap:8px; flex-wrap:wrap; }
.party-finder-empty { color:var(--text-dim); font-size:12px; text-align:center; padding:16px; }

/* Active Party */
.party-active-section { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:8px; padding:16px; }
.party-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.party-name-display { font-family:'Cinzel',serif; font-size:16px; color:var(--amber); }
.party-id-display { font-size:10px; color:var(--text-dim); }
.party-id-display code { background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:3px; font-size:10px; }
.party-members-list { margin-bottom:14px; }
.party-member-row { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:rgba(255,255,255,0.03); border-radius:4px; margin-bottom:4px; font-size:13px; }
.party-member-name { color:var(--text); }
.party-member-level { color:var(--text-dim); font-size:11px; }

/* Party Invite */
.party-invite-section { display:flex; gap:8px; margin-bottom:14px; }

/* Party Chat */
.party-chat-section { border-top:1px solid var(--border); padding-top:12px; }
.party-chat-log { max-height:200px; overflow-y:auto; background:rgba(0,0,0,0.2); border-radius:6px; padding:8px; margin-bottom:8px; }
.party-chat-msg { font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.party-chat-sender { color:var(--amber); font-weight:600; margin-right:4px; }
.party-chat-text { color:var(--text); }
.party-chat-input-row { display:flex; gap:8px; }

/* Chambers supply buttons */
.coa-supply-display { display:flex; gap:16px; justify-content:center; margin-top:8px; }
.coa-brew-count { font-size:13px; color:var(--amber); }
.coa-supply-btns { display:flex; gap:8px; justify-content:center; }
.coa-brew-btn { background:rgba(62,142,62,0.2); border:1px solid rgba(62,142,62,0.4); color:#8ad88a; }
.coa-brew-btn:hover { background:rgba(62,142,62,0.3); }
.coa-supply-info { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; }

/* Chambers mechanic override */
.coa-mechanic-alert { border-color:#c9873e !important; }
.coa-handle-btn { background:rgba(201,135,62,0.3) !important; border-color:#c9873e !important; }

/* ================================================================
   CONTENT EXPANSION UI — Boss cards, drop tables, monster info
   ================================================================ */
.ce-section-title { font-family:'Cinzel',serif; font-size:14px; color:var(--amber); margin:16px 0 8px; padding-bottom:4px; border-bottom:1px solid rgba(201,135,62,0.2); }

/* Boss Card — used in Barrows, Inferno, Slayer Bosses */
.ce-boss-card { display:flex; gap:12px; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:8px; position:relative; overflow:hidden; }
.ce-boss-card.locked { opacity:0.5; }
.ce-boss-card.ce-boss-final { border-color:rgba(196,64,32,0.4); background:rgba(196,64,32,0.06); }
.ce-bc-art { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ce-bc-info { flex:1; min-width:0; }
.ce-bc-name { font-family:'Cinzel',serif; font-size:14px; color:var(--text); margin-bottom:2px; }
.ce-bc-stats { font-size:11px; color:var(--text-dim); margin-bottom:4px; }
.ce-bc-desc { font-size:12px; color:var(--text-dim); margin-bottom:4px; line-height:1.4; }
.ce-bc-set { font-size:11px; color:var(--amber); margin-bottom:2px; }
.ce-bc-set strong { color:var(--text); }
.ce-bc-drops { font-size:11px; color:var(--text-dim); }

/* Drop Table */
.ce-drops { background:rgba(0,0,0,0.15); border-radius:5px; padding:8px; margin-top:6px; }
.ce-drops-title { font-family:'Cinzel',serif; font-size:11px; color:var(--amber); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.ce-drops-grid { display:flex; flex-direction:column; gap:2px; }
.ce-drop-row { display:flex; justify-content:space-between; align-items:center; padding:3px 6px; border-radius:3px; font-size:11px; background:rgba(255,255,255,0.02); }
.ce-drop-name { flex:1; color:var(--text); }
.ce-drop-qty { color:var(--text-dim); margin:0 8px; min-width:30px; text-align:right; }
.ce-drop-rate { color:var(--text-dim); min-width:40px; text-align:right; font-size:10px; }
.ce-rarity-common .ce-drop-name { color:#aaa; }
.ce-rarity-uncommon .ce-drop-name { color:#5aafff; }
.ce-rarity-rare .ce-drop-name { color:#aa55ff; }
.ce-rarity-legendary .ce-drop-name { color:var(--amber); font-weight:600; }
.ce-rarity-epic .ce-drop-name { color:#e060e0; font-weight:600; }
.ce-rarity-mythic .ce-drop-name { color:#ff6060; font-weight:700; }

/* Monster Card */
.ce-monster-card { display:flex; gap:12px; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:8px; }
.ce-mc-art { flex-shrink:0; width:64px; height:64px; display:flex; align-items:center; }
.ce-mc-info { flex:1; }
.ce-mc-name { font-family:'Cinzel',serif; font-size:14px; color:var(--text); margin-bottom:2px; }
.ce-mc-stats { font-size:11px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.ce-mc-desc { font-size:12px; color:var(--text-dim); line-height:1.4; }

/* Fight Info Bar */
.ce-fight-info { display:flex; justify-content:center; gap:16px; font-size:12px; color:var(--text-dim); padding:6px 0; }
.ce-boss-hint { color:#aaa; text-align:center; margin:4px 0 8px; font-size:12px; font-style:italic; }

/* Collection Log */
.ce-clog-grid { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.ce-clog-item { font-size:11px; padding:4px 8px; border-radius:4px; border:1px solid var(--border); background:rgba(255,255,255,0.02); display:flex; align-items:center; gap:4px; }
.ce-clog-has { border-color:rgba(74,170,80,0.4); background:rgba(74,170,80,0.08); }
.ce-clog-miss { opacity:0.4; }
.ce-clog-name { color:var(--text); }
.ce-clog-has .ce-clog-name { color:#8ad88a; }
.ce-clog-check { color:#4aaa50; font-weight:700; font-size:12px; }

/* Active button state (raid target selection) */
.btn-active { border-color:var(--amber) !important; background:rgba(201,135,62,0.15) !important; color:var(--amber) !important; }

/* Player Search Results */
.party-search-results { max-height:200px; overflow-y:auto; margin-top:6px; }
.party-search-row { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:4px; margin-bottom:4px; font-size:12px; gap:6px; }
.party-search-name { font-weight:600; color:var(--text); flex:1; }
.party-search-info { color:var(--text-dim); font-size:11px; white-space:nowrap; }

/* Party Raid Alert Banner */
.party-raid-alert {
  background: rgba(196,64,32,0.08);
  border: 2px solid rgba(196,64,32,0.4);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}
.pra-title { font-family:'Cinzel',serif; font-size:16px; color:#c44020; margin-bottom:6px; }
.pra-desc { font-size:12px; color:var(--text-dim); margin-bottom:12px; }
/* @keyframes pulse — removed: orphaned, cannon-pulse/fc-pulse/etc are defined separately */

/* Inbox Gift Cards */
.inbox-gifts-list { display:flex; flex-direction:column; gap:6px; }
.inbox-gift-card { display:flex; justify-content:space-between; align-items:center; background:rgba(74,170,80,0.04); border:1px solid rgba(74,170,80,0.2); border-radius:6px; padding:10px 12px; }
.igc-info { flex:1; }
.igc-from { font-size:12px; color:var(--text); margin-bottom:2px; }
.igc-item { font-size:14px; color:var(--amber); font-weight:600; }
.igc-time { font-size:10px; color:var(--text-dim); margin-top:2px; }

/* ── DWARF CANNON PANEL ──────────────────────────────────────── */
.cannon-panel {
  background: rgba(60,40,20,0.25);
  border: 1px solid rgba(201,135,62,0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  transition: border-color 0.3s, background 0.3s;
}
.cannon-panel.cannon-active {
  background: rgba(201,135,62,0.10);
  border-color: rgba(201,135,62,0.55);
  box-shadow: 0 0 12px rgba(201,135,62,0.15);
  animation: cannon-pulse 2s infinite;
}
@keyframes cannon-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(201,135,62,0.1); }
  50%      { box-shadow: 0 0 20px rgba(201,135,62,0.3); }
}
.cannon-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cannon-icon svg { width:20px; height:20px; }
.cannon-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--amber);
  flex: 1;
}
.cannon-balls {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  padding: 2px 7px;
  border-radius: 10px;
}
.cannon-status {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.cannon-panel.cannon-active .cannon-status { color: #c9873e; font-weight: 600; }
.cannon-toggle-btn {
  width: 100%;
  padding: 6px;
  font-size: 12px;
  font-family: 'Cinzel', serif;
  background: rgba(201,135,62,0.12);
  border: 1px solid rgba(201,135,62,0.3);
  border-radius: 6px;
  color: var(--amber);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.cannon-toggle-btn:hover:not(:disabled) { background: rgba(201,135,62,0.25); }
.cannon-btn-active {
  background: rgba(196,64,32,0.2) !important;
  border-color: rgba(196,64,32,0.5) !important;
  color: #e06040 !important;
}
.cannon-hint {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px;
  border: 1px dashed rgba(201,135,62,0.2);
  border-radius: 6px;
  margin: 6px 0;
}

/* ── AMMO COUNTER BAR ────────────────────────────────────────── */
.ammo-counter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
}
.ammo-counter-bar .ammo-name { flex: 1; }
.ammo-counter-bar .ammo-qty { color: var(--text); font-weight: 600; }
.ammo-counter-bar .ammo-low { color: #e06040 !important; }
.ammo-counter-bar.ammo-missing {
  color: #e06040;
  border-color: rgba(220,80,60,0.3);
  justify-content: center;
}

/* ── CANNON HIT ANIMATION ────────────────────────────────────── */
@keyframes cannon-hit {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.7; }
  100% { transform: scale(0.8); opacity: 0; }
}
.cannon-hit-flash {
  animation: cannon-hit 0.35s ease-out forwards;
  color: #c9873e;
  font-weight: bold;
}

/* ── BOW TYPE BADGE ──────────────────────────────────────────── */
.bow-type-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  font-family: 'Cinzel', serif;
  vertical-align: middle;
}
.bow-type-badge.shortbow { background: rgba(100,180,220,0.15); color: #7ab8c8; border: 1px solid rgba(100,180,220,0.3); }
.bow-type-badge.longbow  { background: rgba(201,135,62,0.15);  color: var(--amber); border: 1px solid rgba(201,135,62,0.3); }

/* Ammo slot quantity in equipment page */
.ammo-slot-qty { font-size:10px; color:var(--text-dim); margin-left:4px; }

/* ── ADMIN CREATE FORMS ──────────────────────────────────────── */
.adm-create-form {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(201,135,62,0.2);
  border-radius: 8px;
  padding: 14px;
}
.adm-create-form h4 {
  font-family: 'Cinzel', serif;
  color: var(--amber);
  margin: 0 0 12px;
  font-size: 14px;
}
.btn-active {
  background: rgba(201,135,62,0.2) !important;
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}

/* ── AGILITY PAGE ─────────────────────────────────────────────── */
.skill-xp-bar-wrap { position:relative; height:14px; background:rgba(255,255,255,0.05); border-radius:7px; margin:0 0 12px; overflow:hidden; }
.skill-xp-bar { height:100%; background:linear-gradient(90deg,#c9873e,#e0a060); border-radius:7px; transition:width 0.4s; }
.skill-xp-label { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--text-dim); }

.agil-grace-header { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.agil-marks-badge { background:rgba(201,135,62,0.15); border:1px solid rgba(201,135,62,0.3); border-radius:20px; padding:4px 12px; font-size:13px; color:var(--amber); }

.agil-grace-shop { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:14px; }
.agil-grace-shop h3 { font-family:'Cinzel',serif; font-size:13px; color:var(--amber); margin:0 0 10px; }
.agil-grace-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.agil-grace-item { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:6px; padding:8px; text-align:center; }
.agil-grace-item.agil-owned { border-color:rgba(74,170,80,0.4); background:rgba(74,170,80,0.05); }
.agi-icon { margin-bottom:4px; }
.agi-name { font-size:11px; color:var(--text); font-weight:600; margin-bottom:3px; }
.agi-price { font-size:10px; color:var(--amber); margin-bottom:5px; }
.agi-owned-badge { font-size:10px; color:#4aaa60; font-weight:700; }

.agil-courses { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.agil-course-card { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:10px; padding:14px; }
.agil-course-card.agil-locked { opacity:0.55; }
.agil-course-card.agil-active { border-color:rgba(201,135,62,0.5); background:rgba(201,135,62,0.06); }
.agil-course-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.agil-course-name { font-family:'Cinzel',serif; font-size:14px; color:var(--text); }
.agil-req { font-size:11px; padding:2px 8px; border-radius:10px; }
.req-met  { background:rgba(74,170,80,0.15);  color:#4aaa60; border:1px solid rgba(74,170,80,0.3); }
.req-locked{ background:rgba(196,64,32,0.15); color:#e06040; border:1px solid rgba(196,64,32,0.3); }
.agil-course-meta { display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.agil-xp,.agil-time,.agil-mark-chance { font-size:11px; color:var(--text-dim); background:rgba(255,255,255,0.05); padding:2px 7px; border-radius:8px; }
.agil-obstacles { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.agil-obstacle { font-size:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:2px 7px; color:var(--text-dim); }
.agil-desc { font-size:11px; color:var(--text-dim); margin-bottom:10px; }
.agil-bonuses { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:8px; padding:12px; }
.agil-bonuses h3 { font-size:13px; color:var(--amber); margin:0 0 8px; }
.agil-bonus-row { font-size:12px; color:var(--text-dim); padding:3px 0; }

/* ── SMITHING HEAT BAR ────────────────────────────────────────── */
.heat-bar-wrap { background:rgba(0,0,0,0.25); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin:6px 0 10px; transition:border-color 0.3s; }
.heat-bar-wrap.heat-hot { border-color:rgba(255,100,0,0.5); box-shadow:0 0 12px rgba(255,80,0,0.15); }
.heat-bar-label { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px; }
.heat-icon { font-size:14px; }
.heat-pct { font-weight:700; margin-left:auto; }
.heat-bonus { font-size:10px; background:rgba(255,100,0,0.2); border:1px solid rgba(255,100,0,0.4); border-radius:8px; padding:1px 6px; color:#ff8040; margin-left:4px; }
.heat-bar { position:relative; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:visible; }
.heat-fill { height:100%; border-radius:4px; transition:width 0.3s, background 0.5s; }
.heat-threshold-line { position:absolute; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,0.3); border-radius:1px; }

/* ── BANK ITEM RICH TOOLTIP ───────────────────────────────────── */
.bank-item { position:relative; cursor:pointer; }
.bank-item:hover .bi-tooltip { display:block; }
.bi-tooltip {
  display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  z-index:200; background:#1a1c22; border:1px solid rgba(201,135,62,0.4);
  border-radius:8px; padding:10px 12px; min-width:180px; max-width:240px;
  font-size:11px; color:var(--text); white-space:normal; pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.bi-tooltip-name { font-family:'Cinzel',serif; font-size:12px; color:var(--amber); margin-bottom:6px; border-bottom:1px solid var(--border); padding-bottom:4px; }
.bi-tooltip-stat { display:flex; justify-content:space-between; padding:1px 0; color:var(--text-dim); }
.bi-tooltip-stat span:last-child { color:#7ab87a; }
.bi-tooltip-desc { font-size:10px; color:var(--text-dim); margin-top:6px; font-style:italic; }
.bi-tooltip-req { font-size:10px; color:#e08040; margin-top:4px; }

/* ── BOSS PHASE SYSTEM ──────────────────────────────────────── */
.boss-phase-badge {
  font-size:10px; font-family:'Cinzel',serif; text-align:center;
  padding:4px 8px; border-radius:6px; margin:4px 0;
  background:rgba(220,120,20,0.18); border:1px solid rgba(220,120,20,0.5);
  color:#e08030; animation:phase-pulse 2s infinite;
}
.boss-phase-badge.phase-enrage {
  background:rgba(196,32,32,0.22); border-color:rgba(196,32,32,0.6);
  color:#ff5050; animation:enrage-pulse 0.8s infinite;
}
.enrage-pct { font-size:9px; color:#ff7070; margin-left:4px; }
@keyframes phase-pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes enrage-pulse { 0%,100%{box-shadow:0 0 6px rgba(196,32,32,0.4)} 50%{box-shadow:0 0 18px rgba(196,32,32,0.7)} }
.enrage-shake { animation:enrage-shake 0.4s infinite; }
@keyframes enrage-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
.phase-transition { animation:phase-flash 1s ease-out; }
@keyframes phase-flash { 0%{box-shadow:inset 0 0 40px rgba(255,100,0,0.5)} 100%{box-shadow:none} }

/* ── WEAKNESS BADGE ─────────────────────────────────────────── */
.weakness-badge {
  font-size:10px; padding:2px 8px; border-radius:8px; margin-top:2px;
  background:rgba(74,170,80,0.15); border:1px solid rgba(74,170,80,0.3);
  color:#4aaa60; text-align:center;
}

/* ── OVERHEAD PRAYER ────────────────────────────────────────── */
.overhead-prayer {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:18px; background:rgba(201,135,62,0.2); border:1px solid rgba(201,135,62,0.5);
  border-radius:50%; width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; animation:overhead-float 1.5s ease-in-out infinite;
  z-index:10;
}
.ca-side { position:relative; }
@keyframes overhead-float { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }

/* ── COMBAT LOG ─────────────────────────────────────────────── */
.combat-log-section {
  background:rgba(0,0,0,0.2); border:1px solid var(--border);
  border-radius:8px; margin:8px 0; overflow:hidden;
}
.combat-log-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; cursor:pointer; font-size:12px; color:var(--text-dim);
  background:rgba(255,255,255,0.02);
  transition:background 0.2s;
}
.combat-log-header:hover { background:rgba(255,255,255,0.05); }
.combat-log-toggle { font-size:10px; }
.combat-log-entries {
  padding:6px; max-height:160px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
}
.cl-entry { font-size:10px; padding:2px 6px; border-radius:4px; }
.cl-hit    { color:#9ad4ff; background:rgba(100,180,255,0.06); }
.cl-taken  { color:#ff8080; background:rgba(255,80,80,0.06); }
.cl-miss   { color:var(--text-dim); }
.cl-kill   { color:#c9873e; font-weight:700; }
.cl-cannon { color:#c9873e; background:rgba(201,135,62,0.06); }
.cl-dot    { color:#9ae480; background:rgba(80,180,80,0.06); }

/* ── GUILD UPGRADES ─────────────────────────────────────────── */
.guild-upgrades-wrap { padding:2px; }
.guild-gold-bar {
  background:rgba(201,135,62,0.1); border:1px solid rgba(201,135,62,0.25);
  border-radius:8px; padding:8px 14px; margin-bottom:12px;
  font-size:13px; color:var(--amber);
}
.guild-upgrade-note { font-size:11px; color:#e06040; margin-bottom:10px; }
.guild-upgrade-tier { margin-bottom:14px; }
.guild-tier-header {
  font-family:'Cinzel',serif; font-size:12px; color:var(--text-dim);
  border-bottom:1px solid var(--border); padding-bottom:4px; margin-bottom:8px;
}
.guild-upgrade-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.guild-upgrade-card {
  background:rgba(0,0,0,0.2); border:1px solid var(--border);
  border-radius:8px; padding:10px; text-align:center;
  transition:border-color 0.2s;
}
.guild-upgrade-card.upgrade-owned {
  border-color:rgba(74,170,80,0.4); background:rgba(74,170,80,0.04);
}
.guild-upgrade-card.upgrade-locked { opacity:0.45; }
.gu-icon { font-size:20px; margin-bottom:4px; }
.gu-name { font-size:12px; font-weight:700; color:var(--text); margin-bottom:4px; }
.gu-desc { font-size:10px; color:var(--text-dim); margin-bottom:6px; line-height:1.4; }
.gu-cost { font-size:11px; color:var(--amber); margin-bottom:6px; }
.upgrade-owned .gu-cost { color:#4aaa60; }

/* ── TUTORIAL OVERLAY ───────────────────────────────────────── */
#tutorial-overlay { position:fixed; inset:0; z-index:9999; pointer-events:none; }
.tutorial-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,0.65);
  pointer-events:all;
}
.tutorial-card {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  background:#151820; border:2px solid rgba(201,135,62,0.6);
  border-radius:16px; padding:20px 22px; width:min(340px,90vw);
  pointer-events:all; box-shadow:0 8px 40px rgba(0,0,0,0.8);
  text-align:center;
}
.tutorial-step-indicator { display:flex; justify-content:center; gap:6px; margin-bottom:12px; }
.tutorial-dot { width:8px; height:8px; border-radius:50%; background:var(--border); }
.tutorial-dot.tut-active { background:var(--amber); }
.tutorial-dot.tut-done  { background:#4aaa60; }
.tutorial-icon { font-size:32px; margin-bottom:8px; }
.tutorial-title { font-family:'Cinzel',serif; font-size:15px; color:var(--amber); margin-bottom:10px; }
.tutorial-desc { font-size:12px; color:var(--text-dim); margin-bottom:14px; line-height:1.5; }
.tutorial-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.tutorial-dismiss {
  position:absolute; top:10px; right:12px; background:none;
  border:none; color:var(--text-dim); font-size:16px; cursor:pointer;
}
.tutorial-dismiss:hover { color:var(--text); }

/* ── SETTINGS PAGE ─────────────────────────────────────────── */
.settings-section { background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:12px; }
.settings-section h3 { font-family:'Cinzel',serif; font-size:13px; color:var(--amber); margin:0 0 12px; }
.settings-grid { display:flex; flex-direction:column; gap:8px; }
.settings-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text); padding:6px 8px; background:rgba(255,255,255,0.03); border-radius:6px; cursor:pointer; }
.settings-row:hover { background:rgba(255,255,255,0.06); }
.settings-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--amber); cursor:pointer; }
.settings-about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.sa-stat { text-align:center; padding:8px; background:rgba(255,255,255,0.03); border-radius:6px; }
.sa-stat span { display:block; font-family:'Cinzel',serif; font-size:16px; color:var(--amber); }
.sa-stat { font-size:10px; color:var(--text-dim); }

/* ── EQUIPMENT PRESETS ──────────────────────────────────────── */
.preset-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.preset-slot { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:8px; padding:10px; }
.preset-slot.preset-filled { border-color:rgba(201,135,62,0.3); }
.preset-name { font-size:11px; font-weight:700; color:var(--text); margin-bottom:4px; }
.preset-items { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:6px; }
.preset-item { font-size:9px; background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; color:var(--text-dim); }
.preset-empty { font-size:10px; color:var(--text-dim); margin-bottom:6px; }
.preset-btns { display:flex; gap:4px; flex-wrap:wrap; }

/* ── PERFORMANCE MODE ───────────────────────────────────────── */
body.perf-mode * { animation:none !important; transition:none !important; }
body.perf-mode .hit-splat { display:none !important; }

/* ── AGILITY SPEED PASSIVE DISPLAY ─────────────────────────── */
.tool-bonus { font-size:9px; color:#7ab87a; }

/* ── LEVEL-UP BANNER ─────────────────────────────────────── */
#levelup-banner {
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  background:#151820; border:2px solid rgba(201,135,62,0.7);
  border-radius:12px; padding:12px 20px; z-index:8888;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 24px rgba(201,135,62,0.3);
  animation:lub-in 0.4s cubic-bezier(0.34,1.56,0.64,1);
  min-width:200px;
}
#levelup-banner.lub-big {
  border-color:rgba(212,168,58,0.9);
  box-shadow:0 0 40px rgba(212,168,58,0.5);
}
#levelup-banner.lub-fade { opacity:0; transform:translateX(-50%) translateY(-20px); transition: opacity 0.6s, transform 0.6s; }
@keyframes lub-in { from{opacity:0;transform:translateX(-50%) translateY(-30px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.lub-icon { font-size:24px; }
.lub-skill { font-family:'Cinzel',serif; font-size:11px; color:var(--text-dim); }
.lub-level { font-family:'Cinzel',serif; font-size:15px; color:var(--amber); font-weight:700; }
.lub-level.lub-milestone { color:#d4a83a; text-shadow:0 0 10px rgba(212,168,58,0.5); }

/* ── PRESTIGE BANNER FULL ─────────────────────────────────── */
.prestige-banner-full {
  position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center;
}
.pb-bg { position:absolute; inset:0; background:rgba(0,0,0,0.85); }
.pb-content {
  position:relative; text-align:center; padding:40px 32px;
  background:#0e101a; border:3px solid rgba(201,135,62,0.7);
  border-radius:20px; max-width:320px; width:90%;
  box-shadow:0 0 60px rgba(201,135,62,0.4);
  animation:prestige-in 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes prestige-in { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
.pb-stars { font-size:28px; margin-bottom:12px; animation:star-spin 2s infinite; }
@keyframes star-spin { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.pb-title { font-family:'Cinzel',serif; font-size:24px; color:#fff; margin-bottom:6px; }
.pb-name  { font-family:'Cinzel',serif; font-size:18px; font-weight:700; margin-bottom:10px; }
.pb-desc  { font-size:13px; color:var(--text-dim); margin-bottom:20px; }
.pb-close { font-family:'Cinzel',serif; }

/* ── PRESTIGE PAGE ────────────────────────────────────────── */
.prestige-rank-badge {
  background:rgba(0,0,0,0.3); border:2px solid; border-radius:14px;
  padding:18px; text-align:center; margin-bottom:14px;
}
.prb-icon  { font-size:36px; margin-bottom:8px; }
.prb-name  { font-family:'Cinzel',serif; font-size:18px; font-weight:700; margin-bottom:4px; }
.prb-rank  { font-size:11px; color:var(--text-dim); margin-bottom:10px; }
.prb-bonuses { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.prb-bonus { font-size:10px; background:rgba(255,255,255,0.06); padding:2px 8px; border-radius:8px; color:var(--text-dim); }
.prestige-intro { text-align:center; padding:20px; background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:10px; margin-bottom:14px; }
.pi-icon  { font-size:40px; margin-bottom:8px; }
.pi-title { font-family:'Cinzel',serif; font-size:16px; color:var(--amber); margin-bottom:8px; }
.pi-desc  { font-size:12px; color:var(--text-dim); line-height:1.6; }
.prestige-check-panel { border-radius:10px; padding:14px; margin-bottom:12px; }
.check-ready     { background:rgba(74,170,80,0.08); border:1px solid rgba(74,170,80,0.4); }
.check-not-ready { background:rgba(0,0,0,0.15); border:1px solid var(--border); }
.pcp-header { font-family:'Cinzel',serif; font-size:13px; margin-bottom:8px; color:var(--text); }
.pcp-row { font-size:12px; padding:3px 0; }
.pcp-reason { font-size:11px; color:#e06040; margin-top:6px; }
.prestige-tl-bar { margin-bottom:14px; }
.ptlb-label { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:4px; }
.ptlb-track { height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.ptlb-fill  { height:100%; background:linear-gradient(90deg,#c9873e,#d4a83a); border-radius:4px; transition:width 0.5s; }
.prestige-action { margin-bottom:16px; }
.pa-warning { font-size:11px; color:#e06040; margin-bottom:10px; padding:8px; background:rgba(196,32,32,0.08); border-radius:6px; border:1px solid rgba(196,32,32,0.2); }
.prestige-btn { width:100%; font-family:'Cinzel',serif; font-size:14px; padding:12px; background:rgba(201,135,62,0.15); border:2px solid rgba(201,135,62,0.5); color:var(--amber); border-radius:10px; cursor:pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.prestige-btn:hover { background:rgba(201,135,62,0.25); box-shadow:0 0 20px rgba(201,135,62,0.3); }
.prestige-ranks-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
.prestige-rank-card { background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.prestige-rank-card.rank-unlocked { border-color:rgba(201,135,62,0.3); }
.prestige-rank-card.rank-current  { border-color:rgba(201,135,62,0.6); background:rgba(201,135,62,0.07); }
.prc-icon  { font-size:24px; margin-bottom:6px; }
.prc-name  { font-family:'Cinzel',serif; font-size:12px; margin-bottom:2px; }
.prc-rank  { font-size:10px; color:var(--text-dim); margin-bottom:6px; }
.prc-bonuses { font-size:10px; color:var(--text-dim); line-height:1.5; }
.prc-owned { font-size:10px; color:#4aaa60; margin-top:4px; font-weight:700; }
.prestige-hist-row { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); padding:5px 0; border-bottom:1px solid var(--border); }

/* ── ITEM COMPARISON MODAL ────────────────────────────────── */
.compare-modal { position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center; }
.compare-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.compare-card { position:relative; background:#151820; border:2px solid rgba(201,135,62,0.4); border-radius:14px; padding:18px; width:min(380px,94vw); max-height:85vh; overflow-y:auto; }
.compare-close { position:absolute; top:10px; right:12px; background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; }
.compare-header { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-bottom:14px; }
.cmp-item { text-align:center; }
.cmp-icon { margin-bottom:4px; }
.cmp-name { font-size:11px; font-weight:700; color:var(--text); }
.cmp-vs { font-family:'Cinzel',serif; font-size:14px; color:var(--text-dim); }
.compare-stats { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.cmp-row { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; font-size:12px; padding:4px 6px; background:rgba(255,255,255,0.02); border-radius:4px; }
.cmp-v1,.cmp-v2 { font-weight:700; }
.cmp-v1 { text-align:right; }
.cmp-v2 { text-align:left; }
.cmp-stat { text-align:center; color:var(--text-dim); font-size:10px; }
.cmp-better { color:#4aaa60; }
.cmp-worse  { color:#e06040; }
.cmp-no-stats { text-align:center; color:var(--text-dim); font-size:12px; padding:10px; }
.compare-desc { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:10px; color:var(--text-dim); font-style:italic; }

/* ── BAZAAR BUY ORDERS ────────────────────────────────────── */
.bz-tabs { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.bz-tab { padding:6px 12px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--text-dim); cursor:pointer; }
.bz-tab.bz-tab-active { background:rgba(201,135,62,0.15); border-color:rgba(201,135,62,0.4); color:var(--amber); }
.buy-orders-list { display:flex; flex-direction:column; gap:8px; }
.buy-order-card { background:rgba(0,0,0,0.2); border:1px solid rgba(74,170,80,0.2); border-radius:8px; padding:10px 12px; }
.bo-item  { font-weight:700; color:var(--text); font-size:13px; margin-bottom:3px; }
.bo-info  { font-size:12px; color:var(--text-dim); margin-bottom:3px; }
.bo-buyer { font-size:10px; color:var(--text-dim); margin-bottom:6px; }
.bo-sell-row { display:flex; gap:6px; align-items:center; margin-top:6px; }

/* ── QUEST PAGE OVERHAUL ─────────────────────────────────── */
.qp-banner {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,rgba(201,135,62,0.10),rgba(0,0,0,0.2));
  border:1px solid rgba(201,135,62,0.35); border-radius:12px;
  padding:14px 16px; margin-bottom:14px;
}
.qp-crown { font-size:28px; }
.qp-center { flex:1; }
.qp-num { font-family:'Cinzel',serif; font-size:24px; color:var(--amber); font-weight:700; }
.qp-of  { font-size:14px; color:var(--text-dim); }
.qp-label { font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.qp-bar-wrap { }
.qp-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; }
.qp-fill { height:100%; background:linear-gradient(90deg,#c9873e,#d4a83a); border-radius:3px; transition:width 0.5s; }
.qp-progress-tag { font-size:11px; color:var(--text-dim); text-align:right; white-space:nowrap; }

.quest-section { margin-bottom:16px; }
.qs-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.qs-title { font-family:'Cinzel',serif; font-size:13px; color:var(--amber); }
.qs-timer { font-size:11px; color:var(--text-dim); }

.quest-card-full {
  background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:10px;
  padding:14px; margin-bottom:10px;
}
.qcf-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.qcf-name   { font-family:'Cinzel',serif; font-size:14px; color:var(--text); font-weight:700; }
.qcf-series { font-size:10px; color:var(--text-dim); margin-top:2px; }
.qcf-qp-badge { background:rgba(201,135,62,0.15); border:1px solid rgba(201,135,62,0.3); border-radius:8px; padding:2px 8px; font-size:11px; color:var(--amber); white-space:nowrap; }
.qcf-desc { font-size:12px; color:var(--text-dim); margin-bottom:10px; line-height:1.5; }
.qcf-objectives { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.qo-row { display:grid; grid-template-columns:16px 1fr auto; gap:6px; align-items:center; font-size:11px; }
.qo-row.qo-done .qo-label { text-decoration:line-through; opacity:0.6; }
.qo-check { color:#4aaa60; font-weight:700; text-align:center; }
.qo-label { color:var(--text-dim); }
.qo-count { color:var(--text); font-size:10px; white-space:nowrap; }
.qo-bar   { grid-column:1/-1; height:3px; background:rgba(255,255,255,0.06); border-radius:2px; margin-top:-2px; }
.qo-fill  { height:100%; background:var(--amber); border-radius:2px; }
.qcf-rewards-block { background:rgba(255,255,255,0.03); border-radius:6px; padding:8px 10px; margin-bottom:6px; }
.qcf-rewards-label { font-size:10px; color:var(--text-dim); margin-bottom:5px; }
.qcf-rewards-row { display:flex; flex-wrap:wrap; gap:6px; }
.qcf-gold,.qcf-qp-reward,.qcf-xp,.qcf-item { font-size:11px; background:rgba(255,255,255,0.04); border-radius:6px; padding:2px 8px; color:var(--text-dim); }
.qcf-gold { color:#d4a83a; }
.qcf-qp-reward { color:var(--amber); }
.qcf-unlocks { font-size:10px; color:#4aaa60; margin-top:6px; font-style:italic; }
.qcf-ready { font-size:11px; color:#4aaa60; padding:4px 8px; background:rgba(74,170,80,0.08); border-radius:6px; border:1px solid rgba(74,170,80,0.2); flex:1; }

.quest-available-card {
  background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:8px;
}
.quest-available-card.qa-locked { opacity:0.55; }
.qa-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:5px; }
.qa-name { font-size:13px; font-weight:700; color:var(--text); }
.qa-series { font-size:10px; color:var(--text-dim); }
.qa-qp { font-size:11px; color:var(--amber); white-space:nowrap; }
.qa-desc { font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.qa-reqs { font-size:10px; color:#e06040; margin-bottom:6px; }
.qa-preview-rewards { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.qa-preview-rewards span { font-size:10px; background:rgba(255,255,255,0.04); padding:1px 6px; border-radius:4px; color:var(--text-dim); }

.quest-series-group { margin-bottom:10px; }
.qsg-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:6px; padding-left:2px; }

.locked-quest-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.locked-quest-card { background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:6px; padding:8px; opacity:0.6; }
.lqc-name { font-size:11px; color:var(--text); margin-bottom:3px; }
.lqc-req  { font-size:10px; color:var(--text-dim); margin-bottom:3px; }
.lqc-qp   { font-size:10px; color:var(--amber); }

.completed-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.completed-quest { display:flex; align-items:center; gap:6px; padding:5px 8px; background:rgba(74,170,80,0.05); border:1px solid rgba(74,170,80,0.15); border-radius:6px; font-size:11px; }
.cq-check { color:#4aaa60; font-weight:700; }
.cq-name  { flex:1; color:var(--text-dim); }
.cq-qp    { color:var(--amber); font-size:10px; }

.daily-card { background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:8px; padding:10px; }
.daily-card.daily-done { border-color:rgba(74,170,80,0.3); background:rgba(74,170,80,0.04); }
.dc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.dc-name { font-size:12px; font-weight:700; color:var(--text); }
.dc-done-badge { font-size:9px; background:rgba(74,170,80,0.2); border:1px solid rgba(74,170,80,0.3); color:#4aaa60; padding:1px 6px; border-radius:8px; }
.dc-desc { font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.dc-prog-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; margin-bottom:5px; }
.dc-prog-fill { height:100%; background:var(--amber); border-radius:2px; transition:width 0.3s; }
.dc-reward { font-size:10px; color:var(--text-dim); }

/* ── POTION BELT OVERHAUL ────────────────────────────────── */
.potion-belt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 6px 0 4px;
}
.pb-slot {
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 6px 5px;
  text-align: center;
  font-size: 10px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pb-filled {
  background: rgba(74,138,62,0.10);
  border-color: rgba(74,138,62,0.35);
  cursor: pointer;
}
.pb-filled:hover, .pb-filled:active {
  background: rgba(74,138,62,0.22);
  border-color: #4a8a3e;
  transform: scale(1.02);
}
.pb-empty {
  background: rgba(255,255,255,0.02);
  border-style: dashed;
  cursor: default;
  justify-content: center;
  opacity: 0.5;
}
.pb-icon-wrap { line-height: 1; }
.pb-name { font-family:'Cinzel',serif; font-size:9px; color:var(--text); line-height:1.2; }
.pb-qty  { font-size:13px; color:#4a8a3e; font-weight:700; line-height:1; }
.pb-effect-line { font-size:8px; color:var(--text-dim); line-height:1.2; text-align:center; max-width:80px; }
.pb-empty-num   { font-size:16px; color:var(--text-dim); }
.pb-empty-label { font-size:9px; color:var(--text-dim); }
.pb-manage-btn  { font-size:10px; padding:3px 0; margin-top:3px; }
.cs-header-sub  { font-size:9px; color:var(--text-dim); margin-left:5px; font-style:italic; }

/* ── NAV SECTION COLLAPSIBLE ─────────────────────────────── */
.nav-header-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.15s;
}
.nav-header-toggle:hover { background: rgba(255,255,255,0.05); }
.nav-section-icon { font-size:13px; width:16px; text-align:center; }
.nav-section-label { flex: 1; }
.nav-chevron { font-size:13px; color:var(--text-dim); transition:transform 0.2s; }
.nav-section.nav-collapsed .nav-chevron { transform:rotate(-90deg); }
.nav-section.nav-collapsed .nav-section-items { display:none; }
.nav-section-items { padding-bottom: 3px; }

/* ── ACTION CARD: ITEM DESC ──────────────────────────────── */
.ac-output-name { font-weight:600; }
.ac-output-desc {
  display:block; font-size:9px; color:var(--text-dim); font-style:italic;
  margin-top:2px; line-height:1.3;
}
.ac-have { font-size:9px; color:var(--text-dim); margin-left:3px; }
.ac-desc {
  font-size:10px; color:var(--text-dim); font-style:italic;
  margin: 2px 0 4px; padding:3px 5px;
  background:rgba(255,255,255,0.02); border-radius:4px;
  border-left:2px solid rgba(201,135,62,0.3);
}
.loot-output { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.recipe-output { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* ── COMBAT EQUIPMENT PANEL ──────────────────────────────── */
.combat-equip-panel {
  background:rgba(0,0,0,0.2); border:1px solid var(--border);
  border-radius:10px; margin:8px 0; overflow:hidden;
}
.cep-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; cursor:pointer; font-size:12px; font-family:'Cinzel',serif;
  color:var(--text-dim); background:rgba(255,255,255,0.02); transition:background 0.2s;
}
.cep-header:hover { background:rgba(255,255,255,0.05); }
.cep-chevron { font-size:14px; transition:transform 0.2s; }
.combat-equip-panel.cep-collapsed .cep-body { display:none; }
.combat-equip-panel.cep-collapsed .cep-chevron { transform:rotate(-90deg); }
.cep-body { padding:8px 10px; }
.cep-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-bottom:8px;
}
.cep-slot {
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:6px; padding:4px 5px; text-align:center; min-height:48px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.cep-slot-label { font-size:8px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.cep-slot-item  { display:flex; flex-direction:column; align-items:center; gap:1px; }
.cep-icon { line-height:1; }
.cep-name { font-size:8px; color:var(--text); line-height:1.2; text-align:center; max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cep-ammo-qty { font-size:8px; color:#4a8a3e; font-weight:700; }
.cep-empty { font-size:12px; color:rgba(255,255,255,0.1); }
.cep-actions { display:flex; gap:4px; flex-wrap:wrap; }
.cep-actions .btn { flex:1; font-size:10px; padding:4px 3px; }

/* ── CLUE SCROLLS PAGE ───────────────────────────────────── */
.clue-active-panel {
  border:2px solid; border-radius:12px; padding:14px; margin-bottom:14px;
}
.cap-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cap-tier { font-family:'Cinzel',serif; font-size:14px; font-weight:700; }
.cap-progress { font-size:11px; color:var(--text-dim); }
.cap-step-bar { display:flex; gap:6px; margin-bottom:12px; }
.csb-step { width:28px; height:28px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-dim); }
.csb-step.csb-done { background:rgba(74,170,80,0.2); border-color:#4aaa60; color:#4aaa60; }
.csb-step.csb-current { background:rgba(201,135,62,0.15); border-color:var(--amber); color:var(--amber); font-weight:700; }
.cap-step-desc { background:rgba(0,0,0,0.2); border-radius:8px; padding:10px; }
.cap-step-num { font-size:11px; color:var(--text-dim); margin-right:6px; }
.cap-step-text { font-size:13px; color:var(--text); display:block; margin-bottom:8px; }
.cap-step-progress { display:flex; align-items:center; gap:8px; margin-top:6px; }
.cap-prog-bar { flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px; }
.cap-prog-fill { height:100%; border-radius:3px; transition:width 0.3s; }
.cap-prog-text { font-size:11px; color:var(--text-dim); white-space:nowrap; }

.clue-tier-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
.clue-tier-card { background:rgba(0,0,0,0.2); border:1px solid; border-radius:10px; padding:12px; }
.ctc-header { font-family:'Cinzel',serif; font-size:13px; font-weight:700; margin-bottom:8px; }
.ctc-row { display:flex; justify-content:space-between; font-size:12px; color:var(--text-dim); padding:2px 0; }
.ctc-done span:last-child { color:#4aaa60; font-weight:700; }
.ctc-steps { font-size:10px; color:var(--text-dim); margin-top:4px; }
.clue-empty { grid-column:1/-1; text-align:center; padding:20px; color:var(--text-dim); font-size:12px; border:1px dashed var(--border); border-radius:10px; line-height:1.6; }

.clue-sources { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cs-src { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:var(--text-dim); padding:6px; background:rgba(0,0,0,0.15); border-radius:6px; }
.cs-tier { font-size:10px; font-weight:700; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.easy-clr { background:rgba(212,168,58,0.15); color:#d4a83a; }
.med-clr  { background:rgba(74,144,212,0.15); color:#4a90d4; }
.hard-clr { background:rgba(196,64,64,0.15); color:#c44040; }
.elite-clr{ background:rgba(181,133,224,0.15); color:#b585e0; }

.clue-reward-preview { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.crp-tier { background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:8px; padding:10px; }
.crp-label { font-family:'Cinzel',serif; font-size:12px; font-weight:700; margin-bottom:6px; }
.crp-item { font-size:10px; color:var(--text-dim); padding:2px 0; }
.crp-more { font-style:italic; }

/* Equipment page slot actions */
.es-actions { display:flex; gap:3px; margin-top:4px; }

/* ── CHARACTER PAGE v2 ───────────────────────────────────── */
.char-page-wrap { display:flex; flex-direction:column; gap:14px; }

/* Hero Card */
.char-hero-card {
  display:flex; gap:18px; align-items:flex-start;
  background:linear-gradient(135deg,rgba(201,135,62,0.08),rgba(0,0,0,0.2));
  border:1px solid rgba(201,135,62,0.3); border-radius:14px; padding:18px;
}
.char-avatar-zone { position:relative; flex-shrink:0; }
.char-avatar-frame {
  width:100px; height:100px; border:3px solid var(--amber); border-radius:12px;
  overflow:hidden; background:var(--bg-deep); box-shadow:0 4px 20px rgba(201,135,62,0.2);
  position:relative;
}
.char-avatar-frame img { width:100%; height:100%; image-rendering:pixelated; display:block; }
.char-prestige-ring {
  position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  width:24px; height:24px; border-radius:50%; border:2px solid;
  background:var(--bg-deep); display:flex; align-items:center; justify-content:center;
  font-size:10px;
}
.char-online-dot {
  position:absolute; top:4px; right:4px; width:10px; height:10px;
  border-radius:50%; border:2px solid var(--bg-deep);
}
.dot-online  { background:#4aaa60; }
.dot-offline { background:#666; }

.char-hero-info { flex:1; min-width:0; }
.char-hero-name {
  font-family:'Cinzel',serif; font-size:18px; color:var(--text); margin-bottom:3px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.char-prestige-badge { font-size:11px; font-family:'Cinzel',serif; }
.char-hero-title { font-size:11px; color:var(--amber); margin-bottom:5px; font-style:italic; }
.char-hero-align { display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.char-align-chip {
  font-size:10px; padding:2px 8px; background:rgba(201,135,62,0.12);
  border:1px solid rgba(201,135,62,0.3); border-radius:8px; color:var(--amber);
}
.char-align-axis { font-size:10px; color:var(--text-dim); }
.char-bio-display {
  font-size:12px; color:var(--text-dim); font-style:italic; margin-bottom:10px;
  padding:6px 8px; background:rgba(0,0,0,0.15); border-radius:6px;
  border-left:2px solid rgba(201,135,62,0.3);
}
.char-bio-empty { color:rgba(255,255,255,0.2); }
.char-kpi-row { display:flex; flex-wrap:wrap; gap:8px; }
.char-kpi { text-align:center; min-width:48px; }
.char-kpi-val { font-family:'Cinzel',serif; font-size:15px; color:var(--amber); font-weight:700; }
.char-kpi-of  { font-size:11px; color:var(--text-dim); }
.char-kpi-lbl { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }

/* Section */
.char-section {
  background:rgba(0,0,0,0.15); border:1px solid var(--border);
  border-radius:12px; padding:14px;
}
.char-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.char-section-title { font-family:'Cinzel',serif; font-size:13px; color:var(--amber); }
.char-section-sub { font-size:10px; color:var(--text-dim); }

/* Customizer */
.char-customizer-layout { display:grid; grid-template-columns:120px 1fr; gap:14px; }
.char-preview-panel { text-align:center; }
.char-preview-img {
  width:120px; height:120px; image-rendering:pixelated; border:2px solid var(--amber);
  border-radius:10px; display:block; margin:0 auto 8px;
}
.char-preview-name { font-family:'Cinzel',serif; font-size:12px; color:var(--amber); }
.char-preview-rank { font-size:10px; color:var(--text-dim); font-style:italic; }
.char-options-panel { display:flex; flex-direction:column; gap:10px; }
.char-opt-row { display:flex; align-items:flex-start; gap:8px; }
.char-opt-label {
  width:80px; flex-shrink:0; font-size:10px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.5px; padding-top:5px;
}
.char-input {
  flex:1; padding:6px 10px; background:var(--bg-deep); border:1px solid var(--border);
  border-radius:6px; color:var(--text); font-size:12px;
}
.char-input:focus { outline:none; border-color:var(--amber); }
.char-bio-input { resize:vertical; min-height:60px; font-family:'Crimson Text',serif; }
.char-swatches { display:flex; flex-wrap:wrap; gap:5px; }
.char-swatch {
  width:24px; height:24px; border-radius:4px; border:2px solid transparent;
  cursor:pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.char-swatch:hover { transform:scale(1.15); border-color:rgba(255,255,255,0.4); }
.char-swatch.swatch-active { border-color:var(--amber) !important; box-shadow:0 0 6px rgba(201,135,62,0.5); transform:scale(1.1); }
.char-select-grid { display:flex; flex-wrap:wrap; gap:3px; }
.char-opt-btn {
  padding:3px 7px; font-size:10px; background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:4px; color:var(--text-dim); cursor:pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
.char-opt-btn:hover { background:rgba(255,255,255,0.08); color:var(--text); }
.char-opt-btn.opt-active { background:rgba(201,135,62,0.2); border-color:var(--amber); color:var(--amber); }
.char-save-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.char-save-btn { flex:1; font-family:'Cinzel',serif; }
.char-sync-btn { }
.char-save-status { font-size:11px; margin-left:4px; }

/* Stats Grid */
.char-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.csg-card {
  background:rgba(0,0,0,0.2); border:1px solid var(--border); border-radius:10px; padding:12px;
}
.csg-icon { font-size:20px; margin-bottom:4px; }
.csg-title { font-family:'Cinzel',serif; font-size:12px; color:var(--amber); margin-bottom:8px; }
.csg-row { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); padding:2px 0; }
.csg-val { color:var(--text); font-weight:600; }

/* Damage bar */
.char-dmg-bar-wrap { margin-top:8px; }
.char-dmg-title { font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.char-dmg-bar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:rgba(255,255,255,0.05); }
.char-dmg-seg { height:100%; transition:width 0.4s; }
.char-dmg-legend { display:flex; gap:10px; margin-top:5px; flex-wrap:wrap; }
.char-dmg-lbl { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text-dim); }
.char-dmg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Skill grid */
.char-skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cskill-group { }
.cskill-group-label { font-size:11px; color:var(--text-dim); margin-bottom:6px; font-style:italic; }
.cskill-row { display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.cskill-name { font-size:10px; color:var(--text-dim); width:58px; flex-shrink:0; }
.cskill-bar-outer { flex:1; height:5px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.cskill-bar-fill { height:100%; background:rgba(201,135,62,0.4); border-radius:3px; }
.cskill-mid .cskill-bar-fill  { background:rgba(201,135,62,0.6); }
.cskill-high .cskill-bar-fill { background:rgba(201,135,62,0.85); }
.cskill-max .cskill-bar-fill  { background:var(--amber); }
.cskill-lv { font-size:10px; color:var(--text-dim); width:22px; text-align:right; flex-shrink:0; }
.cskill-lv-max { color:var(--amber); font-weight:700; }

/* Monster list */
.char-monster-list { display:flex; flex-direction:column; gap:4px; }
.cml-row { display:flex; align-items:center; gap:8px; }
.cml-name { font-size:11px; color:var(--text-dim); width:120px; flex-shrink:0; }
.cml-bar-outer { flex:1; height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.cml-bar-fill { height:100%; background:rgba(196,64,64,0.6); border-radius:3px; }
.cml-count { font-size:11px; color:var(--text-dim); width:50px; text-align:right; }

/* ═══════════════════════════════════════════════════════════
   QUEST SYSTEM v3.0 — Enhanced Quest Journal + Dialogue
   ═══════════════════════════════════════════════════════════ */

/* QP Banner */
.qp-banner { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,rgba(201,135,62,0.12),rgba(201,135,62,0.04)); border:1px solid rgba(201,135,62,0.25); border-radius:8px; padding:14px 18px; margin-bottom:18px; }
.qp-crown { font-size:28px; flex-shrink:0; }
.qp-center { flex:1; }
.qp-num { font-family:'Cinzel',serif; font-size:22px; font-weight:700; color:var(--amber); }
.qp-of { font-size:13px; color:var(--text-dim); font-weight:400; }
.qp-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.qp-bar-wrap { margin-top:6px; }
.qp-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.qp-fill { height:100%; background:linear-gradient(90deg,var(--amber),#e8a840); border-radius:3px; transition:width 0.4s; }
.qp-progress-tag { font-size:11px; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }

/* Quest Filter Bar */
.quest-filter-bar { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.quest-search { background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:4px; padding:6px 10px; font-size:12px; color:var(--text); font-family:inherit; outline:none; }
.quest-search:focus { border-color:rgba(201,135,62,0.5); }
.quest-search::placeholder { color:var(--text-dim); }
.quest-diff-filters { display:flex; flex-wrap:wrap; gap:4px; }
.qdf-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:3px 10px; font-size:11px; color:var(--text-dim); cursor:pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; font-family:inherit; }
.qdf-btn:hover { border-color:var(--dc); color:var(--dc); }
.qdf-btn.qdf-active { background:rgba(201,135,62,0.15); border-color:var(--dc); color:var(--dc); font-weight:700; }

/* Quest Card Enhancements */
.qcf-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px; }
.qcf-diff { font-size:11px; font-weight:700; }
.qcf-stage-label { font-size:10px; color:var(--text-dim); background:rgba(201,135,62,0.15); padding:1px 8px; border-radius:10px; }
.qcf-journal { font-size:12px; color:var(--text); font-style:italic; margin-bottom:10px; padding:8px 10px; background:rgba(255,255,255,0.03); border-left:2px solid var(--amber); border-radius:0 4px 4px 0; }
.qcf-qp-badge { font-size:12px; color:var(--amber); font-weight:700; margin-left:auto; background:rgba(201,135,62,0.12); padding:2px 10px; border-radius:10px; white-space:nowrap; }
.qcf-rewards-block { padding-top:8px; border-top:1px solid rgba(255,255,255,0.06); }
.qcf-rewards-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.qcf-rewards-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11px; }
.qcf-qp-reward { color:var(--amber); font-weight:700; }
.qcf-unlocks { font-size:10px; color:#5aafff; margin-top:4px; font-style:italic; }
.dc-done-badge { font-size:10px; color:#7dcc44; background:rgba(90,175,62,0.15); padding:1px 8px; border-radius:10px; }
.dc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }

/* Available Quest Card Enhancements */
.qa-header { display:flex; align-items:flex-start; gap:8px; width:100%; }
.qa-header > div { flex:1; }
.qa-meta { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:2px; }
.qa-series { font-size:10px; color:var(--text-dim); }
.qa-diff { font-size:11px; font-weight:700; }
.qa-length { font-size:10px; color:var(--text-dim); background:rgba(255,255,255,0.05); padding:1px 6px; border-radius:8px; }
.qa-combat { font-size:10px; color:#cc6666; }
.qa-preview-rewards { font-size:10px; color:var(--text-dim); width:100%; display:flex; flex-wrap:wrap; gap:8px; margin:4px 0; }

/* Locked Quest Card */
.locked-quest-grid { display:flex; flex-direction:column; gap:4px; }
.locked-quest-card { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:4px; opacity:0.6; }
.lqc-header { display:flex; justify-content:space-between; align-items:center; width:100%; }
.lqc-name { font-family:'Cinzel',serif; font-size:12px; color:var(--text-dim); }
.lqc-diff { font-size:10px; font-weight:700; }
.lqc-req { font-size:10px; color:#cc6666; width:100%; }
.lqc-qp { font-size:10px; color:var(--amber); margin-left:auto; }

/* Completed Quest Enhancements */
.cq-diff { font-size:10px; margin-right:4px; }

/* Dialogue Prompt Button */
.qo-dialogue-prompt { padding:8px; text-align:center; }
.qo-dialogue-prompt .btn { background:rgba(201,135,62,0.2); border-color:var(--amber); color:var(--amber); }
.qo-dialogue-prompt .btn:hover { background:rgba(201,135,62,0.35); }

/* Quest Dialogue Modal */
.quest-dialogue-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; padding:20px; animation:qd-fadein 0.3s; }
@keyframes qd-fadein { from{opacity:0} to{opacity:1} }
.quest-dialogue-modal { background:var(--bg-deep,#0a0b0f); border:1px solid rgba(201,135,62,0.4); border-radius:10px; max-width:520px; width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 30px rgba(201,135,62,0.1); }
.qdm-header { padding:14px 18px; border-bottom:1px solid rgba(201,135,62,0.2); display:flex; justify-content:space-between; align-items:center; }
.qdm-quest-name { font-family:'Cinzel',serif; font-size:16px; font-weight:700; }
.qdm-stage { font-size:11px; color:var(--text-dim); }
.qdm-body { padding:18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:12px; max-height:50vh; }
.qdm-line { padding:8px 12px; border-radius:6px; font-size:13px; line-height:1.5; font-family:'Crimson Text',serif; }
.qdm-npc { background:rgba(201,135,62,0.08); border-left:3px solid var(--amber); }
.qdm-player { background:rgba(90,175,62,0.08); border-left:3px solid #7dcc44; text-align:right; }
.qdm-narrator { background:rgba(255,255,255,0.03); border-left:3px solid rgba(255,255,255,0.15); font-style:italic; color:var(--text-dim); }
.qdm-speaker { font-family:'Cinzel',serif; font-size:12px; font-weight:700; color:var(--amber); display:block; margin-bottom:4px; }
.qdm-player .qdm-speaker { color:#7dcc44; }
.qdm-text { color:var(--text); }
.qdm-narrator .qdm-text { color:var(--text-dim); }
.qdm-footer { padding:12px 18px; border-top:1px solid rgba(255,255,255,0.06); display:flex; justify-content:flex-end; gap:8px; }
.qdm-btn { background:rgba(201,135,62,0.2); border:1px solid var(--amber); color:var(--amber); padding:6px 18px; border-radius:4px; cursor:pointer; font-family:inherit; font-size:12px; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.qdm-btn:hover { background:rgba(201,135,62,0.4); }
.qdm-choices { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.qdm-choice-btn { background:rgba(90,175,62,0.1); border:1px solid rgba(90,175,62,0.3); color:#7dcc44; padding:8px 14px; border-radius:5px; cursor:pointer; font-family:'Crimson Text',serif; font-size:13px; text-align:left; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.qdm-choice-btn:hover { background:rgba(90,175,62,0.25); border-color:#7dcc44; }

.qs-title { font-family:'Cinzel',serif; font-size:14px; color:var(--text); }

/* Turn In Quest Button */
.btn-turnin { background:rgba(90,175,62,0.25) !important; border-color:#7dcc44 !important; color:#7dcc44 !important; font-weight:700; animation:turnin-pulse 1.5s ease-in-out infinite; }
.btn-turnin:hover { background:rgba(90,175,62,0.45) !important; }
@keyframes turnin-pulse { 0%,100%{box-shadow:0 0 4px rgba(90,175,62,0.3)} 50%{box-shadow:0 0 12px rgba(90,175,62,0.6)} }

/* ═══════════════════════════════════════════════════════════
   MUSIC PLAYER — floating widget, bottom-right
   ═══════════════════════════════════════════════════════════ */
#af-music-player { position:fixed; bottom:16px; right:16px; z-index:9000; display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:none; }
#af-music-player > * { pointer-events:auto; }

.afm-toggle { width:38px; height:38px; border-radius:50%; background:rgba(10,11,15,0.85); border:1px solid rgba(201,135,62,0.35); color:var(--amber); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s; backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(0,0,0,0.5); }
.afm-toggle:hover { border-color:var(--amber); background:rgba(201,135,62,0.15); transform:scale(1.08); }
.afm-toggle.afm-active { border-color:var(--amber); background:rgba(201,135,62,0.2); }
.afm-icon { transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, transform 0.3s; display:inline-block; }
.afm-icon.afm-playing { animation:afm-pulse 2s ease-in-out infinite; color:#e8a840; }
@keyframes afm-pulse { 0%,100%{opacity:0.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }

.afm-panel { background:rgba(10,11,15,0.92); border:1px solid rgba(201,135,62,0.25); border-radius:8px; padding:0; max-height:0; overflow:hidden; opacity:0; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; width:220px; backdrop-filter:blur(12px); box-shadow:0 4px 20px rgba(0,0,0,0.6); }
.afm-panel.afm-open { max-height:140px; opacity:1; padding:10px 12px; }

.afm-track { font-family:'Cinzel',serif; font-size:11px; color:var(--amber); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px; text-align:center; letter-spacing:0.3px; }

.afm-controls { display:flex; align-items:center; gap:8px; }
.afm-play { width:28px; height:28px; border-radius:50%; background:rgba(201,135,62,0.15); border:1px solid rgba(201,135,62,0.3); color:var(--amber); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; flex-shrink:0; padding:0; }
.afm-play:hover { background:rgba(201,135,62,0.3); border-color:var(--amber); }

.afm-vol-wrap { display:flex; align-items:center; gap:4px; flex:1; min-width:0; }
.afm-vol-icon { font-size:11px; flex-shrink:0; }
.afm-vol { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:rgba(255,255,255,0.1); border-radius:2px; outline:none; cursor:pointer; }
.afm-vol::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--amber); cursor:pointer; border:none; }
.afm-vol::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--amber); cursor:pointer; border:none; }
.afm-vol-pct { font-size:10px; color:var(--text-dim); width:28px; text-align:right; flex-shrink:0; }

.afm-progress-wrap { display:flex; align-items:center; gap:6px; margin-top:8px; }
.afm-progress { flex:1; height:3px; background:rgba(255,255,255,0.08); border-radius:2px; cursor:pointer; overflow:hidden; }
.afm-progress-fill { height:100%; background:linear-gradient(90deg,rgba(201,135,62,0.5),var(--amber)); border-radius:2px; width:0; transition:width 0.3s linear; }
.afm-time { font-size:9px; color:var(--text-dim); width:30px; text-align:right; flex-shrink:0; }

/* Mobile: smaller, tighter */
@media(max-width:600px) {
  #af-music-player { bottom:70px; right:10px; }
  .afm-toggle { width:32px; height:32px; font-size:13px; }
  .afm-panel { width:190px; }
}

/* ═══════════════════════════════════════════════════════════
   ACTIVITY PAGE — Real-time event tracking
   ═══════════════════════════════════════════════════════════ */

.activity-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(201, 135, 62, 0.08);
  border: 1px solid rgba(201, 135, 62, 0.2);
  border-radius: 6px;
}

.as-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: var(--text);
}

.as-row span:first-child {
  color: var(--text-dim);
  font-size: 12px;
}

.as-row span:last-child {
  color: var(--amber);
  font-weight: bold;
  font-size: 15px;
}

.activity-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.activity-search-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 135, 62, 0.3);
  color: var(--text);
  border-radius: 4px;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
}

.activity-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--amber);
}

.activity-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.activity-filter-btn {
  padding: 6px 12px;
  background: rgba(201, 135, 62, 0.1);
  border: 1px solid rgba(201, 135, 62, 0.3);
  color: var(--amber);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Cinzel', serif;
  transition: all 0.2s ease;
}

.activity-filter-btn:hover,
.activity-filter-btn.active {
  background: rgba(201, 135, 62, 0.2);
  border-color: var(--amber);
}

.activity-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(201, 135, 62, 0.15);
  border-radius: 4px;
}

.activity-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: var(--text);
}

.ae-icon {
  flex-shrink: 0;
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.ae-message {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ae-skill {
  background: rgba(201, 135, 62, 0.2);
  color: var(--amber);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin-left: 8px;
  white-space: nowrap;
}

.ae-time {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 11px;
  min-width: 50px;
  text-align: right;
}

.ae-combat { border-left: 2px solid #e8a840; }
.ae-skill { border-left: 2px solid #7dcc44; }
.ae-item { border-left: 2px solid #60c0e0; }
.ae-quest { border-left: 2px solid #d4a574; }
.ae-system { border-left: 2px solid #c9873e; }
.ae-social { border-left: 2px solid #9d6fe8; }
.ae-drop { border-left: 2px solid #ffd700; }

.skill-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.sag-card {
  padding: 12px;
  background: rgba(201, 135, 62, 0.08);
  border: 1px solid rgba(201, 135, 62, 0.2);
  border-radius: 4px;
  text-align: center;
}

.sag-icon {
  font-size: 20px;
  margin-bottom: 6px;
}

.sag-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--amber);
  margin-bottom: 8px;
}

.sag-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: var(--text-dim);
}

.sag-stats span {
  color: var(--amber);
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════
   UPGRADES PAGE — Improved styling
   ═══════════════════════════════════════════════════════════ */

.upgrades-page {
  padding: 20px;
}

.upgrades-section {
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(201, 135, 62, 0.06);
  border: 1px solid rgba(201, 135, 62, 0.15);
  border-radius: 6px;
}

.upgrades-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--amber);
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(201, 135, 62, 0.2);
  padding-bottom: 8px;
}

.upgrades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.upgrade-card {
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 135, 62, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upgrade-card:hover {
  background: rgba(201, 135, 62, 0.15);
  border-color: var(--amber);
}

.upgrade-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--amber);
  margin-bottom: 6px;
}

.upgrade-desc {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.upgrade-cost {
  margin-top: 8px;
  font-family: 'Crimson Text', serif;
  font-size: 12px;
  color: var(--text);
}

.upgrade-cost span {
  color: #7dcc44;
  font-weight: bold;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL SMART SEARCH BAR
   ═══════════════════════════════════════════════════════════ */

.global-search-bar {
  position: relative;
  margin: 12px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 135, 62, 0.15);
}

.gsi-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 135, 62, 0.3);
  color: var(--text);
  border-radius: 4px;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.gsi-input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(201, 135, 62, 0.2);
}

.gsi-input::placeholder {
  color: var(--text-dim);
  font-size: 12px;
}

.gsi-results {
  position: absolute;
  top: 100%;
  left: 10px;
  right: 10px;
  margin-top: 4px;
  background: rgba(10, 11, 15, 0.95);
  border: 1px solid rgba(201, 135, 62, 0.3);
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.gsr-list {
  display: flex;
  flex-direction: column;
}

.gsr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(201, 135, 62, 0.1);
}

.gsr-item:hover {
  background: rgba(201, 135, 62, 0.15);
}

.gsr-item:last-child {
  border-bottom: none;
}

.gsr-icon {
  flex-shrink: 0;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.gsr-info {
  flex: 1;
  min-width: 0;
}

.gsr-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsr-category {
  font-family: 'Crimson Text', serif;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsr-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-dim);
  font-family: 'Crimson Text', serif;
  font-size: 12px;
}


/* ── MANA BAR ─────────────────────────────────────────────── */
.ca-mana-container { margin:4px 0 6px; }
.ca-mana-bar { height:12px; background:var(--bg-deep); border-radius:6px; overflow:hidden; border:1px solid rgba(74,126,196,0.3); position:relative; }
.ca-mana-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#2a5a9e,#4a8adc); transition:width 0.2s ease-out; box-shadow:0 0 6px rgba(74,126,196,0.4); }
.ca-mana-text { font-family:'JetBrains Mono',monospace; font-size:10px; color:#4a7ec4; text-align:center; margin-top:2px; opacity:0.85; }

/* ── ABILITY MANA INDICATOR ───────────────────────────────── */
.ab-mana-cost { font-size:9px; color:#4a7ec4; font-family:'JetBrains Mono',monospace; margin-top:2px; opacity:0.8; }
.ab-no-mana { opacity:0.5; }
.ab-no-mana .ab-timer { color:#c44040 !important; }

/* ── ABILITY BAR POLISH ───────────────────────────────────── */
.ab-slot-v2 { position:relative; overflow:hidden; transition:transform 0.1s,box-shadow 0.1s; }
.ab-slot-v2:hover:not(.ab-cd):not(.ab-no-mana) { transform:translateY(-2px); box-shadow:0 4px 12px rgba(201,135,62,0.3); }
.ab-slot-v2:active:not(.ab-cd) { transform:scale(0.96); }

/* ── EQUIPMENT BONUSES PANEL ──────────────────────────────── */
.eq-bonus-panel { background:var(--bg-mid); border:1px solid var(--border); border-radius:8px; padding:12px; margin:8px 0; }
.eq-bonus-title { font-family:'Cinzel',serif; font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.eq-bonus-grid { display:flex; flex-wrap:wrap; gap:6px; }
.eq-bonus-chip { display:flex; flex-direction:column; align-items:center; background:var(--bg-deep); border-radius:6px; padding:5px 8px; min-width:44px; border:1px solid var(--border); }
.eq-bonus-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; }
.eq-bonus-val { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:bold; }

/* ── XP RATES PANEL ───────────────────────────────────────── */
.xp-rate-panel { background:var(--bg-mid); border:1px solid var(--border); border-radius:8px; padding:12px; margin:8px 0; }
.xp-rate-title { font-family:'Cinzel',serif; font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; display:flex; justify-content:space-between; }
.xp-rate-time { font-family:'JetBrains Mono',monospace; font-size:10px; color:#c9873e; }
.xp-rate-grid { display:flex; flex-direction:column; gap:3px; }
.xr-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.xr-row:last-child { border:none; }
.xr-skill { font-size:12px; color:var(--text); }
.xr-val { font-family:'JetBrains Mono',monospace; font-size:11px; color:#c9873e; }
.xr-empty { color:var(--text-dim); font-size:12px; font-style:italic; text-align:center; padding:8px; }

/* ── MANA BAR POLISH ──────────────────────────────────────── */
.ca-mana-container { margin:3px 0 5px; }
.ca-mana-bar { height:10px; background:var(--bg-deep); border-radius:5px; overflow:hidden; border:1px solid rgba(74,126,196,0.25); }
.ca-mana-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#1a4a8e,#3a7adc); transition:width 0.15s ease-out; }
.ca-mana-text { font-family:'JetBrains Mono',monospace; font-size:10px; color:#4a7ec4; text-align:center; margin-top:2px; opacity:0.8; }

/* ── ABILITY MANA STATE ───────────────────────────────────── */
.ab-slot-v2.ab-no-mana { opacity:0.45; filter:grayscale(0.5); }
.ab-mana-cost { font-size:9px; color:#4a7ec4; font-family:'JetBrains Mono',monospace; letter-spacing:0; margin-top:1px; }

/* ════════════════════════════════════════════════════════════
   COMBAT V3 — TWO-COLUMN LAYOUT
   ════════════════════════════════════════════════════════════ */

.cv3-page { display:grid; grid-template-columns:1fr 300px; gap:14px; align-items:start; padding-bottom:40px; }
.cv3-main  { min-width:0; }
.cv3-sidebar { display:flex; flex-direction:column; gap:10px; position:sticky; top:0; max-height:100vh; overflow-y:auto; scrollbar-width:thin; }
.cv3-sidebar::-webkit-scrollbar { width:4px; }
.cv3-sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ── SIDEBAR CARD BASE ──────────────────────────────────────── */
.cv3s-card { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.cv3s-title { font-family:'Cinzel',serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; display:block; }

/* ── XP MODE ─────────────────────────────────────────────────── */
.cv3s-xpmode { display:flex; gap:4px; flex-wrap:wrap; }
.cv3s-mode-btn { flex:1; min-width:0; padding:5px 4px; font-size:11px; font-family:'Cinzel',serif; background:var(--bg-deep); border:1px solid var(--border); border-radius:5px; color:var(--text-dim); cursor:pointer; transition:all 0.15s; }
.cv3s-mode-btn:hover { border-color:#c9873e; color:#c9873e; }
.cv3s-mode-active { background:rgba(201,135,62,0.15)!important; border-color:#c9873e!important; color:#c9873e!important; }
.cv3s-mode-info { font-size:11px; color:var(--text-dim); }

/* ── SESSION LOOT ────────────────────────────────────────────── */
.cv3s-loot-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cv3s-kills-badge { font-family:'Cinzel',serif; font-size:10px; color:#c9873e; background:rgba(201,135,62,0.12); border:1px solid rgba(201,135,62,0.25); border-radius:10px; padding:2px 8px; }
.cv3s-loot-items { display:flex; flex-direction:column; gap:3px; max-height:180px; overflow-y:auto; }
.cv3s-loot-row { display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:4px; font-size:12px; }
.cv3s-loot-row:hover { background:rgba(255,255,255,0.04); }
.cv3s-li-icon { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cv3s-li-name { flex:1; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv3s-li-qty { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); flex-shrink:0; }
.cv3s-gold .cv3s-li-name { color:#d4a83a; }
.cv3s-legendary .cv3s-li-name { color:#c9873e; }
.cv3s-epic      .cv3s-li-name { color:#9b59b6; }
.cv3s-rare      .cv3s-li-name { color:#3498db; }
.cv3s-loot-empty { color:var(--text-dim); font-size:12px; font-style:italic; text-align:center; padding:8px 0; }
.cv3s-view-more { width:100%; margin-top:4px; padding:4px; font-size:11px; background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--text-dim); cursor:pointer; }
.cv3s-view-more:hover { border-color:#c9873e; color:#c9873e; }

/* ── DAMAGE TRACKER ──────────────────────────────────────────── */
.cv3s-dt-header { display:flex; justify-content:space-between; align-items:center; }
.cv3s-reset-btn { font-size:10px; padding:2px 8px; background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--text-dim); cursor:pointer; }
.cv3s-reset-btn:hover { border-color:#c44040; color:#c44040; }
.cv3s-dt-rows { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.cv3s-dt-row { display:grid; grid-template-columns:52px 1fr 52px; align-items:center; gap:6px; }
.cv3s-dt-label { font-size:11px; color:var(--text-dim); }
.cv3s-dt-bar-wrap { height:8px; background:var(--bg-deep); border-radius:4px; overflow:hidden; }
.cv3s-dt-bar { height:100%; border-radius:4px; transition:width 0.3s ease-out; min-width:2px; }
.cv3s-dt-val { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text); text-align:right; }
.cv3s-dt-total { display:flex; justify-content:space-between; padding:5px 0 0; border-top:1px solid var(--border); margin-top:2px; font-size:12px; color:var(--text); font-weight:600; }
.cv3s-dt-taken { color:var(--text-dim); font-size:11px; font-weight:400; padding-top:2px; border:none; margin-top:0; }
.cv3s-dt-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.cv3s-meta-chip { display:flex; flex-direction:column; align-items:center; background:var(--bg-deep); border-radius:5px; padding:4px; }
.cv3s-meta-lbl { font-size:9px; color:var(--text-dim); letter-spacing:1px; }
.cv3s-meta-chip > span:last-child { font-family:'JetBrains Mono',monospace; font-size:12px; color:#c9873e; margin-top:1px; }

/* ── SESSION STATS ───────────────────────────────────────────── */
.cv3s-ss-header { display:flex; justify-content:space-between; align-items:center; }
.cv3s-timer { font-family:'JetBrains Mono',monospace; font-size:10px; color:#c9873e; margin-left:8px; }
.cv3s-ss-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:4px; }
.cv3s-ss-box { background:var(--bg-deep); border-radius:6px; padding:7px 8px; text-align:center; }
.cv3s-ss-val { font-family:'JetBrains Mono',monospace; font-size:13px; color:#c9873e; font-weight:600; }
.cv3s-ss-lbl { font-size:9px; color:var(--text-dim); letter-spacing:0.5px; text-transform:uppercase; margin-top:2px; }
.cv3s-xr-rows { display:flex; flex-direction:column; gap:2px; margin-top:8px; padding-top:6px; border-top:1px solid var(--border); }
.cv3s-xr-row { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); padding:2px 0; }
.cv3s-xr-val { font-family:'JetBrains Mono',monospace; color:#c9873e; }
.cv3s-xr-empty { font-size:11px; color:var(--text-dim); font-style:italic; text-align:center; padding:6px 0; }

/* ── AREA CARD ────────────────────────────────────────────────── */
.cv3s-area-card { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:14px; overflow:hidden; position:relative; }
.cv3s-area-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,135,62,0.04),rgba(10,11,15,0.8)); pointer-events:none; }
.cv3s-area-name { font-family:'Cinzel',serif; font-size:14px; color:#c9873e; margin-bottom:2px; }
.cv3s-area-level { font-size:10px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.cv3s-area-desc { font-size:11px; color:var(--text-dim); line-height:1.5; margin-bottom:10px; }
.cv3s-area-btn { width:100%; font-size:11px; }

/* ── HIDE OLD STANDALONE PANELS (now in sidebar) ────────────── */
.dmg-tracker-panel, .xp-rate-panel { display:none; }

/* ── RESPONSIVE: single column on narrow ─────────────────────── */
@media (max-width:900px) {
  .cv3-page { grid-template-columns:1fr; }
  .cv3-sidebar { position:static; max-height:none; }
}

/* ════════════════════════════════════════════════════════════
   ARENA V3
   ════════════════════════════════════════════════════════════ */

.arena-v3 { background:linear-gradient(160deg,#0d0e12,#12090a); border:1px solid rgba(255,255,255,0.07); border-radius:12px; overflow:hidden; margin-bottom:12px; }

/* Top HP bar spanning full width */
.arena-top-bar { display:flex; align-items:center; gap:8px; padding:8px 14px; background:rgba(0,0,0,0.4); border-bottom:1px solid rgba(255,255,255,0.06); }
.atb-name { font-family:'Cinzel',serif; font-size:13px; color:#e0c090; white-space:nowrap; min-width:120px; }
.atb-hp-track { flex:1; height:14px; background:rgba(0,0,0,0.5); border-radius:7px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.atb-hp-fill { height:100%; border-radius:6px; transition:width 0.2s ease-out; box-shadow:0 0 8px currentColor; }
.atb-hp-text { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); white-space:nowrap; }
.atb-pct { font-family:'JetBrains Mono',monospace; font-size:12px; color:#c44040; font-weight:600; min-width:36px; text-align:right; }
.atb-phase { font-family:'Cinzel',serif; font-size:10px; padding:2px 8px; background:rgba(196,64,64,0.2); border:1px solid rgba(196,64,64,0.4); border-radius:10px; color:#c44040; white-space:nowrap; }
.atb-enrage { background:rgba(255,100,0,0.2)!important; border-color:rgba(255,100,0,0.5)!important; color:#ff6400!important; animation:enragePulse 1s ease-in-out infinite; }
@keyframes enragePulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* Main arena body */
.arena-main { display:grid; grid-template-columns:200px 1fr 200px; min-height:160px; }

/* Player column */
.arena-player { padding:14px; display:flex; flex-direction:column; gap:6px; border-right:1px solid rgba(255,255,255,0.05); }
.arena-player-top { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.arena-avatar-wrap { position:relative; display:inline-block; margin-bottom:2px; }
.arena-avatar { border-radius:50%; border:2px solid rgba(201,135,62,0.3); box-shadow:0 0 12px rgba(201,135,62,0.2); }
.arena-style-badge { position:absolute; bottom:-2px; right:-2px; background:#0a0b0f; border:1px solid var(--border); border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:10px; }
.arena-overhead-prayer { font-size:18px; margin-bottom:2px; }
.arena-pname { font-family:'Cinzel',serif; font-size:13px; color:#e0c090; }
.arena-plevel { font-size:10px; color:var(--text-dim); letter-spacing:0.5px; }

/* Bar rows */
.arena-bars { display:flex; flex-direction:column; gap:5px; }
.arena-bar-row { display:flex; align-items:center; gap:6px; }
.arena-bar-icon { font-size:11px; width:14px; text-align:center; flex-shrink:0; }
.arena-bar-track { flex:1; height:12px; background:rgba(0,0,0,0.5); border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); }
.arena-bar-fill { height:100%; border-radius:5px; transition:width 0.15s ease-out; }
.arena-bar-text { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); white-space:nowrap; min-width:60px; text-align:right; }
.arena-status { display:flex; flex-wrap:wrap; gap:3px; margin-top:2px; min-height:18px; }
.arena-status-right { justify-content:flex-end; }

/* Center column */
.arena-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 8px; }
.arena-vs { font-family:'Cinzel',serif; font-size:28px; color:#c9873e; text-shadow:0 0 20px rgba(201,135,62,0.5); letter-spacing:4px; line-height:1; }
.arena-center-stats { display:flex; flex-direction:column; gap:4px; width:100%; }
.arena-stat-line { display:flex; justify-content:space-between; gap:8px; font-size:11px; }
.arena-stat-label { color:var(--text-dim); }
.arena-stat-val { font-family:'JetBrains Mono',monospace; color:var(--text); }
.arena-weakness { font-size:10px; color:#e0c090; background:rgba(224,192,144,0.1); border:1px solid rgba(224,192,144,0.2); border-radius:6px; padding:3px 7px; text-align:center; }
.arena-flee-btn { padding:5px 12px; background:transparent; border:1px solid rgba(196,64,64,0.4); border-radius:5px; color:#c44040; font-size:11px; cursor:pointer; transition:all 0.15s; font-family:'Cinzel',serif; letter-spacing:0.5px; }
.arena-flee-btn:hover { background:rgba(196,64,64,0.15); border-color:#c44040; }

/* Monster column */
.arena-monster { padding:14px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; border-left:1px solid rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.arena-monster-art { font-size:0; max-width:120px; max-height:120px; overflow:hidden; align-self:center; filter:drop-shadow(0 0 16px rgba(139,0,0,0.4)); }
.arena-monster-art svg, .arena-monster-art img { max-width:120px; max-height:120px; }
.arena-mon-placeholder { width:80px; height:80px; display:flex; align-items:center; justify-content:center; opacity:0.3; }
.arena-mon-name { font-family:'Cinzel',serif; font-size:13px; color:#e0c090; text-align:right; }
.arena-mon-level { font-size:10px; color:var(--text-dim); text-align:right; letter-spacing:0.5px; }

/* ════════════════════════════════════════════════════════════
   ABILITY BAR V3
   ════════════════════════════════════════════════════════════ */

.ability-bar-v3 { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:12px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
.ab3-section-label { font-family:'Cinzel',serif; font-size:10px; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.ab3-specials { display:flex; flex-wrap:wrap; gap:8px; }

.ab3-btn { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 12px; min-width:88px; background:var(--bg-mid); border:1px solid rgba(255,255,255,0.1); border-radius:8px; cursor:pointer; overflow:hidden; transition:transform 0.1s,border-color 0.2s,box-shadow 0.2s; }
.ab3-btn:hover:not(.ab3-cd):not(.ab3-no-mana) { border-color:#c9873e; box-shadow:0 0 14px rgba(201,135,62,0.2); transform:translateY(-2px); }
.ab3-btn:active:not(.ab3-cd) { transform:scale(0.95); }
.ab3-cd { opacity:0.65; }
.ab3-no-mana { opacity:0.45; filter:grayscale(0.6); }

/* Cooldown sweep overlay */
.ab3-cd-sweep { position:absolute; inset:0; background:rgba(0,0,0,0.55); transform-origin:top; clip-path:inset(0 0 calc(100% - var(--sweep,0%)) 0); pointer-events:none; border-radius:8px; }

.ab3-icon { font-size:20px; line-height:1; }
.ab3-name { font-family:'Cinzel',serif; font-size:10px; color:var(--text); letter-spacing:0.3px; text-align:center; white-space:nowrap; }
.ab3-status { font-family:'JetBrains Mono',monospace; font-size:10px; }
.ab3-ready { color:#4abe6c; }
.ab3-cooling { color:#c9873e; }
.ab3-nomana { color:#c44040; }
.ab3-mana { font-size:9px; color:#4a7ec4; font-family:'JetBrains Mono',monospace; }
.ab3-empty { color:var(--text-dim); font-size:12px; font-style:italic; padding:8px 0; }

/* Active buff chips strip */
.ab3-buffs { display:flex; flex-wrap:wrap; gap:5px; padding-top:6px; border-top:1px solid rgba(255,255,255,0.05); }
.ab3-buff-chip { display:flex; flex-direction:column; gap:2px; background:var(--bg-deep); border:1px solid rgba(255,255,255,0.08); border-radius:5px; padding:3px 7px; min-width:70px; }
.ab3-bc-label { font-size:9px; color:#c9873e; white-space:nowrap; text-align:center; }
.ab3-bc-bar { height:3px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.ab3-bc-fill { height:100%; background:#c9873e; border-radius:2px; transition:width 0.5s; }

/* ════════════════════════════════════════════════════════════
   PRAYER V3
   ════════════════════════════════════════════════════════════ */

.prayer-v3 { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.pv3-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pv3-title { font-family:'Cinzel',serif; font-size:12px; color:var(--text); white-space:nowrap; }
.pv3-pp-wrap { flex:1; display:flex; align-items:center; gap:6px; }
.pv3-pp-bar { flex:1; height:8px; background:var(--bg-deep); border-radius:4px; overflow:hidden; border:1px solid rgba(212,168,58,0.2); }
.pv3-pp-fill { height:100%; background:linear-gradient(90deg,#8a6010,#d4a83a); border-radius:4px; transition:width 0.3s; }
.pv3-pp-text { font-family:'JetBrains Mono',monospace; font-size:10px; color:#d4a83a; white-space:nowrap; }
.pv3-slots { font-size:10px; color:var(--text-dim); white-space:nowrap; }
.pv3-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; }
.pv3-btn { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px; background:var(--bg-deep); border:1px solid rgba(255,255,255,0.07); border-radius:7px; cursor:pointer; transition:all 0.15s; overflow:hidden; }
.pv3-btn:hover { border-color:rgba(212,168,58,0.4); background:rgba(212,168,58,0.06); }
.pv3-active { border-color:rgba(212,168,58,0.6)!important; background:rgba(212,168,58,0.1)!important; box-shadow:0 0 10px rgba(212,168,58,0.15); }
.pv3-btn-icon { font-size:16px; }
.pv3-btn-name { font-size:9px; color:var(--text); text-align:center; line-height:1.3; font-family:'Cinzel',serif; }
.pv3-btn-meta { display:flex; gap:4px; align-items:center; }
.pv3-tier { font-size:8px; color:var(--text-dim); background:rgba(255,255,255,0.06); border-radius:3px; padding:1px 3px; }
.pv3-cost { font-size:8px; color:#d4a83a; font-family:'JetBrains Mono',monospace; }
.pv3-active-glow { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(212,168,58,0.1),transparent 70%); pointer-events:none; }
.pv3-empty { color:var(--text-dim); font-size:12px; font-style:italic; text-align:center; padding:8px; }

/* ════════════════════════════════════════════════════════════
   RUNE POUCH V3
   ════════════════════════════════════════════════════════════ */

.rune-pouch-section .rune-pouch-grid { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 4px; }
.rp3-rune { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 7px; background:var(--bg-deep); border:1px solid rgba(255,255,255,0.07); border-radius:6px; cursor:default; transition:transform 0.1s; }
.rp3-rune:hover { transform:translateY(-2px); }
.rp3-icon { width:22px; height:22px; filter:drop-shadow(0 0 4px currentColor); }
.rp3-qty { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); }

/* ════════════════════════════════════════════════════════════
   GEAR STRIP V3
   ════════════════════════════════════════════════════════════ */

.gear-strip-v3 { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.gs3-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:6px; }
.gs3-title { font-family:'Cinzel',serif; font-size:11px; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase; }
.gs3-bonuses { display:flex; gap:8px; flex-wrap:wrap; }
.gs3-bonus { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; }
.gs3-slots { display:flex; flex-wrap:wrap; gap:6px; }
.gs3-slot { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 6px; min-width:62px; background:var(--bg-deep); border:1px solid rgba(255,255,255,0.07); border-radius:7px; cursor:default; transition:border-color 0.15s; }
.gs3-filled { border-color:rgba(201,135,62,0.2); }
.gs3-filled:hover { border-color:rgba(201,135,62,0.5); background:rgba(201,135,62,0.05); }
.gs3-slot-label { font-size:9px; color:var(--text-dim); letter-spacing:0.5px; text-transform:uppercase; }
.gs3-slot-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.gs3-slot-name { font-size:10px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60px; text-align:center; }
.gs3-empty .gs3-slot-name { color:var(--text-dim); opacity:0.4; }
.gs3-ammo-qty { font-family:'JetBrains Mono',monospace; font-size:9px; color:#c9873e; }
.gs3-actions { display:flex; gap:6px; margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.05); }
.gs3-actions .btn { flex:1; text-align:center; }

/* ────────────────────────────────────────────────────────────
   MISC POLISH — make combat sections consistent
   ──────────────────────────────────────────────────────────── */

/* Section card wrapper */
.combat-section { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.combat-loadout { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:10px; }
.combat-loadout > div { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }

/* Rune section tightening */
.rune-pouch-section { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:10px; }

/* ════════════════════════════════════════════════════════════
   COMBAT PAGE POLISH — DEDUPLICATION & LAYOUT FIXES
   ════════════════════════════════════════════════════════════ */

/* Hide old standalone panels that are now in sidebar */
.dmg-tracker-panel, .xp-rate-panel { display:none !important; }
.session-loot-section { display:none !important; }

/* ── SPLAT FIX: position must be relative on the container ── */
.arena-player, .arena-monster { position:relative; overflow:visible; }
.splat-area { position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:10; }

/* hit-splat positions are set via JS left/top — just make sure animation works */
.hit-splat {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 18px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 12px currentColor;
  animation: splatRise 1.1s ease-out forwards;
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
}
@keyframes splatRise {
  0%   { transform:translate(-50%,-50%) scale(0.5); opacity:1; }
  20%  { transform:translate(-50%,-70%) scale(1.2); opacity:1; }
  60%  { transform:translate(-50%,-120%) scale(1.0); opacity:1; }
  100% { transform:translate(-50%,-160%) scale(0.8); opacity:0; }
}
.splat-melee  { color:#f04050; }
.splat-ranged { color:#50c860; }
.splat-magic  { color:#7060f0; }
.splat-taken  { color:#ff4444; }
.splat-miss   { color:#888; font-size:12px; }
.splat-dodge  { color:#80d0ff; font-size:12px; }
.splat-poison { color:#40c840; }
.splat-burn   { color:#ff8020; }
.splat-bleed  { color:#c03040; }
.splat-ability{ color:#c9873e; }
.splat-crit   { color:#ffd700; font-size:22px; }
.splat-big    { font-size:22px; }
.splat-giant  { font-size:28px; animation-duration:1.4s; }

/* ── ARENA V3 IMPROVEMENTS ──────────────────────────────────── */

/* Better monster art scaling */
.arena-monster-art { display:flex; align-items:center; justify-content:center; width:100%; min-height:100px; }
.arena-monster-art svg { max-width:130px; max-height:130px; width:100%; height:auto; }

/* Player side bars — better sizing */
.arena-bars { width:100%; }
.arena-bar-track { flex:1; min-width:60px; }
.arena-bar-text { font-size:9px; min-width:50px; }

/* VS badge glow */
.arena-vs { text-shadow:0 0 30px rgba(201,135,62,0.8), 0 0 60px rgba(201,135,62,0.3); }

/* Monster name styling */
.arena-mon-name { font-size:14px; font-weight:600; }

/* ── ARENA TOP BAR — wider/more prominent ─────────────────── */
.atb-hp-track { height:16px; }
.atb-name { font-size:14px; min-width:140px; }
.atb-pct { font-size:14px; }

/* ── ABILITY BAR V3 — improve ability buttons ─────────────── */
.ab3-specials { display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; }
.ab3-btn { min-width:80px; max-width:120px; }

/* ── CC-GROUP (combat style only) ──────────────────────────── */
.combat-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0 4px; }
.cc-group { display:flex; align-items:center; gap:6px; }
.cc-label { font-size:11px; color:var(--text-dim); white-space:nowrap; font-family:'Cinzel',serif; letter-spacing:0.5px; }

/* ── SECTION SPACING TIGHTENING ─────────────────────────────── */
.cv3-main { display:flex; flex-direction:column; gap:0; }
.combat-section, .prayer-v3, .rune-pouch-section, .ability-bar-v3, .gear-strip-v3, .combat-loadout { margin-bottom:10px; }
.combat-xp-panel { margin-bottom:8px; }

/* ── COMBAT XP PANEL — make collapsible ──────────────────────── */
.combat-xp-panel { background:var(--bg-mid); border:1px solid var(--border); border-radius:10px; padding:0; overflow:hidden; }
.cxp-toggle-header { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; cursor:pointer; user-select:none; }
.cxp-toggle-header:hover { background:rgba(255,255,255,0.02); }
.cxp-toggle-title { font-family:'Cinzel',serif; font-size:11px; color:var(--text-dim); letter-spacing:1.5px; text-transform:uppercase; }
.cxp-toggle-chevron { color:var(--text-dim); font-size:12px; transition:transform 0.2s; }
.cxp-body { padding:10px 14px 12px; border-top:1px solid rgba(255,255,255,0.05); }

/* ── AREA CARD V2 — when not in combat ───────────────────────── */
.area-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; padding:4px 0 12px; }

/* ── BTN-FLEE (fight cave only) ──────────────────────────────── */
.btn-flee-fc { width:100%; font-family:'Cinzel',serif; letter-spacing:1px; margin:4px 0 8px; }

/* ── SIDEBAR — ensure sticky works properly ──────────────────── */
.cv3-sidebar { top:8px; overflow-y:auto; max-height:calc(100vh - 80px); }

/* ── SECTION LABELS (combat loadout) ─────────────────────────── */
.combat-loadout .cs-header { font-family:'Cinzel',serif; font-size:10px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:5px; }

/* ════════════════════════════════════════════════════════════
   COMBAT PAGE LAYOUT — OVERRIDE MAIN-CONTENT MAX-WIDTH
   The sidebar needs full viewport width, not 900px cap.
   ════════════════════════════════════════════════════════════ */

/* When combat page is active, expand beyond the 900px cap */
.cv3-page {
  /* Override display properties from old combat-xp-panel conflicts */
  display: grid !important;
  grid-template-columns: 1fr 310px !important;
  gap: 14px !important;
  align-items: start !important;
  /* Break out of 900px cap */
  width: calc(100% + 0px);
  max-width: none;
}

/* cv3-main fills its grid column */
.cv3-main {
  min-width: 0;
  width: 100%;
}

/* Override old combat-xp-panel grid from conflicting CSS rules */
.cv3-main .combat-xp-panel {
  display: block !important;
}

/* Arena must fill full cv3-main width */
.arena-v3 {
  width: 100%;
  box-sizing: border-box;
}

/* Arena main grid — flexible columns that don't squeeze */
.arena-main {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  min-height: 180px;
  gap: 0;
}

/* Player + Monster sides need relative for splats */
.arena-player { position: relative; overflow: visible !important; min-width: 0; }
.arena-monster { position: relative; overflow: visible !important; min-width: 0; }

/* ── IMPROVED CONTROLS ROW ───────────────────────────────── */
.combat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 8px;
}

.cc-group { display: flex; align-items: center; gap: 4px; }
.cc-label { 
  font-family: 'Cinzel', serif; 
  font-size: 10px; 
  color: var(--text-dim); 
  text-transform: uppercase; 
  letter-spacing: 1px;
  white-space: nowrap;
}
.cc-btn {
  padding: 5px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cc-btn:hover { border-color: #c9873e; color: #c9873e; }
.cc-btn-active { 
  background: rgba(201,135,62,0.15) !important; 
  border-color: #c9873e !important; 
  color: #c9873e !important; 
}

/* ── MANA BAR SECTION ─────────────────────────────────────── */
.mana-section {
  background: rgba(74,126,196,0.06);
  border: 1px solid rgba(74,126,196,0.15);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mana-section-label { 
  font-size: 11px; 
  color: #4a7ec4; 
  font-family: 'Cinzel', serif;
  white-space: nowrap;
}
.mana-section-bar { 
  flex: 1; 
  height: 14px; 
  background: var(--bg-deep); 
  border-radius: 7px; 
  overflow: hidden; 
  border: 1px solid rgba(74,126,196,0.2);
}
.mana-section-fill { 
  height: 100%; 
  background: linear-gradient(90deg, #1a4a8e, #4a8adc);
  border-radius: 6px;
  transition: width 0.2s ease-out;
  box-shadow: 0 0 8px rgba(74,126,196,0.3);
}
.mana-section-text { 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 11px; 
  color: #4a7ec4;
  white-space: nowrap;
}
.mana-section-pct { 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 11px; 
  color: #4a7ec4;
  font-weight: 600;
}

/* ── COMPACT COMBAT SECTION HEADERS ─────────────────────── */
.cv3-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 8px;
}

/* ── SIDEBAR IMPROVEMENTS ─────────────────────────────────── */
.cv3-sidebar {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── AREA SELECT — cleaner when not in combat ─────────────── */
.area-select-wrap { padding-bottom: 40px; }
.section-title { 
  font-family: 'Cinzel', serif; 
  font-size: 13px; 
  color: var(--text-dim); 
  letter-spacing: 1px;
  margin: 16px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════
   FLUID COMBAT LAYOUT — Container Queries + clamp()
   Every panel is self-contained. No fixed widths. Scales to any
   resolution by querying its own container, not the viewport.
   ════════════════════════════════════════════════════════════ */

/* ── Step 1: Break free of 900px cap when combat page active ── */
#main-content:has(.cv3-page) {
  max-width: none !important;
  padding: 12px 16px 60px !important;
  width: 100% !important;
}

/* ── Step 2: Fluid two-column grid ───────────────────────────── */
.cv3-page {
  display: grid !important;
  grid-template-columns: 1fr clamp(220px, 22vw, 320px) !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
  align-items: start !important;
  max-width: none !important;
  width: 100% !important;
}

/* ── Step 3: Every panel is a container ─────────────────────── */
/* Panels query their own width via cqi units — no viewport needed */
.cv3-main { container-type: inline-size; container-name: main-col; min-width: 0; }
.cv3-sidebar { container-type: inline-size; container-name: sidebar; }

.arena-v3,
.ability-bar-v3,
.prayer-v3,
.rune-pouch-section,
.gear-strip-v3,
.combat-loadout,
.combat-section,
.cv3s-card {
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
}

/* ── Step 4: Arena scales with its container (not viewport) ──── */
.arena-main {
  display: grid;
  /* Player col = 28% of arena container, min 120px */
  grid-template-columns:
    clamp(120px, 28cqi, 240px)
    1fr
    clamp(120px, 28cqi, 240px);
  min-height: clamp(140px, 25cqi, 220px);
}

/* ── Step 5: Fluid text inside the arena ─────────────────────── */
@container main-col (min-width: 1px) {
  .arena-pname    { font-size: clamp(11px, 1.8cqi, 15px); }
  .arena-vs       { font-size: clamp(18px, 5cqi, 32px); }
  .arena-mon-name { font-size: clamp(11px, 1.8cqi, 15px); }
  .atb-name       { font-size: clamp(11px, 1.6cqi, 15px); }
  .atb-hp-track   { height: clamp(10px, 2cqi, 18px); }
  .arena-bar-track { height: clamp(8px, 1.5cqi, 14px); }
}

/* ── Step 6: Ability bar wraps gracefully ────────────────────── */
.ab3-specials {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 1cqi, 8px);
}

.ab3-btn {
  min-width: clamp(70px, 18cqi, 110px);
  flex: 1 1 clamp(70px, 18cqi, 110px);
  padding: clamp(6px, 1.5cqi, 12px);
}

.ab3-icon { font-size: clamp(16px, 3.5cqi, 24px); }
.ab3-name { font-size: clamp(9px, 1.4cqi, 12px); }

/* ── Step 7: Prayer grid adapts to container width ───────────── */
.pv3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(72px, 18cqi, 100px), 1fr));
  gap: clamp(4px, 1cqi, 8px);
}

/* ── Step 8: Gear strip adapts ───────────────────────────────── */
.gs3-slots {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 1cqi, 8px);
}

.gs3-slot {
  min-width: clamp(52px, 12cqi, 70px);
  flex: 1 1 clamp(52px, 12cqi, 70px);
}

/* ── Step 9: Loadout 3-col adjusts ──────────────────────────── */
.combat-loadout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 28cqi, 200px), 1fr));
  gap: clamp(6px, 1.5cqi, 12px);
}

/* ── Step 10: Sidebar panels fluid ───────────────────────────── */
@container sidebar (min-width: 1px) {
  .cv3s-title      { font-size: clamp(9px, 3cqi, 12px); }
  .cv3s-dt-label   { font-size: clamp(9px, 3cqi, 12px); }
  .cv3s-dt-val     { font-size: clamp(9px, 3cqi, 12px); }
  .cv3s-ss-val     { font-size: clamp(12px, 4cqi, 16px); }
  .cv3s-kills-badge { font-size: clamp(9px, 3cqi, 12px); }
  .cv3s-li-name    { font-size: clamp(11px, 3.5cqi, 14px); }
}

/* ── Step 11: Rune pouch fluid ───────────────────────────────── */
.rune-pouch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 1cqi, 8px);
}

.rp3-rune {
  min-width: clamp(40px, 10cqi, 55px);
  flex: 1 1 clamp(40px, 10cqi, 55px);
}

/* ── Step 12: Arena top bar fluid ───────────────────────────── */
.arena-top-bar {
  gap: clamp(6px, 1.5cqi, 12px);
  padding: clamp(6px, 1.5cqi, 10px) clamp(10px, 2cqi, 16px);
}

/* ── Responsive: narrow main col collapses arena grid ────────── */
@container main-col (max-width: 480px) {
  .arena-main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .arena-center { grid-column: 1 / -1; order: 3; }
}

/* ── XP Mode toggle buttons fluid ───────────────────────────── */
.cv3s-xpmode { flex-wrap: wrap; }
.cv3s-mode-btn { flex: 1 1 auto; min-width: clamp(50px, 15cqi, 80px); }