:root {
  --gold: #ffd100;
  --gold2: #c8a85a;
  --goldd: #6b5420;
  --frame-bg: linear-gradient(180deg, #2a2620 0%, #17140f 100%);
  --tt-bg: rgba(6, 8, 26, 0.92);
  --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd; --q4: #a335ee;
  --font: 'Marcellus', 'Palatino Linotype', Georgia, serif;
  --font2: 'Arial Narrow', Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; font: 13px/1.3 var(--font); user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
#viewport { position: fixed; inset: 0; }
#viewport canvas { display: block; width: 100vw; height: 100vh; }
body.ghost #viewport canvas { filter: grayscale(0.85) brightness(1.05) contrast(1.05); }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud > #ctext, #hud > #errors, #hud > #zonetext, #hud > #banners { pointer-events: none; }
button { font-family: var(--font); }
.gold { color: var(--gold); }
.q0 { color: var(--q0); } .q1 { color: var(--q1); } .q2 { color: var(--q2); } .q3 { color: var(--q3); } .q4 { color: var(--q4); }

/* ---------- generic frames ---------- */
.wow-btn {
  display: inline-block; min-width: 96px; padding: 4px 14px; border-radius: 3px; cursor: pointer;
  font: 13px var(--font); color: var(--gold); text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #a01a10 0%, #6a0c06 55%, #3a0402 100%);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #e0b060, inset 0 2px 3px rgba(255,255,255,0.25), 0 1px 3px rgba(0,0,0,0.6);
}
.wow-btn:hover { filter: brightness(1.25); color: #fff; }
.wow-btn:active { filter: brightness(0.9); transform: translateY(1px); }
.wow-btn[disabled] { filter: grayscale(1) brightness(0.6); cursor: default; color: #888; }
.wow-btn.small { min-width: 0; padding: 2px 8px; font-size: 12px; }
.panel {
  position: absolute; background: var(--frame-bg); border: 2px solid #000; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--gold2), inset 0 0 0 4px #000, inset 0 0 18px rgba(0,0,0,0.9), 0 6px 24px rgba(0,0,0,0.7);
  color: #fff; padding: 34px 14px 14px; min-width: 260px;
}
.panel .ptitle {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 22px; color: var(--gold); font-size: 15px; text-shadow: 1px 1px 0 #000; cursor: move;
  background: linear-gradient(180deg, #3a3228, #1a150f); border: 2px solid #000; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--gold2);
}
.panel .pclose {
  position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #d8302a, #6a0c06); border: 1px solid #000; box-shadow: inset 0 0 0 1px #e0b060;
  color: #ffe0a0; font: bold 14px/20px Arial; text-align: center;
}
.panel .pclose:hover { filter: brightness(1.3); }
.panel .pdrag { position: absolute; left: 0; right: 30px; top: 0; height: 28px; cursor: move; }
.parch {
  background: #e9d6aa url() repeat; color: #2a1606; border: 1px solid #5a3a1a; border-radius: 3px;
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255,250,230,0.6), rgba(0,0,0,0) 60%), radial-gradient(ellipse at 80% 90%, rgba(120,80,30,0.25), rgba(0,0,0,0) 50%);
  box-shadow: inset 0 0 30px rgba(110, 70, 20, 0.45);
  padding: 12px 14px; font-size: 14px;
}
.parch h2 { margin: 0 0 8px; font-size: 19px; color: #1a0a00; font-weight: normal; }
.parch h3 { margin: 12px 0 4px; font-size: 16px; color: #1a0a00; font-weight: normal; }
.parch p { margin: 0 0 8px; white-space: pre-wrap; }
.coin { display: inline-flex; align-items: center; margin-right: 6px; font-family: var(--font2); }
.coin::after { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 2px; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.4); }
.coin.gold::after { background: radial-gradient(circle at 35% 35%, #fff2a0, #d8a810 70%); }
.coin.silver::after { background: radial-gradient(circle at 35% 35%, #ffffff, #9aa0a8 70%); }
.coin.copper::after { background: radial-gradient(circle at 35% 35%, #ffc8a0, #b0602a 70%); }

/* ---------- tooltip ---------- */
#tooltip {
  position: fixed; z-index: 1000; max-width: 320px; min-width: 120px; pointer-events: none;
  background: var(--tt-bg); border: 2px solid #9a9aa8; border-radius: 6px; padding: 7px 9px; font: 13px/1.35 var(--font);
  box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,0.6);
}
#tooltip .tt-name { font-size: 15px; }
#tooltip .tt-row { display: flex; justify-content: space-between; gap: 18px; }
#tooltip .tt-y { color: var(--gold); }
#tooltip .tt-g { color: #1eff00; }
#tooltip .tt-r { color: #ff2020; }
#tooltip .tt-gray { color: #9d9d9d; }
#tooltip .tt-desc { color: var(--gold); }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; }
#scr-title { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,60,120,0.35), rgba(0,0,0,0.9) 70%), url() ; }
.logo { text-align: center; font-family: 'Cinzel Decorative', 'Cinzel', var(--font); line-height: 0.95; filter: drop-shadow(0 4px 12px #000); }
.logo .l1 { font-size: 28px; letter-spacing: 8px; color: #e8d8a0; }
.logo .l2 { font-size: 86px; font-weight: 900; background: linear-gradient(180deg, #fff6c0 0%, #f0c040 40%, #a06010 70%, #f8d870 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #3a1a00; }
.logo .l3 { font-size: 15px; letter-spacing: 6px; color: #a8c0ff; margin-top: 10px; }
#scr-title .enter { margin-top: 22px; }
.screen .footer { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #c8b890; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.screen .footer b { color: var(--gold); }

#scr-select .realm { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 16px; text-shadow: 1px 1px 2px #000; }
#scr-select .logo { position: absolute; top: 14px; left: 22px; transform: scale(0.42); transform-origin: top left; }
#char-list { position: absolute; right: 24px; top: 60px; width: 290px; bottom: 120px; padding: 40px 10px 10px; }
.char-slot { padding: 8px 12px; margin-bottom: 6px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; }
.char-slot:hover { background: rgba(255,210,0,0.08); }
.char-slot.sel { background: linear-gradient(90deg, rgba(255,200,40,0.25), rgba(255,200,40,0.05)); border-color: var(--gold2); }
.char-slot .n { color: var(--gold); font-size: 16px; }
.char-slot .d { color: #fff; font-size: 12px; }
.char-slot .z { color: #9d9d9d; font-size: 12px; }
#select-buttons { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
#select-buttons .wow-btn.big { font-size: 18px; padding: 8px 40px; }
#select-side { position: absolute; right: 24px; bottom: 50px; width: 290px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#select-side .wow-btn { padding-left: 6px; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#scr-create .col { position: absolute; top: 40px; bottom: 90px; width: 270px; padding: 0; }
/* the column scrolls inside its frame, so the title plate on the frame's edge isn't clipped */
#scr-create .col-body { position: absolute; inset: 38px 14px 14px; overflow-y: auto; }
#scr-create .col.left { left: 20px; }
#scr-create .col.right { right: 20px; }
.race-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.race-grid .fh { text-align: center; font-size: 14px; padding: 4px 0; }
.pick { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; border: 1px solid #3a3020; background: rgba(0,0,0,0.35); color: #e8e0c8; font-size: 13px; }
.pick:hover { border-color: var(--gold2); }
.pick.sel { border-color: var(--gold); background: rgba(255,200,40,0.18); color: #fff; box-shadow: 0 0 8px rgba(255,200,40,0.4); }
.pick.dis { opacity: 0.32; cursor: not-allowed; }
.pick .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #000; box-shadow: 0 0 0 1px var(--gold2); flex: none; }
.pick img { width: 28px; height: 28px; border: 1px solid #000; border-radius: 3px; flex: none; }
.class-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.desc-box { margin-top: 12px; font-size: 13px; color: #e8dcc0; line-height: 1.4; }
.desc-box h4 { margin: 0 0 4px; color: var(--gold); font-weight: normal; font-size: 16px; }
.custom-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
.custom-row .lbl { color: var(--gold); width: 90px; }
.custom-row .arr { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #000; background: radial-gradient(circle at 40% 35%, #c89a30, #6a4a10); color: #fff; cursor: pointer; font-weight: bold; }
.custom-row .val { color: #fff; width: 80px; text-align: center; }
#create-bottom { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; }
#create-name { font: 18px var(--font); padding: 6px 12px; width: 220px; background: rgba(0,0,0,0.75); color: var(--gold); border: 1px solid var(--gold2); border-radius: 3px; text-align: center; outline: none; }
.gender-row { display: flex; gap: 8px; margin: 8px 0; }
.gender-row .pick { flex: 1; justify-content: center; }

#scr-loading { background: radial-gradient(ellipse at center, #1a1814, #000 80%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#scr-loading .lname { font-size: 34px; color: var(--gold); margin-bottom: 8px; text-shadow: 2px 2px 4px #000; }
#scr-loading .ltip { color: #c8b890; font-size: 14px; margin-bottom: 30px; max-width: 640px; text-align: center; }
.lbar { width: 520px; height: 22px; border: 2px solid #000; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--gold2); background: #111; overflow: hidden; }
.lbar .f { height: 100%; width: 0; background: linear-gradient(180deg, #ff6040, #a01810 50%, #600800); transition: width 0.2s; }

/* ---------- unit frames ---------- */
.uf { position: absolute; width: 240px; height: 82px; }
.uf .por { position: absolute; left: 0; top: 0; width: 74px; height: 74px; border-radius: 50%; background: #000 center/cover; border: 3px solid #000; box-shadow: 0 0 0 2px var(--gold2), 0 0 0 4px #000; z-index: 2; }
.uf .body { position: absolute; left: 60px; top: 14px; width: 176px; height: 50px; background: rgba(0,0,0,0.72); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--gold2); border-radius: 0 8px 8px 0; padding: 2px 4px 2px 18px; }
.uf .nm { font-size: 13px; color: var(--gold); height: 15px; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 #000; }
.bar { position: relative; height: 14px; background: #101010; border: 1px solid #000; margin-top: 2px; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.15s linear; }
.bar span { position: absolute; inset: 0; text-align: center; font: 11px/12px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000; }
.bar.hp .fill { background: linear-gradient(180deg, #4cff4c, #0a9a0a 55%, #046404); }
.bar.mana .fill { background: linear-gradient(180deg, #6a8aff, #1030c0 55%, #081870); }
.bar.rage .fill { background: linear-gradient(180deg, #ff6060, #c01010 55%, #700808); }
.bar.energy .fill { background: linear-gradient(180deg, #fff070, #d8c010 55%, #807008); }
.uf .lvl { position: absolute; left: 50px; top: 52px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #2a2418, #000); border: 2px solid var(--gold2); z-index: 3; font: bold 12px/22px var(--font2); text-align: center; color: var(--gold); }
#uf-player { left: 12px; top: 10px; }
#uf-target { left: 270px; top: 10px; }
#uf-target .por { left: auto; right: 0; }
#uf-target .body { left: 4px; border-radius: 8px 0 0 8px; padding: 2px 18px 2px 4px; }
#uf-target .lvl { left: auto; right: 50px; }
#uf-target.elite .por::before { content: ''; position: absolute; inset: -14px -10px -10px -26px; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><path d='M60 4 C 40 10 18 6 4 20 C 18 22 22 28 18 40 C 30 34 34 40 32 52 C 40 46 46 50 46 60 L 60 96 L 74 60 C 74 50 80 46 88 52 C 86 40 90 34 102 40 C 98 28 102 22 116 20 C 102 6 80 10 60 4 Z' fill='%23d8a830' stroke='%23000' stroke-width='3'/></svg>"); z-index: -1; }
#uf-target .tags { position: absolute; left: 6px; top: 66px; display: flex; gap: 2px; flex-wrap: wrap; width: 170px; }
#uf-player .tags { position: absolute; left: 76px; top: 66px; }
#uf-pet { left: 40px; top: 92px; width: 160px; height: 40px; }
#uf-pet .por { width: 36px; height: 36px; }
#uf-pet .body { left: 26px; top: 4px; width: 128px; height: 34px; padding-left: 14px; }
#uf-pet .nm { font-size: 11px; height: 12px; }
#uf-pet .bar { height: 8px; }
.combo { display: flex; gap: 3px; position: absolute; right: 74px; top: 0px; }
.combo i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9070, #c01010); border: 1px solid #000; box-shadow: 0 0 4px #ff4020; }
.uf.dead .body { filter: grayscale(1); }
.status-icon { width: 18px; height: 18px; border: 1px solid #000; border-radius: 2px; position: relative; }
.status-icon.debuff { box-shadow: 0 0 0 1px #c01010; }
.status-icon span { position: absolute; right: -1px; bottom: -3px; font: bold 9px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000; }
#uf-player.incombat .lvl { color: #ff4040; border-color: #ff4040; }
.rest-z { position: absolute; left: 4px; top: 2px; color: var(--gold); font-size: 11px; }

/* ---------- buffs ---------- */
#buffs { position: absolute; right: 210px; top: 12px; display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 4px; max-width: 420px; }
#buffs .b { width: 32px; text-align: center; font: 11px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000; cursor: default; }
#buffs .b img { width: 32px; height: 32px; border: 1px solid #000; border-radius: 3px; display: block; }
#buffs .b.debuff img { box-shadow: 0 0 0 2px #c01010; }

/* ---------- minimap ---------- */
#mm { position: absolute; right: 14px; top: 8px; width: 180px; height: 196px; }
#mm-zone { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--gold); text-shadow: 1px 1px 0 #000; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.75) 15%, rgba(0,0,0,0.75) 85%, transparent); padding: 2px 0; }
#mm-ring { position: absolute; left: 12px; top: 24px; width: 158px; height: 158px; border-radius: 50%; border: 4px solid #000; box-shadow: 0 0 0 3px var(--gold2), 0 0 0 5px #000, inset 0 0 12px rgba(0,0,0,0.8); overflow: hidden; background: #000; }
#minimap { width: 150px; height: 150px; display: block; }
#mm .mmbtn { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #000; background: radial-gradient(circle at 40% 35%, #5a5040, #1a1610); box-shadow: 0 0 0 1px var(--gold2); color: var(--gold); font: bold 14px/20px Arial; text-align: center; cursor: pointer; }
#mm-zin { right: 2px; top: 118px; } #mm-zout { right: 12px; top: 142px; } #mm-wm { left: 0px; top: 34px; font-size: 11px !important; }
#mm-clock { position: absolute; left: 0; top: 150px; width: 38px; height: 18px; font: 11px/16px var(--font2); background: rgba(0,0,0,0.8); border: 1px solid var(--gold2); border-radius: 3px; color: #fff; text-align: center; }
#mm-n { position: absolute; left: 82px; top: 22px; color: #fff; font: bold 11px Arial; text-shadow: 1px 1px 0 #000; }

/* ---------- quest tracker ---------- */
#tracker { position: absolute; right: 16px; top: 214px; width: 250px; font-size: 13px; text-shadow: 1px 1px 0 #000, 0 0 3px #000; pointer-events: none; }
#tracker .tq { color: var(--gold); margin-top: 6px; }
#tracker .to { color: #e0e0e0; font-size: 12px; padding-left: 8px; font-family: var(--font2); }
#tracker .to.done { color: #9d9d9d; }
#tracker .tq.done { color: #40ff40; }

/* ---------- chat ---------- */
#chat { position: absolute; left: 14px; bottom: 140px; width: 430px; height: 190px; }
#chat-log { position: absolute; inset: 0 0 28px 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font: 13px/1.3 var(--font2); text-shadow: 1px 1px 0 #000; padding: 4px 6px; border-radius: 4px; transition: background 0.3s; pointer-events: none; }
#chat:hover #chat-log, #chat.active #chat-log { background: rgba(0,0,0,0.35); }
#chat-log .ln { margin: 1px 0; }
#chat-log .ln.old { opacity: 0.0; transition: opacity 2s; }
#chat:hover #chat-log .ln.old, #chat.active #chat-log .ln.old { opacity: 1; }
#chat-input { position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; background: rgba(0,0,0,0.75); color: #fff; border: 1px solid var(--gold2); border-radius: 3px; font: 13px var(--font2); padding: 2px 8px; outline: none; }
.c-system { color: #ffff00; } .c-loot { color: #00c800; } .c-xp { color: #8080ff; } .c-say { color: #fff; } .c-emote { color: #ff8040; } .c-quest { color: #ffd100; } .c-error { color: #ff2020; } .c-yell { color: #ff4040; } .c-guild { color: #40ff40; } .c-combat { color: #c0c0c0; }
.ilink { cursor: default; }

/* ---------- action bars ---------- */
#bottom { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0; width: 1024px; height: 132px; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#mainbar { position: absolute; left: 0; right: 0; bottom: 14px; height: 58px; background: linear-gradient(180deg, #4a4438 0%, #2a2620 40%, #14110c 100%); border: 2px solid #000; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 1px #8a7a5a, inset 0 2px 0 #6a604c; }
.actionbar { display: flex; gap: 3px; }
#bar1 { position: absolute; left: 10px; top: 7px; }
#bar2 { position: absolute; left: 12px; bottom: 76px; }
.slot { position: relative; width: 42px; height: 42px; border: 2px solid #000; border-radius: 4px; background: #1a1814 radial-gradient(circle, #2a2620, #0a0806); box-shadow: inset 0 0 0 1px #5a5040, 0 0 0 1px #3a3228; cursor: pointer; overflow: hidden; }
.slot img { width: 100%; height: 100%; display: block; pointer-events: none; }
.slot .kb { position: absolute; right: 2px; top: 1px; font: bold 11px var(--font2); color: #ddd; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; pointer-events: none; }
.slot .cnt { position: absolute; right: 2px; bottom: 1px; font: bold 12px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; pointer-events: none; }
.slot .cd { position: absolute; inset: 0; pointer-events: none; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 15px var(--font2); color: #ffd100; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; pointer-events: none; }
.slot.oor img { filter: brightness(0.7) sepia(1) hue-rotate(-50deg) saturate(4); }
.slot.nomana img { filter: brightness(0.55) sepia(1) hue-rotate(180deg) saturate(3); }
.slot.unusable img { filter: grayscale(1) brightness(0.55); }
.slot.active { box-shadow: inset 0 0 0 2px #ffd100, 0 0 8px #ffd100; }
.slot.pressed { transform: scale(0.94); }
.slot:hover { box-shadow: inset 0 0 0 2px #fff8c0, 0 0 0 1px #3a3228; }
.slot.empty { opacity: 0.55; }
#bottom.locked .slot.empty { opacity: 0.25; }
#micro { position: absolute; right: 96px; top: 9px; display: flex; gap: 2px; }
.mbtn { width: 28px; height: 38px; border: 1px solid #000; border-radius: 3px; background: linear-gradient(180deg, #6a3020, #2a0c06); box-shadow: inset 0 0 0 1px #c8a85a; cursor: pointer; display: flex; align-items: center; justify-content: center; font: bold 15px var(--font); color: var(--gold); text-shadow: 1px 1px 0 #000; }
.mbtn:hover { filter: brightness(1.35); }
.mbtn.flash { animation: flash 1s infinite; }
@keyframes flash { 50% { box-shadow: inset 0 0 0 1px #c8a85a, 0 0 10px 3px #ffd100; } }
#bagbtn { position: absolute; right: 12px; top: 5px; width: 46px; height: 46px; cursor: pointer; border-radius: 6px; border: 2px solid #000; box-shadow: 0 0 0 1px var(--gold2); background: center/cover; }
#bagfree { position: absolute; right: 14px; top: 38px; font: bold 11px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: none; }
#xpbar { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #120a1a; border: 2px solid #000; box-shadow: inset 0 0 0 1px #5a4a6a; }
#xpbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #c080ff, #6a20b0 55%, #3a0a70); }
#xpbar .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(5% - 1px), rgba(0,0,0,0.7) calc(5% - 1px), rgba(0,0,0,0.7) 5%); }
#xpbar span { position: absolute; inset: 0; text-align: center; font: 11px/10px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000; opacity: 0; transition: opacity 0.2s; }
#xpbar:hover span { opacity: 1; }

/* ---------- cast bar ---------- */
#castbar { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 210px; width: 260px; height: 22px; border: 2px solid #000; border-radius: 4px; background: rgba(0,0,0,0.8); box-shadow: inset 0 0 0 1px var(--gold2), 0 0 0 1px #000; overflow: hidden; }
#castbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffe060, #d8a010 55%, #805008); }
#castbar.channel .fill { background: linear-gradient(180deg, #80ff80, #10a010 55%, #046004); }
#castbar.failed .fill { background: linear-gradient(180deg, #ff6060, #c01010 55%, #600808); }
#castbar span { position: absolute; inset: 0; text-align: center; font: 13px/19px var(--font); color: #fff; text-shadow: 1px 1px 0 #000; }
#castbar.target { bottom: auto; top: 96px; left: 400px; transform: none; width: 180px; height: 16px; }
#castbar.target span { font-size: 11px; line-height: 13px; }

/* ---------- center texts ---------- */
#errors { position: absolute; left: 0; right: 0; top: 16%; text-align: center; font-size: 17px; color: #ff2020; text-shadow: 1px 1px 0 #000, 0 0 4px #000; }
#errors div { animation: fadeout 2.6s forwards; }
@keyframes fadeout { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
#zonetext { position: absolute; left: 0; right: 0; top: 22%; text-align: center; opacity: 0; transition: opacity 0.8s; }
#zonetext.show { opacity: 1; }
#zonetext .big { font-size: 46px; text-shadow: 2px 2px 3px #000, 0 0 10px #000; }
#zonetext .small { font-size: 22px; margin-top: 4px; text-shadow: 2px 2px 2px #000; }
#zonetext .pvp { font-size: 15px; margin-top: 4px; text-shadow: 1px 1px 2px #000; }
#banners { position: absolute; left: 0; right: 0; top: 30%; text-align: center; }
#banners div { font-size: 17px; text-shadow: 1px 1px 0 #000, 0 0 4px #000; animation: fadeout 3s forwards; }
#banners div.big { font-size: 34px; }
#ctext { position: absolute; inset: 0; overflow: hidden; }
.ct { position: absolute; transform: translate(-50%, -50%); font: bold 20px var(--font2); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; white-space: nowrap; will-change: transform, opacity; }
.ct.crit { font-size: 30px; }
.ct.small { font-size: 15px; }

/* ---------- windows ---------- */
#windows .panel { z-index: 20; }
.slotgrid { display: grid; grid-template-columns: repeat(6, 40px); gap: 4px; }
.islot { position: relative; width: 40px; height: 40px; border: 2px solid #000; border-radius: 4px; background: #14110c; box-shadow: inset 0 0 0 1px #4a4030; cursor: pointer; }
.islot img { width: 100%; height: 100%; display: block; border-radius: 2px; }
.islot .cnt { position: absolute; right: 2px; bottom: 0; font: bold 12px var(--font2); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.islot.qb2 { box-shadow: inset 0 0 0 2px var(--q2); } .islot.qb3 { box-shadow: inset 0 0 0 2px var(--q3); } .islot.qb4 { box-shadow: inset 0 0 0 2px var(--q4); } .islot.qb0 { box-shadow: inset 0 0 0 1px #555; }
.islot.unusable img { filter: sepia(1) hue-rotate(-50deg) saturate(3) brightness(0.7); }
.islot .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #4a4030; font-size: 9px; text-align: center; }
.money-line { margin-top: 10px; text-align: right; font: 13px var(--font2); }
.char-wrap { display: grid; grid-template-columns: 44px 220px 44px; gap: 8px; }
.char-col { display: flex; flex-direction: column; gap: 6px; }
.char-model { background: radial-gradient(ellipse at center 40%, #3a3428, #0a0806); border: 1px solid #000; box-shadow: inset 0 0 0 1px #4a4030; border-radius: 4px; height: 330px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.char-model img { height: 100%; }
.char-bottom { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
.stats .sb { background: rgba(0,0,0,0.35); border: 1px solid #3a3020; border-radius: 4px; padding: 6px 8px; }
.stats .sb h5 { margin: 0 0 4px; color: var(--gold); font-weight: normal; font-size: 13px; }
.stats .sr { display: flex; justify-content: space-between; font-family: var(--font2); }
.stats .sr b { color: #fff; font-weight: normal; }
.stats .sr .buffed { color: #1eff00; }
.list { max-height: 420px; overflow-y: auto; }
.list::-webkit-scrollbar { width: 8px; } .list::-webkit-scrollbar-thumb { background: #5a4a2a; border-radius: 4px; }
.row { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 4px; cursor: pointer; }
.row:hover { background: rgba(255,210,0,0.1); }
.row.sel { background: rgba(255,210,0,0.2); }
.row img { width: 36px; height: 36px; border: 1px solid #000; border-radius: 3px; flex: none; }
.row .t1 { color: #fff; }
.row .t2 { font-size: 12px; color: #c8b890; font-family: var(--font2); }
.row.na .t1 { color: #ff4040; }
.row.known .t1 { color: #9d9d9d; }
.gossip { width: 360px; }
.gossip .greet { margin-bottom: 10px; }
.gopt { display: flex; align-items: center; gap: 6px; padding: 3px 4px; cursor: pointer; color: #1a0a00; font-size: 14px; }
.gopt:hover { color: #000; background: rgba(120,80,20,0.15); }
.gopt .gi { width: 18px; text-align: center; font-weight: bold; font-family: Georgia; text-shadow: 1px 1px 0 #000; }
.gi.av { color: #ffd100; } .gi.ti { color: #ffd100; } .gi.pr { color: #b0b0b0; } .gi.chat { color: #4a2a0a; }
.qwin { width: 400px; }
.qwin .parch { max-height: 440px; overflow-y: auto; }
.qbtns { display: flex; justify-content: space-between; margin-top: 10px; }
.rew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rew { display: flex; align-items: center; gap: 6px; padding: 3px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; background: rgba(0,0,0,0.08); }
.rew img { width: 34px; height: 34px; border: 1px solid #000; border-radius: 3px; }
.rew.sel { border-color: #ffd100; background: rgba(255,210,0,0.25); }
.rew .nm { font-size: 12px; text-shadow: 0 0 2px #000, 1px 1px 0 #000; }
.qlog { width: 640px; display: flex; gap: 10px; }
.qlog .ql-list { width: 230px; max-height: 440px; overflow-y: auto; }
.qlog .ql-detail { flex: 1; }
.ql-zone { color: #c8b890; font-size: 12px; margin-top: 8px; }
.ql-q { padding: 2px 6px; cursor: pointer; border-radius: 3px; font-size: 13px; }
.ql-q:hover, .ql-q.sel { background: rgba(255,210,0,0.15); }
.talents { display: flex; gap: 10px; }
.ttree { width: 200px; height: 330px; border: 2px solid #000; border-radius: 4px; position: relative; box-shadow: inset 0 0 40px rgba(0,0,0,0.85); }
.ttree h4 { margin: 0; text-align: center; padding: 6px; color: var(--gold); font-weight: normal; font-size: 15px; background: rgba(0,0,0,0.5); }
.ttree .pts { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 12px var(--font2); color: #c8b890; }
.tal { position: absolute; width: 44px; height: 44px; border: 2px solid #000; border-radius: 4px; cursor: pointer; }
.tal img { width: 100%; height: 100%; display: block; border-radius: 2px; }
.tal.locked img { filter: grayscale(1) brightness(0.45); }
.tal.can { box-shadow: 0 0 0 2px #1eff00; }
.tal.maxed { box-shadow: 0 0 0 2px #ffd100; }
.tal .r { position: absolute; right: -8px; bottom: -8px; font: bold 11px var(--font2); background: #000; border: 1px solid #555; border-radius: 3px; padding: 0 3px; color: #1eff00; }
.tal.maxed .r { color: #ffd100; }
.tal.locked .r { color: #888; }
.tal-arrow { position: absolute; width: 4px; background: #c8a85a; box-shadow: 0 0 2px #000; }
.spellbook { width: 520px; }
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.sb-item { display: flex; align-items: center; gap: 8px; }
.sb-item img { width: 40px; height: 40px; border: 2px solid #000; border-radius: 4px; cursor: grab; }
.sb-item.unknown img { filter: grayscale(1) brightness(0.5); cursor: default; }
.sb-item .t1 { color: #fff; } .sb-item .t2 { color: #c8b890; font-size: 12px; font-family: var(--font2); }
.sb-item.unknown .t1 { color: #9d9d9d; }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tab { padding: 4px 12px; border: 1px solid #000; border-radius: 4px 4px 0 0; background: #2a2218; color: #c8b890; cursor: pointer; box-shadow: inset 0 0 0 1px #4a4030; }
.tab.sel { background: #4a3a24; color: var(--gold); }
.loot { width: 230px; padding-top: 30px; }
.loot .row { padding: 3px; }
.vendor { width: 420px; }
.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 420px; overflow-y: auto; }
.vitem { display: flex; gap: 6px; align-items: center; padding: 3px; border-radius: 4px; cursor: pointer; background: rgba(0,0,0,0.25); }
.vitem:hover { background: rgba(255,210,0,0.12); }
.vitem img { width: 36px; height: 36px; border: 1px solid #000; border-radius: 3px; }
.vitem .nm { font-size: 13px; }
.vitem .pr { font-size: 12px; }
.vitem.cant .pr { color: #ff4040; }
.trainer { width: 520px; }
.tr-detail { min-height: 90px; margin-top: 8px; }
.flightmap { width: 760px; }
.fm-canvas { position: relative; width: 728px; height: 470px; border: 2px solid #000; border-radius: 4px; overflow: hidden; background: #24405a; }
.fm-canvas canvas { position: absolute; left: 0; top: 0; }
.fnode { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid #000; cursor: pointer; background: radial-gradient(circle at 40% 35%, #8aff8a, #10a010); box-shadow: 0 0 6px #000; }
.fnode.cur { background: radial-gradient(circle at 40% 35%, #fff080, #c0a010); cursor: default; }
.fnode.unk { background: radial-gradient(circle at 40% 35%, #c0c0c0, #505050); cursor: default; }
.fnode .fl { position: absolute; left: 22px; top: -2px; white-space: nowrap; color: #fff; font-size: 12px; text-shadow: 1px 1px 0 #000, 0 0 3px #000; pointer-events: none; }
.worldmap { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.wm-wrap { position: relative; overflow: hidden; border: 2px solid #000; border-radius: 4px; cursor: grab; background: #1b3550; }
.wm-wrap canvas { position: absolute; left: 0; top: 0; }
.wm-info { display: flex; justify-content: space-between; margin-top: 6px; color: var(--gold); font-size: 13px; }
.menu { width: 240px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; left: 50% !important; top: 30% !important; transform: translateX(-50%); }
.menu .wow-btn { width: 100%; }
.opt-row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; gap: 14px; }
.opt-row label { color: var(--gold); }
.opt-row input[type=range] { width: 150px; }
#death { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; min-width: 300px; padding: 20px; }
#death .t { color: var(--gold); font-size: 16px; margin-bottom: 14px; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; z-index: 900; }
#fade.on { opacity: 1; }
#drag-ghost { position: fixed; width: 40px; height: 40px; pointer-events: none; z-index: 2000; opacity: 0.85; border: 1px solid #000; border-radius: 4px; }
.help { width: 520px; font-size: 13px; }
.help table { width: 100%; border-collapse: collapse; }
.help td { padding: 3px 6px; border-bottom: 1px solid #3a3020; }
.help td:first-child { color: var(--gold); width: 46%; }
.points-left { color: #1eff00; text-align: center; margin-bottom: 6px; font-size: 14px; }
.ride-hint { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); color: #c8b890; font-size: 14px; text-shadow: 1px 1px 0 #000; }
#resurrect { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); }

/* ---------- UI scale for smaller windows ---------- */
#bottom, .uf, #mm, #tracker, #chat, #buffs, #windows, #castbar, #castbar-target, #death, #resurrect { zoom: var(--ui, 1); }
.c-party { color: #aaaaff; } .c-whisper { color: #ff80ff; } .c-monster { color: #ff6a30; }
/* ---------- party frames ---------- */
#party { position: absolute; left: 14px; top: 140px; display: flex; flex-direction: column; gap: 6px; zoom: var(--ui, 1); }
.pf { position: relative; width: 190px; height: 44px; padding: 3px 6px 3px 48px; background: rgba(0,0,0,0.7); border: 2px solid #000; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gold2); cursor: pointer; }
.pf .por { position: absolute; left: 3px; top: 3px; width: 36px; height: 36px; border-radius: 50%; background: #000 center/cover; border: 2px solid var(--gold2); }
.pf .nm { font-size: 12px; height: 14px; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 #000; }
.pf .lead { color: #ffd100; font-size: 10px; margin-left: 4px; }
.pf .bar { height: 9px; margin-top: 2px; }
.pf .bar span { font-size: 9px; line-height: 8px; }
.pf.far { opacity: 0.55; }
.pf.dead .bar.hp .fill { background: #555; }
.pf.sel { box-shadow: inset 0 0 0 1px #ffd100, 0 0 6px #ffd100; }
#invite-box { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); padding: 16px 20px; text-align: center; zoom: var(--ui, 1); }
#invite-box .t { color: var(--gold); margin-bottom: 12px; font-size: 15px; }
#invite-box .wow-btn { margin: 0 6px; }

/* ---------- social: player menu, requests, trade, loot rolls ---------- */
.c-honor { color: #ffb040; }
#pmenu { position: absolute; min-width: 130px; padding: 8px 6px 6px; z-index: 60; zoom: var(--ui, 1); }
#pmenu .pm-name { font-size: 14px; padding: 0 8px 4px; border-bottom: 1px solid #4a4030; margin-bottom: 4px; }
#pmenu .pm-opt { padding: 3px 8px; color: #ffd100; cursor: pointer; font-size: 13px; }
#pmenu .pm-opt:hover { background: rgba(255, 220, 120, 0.15); color: #fff; }
.ask-box { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); padding: 16px 20px; text-align: center; zoom: var(--ui, 1); z-index: 55; }
#duel-box { top: 30%; }
.ask-box .t { color: var(--gold); margin-bottom: 12px; font-size: 15px; }
.ask-box .wow-btn { margin: 0 6px; }
.islot.locked img { filter: grayscale(1) brightness(0.45); }
.trade-win { width: 470px; }
.tr-cols { display: flex; gap: 10px; }
.tr-col { flex: 1; border: 1px solid #3a3020; border-radius: 4px; padding: 6px; background: rgba(0, 0, 0, 0.25); transition: background 0.2s; }
.tr-col.ok { background: rgba(30, 140, 30, 0.28); border-color: #3a8a2a; }
.tr-h { color: var(--gold); text-align: center; margin-bottom: 6px; font-size: 14px; }
.tr-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-height: 40px; cursor: pointer; }
.tr-row .islot { flex: none; }
.tr-n { font-size: 12px; line-height: 14px; }
.tr-money { margin-top: 6px; text-align: right; min-height: 22px; font-family: Arial, sans-serif; }
.tm-in input { width: 30px; background: #0c0a06; color: #fff; border: 1px solid #5a4a30; font: 12px Arial; text-align: right; padding: 1px 2px; }
.tm-in i { font-style: normal; font-size: 11px; margin: 0 4px 0 2px; }
.tm-in i.gold { color: #ffd700; } .tm-in i.silver { color: #c0c0c0; } .tm-in i.copper { color: #c87533; }
.tr-btns { text-align: center; margin-top: 10px; } .tr-btns .wow-btn { margin: 0 6px; }
.tr-hint { text-align: center; color: #a89870; font-size: 11px; margin-top: 6px; }
#rolls { position: absolute; left: 50%; bottom: 190px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 6px; zoom: var(--ui, 1); }
.rollf { display: flex; align-items: center; gap: 8px; padding: 6px 8px; width: 330px; }
.rollf .rf-mid { flex: 1; min-width: 0; }
.rollf .rf-n { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rollf .rf-bar { height: 6px; margin-top: 5px; background: #000; border: 1px solid #4a4030; border-radius: 3px; overflow: hidden; }
.rollf .rf-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #d8a010, #ffe060); }
.rollf .rf-b { width: 30px; height: 30px; border: 2px solid #000; border-radius: 5px; cursor: pointer; background: #2a2010; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px #8a7040; }
.rollf .rf-b img { width: 100%; height: 100%; border-radius: 3px; }
.rollf .rf-b span { color: #ff4030; font-size: 18px; font-weight: bold; }
.rollf .rf-b:hover { filter: brightness(1.35); }
.rollf .rf-b.dis { filter: grayscale(1) brightness(0.5); }
.honor-line { margin-top: 8px; text-align: center; color: #c8b890; font-size: 12px; }
.honor-line b { color: #ffb040; font-weight: normal; }
/* ---------- login ---------- */
#login-box { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
#login-box label { color: var(--gold); font-size: 14px; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
#login-box input { width: 230px; padding: 6px 10px; font: 16px Marcellus, serif; color: #fff; background: rgba(0, 0, 0, 0.75); border: 2px solid #6a5a3a; border-radius: 4px; outline: none; text-align: center; box-shadow: inset 0 0 6px #000; }
#login-box input:focus { border-color: #c8a040; }
#login-msg { min-height: 20px; color: #ff4030; font-size: 14px; text-shadow: 1px 1px 0 #000; text-align: center; max-width: 420px; }
#login-msg.ok { color: #40ff40; }
#login-who { color: #c8b890; font-size: 13px; text-shadow: 1px 1px 0 #000; }
#login-who a { color: var(--gold); cursor: pointer; text-decoration: underline; }
#login-links { display: flex; gap: 18px; justify-content: center; min-height: 18px; }
#login-links a { color: var(--gold); font-size: 13px; cursor: pointer; text-decoration: underline; text-shadow: 1px 1px 0 #000; }
#login-links a:hover { color: #fff; }
#realm-status { margin: 2px 0 8px; color: #c8b890; font-size: 14px; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
#realm-status b, #realm-online b { color: #fff; }
#realm-status .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: #40d040; box-shadow: 0 0 6px #40d040; }
#realm-status.full .dot { background: #ff4030; box-shadow: 0 0 6px #ff4030; }
#realm-status.down .dot { background: #808080; box-shadow: none; }
#realm-online { color: #c8b890; }
.c-npcsay { color: #fffeb0; }
/* ---------- chat bubbles ---------- */
#bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; left: 0; top: 0; max-width: 230px; padding: 6px 11px 7px; margin-top: -10px; background: rgba(8, 8, 10, 0.72); border: 2px solid #d8d4cc; border-radius: 12px;
  color: #fff; font: 14px/17px var(--font2, 'Marcellus', serif); text-align: center; text-shadow: 1px 1px 0 #000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); white-space: pre-wrap; word-wrap: break-word; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; margin-left: -9px; border: 9px solid transparent; border-top-color: #d8d4cc; border-bottom: 0; }
.bubble::before { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(8, 8, 10, 0.72); border-bottom: 0; z-index: 1; }
.bubble.yell { color: #ff4040; font-size: 16px; }

/* ---------- update notice, privacy link, delete account ---------- */
#update-note { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1000; padding: 7px 16px; background: rgba(20, 14, 6, 0.92); border: 2px solid var(--gold2); border-radius: 6px; color: #fff; font-size: 14px; text-shadow: 1px 1px 0 #000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }
#update-note a { color: var(--gold); cursor: pointer; text-decoration: underline; margin-left: 6px; }
.screen .footer a { color: var(--gold); pointer-events: auto; }
#delacc { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; z-index: 30; display: flex; flex-direction: column; gap: 8px; text-align: center; }
#delacc.hidden { display: none; }
#delacc p { margin: 0; font-size: 14px; line-height: 1.4; color: #e8dcc0; }
#delacc label { color: var(--gold); font-size: 13px; }
#delacc input { padding: 6px 10px; font: 16px Marcellus, serif; color: #fff; background: rgba(0, 0, 0, 0.75); border: 2px solid #6a5a3a; border-radius: 4px; outline: none; text-align: center; }
#delacc-msg { min-height: 18px; color: #ff4030; font-size: 13px; }
#delacc .row { display: flex; gap: 10px; justify-content: center; }
#login-who.small { font-size: 12px; max-width: 360px; text-align: center; }