*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
:root{--bg:#1a1612;--panel:#2a2319;--pb:#3d3427;--text:#e8dcc8;--dim:#9c8e78;--gold:#d4a843;--gd:#8a6d2b;--hp:#c0392b;--hpb:#5c1a14;--xp:#27ae60;--xpb:#144d2b;--accent:#e67e22;--fd:'Almendra',serif;--fb:'Nunito',sans-serif;--tile:40px;--quest-yellow:rgba(255,215,0,.45);--quest-green:rgba(46,204,113,.45)}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--fb)}
button{font-family:var(--fb);cursor:pointer;border:none;outline:none}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--pb);border-radius:2px}
#loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s}
#loading-screen.hidden{opacity:0;pointer-events:none}
#loading-screen h1{font-family:var(--fd);font-size:2.8rem;color:var(--gold);text-shadow:0 0 30px rgba(212,168,67,.3)}
#loading-screen .sub{color:var(--dim);font-size:.8rem;font-style:italic;margin-bottom:1rem}
.load-bar{width:180px;height:4px;background:var(--panel);border-radius:2px;overflow:hidden}.load-bar-fill{height:100%;background:var(--gold);width:0%;transition:width .3s;border-radius:2px}
#game{display:none;height:100%;width:100%;position:relative;overflow:hidden}
#night-overlay{position:absolute;inset:0;pointer-events:none;z-index:15;transition:background 2s}
#viewport{width:100%;height:100%;position:relative;overflow:hidden}
#map-canvas{position:absolute;image-rendering:pixelated}
#tile-info{position:absolute;z-index:25;background:var(--panel);border:1px solid var(--pb);border-radius:8px;padding:8px 12px;display:none;min-width:140px;max-width:220px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
#tile-info .ti-t{font-family:var(--fd);font-size:.85rem;color:var(--gold);margin-bottom:2px}
#tile-info .ti-d{font-size:.65rem;color:var(--dim)}
#hud-top{position:absolute;top:0;left:0;right:0;z-index:20;padding:8px 10px;display:flex;align-items:flex-start;justify-content:space-between;background:linear-gradient(to bottom,rgba(26,22,18,.95) 60%,transparent);pointer-events:none}
#hud-top>*{pointer-events:auto}
.hl{display:flex;flex-direction:column;gap:3px}
.pnr{display:flex;align-items:center;gap:3px}
.pn{font-family:var(--fd);font-size:1.15rem;color:var(--gold);cursor:pointer;background:none;border:none;text-align:left;padding:0}
.pn:hover{text-decoration:underline}
.enb{background:none;border:none;color:var(--dim);font-size:.75rem;cursor:pointer}
.plv{font-size:.75rem;color:var(--dim)}.loc{font-size:.8rem;color:var(--accent);font-style:italic}.tl{font-size:.7rem;color:var(--dim)}
.sbs{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.sb{display:flex;align-items:center;gap:5px;font-size:.78rem}
.sb label{width:26px;text-align:right;color:var(--dim);font-weight:700}
.sb .bar{width:110px;height:10px;background:var(--hpb);border-radius:5px;overflow:hidden}
.sb .bar.xpbg{background:var(--xpb)}
.sb .bf{height:100%;border-radius:3px;transition:width .3s}
.sb .bf.hp{background:var(--hp)}.sb .bf.xp{background:var(--xp)}
.sb .val{color:var(--dim);min-width:40px;font-size:.72rem}
.gd{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--gold);font-weight:600}
.tp{font-size:.75rem;color:#a29bfe;font-weight:600}
.hr{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.hbs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.hb{background:var(--panel);border:1px solid var(--pb);color:var(--text);border-radius:6px;padding:8px 14px;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:4px}
.hb:active{background:var(--pb)}
.hb .k{font-size:.65rem;color:var(--dim)}
#mmc{border:2px solid var(--pb);border-radius:3px;overflow:hidden;background:#111;cursor:pointer}
#minimap{display:block}
#hud-bottom{position:absolute;bottom:0;left:0;right:0;z-index:20;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between;background:linear-gradient(to top,rgba(26,22,18,.97) 70%,transparent);padding:5px 10px 8px}
#action-panel{pointer-events:auto;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}
#action-bar{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:3px}
.ab{background:var(--panel);border:1px solid var(--pb);color:var(--text);border-radius:5px;padding:6px 12px;font-size:.78rem;font-weight:600;white-space:nowrap}
.ab:active{background:var(--pb)}.ab:disabled{opacity:.4;pointer-events:none}
#prog-c{display:none;margin:2px 0 3px auto;max-width:260px;text-align:center}
#prog-l{font-size:.6rem;color:var(--dim);margin-bottom:1px}
.prog-o{width:100%;height:7px;background:var(--panel);border-radius:3px;overflow:hidden}
#prog-b{height:100%;background:linear-gradient(90deg,var(--gd),var(--gold));border-radius:3px;width:0%;transition:width .1s linear}
#stop-b{background:var(--hp);color:#fff;border-radius:4px;padding:5px 16px;font-size:.75rem;font-weight:700;margin-top:3px}
#dpad{display:flex;flex-direction:column;align-items:center;pointer-events:auto;gap:2px;opacity:.85;flex-shrink:0;margin-right:10px}
.dr{display:flex;gap:2px}
.db{width:52px;height:52px;background:var(--panel);border:1px solid var(--pb);border-radius:8px;color:var(--text);font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.db:active{background:var(--gd)}.ds{width:52px;height:52px}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:none;align-items:center;justify-content:center;padding:8px}
.mo.open{display:flex}
.ml{background:var(--panel);border:2px solid var(--pb);border-radius:10px;max-width:460px;width:100%;max-height:88vh;overflow-y:auto}
.ml-map{max-width:95vw;max-height:92vh}
.mh{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 7px;border-bottom:1px solid var(--pb);position:sticky;top:0;background:var(--panel);z-index:1}
.mh h2{font-family:var(--fd);font-size:1rem;color:var(--gold)}
.mc{background:none;border:none;color:var(--dim);font-size:1.3rem;padding:5px 8px;border-radius:4px}
.mc:hover{color:var(--text);background:var(--pb)}
.mb{padding:9px 12px 12px}
.tr{display:flex;gap:2px;margin-bottom:6px;flex-wrap:wrap}
.tb{background:var(--bg);color:var(--dim);border:1px solid var(--pb);border-radius:4px;padding:5px 10px;font-size:.72rem;font-weight:600}
.tb.active{background:var(--gd);color:var(--text);border-color:var(--gold)}
.ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:3px}
.is{background:rgba(0,0,0,.3);border:1px solid var(--pb);border-radius:4px;padding:5px 2px;text-align:center;cursor:pointer;position:relative;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.is:hover{border-color:var(--gd)}.is.eq{border-color:var(--gold);box-shadow:0 0 5px rgba(212,168,67,.2)}
.is .em{font-size:1.2rem}.is .in{font-size:.5rem;color:var(--dim);line-height:1}.is .iq{font-size:.5rem;color:var(--gold);font-weight:700}
.is .dur{position:absolute;bottom:1px;left:2px;right:2px;height:2px;background:rgba(0,0,0,.5);border-radius:1px;overflow:hidden}
.is .df{height:100%;border-radius:1px}
.ic{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--pb);border-radius:6px;padding:2px;min-width:110px;box-shadow:0 4px 20px rgba(0,0,0,.6);display:none}
.ic.open{display:block}
.icb{display:block;width:100%;text-align:left;background:none;color:var(--text);padding:5px 9px;font-size:.65rem;border-radius:2px}
.icb:hover{background:var(--pb)}
.si{display:flex;align-items:center;gap:5px;padding:5px;background:rgba(0,0,0,.2);border-radius:4px;margin-bottom:2px}
.si .em{font-size:1rem}.sinf{flex:1;min-width:0}.sinf .sn{font-size:.68rem;font-weight:600}.sinf .sd{font-size:.55rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp{font-size:.65rem;color:var(--gold);font-weight:700;white-space:nowrap}
.sbg{display:flex;gap:2px;flex-shrink:0}
.sbu{background:var(--gd);color:var(--text);border-radius:4px;padding:5px 10px;font-size:.7rem;font-weight:600}
.sbu:hover{background:var(--gold)}.sbu:disabled{opacity:.4}
.cs{margin-bottom:10px}.cs h3{font-family:var(--fd);font-size:.8rem;color:var(--accent);margin-bottom:5px}
.sr{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.skn{font-size:.68rem}.skl{font-size:.63rem;color:var(--gold);font-weight:700}
.skb{width:50px;height:4px;background:rgba(0,0,0,.4);border-radius:2px;overflow:hidden}.skf{height:100%;background:var(--xp);border-radius:2px}
.eg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px}
.esb{background:rgba(0,0,0,.25);border:1px solid var(--pb);border-radius:4px;padding:5px;text-align:center;font-size:.6rem}
.esb .esl{color:var(--dim);font-size:.5rem;text-transform:uppercase;letter-spacing:.3px}
.csg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px}
.cst{background:rgba(0,0,0,.2);border-radius:4px;padding:4px 6px;text-align:center}
.cst .cl{font-size:.5rem;color:var(--dim)}.cst .cv{font-size:.8rem;font-weight:700}
.ca{text-align:center;padding:6px}
.cvs{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.cmb{text-align:center}.cmb .em{font-size:2rem}.cmb .cn{font-size:.7rem;font-weight:600;margin-top:1px}
.cmb .chb{width:65px;height:6px;background:var(--hpb);border-radius:3px;overflow:hidden;margin:2px auto 0}.cmb .chf{height:100%;background:var(--hp);border-radius:3px;transition:width .3s}
.clog{background:rgba(0,0,0,.3);border-radius:4px;padding:5px;max-height:90px;overflow-y:auto;font-size:.6rem;color:var(--dim);text-align:left;margin-bottom:6px}
.clog p{margin-bottom:1px}.clog .dmg{color:var(--hp)}.clog .heal{color:var(--xp)}.clog .gl{color:var(--gold)}
.cacts{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.cb{padding:7px 16px;border-radius:5px;font-size:.8rem;font-weight:700;color:#fff}
.cb.atk{background:var(--hp)}.cb.def{background:#2980b9}.cb.fle{background:#7f8c8d}.cb.lot{background:var(--xp)}
#dng-v{display:none;position:absolute;inset:0;z-index:50;background:var(--bg)}
#dng-c{position:absolute;image-rendering:pixelated}
#dng-h{position:absolute;top:0;left:0;right:0;z-index:51;padding:5px 7px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(to bottom,rgba(26,22,18,.95) 60%,transparent);pointer-events:none}
#dng-h>*{pointer-events:auto}
#dng-b{position:absolute;bottom:0;left:0;right:0;z-index:51;pointer-events:none}
#dng-dp{display:flex;flex-direction:column;align-items:center;pointer-events:auto;margin:0 auto 5px;gap:1px;opacity:.75}
.tn{background:rgba(0,0,0,.3);border:1px solid var(--pb);border-radius:5px;padding:6px;cursor:pointer;margin-bottom:3px;transition:border-color .2s}
.tn.unlocked{border-color:var(--xp);background:rgba(39,174,96,.08)}
.tn.available{border-color:var(--gd)}
.tn.locked{opacity:.45}
.tn .tnn{font-size:.7rem;font-weight:600;margin-bottom:1px}.tn .tnd{font-size:.55rem;color:var(--dim)}.tn .tnc{font-size:.55rem;color:#a29bfe;margin-top:1px}
.ai{display:flex;align-items:center;gap:6px;padding:5px;background:rgba(0,0,0,.2);border-radius:4px;margin-bottom:2px;border-left:3px solid var(--pb)}
.ai.earned{border-left-color:var(--gold)}
.ai.claimed{border-left-color:var(--xp);opacity:.7}
.ai .em{font-size:1rem}
.ainf{flex:1}.ainf .an{font-size:.68rem;font-weight:600}.ainf .ad{font-size:.55rem;color:var(--dim)}.ainf .ar{font-size:.55rem;color:var(--gold)}
.acl{font-size:.55rem;font-weight:700}
#dlg-o{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;display:none;align-items:flex-end;justify-content:center;padding:12px}
#dlg-o.open{display:flex}
#dlg-b{background:var(--panel);border:2px solid var(--gd);border-radius:10px 10px 4px 4px;max-width:400px;width:100%;padding:14px}
#dlg-sp{font-family:var(--fd);color:var(--gold);font-size:.85rem;margin-bottom:4px}
#dlg-tx{font-size:.75rem;line-height:1.45;margin-bottom:8px}
#dlg-opts{display:flex;flex-direction:column;gap:3px}
.dlg-opt{background:var(--pb);color:var(--text);border-radius:5px;padding:8px 12px;font-size:.8rem;text-align:left}
.dlg-opt:hover{background:var(--gd)}
.dlg-opt.quest-accept{border-left:3px solid var(--gold)}
.dlg-opt.quest-complete{border-left:3px solid var(--xp)}
#death{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center}
#death.open{display:flex}
#death h2{font-family:var(--fd);font-size:1.8rem;color:var(--hp);margin-bottom:.4rem}
#death p{color:var(--dim);margin-bottom:1rem;font-size:.75rem}
#resp-b{background:var(--gold);color:var(--bg);font-family:var(--fd);font-size:.9rem;padding:7px 22px;border-radius:6px;font-weight:700}
#ne-o{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:none;align-items:center;justify-content:center}
#ne-o.open{display:flex}
#ne-box{background:var(--panel);border:2px solid var(--gd);border-radius:9px;padding:18px;text-align:center;width:260px}
#ne-box h3{font-family:var(--fd);color:var(--gold);margin-bottom:8px;font-size:1rem}
#ne-in{background:var(--bg);border:1px solid var(--pb);color:var(--text);font-family:var(--fb);font-size:.85rem;padding:7px 10px;border-radius:4px;width:100%;text-align:center;outline:none}
#ne-in:focus{border-color:var(--gold)}
#ne-sv{background:var(--gold);color:var(--bg);font-weight:700;padding:5px 18px;border-radius:4px;margin-top:8px;font-size:.75rem}
#tc{position:fixed;top:55px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:2px;pointer-events:none;max-width:88vw}
.toast{background:var(--panel);border:1px solid var(--pb);border-radius:6px;padding:5px 12px;font-size:.65rem;color:var(--text);box-shadow:0 4px 15px rgba(0,0,0,.5);animation:ti .25s ease,to .25s ease 2.2s forwards;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.loot{border-color:var(--gd)}.toast.xp{border-color:var(--xp)}.toast.damage{border-color:var(--hp)}.toast.info{border-color:#2980b9}.toast.ach{border-color:#9b59b6}.toast.quest{border-color:var(--gold)}
@keyframes ti{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes to{to{opacity:0;transform:translateY(-6px)}}
#cloud-status{font-size:.55rem;color:var(--dim);text-align:right;padding:2px 0;min-height:1em}
.cs-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px;vertical-align:middle}
.cs-dot.online{background:var(--xp)}.cs-dot.syncing{background:var(--gold);animation:pulse 1s infinite}
.cs-dot.offline{background:var(--hp)}.cs-dot.none{background:var(--dim)}
.usr-tabs{display:flex;gap:3px;margin-bottom:10px}
.usr-tab{flex:1;background:var(--bg);color:var(--dim);border:1px solid var(--pb);border-radius:4px;padding:7px;font-size:.72rem;font-weight:600;text-align:center}
.usr-tab.active{background:var(--gd);color:var(--text);border-color:var(--gold)}
.usr-input{background:var(--bg);border:1px solid var(--pb);color:var(--text);font-family:var(--fb);font-size:.78rem;padding:8px 10px;border-radius:4px;width:100%;outline:none;margin-bottom:6px;user-select:text;-webkit-user-select:text}
.usr-input:focus{border-color:var(--gold)}
.usr-label{font-size:.65rem;color:var(--dim);margin-bottom:2px;display:block}
.usr-err{font-size:.6rem;color:var(--hp);margin:4px 0;min-height:1.2em}
.usr-ok{font-size:.6rem;color:var(--xp);margin:4px 0;min-height:1.2em}
.usr-btn{background:var(--gd);color:var(--text);border-radius:5px;padding:8px;font-size:.75rem;font-weight:700;width:100%;margin-top:2px}
.usr-btn:hover{background:var(--gold)}.usr-btn:disabled{opacity:.4}
.usr-info{margin-bottom:12px;padding:8px;background:rgba(0,0,0,.2);border-radius:6px}
.usr-info .usr-name{font-family:var(--fd);font-size:1rem;color:var(--gold)}
.usr-info .usr-meta{font-size:.6rem;color:var(--dim);margin-top:3px}
.usr-section{margin-top:10px;padding-top:8px;border-top:1px solid var(--pb)}
.usr-section h4{font-size:.7rem;color:var(--accent);margin-bottom:6px;font-family:var(--fd)}
.sess-item{display:flex;align-items:center;gap:6px;padding:6px;background:rgba(0,0,0,.2);border-radius:4px;margin-bottom:3px;font-size:.6rem}
.sess-item.current{border-left:2px solid var(--xp)}
.sess-info{flex:1;color:var(--dim);line-height:1.4}
.sess-info strong{color:var(--text);font-size:.62rem}
.danger-zone{border-top:1px solid rgba(192,57,43,.3);margin-top:14px;padding-top:10px}
.danger-zone h4{font-size:.7rem;color:var(--hp);margin-bottom:6px;font-family:var(--fd)}
.btn-danger{background:var(--hp);color:#fff;border-radius:4px;padding:6px 12px;font-size:.68rem;font-weight:600}
.btn-danger:hover{opacity:.85}.btn-danger:disabled{opacity:.4}
.btn-secondary{background:var(--pb);color:var(--text);border-radius:4px;padding:6px 12px;font-size:.68rem;font-weight:600}
.btn-secondary:hover{background:var(--dim)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:480px){:root{--tile:36px}.db{width:46px;height:46px}#mmc{display:none}.hb .k{display:none}.sb .bar{width:85px}.hb{padding:6px 10px;font-size:.8rem}}
@media(min-width:768px){#dpad{opacity:.4;transition:opacity .2s}#dpad:hover{opacity:1}}