/* ============ Nexaria — UI ============ */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-user-select:none; }
:root {
  --gold:#c8aa5a; --gold-hi:#f0d48a; --gold-dk:#6e5626;
  --panel:#0d0f14e8; --panel2:#161a22;
  --hp:#3fd22b; --hp-dk:#1a5c10; --mana:#2b6cd2; --rage:#c4302b; --energy:#e0c02b;
}
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:'Spectral',Georgia,serif; color:#e8dfc8; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
button { font-family:'Cinzel',serif; cursor:pointer; }

/* ============ TELA INICIAL ============ */
#startScreen { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.start-bg { position:absolute; inset:-40px; background:
  radial-gradient(ellipse at 50% 120%, #2b4d1f44 0%, transparent 60%),
  radial-gradient(ellipse at 20% -20%, #4a6fa544 0%, transparent 55%),
  linear-gradient(#0a0e1ccc, #101826dd 45%, #1a2413cc),
  url('../assets/inicio.png') center/cover no-repeat;
  animation:bgDrift 22s ease-in-out infinite alternate; }
@keyframes bgDrift { from { transform:scale(1) } to { transform:scale(1.06) } }
.start-content { position:relative; text-align:center; padding:20px; max-width:860px; width:100%; }
.game-logo { font-family:'Cinzel',serif; font-weight:900; font-size:min(64px,9vw); letter-spacing:4px; color:var(--gold-hi);
  text-shadow:0 0 24px #c8a02c66, 0 3px 0 #5a4310, 0 6px 18px #000; }
.game-logo span { color:#7fb4ff; text-shadow:0 0 24px #2b6cd288, 0 3px 0 #12294f, 0 6px 18px #000; }
.start-sub { font-family:'Cinzel',serif; color:#b9c8e8; letter-spacing:6px; margin:6px 0 26px; font-size:15px; text-shadow:0 2px 8px #000; }
.char-create { background:
  linear-gradient(#0b0e15dd, #0b0e15ee),
  url('../assets/personagem.png') center/cover no-repeat;
  border:1px solid var(--gold-dk); border-radius:10px; padding:22px 26px; box-shadow:0 0 0 4px #00000055, 0 20px 60px #000c; backdrop-filter:blur(4px); }
.cc-title { font-family:'Cinzel',serif; color:var(--gold); letter-spacing:3px; margin-bottom:16px; font-size:17px; }
#classCards { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.class-card { width:200px; padding:16px 12px 14px; border:2px solid #3a3325; border-radius:8px; background:linear-gradient(#171b24,#0e1118); cursor:pointer; transition:.15s; position:relative; }
.class-card:hover { border-color:#8a7748; transform:translateY(-3px); }
.class-card.sel { border-color:var(--gold-hi); box-shadow:0 0 18px #c8aa5a55, inset 0 0 24px #c8aa5a11; transform:translateY(-3px); }
.class-card .ci { font-size:44px; display:block; margin-bottom:6px; filter:drop-shadow(0 3px 6px #000); }
.class-card h3 { font-family:'Cinzel',serif; font-size:18px; margin-bottom:4px; }
.class-card .cr { font-size:12px; letter-spacing:2px; opacity:.85; margin-bottom:8px; font-family:'Cinzel',serif; }
.class-card p { font-size:12.5px; line-height:1.45; color:#c9c0a8; }
.cc-name-row { margin:18px 0 12px; display:flex; gap:8px; align-items:center; justify-content:center; }
.cc-name-row label { font-size:14px; color:#cbbf9f; }
#nameInput { background:#05070c; border:1px solid var(--gold-dk); color:#ffe9a8; padding:9px 12px; border-radius:6px; font-family:'Cinzel',serif; font-size:16px; width:200px; text-align:center; outline:none; }
#nameInput:focus { border-color:var(--gold-hi); }
#randName { background:#1c2230; border:1px solid var(--gold-dk); color:#fff; border-radius:6px; padding:8px 10px; font-size:16px; }
#enterWorld { margin-top:6px; padding:14px 54px; font-size:19px; font-weight:700; letter-spacing:3px; color:#2a1c05;
  background:linear-gradient(#f0d48a,#c8a02c 55%,#a07c18); border:2px solid #ffe9a8; border-radius:8px;
  box-shadow:0 4px 0 #5a4310, 0 8px 24px #c8a02c44; transition:.15s; }
#enterWorld:hover:not(:disabled) { filter:brightness(1.12); transform:translateY(-2px); }
#enterWorld:disabled { filter:grayscale(.8) brightness(.6); cursor:not-allowed; }
.cc-hint { margin-top:14px; font-size:12.5px; color:#8f9ab5; }

/* ============ RAÇAS E ORIGENS 0.5.0 ============ */
.race-section { margin-bottom:16px; }
.race-cards { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.race-card { width:140px; min-width:120px; padding:12px 10px; border:2px solid #3a3325; border-radius:8px; background:linear-gradient(#171b24,#0e1118); cursor:pointer; transition:all .15s; text-align:center; }
.race-card:hover:not(.locked) { border-color:#8a7748; transform:translateY(-2px); }
.race-card.sel { border-color:var(--gold-hi); box-shadow:0 0 12px #c8aa5a44; }
.race-card.locked { opacity:.45; cursor:not-allowed; filter:grayscale(.6); transition:all .3s; }
.race-card .ci { font-size:32px; display:block; margin-bottom:4px; }
.race-card h3 { font-family:'Cinzel',serif; font-size:14px; margin-bottom:4px; }
.race-card p { font-size:11px; line-height:1.4; color:#c9c0a8; }
.locked-msg { font-size:11px; color:#f0604a; font-style:italic; margin-top:4px; }
.origin-info { font-size:11px; color:#a8b4cf; margin:4px 0 8px; font-family:Arial; padding-bottom:6px; border-bottom:1px solid #2a2f3a; }
.start-foot { margin-top:18px; font-size:12px; color:#6b7690; letter-spacing:1px; }

/* ============ CARREGAMENTO ============ */
#loadingScreen { position:fixed; inset:0; z-index:99; background:linear-gradient(#0a0e1c,#131a2a 60%,#0c1410); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.load-art { width:min(560px,80vw); height:260px; border:2px solid var(--gold-dk); border-radius:8px;
  background:radial-gradient(ellipse at 50% 100%, #3f6d24 0%, #16240f 55%, #0a0e1c 100%); box-shadow:0 20px 60px #000c; position:relative; overflow:hidden; }
.load-art::after { content:'⛰️🌲🏕️🌲⛰️'; position:absolute; bottom:18px; left:0; right:0; text-align:center; font-size:44px; letter-spacing:14px; filter:drop-shadow(0 4px 8px #000); }
.load-zone { font-family:'Cinzel',serif; font-size:30px; color:var(--gold-hi); letter-spacing:4px; text-shadow:0 2px 12px #000; }
.load-bar { width:min(440px,70vw); height:16px; background:#05070c; border:1px solid var(--gold-dk); border-radius:8px; overflow:hidden; }
#loadFill { height:100%; width:0%; background:linear-gradient(90deg,#7a5a18,#f0d48a,#7a5a18); transition:width .2s; }
.load-tip { font-size:14px; color:#a8b4cf; font-style:italic; max-width:520px; text-align:center; }

/* ============ MOLDURAS DE UNIDADE ============ */
.unit-frame { position:fixed; display:flex; gap:8px; align-items:center; z-index:20; }
#playerFrame { top:16px; left:16px; }
#targetFrame { top:16px; left:250px; }
.portrait { width:58px; height:58px; border-radius:50%; border:3px solid var(--gold-dk); background:radial-gradient(circle at 35% 30%, #2a3242, #0c0f16);
  display:flex; align-items:center; justify-content:center; font-size:30px; position:relative; box-shadow:0 0 0 2px #000, 0 4px 10px #000a; }
.pf-level { position:absolute; bottom:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:#0c0f16; border:2px solid var(--gold);
  color:var(--gold-hi); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; }
.uf-bars { width:170px; }
.uf-name { font-family:'Cinzel',serif; font-size:14px; color:#ffe9a8; text-shadow:0 1px 3px #000; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.bar { position:relative; height:15px; background:#05070cd9; border:1px solid #000; border-radius:3px; overflow:hidden; margin-bottom:3px; box-shadow:inset 0 2px 4px #000a, 0 1px 2px #0006; }
.bar .fill { height:100%; width:100%; transition:width .12s; }
.bar.hp .fill { background:linear-gradient(#6df05a,var(--hp) 40%,var(--hp-dk)); }
.bar.res .fill { background:linear-gradient(#5aa0f0,var(--mana) 40%,#143a75); }
.bar.res.rage .fill { background:linear-gradient(#f05a4a,var(--rage) 40%,#5c1410); }
.bar span { position:absolute; inset:0; font-size:10.5px; display:flex; align-items:center; justify-content:center; color:#fff; text-shadow:0 1px 2px #000; font-family:Arial; }
#buffBar { position:fixed; top:84px; left:16px; display:flex; gap:5px; z-index:20; }
.buff { width:30px; height:30px; border:1px solid var(--gold-dk); border-radius:4px; background:#0c0f16e0; display:flex; align-items:center; justify-content:center; font-size:17px; position:relative; box-shadow:0 2px 6px #000a; }
.buff i { position:absolute; bottom:-2px; right:0; left:0; text-align:center; font-style:normal; font-size:9px; color:#ffe9a8; text-shadow:0 1px 2px #000; font-family:Arial; }

/* ============ MINIMAPA ============ */
#minimapWrap { position:fixed; top:14px; right:14px; z-index:20; width:158px; text-align:center; }
#minimap { border-radius:50%; border:3px solid var(--gold-dk); box-shadow:0 0 0 2px #000, 0 6px 18px #000c; background:#0a1206; display:block; }
.mm-n { position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-family:'Cinzel',serif; font-size:12px; color:var(--gold-hi); text-shadow:0 1px 3px #000; }
#zoneName { margin-top:5px; font-family:'Cinzel',serif; font-size:13.5px; color:#ffe9a8; text-shadow:0 1px 3px #000; }
#clock { font-size:11px; color:#a8b4cf; }

/* ============ RASTREADOR DE MISSÕES ============ */
#questTracker { position:fixed; top:230px; right:14px; width:225px; z-index:15; display:flex; flex-direction:column; gap:10px; }
.qt-quest { background:#0b0e1588; border-left:3px solid var(--gold); padding:7px 10px; border-radius:0 6px 6px 0; }
.qt-quest h4 { font-family:'Cinzel',serif; font-size:13.5px; color:var(--gold-hi); margin-bottom:3px; }
.qt-obj { font-size:12.5px; color:#cfc6ab; }
.qt-obj.done { color:#6df05a; }
.qt-quest.ready h4 { color:#6df05a; }
.qt-flash { animation:qtFlash .8s; }
@keyframes qtFlash { 0%,100% { background:#0b0e1588 } 30% { background:#c8aa5a55 } }

/* ============ BARRA DE XP ============ */
#xpWrap { position:fixed; bottom:86px; left:50%; transform:translateX(-50%); width:min(620px,70vw); height:11px; background:#05070cd9; border:1px solid #000; border-radius:6px; z-index:20; box-shadow:0 1px 4px #000a; }
#xpFill { height:100%; width:0%; background:linear-gradient(90deg,#5a2ba0,#a06df0,#5a2ba0); border-radius:6px; transition:width .3s; }
#xpTicks { position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #000 0 10%); }
#xpTxt { position:absolute; inset:-1px 0 0; font-size:9.5px; color:#e6d6ff; text-shadow:0 1px 2px #000; display:flex; align-items:center; justify-content:center; font-family:Arial; }

/* ============ BARRA DE AÇÕES ============ */
#actionBar { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:20;
  background:linear-gradient(#1a1e28f2,#0c0f16f2); border:1px solid var(--gold-dk); border-radius:10px; padding:8px 10px; box-shadow:0 0 0 3px #00000066, 0 10px 30px #000c; }
.abtn { width:46px; height:46px; border-radius:6px; border:2px solid #4a4234; background:linear-gradient(#232936,#12151d); position:relative; cursor:pointer; font-size:23px; display:flex; align-items:center; justify-content:center; transition:border-color .1s; }
.abtn:hover { border-color:var(--gold-hi); }
.abtn.active { border-color:#6df05a; box-shadow:0 0 10px #6df05a66; }
.abtn.no-res .aicon { filter:grayscale(1) brightness(.55); }
.abtn.locked .aicon { filter:grayscale(1) brightness(.3); }
.abtn .aicon { filter:drop-shadow(0 2px 3px #000); pointer-events:none; }
.abtn .key { position:absolute; top:1px; left:3px; font-size:10px; color:#cbbf9f; font-family:Arial; text-shadow:0 1px 2px #000; }
.abtn .count { position:absolute; bottom:1px; right:3px; font-size:11px; color:#fff; font-family:Arial; font-weight:700; text-shadow:0 1px 2px #000; }
.abtn .cd { position:absolute; inset:0; border-radius:4px; pointer-events:none; }
.abtn .cdtxt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; font-family:Arial; pointer-events:none; }

/* ============ MICRO MENU ============ */
#microMenu { position:fixed; bottom:12px; right:14px; z-index:20; display:flex; gap:5px; align-items:center; }
#microMenu button { width:36px; height:36px; border-radius:6px; border:1px solid var(--gold-dk); background:linear-gradient(#232936,#12151d); font-size:17px; }
#microMenu button:hover { border-color:var(--gold-hi); }
#moneyBox { margin-left:6px; font-size:13px; color:#ffe9a8; text-shadow:0 1px 2px #000; background:#0b0e15cc; padding:6px 10px; border-radius:6px; border:1px solid #3a3325; }

/* ============ CHAT ============ */
#chatBox { position:fixed; bottom:12px; left:14px; width:min(430px,42vw); z-index:20; }
#chatToggleBtn { display:none; }
.chat-close { display:none; }
.chat-tabs { display:flex; gap:4px; margin-bottom:4px; }
.ctab { font-size:12px; font-family:'Cinzel',serif; padding:3px 12px; background:#0b0e15aa; border:1px solid #3a3325; border-bottom:none; border-radius:6px 6px 0 0; color:#8f9ab5; cursor:pointer; }
.ctab.active { color:var(--gold-hi); background:#0b0e15ee; }
#chatLog { height:150px; overflow-y:auto; background:#05070c99; border:1px solid #3a3325; border-radius:0 6px 6px 6px; padding:6px 8px; font-size:12.8px; line-height:1.5; font-family:Arial; }
#chatLog::-webkit-scrollbar { width:8px } #chatLog::-webkit-scrollbar-thumb { background:#3a3325; border-radius:4px }
#chatLog .sys { color:#f0c040; }
#chatLog .say { color:#ffffff; }
#chatLog .xp { color:#9060e0; }
#chatLog .loot { color:#6df05a; }
#chatLog .err { color:#f0604a; }
#chatLog .dmg-out { color:#e8dfc8; } #chatLog .dmg-in { color:#f08070; } #chatLog .heal { color:#6df05a; } #chatLog .misc { color:#a8b4cf; }
#chatLog .pname { color:#7fb4ff; }
.to-me { background:rgba(255,196,64,.12); border-left:2px solid #ffcf5c; padding-left:6px; border-radius:2px; }
.msg-report { cursor:pointer; opacity:.45; font-size:11px; margin-left:6px; }
.msg-report:hover { opacity:1; }
.typing-dots { display:inline-flex; gap:3px; vertical-align:middle; }
.typing-dots i { width:5px; height:5px; border-radius:50%; background:#8f9ab5; display:inline-block; animation:typingBlink 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay:.2s; }
.typing-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes typingBlink { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }
#reportBody { display:grid; gap:9px; padding:14px; }
#reportBody textarea { width:100%; background:#05070c; border:1px solid #49402d; color:#fff3c6; border-radius:7px; padding:9px 11px; font:13px Arial,sans-serif; outline:none; resize:vertical; }
#reportBody textarea:focus { border-color:var(--gold-hi); box-shadow:0 0 0 2px #c8aa5a22; }

#adminBody { padding:12px 16px 16px; display:grid; gap:10px; }
.admin-tabs { display:flex; gap:6px; }
.admin-tabs button { padding:7px 14px; border:1px solid #4a4234; border-radius:6px; background:#171c26; color:#c7c0ae; font:12px Arial,sans-serif; }
.admin-tabs button.active { color:#ffe9a8; border-color:var(--gold); background:#29230f; }
.admin-tab-body { display:grid; gap:9px; }
.admin-add-row { display:flex; gap:8px; }
.admin-add-row input { flex:1; background:#05070c; border:1px solid #49402d; color:#fff3c6; border-radius:7px; padding:8px 10px; font:13px Arial,sans-serif; outline:none; }
.admin-add-row input:focus { border-color:var(--gold-hi); box-shadow:0 0 0 2px #c8aa5a22; }
.admin-list { display:grid; gap:6px; max-height:320px; overflow-y:auto; }
.admin-list-item { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #2e3440; border-radius:7px; background:#141923; padding:8px 10px; font:12.5px Arial,sans-serif; }
.admin-list-item .ali-main { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e8dfc8; }
.admin-list-item .ali-sub { color:#8f9ab5; font-size:11px; }
.admin-list-item button { flex:0 0 auto; padding:5px 10px; border:1px solid var(--gold-dk); border-radius:5px; background:#242b38; color:#fff; font-size:11.5px; }
.admin-empty { padding:14px; text-align:center; color:#8f9ab5; font:12.5px Arial,sans-serif; }
#adminPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(480px,94vw); max-height:82vh; overflow:auto; }
#chatInput { width:100%; margin-top:4px; background:#05070cd9; border:1px solid var(--gold-dk); border-radius:6px; color:#fff; padding:7px 10px; font-size:13px; outline:none; font-family:Arial; }

/* ============ CAST BAR / ERROS / ZONA ============ */
#castBar { position:fixed; bottom:130px; left:50%; transform:translateX(-50%); width:280px; height:20px; background:#05070cd9; border:1px solid var(--gold-dk); border-radius:5px; z-index:25; box-shadow:0 2px 8px #000a; }
#castFill { height:100%; width:0%; background:linear-gradient(90deg,#8a6d18,#f0d48a); border-radius:5px; }
#castName { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; text-shadow:0 1px 2px #000; font-family:'Cinzel',serif; }
#castTime { position:absolute; right:5px; top:2px; font-size:11px; color:#ffe9a8; font-family:Arial; }
#errText { position:fixed; top:32%; left:50%; transform:translateX(-50%); z-index:30; pointer-events:none; text-align:center; }
.errline { color:#ff5040; font-family:'Cinzel',serif; font-size:17px; text-shadow:0 2px 4px #000; animation:errFade 1.6s forwards; margin:2px 0; }
@keyframes errFade { 0% { opacity:0; transform:scale(.8) } 12% { opacity:1; transform:scale(1.05) } 25% { transform:scale(1) } 75% { opacity:1 } 100% { opacity:0 } }
#zoneBanner { position:fixed; top:22%; left:0; right:0; text-align:center; z-index:25; pointer-events:none; opacity:0; }
#zoneBanner h2 { font-family:'Cinzel',serif; font-size:44px; color:var(--gold-hi); letter-spacing:6px; text-shadow:0 0 30px #c8a02c66, 0 4px 12px #000; }
#zoneBanner .zb-sub { font-size:15px; color:#b9c8e8; letter-spacing:3px; font-family:'Cinzel',serif; }
#zoneBanner.show { animation:zbShow 3.6s forwards; }
@keyframes zbShow { 0% { opacity:0; transform:translateY(14px) } 15% { opacity:1; transform:none } 80% { opacity:1 } 100% { opacity:0 } }
#levelFlash { position:fixed; inset:0; pointer-events:none; z-index:40; background:radial-gradient(circle,#f0d48a55 0%,transparent 60%); opacity:0; }
#levelFlash.show { animation:lvFlash 1.4s; }
@keyframes lvFlash { 0% { opacity:0 } 25% { opacity:1 } 100% { opacity:0 } }

/* ============ PLACAS DE NOME ============ */
#nameplates { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }
.nplate { position:absolute; transform:translate(-50%,-100%); text-align:center; pointer-events:none; will-change:transform; }
.nplate .np-name { font-family:Arial; font-size:12px; font-weight:700; text-shadow:0 1px 3px #000, 0 0 6px #000; white-space:nowrap; }
.nplate .np-guild { font-size:10px; color:#6df05a; text-shadow:0 1px 2px #000; font-family:Arial; }
.nplate .np-hp { width:74px; height:7px; background:#000000b0; border:1px solid #000; border-radius:2px; margin:2px auto 0; overflow:hidden; }
.nplate .np-hp i { display:block; height:100%; background:linear-gradient(#f05a4a,#c4302b); }
.nplate.sel .np-hp { outline:1px solid #fff; box-shadow:0 0 8px #fff8; }
.nplate .np-cast { width:74px; height:5px; background:#000000b0; border:1px solid #000; margin:2px auto 0; overflow:hidden; }
.nplate .np-cast i { display:block; height:100%; background:#f0d48a; }
.nplate .np-mark { font-size:22px; color:var(--gold-hi); text-shadow:0 0 8px #c8a02c, 0 2px 4px #000; animation:markBob 1.6s ease-in-out infinite; font-family:Arial; font-weight:700; }
@keyframes markBob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-5px) } }

/* ============ TEXTO FLUTUANTE DE COMBATE ============ */
#floaters { position:fixed; inset:0; pointer-events:none; z-index:12; overflow:hidden; }
.floater { position:absolute; transform:translate(-50%,-50%); font-family:Arial; font-weight:800; text-shadow:0 2px 3px #000, 0 0 8px #0008; animation:floatUp 1.1s forwards; white-space:nowrap; }
@keyframes floatUp { 0% { opacity:0; margin-top:0 } 12% { opacity:1 } 100% { opacity:0; margin-top:-64px } }
.f-crit { font-size:26px !important; color:#ffd24a !important; }

/* ============ TOOLTIP ============ */
#tooltip { position:fixed; z-index:60; max-width:280px; background:#0b0e15f5; border:1px solid var(--gold); border-radius:6px; padding:10px 12px; font-size:12.5px; pointer-events:none; box-shadow:0 8px 24px #000d; font-family:Arial; }
#tooltip h4 { font-family:'Cinzel',serif; color:var(--gold-hi); font-size:14px; margin-bottom:4px; }
#tooltip .tt-cost { color:#7fb4ff; font-size:11.5px; }
#tooltip .tt-cd { color:#a8b4cf; font-size:11.5px; margin-left:8px; }
#tooltip p { margin-top:5px; color:#d8cfb8; line-height:1.45; }
#tooltip .tt-lock { color:#f0604a; margin-top:5px; }
#tooltip .tt-item { color:#6df05a; }

/* ============ PAINÉIS ============ */
.panel { position:fixed; z-index:50; background:var(--panel); border:2px solid var(--gold-dk); border-radius:10px; box-shadow:0 0 0 3px #00000066, 0 16px 48px #000d; padding:0 0 14px; }
.panel-title { font-family:'Cinzel',serif; color:var(--gold-hi); font-size:16px; letter-spacing:2px; padding:12px 16px 10px; border-bottom:1px solid #3a3325; position:relative; }
.panel-close { position:absolute; right:12px; top:10px; cursor:pointer; color:#8f9ab5; font-size:14px; }
.panel-close:hover { color:#fff; }
#lootWin { left:50%; top:50%; transform:translate(-50%,-50%); width:300px; }
#lootItems { padding:12px 14px; display:flex; flex-direction:column; gap:6px; max-height:230px; overflow-y:auto; }
.loot-item { display:flex; gap:9px; align-items:center; background:#161a22; border:1px solid #2a2f3a; border-radius:6px; padding:7px 9px; cursor:pointer; }
.loot-item:hover { border-color:var(--gold); }
.loot-item .li-ic { font-size:22px; }
.loot-item .li-nm { font-size:13px; font-family:Arial; }
.loot-item .li-ct { font-size:11px; color:#a8b4cf; font-family:Arial; }
#lootAll { margin:4px 14px 0; width:calc(100% - 28px); padding:8px; background:linear-gradient(#f0d48a,#c8a02c); border:1px solid #ffe9a8; border-radius:6px; font-weight:700; color:#2a1c05; }
#questDialog { left:50%; top:50%; transform:translate(-50%,-50%); width:min(480px,90vw); }
#qdBody { padding:14px 18px; font-size:14px; line-height:1.6; max-height:300px; overflow-y:auto; }
#qdBody h3 { font-family:'Cinzel',serif; color:var(--gold-hi); margin-bottom:8px; font-size:17px; }
#qdBody .qd-obj { color:#e0c97f; margin:8px 0; }
#qdBody .qd-rew { color:#9fd0ff; margin-top:10px; }
#qdBody .qd-giver { color:#a8b4cf; font-style:italic; margin-bottom:8px; font-size:13px; }
#qdButtons { display:flex; gap:10px; justify-content:center; padding-top:6px; }
#qdButtons button { padding:9px 26px; border-radius:6px; border:1px solid #ffe9a8; font-weight:700; font-size:14px; }
#qdButtons .acc { background:linear-gradient(#f0d48a,#c8a02c); color:#2a1c05; }
#qdButtons .dec { background:#232936; color:#cbbf9f; border-color:#4a4234 !important; }
#charPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:320px; }
#charStats { padding:14px 18px; font-size:13.5px; font-family:Arial; }
#charStats .cs-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #1e2330; }
#charStats .cs-row b { color:#ffe9a8; }
#charStats h3 { font-family:'Cinzel',serif; color:var(--gold-hi); font-size:16px; margin-bottom:8px; }
#questLogPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(430px,90vw); }
#questLogBody { padding:12px 18px; max-height:320px; overflow-y:auto; }
.ql-entry { margin-bottom:14px; }
.ql-entry h4 { font-family:'Cinzel',serif; color:var(--gold-hi); font-size:15px; cursor:pointer; }
.ql-entry .ql-txt { font-size:12.5px; color:#c9c0a8; margin:4px 0; font-family:Arial; line-height:1.5; }
.ql-entry .ql-obj { font-size:12.5px; font-family:Arial; color:#e0c97f; }
.ql-entry .ql-obj.done { color:#6df05a; }
.ql-empty { color:#8f9ab5; font-style:italic; padding:10px 0; font-family:Arial; font-size:13px; }
#bagPanel { right:70px; bottom:60px; width:264px; }
#bagGrid { display:grid; grid-template-columns:repeat(4,52px); gap:6px; padding:14px; }
.bslot { width:52px; height:52px; background:#0a0d13; border:1px solid #2a2f3a; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:24px; position:relative; cursor:pointer; }
.bslot.full:hover { border-color:var(--gold); }
.bslot .bcount { position:absolute; bottom:2px; right:4px; font-size:11px; font-weight:700; color:#fff; font-family:Arial; text-shadow:0 1px 2px #000; }
#bagMoney { padding:0 14px; font-size:13px; color:#ffe9a8; font-family:Arial; }
#helpPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px,92vw); }
#helpBody { padding:14px 18px; font-size:13.5px; line-height:1.8; font-family:Arial; }
#helpBody b { color:#ffe9a8; }

/* ============ MORTE ============ */
#deathOverlay { position:fixed; inset:0; z-index:80; background:radial-gradient(circle,#202430cc 0%,#05070cee 75%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; backdrop-filter:grayscale(1) blur(2px); }
.death-title { font-family:'Cinzel',serif; font-size:52px; color:#f0604a; letter-spacing:6px; text-shadow:0 0 30px #c4302b66; }
.death-sub { color:#a8b4cf; font-style:italic; }
#releaseBtn { margin-top:14px; padding:13px 40px; font-size:16px; font-weight:700; letter-spacing:2px; color:#fff; background:linear-gradient(#7a2230,#4a1018); border:2px solid #f0604a; border-radius:8px; }
#releaseBtn:hover { filter:brightness(1.2); }

@media (max-width:900px) {
  #chatBox { width:52vw }
  #questTracker { width:180px }
  #targetFrame { left:210px }
}

/* ============ CONTA, LOBBY E SALVAMENTO ============ */
.portal-card { width:min(520px,94vw); margin:0 auto; background:#0b0e15e8; border:1px solid var(--gold-dk); border-radius:12px; padding:22px; box-shadow:0 0 0 4px #0005,0 22px 70px #000d; backdrop-filter:blur(7px); }
.portal-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.portal-tab,.portal-secondary { border:1px solid #4a4234; border-radius:7px; padding:10px 14px; background:#181d28; color:#b9c8e8; font-weight:700; letter-spacing:1px; }
.portal-tab.active { border-color:var(--gold-hi); color:var(--gold-hi); background:#292410; }
.auth-form { display:grid; gap:8px; text-align:left; }
.auth-form label { margin-top:5px; color:#cbbf9f; font-size:13px; }
.auth-form input,.portal-card input { user-select:text; -webkit-user-select:text; width:100%; background:#05070c; border:1px solid #49402d; color:#fff3c6; border-radius:7px; padding:11px 12px; font:15px Arial,sans-serif; outline:none; }
.auth-form input:focus,.portal-card input:focus { border-color:var(--gold-hi); box-shadow:0 0 0 2px #c8aa5a22; }
.portal-primary { border:2px solid #ffe9a8; border-radius:8px; margin-top:10px; padding:13px 18px; background:linear-gradient(#f0d48a,#c8a02c 58%,#987414); color:#271b06; font-weight:900; letter-spacing:2px; box-shadow:0 4px 0 #5a4310; }
.portal-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.portal-primary.compact { padding:10px 18px; font-size:13px; }
.portal-message { min-height:22px; margin-top:12px; font:13px Arial,sans-serif; color:#8fcfff; }
.portal-message.error { color:#ff7060; }
.portal-message.success { color:#73ed70; }
.lobby-card { width:min(980px,96vw); max-height:76vh; overflow:auto; }
.lobby-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #342f25; padding-bottom:12px; margin-bottom:14px; }
.lobby-head div { display:flex; flex-direction:column; text-align:left; font:12px Arial,sans-serif; color:#8f9ab5; }
.lobby-head b { color:#ffe9a8; font:18px 'Cinzel',serif; }
.character-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:15px; }
.character-card { position:relative; border:1px solid #39352d; border-radius:9px; padding:14px; background:linear-gradient(145deg,#1a202c,#0b0e14); text-align:left; min-height:150px; }
.character-card:hover { border-color:var(--gold); box-shadow:0 0 18px #c8aa5a22; }
.character-card .hero-icon { font-size:36px; float:left; margin-right:10px; }
.character-card h3 { color:#ffe9a8; font:17px 'Cinzel',serif; }
.character-card .hero-meta { color:#a8b4cf; font:12px Arial,sans-serif; line-height:1.55; clear:both; padding-top:12px; }
.character-card .hero-actions { display:flex; gap:7px; margin-top:11px; }
.character-card button { flex:1; padding:8px; border-radius:6px; border:1px solid var(--gold-dk); background:#242b38; color:#fff; }
.character-card .play-hero { background:linear-gradient(#e5c56f,#a9801d); color:#241805; font-weight:800; }
.character-card .delete-hero { flex:0 0 38px; color:#ff8070; }
.character-empty { grid-column:1/-1; padding:24px; border:1px dashed #4a4234; border-radius:8px; color:#8f9ab5; font:14px Arial,sans-serif; }
.creator-actions { display:flex; justify-content:center; gap:10px; align-items:center; }
#characterCreator { margin-top:14px; }
#characterCreator #nameInput { width:210px; }
#saveStatus { position:fixed; left:50%; top:7px; transform:translateX(-50%); z-index:28; padding:5px 10px; border:1px solid #4a4234; border-radius:12px; background:#080b10cc; color:#9fc8ee; font:11px Arial,sans-serif; pointer-events:none; transition:.2s; }
#saveStatus.saving { color:#ffe081; }
#saveStatus.saved { color:#7cf07a; }
#saveStatus.error { color:#ff6b5d; }

/* ============ LOJA E EQUIPAMENTOS ============ */
#shopPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(620px,94vw); }
.shop-tabs { display:flex; gap:8px; padding:10px 14px 0; }
.shop-tabs button { padding:8px 18px; border:1px solid #4a4234; border-radius:6px; background:#171c26; color:#c7c0ae; }
.shop-tabs button.active { color:#ffe9a8; border-color:var(--gold); background:#29230f; }
#shopBody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px 14px; max-height:390px; overflow:auto; }
.shop-item { display:grid; grid-template-columns:42px 1fr auto; gap:9px; align-items:center; border:1px solid #2e3440; border-radius:7px; background:#141923; padding:9px; }
.shop-item .shop-icon { font-size:25px; text-align:center; }
.shop-item h4 { font:13px 'Cinzel',serif; color:#ffe9a8; }
.shop-item p { font:11px Arial,sans-serif; color:#a8b4cf; line-height:1.35; margin-top:2px; }
.shop-item button { padding:7px 9px; border:1px solid var(--gold-dk); border-radius:5px; color:#261b07; background:linear-gradient(#e7c66d,#aa811d); font-weight:800; }
.shop-item button:disabled { filter:grayscale(1); opacity:.5; }
#shopMoney { border-top:1px solid #332e24; padding:10px 14px 0; color:#ffe9a8; font:13px Arial,sans-serif; }
.equipment-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin:12px 0; }
.eq-slot { display:flex; align-items:center; gap:8px; min-height:45px; border:1px solid #2d3340; border-radius:6px; padding:7px; background:#10141c; }
.eq-slot span { font-size:23px; }
.eq-slot div { font:11px Arial,sans-serif; color:#8f9ab5; }
.eq-slot b { display:block; color:#ffe9a8; font-size:12px; }
.item-equipped { outline:1px solid #6fd06a; }
#accountPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(340px,90vw); }
#reportPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(360px,90vw); z-index:60; }
#accountBody { display:grid; gap:9px; padding:14px; }
#accountBody button { padding:11px; border:1px solid var(--gold-dk); border-radius:6px; background:#1d2430; color:#fff; }
.account-tip { color:#8f9ab5; font:11px Arial,sans-serif; text-align:center; }

/* ============ CONTROLES MOBILE ============ */
#mobileControls { display:none; position:fixed; inset:0; z-index:32; pointer-events:none; }
.joystick { position:absolute; left:20px; bottom:28px; width:132px; height:132px; border-radius:50%; border:2px solid #d9c07088; background:radial-gradient(circle,#28303b99 0 34%,#080b10bb 35% 100%); box-shadow:0 0 0 8px #0002,inset 0 0 18px #000; pointer-events:auto; touch-action:none; }
#joystickKnob { position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #ffe9a8aa; background:radial-gradient(circle at 35% 30%,#e0c97f,#75601f); box-shadow:0 4px 12px #000b; }
.mobile-actions { position:absolute; right:16px; bottom:24px; width:180px; height:150px; pointer-events:none; }
.mobile-actions button { position:absolute; width:54px; height:54px; border-radius:50%; border:2px solid #d9c070aa; background:#121722df; color:#fff; font-size:22px; pointer-events:auto; touch-action:manipulation; box-shadow:0 4px 12px #000c; }
.mobile-actions .attack-main { width:72px; height:72px; right:48px; bottom:0; font-size:31px; background:radial-gradient(circle at 35% 25%,#ca684e,#701b18); border-color:#ffb08c; }
#mobileTarget { left:0; bottom:55px; }
#mobileJump { right:0; bottom:64px; }
#mobileMenu { right:0; top:0; width:47px; height:47px; font-size:20px; }

@media (hover:none), (pointer:coarse), (max-width:760px) {
  .start-content { padding:8px; }
  .game-logo { font-size:min(42px,10vw); letter-spacing:2px; }
  .start-sub { margin-bottom:12px; font-size:11px; letter-spacing:3px; }
  .portal-card { padding:14px; }
  .lobby-card { max-height:82vh; }
  .character-list { grid-template-columns:1fr; }
  #classCards { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:5px; }
  .class-card { min-width:170px; }
  .race-card { min-width:110px; width:auto; }
  #mobileControls { display:block; }
  #chatToggleBtn { display:flex; align-items:center; justify-content:center; position:fixed; left:8px; bottom:170px; width:44px; height:44px; border-radius:50%; z-index:21; border:1px solid var(--gold-dk); background:#12151dee; color:#fff; font-size:20px; box-shadow:0 4px 12px #000c; }
  .chat-unread { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:#f0604a; border:1.5px solid #12151d; }
  #chatBox { display:none; left:8px; bottom:170px; width:min(80vw,320px); opacity:.97; }
  #chatBox.chat-open { display:block; }
  .chat-close { display:inline-block; margin-left:auto; padding:2px 8px; cursor:pointer; color:#8f9ab5; }
  #chatLog { max-height:34vh; }
  #chatInput { font-size:12px; padding:6px 8px; }
  .chat-tabs { flex-wrap:nowrap; overflow-x:auto; align-items:center; }
  .ctab { font-size:10.5px; padding:3px 8px; white-space:nowrap; }
  .to-me { padding-left:4px; }
  .chat-pinned { font-size:10.5px; padding:3px 6px; }
  .chat-pinned-clear { padding:4px 8px; }
  #questTracker { top:165px; right:8px; width:155px; font-size:11px; }
  #minimapWrap { top:8px; right:8px; transform:scale(.78); transform-origin:top right; }
  #targetFrame { top:76px; left:8px; transform:scale(.8); transform-origin:top left; }
  #playerFrame { top:8px; left:8px; transform:scale(.82); transform-origin:top left; }
  #buffBar { top:70px; left:8px; transform:scale(.82); transform-origin:top left; }
  #actionBar { left:auto; right:8px; bottom:178px; transform:none; max-width:220px; flex-wrap:wrap; justify-content:flex-end; padding:4px; }
  .abtn { width:43px!important; height:43px!important; }
  #xpWrap { bottom:12px; width:min(44vw,250px); height:8px; z-index:18; }
  #microMenu { display:none; }
  #saveStatus { top:auto; bottom:8px; font-size:9px; }
  #castBar { bottom:170px; width:230px; }
  #zoneBanner h2 { font-size:27px; letter-spacing:2px; }
  .panel { max-height:78vh; overflow:auto; }
  #bagPanel { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%); }
  #shopBody { grid-template-columns:1fr; }
  #charPanel { width:min(350px,94vw); }
  #helpBody { font-size:12px; }
}

@media (max-width:430px) {
  .joystick { width:116px; height:116px; left:12px; bottom:25px; }
  #joystickKnob { width:51px; height:51px; }
  .mobile-actions { right:8px; bottom:20px; transform:scale(.9); transform-origin:bottom right; }
  #actionBar { bottom:158px; max-width:190px; }
  #questTracker { display:none; }
}

/* v4.3 — interação de mapas e teleporte */
#specialHint{
  position:fixed;left:50%;bottom:152px;transform:translateX(-50%);z-index:3200;
  padding:10px 16px;border:1px solid rgba(157,121,255,.8);border-radius:10px;
  background:rgba(12,10,22,.88);box-shadow:0 0 22px rgba(111,84,217,.35);
  color:#fff;font:700 14px Arial,sans-serif;pointer-events:none;white-space:nowrap
}
#teleportBtn{background:linear-gradient(180deg,#6046a8,#38265f)!important;color:#fff!important}
@media(max-width:760px),(pointer:coarse){
  #specialHint{bottom:188px;font-size:12px;max-width:75vw;white-space:normal;text-align:center}
  .mobile-actions{grid-template-columns:repeat(3,54px)!important}
  #mobileInteract,#mobileTeleport{display:inline-flex;align-items:center;justify-content:center}
}
#mobileInteract { left:0; top:0; width:47px; height:47px; font-size:20px; }
#mobileTeleport { right:62px; top:0; width:47px; height:47px; font-size:20px; }


/* ===== Evento da Fortaleza ===== */
#eventTracker{position:fixed;right:14px;top:186px;z-index:50;min-width:260px;max-width:320px;padding:12px 14px;border-radius:14px;background:rgba(8,12,18,.88);border:1px solid rgba(255,214,122,.35);box-shadow:0 12px 30px rgba(0,0,0,.28);backdrop-filter:blur(8px);color:#f3ead1;font:14px/1.4 Arial,sans-serif}
#eventTracker .evt-title{font:700 17px/1.2 'Cinzel',serif;color:#ffd977;margin-bottom:6px}
#eventTracker .evt-sub{font-size:12px;color:#c9c1ab;margin-bottom:8px}
#eventTracker .evt-bossbar{height:12px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin:8px 0 6px}
#eventTracker .evt-bossbar i{display:block;height:100%;background:linear-gradient(90deg,#8b1a10,#d8482c,#ffcb66);width:100%}
#eventTracker .evt-line{font-size:12px;color:#dfd5ba;margin-top:3px}
#eventTracker .evt-rank{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08)}
#eventTracker .evt-rank div{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin:2px 0}
#eventTracker .evt-rank b{color:#ffe08a}
#eventPanelBody{font:14px/1.5 Arial,sans-serif;color:#eadfbe}
#eventPanelBody .event-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;margin-bottom:12px}
#eventPanelBody .event-rank-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
#eventPanelBody .event-rank-row:last-child{border-bottom:none}
#eventPanelBody .event-self{color:#ffd977;font-weight:700}
#eventPanelBody .event-reward{margin-top:10px;padding:10px;border-radius:10px;background:rgba(125,66,255,.12);border:1px solid rgba(125,66,255,.28)}
#eventPanelBody .event-claim{margin-top:12px;padding:10px 14px;border:0;border-radius:10px;background:#d5a84a;color:#1d1407;font-weight:700;cursor:pointer}
#eventPanelBody .event-claim[disabled]{opacity:.55;cursor:not-allowed}
@media (max-width: 760px){#eventTracker{left:10px;right:10px;top:145px;max-width:none;min-width:0;max-height:150px;overflow-y:auto;padding:9px 11px}
  #eventTracker .evt-title{font-size:14px;margin-bottom:3px}
  #eventTracker .evt-sub{font-size:10.5px;margin-bottom:4px}
  #eventTracker .evt-bossbar{height:8px;margin:5px 0 4px}
  #eventTracker .evt-line{font-size:10.5px;margin-top:2px}
  #eventTracker .evt-rank{margin-top:5px;padding-top:5px}
  #eventTracker .evt-join,#eventTracker .event-join{margin-top:6px;padding:7px 10px;font-size:11px}
}


#eventTracker .evt-join,.event-join{width:100%;margin-top:10px;padding:9px 12px;border:1px solid #ffd977;border-radius:9px;background:linear-gradient(#b64b2e,#712116);color:#fff4cf;font:700 12px 'Cinzel',serif;letter-spacing:.5px;cursor:pointer;box-shadow:0 4px 12px #0008}
#eventTracker .evt-join:hover,.event-join:hover{filter:brightness(1.13)}

#chatInput:focus{border-color:#ffe08a;box-shadow:0 0 0 2px rgba(255,224,138,.14)}

/* ============ PAINEL DE VIAGEM RÁPIDA ============ */
#travelPanel { left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,94vw); max-height:80vh; }
#travelBody { padding:12px 14px; max-height:calc(80vh - 52px); overflow-y:auto; }
.tp-island { margin-bottom:14px; }
.tp-island-header { font:700 14px 'Cinzel',serif; color:var(--gold-hi); padding:6px 0; border-bottom:1px solid #3a3325; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.tp-island-header .tp-icon { font-size:18px; }
.tp-point { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #2a2f3a; border-radius:7px; background:#141923; margin-bottom:6px; cursor:pointer; transition:all .12s; }
.tp-point:hover { border-color:var(--gold); background:#1d2740; }
.tp-point.locked { opacity:.4; cursor:not-allowed; filter:grayscale(.5); }
.tp-point.discovered { border-left:3px solid #6df05a; }
.tp-point .tp-pt-icon { font-size:20px; flex:0 0 28px; text-align:center; }
.tp-point .tp-pt-info { flex:1; min-width:0; }
.tp-point .tp-pt-name { font:700 13px 'Cinzel',serif; color:#ffe9a8; }
.tp-point .tp-pt-desc { font:11px Arial,sans-serif; color:#8f9ab5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-point .tp-pt-level { font:11px Arial,sans-serif; color:#a8b4cf; flex:0 0 auto; }
.tp-point.locked .tp-pt-level { color:#f0604a; }
.tp-point .tp-pt-btn { padding:5px 12px; border:1px solid var(--gold-dk); border-radius:5px; background:linear-gradient(#e7c66d,#aa811d); color:#241805; font:700 11px 'Cinzel',serif; flex:0 0 auto; }
.tp-point.locked .tp-pt-btn { background:#2a2f3a; color:#6a7088; border-color:#3a3325; }
.tp-empty { text-align:center; color:#8f9ab5; font:italic 13px Arial,sans-serif; padding:20px; }

/* ============ AUTOCOMPLETE DE MENÇÕES (@nick) ============ */
.chat-mentions { position:relative; z-index:22; max-height:168px; overflow-y:auto; background:#0b0e15f2; border:1px solid var(--gold-dk); border-radius:6px; margin-bottom:4px; box-shadow:0 6px 16px #000a; font-family:Arial; }
.chat-mentions[hidden]{display:none!important;}
.chat-mentions::-webkit-scrollbar{width:8px}.chat-mentions::-webkit-scrollbar-thumb{background:#3a3325;border-radius:4px}
.mention-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:12.6px;color:#e8dfc8;border-bottom:1px solid #1a1d26;}
.mention-item:last-child{border-bottom:none}
.mention-item:hover,.mention-item.active{background:#1d2740;color:#fff}
.mention-item .mi-tag{flex:0 0 auto;font-size:15px;line-height:1}
.mention-item .mi-name{font-weight:bold;color:#7fb4ff}
.mention-item .mi-sub{font-size:11px;color:#8f9ab5;margin-left:auto;white-space:nowrap}
.mention-empty{padding:7px 10px;font-size:12px;color:#8f9ab5;font-style:italic}

.chat-pinned { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#0b0e15f2; border:1px solid var(--gold-dk); border-radius:6px; padding:4px 8px; margin-bottom:4px; font-size:12px; }
.chat-pinned #chatPinnedName { color:#7fb4ff; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-pinned-clear { cursor:pointer; padding:2px 6px; }

/* ================================================================
   PAINEL DE TALENTOS
   ================================================================ */
#skillsPanel { width: 680px; max-width: 95vw; max-height: 82vh; }
#skillsBody { overflow-y: auto; max-height: calc(82vh - 50px); padding: 6px; }

.sk-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
}
.sk-points {
  font-size: 14px; font-weight: bold; color: #ffd24a;
  background: #1a1525; border: 1px solid #d4a849; border-radius: 6px;
  padding: 4px 12px; white-space: nowrap;
}
.sk-points span { font-size: 18px; color: #fff; }
.sk-reset-btn {
  font-size: 11px; padding: 4px 10px; border-radius: 5px;
  border: 1px solid #8a3030; background: #2a1414; color: #e0808080;
  cursor: pointer; transition: all .15s;
}
.sk-reset-btn:hover { background: #3a1a1a; color: #f06060; }

.sk-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.sk-tab {
  flex: 1; padding: 7px 4px; text-align: center; cursor: pointer;
  border-radius: 6px 6px 0 0; border: 2px solid transparent;
  font-size: 13px; font-weight: bold; transition: all .15s;
  background: #141926; color: #8f9ab5; border-bottom: none;
}
.sk-tab.active { color: #fff; border-color: var(--gold-dk); background: #1d2740; }
.sk-tab:hover:not(.active) { color: #c0c8d8; background: #181d2c; }
.sk-tab .sk-tab-icon { font-size: 18px; display: block; margin-bottom: 2px; }
.sk-tab .sk-tab-pts { font-size: 10px; color: #ffd24a; }

.sk-spec {
  border: 1px solid #2a3550; border-radius: 8px; padding: 10px;
  background: #0e1320;
}
.sk-spec-desc { font-size: 12px; color: #8f9ab5; margin-bottom: 10px; line-height: 1.4; }

.sk-tier {
  display: flex; gap: 8px; margin-bottom: 6px; align-items: stretch;
  position: relative;
}
.sk-tier-lock {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(5,8,15,0.78); border-radius: 6px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #6a7088; pointer-events: none;
}

.sk-node {
  flex: 1; min-width: 0; position: relative; cursor: pointer;
  border: 2px solid #2a3550; border-radius: 6px; padding: 8px 6px 6px;
  background: #141926; transition: all .12s; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sk-node:hover { border-color: var(--gold-dk); background: #1d2740; }
.sk-node.maxed { border-color: #4a9d4a; background: #15221a; }
.sk-node.maxed .sk-rank { color: #5ada5a; }
.sk-node.can-invest { border-color: #d4a849; box-shadow: 0 0 6px rgba(212,168,73,.2); }
.sk-node .sk-node-icon { font-size: 22px; line-height: 1; }
.sk-node .sk-node-name { font-size: 10px; font-weight: bold; text-align: center; color: #c0c8d8; line-height: 1.2; }
.sk-node .sk-rank { font-size: 10px; font-weight: bold; color: #ffd24a; }
.sk-node .sk-node-desc { font-size: 9px; color: #6a7a9a; text-align: center; line-height: 1.2; margin-top: 1px; }

.sk-tier-arrow {
  display: flex; align-items: center; justify-content: center;
  color: #3a4560; font-size: 14px; margin: 0 -2px; width: 12px;
}

.sk-tooltip {
  position: fixed; z-index: 10000; max-width: 280px;
  background: #0b0e15f2; border: 1px solid var(--gold-dk);
  border-radius: 8px; padding: 8px 10px; font-size: 12px;
  pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.sk-tooltip h4 { font-size: 14px; margin-bottom: 4px; }
.sk-tooltip .sktt-cost { color: #ffd24a; font-size: 11px; }
.sk-tooltip .sktt-desc { color: #c0c8d8; margin-top: 4px; line-height: 1.4; }
.sk-tooltip .sktt-rank { color: #8f9ab5; font-size: 11px; margin-top: 3px; }
.sk-tooltip .sktt-locked { color: #e05050; font-size: 11px; margin-top: 3px; }

/* ============ MODAL DE BOAS-VINDAS ============ */
.welcome-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:#000a; backdrop-filter:blur(6px); animation:welcomeFade .4s ease; }
@keyframes welcomeFade { from { opacity:0 } to { opacity:1 } }
.welcome-modal { width:min(560px,92vw); background:
  linear-gradient(#0b0e15f2, #0d1118f5),
  url('../assets/inicio.png') center/cover no-repeat;
  border:2px solid var(--gold-dk); border-radius:14px; box-shadow:0 0 0 4px #00000055, 0 30px 80px #000d;
  overflow:hidden; animation:welcomeSlide .5s cubic-bezier(.16,1,.3,1); }
@keyframes welcomeSlide { from { transform:translateY(40px) scale(.95); opacity:0 } to { transform:translateY(0) scale(1); opacity:1 } }
.welcome-header { text-align:center; padding:28px 20px 8px; }
.welcome-header h2 { font-family:'Cinzel',serif; font-size:30px; font-weight:900; letter-spacing:4px; color:var(--gold-hi);
  text-shadow:0 0 24px #c8a02c66, 0 3px 0 #5a4310, 0 6px 18px #000; }
.welcome-body { padding:16px 28px 20px; }
.welcome-intro { font-size:14px; line-height:1.6; color:#c9c0a8; text-align:center; margin-bottom:20px; font-style:italic; }
.welcome-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wf-item { background:#05070c66; border:1px solid #2a2f3a; border-radius:8px; padding:12px 14px; text-align:center; }
.wf-icon { font-size:28px; display:block; margin-bottom:6px; filter:drop-shadow(0 2px 4px #000); }
.wf-item b { font-family:'Cinzel',serif; font-size:13px; color:var(--gold); letter-spacing:1px; }
.wf-desc { font-size:11px; color:#8f9ab5; }
.welcome-footer { text-align:center; padding:8px 20px 26px; }
.welcome-footer button { padding:14px 48px; font-size:18px; font-weight:700; letter-spacing:3px; color:#2a1c05;
  background:linear-gradient(#f0d48a,#c8a02c 55%,#a07c18); border:2px solid #ffe9a8; border-radius:8px;
  box-shadow:0 4px 0 #5a4310, 0 8px 24px #c8a02c44; transition:.15s; cursor:pointer; font-family:'Cinzel',serif; }
.welcome-footer button:hover { filter:brightness(1.12); transform:translateY(-2px); }