/* Duskglade — classic WoW HUD */
:root {
  --gold: #FFD100;
  --err: #FF1A1A;
  --font-wow: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-damage: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  --font-chat: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--font-wow); user-select: none; -webkit-user-select: none; }

#game, #game canvas { position: absolute; inset: 0; }
body.cursor-attack #game canvas { cursor: crosshair; }

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: none; }

.hidden { display: none !important; }

.wow-text, .uf-name, .qt-title, .zone-plaque, .level-badge {
  color: var(--gold);
}
.uf-name, .qt-title, .qt-obj, .zone-plaque, .level-badge, .error-msg, .zone-text,
.tf-classify, .np-name, .hotkey, .dd-text, .cast-text, .xp-text, .buff-dur {
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000,
    1px 1px 2px rgba(0, 0, 0, .9);
}

/* ============ unit frames ============ */
.unitframe {
  position: absolute;
  top: 10px;
  width: 264px;
  height: 88px;
  font-weight: 600;
  letter-spacing: .3px;
}
.player-frame { left: 14px; }
.target-frame { left: 292px; pointer-events: auto; }

.portrait-wrap {
  position: absolute;
  top: 10px;
  width: 62px;
  height: 62px;
}
.player-frame .portrait-wrap { left: 8px; }
.target-frame .portrait-wrap { right: 8px; }
.portrait {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 3px solid #6b6b6b;
  box-shadow: 0 0 0 1px #000, inset 0 0 6px #000;
}
.portrait-flash {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
}
.portrait-flash.go { animation: pflash .35s ease-out; }
@keyframes pflash { 0% { opacity: 1; } 100% { opacity: 0; } }

.level-badge {
  position: absolute;
  bottom: -4px; left: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(#2a2417, #0d0b06);
  border: 2px solid #c8a838;
  box-shadow: 0 0 0 1px #000;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lv-yellow { color: #FFD100; }

.elite-ring {
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 4px solid #c8a838;
  box-shadow: 0 0 8px #c8a838aa, inset 0 0 4px #000;
  pointer-events: none;
}
.elite-ring::after {
  content: "";
  position: absolute; top: -11px; right: -13px;
  width: 34px; height: 26px;
  background: linear-gradient(135deg, #f7e08a, #a8842a);
  clip-path: polygon(0 60%, 25% 25%, 45% 45%, 70% 0, 100% 30%, 80% 70%, 50% 60%, 20% 90%);
  filter: drop-shadow(0 1px 1px #000);
}

.uf-bars {
  position: absolute;
  top: 12px;
  width: 158px;
}
.player-frame .uf-bars { left: 80px; }
.target-frame .uf-bars { left: 16px; }

.uf-name {
  height: 17px;
  line-height: 17px;
  background: rgba(0, 0, 0, .55);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.uf-name.hostile { background: rgba(160, 0, 0, .55); }

.bar {
  position: relative;
  height: 16px;
  margin-top: 3px;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(90, 81, 56, .8);
  background: #0f2a0f;
  overflow: hidden;
}
.bar .fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #4CE64C 0%, #00C400 45%, #007800 100%);
  transition: width .12s linear;
}
.en-bar { height: 13px; background: #2a2a0f; }
.en-bar .fill { background: linear-gradient(180deg, #FFF966 0%, #E8D800 45%, #8F8500 100%); transition: width .08s linear; }
.bar-text {
  position: absolute; inset: 0;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-chat);
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
}
.tf-classify {
  margin-top: 2px;
  font-size: 10px;
  color: var(--gold);
  text-align: left;
}

/* combo points — red orbs hugging the portrait's left edge */
.cp-row {
  position: absolute;
  right: 76px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cp {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #1a0808;
  border: 1px solid #4a3a1a;
  opacity: .5;
}
.cp.on {
  background: radial-gradient(circle at 35% 30%, #ff7a7a, #d40000 55%, #6b0000);
  border-color: #c8a838;
  opacity: 1;
  box-shadow: 0 0 4px rgba(255, 60, 40, .7);
}
.cp.flash { animation: cpflash .25s ease-out; }
@keyframes cpflash {
  0% { box-shadow: 0 0 10px 4px rgba(255, 255, 255, .95); }
  100% { box-shadow: 0 0 4px rgba(255, 60, 40, .7); }
}

/* cast bar */
.castbar {
  position: absolute;
  left: 16px; top: 92px;
  width: 220px; height: 16px;
  background: #14100a;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #5a5138;
}
.cast-fill {
  height: 100%; width: 0;
  background: linear-gradient(180deg, #ffe680 0%, #FFCC00 45%, #8f7200 100%);
}
.castbar.interrupted .cast-fill { background: linear-gradient(180deg, #ff6a5a, #c41a0a); width: 100% !important; }
.cast-text {
  position: absolute; inset: 0;
  font-size: 11px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.tf-buffs {
  position: absolute;
  left: 16px; top: 112px;
  display: flex; gap: 3px;
}
.tf-buff {
  width: 20px; height: 20px;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #000;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}
.tf-buff-enrage { background: radial-gradient(#a03020, #3a0a05); box-shadow: 0 0 6px #ff3a1a; }
.tf-buff-frenzy { background: radial-gradient(#a06a20, #3a2205); }
.tf-buff-gouge { background: radial-gradient(#4a5a8a, #10142a); }

/* ============ minimap ============ */
.minimap-wrap {
  position: absolute;
  top: 10px; right: 12px;
  width: 140px;
  text-align: center;
}
.zone-plaque {
  margin: 0 auto 6px;
  width: 140px; height: 18px;
  line-height: 18px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid #5a5138;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
}
.minimap {
  position: relative;
  width: 140px; height: 140px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #0f0d08, 0 0 0 6px #6d5a2e, 0 0 0 8px #1a1408, 0 4px 8px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.minimap canvas { display: block; border-radius: 50%; }
.mm-arrow {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 14px;
  background: var(--gold);
  clip-path: polygon(50% 0, 85% 100%, 50% 75%, 15% 100%);
  filter: drop-shadow(0 1px 1px #000);
  transform: translate(-50%, -50%);
}
.buff-row {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.buff-icon {
  position: relative;
  width: 26px; height: 26px;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #5a5138;
}
.buff-icon canvas { width: 24px; height: 24px; display: block; }
.buff-dur {
  position: absolute;
  bottom: -14px; left: 0; right: 0;
  font-size: 10px; color: #fff; font-weight: 700;
}

/* ============ quest tracker ============ */
.quest-tracker {
  position: absolute;
  right: 16px; top: 218px;
  width: 230px;
  text-align: right;
  font-weight: 600;
}
.qt-title { font-size: 13px; }
.qt-obj {
  margin-top: 3px;
  font-size: 12px;
  color: #B3B3B3;
}
.qt-obj.done { color: #fff; }
.qt-obj.progress-flash { animation: qflash .8s ease-out; }
@keyframes qflash { 0%, 40% { color: #40FF40; } 100% { color: #fff; } }

/* ============ error frame ============ */
.error-frame {
  position: absolute;
  top: 120px; left: 0; right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.error-msg {
  font-size: 17px;
  font-weight: 700;
  color: var(--err);
  transition: opacity 1s;
}
.error-msg.fading { opacity: 0; }

/* ============ zone-in text ============ */
.zone-text {
  position: absolute;
  top: 21%; left: 0; right: 0;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1.5px;
  opacity: 0;
  transition: opacity .9s, transform 1.6s;
}
.zone-text.show { opacity: 1; }
.zone-text.fade { opacity: 0; transform: translateY(-8px); transition: opacity 1.6s, transform 1.6s; }

/* ============ chat / combat log ============ */
.chatbox {
  position: absolute;
  left: 16px; bottom: 14px;
  width: 430px;
  font-family: var(--font-chat);
}
.chat-tabs {
  display: flex; gap: 10px;
  margin-bottom: 2px;
  padding-left: 6px;
}
.chat-tabs .tab {
  font-size: 11px;
  color: #9a9a9a;
  text-shadow: 1px 1px 1px #000;
}
.chat-tabs .tab.active { color: var(--gold); }
.chat-lines {
  height: 148px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, .35);
  border-radius: 3px;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.chat-lines::-webkit-scrollbar { display: none; }
.chat-line {
  font-size: 13px;
  line-height: 1.28;
  text-shadow: 1px 1px 1px #000;
}
.item-link { font-weight: 700; }

/* ============ XP bar + action bar ============ */
.xp-bar {
  position: absolute;
  bottom: 58px; left: 50%;
  transform: translateX(-50%);
  width: 368px; height: 10px;
  background: #16130E;
  border: 1px solid #000;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: linear-gradient(180deg, #C33BB8, #94008C 50%, #560051);
  transition: width .4s ease-out;
}
.xp-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 17.4px, #000 17.4px 18.4px);
  pointer-events: none;
}
.xp-text {
  position: absolute; inset: 0;
  font-size: 9px; color: #fff;
  font-family: var(--font-chat);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.xp-bar:hover .xp-text { opacity: 1; }

.action-bar {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  pointer-events: auto;
}
.slot {
  position: relative;
  width: 42px; height: 42px;
  background: radial-gradient(#2a2a2a, #101010);
  border: 2px solid #000;
  box-shadow: 0 0 0 1px #5a5138, inset 0 0 0 1px #000;
  cursor: pointer;
}
.slot:hover { box-shadow: 0 0 0 1px #5a5138, 0 0 7px 2px rgba(255, 209, 0, .35), inset 0 0 0 1px #000; }
.slot:active .slot-icon { transform: translate(1px, 1px); filter: brightness(.8); }
.slot.active-glow { box-shadow: 0 0 0 1px #c8a838, 0 0 9px 2px rgba(255, 230, 120, .55), inset 0 0 0 1px #000; }
.slot-icon { display: block; width: 38px; height: 38px; }
.slot-cd {
  position: absolute; inset: 0;
  display: none;
  pointer-events: none;
}
.slot-tint { position: absolute; inset: 0; pointer-events: none; }
.tint-range { background: rgba(255, 26, 26, .42); mix-blend-mode: multiply; }
.tint-energy { background: rgba(70, 70, 180, .45); }
.hotkey {
  position: absolute;
  top: 1px; right: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #E8E8E8;
  pointer-events: none;
}
.hotkey.oor { color: var(--err); }
.slot-flash {
  position: absolute; inset: -2px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 12px 4px rgba(255, 230, 130, .9);
}
.slot-flash.go { animation: sflash .3s ease-out; }
@keyframes sflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ============ tooltip ============ */
.tooltip {
  position: absolute;
  right: 16px; bottom: 120px;
  min-width: 210px;
  max-width: 300px;
  padding: 10px;
  background: rgba(23, 23, 48, .93);
  border: 1px solid #6a6a8a;
  box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, .6);
  border-radius: 4px;
  font-weight: 600;
}
.tt-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #fff;
  margin-bottom: 2px;
}
.tt-name { font-size: 14px; font-weight: 700; }
.tt-right { margin-left: 18px; }
.tt-req-unmet { color: var(--err); }
.tt-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gold);
  line-height: 1.3;
  white-space: pre-line;
}

/* ============ FCT ============ */
.fct-layer { position: absolute; inset: 0; overflow: hidden; }
.fct {
  position: absolute;
  font-family: var(--font-damage);
  font-size: 21px;
  color: #fff;
  transform: translate(-50%, -50%);
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, .8);
  animation: fct-rise 1.1s ease-out forwards;
}
.fct-crit {
  font-size: 32px;
  color: #FFFF00;
  animation: fct-crit 1.4s ease-out forwards;
}
.fct-in { color: #FF2020; }
.fct-avoid { font-size: 18px; color: #fff; }
.fct-heal { color: #1EFF00; }
@keyframes fct-rise {
  0% { opacity: 1; margin-top: 0; }
  70% { opacity: 1; }
  100% { opacity: 0; margin-top: -72px; }
}
@keyframes fct-crit {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.9); margin-top: 0; }
  13% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); margin-top: -84px; }
}

/* ============ nameplate ============ */
.nameplate {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  pointer-events: none;
}
.np-name {
  font-size: 13px;
  font-weight: 700;
  color: #FF3030;
  margin-bottom: 2px;
}
.np-bar {
  width: 110px; height: 9px;
  margin: 0 auto;
  background: #240808;
  border: 1px solid #000;
}
.np-fill {
  height: 100%;
  background: linear-gradient(180deg, #ff5a4a, #C41F1F 50%, #6e0808);
}
.np-enraged .np-fill { background: linear-gradient(180deg, #ff9a3a, #e84a10 50%, #7a1a02); }
.np-enraged .np-name { color: #ff7a2a; }
.nameplate { transition: opacity .15s; }
.np-targeted .np-name { color: #FFD100; }
.np-targeted .np-bar { box-shadow: 0 0 0 1px #FFD100, 0 0 7px rgba(255, 209, 0, .55); }
.cursor-talk #game canvas { cursor: pointer; }

/* ============ Wave 1: gear / loot / economy chrome ============ */
.marks-amount { color: #40E0D0; font-weight: 700; text-shadow: 1px 1px 1px #000; }
.elite-ring.ring-silver { border-color: #cfd6dd; box-shadow: 0 0 8px #cfd6ddaa, inset 0 0 4px #000; }
.elite-ring.ring-silver::after { background: linear-gradient(135deg, #eef2f6, #9aa3ab); }
.elite-ring.ring-skull { border-color: #b03030; box-shadow: 0 0 9px #b03030cc, inset 0 0 4px #000; }
.elite-ring.ring-skull::after { display: none; }

/* player cast bar (Mage etc.) — centered above the action bar */
.player-castbar { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); width: 240px; height: 20px; background: #14100a; border: 1px solid #000; box-shadow: 0 0 0 1px #6a5a3a, 0 2px 6px rgba(0, 0, 0, .6); }
.player-castbar .pc-fill { height: 100%; width: 0; background: linear-gradient(180deg, #ffe680, #FFCC00 45%, #8f7200); transition: width .05s linear; }
.player-castbar.interrupted .pc-fill { width: 100% !important; background: linear-gradient(180deg, #ff6a5a, #c41a0a); }
.player-castbar .pc-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 1px 1px 1px #000; }
.player-castbar .pc-icon { position: absolute; left: -22px; top: 1px; width: 18px; height: 18px; border: 1px solid #000; }
.player-castbar .pc-icon canvas { width: 16px; height: 16px; display: block; }

/* character paper-doll */
.char-wrap { display: flex; gap: 12px; justify-content: center; align-items: flex-start; margin-top: 8px; }
.equip-col { display: flex; flex-direction: column; gap: 7px; }
.equip-weapons { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.equip-slot { position: relative; width: 46px; height: 46px; background: #14100a; border: 2px solid #000; box-shadow: 0 0 0 1px #5a5138; }
.equip-slot.has-item { box-shadow: 0 0 0 1px var(--q, #5a5138); }
.equip-slot.broken { box-shadow: 0 0 0 1px #d02020, 0 0 6px #d0202088; }
.equip-slot canvas { display: block; width: 42px; height: 42px; }
.equip-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #6a6252; text-align: center; pointer-events: none; }
.equip-slot.has-item .equip-label { display: none; }
.equip-dura { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 3px; background: #000; }
.equip-dura-fill { height: 100%; }
.char-stats { min-width: 176px; display: flex; flex-direction: column; gap: 2px; }
.stat-row { display: flex; justify-content: space-between; font-size: 12px; padding: 1px 6px; }
.stat-k { color: #FFD100; } .stat-v { color: #fff; font-weight: 700; }
.char-money { text-align: center; margin-top: 10px; font-size: 13px; }
.char-title { text-align: center; color: #FFD100; font-size: 15px; font-weight: 700; text-shadow: 1px 1px 2px #000; }

/* bag extras */
.bag-head, .bank-label, .mail-head { font-size: 12px; color: #c9b48a; margin: 2px 4px 6px; font-weight: 700; }
.bag-slots-row { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.bag-slots-label { font-size: 11px; color: #9a8a6a; }
.bag-slot.small { width: 28px; height: 28px; }
.bag-slot.small canvas { width: 24px; height: 24px; }
.bag-foot { margin-top: 8px; text-align: center; font-size: 13px; }

/* bank / vendor / trainer rows */
.bank-gold, .bank-goldbtns { text-align: center; margin: 4px 0; }
.bank-goldbtns { display: flex; gap: 6px; justify-content: center; }
.wow-btn.small { font-size: 12px; padding: 3px 10px; }
.wow-btn.ghost { background: linear-gradient(180deg, #3a3226, #221c12); }
.wow-btn.ghost.small, .wow-btn.small { margin: 2px; }
.bank-grid { margin-top: 4px; }
.train-list .vendor-item.locked, .vendor-item.locked { opacity: .5; cursor: default; }
.tr-rank { color: #40C0FF; font-size: 11px; }

/* mail / options */
.mail-row { border: 1px solid #5a4a2a; background: rgba(20,16,12,.5); border-radius: 4px; padding: 6px 8px; margin: 5px 0; }
.mail-row.pending { opacity: .7; }
.mail-subj { color: #FFD100; font-weight: 700; font-size: 13px; }
.mail-from { color: #9a8a6a; font-size: 11px; }
.mail-contents { color: #d8c9a8; font-size: 12px; margin: 3px 0; }
.mail-compose { margin-top: 10px; text-align: center; }
.opt-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid #3a3018; }
.opt-label { color: #d8c9a8; font-size: 13px; }
.opt-toggle { font-family: var(--font-wow); font-size: 12px; font-weight: 700; color: #fff; padding: 3px 14px; background: #3a2a1a; border: 1px solid #6a5a3a; border-radius: 3px; cursor: pointer; }
.opt-toggle.on { background: linear-gradient(180deg, #2a6a2a, #14400e); border-color: #c8a838; color: #d8f0c0; }
.opt-section { color: #FFD100; font-weight: 700; margin: 10px 4px 4px; border-bottom: 1px solid #5a4a2a; }
.keybind-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 8px; }
.kb-action { color: #c9b48a; } .kb-key { color: #fff; font-weight: 700; }

/* richer item tooltip lines */
.it-right { color: #cfcfcf; }
.it-dps { color: #9a9a9a; font-size: 11px; }
.it-dura { color: #cfcfcf; } .it-dura.broken { color: #FF4040; }
.it-bind, .it-uniq { color: #ffd100; font-size: 11px; }
.it-req { color: #40C040; font-size: 12px; } .it-req.unmet { color: #FF2020; }
.micro-pip { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 10px; font-weight: 700; color: #fff; background: radial-gradient(#e04020, #7a0e08); border: 1px solid #000; border-radius: 8px; }
/* keep panels/dialogs on-screen at any viewport width */
.panel { max-width: 94vw; }
.panel.dialog, .dialog-panel { width: min(460px, 94vw); }
.panel-scroll { overflow-x: hidden; }

/* ============ UI wave: coins, scrollbars, cooldowns, frames, menus ============ */
/* colored coin swatches (used in innerHTML display contexts) */
.coin-g, .coin-s, .coin-c { font-weight: 700; color: #fff; margin-left: 5px; text-shadow: 1px 1px 1px #000; }
.coin-g::after, .coin-s::after, .coin-c::after { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 1px; border: 1px solid rgba(0, 0, 0, .55); vertical-align: -1px; }
.coin-g::after { background: radial-gradient(circle at 35% 30%, #ffe680, #b8860b); }
.coin-s::after { background: radial-gradient(circle at 35% 30%, #f2f2fa, #8a8a9a); }
.coin-c::after { background: radial-gradient(circle at 35% 30%, #e8a060, #8a4a1a); }

/* styled scrollbars on panels + chat */
.panel-scroll { scrollbar-width: thin; scrollbar-color: #6a5a3a #1a140c; }
.panel-scroll::-webkit-scrollbar { display: block; width: 10px; }
.panel-scroll::-webkit-scrollbar-track { background: #1a140c; border-left: 1px solid #000; }
.panel-scroll::-webkit-scrollbar-thumb { background: linear-gradient(#8a7038, #4a3a1c); border: 1px solid #000; border-radius: 5px; }
.panel-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(#a88848, #5a4a24); }

/* action-slot cooldown number + charges */
.slot-cd-num { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: var(--font-chat); font-size: 15px; font-weight: 700; color: #ffe066; text-shadow: 1px 1px 2px #000, 0 0 3px #000; pointer-events: none; }

/* tooltip anchored near a slot */
.tooltip.tt-anchored { right: auto; bottom: auto; }

/* item comparison block */
.compare-tip { position: absolute; min-width: 200px; max-width: 300px; padding: 9px; background: rgba(23, 23, 48, .95); border: 1px solid #6a6a8a; box-shadow: 0 0 0 1px #000; border-radius: 4px; font-weight: 600; pointer-events: none; z-index: 71; }
.compare-tip .cmp-head { color: #40C0FF; font-size: 11px; margin-bottom: 3px; }

/* target-of-target mini frame */
.tot-frame { position: absolute; left: 292px; top: 104px; width: 128px; height: 34px; display: none; }
.tot-frame.show { display: block; }
.tot-name { font-size: 11px; font-weight: 700; color: #9fe0ff; background: rgba(0, 0, 0, .5); border-radius: 3px; padding: 0 4px; overflow: hidden; white-space: nowrap; text-shadow: 1px 1px 1px #000; }
.tot-bar { height: 8px; margin-top: 2px; border: 1px solid #000; box-shadow: 0 0 0 1px #5a5138; background: #240808; }
.tot-fill { height: 100%; background: linear-gradient(180deg, #4CE64C, #00a800 55%, #005c00); }

/* player debuffs (poison / res sickness) */
.player-debuffs { position: absolute; left: 80px; top: 68px; display: flex; gap: 3px; }
.debuff-icon { width: 20px; height: 20px; border: 1px solid #000; box-shadow: 0 0 0 1px #7a2020; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; position: relative; background: radial-gradient(#4a1a5a, #180a20); }
.debuff-icon.poison { background: radial-gradient(#2a6a2a, #0e2a0e); }
.debuff-icon.ressick { background: radial-gradient(#5a5a6a, #1a1a24); }
.debuff-dur { position: absolute; bottom: -13px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; font-weight: 700; text-shadow: 1px 1px 1px #000; }

/* cast bar spell icon */
.cast-icon { position: absolute; left: -20px; top: 0; width: 16px; height: 16px; border: 1px solid #000; }
.cast-icon canvas { width: 14px; height: 14px; display: block; }

/* loot window title */
.loot-title { color: #FFD100; font-size: 12px; font-weight: 700; text-align: center; padding: 1px 14px 4px 4px; text-shadow: 1px 1px 1px #000; border-bottom: 1px solid #5a4a2a; margin-bottom: 4px; }

/* loot cursor over corpses */
body.cursor-loot #game canvas { cursor: grab; }

/* game menu (Esc) */
.game-menu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 55; pointer-events: auto; background: rgba(0, 0, 0, .35); }
.game-menu .gm-box { width: 240px; padding: 18px; background: rgba(20, 16, 12, .97); border: 2px solid #c8a838; box-shadow: 0 0 0 1px #000, 0 8px 30px rgba(0, 0, 0, .8); border-radius: 6px; text-align: center; }
.gm-title { color: #FFD100; font-size: 18px; font-weight: 700; margin-bottom: 14px; text-shadow: 1px 1px 2px #000; }
.game-menu .wow-btn { display: block; width: 100%; margin: 7px 0; }

/* vendor / dialog tabs */
.dialog-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.dialog-tab { font-size: 12px; font-weight: 700; color: #9a8a6a; padding: 3px 12px; background: #241c12; border: 1px solid #5a4a2a; border-radius: 3px 3px 0 0; cursor: pointer; }
.dialog-tab.active { color: #FFD100; background: #3a2e1a; border-color: #c8a838; }

/* minimap clock + zoom */
.mm-clock { margin-top: 3px; font-size: 11px; color: #d8c9a8; font-weight: 700; text-shadow: 1px 1px 1px #000; }
.mm-zoom { position: absolute; right: 2px; bottom: 6px; display: flex; flex-direction: column; gap: 2px; pointer-events: auto; }
.mm-zoom div { width: 18px; height: 16px; line-height: 14px; text-align: center; font-size: 13px; font-weight: 700; color: #FFD100; background: rgba(0, 0, 0, .6); border: 1px solid #5a5138; border-radius: 3px; cursor: pointer; }

/* ============ character creation ============ */
.create-screen { position: absolute; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(120, 90, 40, .28), transparent 60%), linear-gradient(180deg, #14100a, #060403);
  transition: opacity .5s; }
.create-screen.done { opacity: 0; pointer-events: none; }
.create-inner { width: 560px; max-width: 94vw; text-align: center; }
.create-title { font-family: var(--font-wow); font-size: 46px; font-weight: 700; letter-spacing: 5px; color: var(--gold); text-shadow: 0 0 24px rgba(255, 190, 60, .5), 2px 2px 2px #000; }
.create-sub { font-size: 15px; letter-spacing: 2px; color: #c9b48a; margin: 4px 0 20px; }
.create-cols { display: flex; gap: 26px; justify-content: center; }
.create-col { flex: 1; }
.create-h { color: var(--gold); font-weight: 700; font-size: 15px; margin-bottom: 8px; border-bottom: 1px solid #5a4a2a; padding-bottom: 4px; }
.race-list, .class-list { display: flex; flex-direction: column; gap: 6px; }
.pick-tile { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(20, 16, 12, .8); border: 1px solid #4a3a22; border-radius: 5px; cursor: pointer; transition: all .1s; }
.pick-tile:hover { border-color: #8a6a3a; }
.pick-tile.sel { border-color: var(--rc, #c8a838); box-shadow: 0 0 8px rgba(255, 209, 0, .35), inset 0 0 0 1px var(--rc, #c8a838); background: rgba(40, 30, 18, .9); }
.pick-ico canvas { display: block; width: 34px; height: 34px; border-radius: 3px; }
.pick-name { font-weight: 700; color: #f0e6d0; font-size: 14px; }
.create-info { margin: 16px auto; min-height: 84px; max-width: 480px; padding: 12px 16px; background: rgba(20, 16, 12, .7); border: 1px solid #4a3a22; border-radius: 6px; color: #d8c9a8; font-size: 13px; line-height: 1.4; }
.ci-passive { color: #40C040; margin-top: 3px; font-size: 12px; }
.ci-class { margin-top: 8px; padding-top: 8px; border-top: 1px solid #3a2e1a; }
.ci-res { margin-top: 3px; font-size: 12px; color: #9a8a6a; }
.create-namerow { display: flex; gap: 8px; justify-content: center; align-items: center; }
.create-name { font-family: var(--font-wow); font-size: 16px; padding: 8px 12px; width: 220px; background: #1a140c; border: 1px solid #6a5a3a; border-radius: 4px; color: #fff; text-align: center; outline: none; }
.create-name:focus { border-color: var(--gold); }
.create-enter { font-size: 15px; padding: 9px 20px; }

/* quest log selectable */
.ql-wrap { display: flex; gap: 8px; }
.ql-list { width: 150px; flex: 0 0 150px; border-right: 1px solid #5a4a2a; padding-right: 6px; }
.ql-item { font-size: 12px; color: #FFD100; padding: 4px 5px; cursor: pointer; border-radius: 3px; }
.ql-item:hover { background: rgba(255, 209, 0, .12); }
.ql-item.sel { background: rgba(255, 209, 0, .2); }
.ql-item.done { color: #40FF40; }
.ql-detail { flex: 1; min-width: 0; }

/* ============ death ============ */
.death-flash {
  position: absolute; inset: 0;
  background: rgba(160, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
.death-flash.go { animation: dflash .5s ease-out; }
@keyframes dflash { 0% { opacity: 1; } 100% { opacity: 0; } }

body.dead #game canvas { filter: grayscale(.9) brightness(.72) sepia(.12); }
body.dead #hud::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(110, 0, 0, .55) 100%);
  pointer-events: none;
  z-index: 30;
}

.death-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  pointer-events: auto;
}
.death-dialog {
  width: 320px;
  padding: 22px 20px 18px;
  background: rgba(20, 16, 12, .95);
  border: 2px solid #c8a838;
  box-shadow: 0 0 0 1px #000, 0 8px 30px rgba(0, 0, 0, .8);
  border-radius: 5px;
  text-align: center;
}
.dd-text { font-size: 17px; color: #fff; margin-bottom: 16px; font-weight: 600; }
.wow-btn {
  font-family: var(--font-wow);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  padding: 6px 22px;
  background: linear-gradient(180deg, #8a1f1a, #4e0e0a 55%, #350806);
  border: 1px solid #c8a838;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .15);
  cursor: pointer;
  text-shadow: 1px 1px 1px #000;
}
.wow-btn:hover { filter: brightness(1.25); }
.wow-btn:active { transform: translateY(1px); }

/* ============ loot ============ */
.loot-window {
  position: absolute;
  width: 180px;
  padding: 8px 6px 6px;
  background: rgba(20, 16, 12, .96);
  border: 1px solid #6a5a3a;
  box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .7);
  border-radius: 4px;
  z-index: 45;
  pointer-events: auto;
}
.loot-close {
  position: absolute;
  top: 2px; right: 4px;
  width: 16px; height: 16px;
  line-height: 14px;
  text-align: center;
  color: #fff;
  background: radial-gradient(#8a2a1a, #3a0e08);
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}
.loot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity .2s;
}
.loot-row:hover { background: rgba(255, 209, 0, .12); }
.loot-row.looted { opacity: 0; }
.loot-icon { width: 32px; height: 32px; border: 1px solid #000; }
.loot-icon.q-green { box-shadow: 0 0 0 1px #1EFF00; }
.loot-name {
  font-size: 12px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #000;
}

/* ============ level ding ============ */
.ding-flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 220, 90, .55), transparent 65%);
  opacity: 0;
  pointer-events: none;
  z-index: 35;
}
.ding-flash.go { animation: ding 1.6s ease-out; }
@keyframes ding {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============ vignette ============ */
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(10, 14, 6, .38) 100%);
  pointer-events: none;
}

/* ============ loading screen ============ */
#loading {
  position: absolute; inset: 0;
  z-index: 100;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120, 90, 40, .25), transparent 60%),
    linear-gradient(180deg, #14100a, #060403);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .9s;
}
#loading.done { opacity: 0; pointer-events: none; }
.load-inner { text-align: center; width: 420px; }
.load-title {
  font-family: var(--font-wow);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 190, 60, .5), 2px 2px 2px #000;
}
.load-sub {
  font-family: var(--font-wow);
  font-size: 16px;
  letter-spacing: 2px;
  color: #c9b48a;
  margin: 6px 0 26px;
  text-shadow: 1px 1px 2px #000;
}
.load-bar {
  height: 14px;
  background: #1a140c;
  border: 1px solid #5a4a2a;
  box-shadow: 0 0 0 1px #000;
  border-radius: 7px;
  overflow: hidden;
}
.load-fill {
  height: 100%; width: 0;
  background: linear-gradient(180deg, #ffe080, #d8a020 55%, #8a5c0a);
  border-radius: 7px;
  transition: width .3s ease-out;
}
.load-tip {
  margin-top: 18px;
  font-family: var(--font-wow);
  font-size: 13px;
  color: #b3a37e;
  text-shadow: 1px 1px 1px #000;
}
.load-click {
  margin-top: 22px;
  font-family: var(--font-wow);
  font-size: 15px;
  color: var(--gold);
  animation: pulse-gold 1.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes pulse-gold { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }