/* ---------- Base ---------- */
:root {
  --gold: #d6b25e; --gold-dim: #8a7038; --ink: #e9e3d4; --ink-dim: #a99f8b; --bg: rgba(14, 12, 18, .86);
  --bg2: rgba(28, 24, 34, .92); --line: rgba(214, 178, 94, .35); --hp1: #c9302c; --hp2: #ef5b4c;
  --xp1: #7a4fd6; --xp2: #b48cff; --ok: #6fdc8c; --bad: #ff6b6b;
  --r-c: #c2ccd9; --r-u: #5fd16f; --r-r: #4f9cf7; --r-e: #b46bf2; --r-l: #ffb340;
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #08070b; font-family: 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif; color: var(--ink); }
#app { width: 100%; height: 100%; }
canvas { display: block; }
.serif { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .5px; }

/* ---------- Loading / Seleção ---------- */
#loading { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #1c1726 0%, #08070b 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; transition: opacity .5s; }
#loading.hide, #classSelect.hide { opacity: 0; pointer-events: none; }
#loading h1, #classSelect h1 { font-family: Georgia, serif; font-weight: 400; letter-spacing: 6px; color: var(--gold); text-shadow: 0 0 18px rgba(214,178,94,.35); margin: 0 0 6px; }
#loading .lbar { width: 320px; height: 8px; background: #1c1824; border: 1px solid var(--line); border-radius: 4px; margin-top: 18px; overflow: hidden; }
#loading .lbar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .2s; }
#loading .status { margin-top: 10px; font-size: 12px; color: var(--ink-dim); }
#classSelect { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(20,16,28,.82), rgba(6,5,9,.96)); z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .5s; }
#classSelect h2 { font-weight: 400; font-size: 13px; color: var(--ink-dim); margin: 0 0 26px; }
#classCards { display: grid; grid-template-columns: repeat(4, 255px); gap: 16px; }
.classCard { position: relative; text-align: left; padding: 16px; background: linear-gradient(180deg, #1d1926, #121018); border: 1px solid #3a3242; border-radius: 10px; color: var(--ink); cursor: pointer; font-family: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.classCard:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 8px 30px -8px var(--c); }
.cc-name { font-family: Georgia, serif; font-size: 21px; color: var(--c); }
.cc-role { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-dim); margin-bottom: 8px; }
.cc-save { position: absolute; top: 14px; right: 14px; font-size: 11px; color: var(--gold); }
.cc-desc { font-size: 12px; line-height: 1.5; color: #c9c0ad; margin-bottom: 10px; }
.cc-skill { font-size: 11px; line-height: 1.4; color: var(--ink-dim); margin-top: 5px; }
.cc-skill b { color: var(--ink); }
.cc-reset { margin-top: 10px; font-size: 10px; color: #a88; text-decoration: underline; cursor: pointer; display: inline-block; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 50; user-select: none; }
.frame { position: absolute; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.bar { position: relative; height: 14px; background: #1a1620; border: 1px solid rgba(0,0,0,.6); border-radius: 3px; overflow: hidden; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width .12s; }
.bar .txt { position: absolute; inset: 0; font-size: 10px; line-height: 14px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-weight: 600; }
.hpfill { background: linear-gradient(180deg, var(--hp2), var(--hp1)); }
.shieldfill { background: rgba(140,200,255,.55); border-right: 2px solid #bfe3ff; }

#playerFrame { top: 12px; left: 12px; width: 300px; display: flex; gap: 10px; padding: 8px 10px; align-items: center; }
.portrait { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(circle at 35% 30%, var(--pc, #666), #111); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; position: relative; box-shadow: inset 0 0 10px rgba(0,0,0,.7); }
.portrait .lvl { position: absolute; bottom: -6px; right: -6px; background: #111; border: 1px solid var(--gold); color: var(--gold); font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 6px; }
.pf-body { flex: 1; min-width: 0; }
.pf-name { font-family: Georgia, serif; font-size: 14px; color: var(--gold); margin-bottom: 4px; display: flex; justify-content: space-between; }
.pf-name small { color: var(--ink-dim); font-family: 'Segoe UI', sans-serif; font-size: 10px; }
#pfHp { height: 16px; } #pfHp .txt { line-height: 16px; }
#buffRow { position: absolute; top: 88px; left: 12px; display: flex; gap: 4px; }
.buff { width: 28px; height: 28px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line); font-size: 15px; display: flex; align-items: center; justify-content: center; position: relative; }
.buff.debuff { border-color: #b33; }
.buff span { position: absolute; bottom: -2px; right: 1px; font-size: 9px; font-weight: 700; text-shadow: 0 0 3px #000; }

#leftStack { position: absolute; top: 126px; left: 12px; display: flex; flex-direction: column; gap: 6px; }
#partyFrames, #npcFrames { display: flex; flex-direction: column; gap: 6px; }
.pmember { width: 210px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; position: relative; }
.pmember.dead { opacity: .6; filter: grayscale(.8); }
.pm-top { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; }
.pm-top b { font-weight: 600; }
.pm-role { font-size: 10px; color: var(--ink-dim); }
.pmember .bar { height: 11px; } .pmember .bar .txt { line-height: 11px; font-size: 9px; }
.pm-debuffs { position: absolute; right: -26px; top: 4px; display: flex; flex-direction: column; gap: 2px; }
.pm-debuffs .buff { width: 22px; height: 22px; font-size: 12px; }
.pmember.lowhp { box-shadow: 0 0 0 1px #ff4d4d, 0 0 12px rgba(255,60,60,.5); }
.pm-xp { font-size: 10px; color: var(--ink-dim); margin-top: 2px; }

#targetFrame { top: 12px; left: 50%; transform: translateX(-50%); width: 340px; padding: 7px 10px; display: none; }
.tf-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.tf-name { font-family: Georgia, serif; }
.tf-lvl { font-weight: 700; font-size: 12px; }
.tf-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: 1px; }
.tf-tag.elite { background: #6b5110; color: #ffd76a; } .tf-tag.boss { background: #6b1010; color: #ff8a8a; }
#tfHp { height: 16px; } #tfHp .txt { line-height: 16px; }
#tfCast { margin-top: 4px; height: 10px; display: none; } #tfCast .fill { background: linear-gradient(90deg, #d68a1f, #ffd76a); }
#tfCast .txt { line-height: 10px; font-size: 9px; }
#tfTarget { font-size: 10px; color: var(--ink-dim); margin-top: 3px; }

#minimapWrap { top: 12px; right: 12px; width: 196px; padding: 8px; text-align: center; }
#zoneName { font-family: Georgia, serif; font-size: 13px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#zoneSub { font-size: 10px; color: var(--ink-dim); margin-bottom: 6px; }
#minimap { width: 180px; height: 180px; border-radius: 50%; border: 2px solid var(--gold-dim); background: #111; }
#coords { font-size: 10px; color: var(--ink-dim); margin-top: 4px; }

#chatLog { left: 12px; bottom: 38px; width: 380px; height: 150px; padding: 6px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 12px; line-height: 1.45; background: rgba(10,9,14,.55); }
#chatLog .ln { text-shadow: 0 1px 2px #000; animation: popIn .2s ease-out; }
#chatLog .sys { color: #e3d29a; } #chatLog .xp { color: #b48cff; } #chatLog .warn { color: #ff8a6a; } #chatLog .gold { color: #ffd76a; }
@keyframes popIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

#actionBar { pointer-events: auto; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.slot { position: relative; width: 56px; height: 56px; background: linear-gradient(180deg, #2a2432, #17141c); border: 1px solid #4a4052; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.slot .ico { font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
.slot .key { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 700; color: var(--gold); text-shadow: 0 0 3px #000; }
.slot .nm { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 8px; color: var(--ink-dim); text-align: center; line-height: 1.1; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: rgba(0,0,0,.72); pointer-events: none; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 0 4px #000; }
.slot .chg { position: absolute; left: 0; top: 0; height: 3px; width: 0%; background: var(--gold); }
.slot.charging { border-color: var(--gold); box-shadow: 0 0 10px rgba(214,178,94,.6); }
.slot.ready-flash { animation: readyFlash .35s; }
@keyframes readyFlash { 0% { box-shadow: 0 0 0 2px #fff8; } 100% { box-shadow: none; } }
.slot.taunt-hint { border-color: #ff4d4d; box-shadow: 0 0 14px rgba(255,60,60,.8); animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.sep { width: 1px; background: var(--line); margin: 4px 3px; }
.slot .cnt { position: absolute; bottom: 2px; right: 4px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000; }

#xpBar { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: rgba(10,9,14,.92); border-top: 1px solid var(--line); }
#xpBar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, var(--xp2), var(--xp1)); transition: width .2s; }
#xpBar .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(0,0,0,.5) calc(10% - 1px), rgba(0,0,0,.5) 10%); }
#xpBar .txt { position: absolute; inset: 0; font-size: 11px; line-height: 18px; text-align: center; text-shadow: 0 1px 2px #000; font-weight: 600; }
#dodgeBar { position: absolute; bottom: 102px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: #1a1620; border-radius: 2px; overflow: hidden; }
#dodgeBar div { height: 100%; background: #7ef0c3; }

#microMenu { position: absolute; right: 12px; bottom: 30px; display: flex; gap: 5px; pointer-events: auto; }
.mbtn { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(180deg, #2a2432, #17141c); border: 1px solid var(--line); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; position: relative; padding: 0; }
.mbtn:hover { border-color: var(--gold); background: linear-gradient(180deg, #3a3242, #1d1924); }
.mbtn small { font-size: 9px; color: var(--gold); font-weight: 700; }
.mbtn .badge { position: absolute; top: -5px; right: -5px; background: #c9302c; color: #fff; font-size: 9px; border-radius: 8px; padding: 1px 5px; display: none; }

#combatLog { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); font-size: 13px; text-align: center; width: 600px; }
#combatLog .msg { opacity: 0; animation: msgFade 1.6s forwards; text-shadow: 0 1px 3px #000; font-weight: 600; }
@keyframes msgFade { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

#raidWarning { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-family: Georgia, serif; font-size: 26px; font-weight: 700; text-align: center; text-shadow: 0 0 12px #000, 0 2px 4px #000; pointer-events: none; white-space: nowrap; }
#raidWarning .rw { animation: rwIn 3.2s forwards; }
@keyframes rwIn { 0% { opacity: 0; transform: scale(1.4); } 8% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#zoneBanner { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .8s; }
#zoneBanner .zb1 { font-family: Georgia, serif; font-size: 40px; color: var(--gold); letter-spacing: 4px; text-shadow: 0 0 20px #000; }
#zoneBanner .zb2 { font-size: 14px; color: var(--ink); text-shadow: 0 0 8px #000; }
#prompt { position: absolute; bottom: 112px; left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid var(--gold); border-radius: 6px; padding: 6px 14px; font-size: 13px; display: none; }
#prompt b { color: var(--gold); }
#deathOverlay { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(60,0,0,.35), rgba(0,0,0,.75)); display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 60; }
#deathOverlay h1 { font-family: Georgia, serif; color: #ff6b6b; font-weight: 400; letter-spacing: 6px; font-size: 44px; margin: 0; }
#deathOverlay p { color: var(--ink); }

#waveBanner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; background: var(--bg); border: 1px solid #ff7a7a; border-radius: 10px; padding: 18px 36px; }
.wb-title { font-size: 22px; font-weight: 700; color: #ff7a7a; letter-spacing: 2px; }
.wb-sub { font-size: 13px; color: var(--ink); margin-top: 6px; }
#buildPanel { top: 240px; right: 12px; width: 200px; padding: 10px 12px; display: none; font-size: 12px; }
.pp-title { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.pp-row { display: flex; justify-content: space-between; padding: 2px 0; }

.dmgNum { position: absolute; font-weight: 800; font-size: 16px; pointer-events: none; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.6); animation: dmgFloat 1s forwards; white-space: nowrap; }
@keyframes dmgFloat { 0% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -48px) scale(.9); } }
.dmgNum.crit { color: #ffb340; font-size: 22px; } .dmgNum.normal { color: #fff; } .dmgNum.ally { color: #c8c3b8; font-size: 12px; font-weight: 600; }
.dmgNum.playerHit { color: #ff5b5b; } .dmgNum.heal { color: #6fdc8c; } .dmgNum.xpGain { color: #b48cff; font-size: 13px; } .dmgNum.miss { color: #9ad; font-size: 13px; }

/* nameplates */
#plates { position: absolute; inset: 0; overflow: hidden; }
.plate { position: absolute; transform: translate(-50%, -100%); text-align: center; pointer-events: none; white-space: nowrap; }
.plate .pn { font-size: 11px; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.plate .pn i { font-style: normal; font-weight: 800; margin-right: 4px; }
.plate .ph { width: 64px; height: 5px; margin: 2px auto 0; background: #1a1620; border: 1px solid rgba(0,0,0,.7); border-radius: 2px; overflow: hidden; }
.plate .ph div { height: 100%; background: linear-gradient(180deg, var(--hp2), var(--hp1)); }
.plate.elite .pn { color: #ffd76a; } .plate.boss .ph { width: 120px; height: 7px; }
.plate.target .pn { text-decoration: underline; }
.plate.ally .pn { color: #8ff0a8; } .plate.ally .ph div { background: linear-gradient(180deg, #8ff0a8, #2f9e52); }
.plate .aggro { color: #ff4d4d; font-weight: 800; }

/* ---------- Janelas ---------- */
.window { position: absolute; background: linear-gradient(180deg, rgba(30,26,36,.97), rgba(16,14,20,.97)); border: 1px solid var(--gold-dim); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.7); pointer-events: auto; display: none; color: var(--ink); }
.window.open { display: block; }
.win-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: move; background: linear-gradient(180deg, rgba(214,178,94,.12), transparent); border-radius: 10px 10px 0 0; }
.win-head h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 16px; color: var(--gold); letter-spacing: 1px; }
.win-close { background: none; border: 1px solid var(--line); color: var(--ink-dim); width: 24px; height: 24px; border-radius: 5px; cursor: pointer; font-size: 14px; line-height: 1; }
.win-close:hover { color: #fff; border-color: var(--gold); }
.win-body { padding: 12px; }
.btn { background: linear-gradient(180deg, #3a3242, #241f2c); border: 1px solid var(--gold-dim); color: var(--ink); border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: inherit; }
.btn:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #6b5420, #3e3012); color: #ffe7a8; }

/* inventário */
#invWindow { width: 668px; left: calc(50% - 334px); top: 70px; }
.inv-wrap { display: flex; gap: 14px; }
.doll { width: 220px; flex: none; }
.doll-grid { display: grid; grid-template-columns: 50px 1fr 50px; grid-template-rows: repeat(4, 50px); gap: 8px; align-items: center; }
.doll-fig { grid-column: 2; grid-row: 1 / span 4; height: 100%; border-radius: 8px; background: radial-gradient(ellipse at center, rgba(214,178,94,.12), transparent 70%); display: flex; align-items: center; justify-content: center; font-size: 64px; opacity: .55; }
.islot { width: 46px; height: 46px; border-radius: 6px; background: linear-gradient(180deg, #221d29, #141118); border: 1px solid #3c3444; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.islot:hover { border-color: var(--gold); }
.islot img { width: 40px; height: 40px; image-rendering: auto; pointer-events: none; }
.islot .ph { font-size: 9px; color: #5a5262; text-align: center; line-height: 1.1; pointer-events: none; }
.islot .il { position: absolute; bottom: 0; right: 2px; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.islot.r-comum { border-color: #5d6470; } .islot.r-incomum { border-color: var(--r-u); box-shadow: inset 0 0 8px rgba(95,209,111,.25); }
.islot.r-raro { border-color: var(--r-r); box-shadow: inset 0 0 10px rgba(79,156,247,.3); } .islot.r-epico { border-color: var(--r-e); box-shadow: inset 0 0 12px rgba(180,107,242,.35); }
.islot.r-lendario { border-color: var(--r-l); box-shadow: inset 0 0 14px rgba(255,179,64,.45); }
.islot.upgrade::after { content: '▲'; position: absolute; top: 0; left: 3px; color: var(--ok); font-size: 10px; text-shadow: 0 0 3px #000; }
.islot.cant { opacity: .55; }
.islot.cant::before { content: ''; position: absolute; inset: 0; background: rgba(160,30,30,.25); border-radius: 6px; }
.bag-grid { display: grid; grid-template-columns: repeat(8, 46px); gap: 5px; }
.inv-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 6px; }
.gold { color: #ffd76a; font-weight: 700; }
.doll-stats { margin-top: 10px; font-size: 12px; line-height: 1.7; background: rgba(0,0,0,.25); border-radius: 6px; padding: 6px 10px; }
.doll-stats div { display: flex; justify-content: space-between; } .doll-stats b { color: var(--gold); font-weight: 600; }
.inv-hint { font-size: 10px; color: var(--ink-dim); margin-top: 8px; }

/* tooltip */
#tooltip { position: fixed; z-index: 200; pointer-events: none; display: none; min-width: 210px; max-width: 280px; background: rgba(12,10,16,.97); border: 1px solid var(--gold-dim); border-radius: 8px; padding: 9px 11px; font-size: 12px; line-height: 1.5; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
#tooltip .tt-name { font-family: Georgia, serif; font-size: 14px; }
#tooltip .tt-sub { color: var(--ink-dim); font-size: 11px; margin-bottom: 4px; }
#tooltip .tt-stat { color: #fff; } #tooltip .tt-aff { color: #8fc7ff; }
#tooltip .tt-up { color: var(--ok); } #tooltip .tt-down { color: var(--bad); }
#tooltip .tt-sep { border-top: 1px solid var(--line); margin: 5px 0; }
#tooltip .tt-hint { color: var(--ink-dim); font-size: 10px; margin-top: 4px; }
#tooltip .tt-cmp { font-size: 11px; }
/* janela Personagem → Habilidades */
.skill-list { display: flex; flex-direction: column; gap: 6px; }
.skill-card { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.45; }
.skill-card .tt-name { font-family: Georgia, serif; font-size: 13px; }
.skill-card .tt-sub { color: var(--ink-dim); font-size: 11px; }
.skill-card .tt-stat { color: #fff; } .skill-card .tt-aff { color: #8fc7ff; font-size: 11px; }
.skill-card.passive { border-style: dashed; }

/* personagem */
#charWindow { width: 380px; left: 80px; top: 120px; }
#charWindow .win-body { max-height: calc(100vh - 170px); overflow-y: auto; }
#mapWindow .win-body { max-height: calc(100vh - 130px); overflow-y: auto; }
.attr-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.attr-row .an { flex: 1; } .attr-row .an small { display: block; color: var(--ink-dim); font-size: 10px; }
.attr-row .av { width: 44px; text-align: right; color: var(--gold); font-weight: 700; }
.attr-add { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--gold-dim); background: #241f2c; color: var(--gold); cursor: pointer; font-weight: 700; }
.attr-add:disabled { opacity: .3; cursor: default; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; font-size: 12px; margin-top: 10px; }
.stat-grid div { display: flex; justify-content: space-between; } .stat-grid b { color: var(--gold); font-weight: 600; }
.pts { color: var(--gold); font-weight: 700; }

/* mapa */
#mapWindow { width: 760px; left: calc(50% - 380px); top: 70px; }
.tw-row { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.tw-row input { width: 64px; text-align: center; background: rgba(0,0,0,.35); color: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 3px; }
.tw-tabs { display: flex; gap: 6px; margin: 10px 0 6px; }
.tw-rank { width: 100%; border-collapse: collapse; font-size: 12px; }
.tw-rank th { text-align: left; color: var(--ink-dim); font-weight: 600; border-bottom: 1px solid var(--line); padding: 2px 4px; }
.tw-rank td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.tw-rank tr.me td { color: #ffd76a; }
#askBox { display: none; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 300px; padding: 12px 14px; pointer-events: auto; z-index: 300; }
#askBox input { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 5px 7px; background: rgba(0,0,0,.4); color: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; letter-spacing: 2px; }
#npcSay { display: none; position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: 520px; padding: 10px 14px; background: rgba(12,10,16,.92); border: 1px solid var(--gold-dim); border-radius: 8px; font-size: 13px; line-height: 1.5; color: #eee; pointer-events: none; }
#pvpBtn.pvp-on { background: #7a1e1e; color: #fff; border-color: #ff6b6b; }
.net-pvp { color: #ff6b6b; font-weight: 700; font-size: 11px; }
.plate.pvp .pn, .plate.pvp { color: #ff6b6b; }
#chainBreak { display: none; position: absolute; left: 50%; top: 38%; transform: translateX(-50%); padding: 8px 16px; font: 700 20px Georgia, serif; color: #fff; background: rgba(120,20,20,.85); border: 2px solid #ffb3b3; border-radius: 8px; pointer-events: none; text-shadow: 0 0 8px #000; }
.ach-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.ach-row b { color: #ffd76a; } .ach-row small { color: var(--ink-dim); }
.map-wrap { display: flex; gap: 14px; }
#bigMap { width: 400px; height: 400px; border-radius: 8px; border: 1px solid var(--line); background: #111; flex: none; }
.zone-list { flex: 1; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.zrow { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border-radius: 6px; margin-bottom: 4px; background: rgba(255,255,255,.03); border: 1px solid transparent; font-size: 12px; }
.zrow.cur { border-color: var(--gold-dim); background: rgba(214,178,94,.08); }
.zrow.locked { opacity: .45; }
.zrow .zn { font-family: Georgia, serif; font-size: 13px; } .zrow .zl { color: var(--ink-dim); font-size: 11px; }
.dg-box { margin-top: 10px; padding: 10px; border: 1px solid #6a3aa8; border-radius: 8px; background: rgba(120,60,200,.08); font-size: 12px; line-height: 1.5; }
.dg-box h4 { margin: 0 0 4px; font-family: Georgia, serif; color: #c9a2ff; font-weight: 400; font-size: 15px; }

/* ajuda */
#helpWindow { width: 560px; left: calc(50% - 280px); top: 80px; }
#helpWindow .win-body { font-size: 12px; line-height: 1.6; max-height: 70vh; overflow-y: auto; }
#helpWindow h4 { color: var(--gold); margin: 10px 0 4px; font-family: Georgia, serif; font-weight: 400; font-size: 14px; }
kbd { background: #2a2432; border: 1px solid #4a4052; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; color: var(--gold); font-family: inherit; }

/* ---------- multiplayer ---------- */
#netPanel { display: none; position: absolute; left: 12px; bottom: 196px; width: 380px; padding: 6px 8px; font-size: 12px; pointer-events: auto; background: rgba(10,9,14,.72); }
#netPanel .net-id { color: #ffd76a; font-weight: 700; }
#netPanel .net-dim { color: var(--ink-dim); }
#netPlayers { max-height: 96px; overflow-y: auto; margin-top: 3px; }
.net-p { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.net-p button { margin-left: auto; }
.net-tag { margin-left: auto; font-size: 10px; color: #8ff0a8; }
.net-inv { margin-top: 4px; padding: 4px 6px; border: 1px solid #ffd76a; border-radius: 5px; background: rgba(255,215,106,.08); animation: popIn .2s ease-out; }
.net-inv button { margin-left: 4px; }
.net-row { display: flex; gap: 5px; margin-top: 5px; }
.net-row input { flex: 1; min-width: 0; background: #14121a; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font: inherit; }
#netPanel button { background: #2a2433; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; }
#netPanel button:hover { border-color: #ffd76a; }
.plate.remote .pn { color: #8fc7ff; } .plate.remote .ph div { background: linear-gradient(180deg, #8fc7ff, #2f6ea0); }
.plate.party .pn { color: #ffd76a; }
.plate .pn small { color: #ffd76a; font-weight: 700; opacity: .85; }
.pmember.remote { border-color: rgba(255,215,106,.6); }
.pmember.away { opacity: .55; }

/* mercenários & base */
#npcWindow { width: 860px; left: calc(50% - 430px); top: 60px; }
.npc-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.npc-tab { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: #1c1824; color: var(--ink); cursor: pointer; font-size: 12px; }
.npc-tab.on { border-color: var(--gold); background: rgba(214,178,94,.12); }
.npc-wrap { display: flex; gap: 14px; }
.npc-left { width: 400px; flex: none; }
.npc-right { flex: 1; min-width: 0; }
.npc-head { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 8px; }
.npc-head .bar { flex: 1; }
.npc-head select, .npc-skills select { background: #1c1824; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; font-size: 11px; font-family: inherit; }
.npc-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.npc-modes .btn.on { border-color: var(--gold); background: linear-gradient(180deg, #6b5420, #3e3012); color: #ffe7a8; }
.npc-sec { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 5px; }
.npc-sec small { color: var(--ink-dim); text-transform: none; letter-spacing: 0; }
.npc-eq, .npc-bag { display: grid; grid-template-columns: repeat(8, 46px); gap: 4px; }
.npc-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.npc-skills select { width: 100%; }
.bag-grid.small { grid-template-columns: repeat(8, 46px); }
.base-box { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.25); font-size: 12px; line-height: 1.6; }
.base-box h4 { margin: 0 0 4px; font-family: Georgia, serif; font-weight: 400; color: var(--gold); font-size: 14px; }
.base-box .raid { color: #ff8a6a; font-weight: 600; }
/* baú */
#storeWindow { width: 900px; left: calc(50% - 450px); top: 90px; }
.store-wrap { display: flex; gap: 18px; }
#storeGrid { max-height: 320px; overflow-y: auto; }

/* estações / proficiências */
#craftWindow { width: 760px; left: calc(50% - 380px); top: 80px; }
.craft-wrap { display: flex; gap: 14px; }
.craft-recipes { flex: 1; max-height: 420px; overflow-y: auto; }
.craft-side { width: 390px; flex: none; }
.rcp { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 6px; background: rgba(0,0,0,.2); font-size: 12px; }
.rcp.locked { opacity: .5; }
.rcp .rn { font-family: Georgia, serif; font-size: 13px; color: var(--gold); display: flex; justify-content: space-between; }
.rcp .ri { color: var(--ink-dim); margin: 3px 0 6px; }
.rcp .ri b.ok { color: var(--ok); } .rcp .ri b.no { color: var(--bad); }
.rcp .btn { padding: 3px 9px; font-size: 11px; margin-right: 4px; }
.qrow { font-size: 12px; margin-bottom: 6px; }
.qrow .bar { height: 10px; margin-top: 3px; } .qrow .bar .fill { background: linear-gradient(90deg, #6b5420, #d6b25e); }
.prof-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; }
.prof-row .pn { width: 92px; } .prof-row .pl { width: 46px; color: var(--gold); font-weight: 700; }
.prof-row .bar { flex: 1; height: 9px; } .prof-row .bar .fill { background: linear-gradient(90deg, #2f9e52, #8ff0a8); }
.cost-ok { color: var(--ok); } .cost-no { color: var(--bad); }

/* mercado entre jogadores */
#econWindow { width: 1060px; left: calc(50% - 530px); top: 50px; }
#econWindow .win-body { max-height: calc(100vh - 140px); overflow-y: auto; }
#ecTop { font-size: 12px; margin-bottom: 8px; line-height: 1.7; }
#econWindow .ok { color: var(--ok); } #econWindow .no { color: var(--bad); } #econWindow .warn { color: #ffb35c; } #econWindow .dim { color: var(--ink-dim); } #econWindow .gold { color: #ffd76a; }
.ec-box { display: flex; align-items: center; gap: 8px; } .ec-box .btn { padding: 3px 10px; font-size: 11px; }
.ec-ico { width: 18px; height: 18px; vertical-align: middle; margin-right: 5px; }
.ec-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ec-table th { text-align: left; font-weight: 400; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 4px; border-bottom: 1px solid var(--line); }
.ec-table td { padding: 4px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.ec-table.small td { padding: 3px; }
.ec-name { white-space: nowrap; }
.spark { vertical-align: middle; }
.ec-orders { display: grid; grid-template-columns: 330px 1fr 280px; gap: 14px; }
.ec-mtable tr.ec-mrow { display: table-row; cursor: pointer; }
.ec-mtable tr.ec-mrow.on td { background: rgba(214,178,94,.12); }
.ec-mrow { display: flex; align-items: center; gap: 2px; font-size: 12px; padding: 4px 6px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; }
.ec-mrow span { flex: 1; } .ec-mrow small { font-size: 10px; }
.ec-mrow:hover { background: rgba(255,255,255,.04); } .ec-mrow.on { border-color: var(--gold); background: rgba(214,178,94,.1); }
.ec-book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.ec-book table { width: 100%; border-collapse: collapse; } .ec-book th { text-align: left; font-weight: 400; font-size: 10px; text-transform: uppercase; }
.ec-book td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ec-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.2); font-size: 12px; }
.ec-form .btn.on { border-color: var(--gold); background: linear-gradient(180deg, #6b5420, #3e3012); color: #ffe7a8; }
.ec-form label { display: flex; justify-content: space-between; align-items: center; }
.ec-form input { width: 120px; background: #1c1824; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font-family: inherit; }
.ec-trades { font-size: 11px; line-height: 1.7; max-height: 220px; overflow-y: auto; }
.ec-gear { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.ec-cards { display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow-y: auto; }
.ec-card { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.2); }
.ec-card > div:nth-child(2) { flex: 1; }
.ec-cp { display: flex; align-items: center; gap: 6px; } .ec-cp .btn, .ec-card .btn { padding: 2px 8px; font-size: 11px; }
.ec-bag { display: grid; grid-template-columns: repeat(8, 46px); gap: 4px; }
.ec-bag .islot { cursor: pointer; } .ec-bag .islot.sel { outline: 2px solid var(--gold); }
.ec-line { font-size: 12px; margin: 6px 0; }
.ec-empty { color: var(--ink-dim); font-size: 12px; padding: 10px; }

/* mercenários: controle */
.npc-head input { flex: 1; min-width: 0; background: #1c1824; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 4px 7px; font-size: 13px; font-family: Georgia, serif; }
.npc-head input:focus { border-color: var(--gold); outline: none; }
.npc-hp { height: 14px; margin-bottom: 4px; }
.npc-modes .btn { padding: 4px 9px; font-size: 11px; }
.npc-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.npc-row .npc-sec { margin: 0; width: 64px; flex: none; }
.npc-row select, .npc-skin select { background: #1c1824; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; font-size: 11px; font-family: inherit; }
.npc-skin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.npc-tints { display: flex; gap: 3px; }
.npc-tint { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.npc-tint.on { border-color: #fff; box-shadow: 0 0 0 1px var(--gold); }
.npc-skin label.off { opacity: .4; cursor: default; }
.npc-skin label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
/* quadros dos mercenários (HUD) */
.nframe { pointer-events: auto; width: 210px; padding: 5px 8px; background: var(--bg); border: 1px solid rgba(255,179,71,.45); border-radius: 6px; font-size: 11px; }
.nframe.dead { opacity: .6; filter: grayscale(.8); } .nframe.far { opacity: .6; }
.nf-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 3px; }
.nf-top b { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-btns { display: flex; gap: 2px; flex: none; }
.nf-btns button { width: 22px; height: 20px; padding: 0; font-size: 11px; border-radius: 4px; border: 1px solid var(--line); background: #1c1824; color: var(--ink); cursor: pointer; }
.nf-btns button:hover:not(:disabled) { border-color: var(--gold); } .nf-btns button.on { border-color: var(--gold); background: rgba(214,178,94,.25); } .nf-btns button:disabled { opacity: .35; cursor: default; }
.nframe .bar { height: 9px; } .nframe .bar .txt { line-height: 9px; font-size: 8px; }
.nf-st { color: var(--ink-dim); font-size: 10px; margin-top: 2px; }
#npcWindow .win-body { max-height: calc(100vh - 110px); overflow-y: auto; }

/* som e tela / dano */
#soundPanel { display: none; position: absolute; right: 12px; bottom: 84px; width: 230px; padding: 10px 12px; pointer-events: auto; font-size: 12px; }
#soundPanel.open { display: block; }
.sp-title { font-family: Georgia, serif; color: var(--gold); font-size: 13px; margin-bottom: 6px; }
.sp-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; cursor: pointer; }
.sp-row input[type=range] { flex: 1; accent-color: var(--gold); }
.sp-row span { width: 34px; text-align: right; color: var(--ink-dim); }
.sp-hint { color: var(--ink-dim); font-size: 10px; margin-top: 6px; line-height: 1.4; }
#hurtVignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(200,20,20,.55) 100%); }

/* login (páginas isoladas: AgentSpace) */
#loginPanel { display: none; position: absolute; inset: 0; margin: auto; width: 380px; height: fit-content; padding: 22px 24px; z-index: 5;
  background: linear-gradient(180deg, rgba(30,26,36,.98), rgba(16,14,20,.98)); border: 1px solid var(--gold-dim); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.7); color: var(--ink); }
#loginPanel.open { display: block; }
#loginPanel h3 { margin: 0 0 8px; font-family: Georgia, serif; font-weight: 400; color: var(--gold); letter-spacing: 1px; }
#loginPanel p { font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin: 0 0 12px; }
#loginPanel input { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; padding: 8px 10px; background: #1c1824; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
#loginPanel input:focus { border-color: var(--gold); outline: none; }
#loginErr { min-height: 18px; font-size: 12px; color: #ff8a6a; margin: 4px 0; }
.login-btns { display: flex; gap: 8px; } .login-btns .btn { flex: 1; }
#classSelect.locked #classCards { filter: blur(2px) brightness(.5); pointer-events: none; }

/* mochila grande (150) e filtro de lixo */
#bagGrid, #npcPlayerBag, #storeBag { max-height: 368px; overflow-y: auto; padding-right: 6px; align-content: start; }
#npcBag { max-height: 200px; overflow-y: auto; padding-right: 6px; }
.islot.junk { box-shadow: inset 0 0 0 2px #ff5a5a; filter: saturate(.6); }
#junkPanel { display: none; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.25); font-size: 12px; }
#junkPanel.open { display: block; }
#junkPanel label { display: flex; align-items: center; gap: 6px; margin: 4px 0; cursor: pointer; }
#junkPanel select { background: #1c1824; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; font-family: inherit; }
#jfPreview { color: var(--ink-dim); margin-top: 4px; }
.npc-check { font-size: 11px; cursor: pointer; } .npc-check small { color: var(--ink-dim); } #npcSold { color: #ffd76a; }

/* construção: janela Avançado e teleporte */
#buildWindow { width: 900px; left: calc(50% - 450px); top: 50px; }
#buildWindow .win-body { max-height: calc(100vh - 130px); overflow-y: auto; }
.bw-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bw-top .npc-tabs { margin: 0; } .bw-acts { display: flex; gap: 6px; } .bw-acts .btn { font-size: 11px; padding: 5px 9px; }
.bw-rules { font-size: 12px; color: var(--ink-dim); margin: 8px 0 10px; line-height: 1.5; }
.bw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.bw-card { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.22); cursor: pointer; font-size: 11px; }
.bw-card:hover { border-color: var(--gold); } .bw-card.on { border-color: var(--gold); background: rgba(214,178,94,.12); }
.bw-card.locked { opacity: .5; }
.bw-card img { width: 72px; height: 72px; flex: none; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); border-radius: 6px; }
.bw-name { font-family: Georgia, serif; font-size: 13px; color: var(--gold); }
.bw-hp { color: var(--ink-dim); margin: 1px 0 3px; } .bw-hp .no { color: var(--bad); }
.bw-cost { line-height: 1.5; } .bw-note { color: var(--ink-dim); margin-top: 2px; }
#tpPanel { display: none; position: absolute; left: 50%; bottom: 250px; transform: translateX(-50%); min-width: 260px; padding: 10px 12px; pointer-events: auto; font-size: 12px; }
#tpPanel.open { display: block; }
#tpPanel h4 { margin: 0 0 6px; font-family: Georgia, serif; font-weight: 400; color: #8fe8ff; }
#tpPanel button { display: flex; justify-content: space-between; width: 100%; margin: 3px 0; gap: 10px; }
#tpPanel small { color: var(--ink-dim); }