[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Tahoma,Verdana,sans-serif;color:#eee;user-select:none}
#view{position:fixed;inset:0;width:100%;height:100%;display:block}
#screens{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#2a1a0acc,#000e 75%);z-index:10}
#screens.off{display:none}
.panel{width:min(400px,92vw);background:#0b0805ee;border:1px solid #6b4a1f;border-radius:8px;padding:24px;box-shadow:0 0 50px #000;grid-area:1/1}
.panel.wide{width:min(560px,94vw)}
.panel h1{margin:0 0 16px;text-align:center;color:#f0c060;letter-spacing:3px;font-family:Georgia,serif;font-size:24px}
.panel label{display:block;font-size:12px;margin:12px 0 4px;color:#c9b48a}
.panel input{width:100%;box-sizing:border-box;padding:9px;background:#000;border:1px solid #5a3e1a;color:#fff;border-radius:4px;font-size:14px}
.panel button{padding:10px 14px;background:#1c140c;border:1px solid #5a3e1a;color:#e8d9b5;border-radius:4px;cursor:pointer;font-size:13px}
.panel button:hover{border-color:#c98a2a}
.panel button.main{background:linear-gradient(#c98a2a,#7a4d12);border:0;color:#fff;font-weight:bold;width:100%;margin-top:16px;padding:11px}
.panel button.ghost{background:none}
.row{display:flex;gap:8px;margin-top:14px}.row>*{flex:1}.row .main{margin-top:0}
.tabs{display:flex;gap:6px}.tabs button{flex:1}.tabs button.sel,.classes button.sel{background:#5a3e1a;color:#fff}
.classes{display:flex;gap:6px}.classes button{flex:1;padding:10px 4px;font-size:12px}
.classes small{display:block;color:#a99;font-size:10px;margin-top:4px}
.msg{min-height:18px;margin-top:10px;font-size:13px;color:#f88;text-align:center}.msg.ok{color:#8f8}
#loadbar{height:10px;background:#221a10;border:1px solid #5a3e1a;border-radius:5px;overflow:hidden}
#loadfill{height:100%;width:0;background:linear-gradient(90deg,#a06010,#f0c060);transition:width .2s}
#loadtxt{font-size:12px;color:#a99;margin:6px 0 0;text-align:center}
#charlist{display:grid;gap:8px}
.ch{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #4a3418;border-radius:6px;background:#140e08;cursor:pointer}
.ch:hover{border-color:#c98a2a;background:#20160c}
.ch b{color:#f0c060;font-size:16px}.ch .c{color:#a99;font-size:12px}.ch .sp{flex:1}
.ch .del{background:none;border:0;color:#a55;font-size:12px;padding:4px}
.empty{color:#888;text-align:center;padding:18px;font-size:13px}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud .win,#bar .mbtn,#skills .sk,#labels .lbl{pointer-events:auto}
#bar{position:absolute;left:50%;bottom:0;width:640px;height:48px;transform-origin:50% 100%}
#bar img{position:absolute;top:0;height:48px}
#bar .b1{left:0;width:256px}#bar .b2{left:256px;width:128px}#bar .b3{left:384px;width:256px}
.orb{position:absolute;top:0;width:53px;height:48px;z-index:2;overflow:hidden}
.orb.hp{left:97px}.orb.mp{left:490px}
.orb .fill{position:absolute;left:0;right:0;bottom:0;height:100%;background-position:bottom;background-size:53px 48px;background-repeat:no-repeat}
.orb.hp .fill{background-image:url(../assets/ui/menu_red.jpg)}.orb.mp .fill{background-image:url(../assets/ui/menu_blue.jpg)}
.hot{position:absolute;top:21px;width:19px;height:19px;z-index:3;background-size:contain;background-repeat:no-repeat;background-position:center;font-size:9px;text-align:right;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;line-height:30px}
#hot-q{left:208px}#hot-w{left:240px}#hot-e{left:272px}
.mbtn{position:absolute;top:19px;width:22px;height:22px;z-index:3;cursor:pointer}
#lvbox{position:absolute;left:8px;top:27px;width:52px;height:15px;z-index:3;color:#ffd890;font:bold 11px/15px sans-serif;text-align:center;text-shadow:0 0 2px #000}
#mb-skill{left:582px!important;top:26px!important;width:50px!important;height:20px!important}
#mb-char{left:344px}#mb-inv{left:377px}#mb-menu{left:409px}
#hptxt,#mptxt{position:absolute;top:-15px;width:80px;text-align:center;font-size:10px;z-index:3;text-shadow:0 0 3px #000}
#hptxt{left:83px}#mptxt{left:476px}
#exp{position:absolute;left:160px;right:160px;top:-7px;height:5px;background:#000a;border:1px solid #432}
#expfill{height:100%;width:0;background:#e8c040}
#exptxt{position:absolute;top:-12px;font-size:8px;width:100%;text-align:center;font-size:9px;color:#dc9;text-shadow:0 0 2px #000}
#skills{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.sk{min-width:58px;padding:3px 6px;font-size:10px;text-align:center;background:#0b0805cc;border:1px solid #4a3418;border-radius:3px;cursor:pointer;color:#cba}
.sk.sel{border-color:#f0c060;color:#fff;background:#3a2810dd}.sk b{display:block;color:#f0c060;font-size:9px}
#target{position:absolute;top:14px;left:50%;transform:translateX(-50%);text-align:center;min-width:220px}
#tname{font-size:13px;color:#ffb070;text-shadow:0 0 3px #000;margin-bottom:3px}
.tbar{height:6px;background:#300;border:1px solid #844}#thp{height:100%;background:#d22;width:100%}
#info{position:absolute;top:8px;right:12px;font-size:12px;color:#ddc;text-shadow:0 0 3px #000}
#charinfo{position:absolute;top:8px;left:12px;font-size:12px;color:#ddc;text-shadow:0 0 3px #000}
#log{position:absolute;left:12px;bottom:150px;font-size:12px;line-height:1.5;text-shadow:0 0 3px #000,0 0 3px #000;max-width:45vw}
#log div{animation:fade 8s forwards}@keyframes fade{0%,75%{opacity:1}100%{opacity:0}}
#dead{position:absolute;top:40%;width:100%;text-align:center;font-size:22px;color:#f55;text-shadow:0 0 6px #000}
#fx{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.dmg{position:absolute;font:bold 17px Tahoma;color:#fff;text-shadow:0 0 3px #000,1px 1px 0 #000;transform:translate(-50%,-50%);white-space:nowrap}
.dmg.hurt{color:#ff4040}.dmg.exp{color:#f0d060;font-size:12px}.dmg.crit{color:#40c0ff;font-size:21px}.dmg.heal{color:#60ff60;font-size:13px}.dmg.miss{color:#aaa;font-size:12px}
.dmg.lvup{color:#ffe070;font:bold 24px Georgia,serif;text-shadow:0 0 8px #ff9000,0 0 2px #000;letter-spacing:2px}
#labels .lbl{position:absolute;transform:translate(-50%,-100%);font-size:11px;white-space:nowrap;text-shadow:0 0 3px #000,0 0 2px #000;cursor:pointer;padding:1px 3px}
#labels .lbl.npc{color:#9cf}#labels .lbl.me{color:#fff;pointer-events:none}
#labels .lbl.item{color:#fff;background:#0008;border-radius:2px}#labels .lbl.item.exc{color:#7cf}#labels .lbl.item.gold{color:#fd6}#labels .lbl.item.jw{color:#f9f}
.win{position:absolute;background:#0b0805f2;border:1px solid #6b4a1f;border-radius:4px;box-shadow:0 0 20px #000;color:#ddd;font-size:12px}
.wt{padding:6px 10px;background:linear-gradient(#3a2810,#1a1008);color:#f0c060;font-weight:bold;border-bottom:1px solid #6b4a1f}
.wt .x{float:right;cursor:pointer;color:#c98a2a;font-size:15px;line-height:12px}
#w-inv{right:10px;top:36px;width:274px}
#equip{position:relative;height:240px;margin:8px 0 0 20px}
.slot{position:absolute;background:#1a120a;border:1px solid #4a3418;box-sizing:border-box;background-size:contain;background-repeat:no-repeat;background-position:center}
.slot i{position:absolute;bottom:2px;width:100%;text-align:center;font-size:9px;color:#6a5a40;font-style:normal}
.slot.filled i{display:none}
.slot.over{outline:2px solid #f0c060}
#grid{position:relative;width:256px;height:256px;margin:8px auto;background:#140e08 repeating-linear-gradient(0deg,#3a2810 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,#3a2810 0 1px,transparent 1px 32px);border:1px solid #4a3418}
.it{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer}
.it:hover{border-color:#f0c06088;background-color:#f0c06011}
.it.bad{background-color:#a0202044}
.it .n{position:absolute;right:2px;bottom:0;font-size:10px;color:#fff;text-shadow:0 0 2px #000}
.it .lv{position:absolute;left:2px;top:0;font-size:9px;color:#7cf;text-shadow:0 0 2px #000}
.zen{padding:0 12px 4px;color:#fd6}
.hint{padding:6px 10px 10px;color:#887;font-size:10px;line-height:1.5}
#w-char{left:10px;top:36px;width:250px}
#charstats{padding:10px 12px}
#charstats .r{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid #2a1e10}
#charstats .r b{color:#f0c060}#charstats button{margin-left:6px;background:#5a3e1a;border:0;color:#fff;border-radius:3px;cursor:pointer;width:20px}
#charstats .pts{color:#8f8;padding:6px 0}
#w-shop{left:10px;top:36px;width:310px}
#shopgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;max-height:62vh;overflow:auto}
.sh{height:72px;background:#140e08 center 4px/auto 46px no-repeat;border:1px solid #3a2810;cursor:pointer;position:relative}
.sh:hover{border-color:#f0c060}.sh span{position:absolute;bottom:2px;width:100%;text-align:center;font-size:9px;color:#fd6}
.sh.bad{opacity:.45}
#w-menu{left:50%;top:28%;transform:translateX(-50%);width:300px;text-align:center}
#w-menu button{display:block;width:80%;margin:10px auto;padding:9px;background:#1c140c;border:1px solid #5a3e1a;color:#e8d9b5;border-radius:4px;cursor:pointer}
#tip{position:fixed;z-index:20;pointer-events:none;background:#000e;border:1px solid #6b4a1f;padding:8px 10px;font-size:12px;line-height:1.55;max-width:260px;text-align:center}
#tip .nm{font-weight:bold;font-size:13px}#tip .red{color:#f66}#tip .blue{color:#7cf}#tip .gold{color:#fd6}#tip .dim{color:#998}
#drag{position:fixed;z-index:30;pointer-events:none;opacity:.85}
.btnlink{display:flex;align-items:center;justify-content:center;padding:10px 14px;background:#1c140c;border:1px solid #5a3e1a;color:#9cf;border-radius:4px;font-size:13px;text-decoration:none}
.help{font-size:11px;color:#998;text-align:center;margin:10px 0 0}
#banner{position:absolute;top:18%;left:50%;transform:translateX(-50%);padding:10px 26px;background:linear-gradient(90deg,transparent,#000c 20%,#000c 80%,transparent);color:#ffd060;font:bold 20px Georgia,serif;text-shadow:0 0 8px #000;white-space:nowrap;animation:pop .5s ease-out}
@keyframes pop{from{transform:translateX(-50%) scale(1.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#arena{position:absolute;top:48px;left:50%;transform:translateX(-50%);padding:6px 16px;background:#300c;border:1px solid #a33;color:#fdd;font-size:14px;border-radius:4px}
#online{color:#8c8;font-size:11px;margin-top:2px;text-align:right}
#evbar{text-align:right}#evbar span{display:block;color:#fd6;font-size:11px;margin-top:2px}
#w-quest{left:10px;top:36px;width:340px;max-height:78vh;display:flex;flex-direction:column}
#questlist{padding:8px 12px;overflow:auto}
#questlist h4{margin:8px 0 4px;color:#f0c060;font-size:12px}#questlist h4 small{color:#887;font-weight:normal}
.q{border:1px solid #3a2810;background:#140e08;padding:8px;margin-bottom:6px;border-radius:3px}
.q b{color:#fff}.q small{color:#998}.q p{margin:4px 0;color:#cba;line-height:1.4}
.qcls{padding:6px 8px;margin-bottom:6px;background:#1d1408;border:1px solid #5a4018;color:#dcc;font-size:12px}.qcls b{color:#ffd27a}.q.lock{opacity:.7}.q.lock .g{color:#e9a}
.q .g{color:#f99;font-size:11px}.q .g.ok{color:#8f8}.q .rw{color:#fd6;font-size:11px;margin-top:4px}
.q button{margin-top:6px;padding:5px 14px;background:linear-gradient(#c98a2a,#7a4d12);border:0;color:#fff;border-radius:3px;cursor:pointer}
.dim{color:#887}
#w-move{left:50%;top:18%;transform:translateX(-50%);width:300px}
#movelist{padding:8px}
.mv{display:flex;justify-content:space-between;padding:8px 10px;margin-bottom:4px;background:#140e08;border:1px solid #3a2810;cursor:pointer;border-radius:3px}
.mv:hover{border-color:#f0c060}.mv b{color:#fff}.mv span{color:#998;font-size:11px}.mv i{color:#f66;font-style:normal;font-weight:bold}
.mv.bad{opacity:.45}.mv.cur{border-color:#6b4a1f;background:#2a1c0e}
#nextev div{display:flex;justify-content:space-between;color:#cba}#nextev span{color:#fd6}

#preview{position:fixed;right:4vw;top:50%;transform:translateY(-50%);width:min(36vw,460px);height:min(80vh,620px);z-index:11;pointer-events:none;
  background:radial-gradient(ellipse at center 70%,#3a2810aa,transparent 65%)}
#screens.pv .panel{margin-right:min(36vw,460px)}
.ch.sel{border-color:#f0c060;background:#2a1c0e}

/* ---------- MU-style window skin (textures from Data/Interface) ---------- */
.win{background:#0a0806 url(../assets/ui/item_back01.jpg) center/100% 100% no-repeat;border:2px solid #3a2a14;box-shadow:0 0 0 1px #000,0 0 24px #000;border-radius:2px}
.win .wt{background:linear-gradient(#2a1d0c,#120a04);border-bottom:1px solid #6b4a1f;text-align:center;letter-spacing:1px;font-family:Georgia,serif}
.win .wt .x{position:absolute;right:8px;top:6px;width:16px;height:16px;background:url(../assets/ui/exit_01.jpg) center/contain;color:transparent;overflow:hidden}
.win .wt{position:relative}
.slot{background:#0c0907 var(--ico) center/contain no-repeat;border:1px solid #5a4020;opacity:1}
.slot.filled{background-image:none;background-color:#1a120a}
#w-inv{width:290px}#equip{height:256px;margin:8px auto 0;width:252px;position:relative}
#grid{background:url(../assets/ui/inventorybox2.jpg) 0 0/32px 32px repeat;border:1px solid #5a4020}
.pad{padding:10px 12px}
#w-opt{left:50%;top:22%;transform:translateX(-50%);width:300px}
#w-opt label{display:block;margin:10px 0;color:#cba}#w-opt input[type=range]{width:100%}
#w-skill{left:10px;top:36px;width:320px;max-height:78vh;overflow:auto}
.skr{padding:7px 8px;margin-bottom:5px;background:#140e08cc;border:1px solid #3a2810}.skr b{color:#fff}.skr span{color:#998;font-size:11px;display:block}
.skr.no{opacity:.5}
#w-vault{left:10px;top:36px;width:300px}
#vaultlist{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;min-height:70px;max-height:46vh;overflow:auto}
.vz{margin-top:8px;color:#fd6;font-size:12px}.vz input{width:80px;background:#000;border:1px solid #5a3e1a;color:#fff;padding:3px}
.vz button,#w-vault button{background:#1c140c;border:1px solid #5a3e1a;color:#e8d9b5;padding:3px 7px;cursor:pointer;border-radius:2px}
#w-map{right:10px;top:36px;width:276px;padding-bottom:10px}#minimap{display:block;margin:10px auto 0;width:256px;height:256px;image-rendering:pixelated;border:1px solid #5a4020}
/* ---------- chat window like the original: log, input line, emoticons, channel tabs ---------- */
#chat{position:absolute;left:4px;bottom:220px;width:min(440px,42vw);pointer-events:auto;font-size:12px;z-index:6}
#chatbox{background:linear-gradient(#0008,#000a);border:1px solid #3a2a14;border-bottom:0;height:150px;overflow-y:auto;padding:4px 6px;scrollbar-width:thin;scrollbar-color:#6b4a1f #0006}
#chat.big #chatbox{height:300px}
#chatlog div{line-height:1.55;text-shadow:0 0 2px #000,0 0 2px #000;word-break:break-word;color:#eee}
#chatlog div b{color:#ffe28a;font-weight:normal}
#chatlog .sys{color:#fd6}#chatlog .info{color:#ccc}#chatlog .notice{color:#ffd060}
#chatlog .whisper,#chatlog .whisper b{color:#ff9cf0}
#chatlog .em{font-size:15px;vertical-align:-2px}
#chatbar{display:flex;gap:2px;background:#000c;border:1px solid #3a2a14;padding:2px}
#chatbar input{background:#0d0a06;border:1px solid #4a3418;color:#fff;padding:4px 6px;font-size:12px;outline:none}
#chatbar input:focus{border-color:#b08030}
#chatin{flex:1;min-width:0}#chatwho{width:76px;color:#ff9cf0!important}#chatwho[hidden]{display:none}
#emobtn{background:#1c140c;border:1px solid #5a3e1a;width:28px;cursor:pointer;font-size:15px;padding:0}
#chattabs{display:flex;gap:1px;background:#000c;border:1px solid #3a2a14;border-top:0;padding:2px}
#chattabs button{background:linear-gradient(#3a2a18,#1a120a);border:1px solid #5a3e1a;color:#c9b48a;font-size:11px;padding:2px 7px;cursor:pointer}
#chattabs button.on{background:linear-gradient(#8a2a10,#4a1206);color:#fff;border-color:#c06030}
#chattabs .sp{flex:1}
#chatshow{position:absolute;left:4px;bottom:calc(var(--barh) + 40px);background:#1c140c;border:1px solid #5a3e1a;color:#e8d9b5;padding:3px 8px;cursor:pointer;z-index:6}
#emojipick{position:absolute;left:100%;bottom:0;margin-left:4px;background:#000d;border:1px solid #5a3e1a;padding:4px;width:236px}
#emojipick[hidden]{display:none}
#emgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;height:216px;align-content:start;overflow:hidden}
#emgrid span{font-size:19px;text-align:center;cursor:pointer;border-radius:3px;line-height:26px}
#emgrid span:hover{background:#5a3e1a}
#empages{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:4px}
#empages button{background:#1c140c;border:1px solid #5a3e1a;color:#c9b48a;font-size:11px;width:24px;cursor:pointer;padding:2px 0}
#empages button.on{background:#8a2a10;color:#fff}
#log{bottom:150px}
.classes{flex-wrap:wrap}.classes button{min-width:46%}
/* ---------- layout like the original client: full-width bar, windows docked on the right ---------- */
:root{--barh:48px}
#bar{width:640px}
#w-inv{right:0;top:0;bottom:var(--barh);width:300px;display:flex;flex-direction:column;background:#0a0806 url(../assets/ui/item_back02.jpg) center/100% 100% no-repeat;border-width:0 0 0 2px;overflow:auto}
#w-inv[hidden]{display:none!important}
#w-char{right:300px;top:0;bottom:var(--barh);width:260px;background:#0a0806 url(../assets/ui/item_back01.jpg) center/100% 100% no-repeat}
#w-quest,#w-skill{right:0;left:auto;top:0;bottom:var(--barh);max-height:none;width:320px}
#w-inv:not([hidden]) ~ #w-quest{right:300px}
#w-shop,#w-vault{left:0;top:0;bottom:var(--barh);width:310px;max-height:none}
#w-map{right:auto;left:50%;top:60px;transform:translateX(-50%)}
#skills{bottom:calc(var(--barh) + 34px)}
#log{bottom:calc(var(--barh) + 70px)}
#chat{bottom:calc(var(--barh) + 40px)}
#log{display:none}
#exp{top:-7px}
#labels .lbl.me{color:#fff;text-align:center;line-height:1.4}
#labels .lbl .bub{display:inline-block;background:#fff;color:#000;padding:2px 6px;border-radius:3px;font-size:11px;max-width:220px;white-space:normal}
#tip .nm.exc{color:#5f5}#tip .excopt{color:#8cf}
#labels .lbl.item.excl{color:#5f5;font-weight:bold}
.dmg.excd{color:#3f3;font-size:21px}

/* ---------- skill slot + popup (icons from Data/Interface/skill.jpg) ---------- */
#skillslot{position:absolute;left:304px;top:12px;width:24px;height:30px;z-index:3;cursor:pointer;pointer-events:auto;
  background:#000 url(../assets/ui/skill.jpg) 0 0/192px 192px no-repeat;border:1px solid #6b4a1f}
#skillslot span{position:absolute;left:1px;bottom:-1px;font:bold 9px Tahoma;color:#fff;text-shadow:0 0 2px #000}
#skillpop{position:absolute;left:50%;bottom:calc(var(--barh) + 12px);transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:420px;justify-content:center;
  padding:6px;background:#000a;border:1px solid #6b4a1f;pointer-events:auto}
.si{width:40px;height:40px;background:url(../assets/ui/skill.jpg) 0 0/320px 320px no-repeat;border:1px solid #5a4020;position:relative;cursor:pointer}
.si:hover,.si.sel{border-color:#f0c060;box-shadow:0 0 6px #f0c060}
.si b{position:absolute;left:2px;bottom:0;font:bold 12px Tahoma;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
.si.nomp{filter:grayscale(.8) brightness(.6)}
#tip .sd{color:#ccc;font-size:11px}
#w-vault{width:290px}
#vaultlist.vgrid{display:block;position:relative;width:256px;height:480px;margin:0 auto;overflow:hidden;background:url(../assets/ui/inventorybox2.jpg) 0 0/32px 32px repeat;border:1px solid #5a4020;max-height:none}
#w-vault .pad{overflow:auto;max-height:calc(100% - 40px)}
#w-shop{width:290px}
#shopgrid{display:block;position:relative;width:256px;height:480px;margin:8px auto;padding:0;max-height:none;overflow:hidden;background:url(../assets/ui/inventorybox2.jpg) 0 0/32px 32px repeat;border:1px solid #5a4020}
#tip{background:#000d;border:1px solid #333;min-width:200px}
#tip .nm{margin-bottom:4px}
#w-move{max-height:80vh;overflow:auto}#movelist .mv{padding:6px 10px}

/* ---------- GM tools ---------- */
#gmbadge{position:absolute;left:50%;top:6px;transform:translateX(-50%);background:linear-gradient(#5a0c0c,#2a0404);border:1px solid #d04020;color:#ffd0a0;padding:3px 12px;font-size:12px;cursor:pointer;pointer-events:auto;z-index:7;box-shadow:0 0 10px #f402;letter-spacing:.5px}
#gmbadge b{color:#ff6040;margin-right:4px}
#gmhint{position:absolute;left:50%;top:34px;z-index:9!important;transform:translateX(-50%);background:#000c;border:1px solid #c06030;color:#ffd890;padding:4px 12px;font-size:12px;z-index:7}
#gmhint[hidden]{display:none}
#w-gm{left:316px;top:40px;width:400px;max-height:calc(100vh - 140px);display:flex;flex-direction:column;z-index:8}
#w-gm[hidden]{display:none}
.gmtabs{display:flex;gap:2px;padding:6px 8px 0}.gmtabs button,.gmrow button{background:linear-gradient(#3a2a18,#1a120a);border:1px solid #5a3e1a;color:#e8d9b5;padding:4px 8px;cursor:pointer;font-size:12px}
.gmtabs button.on,.gmrow button.on{background:linear-gradient(#8a2a10,#4a1206);color:#fff;border-color:#c06030}
.gmrow button.red{color:#ff9080}
.gmp{padding:8px;overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:0}
.gmp[hidden]{display:none}
.gmp input,.gmp select{background:#0d0a06;border:1px solid #4a3418;color:#fff;padding:4px 6px;font-size:12px}
.gmrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.gmrow label{color:#cba}.gmrow input{width:56px}
.gmnote{color:#a99;font-size:11px}
.gmlist{max-height:260px;overflow:auto;border:1px solid #3a2a14;background:#0006}
.gmlist.small{max-height:150px}
.gmlist div{padding:3px 6px;border-bottom:1px solid #1e150a;cursor:pointer;display:flex;gap:6px;align-items:center}
.gmlist div:hover{background:#3a2a14}.gmlist div.on{background:#5a3010}
.gmlist .lv{color:#9cf;min-width:44px}.gmlist .nm{flex:1;color:#fff}.gmlist .here{color:#5f5;font-size:11px}.gmlist .away{color:#fa6;font-size:11px}
.gmlist button{background:#1c140c;border:1px solid #5a3e1a;color:#e8d9b5;padding:1px 6px;cursor:pointer}
.gmlist img{width:22px;height:22px;object-fit:contain}
.gmsel{color:#ffd890}
#labels .lbl .gmtag{color:#ff6040;font-weight:bold}
#shop-edit{background:#5a0c0c;border:1px solid #d04020;color:#ffd0a0;font-size:10px;padding:1px 6px;cursor:pointer;margin-left:6px}

/* ---------- MU cursors everywhere (instead of the Windows arrow / hand) ---------- */
html,body,*,*::before,*::after{cursor:url(../assets/ui/cursorpush.png) 4 2,default!important}
input[type=text],input[type=password],input:not([type]),input[type=number],textarea{cursor:text!important}
#view.attack{cursor:url(../assets/ui/cursorattack.png) 1 1,crosshair!important}
#view.talk,#labels .lbl.npc{cursor:url(../assets/ui/cursortalk.png) 12 14,pointer!important}
#labels .lbl.item,.it,.slot .it,#shopgrid .it{cursor:url(../assets/ui/cursorget.png) 12 6,pointer!important}
#view.dontmove{cursor:url(../assets/ui/cursordontmove.png) 15 15,not-allowed!important}
#view.gm{cursor:url(../assets/ui/cursorid.png) 2 2,crosshair!important}
#barfill{position:absolute;left:0;right:0;bottom:0;height:var(--barh);background:linear-gradient(#1a1712,#050403 30%,#0b0907);border-top:1px solid #3a3022;pointer-events:none}
/* ---------- login / character select over the 3D S6 scenes, loading screen ---------- */
.ptitle{text-align:center;color:#e8c070;font:bold 13px Georgia,serif;letter-spacing:1px;padding:6px 0 10px;border-bottom:1px solid #4a3418;margin-bottom:12px;text-shadow:0 0 6px #000}
body.menu3d #screens{background:radial-gradient(ellipse at center,transparent 55%,#000a 100%)}
body.menu3d #screens .panel{background:linear-gradient(#140d07ee,#0a0604f2);border:1px solid #8a6024;border-radius:3px;box-shadow:0 0 0 1px #000,0 0 30px #000c,inset 0 0 20px #0008}
.mulogo{background:url(../assets/ui/mu_logo_glow.png) center/contain no-repeat;position:relative}
.mulogo::after{content:'';position:absolute;inset:6% 4%;background:url(../assets/ui/mu_logo.png) center/contain no-repeat}
#loginlogo{display:none;position:absolute;left:50%;top:5vh;transform:translateX(-50%);width:min(460px,60vw);height:min(230px,30vw);pointer-events:none;filter:drop-shadow(0 0 20px #f80)}
#screens[data-sc=sc-login] #loginlogo{display:block}
body.menu3d #sc-login{width:min(320px,90vw);align-self:end;margin-bottom:12vh;padding:14px 18px}
body.menu3d #sc-login label{font-size:11px}
/* character select: list as a slim bar at the bottom, characters stand on the platforms */
body.menu3d #sc-chars{align-self:end;width:min(760px,96vw);margin-bottom:2vh;padding:10px 14px}
body.menu3d #sc-chars .ptitle{display:none}
body.menu3d #charlist{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
body.menu3d .ch{padding:6px 8px;gap:6px}body.menu3d .ch b{font-size:13px}
body.menu3d #screens.pv .panel{margin-right:0}
body.menu3d #sc-chars .row{margin-top:8px}
#mchars{position:fixed;inset:0;pointer-events:none;z-index:11}
#mchars[hidden]{display:none}
.mchar{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;text-align:center;background:linear-gradient(#2a1a0cdd,#0d0804ee);border:1px solid #7a5420;padding:4px 10px;min-width:96px;box-shadow:0 0 8px #000}
.mchar b{display:block;color:#fff;font-size:13px}.mchar span{display:block;color:#c9b48a;font-size:10px}.mchar .lv{color:#f0c060}
.mchar.sel{border-color:#ffd060;box-shadow:0 0 12px #f90a}.mchar.sel b{color:#ffd060}
/* loading screen */
#sc-load.big{width:100vw;height:100vh;max-width:none;border:0!important;border-radius:0;padding:0;background:#000 var(--art,none) center/var(--artfit,cover) no-repeat!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;box-shadow:none!important}
#sc-load .mulogo{width:min(380px,50vw);height:min(190px,25vw);margin-bottom:auto;margin-top:6vh;filter:drop-shadow(0 0 18px #f80)}
#sc-load:not(.big) .mulogo{width:220px;height:110px;margin:0 auto 10px}
#loadmap{color:#ffd890;font:bold 20px Georgia,serif;text-shadow:0 0 8px #000,0 0 4px #000;margin-bottom:8px}
#sc-load.big #loadbar{width:min(520px,80vw);height:14px;background:#000a url(../assets/ui/progress_back.png) center/100% 100%;border:1px solid #8a6024;border-radius:0}
#sc-load.big #loadtxt{text-shadow:0 0 4px #000;color:#ddd}
#loadtip{color:#e8d9b5;font-size:13px;margin:10px 0 7vh;text-shadow:0 0 4px #000,0 0 4px #000;max-width:80vw;text-align:center}
#sc-load:not(.big) #loadtip{display:none}
body.menu3d #view{filter:brightness(1.3) saturate(1.1)}
body.menu3d #sc-chars{width:min(820px,96vw);padding:8px 10px}
body.menu3d #charlist{display:none}
body.menu3d #sc-chars .row{display:flex;gap:6px;margin-top:0}body.menu3d #sc-chars .row+.row{margin-top:6px}
#btn-del{display:none}body.menu3d #btn-del{display:block}
body.menu3d #sc-chars .row button,body.menu3d #sc-chars .row a{padding:7px 10px;font-size:12px}
#loginlogo{width:min(380px,50vw);height:min(190px,25vw)}
.win .wt{cursor:url(../assets/ui/cursorget.png) 12 6,move!important;user-select:none}
/* ---------- backdrops of the "Tipo 99b" select-server pack ---------- */
body[data-bg=login] #screens{background:#000 url(../assets/ui/bg_login.jpg) center/cover no-repeat}
body[data-bg=select] #screens{background:#000 url(../assets/ui/bg_select.jpg) center/cover no-repeat}
body[data-bg=login] #screens::before,body[data-bg=select] #screens::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 60%,#0008 100%);pointer-events:none}
body[data-bg] #view{filter:none}
#screens[data-sc=sc-chars],#screens[data-sc=sc-create]{z-index:10}
body[data-bg=select] #view{z-index:10;pointer-events:none}
body[data-bg=select] #screens{z-index:9}
#screens[data-sc=sc-chars] ~ #view{pointer-events:auto}
/* login box: centered, fixed size so switching Login / Create account does not jump */
#sc-login{width:min(330px,92vw)!important;height:auto;margin-top:20vh!important;box-sizing:border-box;padding:0!important;margin-bottom:0!important;align-self:center!important;
  background:linear-gradient(#0d0906f2,#050302f5)!important;border:1px solid #9a7030!important;border-radius:2px!important;
  box-shadow:0 0 0 1px #000,0 0 0 3px #3a2810,0 0 0 4px #000,0 10px 40px #000!important;display:flex;flex-direction:column;overflow:hidden}
#sc-login .ptitle{margin:0;padding:8px 0;background:linear-gradient(#3a2810,#160e06);border-bottom:1px solid #9a7030;color:#f0d080;font-size:13px}
#sc-login .tabs{display:flex;gap:0;margin:10px 16px 6px}
#sc-login .tabs button{flex:1;padding:6px;font-size:12px;border-radius:0;background:#140e08;border:1px solid #4a3418;color:#b9a47a}
#sc-login .tabs button.sel{background:linear-gradient(#6a4416,#3a2408);color:#fff;border-color:#9a7030}
#sc-login form{padding:0 16px;overflow:auto;flex:1}
#sc-login label{display:block;font-size:11px;color:#c9b48a;margin:6px 0 2px}
#sc-login input{width:100%;box-sizing:border-box;padding:6px 8px;font-size:12px;background:#000;border:1px solid #5a4020;color:#fff;border-radius:0}
#sc-login input:focus{border-color:#d0a050;outline:none;box-shadow:0 0 6px #c80}
#sc-login button.main{width:100%;margin-top:10px;padding:8px;border-radius:0;font-size:13px;letter-spacing:1px}
#sc-login .help{font-size:10px;margin:6px 0 0;color:#988}
#sc-login .msg{padding:0 16px 8px;min-height:14px;font-size:11px}
#screens[data-sc=sc-login] #loginlogo{display:block;top:2vh;width:min(320px,42vw);height:min(160px,21vw)}
body[data-bg=select] #sc-chars{align-self:end;width:min(820px,96vw);margin-bottom:2vh;padding:8px 10px}
body[data-bg=select] #sc-create{align-self:center}
#shop-gm{display:block;width:calc(100% - 16px);margin:6px 8px 8px;padding:7px;background:linear-gradient(#8a1a0a,#4a0804);border:1px solid #e05030;color:#fff;font-weight:bold;cursor:pointer;letter-spacing:.5px}
#shop-gm[hidden]{display:none}
#srvtype{color:#e0a0a0;font-size:10px}
#sc-login form{flex:none;padding-bottom:4px}
/* ---------- bar like the original client: crystal gems, numbers inside the bar, EXP in the top channel ---------- */
.orb.hp .fill{background-image:url(../assets/ui/gem_red.png)!important}.orb.mp .fill{background-image:url(../assets/ui/gem_blue.png)!important}
.orb.hp.poison .fill{background-image:url(../assets/ui/gem_green.png)!important}
#hptxt,#mptxt{top:36px!important;width:64px!important;font:bold 8px/10px Arial,sans-serif!important;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
#hptxt{left:30px!important;text-align:right}#mptxt{left:546px!important;text-align:left}
#exp{left:214px!important;right:auto!important;width:198px;top:10px!important;height:4px!important;background:#0008!important;border:0!important;z-index:3}
#expfill{background:linear-gradient(#fff4a0,#e8c040 60%,#a07010)!important}
#exptxt{display:none}
#explv{position:absolute;left:413px;top:3px;width:18px;text-align:center;font:bold 8px/14px Arial,sans-serif;color:#ffe080;z-index:3;text-shadow:0 0 2px #000}
#lvbox{font:bold 8px/15px Arial,sans-serif!important;color:#e0d0b0!important;letter-spacing:1px}
/* ---------- guild ---------- */
#w-guild{left:50%;top:12%;transform:translateX(-50%);width:340px;max-height:72vh;overflow:auto}
#gu-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.gunote{color:#a99;font-size:11px;margin:4px 0}.gubox{border:1px solid #3a2a14;background:#0006;padding:8px}
.gubox b{color:#f0c060}.gubox input,#gu-body input{flex:1;background:#0d0a06;border:1px solid #4a3418;color:#fff;padding:4px 6px}
.gulist{max-height:220px;overflow:auto;border:1px solid #3a2a14;background:#0006}
.gulist div{display:flex;gap:6px;align-items:center;padding:3px 6px;border-bottom:1px solid #1e150a}
.gulist .nm{flex:1;color:#fff}.gulist .away{color:#c9b48a;font-size:11px}.gulist .on{color:#5f5}.gulist .off{color:#555}
.gulist button,#gu-body .gmrow button{background:linear-gradient(#3a2a18,#1a120a);border:1px solid #5a3e1a;color:#e8d9b5;padding:3px 8px;cursor:pointer}
#gu-body .gmrow button.red{color:#ff9080}
.guhead{display:flex;gap:10px;align-items:center}.guhead b{color:#ffd060;font-size:15px}
.gumark{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,#8a2a10,#2a0a04);border:1px solid #d08040;color:#fff;font:bold 18px Georgia,serif}
#labels .lbl .gutag{color:#80d0ff;font-size:10px}
#chatlog .guildmsg,#chatlog .guildmsg b{color:#80d0ff}
/* ---------- compact Move window (fits small screens / phones) ---------- */
#w-move{width:min(440px,94vw)!important;max-height:min(520px,78vh)!important;display:flex;flex-direction:column;overflow:hidden!important}
#w-move[hidden]{display:none!important}
#movelist{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:6px;overflow:auto;flex:1;min-height:0}
#movelist .mv{padding:4px 7px!important;margin:0;font-size:11px;border-radius:0;align-items:center;min-height:0}
#movelist .mv b{font-size:11px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#movelist .mv span{font-size:10px;white-space:nowrap;margin-left:4px}
#movelist .mv.cur{border-color:#c98a2a;background:#2a1c0e}
#w-move .hint{padding:4px 8px;font-size:10px;max-height:64px;overflow:auto;border-top:1px solid #3a2810}
#w-move .hint #nextev{display:block}#w-move #nextev div{display:flex;justify-content:space-between}
@media (max-width:420px){#movelist{grid-template-columns:1fr}}
/* guild window docked right, like the original client */
#w-guild{left:auto!important;right:0!important;top:0!important;bottom:var(--barh)!important;transform:none!important;width:300px!important;max-height:none!important;display:flex;flex-direction:column;
  background:#0a0806 url(../assets/ui/item_back02.jpg) center/100% 100% no-repeat!important;overflow:hidden}
#w-guild[hidden]{display:none!important}
#gu-body{flex:1;min-height:0;padding:10px 16px}
.guhdr{margin:2px 10px 10px;padding:4px;text-align:center;background:#000c;border:1px solid #5a4020;color:#ddd;font:12px Arial}
.gumembers{flex:1;min-height:120px;overflow:auto;padding:4px 6px}
.gumembers div{display:flex;align-items:center;gap:6px;padding:3px 2px;font-size:12px}
.gumembers .gx{color:#e8a030;width:14px;text-align:center}.gumembers .nm{flex:1;color:#ddd}.gumembers .nm.me{background:#2a3a8a;color:#fff;padding:0 3px}
.gumembers .off .nm{color:#888}.gumembers .lv{color:#e8c040;font-size:11px}
.gumembers .gk{width:20px;height:16px;background:linear-gradient(#5a4a30,#2a2010);border:1px solid #8a7040;color:#e8c040;font-size:10px;padding:0;cursor:pointer}
.gumembers span.gk{background:none;border:0}
.gunotice{display:flex;gap:4px;padding:6px;color:#c9b48a;font-size:11px;min-height:18px}.gunotice input{flex:1;background:#000;border:1px solid #4a3418;color:#fff;padding:3px}
.gunotice button{background:#2a1c0e;border:1px solid #6b4a1f;color:#e8d9b5;cursor:pointer}
.guemblem{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;opacity:.9}
.guemblem span{width:64px;height:64px;display:grid;place-items:center;background:radial-gradient(#5a5a5a,#1a1a1a);border:2px solid #888;border-radius:50%;color:#ddd;font:bold 34px Georgia,serif;text-shadow:0 0 6px #000}
.guemblem b{color:#ddd;letter-spacing:3px;font:bold 15px Georgia,serif;text-transform:uppercase}.guemblem i{color:#999;font-size:10px;font-style:normal}
.gufoot{display:flex;align-items:center;gap:8px;padding:6px 4px;color:#998;font-size:10px}
.gufoot button{width:34px;height:30px;background:linear-gradient(#5a4a30,#2a2010);border:1px solid #c0a060;color:#f0c040;font-size:16px;cursor:pointer}
#labels .lbl .gutag{color:#fff;background:#3a7a20cc;padding:0 3px;font-size:10px}
.gmark{image-rendering:pixelated;border:1px solid #666;background:#0008;display:inline-block;flex:none}
.gmark.letter{display:inline-grid;place-items:center;color:#ddd;font-family:Georgia,serif;background:radial-gradient(#555,#1a1a1a);border-radius:50%}
.guname{display:flex;align-items:center;gap:10px;margin:4px 6px 10px}.guname label{color:#ddd;font:bold 11px Arial}.guname input{flex:1;background:#000;border:1px solid #8a7040;color:#fff;padding:5px 8px}
.gugrid{display:grid;grid-template-columns:repeat(8,22px);grid-template-rows:repeat(8,22px);gap:1px;background:#333;border:2px solid #000;width:max-content;margin:4px auto 10px;cursor:crosshair;user-select:none;touch-action:none}
.gugrid i{display:block;background:transparent;box-shadow:inset 0 0 0 1px #0003}
.gugrid i[style*="transparent"]{background:repeating-conic-gradient(#3a3a3a 0 25%,#2a2a2a 0 50%) 0 0/8px 8px!important}
.gucol{display:flex;gap:10px;align-items:center;margin:0 6px}.gucol span{width:34px;height:34px;border:1px solid #888;flex:none}.gucol p{color:#ccc;font-size:11px;margin:0}
.gupal{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin:8px 6px}.gupal i{height:24px;border:1px solid #000;cursor:pointer}.gupal i.on{outline:2px solid #fff}
.gupal i.x{background:repeating-linear-gradient(45deg,#000 0 3px,#555 3px 5px)!important}
.gunav{display:flex;justify-content:center;gap:6px;margin:10px 0}.gunav button{width:80px;padding:4px;background:linear-gradient(#3a3a3a,#1a1a1a);border:1px solid #777;color:#ccc;cursor:pointer}
.guconfirm{display:flex;flex-direction:column;align-items:center;gap:6px;margin:20px 0}.guconfirm b{color:#ffd060;font:bold 16px Georgia,serif;letter-spacing:2px}
.guemblem .gmark{border:2px solid #888}
.gulist .gmark{margin-right:2px}
/* ---------- Storage next to the Inventory, like the original ---------- */
#w-vault{left:auto!important;right:300px!important;top:0!important;bottom:var(--barh)!important;width:300px!important;max-height:none!important;transform:none!important;
  background:#0a0806 url(../assets/ui/item_back02.jpg) center/100% 100% no-repeat!important;display:flex;flex-direction:column}
#w-vault[hidden]{display:none!important}
#w-vault .pad{flex:1;min-height:0;overflow:auto;padding:8px 20px!important;display:flex;flex-direction:column;align-items:center;gap:6px}
#vaultlist.vgrid{flex:none}
.vzrow{display:flex;align-items:center;gap:8px;width:256px}.vzrow label{color:#ccc;font-size:11px;width:72px}
.vzrow b{flex:1;background:#000;border:1px solid #5a4020;color:#ff4040;font:12px Arial;padding:3px 6px;text-align:right}
.vzrow.fee label{color:#ff5050}.vzrow.fee b{background:none;border:0;color:#ddd;text-align:left}
.vzbtns{display:flex;gap:6px;width:256px}.vzbtns input{flex:1;min-width:0;background:#000;border:1px solid #5a4020;color:#fff;padding:3px 6px}
.vzbtns button{width:36px;height:30px;background:linear-gradient(#5a4a30,#2a2010);border:1px solid #c0a060;color:#f0d080;font-size:15px;cursor:pointer}
#w-vault .hint{font-size:10px;color:#999;width:256px}
#zen{color:#ff4040}
#w-inv .zen{display:flex;align-items:center;gap:8px;color:#ccc}#w-inv .zen b{flex:1;background:#000;border:1px solid #5a4020;color:#ff4040!important;font:12px Arial;padding:3px 6px;text-align:right}

/* ================= window skin from "Interfaz Downgrade 99b" (newui): every box except the chat ================= */
.win:not(#w-menu){
  background-color:#1a1a1a!important;
  background-image:url(../assets/ui/newui/newui_item_back01.png),url(../assets/ui/newui/newui_item_back03.png),url(../assets/ui/newui/newui_item_back02-L.png),url(../assets/ui/newui/newui_item_back02-R.png),url(../assets/ui/newui/newui_msgbox_back.png)!important;
  background-position:top center,bottom center,left 0 top 64px,right 0 top 64px,center!important;
  background-size:100% 64px,100% 45px,21px 320px,21px 320px,100% 100%!important;
  background-repeat:no-repeat,no-repeat,repeat-y,repeat-y,no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:0 0 0 1px #000,4px 4px 18px #000c!important;padding-bottom:30px;box-sizing:border-box}
.win:not(#w-menu) > .wt{background:none!important;border:0!important;height:42px;line-height:30px;padding:6px 40px 0!important;text-align:center;color:#fff!important;
  font:bold 12px Arial,sans-serif!important;letter-spacing:.5px!important;text-shadow:0 0 3px #000}
.win:not(#w-menu) > .wt .x{position:absolute;right:14px;top:14px;width:22px;height:18px;background:url(../assets/ui/newui/newui_exit_00.png) 0 0/22px 36px no-repeat!important;border:0;color:transparent!important;font-size:0}
.win:not(#w-menu) > .wt .x:hover{background-position:0 -18px!important}
.win:not(#w-menu) > :not(.wt){margin-left:12px;margin-right:12px}
.win button:not(.gk):not(.x):not([data-c]):not(.gmtabs button){background:url(../assets/ui/newui/newui_btn_empty.png) 0 0/100% 300% no-repeat!important;border:0!important;color:#ddd!important;border-radius:0!important;min-height:22px;text-shadow:0 0 2px #000}
.win button:not(.gk):not(.x):not([data-c]):hover{background-position:0 50%!important;color:#fff!important}
.win input,.win select{background:#000!important;border:1px solid #555!important;color:#fff!important;border-radius:0!important}
/* Zen boxes like newui_item_money */
#w-inv .zen,.vzrow:not(.fee){background:url(../assets/ui/newui/newui_item_money.png) center/100% 100% no-repeat;height:26px;padding:0 6px 0 34px;box-sizing:border-box;align-items:center}
#w-inv .zen{font-size:0!important;margin:6px 16px}
#w-inv .zen b,.vzrow:not(.fee) b{background:none!important;border:0!important;color:#ff4040!important;font:bold 12px Arial!important}
.vzrow:not(.fee) label{display:none}
/* item grids: dark slots with fine lines (newui_item_table) */
#grid,.vgrid,#shopgrid{background-color:#0b0b0b!important;background-image:linear-gradient(#2c2c2c 1px,transparent 1px),linear-gradient(90deg,#2c2c2c 1px,transparent 1px)!important;background-size:32px 32px!important;outline:1px solid #555;box-shadow:0 0 0 2px #000}
#equip .slot{background-color:#0d0d0d!important;border:1px solid #444!important;background-image:var(--ico)!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
#w-inv #equip{width:256px!important;height:232px!important;margin:6px auto 8px!important;position:relative}
#equip .slot{box-sizing:border-box;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #222}
/* ---------- shining items +7..+15 / excellent (inventory, vault, shop, equipment) ---------- */
.it.g7{filter:drop-shadow(0 0 2px #fff8) brightness(1.08)}
.it.g9{filter:drop-shadow(0 0 3px #ffd860) brightness(1.15);animation:gpulse9 2.4s ease-in-out infinite}
.it.g11{filter:drop-shadow(0 0 4px #60c8ff) brightness(1.2);animation:gpulse11 2s ease-in-out infinite}
.it.g13{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #ffd040) brightness(1.1) saturate(1.2);animation:gpulse13 1.4s ease-in-out infinite}
.it.gexc:not(.g9):not(.g11):not(.g13){filter:drop-shadow(0 0 3px #40ff60) brightness(1.1)}
.it.gexc.g13{filter:drop-shadow(0 0 5px #60ff80) drop-shadow(0 0 9px #ffd040) brightness(1.3) saturate(1.3)}
@keyframes gpulse9{50%{filter:drop-shadow(0 0 6px #ffe080) brightness(1.3)}}
@keyframes gpulse11{50%{filter:drop-shadow(0 0 7px #90e0ff) brightness(1.4)}}
@keyframes gpulse13{0%,100%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #ffd040) brightness(1.08) saturate(1.2)}50%{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 11px #ff9020) brightness(1.3) saturate(1.35)}}
.it.g13::after,.it.g11::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#fff8 50%,transparent 65%) -150% 0/250% 100% no-repeat;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;animation:gsheen 2.2s linear infinite;mix-blend-mode:screen}
.it.g11::after{animation-duration:3.4s;opacity:.6}
@keyframes gsheen{to{background-position:150% 0}}
/* Chaos Machine */
#w-chaos{left:auto!important;right:300px!important;top:0!important;bottom:var(--barh)!important;width:300px!important;transform:none!important;display:flex;flex-direction:column}
#w-chaos[hidden]{display:none!important}
#w-chaos .pad{padding:8px 20px!important;display:flex;flex-direction:column;align-items:center;gap:8px}
#chaosgrid{position:relative;width:256px;height:128px;background-color:#0b0b0b;background-image:linear-gradient(#2c2c2c 1px,transparent 1px),linear-gradient(90deg,#2c2c2c 1px,transparent 1px);background-size:32px 32px;outline:1px solid #555;box-shadow:0 0 0 2px #000,0 0 20px #20a0ff40}
#chaosinfo{width:256px;font-size:11px;color:#ccc;line-height:1.5}#chaosinfo b{color:#ffd060;font-size:12px}#chaosinfo .cr{color:#ddd;margin-top:4px}#chaosinfo i{color:#ff6040;font-style:normal;font-weight:bold}
#chaos-go{width:120px;height:28px;font-weight:bold}#chaos-go:disabled{opacity:.45}
#w-chaos .hint{width:256px;font-size:10px;color:#999}
/* chat stays behind every window */
.win{z-index:8}#chat,#chatshow{z-index:4!important}
/* ---------- animated login / select backdrop: rocking ships, moving sea, glowing sun, mist ---------- */
#bgscene{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:none}
body[data-bg=login] #bgscene,body[data-bg=select] #bgscene{display:block}
body[data-bg=login] #screens,body[data-bg=select] #screens{background:#000!important}
#bgscene .bgimg{position:absolute;inset:-4%;background:center/cover no-repeat;animation:rock 9s ease-in-out infinite;transform-origin:50% 70%}
body[data-bg=login] #bgscene .bgimg{background-image:url(../assets/ui/bg_login.jpg)}
body[data-bg=select] #bgscene .bgimg{background-image:url(../assets/ui/bg_select.jpg);animation:breathe 14s ease-in-out infinite}
@keyframes rock{0%,100%{transform:translateY(0) rotate(0) scale(1.02)}25%{transform:translateY(-7px) rotate(.35deg) scale(1.025)}50%{transform:translateY(4px) rotate(0) scale(1.02)}75%{transform:translateY(-5px) rotate(-.35deg) scale(1.025)}}
@keyframes breathe{0%,100%{transform:scale(1.02)}50%{transform:scale(1.05) translateY(-4px)}}
.bgwater{position:absolute;left:-10%;right:-10%;top:47%;bottom:0;opacity:.28;mix-blend-mode:screen;
  background:repeating-linear-gradient(176deg,transparent 0 14px,#9cd8ff55 15px,transparent 17px 30px),repeating-linear-gradient(4deg,transparent 0 22px,#ffffff33 23px,transparent 25px 44px);
  -webkit-mask:linear-gradient(transparent,#000 15%);mask:linear-gradient(transparent,#000 15%);animation:waves 7s linear infinite}
.bgwater.w2{opacity:.18;animation:waves2 11s linear infinite;background-size:180% 100%}
@keyframes waves{from{background-position:0 0,0 0}to{background-position:-300px 30px,240px -20px}}
@keyframes waves2{from{background-position:0 0,0 0}to{background-position:400px 20px,-200px 40px}}
body[data-bg=select] .bgwater{display:none}
.bgsun{position:absolute;left:38%;top:2%;width:30%;height:42%;background:radial-gradient(ellipse,#fff4c0aa,#ffb04040 40%,transparent 70%);mix-blend-mode:screen;animation:sun 5s ease-in-out infinite}
body[data-bg=select] .bgsun{left:30%;top:0;width:45%;background:radial-gradient(ellipse,#fffbe066,transparent 65%)}
@keyframes sun{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.bgmist{position:absolute;inset:0;background:radial-gradient(ellipse 60% 20% at 20% 45%,#ffffff18,transparent),radial-gradient(ellipse 50% 15% at 80% 40%,#ffffff14,transparent);animation:mist 20s linear infinite;background-size:200% 100%}
@keyframes mist{from{background-position:0 0}to{background-position:-200% 0}}
#musicbtn{position:absolute;right:14px;top:12px;z-index:12;width:34px;height:34px;border-radius:50%;background:#000a;border:1px solid #c09040;color:#ffd890;font-size:17px;cursor:pointer}
#musicbtn.off{opacity:.45;text-decoration:line-through}
body:not([data-bg=login]):not([data-bg=select]) #musicbtn{display:none}
#screens .panel,#loginlogo,#mchars{position:relative;z-index:3}
#loginlogo{position:absolute}#mchars{position:fixed}
.bgwater{opacity:.13;top:49%}.bgwater.w2{opacity:.09}
.gmopts{font-size:11px;color:#cba}.gmopts label{display:flex;align-items:center;gap:3px}.gmopts select{padding:2px!important}
#gm-ilist.gmlist{max-height:260px}
.gmgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gmgrid label{display:flex;flex-direction:column;gap:2px;color:#cba;font-size:11px}.gmgrid input,.gmgrid select{width:100%;box-sizing:border-box}
#w-gm{width:480px}.gmtabs{flex-wrap:wrap}
#gm-plist div button{padding:1px 5px;font-size:10px}
/* monster name + life bar */
#labels .lbl.mon{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:#ffe0c0;pointer-events:auto}
#labels .lbl.mon .mhp{width:46px;height:4px;background:#300;border:1px solid #000;box-shadow:0 0 2px #000}
#labels .lbl.mon .mhp i{display:block;height:100%;width:100%;background:linear-gradient(#ff5040,#a01010)}
#labels .lbl.mon.boss .mn{color:#ff9050;font-weight:bold}#labels .lbl.mon.boss .mhp{width:80px}
#labels .lbl.mon.gold .mn{color:#ffd040}
#labels .lbl.mon.tgt .mn{color:#fff;font-weight:bold}

#gm-give{border-top:1px solid #6a5a3a;margin-top:6px;padding-top:4px}.gggrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;font-size:11px;color:#8f8;margin:4px 0}.gggrid label{display:flex;gap:4px;align-items:center}#gg-list div.sel{background:#5a3e1a}#gg-sel img{width:28px;height:28px;vertical-align:middle;margin-right:6px}
/* inventory: only as tall as its content (no empty space under the hint) */
#w-inv{bottom:auto!important;height:auto!important;max-height:calc(100vh - var(--barh));padding-bottom:14px}
.ggcls{font-size:11px;color:#cde;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:4px 0}.ggcls label{display:flex;gap:3px;align-items:center}
#w-gm .gmlist.small{max-height:220px}
/* original 3D login scene (World78): no painted backdrop */
body.login3d[data-bg=login] #bgscene{display:none}
body.login3d[data-bg=login] #screens{background:radial-gradient(ellipse at center,transparent 60%,#0006 100%)!important}
/* original 3D character select scene (World79) */
body.select3d[data-bg=select] #bgscene{display:none}
body.select3d[data-bg=select] #screens{background:radial-gradient(ellipse at center,transparent 60%,#0006 100%)!important}
body.select3d[data-bg=select] #view{z-index:0!important}
/* Season 6 skill icons are 20x28 */
.si{width:32px!important;height:45px!important}
#skillslot{width:21.5px!important;height:30px!important}
.skr .ski{display:inline-block;width:20px;height:28px;vertical-align:middle;margin-right:6px;float:left;border:1px solid #5a4020}
/* bottom bar buttons: hit areas exactly over the three painted icons, hover + pressed state */
#mb-char,#mb-inv,#mb-menu{top:17px!important;width:26px!important;height:27px!important;border-radius:3px;transition:box-shadow .1s,background .1s}
#mb-char{left:348px!important}#mb-inv{left:409px!important}#mb-menu{left:378px!important}
#mb-char:hover,#mb-inv:hover,#mb-menu:hover{background:#ffe0a022;box-shadow:inset 0 0 6px #ffd27a}
#mb-char.on,#mb-inv.on,#mb-menu.on{background:#00000055;box-shadow:inset 0 0 8px #ffb030,0 0 4px #ffb030}
#mb-char:active,#mb-inv:active,#mb-menu:active{transform:translateY(1px)}
/* Character / Storage / Shop: only as tall as their content */
#w-char{bottom:auto!important;height:auto!important;max-height:calc(100vh - var(--barh));padding-bottom:12px}
#w-vault{bottom:auto!important;height:auto!important;max-height:calc(100vh - var(--barh))}
#w-vault .pad{flex:none!important;padding-bottom:14px!important}
#w-shop{bottom:auto!important;height:auto!important;max-height:calc(100vh - var(--barh));padding-bottom:10px}
/* compact Storage: 8 x 15 cells of 26px */
#w-vault{width:250px!important}
#vaultlist.vgrid{width:208px!important;height:390px!important;background-size:26px 26px!important}
#w-vault .vzrow,#w-vault .vzbtns,#w-vault .hint{width:208px!important}
#w-vault .pad{padding:6px 12px 12px!important;gap:5px!important}
#w-vault .vzrow label{width:60px}

/* GM: loading screen tab */
.glimgs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;max-height:190px;overflow:auto}
.glimg{position:relative;width:112px;height:63px;background:#000 center/cover no-repeat;border:1px solid #6a5a3a;cursor:pointer;flex:none}
.glimg:hover{border-color:#ffd27a}
.glimg button{position:absolute;right:2px;top:2px;width:18px;height:18px;padding:0;line-height:16px;background:#400a;border:1px solid #a33;color:#fff;cursor:pointer;font-size:11px}
#gl-maplist .glimg{width:56px;height:32px}
#gl-maplist .gmli{display:flex;align-items:center;gap:8px;padding:2px 4px}
#gl-tipstxt{width:100%;box-sizing:border-box;background:#000;color:#e8d9b5;border:1px solid #5a4020;font:12px Arial;resize:vertical}
.gmbtn{display:inline-block;background:#1c140c;border:1px solid #5a3e1a;color:#e8d9b5;padding:3px 8px;cursor:pointer;border-radius:2px}
.gmbtn:hover{border-color:#c0a060}
#loadprev{position:fixed;inset:0;z-index:100;cursor:pointer}
#loadprev .sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
#loadprev .mulogo{width:min(380px,50vw);height:min(190px,25vw);margin:6vh 0 auto;filter:drop-shadow(0 0 18px #f80)}
#loadprev .lm{color:#ffd890;font:bold 20px Georgia,serif;text-shadow:0 0 8px #000;margin-bottom:8px}
#loadprev .lb{width:min(520px,80vw);height:14px;background:#000a url(../assets/ui/progress_back.png) center/100% 100%;border:1px solid #8a6024}
#loadprev .lb i{display:block;height:100%;width:60%;background:linear-gradient(#ffb040,#a05010)}
#loadprev .lt{color:#e8d9b5;font-size:13px;margin:10px 0 7vh;text-shadow:0 0 4px #000;max-width:80vw;text-align:center}
.ggset{display:flex;gap:4px;margin-top:4px}.ggset span{width:40px;height:40px;background:#0008;border:1px solid #5a4020;display:flex;align-items:center;justify-content:center}.ggset img{max-width:38px;max-height:38px}
#gg-clsf{max-width:130px}
/* every docked window is only as tall as its content (scrolls if it ever gets taller than the screen) */
#w-guild,#w-quest,#w-skill,#w-chaos{bottom:auto!important;height:auto!important;max-height:calc(100vh - var(--barh))!important;overflow:auto;padding-bottom:12px}
#w-guild #gu-body{flex:none!important}
/* admin / GM announcement: centred like the event banners, smaller letters, can be long (wraps) */
#banner.notice{font:bold 14px Arial,sans-serif;color:#ffe9a8;white-space:pre-line;max-width:min(760px,70vw);text-align:center;padding:8px 40px;letter-spacing:.2px}
/* ---- other players & party */
#labels .lbl.rp{color:#e8e8ff;text-align:center;line-height:1.35}
#labels .lbl.rp .pmate{color:#7fff7f;font-weight:bold}
#labels .lbl .php{width:54px;height:4px;margin:2px auto 0;background:#300;border:1px solid #000}#labels .lbl .php i{display:block;height:100%;background:#e22}
#partyhud{position:absolute;left:8px;top:34px;width:172px;pointer-events:auto;font:11px Arial,sans-serif;color:#ddd;z-index:5}
#partyhud[hidden]{display:none}
#partyhud .pth{display:flex;align-items:center;gap:6px;padding:2px 4px;background:#000a;border:1px solid #5a4020;color:#f0c060;font-weight:bold}
#partyhud .pth span{color:#bbb;font-weight:normal;flex:1}
#partyhud .pth button,#partyhud .ptk{background:#2a1a0c;border:1px solid #6a4a20;color:#e8d9b5;font-size:10px;padding:0 5px;cursor:pointer}
#partyhud .ptm{position:relative;margin-top:2px;padding:3px 5px 4px;background:#000a;border:1px solid #3a2a14}
#partyhud .ptm.me{border-color:#6a5a2a}#partyhud .ptm.away{opacity:.55}
#partyhud .ptn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#partyhud .ptn b{color:#ffd040}#partyhud .ptn span{color:#aaa}#partyhud .ptn i{color:#9cf;font-style:normal}
#partyhud .pbar{height:5px;margin-top:2px;background:#111;border:1px solid #000}#partyhud .pbar i{display:block;height:100%}
#partyhud .pbar.hp i{background:linear-gradient(#f44,#a00)}#partyhud .pbar.mp{height:3px}#partyhud .pbar.mp i{background:linear-gradient(#58f,#14a)}
#partyhud .ptk{position:absolute;right:3px;top:2px}
#pinvite{position:absolute;left:50%;top:30%;transform:translateX(-50%);pointer-events:auto;background:#0d0a06ee;border:1px solid #8a6024;padding:12px 18px;color:#e8d9b5;font:13px Arial,sans-serif;text-align:center;z-index:30;box-shadow:0 0 18px #000}
#pinvite[hidden]{display:none}#pinvite b{color:#ffd060}
#pinvite .pib{margin-top:10px;display:flex;gap:10px;justify-content:center}
#pinvite button,#pmenu button{background:linear-gradient(#3a2a18,#1a120a);border:1px solid #6a4a20;color:#e8d9b5;padding:4px 12px;cursor:pointer}
#pinvite button:hover,#pmenu button:hover{border-color:#d0a050;color:#fff}
#pmenu{position:fixed;pointer-events:auto;background:#0d0a06f0;border:1px solid #8a6024;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:150px;z-index:40;font:12px Arial,sans-serif}
#pmenu[hidden]{display:none}#pmenu .pmh{color:#ffd060;font-weight:bold;padding:0 2px 3px}#pmenu .pmh span{color:#aaa;font-weight:normal;font-size:11px}
#chatlog .partymsg{color:#8fd8ff}
/* captcha + account */
.capt{display:flex;gap:6px;align-items:center;margin:8px 0 4px;flex-wrap:wrap}
.capt img{width:170px;height:56px;border:1px solid #6a4a20;border-radius:2px;image-rendering:auto;background:#000}
.capt .cref{width:30px;height:30px;padding:0;font-size:16px;cursor:pointer}
.capt input{flex:1;min-width:120px;text-transform:uppercase;letter-spacing:3px}
.capt[hidden]{display:none}
#sc-login .help a{color:#e0b060}
.optacc{border-top:1px solid #4a3418;border-bottom:1px solid #4a3418;padding:6px 0;margin:6px 0}
.optacc b{color:#f0c060;font-size:12px}
#o-accf{display:flex;flex-direction:column;gap:4px;margin-top:6px}
#o-accf[hidden]{display:none}#o-accf input[hidden]{display:none}
#o-accf input{background:#0d0a06;border:1px solid #4a3418;color:#fff;padding:4px 6px}
#o-accf .omsg{font-size:11px;color:#f88}#o-accf .omsg.ok{color:#8f8}
#labels .lbl .gmtag.gm{color:#ffb040}
/* GM window: bigger, resizable, nothing cut */
#w-gm{width:min(620px,calc(100vw - 340px))!important;max-height:calc(100vh - var(--barh) - 50px)!important;resize:both;overflow:hidden;min-width:420px;min-height:300px}
#w-gm .gmp{overflow:auto;flex:1;min-height:0}
#w-gm .gmrow{flex-wrap:wrap}
#w-gm .gmlist{max-height:none!important;min-height:120px;flex:1 1 auto}
#w-gm .gmlist.small{max-height:220px!important;min-height:0}
#gn-list .gmli{display:flex;align-items:center;gap:4px;padding:3px 4px;border-bottom:1px solid #2a1e10}
#gn-list .gmli button{padding:1px 7px}#gn-list .gmli button.on{border-color:#4f4;color:#8f8}
#gn-list .dim{color:#998;font-size:11px}
/* server closing / disconnected */
#srvdown{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0008;pointer-events:auto}
#srvdown[hidden]{display:none}
#srvdown.off{background:#000c}
#srvdown .sdbox{min-width:360px;padding:22px 34px;text-align:center;background:#0d0a06f2;border:1px solid #8a6024;box-shadow:0 0 30px #000;color:#e8d9b5;font:14px Arial,sans-serif}
#srvdown .sdt{color:#ff6040;font:bold 20px Georgia,serif;letter-spacing:1px}
#srvdown .sdn{color:#ffd060;font:bold 64px Georgia,serif;margin:8px 0;min-height:10px}
#srvdown .sdm{color:#bba;font-size:12px}
#srvdown button{margin-top:14px;background:linear-gradient(#c98a2a,#7a4d12);border:0;color:#fff;padding:9px 22px;font-weight:bold;cursor:pointer;border-radius:3px}

#w-bug{left:50%;top:18%;transform:translateX(-50%);width:380px}
#w-bug textarea{width:100%;box-sizing:border-box;background:#000;border:1px solid #5a4a2c;color:#fff;font:13px Tahoma,sans-serif;padding:6px;resize:vertical;margin:6px 0}
.bugtxt{margin:2px 0;color:#cba;font-size:12px;line-height:1.4}.bugtxt.dim{color:#887;margin-top:8px}
a.contact{color:#e8c070}.logincontact{text-align:center;color:#887;font-size:11px;margin-top:10px}

body.select3d #sc-create{position:absolute;left:4vw;top:50%;transform:translateY(-50%);margin:0;width:min(400px,92vw)}

#w-helper{left:50%;top:16%;transform:translateX(-50%);width:330px}
.helperpad label{display:flex;justify-content:space-between;align-items:center;margin:5px 0;color:#cba;font-size:12px}
.helperpad select{background:#000;border:1px solid #5a4a2c;color:#fff;padding:3px 5px;font:12px Tahoma,sans-serif;min-width:150px}
.helperpad .hpk{color:#cba;font-size:12px;margin:8px 0;display:flex;flex-wrap:wrap;gap:4px 10px}.helperpad .hpk label{display:inline-flex;gap:3px;margin:0}
#helperon{position:absolute;top:44px;left:50%;transform:translateX(-50%);padding:3px 14px;background:#0a3a12cc;border:1px solid #3c9a50;color:#9f9;font:bold 12px Tahoma,sans-serif;letter-spacing:1px;pointer-events:none;z-index:5}
#helperon small{color:#8c8;font-weight:normal;letter-spacing:0}

/* ================= phones / tablets (body.mobile) ================= */
body.mobile{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.mobile canvas{touch-action:none}
#mob{position:absolute;inset:0;pointer-events:none;z-index:7}
#mob>*{pointer-events:auto}
#joy{position:absolute;left:calc(18px + env(safe-area-inset-left));bottom:calc(var(--barh) * var(--barz) + 18px);width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,#ffffff14 0,#ffffff08 60%,#0000 61%),radial-gradient(circle,#0006 0,#0003 70%);border:2px solid #ffffff30;touch-action:none}
#joyk{position:absolute;left:41px;top:41px;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff9,#bbb6 40%,#5556);border:2px solid #fff6;box-shadow:0 0 8px #000a}
#mact{position:absolute;right:calc(22px + env(safe-area-inset-right));bottom:calc(var(--barh) * var(--barz) + 22px);width:150px;height:150px}
#mact button{position:absolute;border-radius:50%;border:2px solid #d9a441;color:#fff;font-size:30px;box-shadow:0 0 10px #000,inset 0 0 14px #000a;touch-action:none}
#m-atk{right:0;bottom:0;width:84px;height:84px;background:radial-gradient(circle at 40% 35%,#a33,#501010)}
#m-sk{left:0;top:6px;width:64px;height:64px;background:#2a1d0d center/cover no-repeat}
#m-sk i{position:absolute;inset:4px;border-radius:50%;background:center/cover no-repeat}
#mact button:active{filter:brightness(1.5)}
#mskills{position:absolute;right:calc(186px + env(safe-area-inset-right));bottom:calc(var(--barh) * var(--barz) + 20px);display:flex;flex-direction:column-reverse;gap:6px}
#mskills .ms{width:44px;height:44px;border-radius:50%;border:2px solid #7a5a28;background:#000 center/cover no-repeat;box-shadow:0 0 6px #000}
#mskills .ms.sel{border-color:#ffd060;box-shadow:0 0 8px #ffb030}
#mmenu{position:absolute;right:calc(8px + env(safe-area-inset-right));top:62px;display:grid;grid-template-columns:repeat(2,58px);gap:6px}
#mmenu button{height:52px;background:#0c0906cc;border:1px solid #6b5530;border-radius:6px;color:#e8dcc0;font:10px Tahoma,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#mmenu button b{font-size:19px;line-height:1}
#m-chat{position:absolute;left:calc(160px + env(safe-area-inset-left));bottom:calc(var(--barh) * var(--barz) + 20px);width:44px;height:44px;border-radius:50%;background:#0c0906cc;border:1px solid #6b5530;font-size:20px}
#rotate{position:fixed;inset:0;z-index:9999;background:#000e;display:flex;align-items:center;justify-content:center;color:#ffd27a;font:bold 22px Georgia,serif;text-align:center;line-height:1.6}
#rotate small{color:#aa9;font:13px Tahoma,sans-serif}
body.mobile #bar,body.mobile #barfill{zoom:var(--barz)}
body.mobile #hud .win,body.mobile #w-menu,body.mobile #mu-dlg .box{zoom:var(--uiz)}
body.mobile #chat{width:min(320px,40vw);bottom:calc(var(--barh) * var(--barz) + 160px);font-size:11px;zoom:var(--uiz)}
body.mobile #chat.hide{display:none}
body.mobile #skills{display:none!important}
body.mobile #log{display:none}
body.mobile #info{zoom:var(--uiz)}
body.mobile #charinfo{zoom:var(--uiz)}
body.mobile #screens .panel{zoom:.8}
body.mobile .mchar{zoom:.7}
body.mobile #w-gm{zoom:calc(var(--uiz) * .9)}
body.mobile #w-inv,body.mobile #w-char,body.mobile #w-quest,body.mobile #w-skill,body.mobile #w-shop,body.mobile #w-vault{bottom:auto;height:650px;max-height:none}
body.mobile #w-inv>*{flex-shrink:0}
body.mobile #mmenu{zoom:1}

#w-cmd{left:50%;top:12%;transform:translateX(-50%);width:230px}
.cmdpad{display:flex;flex-direction:column;align-items:center;gap:6px}
.cmdpad button{width:170px;padding:6px 0;background:linear-gradient(#3a2a18,#1a120a);border:1px solid #6a4a20;color:#e8d9b5;font:12px Tahoma,sans-serif;cursor:pointer}
.cmdpad button:hover{border-color:#d0a050;color:#fff}
.cmdtarget input{width:180px;text-align:center;padding:5px;background:#000;border:1px solid #6a4a20;color:#ffd060;font:bold 13px Tahoma,sans-serif}
#sreq{position:absolute;left:50%;top:24%;transform:translateX(-50%);pointer-events:auto;background:#0d0a06ee;border:1px solid #8a6024;padding:12px 18px;color:#e8d9b5;font:13px Arial,sans-serif;z-index:30;text-align:center}
#sreq[hidden]{display:none}#sreq b{color:#ffd060}#sreq .pib{margin-top:10px;display:flex;gap:10px;justify-content:center}
#sreq button{background:linear-gradient(#3a2a18,#1a120a);border:1px solid #6a4a20;color:#e8d9b5;padding:4px 12px;cursor:pointer}
#w-trade{left:50%;top:10%;transform:translateX(-50%);width:460px}
.tradepad{display:flex;flex-wrap:wrap;gap:10px}.tside{flex:1;min-width:200px}.tside h4{margin:0 0 4px;color:#f0c060;font-size:12px}.tside h4 small{color:#887;font-weight:normal;font-size:10px}
.tlist{min-height:120px;max-height:220px;overflow:auto;background:#000a;border:1px solid #3a2810;padding:3px}
.tlist div{display:flex;justify-content:space-between;gap:6px;padding:2px 4px;font-size:12px;color:#ddd;border-bottom:1px solid #1d150b;cursor:pointer}
.tlist div:hover{background:#1a130b}.tlist .exc{color:#7f7}.tlist .lv{color:#9cf}
.tzen{margin-top:4px;font-size:12px;color:#cba}.tzen input{width:110px;background:#000;border:1px solid #5a4a2c;color:#fd6;padding:2px 4px}
.tok{color:#7f7;font-weight:bold}.tradepad .gmrow{width:100%;justify-content:center}
#w-friends{left:50%;top:14%;transform:translateX(-50%);width:300px}
#fr-list div{display:flex;align-items:center;gap:6px;padding:4px;border-bottom:1px solid #2a1d0d;font-size:12px;color:#ddd}
#fr-list i{width:8px;height:8px;border-radius:50%;background:#555}#fr-list i.on{background:#4c4}
#fr-list span{flex:1}#fr-list button{font-size:11px;padding:2px 6px}
#duelbar{position:absolute;top:64px;left:50%;transform:translateX(-50%);padding:4px 16px;background:#3a0a0acc;border:1px solid #c04040;color:#fdd;font:bold 13px Tahoma,sans-serif;letter-spacing:1px;pointer-events:none}
#w-store{left:50%;top:10%;transform:translateX(-50%);width:340px}
#st-own input{width:180px;background:#000;border:1px solid #5a4a2c;color:#fff;padding:4px}
.lbl .pstore{display:block;color:#7cf;font-size:11px;background:#0008;border:1px solid #3a6a9a;padding:0 4px;margin-bottom:1px;cursor:pointer}
#cmd-name.pick { animation: cmdpick 1s ease-in-out infinite; }
@keyframes cmdpick { 50% { box-shadow: 0 0 0 1px #ffd060, 0 0 8px #ffd06088; } }
#chaosinfo .crec{margin-top:6px;border-top:1px solid #554;padding-top:4px}#chaosinfo .crec summary{cursor:pointer;color:#ffd060}#chaosinfo .crec p{margin:4px 0;font-size:10.5px;color:#bbb}#chaosinfo .crec p b{font-size:11px;color:#e8c070}
#chatlog .globalmsg{color:#ffb84a}#chatlog .globalmsg b{color:#ffd27a}
/* server list (before Login): first the server, then its Connect button with the load gauge */
#screens[data-sc=sc-server] #loginlogo{display:block}
#sc-server{background:none!important;border:0!important;box-shadow:none!important;width:min(620px,96vw)!important;align-self:center;padding:0!important;display:flex;flex-direction:column;align-items:center}
.srvrow{display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap;min-height:36px}
.srvgroups{display:flex;flex-direction:column;gap:6px}
.srvgroup{min-width:130px;padding:6px 18px;color:#e8d8c0;font-size:13px;background:linear-gradient(#6a1a14,#3a0c08);border:2px solid #1a0604;box-shadow:0 0 0 1px #a06a40,0 2px 8px #000;border-radius:3px;cursor:pointer;text-shadow:0 1px 2px #000}
.srvgroup:hover,.srvgroup.on{color:#fff;background:linear-gradient(#b0302a,#5a1210);box-shadow:0 0 0 1px #ffc070,0 0 10px #f60}
.srvlist{display:flex;flex-direction:column;gap:6px;animation:srvin .2s ease-out}
@keyframes srvin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.srvbtn{display:flex;align-items:center;gap:10px;min-width:280px;padding:6px 10px 6px 14px;color:#ffc84a;font-size:13px;background:linear-gradient(#2a2a2a,#0e0e0e);border:2px solid #000;box-shadow:0 0 0 1px #8a7a60,0 2px 8px #000;border-radius:3px;cursor:pointer}
.srvbtn:hover{color:#fff;box-shadow:0 0 0 1px #ffd070,0 0 12px #f90}
.srvbtn .sn{flex:1;text-align:left}.srvbtn .sl{color:inherit}
.srvbtn.full{color:#f66}.srvbtn.full .sl b{color:#f33}
.gauge{display:flex;gap:2px;padding:2px;background:#000;border:1px solid #555}
.gauge b{width:6px;height:10px;background:#222;box-shadow:inset 0 0 0 1px #111}
.gauge b.on{background:var(--c);box-shadow:inset 0 0 0 1px #0006,0 0 3px var(--c)}
.srvclock{margin-top:14px;text-align:center;color:#eee;font-size:12px;text-shadow:0 1px 3px #000,0 0 6px #000}
.srvnote{margin-top:12px;max-width:520px;padding:8px 14px;color:#f0e0c0;font-size:12px;line-height:1.5;text-align:center;white-space:pre-line;background:#000a;border:1px solid #6b4a1f;border-radius:3px}
.srvvote{margin-top:10px;display:block}.srvvote img{max-width:min(468px,90vw);max-height:90px;display:block;border:1px solid #6b4a1f}
.srvvote:hover img{box-shadow:0 0 10px #f90}
.srvver{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);color:#ccc;font-size:11px;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap}
#srvback{background:none;border:0;color:#c9a060;cursor:pointer;font-size:11px;margin-right:6px;padding:0}
#srvback:hover{color:#fff}