:root{
  --gold:#e0b862;--gold-d:#8a6a2c;--gold-l:#ffe2a0;--ink:#f1e8d6;--muted:#b6a98e;
  --panel:linear-gradient(180deg,rgba(30,22,15,.9),rgba(12,9,6,.88));--line:rgba(224,184,98,.42);
  --hp:#d1443a;--mp:#3a7ce0;--green:#86d870;--red:#ff6a5c;
  --r0:#e8e8e8;--r1:#6fdc5a;--r2:#5aa8ff;--r3:#c77dff;--r4:#ffa42e;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#100b08;color:var(--ink);font:14px/1.35 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.45) 100%)}
button{font:inherit;color:inherit;cursor:pointer}
kbd{font:600 10px Inter,sans-serif;padding:1px 4px;border:1px solid var(--line);border-radius:3px;color:var(--muted);margin-left:5px}
.hidden{display:none!important}
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,230,180,.08)}
.ph{font:800 12px Cinzel,serif;letter-spacing:.09em;color:var(--gold);text-transform:uppercase}
.btn{background:linear-gradient(#4a3520,#24190f);border:1px solid var(--gold-d);border-radius:7px;padding:7px 12px;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,235,190,.16),0 2px 4px rgba(0,0,0,.4);transition:border-color .12s,filter .12s}
.btn:hover:not(:disabled){border-color:var(--gold);filter:brightness(1.18)}
.btn.gold{background:linear-gradient(#ecc970,#9c7630);color:#1a1108;border-color:#f6dc92;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 12px rgba(224,184,98,.35)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:default;filter:grayscale(.4)}
.r0{color:var(--r0)}.r1{color:var(--r1)}.r2{color:var(--r2)}.r3{color:var(--r3)}.r4{color:var(--r4);text-shadow:0 0 6px rgba(255,164,46,.45)}

/* rótulos no mundo */
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;white-space:nowrap;text-align:center;font-weight:700;font-size:12px;text-shadow:0 1px 2px #000,0 0 3px #000;will-change:transform}
.tag .hb{width:58px;height:5px;margin:2px auto 0;background:#2a0d0a;border:1px solid #000;border-radius:3px;overflow:hidden}
.tag .hb i{display:block;height:100%;background:linear-gradient(#f0675a,#a3261b)}
.tag.sel{color:#ffe08a}.tag.npc{color:#ffd86b}
.tag .mark{font:800 25px Cinzel,serif;color:#ffd23f;display:block;line-height:1;text-shadow:0 0 8px rgba(255,210,63,.8),0 2px 3px #000}
.tag .mark.q{color:#7fe06a;text-shadow:0 0 8px rgba(127,224,106,.8),0 2px 3px #000}
.tag .elite{color:#ffd23f}
.c-gray{color:#a9a9a9}.c-white{color:#fff}.c-orange{color:#ffb347}.c-red{color:#ff5a4a}.c-boss{color:#ff3df0}
.fl{position:absolute;left:0;top:0;font:800 18px Inter,sans-serif;text-shadow:0 2px 3px #000;will-change:transform,opacity;white-space:nowrap}
.fl.hit{color:#fff}.fl.crit{color:#ffd23f;font-size:26px}.fl.hurt{color:var(--red)}.fl.heal{color:var(--green)}
.fl.shield{color:#9ad8ff}.fl.miss{color:#c8c8c8;font-size:15px;font-style:italic}.fl.dodge{color:#bfe6ff;font-size:17px;font-weight:700}.fl.xp{color:#c9a3ff;font-size:15px}.fl.loot{font-size:14px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#hud .panel,#hud button,#hud canvas{pointer-events:auto}
#pframe{position:absolute;left:12px;top:12px;width:290px;padding:10px 12px 10px 76px;min-height:84px}
.pport{position:absolute;left:10px;top:12px;width:56px;height:56px;border-radius:50%;border:2px solid var(--pc,#e0b862);background:radial-gradient(circle at 50% 28%,#3a2a1a,#0f0a06);box-shadow:0 0 12px color-mix(in srgb,var(--pc,#e0b862) 45%,transparent),inset 0 0 8px #000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pport svg{width:86%;height:86%}
.pname{font:800 15px Cinzel,serif;color:var(--gold);display:flex;justify-content:space-between;gap:6px}
.sub{color:var(--muted);font-size:12px;margin:1px 0 6px}
.bar{position:relative;height:14px;background:#140c08;border:1px solid #000;border-radius:4px;overflow:hidden;margin-top:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.85)}
.bar i{position:absolute;left:0;top:0;bottom:0;transition:width .15s}
.bar span{position:absolute;inset:0;text-align:center;font-size:10px;font-weight:700;line-height:13px;text-shadow:0 1px 1px #000;z-index:2}
.bar::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,0));pointer-events:none}
.bar.hp i{background:linear-gradient(#f0675a,#a3261b 55%,#7a160f)}
.bar.mp i{background:linear-gradient(#6aa4ff,#2656b8 55%,#183a82)}
.bar.sh i{background:linear-gradient(#bfe9ff,#5aa8d6)}
.goldrow{margin-top:6px;color:#ffd86b;font-weight:700;font-size:13px;display:flex;justify-content:space-between}
.goldrow small{color:var(--muted);font-weight:600}
.spchip{display:flex;gap:6px;margin:8px 0 0 -64px;align-items:center}
.spchip small{color:var(--muted);font-size:11px;margin-left:2px}
.spdot{position:relative;width:30px;height:30px;border-radius:50%;border:2px solid var(--sc,#6b5230);background:radial-gradient(circle,#241a10,#0b0704);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.spdot svg{width:88%;height:88%}
.spdot i{position:absolute;right:-6px;bottom:-6px;font:700 9px Inter,sans-serif;font-style:normal;background:#140d09;border:1px solid var(--sc,#6b5230);border-radius:8px;padding:0 3px;color:#fff}
.spdot.empty{border-style:dashed;opacity:.7}
#zoneTag{position:absolute;left:50%;top:30%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .8s}
#zoneTag.show{opacity:1}
#fpsW{position:absolute;left:14px;bottom:218px;font-size:11px;color:#e8dcc3;text-shadow:0 1px 2px #000;pointer-events:none}
.badge{display:inline-block;margin-left:6px;padding:0 6px;border-radius:9px;background:#2b1f12;border:1px solid var(--gold-d);font-size:10px;font-weight:700;color:var(--muted)}
#zoneTag b{display:block;font:800 26px Cinzel,serif;color:#fff2c8;text-shadow:0 2px 6px #000,0 0 12px rgba(0,0,0,.6);letter-spacing:.04em}
#zoneTag small{color:#e8dcc3;font-size:12px;text-shadow:0 1px 3px #000}
#eventBar{position:absolute;left:50%;top:58px;transform:translateX(-50%);padding:5px 14px;border-radius:20px;font-weight:700;font-size:13px;color:#ffd86b;white-space:nowrap}
#tframe{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:310px;padding:8px 12px;text-align:center}
#tName{font:800 14px Cinzel,serif}
#topbtns{position:absolute;right:206px;top:12px;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 560px)}
#topbtns .btn{padding:6px 9px;font-size:12.5px}
#bAuto.on{border-color:#86d870;color:#c8f8b8;box-shadow:0 0 12px rgba(127,208,106,.4)}
#mini{position:absolute;right:12px;top:12px;width:184px;padding:6px;text-align:center}
#miniZone{font:800 12px Cinzel,serif;color:var(--gold);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#miniC{display:block;width:172px;height:172px;border-radius:50%;border:2px solid var(--gold-d);background:#1b2414;cursor:pointer;box-shadow:inset 0 0 14px rgba(0,0,0,.7)}
#coords{font-size:11px;color:var(--muted);margin-top:3px;display:flex;justify-content:space-between;padding:0 4px}
#track{position:absolute;right:12px;top:240px;width:258px;padding:10px 12px;max-height:calc(100% - 480px);overflow:auto;scrollbar-width:thin}
.tq{margin-top:8px;padding-top:7px;border-top:1px solid rgba(224,184,98,.2)}
.tq:first-of-type{border-top:0;padding-top:0}
.tq .tt{font-weight:700;color:#ffe9b0;font-size:13px}.tq .tt.main{color:#ffd23f}
.tq .tt small{color:var(--muted);font-weight:600;font-size:10px;margin-left:4px;text-transform:uppercase;letter-spacing:.05em}
.tq .td{font-size:12px;color:var(--muted);margin-top:1px}.tq .tp{font-size:12px;margin-top:2px;color:var(--green);font-weight:700}
.tq .btn{margin-top:5px;width:100%}
#autoP{position:absolute;left:12px;top:120px;width:290px;padding:10px 12px;font-size:12px}
#autoP .row{display:flex;justify-content:space-between;gap:8px;margin-top:3px}
#autoP .row b{color:#fff;font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#autoP .row span{color:var(--muted)}
#chat{position:absolute;left:12px;bottom:42px;width:390px;height:170px;padding:6px 8px;display:flex;flex-direction:column}
#log{flex:1;overflow-y:auto;font-size:12px;scrollbar-width:thin}
#log .l{margin:1px 0;text-shadow:0 1px 1px #000}
.l.sys{color:#ffd86b}.l.xp{color:#9be58a}.l.loot{color:#ffcf6b}.l.bad{color:#ff8a7e}.l.info{color:#e8dcc3}.l.q{color:#c9a3ff}.l.ev{color:#ff9d6b}
#bottom{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.orb{position:relative;width:86px;height:86px;border-radius:50%;border:3px solid #7a5d33;overflow:hidden;background:#120a07;box-shadow:0 0 0 2px #000,0 0 0 4px rgba(224,184,98,.3),0 6px 18px rgba(0,0,0,.6);pointer-events:auto}
.orb i{position:absolute;left:0;right:0;bottom:0;transition:height .15s}
.orb.hp i{background:radial-gradient(circle at 40% 30%,#ff7a6a,#b0241a 60%,#5e0d08)}
.orb.mp i{background:radial-gradient(circle at 40% 30%,#7fb0ff,#2457c0 60%,#0f2a66)}
.orb::after{content:"";position:absolute;left:14%;top:8%;width:46%;height:28%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0))}
.orb span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-shadow:0 1px 2px #000;z-index:1}
.orb.hp.low{animation:lowhp 1s ease-in-out infinite}@keyframes lowhp{50%{filter:brightness(1.4) saturate(1.3)}}
#slots{display:flex;gap:6px;padding:7px;pointer-events:auto}
.slot{position:relative;width:54px;height:54px;border-radius:10px;border:1px solid #6b5230;background:radial-gradient(circle at 50% 22%,#3f2f1e,#140d08 82%);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;box-shadow:inset 0 0 10px rgba(0,0,0,.85),0 2px 5px rgba(0,0,0,.5);text-shadow:0 0 8px currentColor;transition:transform .1s,box-shadow .1s}
.slot:hover{transform:translateY(-2px);box-shadow:inset 0 0 10px rgba(0,0,0,.85),0 0 12px rgba(224,184,98,.55)}
.slot .k{position:absolute;left:4px;top:2px;font-size:10px;font-weight:700;color:var(--muted);text-shadow:none}
.slot .n{position:absolute;right:4px;bottom:2px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 1px #000}
.slot .cd{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.68)}
.slot .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;z-index:2}
.slot.locked{opacity:.35}.slot.sep{margin-left:8px}.slot.nomp{filter:grayscale(.6) brightness(.7)}.slot.empty{opacity:.45}
.slot.sk1{color:#ffd9a0}.slot.sk2{color:#a9e3ff}.slot.sk3{color:#ff9d6b}.slot.sk4{color:#ffe27a}.slot.sk5{color:#ff7ad9}.slot.dash{color:#bfe8ff}.slot.scr{color:#ffe08a}
.slot img{width:78%;height:78%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px #000)}
#castbar{position:absolute;left:50%;bottom:156px;transform:translateX(-50%);width:270px;padding:6px 10px;text-align:center;font-size:12px;font-weight:700}
#castbar .bar i{background:linear-gradient(#f0cd6a,#a7801f)}
#xpbar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(780px,calc(100% - 24px));height:12px;background:#120a07;border:1px solid var(--gold-d);border-radius:4px;overflow:hidden}
#xpbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#f0cd6a,#a7801f);transition:width .2s}
#xpbar span{position:absolute;inset:0;text-align:center;font-size:9px;font-weight:700;line-height:11px;text-shadow:0 1px 1px #000}
#toast{position:fixed;left:50%;top:26%;transform:translateX(-50%);font-weight:700;color:#ffd86b;text-shadow:0 2px 3px #000;pointer-events:none;opacity:0;transition:opacity .25s;text-align:center}
#msg{position:fixed;left:50%;top:17%;transform:translateX(-50%);font:800 36px Cinzel,serif;color:#ffd23f;text-shadow:0 3px 10px #000;pointer-events:none;opacity:0;transition:opacity .4s;text-align:center;white-space:nowrap}
#msg small{display:block;font:600 15px Inter,sans-serif;color:#fff;margin-top:4px}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .45s;z-index:60;display:flex;align-items:center;justify-content:center;color:#e0b862;font:700 22px Cinzel,serif;letter-spacing:1px}

/* janelas */
.win{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,calc(100% - 24px));max-height:calc(100% - 40px);overflow:auto;padding:14px 16px;z-index:5;scrollbar-width:thin;animation:winin .14s ease-out}
.win.wide{width:min(700px,calc(100% - 24px))}
@keyframes winin{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
.wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(224,184,98,.8),rgba(224,184,98,.05)) 1}
.wh b{font:800 17px Cinzel,serif;color:var(--gold)}
.wh b::before{content:"◆";color:var(--gold-d);margin-right:9px;font-size:11px;vertical-align:2px}
.x{background:none;border:0;font-size:22px;color:var(--muted);line-height:1}.x:hover{color:#fff}
.say{color:#e8dcc3;margin:0 0 12px;font-style:italic}
.opts{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid rgba(224,184,98,.25);border-radius:8px;background:rgba(0,0,0,.25)}
.item .ic{width:40px;height:40px;flex:none;border-radius:8px;border:1px solid var(--gold-d);display:flex;align-items:center;justify-content:center;font-size:20px;background:radial-gradient(circle at 50% 28%,#2d2218,#120b07 78%)}
.item .ic>svg{width:88%;height:88%}
.item .tx{flex:1;min-width:0}.item .tx b{display:block}.item .tx small{color:var(--muted);font-size:12px;display:block}.item .tx .rw{color:#ffd86b;font-size:12px}
.item .btn{padding:5px 9px;font-size:12px;white-space:nowrap}
.stats{display:grid;grid-template-columns:1fr auto;gap:4px 12px}.stats span{color:var(--muted)}
.help li{margin:4px 0}.help b{color:#ffe9b0}
.bagwrap{display:grid;grid-template-columns:160px 1fr;gap:14px}
.eqs{display:flex;flex-direction:column;gap:6px}
.eq{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid rgba(224,184,98,.25);border-radius:8px;background:rgba(0,0,0,.25);cursor:pointer;text-align:left;min-height:46px}
.eq small{font-size:11px;color:var(--muted);display:block;line-height:1.2}.eq b{font-size:12px;display:block;line-height:1.2}
.eq .ic,.cell{width:42px;height:42px;flex:none;border-radius:8px;border:2px solid #3a2c1c;display:flex;align-items:center;justify-content:center;font-size:20px;background:radial-gradient(circle at 50% 28%,#2d2218,#120b07 78%);position:relative;overflow:hidden;box-shadow:inset 0 0 8px rgba(0,0,0,.85)}
.cell>svg,.eq .ic>svg,.ihic>svg{width:88%;height:88%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
.ic.ghost>svg{opacity:.2;filter:grayscale(1)}
.grid{display:grid;grid-template-columns:repeat(8,46px);gap:5px}
.cell{width:46px;height:46px;cursor:pointer}
.cell.sel,.eq.sel{outline:2px solid #ffe08a}
.cell.msel{outline:2px solid #ff7a4a;box-shadow:inset 0 0 40px rgba(255,90,60,.25)}
.cell .mk{position:absolute;right:3px;top:0;font-size:12px;font-weight:800;color:#ffb08a}
.cell .lv{position:absolute;left:3px;bottom:0;font-size:10px;font-weight:700;color:#e8dcc3;text-shadow:0 1px 1px #000}
.cell .upg{position:absolute;right:3px;top:0;font-size:11px;font-weight:800;color:#7fe06a;text-shadow:0 1px 1px #000}
.cell .rf{position:absolute;right:2px;bottom:0;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 1px #000}
.cell .lk{position:absolute;left:2px;top:0;font-size:10px}
.bd0{border-color:#8a8a8a!important}.bd1{border-color:#4caf3c!important}.bd2{border-color:#3a7fd6!important}.bd3{border-color:#9b4fdc!important}.bd4{border-color:#ff9a1f!important;box-shadow:0 0 9px rgba(255,154,31,.6)}
.cell.bd1{background:radial-gradient(circle at 50% 35%,rgba(111,220,90,.2),#1b130c 72%)}
.cell.bd2{background:radial-gradient(circle at 50% 35%,rgba(90,168,255,.24),#1b130c 72%)}
.cell.bd3{background:radial-gradient(circle at 50% 35%,rgba(199,125,255,.26),#1b130c 72%);animation:epicPulse 2.8s ease-in-out infinite}
.cell.bd4{background:radial-gradient(circle at 50% 35%,rgba(255,164,46,.32),#1b130c 72%);animation:legPulse 2.2s ease-in-out infinite}
@keyframes epicPulse{50%{box-shadow:inset 0 0 8px rgba(0,0,0,.85),0 0 10px rgba(199,125,255,.55)}}
@keyframes legPulse{50%{box-shadow:inset 0 0 8px rgba(0,0,0,.85),0 0 14px rgba(255,164,46,.85)}}
.sellbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0;padding:6px 8px;border:1px solid #6a3020;border-radius:8px;background:rgba(90,25,12,.35)}.sellbar b{color:#ffd27a}
.det{margin-top:12px;padding:10px;border:1px solid rgba(224,184,98,.25);border-radius:8px;background:rgba(0,0,0,.3);min-height:86px}
.det .nm,#itip .nm{font-weight:700;font-size:15px}
.det .ln,#itip .ln{font-size:12px;color:#e8dcc3}
.up{color:var(--green)}.dn{color:var(--red)}
.sc{color:#ffe9b0;font-weight:600;margin-top:2px}
.det .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.bghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:6px;flex-wrap:wrap}
.bgfilt,.bgsort{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;align-items:center}
.bgsort span{font-size:11px;color:var(--muted);margin-right:2px}
.seg{display:flex;gap:4px;flex-wrap:wrap}.seg .btn{padding:4px 10px;font-size:12px}
.seg .btn.on{border-color:var(--gold);background:linear-gradient(#5a4220,#3a2a14);color:#fff}
.chip{background:#22180f;border:1px solid rgba(224,184,98,.3);border-radius:12px;padding:2px 9px;font-size:11.5px;color:var(--ink)}
.chip:hover{border-color:var(--gold)}.chip.on{background:linear-gradient(#5a4220,#3a2a14);border-color:var(--gold);color:#fff}
.chip svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.eqsum{margin-top:4px;font-size:12px;color:var(--muted);text-align:center}
#itip{position:fixed;z-index:9;width:254px;padding:9px 11px;pointer-events:none}
.ihd{display:flex;gap:9px;align-items:center;margin-bottom:5px}
.ihic{width:46px;height:46px;flex:none;border-radius:8px;border:2px solid #3a2c1c;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 28%,#2d2218,#120b07 78%)}
.ihx{min-width:0}
#mapC{display:block;width:100%;max-width:640px;aspect-ratio:1;margin:0 auto;border-radius:10px;border:1px solid var(--gold-d)}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(224,184,98,.15)}
/* espíritos */
.spact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}
.spslot{--sc:#e0b862;display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--sc) 60%,#000);background:radial-gradient(ellipse at 16% 40%,color-mix(in srgb,var(--sc) 26%,transparent),rgba(0,0,0,.35) 70%)}
.spslot.empty{--sc:#6b5230;opacity:.8}
.spslot .spart{width:62px;height:62px;flex:none}
.spempty{width:62px;height:62px;flex:none;border-radius:50%;border:2px dashed #6b5230;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted)}
.sptx{min-width:0}.sptx b{display:block}.sptx small{display:block;color:var(--muted);font-size:12px;margin:2px 0 6px}
.spgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.spcard{position:relative;padding:10px;border:1px solid color-mix(in srgb,var(--sc) 55%,#000);border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 15%,#1c130c),#110b07)}
.spart{width:78px;height:78px;margin:0 auto 4px;animation:spbob 3.2s ease-in-out infinite}.spart svg{width:100%;height:100%;display:block}
@keyframes spbob{50%{transform:translateY(-4px)}}
.spcard.locked .spart{filter:grayscale(1) brightness(.55);opacity:.65;animation:none}
.spnm{text-align:center;font:800 13px Cinzel,serif}.spsub{text-align:center;font-size:11px;color:var(--muted);margin-bottom:6px}
.spstars{display:flex;gap:2px;justify-content:center;margin:2px 0 6px}
.spstars i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:#2a1f14;border:1px solid #5a4423}
.spstars i.on{background:var(--sc);border-color:#fff;box-shadow:0 0 5px var(--sc)}
.spln{font-size:12px;color:#e8dcc3;margin:1px 0}.spln.up{color:var(--green)}.spln.dim{color:var(--muted);font-style:italic}
.spess{font-size:11px;color:var(--muted);margin-top:4px}
.spcard .acts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.spbar{position:relative;height:15px;background:#140c08;border:1px solid #000;border-radius:4px;overflow:hidden;margin:4px 0 6px}
.spbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(var(--sc),color-mix(in srgb,var(--sc) 45%,#000))}
.spbar span{position:absolute;inset:0;text-align:center;font-size:10px;font-weight:700;line-height:14px;text-shadow:0 1px 1px #000}
/* morte */
#deathO{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(60,0,0,.55),rgba(0,0,0,.8));display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:6;text-align:center}
#deathO h2{font:800 34px Cinzel,serif;color:#ff6a5c;margin:0;text-shadow:0 3px 8px #000}
/* ecrã inicial */
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:flex-start;z-index:10;background:linear-gradient(90deg,rgba(12,8,5,.88) 0%,rgba(12,8,5,.55) 46%,rgba(12,8,5,0) 75%)}
.tbox{width:min(520px,calc(100% - 28px));margin-left:min(7vw,90px);text-align:left;padding:4px}
.logo{font:800 clamp(38px,6.5vw,66px)/0.95 Cinzel,serif;color:var(--gold);letter-spacing:.03em;text-shadow:0 2px 0 #4a3412,0 8px 26px rgba(0,0,0,.85)}
.logo small{display:block;font:700 13px Inter,sans-serif;letter-spacing:.32em;color:#f3dfae;margin-top:10px;text-transform:uppercase}
.tag2{color:#e8dcc3;margin:14px 0 18px;font-size:15px;max-width:440px}
.tbox input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--gold-d);background:rgba(18,11,7,.85);color:#fff;font:600 15px Inter,sans-serif;outline:none}
.tbox input:focus{border-color:var(--gold)}
.classes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}
.cls{padding:12px;border:1px solid rgba(224,184,98,.3);border-radius:10px;background:rgba(0,0,0,.45);text-align:left}
.cls b{font:800 16px Cinzel,serif;color:#ffe9b0;display:block}.cls small{color:var(--muted);font-size:12px}
.cls.on{border-color:var(--gold);background:rgba(224,184,98,.15);box-shadow:0 0 16px rgba(224,184,98,.25)}
.tbtns{display:flex;flex-direction:column;gap:8px}.tbtns .btn{padding:12px;font-size:15px}
.feat{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.feat span{font-size:11px;color:#e8dcc3;border:1px solid rgba(224,184,98,.3);border-radius:12px;padding:3px 9px;background:rgba(0,0,0,.35)}
.foot{margin-top:12px;font-size:12px;color:var(--muted)}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font:800 20px Cinzel,serif;color:var(--gold);z-index:20;background:#100b08}
#loading .lb{width:260px;height:6px;border-radius:4px;background:#2a1f14;overflow:hidden}#loading .lb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9c7630,#ecc970);transition:width .2s}
#loading small{font:600 12px Inter,sans-serif;color:var(--muted)}
@media (max-width:980px){#topbtns .btn kbd{display:none}#topbtns{max-width:calc(100% - 500px)}}
@media (max-width:820px){
  #pframe{width:210px;padding-left:10px}.pport{display:none}.spchip{margin-left:0}
  #chat{width:62vw;height:100px;bottom:122px}
  #track{top:auto;bottom:122px;right:12px;width:min(210px,34vw);max-height:130px}
  #mini{width:124px}#miniC{width:112px;height:112px}
  #topbins{right:142px}#topbtns{right:142px;top:12px;max-width:none;flex-direction:column}
  #autoP{top:120px;width:210px}#tframe{top:auto;bottom:182px;width:220px}
  .orb{width:62px;height:62px}.slot{width:40px;height:40px;font-size:18px}
  .bagwrap{grid-template-columns:1fr}.grid{grid-template-columns:repeat(8,1fr)}.cell{width:auto;height:auto;aspect-ratio:1}
  .spact{grid-template-columns:1fr}
  #title{background:rgba(12,8,5,.7)}.tbox{margin:0 auto}
}

/* =====================================================================
   Tema "MMO clássico": pedra escura, molduras de ouro, pergaminho
   (inspirado em WoW / Priston Tale; texturas geradas em SVG)
   ===================================================================== */
:root{
  --stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --frame:0 0 0 1px #0d0804,0 0 0 2px #6e5222,0 0 0 3px #e2bf6e,0 0 0 4px #5a3f14,0 0 0 5px #0d0804,0 10px 28px rgba(0,0,0,.65);
  --panel:linear-gradient(180deg,rgba(38,28,20,.93),rgba(14,10,7,.93));
}
.panel{background:var(--stone),var(--panel);background-blend-mode:overlay,normal;border:0;border-radius:6px;box-shadow:var(--frame),inset 0 0 0 1px rgba(255,220,150,.07),inset 0 0 22px rgba(0,0,0,.6)}
/* cantos com rebites dourados */
.panel::before{content:"";position:absolute;inset:-5px;pointer-events:none;border-radius:8px;
  background:radial-gradient(circle at 5px 5px,#ffe7a6 0 2px,#8a6424 2.6px 4px,transparent 4.6px),radial-gradient(circle at calc(100% - 5px) 5px,#ffe7a6 0 2px,#8a6424 2.6px 4px,transparent 4.6px),
    radial-gradient(circle at 5px calc(100% - 5px),#ffe7a6 0 2px,#8a6424 2.6px 4px,transparent 4.6px),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#ffe7a6 0 2px,#8a6424 2.6px 4px,transparent 4.6px)}
.ph{font:800 12px Cinzel,serif;letter-spacing:.12em;color:#f0cf7c;text-shadow:0 1px 0 #000,0 0 8px rgba(240,190,90,.25);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(224,184,98,.7),transparent) 1;padding-bottom:4px;text-align:center}
.btn{background:linear-gradient(180deg,#6a4c26 0%,#3e2a14 45%,#24170b 100%);border:1px solid #c79c4c;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,236,190,.35),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px #120a04,0 3px 6px rgba(0,0,0,.5);
  font-family:Cinzel,serif;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 1px #000}
.btn:hover:not(:disabled){border-color:#ffe2a0;filter:brightness(1.18);box-shadow:inset 0 1px 0 rgba(255,236,190,.45),0 0 0 1px #120a04,0 0 12px rgba(255,200,100,.45)}
.btn.gold{background:linear-gradient(180deg,#fff0b0 0%,#e3b44e 40%,#9c6a1c 100%);color:#2a1606;text-shadow:0 1px 0 rgba(255,255,255,.4);border-color:#fff2c0}
/* janelas: barra de título em estandarte */
.win{padding:0 16px 14px;border-radius:6px}
.wh{margin:0 -16px 12px;padding:10px 16px 9px;background:linear-gradient(180deg,#5a2418,#33120c 60%,#220a06);border-bottom:2px solid #c9a050;border-image:none;box-shadow:inset 0 1px 0 rgba(255,200,150,.25),0 3px 8px rgba(0,0,0,.5);position:sticky;top:0;z-index:2}
.wh b{font:800 18px Cinzel,serif;color:#ffe2a0;text-shadow:0 2px 2px #000,0 0 10px rgba(255,190,90,.35);letter-spacing:.04em}
.wh b::before{content:"❖";color:#e2bf6e}
.x{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#a8442e,#4a120a);border:1px solid #e2bf6e;color:#ffe2a0;font-size:17px;line-height:22px;box-shadow:0 2px 4px rgba(0,0,0,.6)}
.x:hover{filter:brightness(1.3)}
/* botões do topo: ícones quadrados (micro-menu) */
#topbtns{gap:7px}
#topbtns .btn{width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;position:relative;border-radius:6px;font-size:0}
#topbtns .btn .tbi{width:34px;height:34px;display:block}
#topbtns .btn kbd{position:absolute;right:-3px;bottom:-5px;margin:0;font-size:9px;background:#120a04;border-color:#8a6a2c;color:#f0cf7c;padding:0 3px}
#topbtns .btn .badge{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-size:9.5px;padding:0 4px;white-space:nowrap}
#topbtns #bAuto{width:auto;padding:0 10px 0 6px;font-size:12px;gap:4px}
#bAuto.on{background:linear-gradient(180deg,#3e7a2a,#1c3a10);border-color:#9cf07a;box-shadow:0 0 14px rgba(140,240,110,.55),0 0 0 1px #000}
/* barra de ações */
#slots{gap:5px;padding:8px 10px;border-radius:6px}
.slot{width:56px;height:56px;border-radius:5px;border:2px solid #8a6a2c;background:radial-gradient(circle at 50% 30%,#3a2a1a,#0c0805 80%);
  box-shadow:inset 0 0 0 1px #000,inset 0 0 14px rgba(0,0,0,.9),0 0 0 1px #000,0 2px 5px rgba(0,0,0,.6)}
.slot:hover{border-color:#ffe2a0;box-shadow:inset 0 0 0 1px #000,0 0 12px rgba(255,210,120,.5)}
.slot .sic{position:absolute;inset:4px;display:flex}.slot .sic svg{width:100%;height:100%}
.slot .k{z-index:3;color:#f0cf7c;background:rgba(0,0,0,.7);border-radius:3px;padding:0 3px;left:2px;top:2px}
.slot .n{z-index:3}
/* orbes com aro dourado trabalhado */
.orb{width:92px;height:92px;border:3px solid #c9a050;box-shadow:0 0 0 2px #1a0f05,0 0 0 5px #6e5222,0 0 0 6px #e2bf6e,0 0 0 8px #120a04,0 8px 22px rgba(0,0,0,.7)}
/* moldura do retrato e do alvo */
.pport{border:3px solid #c9a050;box-shadow:0 0 0 2px #120a04,0 0 0 4px #6e5222,0 0 14px color-mix(in srgb,var(--pc,#e0b862) 55%,transparent),inset 0 0 10px #000}
.pport svg{width:46px;height:46px}
.bar{border:1px solid #000;box-shadow:0 0 0 1px #6e5222,inset 0 1px 3px rgba(0,0,0,.85);border-radius:3px}
.bar.hp i{background:linear-gradient(180deg,#ff7a6a,#c42a1e 45%,#6a0e08)!important}
.bar.mp i{background:linear-gradient(180deg,#7ab4ff,#2a62d0 45%,#0e2a6a)!important}
#xpbar{border:1px solid #000;box-shadow:0 0 0 1px #8a6a2c,0 0 0 2px #120a04;height:13px}
#xpbar i{background:linear-gradient(180deg,#ffe58a,#c48a1e 50%,#6a4206)!important}
#miniC{border:3px solid #c9a050;box-shadow:0 0 0 2px #120a04,0 0 0 4px #6e5222,inset 0 0 16px rgba(0,0,0,.8)}
#mini{border-radius:50% 50% 8px 8px}
/* células de itens: moldura em bisel com cor da raridade */
.eq .ic,.cell,.item .ic{border-radius:4px;border:2px solid #4a3a24;background:radial-gradient(circle at 50% 30%,#2e2318,#0c0805 78%);box-shadow:inset 0 0 0 1px #000,inset 0 0 10px rgba(0,0,0,.9)}
.cell>svg,.eq .ic>svg,.ihic>svg,.item .ic>svg{width:92%;height:92%}
.bd1{box-shadow:inset 0 0 0 1px #000,inset 0 0 10px rgba(80,220,60,.35)!important}
.bd2{box-shadow:inset 0 0 0 1px #000,inset 0 0 12px rgba(60,140,255,.45)!important}
.bd3{box-shadow:inset 0 0 0 1px #000,inset 0 0 14px rgba(170,90,255,.55),0 0 6px rgba(170,90,255,.45)!important}
.bd4{box-shadow:inset 0 0 0 1px #000,inset 0 0 16px rgba(255,160,40,.6),0 0 10px rgba(255,160,40,.6)!important}
/* dica de item: pergaminho escuro */
#itip{background:linear-gradient(180deg,rgba(24,16,30,.97),rgba(10,7,14,.97));box-shadow:var(--frame);border-radius:5px}
.ihic{border-radius:4px}
/* janela de diálogo: linhas de opções */
.item{border-radius:4px;background:linear-gradient(90deg,rgba(255,220,150,.06),rgba(0,0,0,0));border:1px solid rgba(224,184,98,.18)}
.item:hover{border-color:rgba(255,226,160,.45)}
/* etiqueta da zona */
#zoneTag b{font-family:Cinzel,serif;letter-spacing:.08em;text-shadow:0 2px 3px #000,0 0 18px rgba(255,200,110,.5)}
/* barra da Torre Infinita */
#towerBar,#dgBar{position:absolute;left:50%;top:78px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:7px 16px 7px 10px;min-width:300px;pointer-events:none}
#towerBar .twi,#dgBar .twi{width:38px;height:38px;flex:none}#dgBar .twi svg,#towerBar .twi svg{width:100%;height:100%}
#dgBar b,#towerBar b{display:block;font:800 15px Cinzel,serif;color:#e6d8ff;text-shadow:0 1px 2px #000}
#dgBar small,#towerBar small{color:#cbbbe8;font-size:12px}
svg.gi{overflow:visible}
@media (max-width:820px){#topbtns .btn{width:40px;height:40px}#topbtns .btn .tbi{width:28px;height:28px}.slot{width:48px;height:48px}.orb{width:76px;height:76px}#towerBar{top:auto;bottom:150px;min-width:0}}
/* retratos dos espíritos (renderizados dos modelos 3D) */
.spimg{position:relative;display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--sg,#888) 55%,transparent),transparent 68%)}
.spimg img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}
.spdot .spimg img{inset:-6%;width:112%;height:112%}
.spcard.locked .spimg img{filter:grayscale(.85) brightness(.55) drop-shadow(0 2px 3px rgba(0,0,0,.8))}

/* =====================================================================
   Telemóvel / tablet (body.touch)
   ===================================================================== */
body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.touch #c{touch-action:none}
body.touch button{touch-action:manipulation}
#joyZone{position:absolute;left:0;bottom:0;width:42%;height:58%;pointer-events:auto;touch-action:none;z-index:1}
.joyBase{position:absolute;left:110px;top:calc(100% - 120px);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,160,.08),rgba(0,0,0,.35) 70%);border:2px solid rgba(226,191,110,.55);box-shadow:0 0 0 3px rgba(0,0,0,.35),inset 0 0 18px rgba(0,0,0,.6);opacity:.75;transition:opacity .15s}
.joyBase.on{opacity:1}
.joyKnob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe7a6,#c9a050 45%,#5a3f14);border:2px solid #1a0f05;box-shadow:0 4px 10px rgba(0,0,0,.6)}
#tAct{position:absolute;right:14px;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.tbtn{width:58px;height:58px;border-radius:50%;border:3px solid #c9a050;background:radial-gradient(circle at 45% 35%,#6a4c26,#24170b 75%);color:#ffe2a0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #120a04,0 6px 14px rgba(0,0,0,.6);font:700 9px Cinzel,serif;padding:0}
.tbtn.big{width:92px;height:92px;order:2}.tbtn svg{width:58%;height:58%}.tbtn b{font-size:22px;line-height:1}.tbtn small{font-size:9px;margin-top:-2px}
.tbtn:active{filter:brightness(1.4);transform:scale(.94)}
body.touch #bottom{left:auto;right:124px;transform:none;bottom:22px}
body.touch .orb{display:none}
body.touch #slots{display:grid;grid-template-columns:repeat(5,50px);gap:5px;padding:6px}
body.touch .slot{width:50px;height:50px}
body.touch .slot.sep{margin-left:0}
body.touch #chat{display:none}
body.touch.showlog #chat{display:flex;left:12px;bottom:auto;top:110px;height:150px;width:min(360px,45%);z-index:6}
body.touch #track{max-height:120px;font-size:12px;top:206px;width:220px}
body.touch #xpbar{bottom:2px;height:8px;width:calc(100% - 300px);left:200px;transform:none}
body.touch #xpbar span{display:none}
body.touch #fpsW{display:none}
body.touch .win{width:calc(100% - 20px);max-height:calc(100% - 16px)}
body.touch .win.wide{width:calc(100% - 20px)}
body.touch #itip{display:none}
body.touch .tag{font-size:11px}
#rotHint{position:fixed;inset:0;z-index:80;background:rgba(10,6,4,.92);display:none;align-items:center;justify-content:center;text-align:center;color:#ffe2a0;font-family:Cinzel,serif}
#rotHint.show{display:flex}#rotHint b{display:block;font-size:22px;margin-bottom:6px}#rotHint small{display:block;font-family:Inter,sans-serif;color:#cbb88f;margin-bottom:14px}
#rotHint div::before{content:"⟲";display:block;font-size:56px;color:#e2bf6e;animation:rotA 1.6s ease-in-out infinite}
@keyframes rotA{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
/* ecrãs baixos (telemóvel deitado) */
@media (max-height:520px){
  body.touch #pframe{transform:scale(.78);transform-origin:0 0}
  body.touch #mini{transform:scale(.68);transform-origin:100% 0}
  body.touch #track{top:150px;right:8px;max-height:96px;width:200px}
  body.touch #topbtns{right:140px;top:8px;gap:4px;max-width:calc(100% - 400px)}
  body.touch #topbtns .btn{width:38px;height:38px}body.touch #topbtns .btn .tbi{width:27px;height:27px}
  body.touch #topbtns #bAuto{width:auto;font-size:11px}
  body.touch #slots{grid-template-columns:repeat(5,44px)}body.touch .slot{width:44px;height:44px}
  body.touch #bottom{right:112px;bottom:10px}
  body.touch .tbtn.big{width:80px;height:80px}.tbtn{width:50px;height:50px}
  body.touch #towerBar{top:56px}
  body.touch #zoneTag{top:24%}
  body.touch .win{top:50%;max-height:calc(100% - 10px);padding:0 10px 10px}body.touch .wh{margin:0 -10px 8px}
}
/* ecrã de título no telemóvel */
body.touch #title{overflow:auto}
@media (max-width:820px),(max-height:520px){body.touch .tbox{max-width:calc(100% - 24px);padding:8px;margin:auto 0 auto 4vw}body.touch .logo{font-size:28px}body.touch .feat,body.touch .tag2{display:none}body.touch .classes{gap:8px}body.touch .cls small{display:none}body.touch #title{align-items:center}}

#dgBar b{color:#d8ffc0}#dgBar small{color:#c8d8b8}
@media (max-height:520px){body.touch #dgBar{top:56px}}

/* escolha de classe (10 classes) */
.classes.many{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.classes.many .cls{padding:6px 4px 7px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.classes.many .cls .clic{width:38px;height:38px;display:block}.classes.many .cls .clic svg{width:100%;height:100%}
.classes.many .cls b{font-size:12.5px;white-space:nowrap}.classes.many .cls small{display:none}.classes.many .cls small.role{display:block;font-size:9.5px;line-height:1.15;color:#b6a98e}
#clsInfo{margin:8px 0 2px;padding:8px 10px;border:1px solid rgba(224,184,98,.25);border-radius:6px;background:rgba(0,0,0,.35);font-size:12.5px;color:#e8dcc3;min-height:76px}
#clsInfo p{margin:3px 0 5px;color:#cbbd9c}#clsInfo .clsk{display:flex;gap:5px}#clsInfo .clsk span{width:30px;height:30px;display:block;border:1px solid #6e5222;border-radius:4px;background:#120a04}#clsInfo .clsk svg{width:100%;height:100%}
.tbox{width:min(600px,calc(100% - 28px))}
@media (max-width:820px),(max-height:520px){.classes.many{grid-template-columns:repeat(5,1fr)}.classes.many .cls .clic{width:28px;height:28px}.classes.many .cls small.role{display:none}#clsInfo{min-height:0;font-size:11px}#clsInfo p{display:none}}
/* login */
#loginBox{margin-top:6px}
#loginBox .tabs{display:flex;gap:6px;margin-bottom:8px}#loginBox .tabs .btn{flex:1}#loginBox .tabs .btn.on{border-color:#ffe2a0;filter:brightness(1.25)}
#loginBox input{width:100%;margin:0 0 7px;display:block}
#loginMsg{min-height:18px;font-size:12.5px;color:#ff9a8a;margin:2px 0 6px}#loginMsg.ok{color:#9af07a}
#acctBar{font-size:12.5px;color:#cbbd9c;margin:0 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}#acctBar b{color:#ffe2a0}
#acctBar .btn{padding:3px 8px;font-size:11.5px}
#title{overflow:auto}
@media (max-height:820px){.tag2{display:none}.logo{font-size:44px}}
@media (max-height:720px){.feat{display:none}}
/* ===== online ===== */
#srvBox{margin:0 0 8px}#srvBox .srvh{font:700 11px Cinzel,serif;letter-spacing:.1em;color:#e2bf6e;margin-bottom:4px}
#srvBox .srvs{display:flex;gap:6px}#srvBox .srv{flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 4px;gap:1px}
#srvBox .srv .sfl{font-size:20px;line-height:1}#srvBox .srv b{font-size:12.5px}#srvBox .srv small{font:600 10px Inter,sans-serif;color:#cbbd9c}
#srvBox .srv.on{border-color:#ffe2a0;box-shadow:0 0 12px rgba(255,210,120,.5),inset 0 0 0 1px #ffe2a0}
#netTag{font:600 10.5px Inter,sans-serif;color:#cbbd9c;margin-top:3px}#netTag.on{color:#9af07a}
#partyP{position:absolute;left:12px;top:182px;width:200px;padding:8px 10px}#partyP .pm{margin-top:5px;font-size:12px}#partyP .pm.me .pn{color:#ffe2a0}#partyP .bar{height:8px;margin-top:2px}#partyP .btn{margin-top:7px;width:100%}
#chat{padding-bottom:4px}#chatIn{margin-top:4px;width:100%;background:rgba(0,0,0,.55);border:1px solid #6e5222;border-radius:4px;color:#f1e8d6;padding:4px 7px;font:13px Inter,sans-serif}
#chatIn:focus{outline:none;border-color:#ffe2a0}
.l.chat b{color:#ffe2a0}.l.chat.party{color:#8ad8ff}.l.chat.guild{color:#9af07a}.l.chat.w{color:#f0a0ff}
.tag.plr{color:#bfe8ff}.tag.plr .gt{color:#9af07a}.tag.plr.party{color:#8ad8ff}.tag.plr .bub{background:rgba(10,8,6,.85);border:1px solid #8a6a2c;border-radius:8px;padding:3px 8px;margin-bottom:3px;font-weight:600;color:#fff;max-width:220px;white-space:normal}
#guildBody .gform{display:flex;gap:6px;margin:6px 0}#guildBody .gform input{flex:1}#guildBody .ghead{font-size:14px;margin-bottom:6px}#guildBody .ghead b{color:#ffe2a0;font-family:Cinzel,serif}
#guildBody .glist{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto}#guildBody .gm{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid rgba(224,184,98,.15);border-radius:4px}
#guildBody .gm small{color:#b6a98e;flex:1}#guildBody .gm .dot{width:8px;height:8px;border-radius:50%;background:#555}#guildBody .gm .dot.on{background:#7fe06a}
body.touch #partyP{top:120px;transform:scale(.85);transform-origin:0 0}
body.touch.showlog #chatIn{display:block}body.touch #chatIn{font-size:15px}

/* ---------- Fase 1: personagens, conta, social ---------- */
#dialog{z-index:12}#toast{z-index:30}
#charBox{margin:0 0 10px}#charBox .srvh{font:700 11px Cinzel,serif;letter-spacing:.1em;color:#e2bf6e;margin-bottom:6px}
#charBox .clist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
#charBox .cchar{--cc:#e0b862;display:flex;align-items:center;gap:10px;padding:7px 8px;border:1px solid color-mix(in srgb,var(--cc) 45%,#000);border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 16%,rgba(0,0,0,.55)),rgba(0,0,0,.45))}
#charBox .cic{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--cc);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#2d2218,#0f0a06)}#charBox .cic svg{width:78%;height:78%}
#charBox .ctx{flex:1;min-width:0}#charBox .ctx b{display:block;font:800 15px Cinzel,serif;color:#ffe9b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#charBox .ctx small{color:#cbbd9c;font-size:12px}
#charBox .cchar .btn.gold{padding:7px 14px}#charBox .cdel{padding:3px 8px;font-size:15px;line-height:1;color:#cbbd9c}#charBox .cdel:hover{color:#ff8a7a}
#charBox>.btn{width:100%;margin-top:4px;padding:10px}
.rcNotice{margin-top:8px;padding:7px 9px;border:1px solid #c9a050;border-radius:6px;background:rgba(90,50,10,.45);font-size:12.5px;display:flex;gap:8px;align-items:center;justify-content:space-between;color:#ffe2a0}
.rcodes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 10px}.rcodes code{font:700 16px ui-monospace,Consolas,monospace;letter-spacing:.08em;text-align:center;padding:7px;border:1px dashed #c9a050;border-radius:5px;background:rgba(0,0,0,.45);color:#ffe2a0;user-select:text;-webkit-user-select:text}
.accNote{font-size:12.5px;color:#cbbd9c;margin:2px 0 8px}.accSep{margin-top:16px}
.accIn{display:block;width:100%;margin:0 0 6px;padding:8px 10px;border-radius:6px;border:1px solid var(--gold-d);background:rgba(18,11,7,.85);color:#fff;font:600 14px Inter,sans-serif;outline:none;user-select:text;-webkit-user-select:text}.accIn:focus{border-color:var(--gold)}
.accMsg{min-height:16px;font-size:12.5px;color:#ff8a7a;margin:0 0 6px}.accMsg.ok{color:#9af07a}
#loginMsg.ok{color:#9af07a}
.btn.danger{background:linear-gradient(#7a2418,#3a0e08);border-color:#c0503a}.btn.danger:hover:not(:disabled){border-color:#ff8a6a}
.tbtns.row{flex-direction:row;flex-wrap:wrap}.tbtns.row .btn{flex:1;padding:9px}
.seg.wrap{flex-wrap:wrap;gap:6px;margin-bottom:8px}
#loginBox .tabs .btn{font-size:12.5px;padding:7px 6px}
.tabs3{display:flex;gap:6px;margin-bottom:10px}.tabs3 .btn{flex:1}
#guildBody .gform input,#guildBody input{padding:7px 9px;border-radius:5px;border:1px solid var(--gold-d);background:rgba(18,11,7,.85);color:#fff;font:600 13px Inter,sans-serif;outline:none;user-select:text;-webkit-user-select:text}#guildBody input:focus{border-color:var(--gold)}

/* estábulo / montarias */
.mtlist{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}.mtrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid #ffffff1a;border-radius:8px;background:#0003}
.mtrow.cur{border-color:#e0b862;box-shadow:0 0 0 1px #e0b86255 inset}.mtrow.lock{opacity:.55}.mtrow img{width:64px;height:64px;object-fit:contain;flex:none}.mttx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.mttx small{opacity:.85}.mttx .mtd{opacity:.65}
.slot.mount img{width:80%;height:80%;object-fit:contain}.slot.mount.on{box-shadow:0 0 0 2px #e0b862 inset}

/* sombras do necromante */
.shlist{display:flex;flex-direction:column;gap:7px;max-height:60vh;overflow:auto}.shrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid #ffffff1a;border-radius:8px;background:#0003}
.shrow.own{border-color:#8a5aff66}.shrow.act{border-color:#b78aff;box-shadow:0 0 0 1px #b78aff55 inset}.shtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.shtx small{opacity:.8}
.shbar{height:7px;border-radius:4px;background:#ffffff14;overflow:hidden}.shbar i{display:block;height:100%;background:linear-gradient(90deg,#5a2a9a,#b78aff)}.shbt{display:flex;flex-direction:column;gap:4px}

/* CO-coins */
.cochip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:1px 7px 1px 3px;border-radius:10px;background:#00000040;border:1px solid #f2c14e55;cursor:pointer;color:#ffe08a}.cochip b{font-weight:700}
.coico{vertical-align:middle;flex:none}.cohead{display:flex;align-items:center;gap:12px;margin:2px 0 10px}.cohead b{font-size:18px;color:#ffe08a;display:block}.cohead small{opacity:.8}
.cotabs{display:flex;gap:6px;margin-bottom:10px}.cowarn{color:#ffd28a}.cosmall{font-size:12px;opacity:.75}
.copacks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:10px}.copack{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid #f2c14e44;border-radius:10px;background:radial-gradient(circle at 50% 20%,#f2c14e1f,#0000 70%),#0003}
.copack b{font-size:20px;color:#ffe08a}.copack small{opacity:.75;min-height:1em}.copack.best{border-color:#f2c14e;box-shadow:0 0 12px #f2c14e33}.copack .btn{margin-top:4px;width:100%}
.coagree{display:flex;gap:8px;align-items:flex-start;font-size:12px;opacity:.9;margin:6px 0}.coagree input{margin-top:2px}
.coshop{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto}.coitem{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid #ffffff1a;border-radius:8px;background:#0003}.coitem.own{border-color:#f2c14e88}
.coitem img{width:56px;height:56px;object-fit:contain;flex:none}.coaura{width:56px;height:56px;flex:none;border-radius:50%;background:radial-gradient(circle,var(--ac) 0,transparent 65%);opacity:.9}.cotx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.cotx small{opacity:.75}
.foot a,.coagree a{color:var(--gold-l)}.foot a:hover,.coagree a:hover{color:#fff}

/* ---------- Guilda dos Aventureiros, baú, saque, trocas, bússola ---------- */
.advcard{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px;padding:10px 12px;border:1px solid #6a5028;border-radius:8px;background:linear-gradient(#2a1d10,#1a120a)}
.advcard b{font:800 16px Georgia,serif;color:#ffd27a}.advcard span{color:#e8dcc4;font-size:13px}.advcard small{color:#b3a68b;font-size:12px}
.advcard .bar{height:8px;border-radius:4px;background:#120c06;overflow:hidden}.advcard .bar i{display:block;height:100%;background:linear-gradient(90deg,#c9a24a,#ffe08a)}
.advcard .btn{align-self:flex-start;margin-top:4px}
.vaultw{display:flex;gap:12px;flex-wrap:wrap}.vaultw .vcol{flex:1 1 260px;min-width:0}.vaultw .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:4px;margin:6px 0}
.vaultw .cell{position:relative;aspect-ratio:1;min-height:44px;padding:2px}
.opts .item.msel{outline:2px solid #ffd27a;outline-offset:-2px}
.sellnote{margin:6px 0;padding:6px 8px;border:1px dashed #8a6a2c;border-radius:6px;color:#e8c890;font-size:12px}
.trg{margin-top:6px;color:#e8dcc4;font-size:13px;display:flex;align-items:center;gap:6px}.trgold{width:110px;background:#0d0805;border:1px solid #5a4426;border-radius:6px;color:#fff;padding:4px 6px}
.sexrow{display:flex;align-items:center;gap:6px;justify-content:center;margin:4px 0 8px;color:#e8dcc4}
#compass{position:absolute;left:50%;top:66px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:16px;background:rgba(20,13,7,.78);border:1px solid #8a6a2c;cursor:pointer;pointer-events:auto;max-width:300px;z-index:5}
#compass.hidden{display:none!important}#compass .cring{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:radial-gradient(#3a2814,#140c06);border:1px solid #c9a24a;display:flex;align-items:center;justify-content:center;overflow:hidden}
#compass svg{width:18px;height:18px;display:block;transition:transform .15s linear}#compass .ctx{display:flex;flex-direction:column;min-width:0;line-height:1.15}
#compass b{color:#ffe2a0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#compass small{color:#c8b894;font-size:10.5px;white-space:nowrap}
@media (max-width:700px){#compass{top:auto!important;bottom:118px!important;max-width:70vw!important}#compass b{font-size:11px}}

/* ---------- ranks de itens: F, E, D, C, B, A, S, SS, SSS, XL ---------- */
:root{--r0:#b8bcc2;--r1:#e8ecf0;--r2:#8af07a;--r3:#4ad8c0;--r4:#6ab8ff;--r5:#9a9cff;--r6:#d08aff;--r7:#ffa63a;--r8:#ff5a5a;--r9:#fff2a8}
.r0{color:var(--r0)}.r1{color:var(--r1)}.r2{color:var(--r2)}.r3{color:var(--r3)}.r4{color:var(--r4);text-shadow:none}.r5{color:var(--r5)}.r6{color:var(--r6)}
.r7{color:var(--r7);text-shadow:0 0 6px rgba(255,164,46,.45)}.r8{color:var(--r8);text-shadow:0 0 7px rgba(255,70,70,.55)}
.r9{background:linear-gradient(90deg,#fff2a8,#ffd27a,#ff9af0,#9ad8ff,#fff2a8);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xlText 3s linear infinite;text-shadow:none}
@keyframes xlText{to{background-position:200% 0}}
.bd0{border-color:#6a6a6a!important;box-shadow:inset 0 0 0 1px #000!important}
.bd1{border-color:#a8acb2!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 8px rgba(230,236,240,.18)!important}
.bd2{border-color:#4caf3c!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 10px rgba(80,220,60,.35)!important}
.bd3{border-color:#2fb39e!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 11px rgba(60,210,190,.4)!important}
.bd4{border-color:#3a7fd6!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 12px rgba(60,140,255,.45)!important}
.bd5{border-color:#6a6cf0!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 13px rgba(130,130,255,.5)!important}
.bd6{border-color:#9b4fdc!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 14px rgba(170,90,255,.55),0 0 6px rgba(170,90,255,.45)!important}
.bd7{border-color:#ff9a1f!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 16px rgba(255,160,40,.6),0 0 10px rgba(255,160,40,.6)!important}
.bd8{border-color:#ff3a3a!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 16px rgba(255,60,60,.65),0 0 12px rgba(255,60,60,.65)!important}
.bd9{border-color:#fff2a8!important;box-shadow:inset 0 0 0 1px #000,inset 0 0 18px rgba(255,240,170,.75),0 0 14px rgba(255,220,120,.8)!important;animation:legPulse 1.6s ease-in-out infinite}
.cell.bd1{background:radial-gradient(circle at 50% 35%,rgba(230,236,240,.12),#1b130c 72%)}
.cell.bd2{background:radial-gradient(circle at 50% 35%,rgba(111,220,90,.2),#1b130c 72%);animation:none}
.cell.bd3{background:radial-gradient(circle at 50% 35%,rgba(70,216,192,.22),#1b130c 72%);animation:none}
.cell.bd4{background:radial-gradient(circle at 50% 35%,rgba(90,168,255,.24),#1b130c 72%);animation:none}
.cell.bd5{background:radial-gradient(circle at 50% 35%,rgba(140,140,255,.26),#1b130c 72%)}
.cell.bd6{background:radial-gradient(circle at 50% 35%,rgba(199,125,255,.26),#1b130c 72%);animation:epicPulse 2.8s ease-in-out infinite}
.cell.bd7{background:radial-gradient(circle at 50% 35%,rgba(255,164,46,.32),#1b130c 72%);animation:legPulse 2.2s ease-in-out infinite}
.cell.bd8{background:radial-gradient(circle at 50% 35%,rgba(255,70,70,.36),#1b130c 72%);animation:legPulse 1.9s ease-in-out infinite}
.cell.bd9{background:radial-gradient(circle at 50% 35%,rgba(255,240,170,.45),#2a1d0c 72%)}
.cell .rk{position:absolute;left:2px;top:1px;font:800 10px/1 Georgia,serif;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.ranktab{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:6px 0}.ranktab span{padding:3px 4px;border:1px solid #3a2a18;border-radius:5px;text-align:center;font-size:12px;background:#140c06}