/* ============================================================
   CRÔNICAS DE ADEN — HUD gótico ornamentado (estilo L2/Diablo)
   ============================================================ */
:root{
  --gold:#c8a24a; --gold-lt:#f0d795; --gold-dk:#6b5220;
  --bronze:#8a6b32;
  --ink:#08090c; --panel:#14120e; --panel2:#1d1a13;
  --parch:#d8c9a2;
  --hp1:#8e0d0d; --hp2:#e03232; --mp1:#0f2f7a; --mp2:#3f7ce0;
  --cp1:#6a5a10; --cp2:#d8c04a; --xp1:#4a2d6b; --xp2:#a06ce0;
  --txt:#cbbd9a; --txt-dim:#8b8168;
  --shadow:0 4px 18px rgba(0,0,0,.85);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#000;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--txt);
  user-select:none;-webkit-user-select:none;touch-action:none}
canvas{display:block}
[hidden]{display:none !important}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ---------- BOOT ---------- */
#boot{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#1b1710 0%,#07070a 70%)}
.character-select-mode{
  background:
    linear-gradient(180deg,rgba(4,7,10,.62) 0%,rgba(5,8,8,.18) 32%,rgba(3,8,5,.16) 66%,rgba(2,4,3,.76) 100%),
    url('../assets/aden-city-garden-v1.png') center center/cover no-repeat!important}
.boot-inner{text-align:center;max-width:520px;padding:0 24px}
#boot h1{font-size:clamp(26px,6vw,46px);letter-spacing:.22em;font-weight:400;
  background:linear-gradient(180deg,#f4e2ad,#c8a24a 45%,#7a5c22);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 24px rgba(200,162,74,.25)}
.boot-sub{margin-top:8px;color:#7d7156;letter-spacing:.35em;font-size:11px}
.boot-bar{margin:26px auto 10px;width:100%;height:8px;background:#0d0c09;
  border:1px solid #3a3020;border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 4px #000}
#bootFill{height:100%;width:0;transition:width .25s;
  background:linear-gradient(90deg,#6b5220,#c8a24a,#f0d795)}
#bootMsg{font-size:12px;color:#6d654f;letter-spacing:.06em}

/* ---------- SCENE ---------- */
#game{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
#rangedAttackBar{position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));transform:translateX(-50%);width:150px;height:3px;background:rgba(20,12,5,.78);border:1px solid rgba(111,68,24,.7);border-radius:2px;overflow:hidden;z-index:45;opacity:0;pointer-events:none;transition:opacity .08s}
#rangedAttackBar i{display:block;width:0;height:100%;background:#f29a38;box-shadow:0 0 5px rgba(242,154,56,.7);transition:width .04s linear}

/* ---------- FRAME (moldura ornamentada compartilhada) ---------- */
.frame{
  position:absolute;
  background:
    linear-gradient(180deg,rgba(38,32,22,.94),rgba(14,12,9,.96));
  border:1px solid #4a3d24;
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px rgba(200,162,74,.16),
    inset 0 1px 0 rgba(255,225,160,.10),
    inset 0 -1px 0 rgba(0,0,0,.6),
    var(--shadow);
}
.frame::before{content:"";position:absolute;inset:2px;border:1px solid rgba(120,96,48,.35);
  border-radius:2px;pointer-events:none}

/* ---------- STATUS WINDOW ---------- */
#statusWindow{top:10px;left:10px;width:322px;padding:6px;display:flex;gap:7px;z-index:20}
.portrait{position:relative;width:60px;height:60px;flex:0 0 60px;
  border:1px solid #55452a;background:#0a0906;box-shadow:inset 0 0 12px #000}
.portrait canvas{width:100%;height:100%;display:block}
.portrait span{position:absolute;bottom:-1px;left:-1px;background:linear-gradient(180deg,#2a2416,#0d0b07);
  border:1px solid #6a5730;color:var(--gold-lt);font-size:11px;line-height:1;padding:2px 5px;
  font-weight:bold;text-shadow:0 1px 2px #000}
.bars{flex:1;display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:0}
.nameRow{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;
  color:#e2d6b4;text-shadow:0 1px 2px #000;padding:0 2px 1px}
.nameRow .cls{color:#8d7f5f;font-size:9px;letter-spacing:.04em}

.bar{position:relative;height:13px;background:linear-gradient(180deg,#0a0a0c,#141416);
  border:1px solid #3d3423;border-radius:2px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.bar.small{height:10px}
.bar i{position:absolute;inset:0;width:0%;display:block;transition:width .18s ease-out;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.45)}
.bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;letter-spacing:.02em;color:#f0e8d0;
  text-shadow:0 1px 2px #000,0 0 4px #000}
.bar.hp i{background:linear-gradient(180deg,#e85050,var(--hp2) 40%,var(--hp1))}
.bar.mp i{background:linear-gradient(180deg,#5c95ee,var(--mp2) 40%,var(--mp1))}
.bar.cp i{background:linear-gradient(180deg,#efdc72,var(--cp2) 40%,var(--cp1))}
.bar.xp{height:7px}
.bar.xp i{background:linear-gradient(180deg,#c294f0,var(--xp2) 40%,var(--xp1))}
.bar.xp b{font-size:8px}

/* ---------- TARGET ---------- */
#targetWindow{top:82px;left:346px;width:210px;z-index:20;padding:0}
#targetWindow.raid-target{width:270px;border-color:#9a6728;box-shadow:0 0 0 1px rgba(218,145,48,.35),0 4px 16px rgba(0,0,0,.8)}
#targetWindow.bigboss-target{width:300px;border-color:#d04432;box-shadow:0 0 0 2px rgba(210,55,36,.32),0 5px 22px rgba(0,0,0,.9)}
#targetWindow.raid-target .tgt-head::before{content:'☠ RAID';color:#f0b65c;font-size:9px;font-weight:bold;letter-spacing:.08em;margin-right:6px}
#targetWindow.bigboss-target .tgt-head::before{content:'☠ BIG BOSS';color:#ff7760}
#targetWindow.raid-target #tIcon{border-color:#b8782d;box-shadow:0 0 7px rgba(218,145,48,.42)}
#targetWindow.bigboss-target #tIcon{border-color:#d04432;box-shadow:0 0 10px rgba(210,55,36,.55)}
.tgt-head{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;
  border-bottom:1px solid #3d3423;font-size:11px;color:#e2d6b4;text-shadow:0 1px 2px #000}
.tgt-actions{display:flex;align-items:center;gap:5px}
.tgt-head i{cursor:pointer;font-style:normal;color:#7d7156;font-size:10px;padding:0 2px}
.tgt-head i:hover{color:#e0b060}
#tDrops{cursor:pointer;background:transparent;border:1px solid #66512b;color:#d8b45c;
  border-radius:2px;font-size:11px;line-height:15px;width:20px;height:18px;padding:0}
#tDrops:hover{border-color:#d8b45c;color:#fff0ad;background:rgba(120,90,30,.25)}
.tgt-body{display:flex;gap:6px;padding:5px 6px}
#tIcon{width:34px;height:34px;border:1px solid #4a3d24;background:#0a0906}
.tgt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.tgt-lv{font-size:10px;color:#9d9078}
.con{font-size:13px;line-height:1}

/* ---------- PURSE ---------- */
#topCenter{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:21;
  display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
#purse{position:relative;top:auto;left:auto;transform:none;pointer-events:auto;
  display:flex;align-items:center;gap:6px;padding:5px 14px;font-size:13px}
#purse .coin{color:#f0c040;font-size:14px;text-shadow:0 0 6px rgba(240,192,64,.5)}
#purse .gem{color:#6fd0f0;font-size:12px;text-shadow:0 0 6px rgba(111,208,240,.5);margin-left:8px}
#purse b{color:#ece0c0;font-weight:600;text-shadow:0 1px 2px #000}

/* ---------- TERRITÓRIO / CHEFE ---------- */
#zoneBanner{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:22;
  min-width:250px;text-align:center;pointer-events:none;text-shadow:0 2px 4px #000}
#zoneBanner b{display:block;color:#f0d795;font-size:15px;letter-spacing:.12em}
#zoneBanner span{display:block;color:#c1b493;font-size:10px;letter-spacing:.06em;padding-top:3px}
#bossBar{top:102px;left:50%;transform:translateX(-50%);width:360px;padding:5px 8px;z-index:22;pointer-events:none}
#bossName{text-align:center;color:#f0bd65;font-size:12px;font-weight:700;text-shadow:0 1px 3px #000;padding-bottom:3px}
.bossHp{height:10px;position:relative;background:#100707;border:1px solid #6b3a1d;overflow:hidden}
.bossHp i{position:absolute;inset:0;width:0;background:linear-gradient(180deg,#ee8a36,#9b250c 60%,#5a1008);transition:width .18s ease-out}
.bossHp b{position:absolute;inset:0;text-align:center;line-height:8px;font-size:8px;color:#fff0d0;text-shadow:0 1px 2px #000}

/* ---------- TOP RIGHT ---------- */
#topRight{position:absolute;top:10px;right:10px;z-index:20;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px}
#sysButtons{display:flex;gap:5px}
.icoBtn{position:relative;width:34px;height:34px;font-size:15px;line-height:1;color:#c9b183;
  background:linear-gradient(180deg,#2e2718,#12100b);
  border:1px solid #52432a;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.14),0 2px 6px rgba(0,0,0,.6)}
.icoBtn:hover{background:linear-gradient(180deg,#413622,#1a170f);color:#f0d795;border-color:#7a6236}
.icoBtn:active{transform:translateY(1px)}
.icoBtn.muted{color:#6a5a4a;opacity:.72}
.icoBtn.muted:hover{opacity:1;color:#c9b183}
.volRow{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:10px;color:#9d9078;letter-spacing:.04em}
.volRow span{width:54px;flex:0 0 54px}
.volRow input[type=range]{flex:1;accent-color:#c9a24a;height:4px;cursor:pointer}
#minimapBox{position:relative;padding:5px;width:232px}
.mm-title{font-size:11px;color:#d8c9a2;text-align:left;padding:1px 3px 4px;
  text-shadow:0 1px 2px #000;border-bottom:1px solid #3a3020;margin-bottom:4px}
#minimap{width:220px;height:150px;display:block;background:#0b0d0a;border:1px solid #362d1d}
.mm-clock{position:absolute;right:9px;bottom:9px;font-size:11px;color:#e6d8b0;
  text-shadow:0 1px 3px #000,0 0 6px #000}

/* ---------- BUFF BAR ---------- */
#buffBar{position:absolute;top:84px;left:10px;width:330px;display:flex;flex-wrap:wrap;gap:3px;z-index:19}
#toggleBuffBar{position:absolute;top:114px;left:10px;width:330px;display:flex;flex-wrap:wrap;gap:3px;z-index:19}
#summonBar{position:absolute;top:145px;left:10px;width:250px;z-index:19;padding:4px 7px;border:1px solid #65502a;background:rgba(13,11,8,.88);color:#d7c28e;font-size:10px;box-shadow:0 2px 7px #0008}
#summonBar b{color:#f0d795}.summonHp{height:4px;margin-top:3px;background:#281010;border:1px solid #513020}.summonHp i{display:block;height:100%;background:#9a7cff}.summonBuffs{display:flex;gap:3px;min-height:24px;margin-top:4px;flex-wrap:wrap}.summonBuffIcon{width:22px;height:22px;border:1px solid #6c5628;box-shadow:0 0 3px #000;object-fit:cover}.summonBuffIcon:hover{border-color:#e3c566;filter:brightness(1.15)}
.partyBar{position:absolute}
#partyBar{position:absolute;top:145px;left:10px;width:270px;z-index:19;display:grid;gap:4px;pointer-events:auto}
.partyCard{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:7px;padding:4px 6px;border:1px solid #514329;background:linear-gradient(180deg,rgba(27,23,15,.95),rgba(10,9,6,.9));box-shadow:0 2px 6px #0008;color:#d5c69b;min-height:42px}
.partyCard.partyLeader{border-color:#907039}.partyCard.partySelf{background:linear-gradient(180deg,rgba(43,34,18,.97),rgba(13,10,6,.94))}.partyAvatar{grid-row:1 / span 2;width:36px;height:36px;border:1px solid #6d572b;background:#0a0907;image-rendering:auto}.partyCardInfo{min-width:0}.partyCardHead{display:flex;align-items:baseline;justify-content:space-between;gap:6px}.partyCardHead b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ead9a8}.partyCardHead span{flex:none;color:#c9a85e;font-size:9px}.partyCardClass{color:#8e8165;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.partyCardBars{grid-column:2;display:grid;gap:2px;margin-top:3px}.partyMiniBar{height:4px;background:#20130f;border:1px solid #38251b;overflow:hidden}.partyMiniBar i{display:block;height:100%;transition:width .15s linear}.partyMiniBar.cp i{background:#d7a63d}.partyMiniBar.hp i{background:#c43d3d}.partyMiniBar.mp i{background:#397ac1}
.summonInfoBtn{padding:0;border:0;background:none;color:#f0d795;font:inherit;cursor:pointer}.summonInfoBtn:hover{text-decoration:underline}.summonInfoBuff{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #3b2d18}.summonInfoBuff span{color:#e2d0a3}
.summonHead{display:flex;gap:3px;align-items:center}.summonHead span{color:#91805d}.summonState{margin-left:auto;text-transform:capitalize}.summonBtns{display:flex;gap:3px;margin-top:4px}.summonBtns button{border:1px solid #5c4825;background:#21190e;color:#d8c38d;padding:2px 4px;font:9px Georgia,serif;cursor:pointer}.summonBtns button:hover{border-color:#c8a24a;color:#fff0ba}
.buffIco{position:relative;width:26px;height:26px;border:1px solid #4a3d24;background:#0d0b08;
  border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.7);cursor:pointer}
.buffIco canvas{width:100%;height:100%;display:block;image-rendering:auto}
.buffIco u{position:absolute;left:0;right:0;bottom:0;height:2px;background:#7ad07a;display:block}
.buffIco.expiring u{background:#e06a3a}
.buffIco s{position:absolute;right:1px;bottom:1px;font-size:8px;color:#fff;text-decoration:none;
  text-shadow:0 1px 2px #000;font-weight:bold}
.toggleBuffIco{border-color:#55c9b3;box-shadow:0 0 0 1px rgba(85,201,179,.28),0 1px 5px rgba(0,0,0,.7)}
.toggleBuffIco::after{content:'↻';position:absolute;right:1px;top:-1px;font-size:10px;line-height:11px;color:#a5fff0;text-shadow:0 1px 2px #000;font-weight:bold}

/* ---------- MISSÃO EM ANDAMENTO ---------- */
#questTracker{top:248px;right:10px;width:232px;padding:7px 9px;z-index:19;pointer-events:none}
#questTracker{max-height:min(38vh,280px);overflow-y:auto}
#questTracker .questTrackEntry{padding:4px 0 5px;border-bottom:1px solid rgba(130,103,52,.35)}
#questTracker .questTrackEntry:last-of-type{border-bottom:0}
.questTrackHead{font-size:9px;letter-spacing:.12em;color:#c8a24a;padding-bottom:3px;border-bottom:1px solid #44371f}
.questTrackName{font-size:12px;color:#ead9a4;font-weight:600;padding-top:5px;text-shadow:0 1px 2px #000}
.questTrackGoal{font-size:10.5px;line-height:1.35;color:#b7aa8a;padding-top:3px}
.questTrackHint{font-size:9px;color:#736850;padding-top:4px;text-align:right}

/* ---------- CHAT ---------- */
#chatBox{position:absolute;left:10px;bottom:10px;width:330px;z-index:18;
  display:flex;flex-direction:column;gap:2px}
.chatSectionTitle{height:14px;display:flex;align-items:center;gap:6px;padding:0 7px;
  color:#a99568;font-size:9px;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 2px #000}
.chatSectionTitle i{height:1px;flex:1;background:linear-gradient(90deg,rgba(111,87,43,.8),transparent)}
#systemChatLog{height:58px;overflow-y:auto;padding:4px 7px;font-size:10.5px;line-height:1.35;
  background:linear-gradient(180deg,rgba(6,6,8,.3),rgba(6,6,8,.52));
  border:1px solid rgba(70,58,36,.45);border-radius:3px 3px 0 0;
  text-shadow:0 1px 2px #000,0 0 3px #000;scrollbar-width:thin;scrollbar-color:#4a3d24 transparent;
  position:relative;min-width:190px;min-height:36px;max-width:80vw;max-height:42vh;box-sizing:border-box}
#systemChatLog::-webkit-scrollbar{width:5px}
#systemChatLog::-webkit-scrollbar-thumb{background:#4a3d24;border-radius:3px}
#systemChatLog div{margin-bottom:1px;word-wrap:break-word}
#chatTabs{display:flex;gap:2px}
.ct{font-size:10px;padding:2px 8px;color:#7d7156;cursor:pointer;
  background:linear-gradient(180deg,rgba(30,26,18,.8),rgba(10,9,7,.85));
  border:1px solid #362d1d;border-bottom:none;border-radius:3px 3px 0 0}
.ct.active{color:#e8d9ae;background:linear-gradient(180deg,rgba(52,44,28,.9),rgba(20,17,11,.9));
  border-color:#5a4a2c}
#chatLog{height:96px;overflow-y:auto;padding:4px 7px;font-size:11.5px;line-height:1.45;
  background:linear-gradient(180deg,rgba(6,6,8,.42),rgba(6,6,8,.62));
  border:1px solid rgba(70,58,36,.5);border-radius:0 3px 3px 3px;
  text-shadow:0 1px 2px #000,0 0 3px #000;scrollbar-width:thin;
  scrollbar-color:#4a3d24 transparent;position:relative;min-width:190px;min-height:48px;max-width:80vw;max-height:52vh;box-sizing:border-box}
#chatLog::-webkit-scrollbar{width:6px}
#chatLog::-webkit-scrollbar-thumb{background:#4a3d24;border-radius:3px}
#chatLog div{margin-bottom:1px;word-wrap:break-word}
.chatResizeGrip{position:sticky;top:-2px;display:block;margin-left:auto;margin-top:-2px;margin-right:-3px;width:8px;height:8px;z-index:4;touch-action:none;opacity:.48;cursor:nwse-resize;
  border-left:1px solid rgba(200,162,74,.32);border-bottom:1px solid rgba(200,162,74,.32);
  background:linear-gradient(135deg,transparent 38%,rgba(200,162,74,.48) 39%,rgba(200,162,74,.48) 47%,transparent 48%,transparent 60%,rgba(200,162,74,.48) 61%,rgba(200,162,74,.48) 69%,transparent 70%)}
.chatResizeGrip:hover{opacity:.9;background-color:rgba(200,162,74,.14);filter:brightness(1.12)}
.system-focus #chatLog{opacity:.45}
.system-focus #systemChatLog{border-color:rgba(122,101,54,.85);box-shadow:inset 0 0 0 1px rgba(200,162,74,.12)}
.c-system{color:#d8c9a2}.c-global{color:#e8e8e8}.c-party{color:#7ad0e8}
.c-trade{color:#e8a860}.c-warn{color:#ff8060}.c-loot{color:#c8e878}
.c-xp{color:#c9a8f0}.c-dmg{color:#f0a0a0}.c-name{color:#8fb8e8}
#chatInput{background:rgba(8,8,10,.9);border:1px solid #5a4a2c;color:#e8dcb8;
  padding:4px 8px;font-size:12px;border-radius:2px;outline:none}

/* ---------- HOTBAR ---------- */
#hotbarAnchor{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;align-items:flex-end;gap:10px;pointer-events:none}
#hotbarAnchor > *{pointer-events:auto}
#hotbarWrap{position:relative;left:auto;bottom:auto;transform:none;padding:6px 8px 8px;
  display:grid;grid-template-columns:repeat(10,46px);grid-template-rows:36px 46px;gap:4px;
  background:transparent;border:0;box-shadow:none}
#hotbarWrap::before,#hotbarWrap::after{display:none}
#ssBtn{grid-column:1;grid-row:1}
#spsBtn{grid-column:2;grid-row:1}
#potBar{grid-column:8 / 11;grid-row:1;display:flex;gap:4px}
#hotbar{grid-column:1 / 11;grid-row:2;display:flex;gap:4px;
  padding:6px 8px 8px;margin:-2px -8px -8px;
  background:linear-gradient(180deg,rgba(35,29,18,.96),rgba(10,9,6,.96));
  border:1px solid #5b4725;border-radius:5px;box-shadow:0 3px 10px rgba(0,0,0,.45)}
#hotbar.hotbarExpanded{flex-direction:column-reverse;gap:3px}
#hotbarWrap:has(#hotbar.hotbarExpanded){grid-template-rows:36px auto}
.hotbarRow{display:flex;gap:4px;height:46px}
#hotbarExpandBtn{position:absolute;right:3px;top:3px;width:18px;height:18px;padding:0;border:1px solid #6b542b;border-radius:3px;background:#17130c;color:#d8b85e;font-size:12px;line-height:14px;cursor:pointer;z-index:5}
#huntDock{position:relative;width:174px;padding:7px 8px 8px;display:flex;flex-direction:column;gap:6px}
.huntDockHead{display:flex;justify-content:space-between;align-items:center;padding:0 1px 4px;
  border-bottom:1px solid rgba(163,126,59,.35);color:#d9c28b;font-size:9px;letter-spacing:.13em}
.huntDockHead button{width:21px;height:19px;border:1px solid #65502a;border-radius:3px;
  background:#241d11;color:#d5bb7e;font-size:13px;line-height:15px}
.huntDockHead button:hover{border-color:#c8a24a;color:#fff0bd;background:#3a2e19}
.huntDockMain{display:flex;align-items:center;gap:8px}
.huntDockInfo{min-width:0;display:flex;flex-direction:column;gap:2px}
.huntDockInfo strong{color:#d9c8a1;font-size:11px;line-height:1.15}
.huntDockInfo small{color:#8d8065;font-size:9px;line-height:1.2}
#huntDock.on .huntDockInfo strong{color:#9cda9c}
.huntDockRotation{padding-top:5px;border-top:1px solid rgba(163,126,59,.25)}
.huntDockRotation>span{display:block;color:#927d56;font-size:8px;letter-spacing:.1em;margin-bottom:4px}
#huntSkillIcons{min-height:28px;display:flex;align-items:center;gap:3px}
.huntSkillIcon{width:28px;height:28px;flex:0 0 28px;border:1px solid #66502b;border-radius:2px;
  background:#0b0906;box-shadow:0 1px 4px #000;cursor:help}
.huntSkillIcon canvas{width:26px;height:26px;display:block}
.huntSkillIcon:hover{border-color:#e2bc69;filter:brightness(1.18)}
.huntSkillMore{font-size:10px;color:#cfb676}
.huntSkillEmpty{font-size:9px;color:#84765e;line-height:1.2}
.huntDockBtn{position:relative;width:52px;height:52px;border:1px solid #43371f;border-radius:6px;
  background:linear-gradient(180deg,#211d14,#0b0a07);color:#6a6250;display:flex;
  align-items:center;justify-content:center;overflow:visible}
.huntDockBtn .huntGlyph{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  font-size:20px;z-index:2;color:#6a6250;pointer-events:none;line-height:1}
.huntDockBtn span{position:absolute;right:4px;bottom:2px;z-index:3;font-size:8px;font-weight:bold;
  text-shadow:0 1px 2px #000}
.huntDockBtn i{position:absolute;inset:1px;border-radius:5px;opacity:0;transition:opacity .15s;z-index:0;pointer-events:none}
.huntDockBtn::after{
  content:"";position:absolute;inset:-3px;border-radius:8px;padding:2px;pointer-events:none;z-index:4;
  opacity:0;transition:opacity .15s;
  background:conic-gradient(from 0deg,transparent 0 58%,#d8ffd8 72%,#4a9a4a 84%,#1a5a2a 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.huntDockBtn.on::after{opacity:1;animation:shotOrbit 1.5s linear infinite}
.shotBtn{position:relative;width:46px;height:36px;border:1px solid #43371f;border-radius:4px;
  background:linear-gradient(180deg,#211d14,#0b0a07);color:#6a6250;font-size:8px;font-weight:bold;
  letter-spacing:.04em;display:flex;align-items:center;justify-content:center;overflow:visible;gap:1px}
.shotBtn .shotIco{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:20px;height:20px;
  pointer-events:none;z-index:2;image-rendering:auto}
.shotBtn i{position:absolute;inset:1px;border-radius:3px;opacity:0;transition:opacity .15s;z-index:0;
  pointer-events:none}
.shotBtn .shotLabel{position:absolute;left:3px;top:2px;z-index:3;font-size:8px;line-height:1;text-shadow:0 1px 2px #000,0 0 4px #000}
.shotBtn .shotCount{position:absolute;right:2px;bottom:1px;z-index:3;max-width:34px;padding:1px 2px;border-radius:2px;
  background:rgba(0,0,0,.82);color:#f2e6c6;font-size:8px;line-height:1;text-shadow:0 1px 2px #000;white-space:nowrap}
.shotBtn .shotMode{position:absolute;right:2px;top:1px;z-index:3;padding:1px 2px;border-radius:2px;background:#4b3510;color:#ffe39a;
  font-size:6px;line-height:1;font-style:normal;letter-spacing:0}
.shotBtn.on{color:#fff;border-color:#c8a24a;box-shadow:0 0 8px rgba(200,162,74,.4)}
.shotBtn.on .shotMode{background:#72551c;color:#fff1be}
.shotBtn.on i{opacity:.28;background:radial-gradient(circle at 50% 45%,rgba(240,192,80,.7),transparent 72%)}
.shotBtn.on .shotIco{filter:drop-shadow(0 0 3px rgba(240,192,80,.9))}
#spsBtn.on{border-color:#5aa0e0;box-shadow:0 0 8px rgba(90,160,224,.45)}
#spsBtn.on .shotMode{background:#174b78;color:#d9f1ff}
#spsBtn.on i{background:radial-gradient(circle at 50% 45%,rgba(122,200,255,.7),transparent 72%)}
#spsBtn.on .shotIco{filter:drop-shadow(0 0 3px rgba(122,200,255,.9))}
.shotBtn::after{
  content:"";position:absolute;inset:-3px;border-radius:6px;padding:2px;pointer-events:none;z-index:4;
  opacity:0;transition:opacity .15s;
  background:conic-gradient(from 0deg,transparent 0 58%,#f4e2ad 72%,#c8a24a 84%,#7a5c22 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.shotBtn.on::after{opacity:1;animation:shotOrbit 1.5s linear infinite}
#spsBtn.on::after{
  background:conic-gradient(from 0deg,transparent 0 58%,#d8f0ff 72%,#5aa0e0 84%,#1a5a9a 92%,transparent 100%)}
@keyframes shotOrbit{to{transform:rotate(360deg)}}
.shotBtn.empty{opacity:.35;cursor:not-allowed}
.huntBtn.on{color:#c8f0c8;border-color:#4a9a4a;box-shadow:0 0 8px rgba(80,180,80,.45)}
.huntBtn.on i{opacity:.32;background:radial-gradient(circle at 50% 45%,rgba(100,220,120,.75),transparent 72%)}
.huntBtn.on .huntGlyph{color:#8ae08a;filter:drop-shadow(0 0 4px rgba(80,200,80,.85))}
.huntBtn.on::after{
  background:conic-gradient(from 0deg,transparent 0 58%,#d8ffd8 72%,#4a9a4a 84%,#1a5a2a 92%,transparent 100%)}
.icoBtn.huntOn{color:#8ae08a;border-color:#4a8a4a;
  animation:huntPulse 1.8s ease-in-out infinite}
@keyframes huntPulse{
  0%,100%{box-shadow:0 0 4px rgba(80,180,80,.25)}
  50%{box-shadow:0 0 12px rgba(120,220,120,.7)}}
.potPick{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 8px}
.potCell{position:relative;width:52px;height:52px;border:1px solid #43371f;border-radius:4px;
  background:linear-gradient(180deg,#211d14,#0b0a07);cursor:pointer;opacity:.42;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.08)}
.potCell canvas{display:block;margin:3px auto 0}
.potCell .qty{position:absolute;right:3px;bottom:1px;font-size:9px;color:#fff;font-weight:bold;
  text-shadow:0 1px 2px #000}
.potCell.on{opacity:1;border-color:#c8a24a;box-shadow:0 0 8px rgba(200,162,74,.35)}
.potCell.empty .qty{color:#8a8070}
.huntCols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.huntSkillColumn{min-width:0;padding:7px;border:1px solid #493b22;background:linear-gradient(180deg,rgba(31,26,17,.82),rgba(13,11,8,.78))}
.huntSkillColumn.buffs{border-top:2px solid #76a66b}
.huntSkillColumn.debuffs{border-top:2px solid #bd6d55}
.huntSkillColumn.attacks{border-top:2px solid #c49b48}
.huntSkillColumn .sect{margin-top:10px}
.huntEmpty{color:#877b62;opacity:.82;line-height:1.4;padding:5px 2px;font-size:10px}
.farmWindow{width:min(540px,calc(100vw - 24px))!important}
.farmWindow .win-body{padding:0;max-height:min(78vh,690px)}
.farmPanel{background:linear-gradient(180deg,#1e1a12,#100e0a);min-height:330px}
.farmTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;
  background:#100e09;border-bottom:1px solid #574424}
.farmTabs .tab{padding:10px 4px;text-align:center;border-radius:0;font-size:10px;white-space:nowrap}
.farmTabs .tab:hover{color:#f0d795;background:rgba(111,83,36,.22)}
.farmTabs .tab.active{border-color:#74592a;border-top:2px solid #d2a64f;background:#2a2114;color:#f1d696}
.farmPane{padding:12px 14px 16px}
.farmHero{display:flex;align-items:center;gap:13px;padding:13px;margin-bottom:10px;border:1px solid #6d5429;
  background:linear-gradient(105deg,rgba(85,60,25,.45),rgba(24,20,13,.9));box-shadow:inset 0 1px 0 #a9864433}
.farmHeroGlyph{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:1px solid #9b7736;
  background:#18130c;color:#e6c16c;font-size:28px;box-shadow:inset 0 0 12px #9b773633}
.farmHeroTitle{font:600 16px Georgia,serif;color:#f1dfae;margin-bottom:4px}
.farmHeroDesc,.farmIntro,.farmShortcut{font-size:10.5px;color:#a99a78;line-height:1.45}
.farmIntro{padding:8px 10px;margin-bottom:10px;border-left:2px solid #a18142;background:#241c11}
.farmShortcut{margin:8px 0 12px}
.farmToggle{width:100%;padding:9px;font-size:12px;letter-spacing:.08em}
.farmPane .skrow{min-height:49px;cursor:help}
.farmPane .skrow input{cursor:pointer;flex:0 0 auto}
.farmPane .srow{padding:6px 4px;align-items:center;gap:8px}
.farmPane .srow span:first-child{color:#bbac87}
.farmPane .sect{margin-top:15px;color:#cfaa61}
.huntCols h5{margin:0 0 7px;font-size:10px;letter-spacing:.08em;color:#c8a24a;font-weight:700;white-space:nowrap}
.icell.shotOn{border-color:#c8a24a;box-shadow:inset 0 0 0 1px rgba(200,162,74,.55),0 0 8px rgba(200,162,74,.4)}
.slot{position:relative;width:46px;height:46px;border:1px solid #4a3d24;border-radius:3px;
  background:linear-gradient(180deg,#262115,#0c0b08);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.12),inset 0 -2px 6px rgba(0,0,0,.6)}
.slot:hover{border-color:#8a6b32}
.slot canvas{width:100%;height:100%;display:block}
.slot .key{position:absolute;top:1px;left:2px;font-size:8px;color:#9d9078;
  text-shadow:0 1px 2px #000;pointer-events:none}
.slot .qty{position:absolute;bottom:1px;right:3px;font-size:9px;color:#fff;font-weight:bold;
  text-shadow:0 1px 2px #000;pointer-events:none}
.slot .cd{position:absolute;inset:0;background:rgba(0,0,0,.68);pointer-events:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;
  font-weight:bold;text-shadow:0 1px 3px #000}
.slot.off{filter:grayscale(.7) brightness(.5)}
.slot.toggled{box-shadow:inset 0 0 0 2px #d8b050,0 0 10px rgba(216,176,80,.5)}
.slot.action{box-shadow:inset 0 1px 0 rgba(220,220,220,.08),inset 0 -2px 6px rgba(0,0,0,.7)}
.slot.dragover,.potSlot.dragover{border-color:#c8a24a;box-shadow:0 0 10px rgba(200,162,74,.5)}
.slot.dragging,.potSlot.dragging,.skrow.dragging,.icell.dragging{opacity:.42}
.potSlot{position:relative;width:46px;height:36px;border:1px solid #4a3d24;border-radius:3px;
  background:linear-gradient(180deg,#1a1812,#0a0907);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.1),inset 0 -2px 6px rgba(0,0,0,.6)}
.potSlot:hover{border-color:#8a6b32}
.potSlot canvas{width:100%;height:100%;display:block}
.potSlot .key{position:absolute;top:1px;left:2px;font-size:7px;letter-spacing:.06em;
  text-shadow:0 1px 2px #000;pointer-events:none}
.potSlot.cp .key{color:#c8b060}
.potSlot.hp .key{color:#c87878}
.potSlot.mp .key{color:#78a0d0}
.potSlot .qty{position:absolute;bottom:1px;right:3px;font-size:8px;color:#fff;font-weight:bold;
  text-shadow:0 1px 2px #000;pointer-events:none}
.potSlot .cd{position:absolute;inset:0;background:rgba(0,0,0,.68);pointer-events:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:bold}
.potSlot.empty{opacity:.5}
.potSlot.off{filter:grayscale(.7) brightness(.55)}
.skrow[draggable="true"],.icell[draggable="true"]{cursor:grab}
.skrow[draggable="true"]:active,.icell[draggable="true"]:active{cursor:grabbing}

/* ---------- MOBILE CONTROLS ---------- */
#joystick{position:absolute;left:22px;bottom:120px;width:132px;height:132px;z-index:17;
  touch-action:none;opacity:.82}
#joyBase{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(60,54,38,.55),rgba(12,11,8,.72));
  border:2px solid rgba(120,98,54,.5);box-shadow:inset 0 0 24px rgba(0,0,0,.8),0 4px 16px rgba(0,0,0,.7)}
#joyBase::after{content:"";position:absolute;inset:14px;border-radius:50%;
  border:1px solid rgba(120,98,54,.22)}
#joyKnob{position:absolute;left:41px;top:41px;width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#6a604a,#1e1a12);
  border:2px solid #7a6236;box-shadow:0 3px 10px rgba(0,0,0,.8),inset 0 2px 4px rgba(255,230,180,.2)}
#actionCluster{position:absolute;right:20px;bottom:110px;z-index:17;
  width:170px;height:170px;opacity:.9}
.act{position:absolute;width:58px;height:58px;border-radius:50%;font-size:22px;line-height:1;
  color:#d8c090;background:radial-gradient(circle at 40% 32%,#3c3422,#12100b);
  border:2px solid #6a5730;box-shadow:0 3px 12px rgba(0,0,0,.75),inset 0 2px 5px rgba(255,225,160,.14)}
.act:active{transform:scale(.93);border-color:#c8a24a}
.act.big{width:74px;height:74px;font-size:28px;right:4px;bottom:34px;position:absolute;
  border-color:#8a6b32;color:#f0d795}
#btnAttack{right:4px;bottom:30px}
#btnTargetNext{right:74px;bottom:100px}
#btnPickup{right:10px;bottom:112px}
#btnSit{right:96px;bottom:34px}
#btnAuto{right:112px;bottom:104px;font-size:20px}
.act.on{border-color:#d8b050;color:#ffe6a0;box-shadow:0 0 14px rgba(216,176,80,.6),inset 0 2px 5px rgba(255,225,160,.2)}

/* ---------- WINDOWS ---------- */
#windows{position:absolute;inset:0;pointer-events:none;z-index:30}
.win{position:absolute;pointer-events:auto;min-width:250px;
  background:linear-gradient(180deg,rgba(36,30,20,.985),rgba(15,13,9,.99));
  border:1px solid #55452a;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(200,162,74,.18),0 10px 40px rgba(0,0,0,.9)}
.win-head{display:flex;justify-content:space-between;align-items:center;cursor:move;
  padding:6px 10px;font-size:12px;letter-spacing:.06em;color:#e8d9ae;
  background:linear-gradient(180deg,#3a3120,#1c1810);border-bottom:1px solid #55452a;
  border-radius:3px 3px 0 0;text-shadow:0 1px 2px #000}
.win-head .x{cursor:pointer;color:#8d7f5f;font-size:13px;padding:0 3px}
.win-head .x:hover{color:#f0a060}
.win-body{padding:9px;font-size:12px;max-height:min(74vh,560px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#4a3d24 transparent}
.win-body::-webkit-scrollbar{width:7px}
.win-body::-webkit-scrollbar-thumb{background:#4a3d24;border-radius:3px}
.tabs{display:flex;gap:2px;margin-bottom:8px;border-bottom:1px solid #3d3423}
.tab{font-size:11px;padding:4px 11px;color:#7d7156;cursor:pointer;border:1px solid transparent;
  border-bottom:none;border-radius:3px 3px 0 0}
.tab.active{color:#e8d9ae;background:linear-gradient(180deg,#3a3120,#201b12);border-color:#55452a}

/* mapa-múndi */
.worldMapWindow{width:min(980px,calc(100vw - 34px))!important;max-width:980px}
.worldMapWindow .win-body{padding:0;max-height:min(82vh,680px);overflow:auto}
.worldMapPanel{background:#11100b;color:#cfc09a}
.worldMapToolbar{display:flex;justify-content:space-between;gap:12px;padding:8px 11px;
  border-bottom:1px solid #463a24;background:linear-gradient(180deg,#211c12,#15120d);
  color:#d9c58f;font-size:10px;letter-spacing:.12em}
.worldMapCurrent{color:#84785e;letter-spacing:.03em;text-align:right}
.worldMapGrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(210px,1fr);min-height:460px}
.worldMapCanvasWrap{position:relative;min-width:0;padding:10px;background:#090b09}
.worldMapCanvas{display:block;width:100%;height:auto;aspect-ratio:4/3;border:1px solid #5a492b;
  background:#172219;box-shadow:inset 0 0 22px rgba(0,0,0,.75);cursor:crosshair}
.worldMapCanvas.canPick{cursor:pointer}
.worldMapCoords{position:absolute;left:17px;bottom:17px;padding:4px 7px;border:1px solid rgba(176,145,76,.42);
  background:rgba(10,9,6,.84);color:#c6b589;font-size:9px;pointer-events:none}
.worldMapSide{min-width:0;padding:10px;border-left:1px solid #40351f;background:linear-gradient(180deg,#19160f,#0e0d09)}
.worldMapDetails{min-height:150px;padding:10px;border:1px solid #43371f;background:rgba(8,7,5,.48)}
.worldMapEyebrow{color:#a98a49;font-size:9px;letter-spacing:.14em}
.worldMapDetails h3{margin:5px 0;color:#ead8a7;font:600 17px Georgia,serif}
.worldMapDetails p{margin:8px 0;color:#998b6e;font-size:10.5px;line-height:1.45}
.worldMapLevel{display:inline-block;padding:2px 6px;border:1px solid #63512e;color:#d7bc72;font-size:10px;background:#17130c}
.worldMapMeta{display:flex;gap:5px;margin-top:8px}.worldMapMeta span{padding:2px 5px;background:#0d0c08;color:#766b54;font-size:9px}
.worldMapHere{margin-top:9px;color:#f1d86f;font-size:9px;letter-spacing:.06em}
.worldMapZoneList{max-height:338px;overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:#4a3d24 transparent}
.worldMapTownGroup{padding:7px 4px 3px;color:#9b8250;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.worldMapZoneRow{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;
  padding:5px 6px;border:1px solid transparent;background:transparent;color:#b8aa88;text-align:left;font:10px inherit;cursor:pointer}
.worldMapZoneRow i{width:6px;height:6px;border-radius:50%;box-shadow:0 0 4px currentColor}
.worldMapZoneRow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wikiWindow{width:min(760px,calc(100vw - 24px))!important;max-width:760px}
.wikiWindow .win-body{padding:0;max-height:min(82vh,720px);overflow:hidden;background:#11100b}
.wikiBody{display:flex;flex-direction:column;min-height:0;color:#cfc09a}
.wikiToolbar{padding:9px 10px 8px;border-bottom:1px solid #40351f;background:linear-gradient(180deg,#1c180f,#12100b)}
.wikiTabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.wikiTab{flex:0 0 auto;padding:7px 9px;border:1px solid #4b3c22;background:#17130d;color:#a89770;font:10px Georgia,serif;cursor:pointer}
.wikiTab:hover{color:#f1d99e;border-color:#86672f}.wikiTab.active{color:#f4dc9b;border-color:#b38a3d;background:#332712;box-shadow:inset 0 -2px #d0a84d}
.wikiSearch{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:7px 9px;border:1px solid #4a3d28;background:#0b0a07;color:#eee0b9;font:12px Georgia,serif;outline:none}
.wikiSearch:focus{border-color:#a27c36;box-shadow:0 0 0 1px #a27c3638}.wikiContent{padding:12px;overflow-y:auto;max-height:min(72vh,620px);scrollbar-width:thin;scrollbar-color:#4a3d24 transparent}
.wikiHero{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid #4b3b22;background:linear-gradient(135deg,#251d11,#12100b)}
.wikiHeroMark{display:grid;place-items:center;width:43px;height:43px;color:#f0ca65;font-size:27px;border:1px solid #9a7534;background:#171108;box-shadow:0 0 15px #c28d3030}
.wikiHero h2{margin:0;color:#f0d795;font:600 21px Georgia,serif;letter-spacing:.05em}.wikiHero p{margin:5px 0 0;color:#9c8f71;font-size:11px;line-height:1.4}
.wikiStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:6px;margin:10px 0}.wikiStat{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border:1px solid #3b3020;background:#15120c;font-size:10px;color:#b8a77c}.wikiStat b{font-size:9px;color:#75694f;text-transform:uppercase;letter-spacing:.06em}.wikiQuick{display:flex;align-items:center;gap:10px}.wikiHint{color:#81765d;font-size:10px}.wikiIntro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:8px 9px;border:1px solid #3c311e;background:#15120c;color:#968865;font-size:10px}.wikiIntro strong{color:#e2cb91;font-size:12px}.wikiIntro span{flex:1}.wikiIntro .btn{margin-left:auto;padding:5px 8px;font-size:10px}
.wikiSectionTitle{margin:15px 0 7px;color:#d9bd73;font:600 12px Georgia,serif;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #3d321f;padding-bottom:4px}.wikiGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:7px}.wikiTownGrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.wikiCard{min-width:0;padding:9px;border:1px solid #3c311f;background:linear-gradient(145deg,#1b160e,#100e09);box-shadow:inset 0 1px #ffffff08}.wikiCardHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}.wikiCardHead strong{color:#e3ce98;font:600 12px Georgia,serif}.wikiCardHead span{color:#8f815f;font-size:9px;text-align:right}.wikiCard p{margin:3px 0 7px;color:#988a6b;font-size:10px;line-height:1.35}.wikiMeta{display:flex;gap:4px;flex-wrap:wrap}.wikiMeta .wikiStat{padding:4px 5px;font-size:9px}.wikiMeta .wikiStat b{font-size:8px}.wikiCount{margin:0 0 7px;color:#7e735b;font-size:10px}.wikiEmpty{padding:22px;text-align:center;border:1px dashed #4b3d25;color:#887b5f;font-size:11px}.wikiDetails{margin-top:7px;border-top:1px solid #332a1b;padding-top:5px}.wikiDetails summary{cursor:pointer;color:#c8a96b;font-size:10px}.wikiDropList{display:flex;flex-direction:column;gap:3px;margin-top:5px}.wikiDrop{display:flex;align-items:center;gap:6px;padding:3px 4px;background:#0d0c08}.wikiDrop canvas{flex:none}.wikiDrop span{display:flex;flex-direction:column;min-width:0}.wikiDrop b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cbbb91;font-size:9px}.wikiDrop small{color:#80745a;font-size:8px}.wikiItemLine,.wikiSkillLine{display:flex;align-items:center;gap:8px}.wikiItemLine>div,.wikiSkillLine>span{min-width:0;flex:1}.wikiItemLine small,.wikiSkillLine small{display:block;color:#887c61;font-size:9px;line-height:1.35}.wikiItemGrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}.wikiReward{margin-top:7px;padding-top:5px;border-top:1px solid #332a1b;color:#bca366;font-size:9px}.wikiSteps{margin:5px 0 0 20px;padding:0;color:#8f8265;font-size:9px;line-height:1.45}.wikiTreeTitle{margin-bottom:9px;padding:8px;border-left:2px solid #b48a3a;background:#19140b;color:#e0cb91;font:11px Georgia,serif}.wikiClassSelect{margin-left:auto;padding:5px 7px;border:1px solid #574728;background:#0d0c08;color:#ddcb96;font:10px Georgia,serif}.wikiSkillTree h4{margin:13px 0 6px;color:#bf9a51;font:600 10px Georgia,serif;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:560px){.wikiGrid,.wikiItemGrid{grid-template-columns:1fr}.wikiContent{padding:8px}.wikiQuick{align-items:flex-start;flex-direction:column}.wikiHint{line-height:1.3}.wikiClassSelect{width:100%;margin-left:0}}
.worldMapZoneRow b{color:#81745a;font-size:9px;font-weight:500}
.worldMapZoneRow:hover,.worldMapZoneRow.active{border-color:#5a492a;background:#241e13;color:#f0ddb0}
.worldMapZoneRow.active b{color:#d5b862}

/* grid de itens */
.igrid{display:grid;grid-template-columns:repeat(auto-fill,44px);gap:4px}
.icell{position:relative;width:44px;height:44px;border:1px solid #43371f;border-radius:2px;
  background:linear-gradient(180deg,#201c13,#0b0a07);cursor:pointer;overflow:hidden}
.icell:hover{border-color:#a08040;box-shadow:0 0 8px rgba(160,128,64,.35)}
.icell.equipped{border-color:#c8a24a;box-shadow:inset 0 0 0 1px rgba(200,162,74,.4)}
.icell.selected{border-color:#e0c060;box-shadow:inset 0 0 0 1px rgba(224,192,96,.85),0 0 8px rgba(224,192,96,.35)}
.icell canvas{width:100%;height:100%;display:block}
.icell .qty{position:absolute;bottom:0;right:2px;font-size:9px;font-weight:bold;color:#fff;
  text-shadow:0 1px 2px #000}
.icell .enc{position:absolute;top:0;left:2px;font-size:9px;font-weight:bold;color:#7ad0ff;
  text-shadow:0 1px 2px #000}
.gmark{position:absolute;top:1px;right:1px;z-index:2;font-size:8px;font-weight:800;line-height:1;
  padding:1px 3px;border-radius:2px;border:1px solid;background:rgba(8,7,5,.82);
  text-shadow:0 1px 1px #000;pointer-events:none;letter-spacing:.03em}
.slot .gmark{top:1px;right:1px}
.icell.g-D,.slot.g-D{border-color:#4a8a4a}
.icell.g-C,.slot.g-C{border-color:#2a6ab0}
.icell.g-B,.slot.g-B{border-color:#7a3ac0}
.icell.g-A,.slot.g-A{border-color:#c07810}
.icell.g-S,.slot.g-S{border-color:#c03010}
.invTrash{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 9px;
  color:#aa806a;border:1px dashed #5c3a2c;border-radius:3px;background:rgba(58,25,20,.28);
  transition:border-color .12s,background .12s}
.invTrash strong{display:block;font-size:10px;letter-spacing:.08em;color:#bf8a70}
.invTrash small{display:block;margin-top:2px;font-size:10px;color:#76604f}
.invTrashIcon{font-size:18px;line-height:1;filter:grayscale(.2)}
.invTrash.dragover{border-color:#e28a65;background:rgba(130,42,25,.5);box-shadow:inset 0 0 12px rgba(218,83,47,.22)}
.itemQtyDlg{width:min(330px,90vw)}
.itemQtyBody{padding:13px}
.itemQtyItem{display:flex;align-items:center;gap:9px;padding:7px;border:1px solid #42351f;
  border-radius:3px;background:rgba(10,9,6,.38)}
.itemQtyItem canvas{width:40px;height:40px;border:1px solid #66512b}
.itemQtyItem strong{display:block;color:#e4d3a4;font-size:12px}
.itemQtyItem small{display:block;margin-top:3px;color:#897a5b;font-size:10px}
.itemQtyQuestion{margin:13px 0 6px;color:#c9b98f;font-size:11px}
.itemQtyInput{width:100%;box-sizing:border-box;padding:7px 9px;background:#100e09;border:1px solid #766036;
  border-radius:3px;color:#f4e3b0;font:600 15px inherit;text-align:center;outline:none}
.itemQtyInput:focus{border-color:#c5a34e;box-shadow:0 0 0 1px rgba(197,163,78,.3)}
.itemQtyQuick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:7px}
.itemQtyQuick .btn{padding:5px 7px}
.itemQtyActions{justify-content:flex-end;margin-top:13px}
.shopIco{position:relative;width:32px;height:32px;flex:0 0 32px}
.shopIco canvas{width:32px;height:32px;display:block;border:1px solid #43371f}
.shopIco .gmark{font-size:7px;padding:0 2px}

/* linhas de stats */
.srow{display:flex;justify-content:space-between;padding:2px 4px;border-bottom:1px dotted #2e2718}
.srow span:first-child{color:#8d7f5f}
.srow span:last-child{color:#e0d4b0;font-weight:600}
.sect{font-size:10px;letter-spacing:.14em;color:#a08a55;margin:9px 0 4px;
  border-bottom:1px solid #3d3423;padding-bottom:3px}
.sect:first-child{margin-top:0}

/* skills list */
.skrow{display:flex;gap:8px;align-items:center;padding:5px;border:1px solid #33291a;
  border-radius:3px;margin-bottom:4px;background:rgba(20,17,11,.6);cursor:pointer}
.skrow:hover{border-color:#7a6236;background:rgba(40,34,22,.7)}
.skrow canvas{width:32px;height:32px;flex:0 0 32px;border:0;
  box-shadow:inset 0 0 0 1px #43371f}
.skrow .si{flex:1;min-width:0}
.skrow .sn{color:#e2d6b4;font-size:11.5px}
.skrow .sd{color:#7d7156;font-size:10px;line-height:1.3}
.skrow.locked{opacity:.42}
.skillGroup{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.skillIconButton{position:relative;width:48px;height:48px;padding:1px;display:grid;place-items:center;
  border:1px solid #493b22;border-radius:3px;background:linear-gradient(180deg,#211c12,#0c0a07);
  box-shadow:inset 0 1px 0 rgba(255,225,160,.1),0 2px 4px rgba(0,0,0,.45);cursor:pointer}
.skillIconButton canvas{width:44px;height:44px;display:block}
.skillIconButton:hover{z-index:2;border-color:#d0aa58;filter:brightness(1.18);box-shadow:0 0 9px rgba(200,162,74,.32)}
.skillIconButton.learned{border-color:#766039}
.skillIconButton.learnable::after{content:'+';position:absolute;right:-3px;top:-4px;width:14px;height:14px;display:grid;place-items:center;
  border:1px solid #3c713b;border-radius:50%;background:#173018;color:#b9efaa;font-size:12px;font-weight:bold;line-height:1}
.skillIconButton.locked{opacity:.42;filter:grayscale(.8)}
.skillIconButton:focus-visible{outline:2px solid #d0aa58;outline-offset:2px}

/* botões */
.btn{background:linear-gradient(180deg,#3a3120,#191510);border:1px solid #6a5730;color:#d8c9a2;
  padding:6px 14px;font-size:11.5px;border-radius:3px;letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.14),0 2px 5px rgba(0,0,0,.5)}
.btn:hover{background:linear-gradient(180deg,#4c4029,#221d14);border-color:#a08040;color:#f4e6bd}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.gold{border-color:#a8873c;color:#f0d795}
.btn.wide{width:100%;margin-bottom:5px;text-align:left}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ---------- DIALOG NPC ---------- */
#dialogLayer{position:absolute;inset:0;pointer-events:none;z-index:40}
.npcDlg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(40,34,22,.99),rgba(14,12,9,.995));
  border:2px solid #6a5730;border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(200,162,74,.22),0 14px 60px rgba(0,0,0,.95)}
.npcDlg .nh{display:flex;justify-content:space-between;padding:8px 12px;
  background:linear-gradient(180deg,#453a24,#221c12);border-bottom:1px solid #6a5730;
  color:#f0d795;font-size:13px;letter-spacing:.05em}
.npcDlg .nh .x{cursor:pointer;color:#9d9078}
.npcDlg .nb{padding:12px;max-height:66vh;overflow-y:auto}
.mobInfoDlg{width:min(500px,92vw)}
.mobInfo-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.mobInfo-stat{background:rgba(20,17,11,.72);border:1px solid #3f321e;padding:7px;text-align:center}
.mobInfo-stat b{display:block;color:#f0d795;font-size:13px}.mobInfo-stat span{display:block;color:#8e8063;font-size:10px;margin-top:2px}
.mobInfo-section{color:#d8c69a;font-size:11px;letter-spacing:.08em;margin:12px 0 6px;border-bottom:1px solid #46371f;padding-bottom:4px}
.mobDrop{display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px solid rgba(70,55,30,.45)}
.mobDrop canvas{width:30px;height:30px;flex:0 0 30px;border:1px solid #443820;background:#0b0906}
.mobDrop-info{flex:1;min-width:0}.mobDrop-name{color:#e2d6b4;font-size:11px}.mobDrop-meta{color:#918367;font-size:10px;margin-top:2px}
.mobDrop-chance{color:#d9b866;font-size:11px;white-space:nowrap}
.npcTxt{color:#c8ba95;font-size:12px;line-height:1.6;margin-bottom:12px;
  font-style:italic;border-left:2px solid #55452a;padding-left:10px}
.dlgOpt{display:block;width:100%;text-align:left;margin-bottom:4px;
  background:linear-gradient(90deg,rgba(58,49,32,.8),rgba(25,21,14,.6));
  border:1px solid #4a3d24;color:#d0c199;padding:7px 11px;font-size:11.5px;border-radius:3px}
.dlgOpt:hover{border-color:#a08040;color:#f4e6bd;
  background:linear-gradient(90deg,rgba(80,66,40,.9),rgba(35,29,19,.7))}
.dlgOpt small{display:block;color:#7d7156;font-size:10px;margin-top:2px}

/* shop rows */
.shopRow{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid #33291a;
  border-radius:3px;margin-bottom:3px;background:rgba(20,17,11,.5)}
.shopRow canvas{width:32px;height:32px;flex:0 0 32px;border:1px solid #43371f}
.shopRow .n{flex:1;min-width:0;font-size:11.5px;color:#d8c9a2}
.shopRow .n small{display:block;color:#7d7156;font-size:9.5px}
.shopRow .p{color:#f0c040;font-size:11px;white-space:nowrap}

/* ---------- TOOLTIP ---------- */
#tooltip{position:absolute;z-index:60;pointer-events:none;max-width:270px;
  background:linear-gradient(180deg,rgba(28,24,16,.985),rgba(10,9,7,.99));
  border:1px solid #6a5730;border-radius:3px;padding:8px 10px;font-size:11px;line-height:1.5;
  box-shadow:0 8px 28px rgba(0,0,0,.9)}
#tooltip h4{color:#f0d795;font-size:12px;font-weight:600;margin-bottom:4px;letter-spacing:.03em}
#tooltip h4 .enc{color:#7ad0ff;font-weight:700}
#tooltip .g{color:#7d7156;font-size:10px}
#tooltip .p{color:#8fd08f}
#tooltip .n{color:#e08080}
#tooltip .f{color:#9db8e0;font-style:italic;margin-top:4px;font-size:10px}
#tooltip .grade{display:flex;align-items:center;gap:7px;font-weight:700;
  letter-spacing:.12em;font-size:12px;margin:5px 0 2px;text-transform:uppercase}
#tooltip .grade i{display:inline-block;width:9px;height:9px;transform:rotate(45deg);
  box-shadow:0 0 8px currentColor;flex:0 0 9px}
#tooltip .sa{margin-top:7px;padding:5px 7px;border:1px solid #3a4a6a;border-radius:3px;
  background:rgba(30,40,70,.38);font-size:10.5px}
#tooltip .sa b{display:block;color:#e8d070;font-size:11px;margin-bottom:2px;letter-spacing:.04em}
#tooltip .sa span{display:block;color:#b8c8e8;font-style:normal}
#tooltip .glowline{margin-top:5px;font-size:10.5px;font-weight:600}

/* Item information: the same compact dark-metal language as the game windows. */
#tooltip.item-tooltip{box-sizing:border-box;width:330px;max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain;padding:0;
  background:linear-gradient(155deg,#30291d 0%,#1c1a14 42%,#12120f 100%);
  border:1px solid #8e7444;border-radius:5px;color:#d8cfba;font-size:11.5px;line-height:1.35;
  box-shadow:0 0 0 2px #14110c,0 12px 30px rgba(0,0,0,.85),inset 0 1px rgba(255,230,168,.16)}
#tooltip .item-tip-head{display:flex;gap:11px;align-items:center;padding:11px 12px 10px;
  background:linear-gradient(90deg,rgba(149,113,52,.2),rgba(84,68,40,.08));
  border-bottom:1px solid #65502d}
#tooltip .item-tip-icon{box-sizing:border-box;width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;background:#15140f;border:1px solid #796239;
  box-shadow:inset 0 0 0 2px #272219,0 2px 6px rgba(0,0,0,.65)}
#tooltip .item-tip-icon canvas{display:block;width:48px;height:48px}
#tooltip .item-tip-identity{min-width:0;flex:1}
#tooltip .item-tip-kind{display:block;color:#aa9978;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
#tooltip .item-tip-head h4{margin:2px 0 5px;color:#f6e8ca;font-size:14px;font-weight:700;
  line-height:1.18;letter-spacing:.015em;overflow-wrap:anywhere;text-shadow:0 1px 2px #000}
#tooltip .item-tip-enchant{color:#8ed8ff}
#tooltip .item-tip-grade{display:inline-block;padding:2px 6px;border:1px solid;border-radius:2px;
  background:rgba(0,0,0,.4);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
#tooltip .item-tip-body{padding:0 12px 10px}
#tooltip .item-tip-requirement{display:flex;align-items:baseline;gap:7px;padding:7px 0;
  border-bottom:1px solid rgba(182,151,95,.17)}
#tooltip .item-tip-requirement span{color:#b2a487}
#tooltip .item-tip-requirement strong{color:#f4e6c5;font-size:12px}
#tooltip .item-tip-requirement em{margin-left:auto;color:#8cb795;font-size:10px;font-style:normal}
#tooltip .item-tip-requirement.locked em{color:#e38d78}
#tooltip .item-tip-section{padding:9px 0;border-bottom:1px solid rgba(182,151,95,.2)}
#tooltip .item-tip-label{color:#c6a363;font-size:9.5px;font-weight:700;letter-spacing:.16em}
#tooltip .item-tip-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}
#tooltip .item-tip-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 5px;
  min-width:0;padding:6px 7px;background:rgba(0,0,0,.24);border:1px solid rgba(176,146,86,.16)}
#tooltip .item-tip-stat span{min-width:0;flex:1;color:#c7b99c;font-size:10px}
#tooltip .item-tip-stat strong{color:#f2dfa7;font-size:12px;white-space:nowrap}
#tooltip .item-tip-stat small{flex-basis:100%;color:#96866c;font-size:9px;text-align:right}
#tooltip .item-tip-detail{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid rgba(182,151,95,.12)}
#tooltip .item-tip-detail span{color:#a99c80}
#tooltip .item-tip-detail strong{color:#e7d9b9;font-weight:600;text-align:right}
#tooltip .item-tip-note{margin-top:8px;padding:6px 8px;color:#abc3d5;
  background:rgba(55,72,78,.2);border-left:2px solid #718fa1}
#tooltip .item-tip-note.locked{color:#e4a088;background:rgba(113,54,38,.2);border-color:#a9634d}
#tooltip .item-tip-set-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
#tooltip .item-tip-set-head strong{color:#dfc887;font-size:10px}
#tooltip .item-tip-pieces{display:grid;gap:3px;margin:7px 0;color:#978a73;font-size:10px}
#tooltip .item-tip-pieces span{overflow-wrap:anywhere}
#tooltip .item-tip-pieces .worn{color:#9dcca2}
#tooltip .item-tip-bonus{display:grid;gap:3px;margin-top:7px;padding:7px 8px;
  background:rgba(77,89,105,.16);border:1px solid rgba(129,156,191,.25);color:#afc1d8;font-size:10.5px}
#tooltip .item-tip-bonus b{color:#d0c394;font-size:10px}
#tooltip .item-tip-bonus.active{background:rgba(72,105,71,.22);border-color:rgba(127,179,117,.44);color:#b9d8ac}
#tooltip .item-tip-description{margin-top:8px;color:#acc5df;font-size:10.5px;font-style:italic}
#tooltip .item-tip-footer{display:flex;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;
  border-top:1px solid #665335;color:#a7997d;font-size:10px}
#tooltip .item-tip-footer strong{color:#e9d6a2;font-weight:600}

/* ---------- BANCO / GRAVAÇÃO ---------- */
#dbTag{font-size:10px;letter-spacing:.04em;color:#8aa87a;
  text-shadow:0 1px 2px #000;white-space:nowrap;max-width:min(46vw,280px);
  overflow:hidden;text-overflow:ellipsis}
#dbTag.off{color:#a08a55}
#dbTag.bad{color:#e07070;font-weight:700}
#onlineTag{font-size:10px;letter-spacing:.04em;color:#7aa8c8;
  text-shadow:0 1px 2px #000;white-space:nowrap}
#saveTag{font-size:10px;letter-spacing:.08em;color:#7d7156;opacity:0;
  transition:opacity .35s;text-shadow:0 1px 2px #000}
#saveTag.on{opacity:1}
#saveTag.local{color:#a08a55}
#saveTag.fail{color:#e07070;opacity:1}

/* ---------- AVISO MYSQL ---------- */
#syncBanner{position:absolute;inset:0;z-index:85;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,4,4,.82);padding:24px 18px;text-align:center}
#syncBanner b{display:block;color:#ffc8b8;letter-spacing:.14em;font-size:14px;font-weight:700}
#syncBanner span{display:block;color:#f0d8c4;font-size:12px;margin:10px auto 0;max-width:480px;line-height:1.5}
#syncBanner button{margin-top:16px;background:linear-gradient(180deg,#3a3120,#191510);
  border:1px solid #c07050;color:#f4e6bd;padding:8px 18px;font-size:12px;border-radius:3px;letter-spacing:.06em}
#syncBanner button:hover:not(:disabled){border-color:#f0a070;color:#fff6e0}
#syncBanner button:disabled{opacity:.4}

/* ---------- AVISO DE NOVA VERSÃO ---------- */
#updateBanner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:88;
  display:flex;align-items:center;gap:14px;background:rgba(20,17,10,.96);
  border:1px solid #b28a3c;box-shadow:0 3px 16px rgba(0,0,0,.55);
  color:#ead9a8;padding:9px 12px 9px 16px;font-size:12px;border-radius:3px;
  white-space:nowrap;max-width:calc(100vw - 24px)}
#updateBanner b{color:#ffd873;letter-spacing:.04em}
#updateBanner button{background:linear-gradient(180deg,#6b5227,#352514);border:1px solid #d6a94d;
  color:#fff1bd;padding:6px 12px;font-size:11px;border-radius:3px;cursor:pointer}
#updateBanner button:hover{border-color:#ffe08a;color:#fff8dc}
@media (max-width:600px){#updateBanner{white-space:normal;gap:8px;left:8px;right:8px;transform:none}}

/* ---------- TOAST ---------- */
#toast{position:absolute;top:150px;left:50%;transform:translateX(-50%);z-index:86;
  display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.tmsg{background:rgba(10,9,7,.88);border:1px solid #6a5730;padding:5px 16px;font-size:12px;
  color:#f0d795;border-radius:3px;text-shadow:0 1px 2px #000;animation:tin .3s ease-out}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- DEATH ---------- */
#deathScreen{position:absolute;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;background:radial-gradient(ellipse at 50% 50%,rgba(60,0,0,.35),rgba(0,0,0,.86))}
.dead-inner{text-align:center}
.dead-inner h2{font-size:32px;letter-spacing:.28em;color:#c02020;font-weight:400;
  text-shadow:0 0 28px rgba(192,32,32,.6),0 3px 6px #000}
#deathPenalty{margin:12px 0 22px;color:#a09070;font-size:12px}
.dead-btns{display:flex;gap:10px;justify-content:center}
.dead-btns button{background:linear-gradient(180deg,#3a3120,#191510);border:1px solid #6a5730;
  color:#d8c9a2;padding:9px 22px;font-size:12px;border-radius:3px;letter-spacing:.06em}
.dead-btns button:hover:not(:disabled){border-color:#a08040;color:#f4e6bd}
.dead-btns button:disabled{opacity:.35}

/* ---------- LEVEL UP ---------- */
#levelUpFx{position:absolute;inset:0;z-index:55;pointer-events:none;display:flex;
  align-items:center;justify-content:center}
#levelUpFx span{font-size:44px;letter-spacing:.2em;font-weight:bold;
  background:linear-gradient(180deg,#fff6d0,#f0c040 45%,#a06a10);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(240,192,64,.85));
  animation:lvup 2.2s ease-out forwards}
@keyframes lvup{
  0%{opacity:0;transform:scale(.4) translateY(30px)}
  18%{opacity:1;transform:scale(1.14) translateY(0)}
  30%{transform:scale(1)}
  75%{opacity:1;transform:scale(1) translateY(-14px)}
  100%{opacity:0;transform:scale(1.05) translateY(-46px)}}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  #hotbarAnchor{bottom:8px}
  #hotbarWrap{padding:4px 6px;grid-template-columns:repeat(10,38px);grid-template-rows:32px 38px}
  .shotBtn{width:38px;height:32px}
  .slot{width:38px;height:38px}
  .potSlot{width:38px;height:32px}
  #chatBox{width:260px;bottom:auto;top:200px;left:6px}
  #systemChatLog{height:46px}
  #chatLog{height:70px}
  #statusWindow{width:270px;transform:scale(.92);transform-origin:top left}
  #minimapBox{width:170px}
  #minimap{width:160px;height:110px}
  #buffBar{width:240px;top:78px}
  #toggleBuffBar{width:240px;top:108px}
  #targetWindow{left:250px;top:78px;transform:scale(.92);transform-origin:top left}
  .huntCols{grid-template-columns:1fr}
  .farmTabs .tab{font-size:9px;padding:9px 2px}
  .worldMapWindow{left:8px!important;top:34px!important;width:calc(100vw - 16px)!important}
  .worldMapGrid{grid-template-columns:1fr}.worldMapSide{border-left:0;border-top:1px solid #40351f}
  .worldMapDetails{min-height:0}.worldMapZoneList{max-height:180px}
}
@media (max-width:600px){
  #joystick{width:110px;height:110px;left:10px;bottom:96px}
  #joyKnob{left:33px;top:33px;width:44px;height:44px}
  .act{width:48px;height:48px;font-size:18px}.act.big{width:60px;height:60px;font-size:23px}
  #actionCluster{width:140px;height:150px;right:10px;bottom:92px}
  #chatBox{display:none}
}
.hideMobile{}
body.desktop #joystick,body.desktop #actionCluster{display:none}

/* ---------- MOBILE HUD ----------
   O mapa continua ocupando toda a viewport; painéis passam a usar a área
   segura do aparelho e a barra de ações não bloqueia o joystick. */
@media (max-width:600px), (pointer:coarse) and (max-width:900px){
  body{overflow:hidden;touch-action:none}
  #game{inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  #statusWindow{left:6px;top:6px;width:min(206px,calc(100vw - 12px));transform:none;min-height:52px}
  #statusWindow .portrait{width:42px;height:42px}.bars{min-width:0}.nameRow{font-size:10px}
  #topRight{right:6px;top:6px}.icoBtn{width:32px;height:32px;font-size:15px}
  #topCenter{left:auto;right:184px;top:6px;transform:none;align-items:flex-start;scale:.86;transform-origin:top right}
  #sysButtons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;max-width:174px}
  #minimapBox{margin-top:5px;width:142px;padding:4px}.mm-title{font-size:9px}
  #minimap{width:134px;height:90px}
  #targetWindow{left:50%;top:116px;width:min(300px,calc(100vw - 20px));transform:translateX(-50%);z-index:30}
  #buffBar,#toggleBuffBar{left:6px;top:178px;width:calc(100vw - 12px);max-height:34px;overflow:hidden}
  #summonBar{left:6px;top:218px;width:min(250px,calc(100vw - 12px))}
  #questTracker{right:6px;top:390px;width:min(210px,calc(100vw - 12px));font-size:10px}
  #chatBox{display:block;left:6px;bottom:calc(94px + env(safe-area-inset-bottom));top:auto;width:min(270px,calc(100vw - 12px));font-size:10px;z-index:28}
  #systemChatLog{height:34px;max-height:22vh}.chatSectionTitle{font-size:9px}
  #chatLog{height:46px;max-height:24vh}.ct{padding:4px 5px;font-size:9px}
  #chatInput{max-width:100%;font-size:12px;min-height:30px}
  #hotbarAnchor{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));width:calc(100vw - 12px);overflow:visible}
  #hotbarWrap{width:100%;max-width:none;overflow-x:auto;display:flex;gap:3px;padding:4px;-webkit-overflow-scrolling:touch}
  #hotbarWrap>*{flex:0 0 auto}.slot{width:40px;height:40px}.shotBtn{width:40px;height:34px}.potSlot{width:40px;height:34px}
  #huntDock{position:absolute;right:0;bottom:0;transform:translateY(-2px);width:55px;padding:3px}
  .huntDockHead{position:absolute;right:1px;top:-24px;display:block;border:0;padding:0}
  .huntDockHead b,.huntDockInfo,.huntDockRotation{display:none}
  .huntDockMain{gap:0}
  .huntDockBtn{width:47px;height:47px}
  .farmWindow{left:6px!important;top:7%!important;width:calc(100vw - 12px)!important}
  .farmPane{padding:9px}
  #joystick{left:10px;bottom:calc(102px + env(safe-area-inset-bottom));width:104px;height:104px}
  #actionCluster{right:8px;bottom:calc(102px + env(safe-area-inset-bottom));width:132px;height:142px}
  .act{width:44px;height:44px}.act.big{width:56px;height:56px}
  .window{left:6px!important;right:6px!important;top:8%!important;width:auto!important;max-width:none!important;max-height:84vh;overflow:auto}
  .modal,.panel{max-width:calc(100vw - 12px)!important}
}
@media (max-width:380px){
  #sysButtons{max-width:140px}.icoBtn{width:28px;height:28px;font-size:13px}
  #minimapBox{width:118px}#minimap{width:110px;height:74px}
  #chatBox{width:calc(100vw - 12px)}#chatLog{height:38px}
  #joystick{transform:scale(.88);transform-origin:bottom left}.act{width:40px;height:40px}.act.big{width:50px;height:50px}
}

/* campos de texto precisam vencer o user-select:none do body */
input, textarea, select{
  user-select:text;-webkit-user-select:text;touch-action:manipulation;
  font-family:inherit}

/* ---------- LOGIN ---------- */
#loginFx{position:absolute;inset:0;z-index:0;pointer-events:none}
#boot.login-mode{
  background:#05040a;
  align-items:center;justify-content:center}
#boot.login-mode .login-panel{
  position:relative;z-index:2;
  max-width:460px;width:min(94vw,460px);
  padding:28px 26px 22px;
  background:linear-gradient(180deg,rgba(22,18,12,.88),rgba(8,7,10,.92));
  border:1px solid #5a4a28;
  box-shadow:
    0 0 0 1px rgba(200,162,74,.18),
    0 18px 50px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,220,150,.12);
  border-radius:4px}
#boot.login-mode h1{font-size:clamp(22px,4vw,34px);letter-spacing:.16em}
.login-lead{margin:14px 0 18px;color:#9a8c6c;font-size:12px;letter-spacing:.03em;line-height:1.45}
.login-tabs{display:flex;gap:0;margin-bottom:16px;border:1px solid #4a3d24;border-radius:3px;overflow:hidden}
.login-tab{
  flex:1;background:#14110c;border:0;border-right:1px solid #4a3d24;
  color:#8b8168;padding:9px 8px;letter-spacing:.12em;font-size:11px;text-transform:uppercase}
.login-tab:last-child{border-right:0}
.login-tab.on{background:linear-gradient(180deg,#3a3120,#1d1810);color:#f0d795;box-shadow:inset 0 0 0 1px rgba(200,162,74,.35)}
.login-tab:hover{color:#f4e6bd}
.login-form{display:flex;flex-direction:column;gap:10px;text-align:left}
.login-field{display:flex;flex-direction:column;gap:4px;color:#a08a55;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.login-input{
  background:#0d0c09;border:1px solid #5a4a2c;color:#e8dcb8;
  padding:8px 10px;font-size:13px;border-radius:2px;outline:none;letter-spacing:.02em}
.login-input:focus{border-color:#c8a24a;box-shadow:0 0 0 1px rgba(200,162,74,.25)}
.login-input::placeholder{color:#5a5040;letter-spacing:0;text-transform:none;font-size:11px}
.login-check{
  display:flex;align-items:flex-start;gap:8px;margin-top:4px;
  color:#9a8c6c;font-size:12px;letter-spacing:0;text-transform:none;cursor:pointer;line-height:1.35}
.login-check input{margin-top:2px;accent-color:#c8a24a;width:14px;height:14px;flex-shrink:0}
.login-submit{width:100%;margin-top:8px;padding:11px 12px;letter-spacing:.14em}
.login-err{min-height:18px;margin-top:10px;color:#e08080;font-size:12px;line-height:1.4}
.login-hint{margin-top:12px;color:#5a5040;font-size:10px;letter-spacing:.04em}

/* ---------- SELEÇÃO DE PERSONAGEM ---------- */
.char-account{margin-top:12px;color:#a08a55;font-size:11px;letter-spacing:.08em}
.char-status{margin-top:8px;font-size:10.5px;letter-spacing:.06em}
.char-select{max-width:none!important;height:min(100vh,900px);padding:28px 34px 20px!important;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 4px #000}
.character-select-mode .char-select{width:min(100vw,1420px)!important}
.char-list{
  position:relative;z-index:1;width:100%;margin:auto 0 10px;padding:0 30px 30px;min-height:220px;
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,1.4vw,22px);
  text-align:left;overflow-x:auto;overflow-y:hidden}
.char-empty{position:relative;z-index:1;padding:18px 12px;color:#8b8168;font-size:12px;text-align:center;border:1px dashed #3d3423;border-radius:3px}
.char-card{--char-x:0px;--char-y:0px;--char-scale:1;position:relative;z-index:1;display:flex;flex:0 0 130px;width:130px;height:172px;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0;margin:0;padding:0;background:transparent!important;border:0!important;color:var(--txt);transform:translate(var(--char-x),var(--char-y)) scale(var(--char-scale));transition:transform .18s ease,filter .18s ease}
.char-card:hover,.char-card.last,.char-card.selected{transform:translate(var(--char-x),calc(var(--char-y) - 9px)) scale(var(--char-scale));filter:drop-shadow(0 0 10px rgba(232,195,105,.36))}
/* A escala é uniforme: os personagens são desenhados no tamanho do mapa. */
.char-card:nth-child(1){--char-x:-8px;--char-y:-5px}
.char-card:nth-child(2){--char-x:-3px;--char-y:-2px}
.char-card:nth-child(4){--char-x:3px;--char-y:-2px}
.char-card:nth-child(5){--char-x:8px;--char-y:-5px}
.char-card::before{content:"";position:absolute;left:50%;bottom:48px;width:72px;height:9px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.68),rgba(0,0,0,0) 70%);pointer-events:none}
.char-card.last::after,.char-card.selected::after{content:"";position:absolute;left:50%;bottom:46px;width:84px;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#f0d795,#8b6a29,transparent);box-shadow:0 0 7px rgba(240,215,149,.65)}
.char-port{position:relative;z-index:1;width:128px;height:124px;background:transparent;flex-shrink:0;border:0;border-radius:0;filter:drop-shadow(0 3px 1px rgba(0,0,0,.75));transition:filter .18s ease}
.char-card:hover .char-port,.char-card.last .char-port{filter:drop-shadow(0 0 8px rgba(235,206,130,.35)) drop-shadow(0 5px 2px rgba(0,0,0,.8))}
.char-card.pending{opacity:.68;padding-top:0}
.char-card.pending .char-name,.char-card.pending small,.char-card.pending .char-lv{color:#8a8a8a}
.char-timer{
  position:absolute;left:0;right:0;top:2px;width:auto;z-index:3;
  text-align:center;font-size:9px;letter-spacing:.04em;color:#f0e0a0;
  text-shadow:0 0 8px #000,0 1px 2px #000;pointer-events:none;font-variant-numeric:tabular-nums}
.char-card.pending .char-timer{top:4px}
.char-info{position:relative;z-index:2;display:block;width:100%;min-height:48px;padding:6px 27px 6px 9px;text-align:left;background:linear-gradient(180deg,rgba(10,17,10,.58),rgba(2,6,3,.7));border:1px solid rgba(200,174,101,.28);border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.65)}
.char-name{color:#f0dfad;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-info small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a99b7b;font-size:9px;line-height:1.5}
.char-lv{position:absolute;z-index:3;right:7px;bottom:18px;color:#d4b0f4;font-size:10px;flex-shrink:0;text-shadow:0 1px 2px #000}
.char-x{position:absolute;z-index:4;right:0;top:0;color:#8b7857;font-size:14px;padding:5px 7px;cursor:pointer;line-height:1}
.char-x:hover{color:#e0b070}
.char-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

@media (max-width:700px){
  .char-select{padding:22px 10px 14px!important}.char-list{justify-content:flex-start;min-height:210px;padding-left:12px;padding-right:12px;gap:0}
  .char-card{flex-basis:116px;width:116px;height:164px}
  .char-port{width:112px;height:109px}
  .char-info{min-height:51px;padding-left:7px}
}

#combatTag{
  margin-top:4px;font-size:10px;letter-spacing:.04em;color:#e8b060;
  text-shadow:0 1px 2px #000}
.mailIn{
  display:block;width:100%;margin:4px 0;padding:6px 8px;background:#12100c;
  border:1px solid #3d3423;color:#d8c9a2;font:inherit;border-radius:2px}
textarea.mailIn{min-height:64px;resize:vertical}
.tabs .tab,.tabs button.tab{
  background:transparent;border:0;color:#8b8168;padding:4px 8px;font-size:11px}
.tabs .tab.on{color:#e2d6b4;border-bottom:1px solid #c8a24a}

/* ---------- CORREIO ---------- */
.mailDlg{width:min(720px,96vw)!important}
.mailDlg .nb{max-height:78vh}
.mailIntro{color:#8b8168;font-size:11.5px;margin-bottom:8px;line-height:1.4}
.mailTabs{margin-bottom:8px;border-bottom:1px solid #2a2418;display:flex;gap:4px;flex-wrap:wrap}
.mailPane{min-height:220px}
.mailLoading,.mailEmpty,.mailErr{padding:14px 8px;color:#6a6250;font-size:12px}
.mailErr{color:#e08080}
.mailEmpty.sm{padding:10px;font-size:11px}
.mailCard{
  border:1px solid #3a3020;background:linear-gradient(180deg,#1a1710,#100e0a);
  padding:10px;margin-bottom:8px}
.mailCard.compact{padding:8px 10px}
.mailCardHead{margin-bottom:6px}
.mailCardTitle{color:#e8d9ae;font-size:13px;font-weight:bold}
.mailCardMeta{color:#7d7156;font-size:10.5px;margin-top:2px}
.mailCardBody{
  color:#b8a888;font-size:12px;line-height:1.45;margin:6px 0 8px;
  white-space:pre-wrap;max-height:90px;overflow:auto}
.mailAnexos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.mailChip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;
  background:#0c0b08;border:1px solid #3a3020;font-size:11px;color:#d8c9a2}
.mailChip canvas{width:22px;height:22px;border:1px solid #43371f}
.mailChip.gold{color:#f0c040;padding:4px 8px;border-color:#6a5220}

.mailCompose{display:flex;flex-direction:column;gap:10px}
.mailFields{display:grid;gap:2px}
.mailSplit{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  min-height:220px}
@media (max-width:640px){.mailSplit{grid-template-columns:1fr}}
.mailCol{
  border:1px solid #3a3020;background:#0c0b08;display:flex;flex-direction:column;min-height:0}
.mailColTitle{
  padding:7px 10px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:#c8a24a;border-bottom:1px solid #2a2418;background:#16130e}
.mailList{flex:1;overflow:auto;max-height:260px;padding:4px}
.mailItemRow{
  display:flex;align-items:center;gap:8px;padding:6px;margin:3px;
  border:1px solid #2a2418;background:#14110c}
.mailItemRow.attached{border-color:#4a3a20;background:#1a1610}
.mailItemRow .n{flex:1;min-width:0;font-size:11.5px;color:#d8c9a2}
.mailItemRow .n small{display:block;color:#7d7156;font-size:9.5px}
.mailItemRow canvas{width:28px;height:28px;flex:0 0 28px;border:1px solid #43371f}
.mailQtyCtrl{display:flex;align-items:center;gap:4px;flex-shrink:0}
.mailQtyCtrl span{min-width:18px;text-align:center;color:#f0d795;font-size:12px}
.mailQtyCtrl .btn{padding:2px 7px;font-size:11px}
.mailQtyBar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;
  border-bottom:1px solid #2a2418;background:#1a1610}
.mailQtyLbl{flex:1 1 120px;font-size:11px;color:#cbbd9a}
.mailQtyIn{width:72px;margin:0;flex:0 0 72px}
.mailSendBtn{margin-top:4px;padding:10px}

.mailBadge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:linear-gradient(180deg,#e05050,#8e0d0d);
  border:1px solid #f0a0a0;color:#fff;font-size:9px;font-weight:bold;
  line-height:14px;text-align:center;pointer-events:none;
  box-shadow:0 1px 4px #000}
.icoBtn.hasMail{color:#f0d795;border-color:#c8a24a}
.icoBtn.mailPulse{animation:mailPulse 2.2s ease-out}
@keyframes mailPulse{
  0%,100%{box-shadow:0 0 0 0 transparent}
  20%,60%{box-shadow:0 0 0 3px rgba(200,162,74,.55),0 0 14px rgba(224,80,80,.4)}
}

.mailPigeonFx{
  position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.mailPigeon{
  position:absolute;left:-80px;top:38%;
  width:92px;height:92px;
  background-repeat:no-repeat;background-size:800% 100%;
  image-rendering:auto;
  animation:mailFly 2.5s cubic-bezier(.2,.7,.3,1) forwards}
.mailPigeonSend{background-image:url('../sprites/ui-mail-pigeon-send-v1.png');animation:mailTakeoff 5.5s cubic-bezier(.2,.7,.3,1) forwards,mailSprite 1.7s steps(8) infinite}
.mailPigeonReceive{background-image:url('../sprites/ui-mail-pigeon-receive-v1.png');animation:mailFly 5.5s cubic-bezier(.2,.7,.3,1) forwards,mailSprite 1.7s steps(8) infinite}
.mailTrail{
  position:absolute;left:-18px;top:48px;width:24px;height:2px;
  background:linear-gradient(90deg,transparent,#c8a24a88);opacity:.7}
.mailPigeonLbl{
  position:absolute;left:50%;top:calc(38% + 48px);transform:translateX(-50%);
  color:#f0d795;font-size:13px;text-shadow:0 1px 4px #000,0 0 12px #000;
  opacity:0;animation:mailLbl 5.5s ease forwards}
@keyframes mailFly{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  8%{opacity:1}
  50%{transform:translate(55vw,-28px) scale(1)}
  100%{transform:translate(110vw,-60px) scale(.85);opacity:0}
}
@keyframes mailTakeoff{
  0%{left:calc(50% - 46px);top:72%;transform:translate(0,28px) scale(.68);opacity:0}
  10%{opacity:1}
  58%{transform:translate(20px,-180px) scale(.95)}
  100%{transform:translate(100px,-58vh) scale(.6);opacity:0}
}
@keyframes mailSprite{from{background-position:0 0}to{background-position:100% 0}}
@keyframes mailPackageDrop{
  0%,54%{left:calc(50% + 17vw);top:39%;opacity:0;transform:scale(.7) rotate(-8deg)}
  60%{opacity:1}
  100%{left:50%;top:68%;opacity:0;transform:scale(1) rotate(10deg)}
}
 .mailPackageDrop{
  position:absolute;left:calc(50% + 17vw);top:39%;width:25px;height:19px;
  background:#d6b36a;border:2px solid #6b5220;border-radius:3px;
  box-shadow:inset 0 0 0 2px #8a6b32,0 3px 8px #0008;
  animation:mailPackageDrop 5.3s ease-in forwards}
 .mailPackageDrop::after{content:'';position:absolute;left:2px;right:2px;top:7px;border-top:2px solid #8a6b32;transform:rotate(18deg)}
.mailReceiveFx .mailPigeonLbl{top:calc(38% + 58px)}
@keyframes mailBob{from{transform:translateY(0)}to{transform:translateY(3px)}}
@keyframes mailLbl{
  0%,15%{opacity:0} 30%,70%{opacity:1} 100%{opacity:0}
}

/* ---------- NOVIDADES DO SERVIDOR ---------- */
.server-changelog-layer{
  position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px;
  background:rgba(2,2,4,.78);backdrop-filter:blur(3px)}
.server-changelog-panel{
  position:relative;width:min(640px,96vw);max-height:min(78vh,720px);overflow:hidden;
  padding:28px 28px 20px;color:#d8c9a2;border:1px solid #725b2c;border-radius:4px;
  background:linear-gradient(160deg,#242015 0%,#12100c 58%,#090807 100%);
  box-shadow:0 0 0 1px rgba(224,190,100,.18),0 24px 80px rgba(0,0,0,.75),inset 0 1px rgba(255,235,175,.12)}
.server-changelog-kicker{color:#c8a24a;font-size:10px;letter-spacing:.15em}
.server-changelog-panel h2{margin:8px 30px 5px 0;color:#f0d795;font-size:25px;letter-spacing:.04em}
.server-changelog-lead{margin:0 0 16px;color:#a89a79;font-size:12px;line-height:1.45}
.server-changelog-x{position:absolute;right:14px;top:11px;border:0;background:transparent;color:#a08a55;font-size:26px;line-height:1;cursor:pointer}
.server-changelog-x:hover{color:#f0d795}
.server-changelog-list{max-height:min(47vh,450px);overflow:auto;padding-right:7px}
.server-changelog-item{padding:12px 13px;margin:0 0 9px;border:1px solid #3c3220;background:rgba(5,5,4,.45)}
.server-changelog-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#74694f;font-size:10px;letter-spacing:.04em}
.server-changelog-type{padding:2px 6px;border:1px solid #4c432d;color:#bca265;font-size:9px;letter-spacing:.1em}
.server-changelog-type.novo{color:#83c6df;border-color:#39677a}.server-changelog-type.melhoria{color:#91c67c;border-color:#466c3a}
.server-changelog-type.ajuste{color:#e2bc68;border-color:#735c2c}.server-changelog-type.correcao{color:#de8980;border-color:#743d38}
.server-changelog-item h3{margin:7px 0 3px;color:#ead9a8;font-size:14px}.server-changelog-item p{margin:0;line-height:1.4;font-size:11.5px}
.server-changelog-summary{color:#d2c19a}.server-changelog-description{margin-top:5px!important;color:#92866d}
.server-changelog-close{display:block;width:100%;margin-top:14px;padding:10px}
.report-form{display:grid;gap:7px}.report-form input,.report-form select,.report-form textarea{width:100%;background:#0a0906;border:1px solid #55452a;color:#d8c99e;padding:9px;border-radius:2px;resize:vertical}.report-form textarea{min-height:120px;line-height:1.4}.report-label{font-size:11px;color:#c8a24a;margin-top:4px}.report-status{font-size:11px;color:#95896e;min-height:30px;line-height:1.35}.report-status.error{color:#e08080}.report-form .btn:disabled{opacity:.6;cursor:wait}
.partyMeta{padding:4px 0 8px;color:#d8c99e;font-size:11px;border-bottom:1px solid #3b301f}.partyList{display:grid;gap:4px;margin:8px 0}.partyMember{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;background:rgba(12,10,7,.72);border:1px solid #332a1b;color:#cdbd94;font-size:11px}.partyMember small{color:#8d7d5e}.partyTarget{margin:8px 0;padding:8px;border:1px dashed #5b4726;color:#bca66f;font-size:11px}.partyInvite{margin-bottom:10px;padding:9px;border:1px solid #96743a;background:rgba(91,67,25,.24);color:#e6d29a;font-size:11px}.partyInvite .btnrow{margin-top:8px}
.partyInviteLayer{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.18)}.partyInviteDialog{pointer-events:auto;width:min(330px,calc(100vw - 28px));padding:18px 20px;border:1px solid #84642e;border-radius:4px;background:linear-gradient(160deg,#2b2417,#100e09);box-shadow:0 12px 45px #000b,inset 0 1px #fff2b31a;color:#d8c99e;text-align:center}.partyInviteDialog h3{margin:0 0 9px;color:#f0d795;font:600 15px Georgia,serif;letter-spacing:.08em}.partyInviteDialog p{margin:0;color:#b6a681;font-size:11px;line-height:1.45}.partyInviteCountdown{margin:12px 0 4px;color:#e6b84f;font-size:12px;font-weight:600}.partyInviteDialog .btnrow{justify-content:center;margin-top:12px}
.partyInviteName{width:100%;box-sizing:border-box;margin:6px 0;padding:8px 9px;border:1px solid #55452a;background:#0a0906;color:#e4d5ae;font:11px Georgia,serif}.partyInviteName::placeholder{color:#74684e}.partyInviteName:focus{outline:none;border-color:#9a7739}
.trade-panel{display:grid;gap:8px}.trade-panel select,.trade-panel input{min-width:0;background:#0a0906;border:1px solid #55452a;color:#d8c99e;padding:8px;border-radius:2px}.trade-panel .srow input{flex:1;width:0}.trade-panel .srow .btn{white-space:nowrap}.trade-panel .field-help{font-size:11px;color:#95896e;line-height:1.35;padding:3px 0}
.trade-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.trade-column{min-width:0}.trade-available-grid{grid-template-columns:repeat(auto-fill,48px);gap:5px;max-height:150px;overflow:auto}.trade-available-item{cursor:grab}.trade-available-item:active{cursor:grabbing}.trade-drop-zone{min-height:110px;border:1px dashed #725b2c;background:rgba(8,7,5,.55);display:grid;place-items:center;text-align:center;padding:12px;color:#95896e;font-size:11px}.trade-drop-zone.drag-over{border-color:#f0d795;background:rgba(120,90,30,.2);color:#f0d795}.trade-modal-panel{width:min(390px,92vw);display:grid;gap:8px}.trade-modal-panel input{width:100%;box-sizing:border-box;background:#0a0906;border:1px solid #55452a;color:#d8c99e;padding:9px}.trade-modal-panel label{font-size:11px;color:#c8a24a}
.marketWindow{overflow:visible}.marketWindow .trade-sell-box{position:absolute;left:calc(100% + 10px);top:42px;width:230px;max-height:min(70vh,520px);overflow:auto;padding:10px;border:1px solid #725b2c;border-radius:3px;background:linear-gradient(160deg,#242015,#100e0a);box-shadow:0 10px 30px rgba(0,0,0,.55);z-index:5}.marketWindow .trade-columns{display:block}.marketWindow .trade-column+ .trade-column{margin-top:12px}.marketWindow .trade-drop-zone{min-height:70px}.marketWindow .trade-sell-box[hidden]{display:none}
@media (max-width:520px){.server-changelog-panel{padding:23px 17px 16px}.server-changelog-panel h2{font-size:21px}.server-changelog-layer{padding:9px}}