/* Layout follows the original client (game.css, (c) Thinker 2006-2010): 512x512 map, 280px panel, 32px bottom bar. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #000; color: #fff; font: 12px Georgia, "Times New Roman", serif; }
[hidden] { display: none !important; }
button { font: bold 11px Verdana, sans-serif; color: #f4e7b8; background: linear-gradient(#5d7a2e, #2f4513); border: 1px solid #a2b86a; border-radius: 3px; padding: 4px 10px; cursor: pointer; }
button:hover { filter: brightness(1.2); }
button.alt { background: linear-gradient(#5b4a2a, #33260f); border-color: #b08a4a; }
button:disabled { opacity: .35; cursor: default; filter: none; }
input { font: 12px Verdana, sans-serif; background: #1d2414; color: #f0e6c0; border: 1px solid #7d8f4e; padding: 5px 7px; border-radius: 2px; }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.err { color: #ff8a70; min-height: 16px; text-align: center; }
.hint { color: #b8ad85; font-size: 11px; margin: 6px 0; }

/* login / character select */
.screen { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.box { background: #0b2a08 url(assets/gui/conf-back.png) center/cover; border: 1px solid #b08a4a; box-shadow: 0 10px 40px #000; padding: 22px 26px; width: 360px; display: flex; flex-direction: column; gap: 8px; }
.box.wide { width: 620px; max-width: 100%; }
.logo { height: 99px; margin: -10px -40px 0; background: url(assets/gui/default1.png) center/contain no-repeat; }
.box h1 { margin: 0; text-align: center; font: bold 26px Georgia, serif; color: #f3d77a; text-shadow: 2px 2px 0 #000; }
.box h2 { margin: 6px 0; font: bold 15px Georgia, serif; color: #f3d77a; }
.sub { text-align: center; margin: 0 0 8px; color: #d8cc9c; }
#c-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.char { display: flex; gap: 8px; align-items: center; padding: 6px; background: rgba(0,0,0,.35); border: 1px solid #56663a; cursor: pointer; }
.char:hover { border-color: #c9d98a; }
.char .av { width: 32px; height: 48px; background-repeat: no-repeat; background-position: 0 0; flex: none; }
.char b { color: #f3d77a; display: block; }
.char small { color: #d8cc9c; }
.char .del { margin-left: auto; padding: 1px 6px; }
#c-profs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#c-profs label { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(0,0,0,.35); border: 1px solid #56663a; cursor: pointer; }
#c-profs input { margin: 0; }

/* game frame */
#game { display: flex; justify-content: center; align-items: center; min-height: 100%; padding: 8px 0; }
/* the ornamented frame of the old client around map + panel */
/* border on the top and left only: the panel art already closes the right and bottom edges (the user: the frame
   looked too heavy there); the pictures (793x7, 7x551) get a second copy at the far end to cover the whole length */
#shell { padding: 7px 0 0 7px; background: url(assets/gui/frame-top.png) 0 0 no-repeat, url(assets/gui/frame-top.png) 100% 0 no-repeat,
  url(assets/gui/frame-left.png) 0 0 no-repeat, url(assets/gui/frame-left.png) 0 100% no-repeat, #1a1206; box-shadow: 0 0 0 1px #000, 0 8px 30px rgba(0,0,0,.8); flex: none; }
#frame { position: relative; width: 792px; height: 544px; background: #000; flex: none; }
#view { position: absolute; left: 0; top: 0; width: 512px; height: 544px; overflow: hidden; }
#cv { display: block; image-rendering: pixelated; cursor: pointer; }
#bpanel { position: absolute; left: 0; top: 512px; width: 512px; height: 32px; background: url(assets/gui/bottom-bar.png); }
#pvpmode { position: absolute; left: 10px; top: 6px; width: 17px; height: 17px; background: url(assets/gui/pvpmode.png); }
#status { position: absolute; left: 34px; top: 8px; width: 400px; height: 16px; overflow: hidden; white-space: nowrap; color: #ccc; font: 12px Arial, Verdana, sans-serif; }
#status b { color: #ffb; font-weight: normal; }
#coords { position: absolute; right: 26px; top: 8px; color: #ccc; font: 12px Arial, Verdana, sans-serif; }
/* map tooltip (monsters, NPCs, players): dark green plate with a gold frame */
#mtip { position: absolute; z-index: 300; pointer-events: none; background: #0b2608; border: 1px solid #b08a4a; outline: 1px solid #000; box-shadow: inset 0 0 0 1px #3b5a1a, 0 2px 6px rgba(0,0,0,.7); padding: 2px 8px 3px; text-align: center; white-space: nowrap; font: 12px Verdana, Arial, sans-serif; }
#mtip b { display: block; color: #fff; font-weight: bold; }
#mtip i { display: block; color: #dfe86a; font-style: normal; font-size: 11px; }
#cfghelp { margin: 0 20px; color: #fd9; text-decoration: underline; cursor: pointer; font-size: 12px; }

#panel { position: absolute; left: 512px; top: 0; width: 280px; height: 544px; background: url(assets/gui/panel.png); }
#panel > * { position: absolute; }
#lp_nick { left: 10px; top: 10px; width: 260px; height: 18px; text-align: center; font-weight: bold; color: #fff; }
.bar { left: 21px; width: 114px; height: 8px; font-size: 1px; cursor: default; }
.bar > div { height: 8px; width: 1px; }
#life1 { top: 45px; } #life2 { background: url(assets/gui/life.png); }
#exp1 { top: 57px; } #exp2 { background: url(assets/gui/exp.png); }
#gold { left: 60px; top: 81px; width: 74px; font: 10px Arial, Verdana, sans-serif; color: #fd0; text-align: right; }
#base3 { left: 206px; top: 49px; width: 50px; font: 10px/13px Arial, Verdana, sans-serif; text-align: right; color: #fff; }
#stat2 { left: 148px; top: 103px; width: 117px; height: 98px; background: url(assets/gui/stats.png); font: 10px Arial, Verdana, sans-serif; color: #ccc; }
#stat2but { position: absolute; left: 0; top: 0; width: 116px; height: 24px; cursor: pointer; }
#stat2in { position: absolute; left: 0; top: 27px; width: 111px; height: 70px; overflow: hidden; text-align: right; line-height: 13px; color: #fff; }
#stat2in .lbl { position: absolute; left: 8px; color: #e8c86a; text-align: left; }
.slot { position: absolute; width: 32px; height: 32px; cursor: pointer; }
.slot img, #bag img, .s-grid img, .t-items img, .bslot img { width: 32px; height: 32px; display: block; }
#eq { left: 0; top: 0; width: 0; height: 0; }
.pb { width: 22px; height: 22px; cursor: pointer; background-position: 0 0; }
.pb:hover, .pb.on { background-position: 0 -22px; }
#pvpbutton { background-position: 0 -44px; } #pvpbutton:hover { background-position: 0 -66px; }
#pvpbutton.pvpon { background-position: 0 0; } #pvpbutton.pvpon:hover { background-position: 0 -22px; }
#pbtns { left: 0; top: 0; width: 0; height: 0; }
#pbtns .pb { position: absolute; }
#bagback { left: 14px; top: 254px; width: 252px; height: 256px; background: url(assets/gui/equip.png); }
#bag { position: absolute; left: 11px; top: 11px; width: 231px; height: 198px; display: grid; grid-template-columns: repeat(7, 33px); grid-auto-rows: 33px; }
#bag > div { position: relative; cursor: pointer; width: 32px; height: 32px; }
#bag > div.locked { background: rgba(0,0,0,.55); cursor: default; }
#bagslots { position: absolute; left: 11px; top: 215px; width: 99px; height: 33px; display: flex; }
.bslot { position: relative; width: 33px; height: 32px; cursor: pointer; }
.bslot.cur { box-shadow: inset 0 0 0 2px #fd0; }
.bslot .qty { right: 2px; }
#bagextra { position: absolute; left: 197px; top: 215px; width: 44px; height: 32px; font: 9px/11px Arial, sans-serif; color: #ccc; text-align: center; padding-top: 4px; }
.qty { position: absolute; right: 1px; bottom: 0; font: 9px Arial, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.r-unique { box-shadow: inset 0 0 0 1px #DAA520; } .r-heroic { box-shadow: inset 0 0 0 1px #2090FE; } .r-legendary { box-shadow: inset 0 0 0 1px #FA9A20; } .r-upgraded { box-shadow: inset 0 0 0 1px #FD0; }
#chatbox { left: 28px; top: 270px; width: 228px; height: 190px; overflow: auto; font-family: Arial, Verdana, sans-serif; scrollbar-color: #fc0 #030; }
#chatTxt { font-size: 10px; line-height: 13px; }
#chatTxt b { color: #ffb; font-weight: normal; }
#chatTxt .sys { color: #cfe79a; } #chatTxt .priv { color: #fc0; } #chatTxt .privsend { color: #af6; } #chatTxt .clan { color: #b554ff; }
#chatIn { left: 23px; top: 488px; width: 235px; height: 18px; color: #fff; background: transparent; border: none; font-size: 10px; padding: 0 3px; outline: none; }
#eqbutton { left: 17px; top: 512px; width: 68px; height: 20px; cursor: pointer; background: url(assets/gui/b_eqchat.png) 0 -40px; }
#eqbutton:hover { background-position: 0 -60px; }
#eqbutton.chat { background-position: 0 0; } #eqbutton.chat:hover { background-position: 0 -20px; }
#eqbutton.new { background-position: 0 -80px; } #eqbutton.new:hover { background-position: 0 -100px; }
.gbtn { top: 512px; width: 68px; height: 20px; cursor: pointer; background: url(assets/gui/btn_blank.png) 0 0; color: #fd0; font: bold 11px Georgia, serif; text-align: center; line-height: 20px; text-shadow: 1px 1px 0 #000; }
.gbtn:hover, .gbtn.on { background-position: 0 -20px; color: #fff; }
#devbut { left: 90px; } #menubut { left: 196px; }

/* generic windows */
.win { position: absolute; z-index: 305; background: #0b2a08 url(assets/gui/menuback.png); border: 1px solid #b08a4a; box-shadow: 0 6px 24px #000; padding: 10px; color: #efe3b8; }
.w-title { display: flex; justify-content: space-between; align-items: center; font: bold 14px Georgia, serif; color: #f3d77a; margin-bottom: 6px; }
.w-title .x { padding: 0 7px; }
.closex { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; background: url(assets/gui/wquests-close.png); cursor: pointer; z-index: 2; }
.closex:hover { background-position: 0 -22px; }
.paperwin { position: absolute; z-index: 360; color: #000; overflow: hidden; }
.pbar { height: 32px; background: url(assets/gui/menuitem.png) 0 0 / 512px 32px; color: #fd0; font: bold 14px Georgia, serif; padding: 8px 14px; position: relative; text-transform: uppercase; letter-spacing: .5px; }
.sbtn { width: 68px; height: 20px; cursor: pointer; }
.sbtn:hover { background-position: 0 -20px !important; }

#dialog { position: absolute; z-index: 301; left: 0; top: 256px; width: 512px; height: 256px; background: url(assets/gui/50blue.png); color: #eee; font-size: 12px; padding: 5px; overflow: auto; }
#dialog b.title { display: block; margin: 0 0 5px 3px; font-size: 105%; }
#dialog .d-text { margin: 0 6px 8px; line-height: 16px; }
.d-opts div { display: block; color: #ffc; cursor: pointer; margin: 5px 0 0 15px; }
.d-opts div:hover { color: #fff; text-decoration: underline; }
#shop { left: 121px; top: 50px; width: 269px; height: 435px; background: #400 url(assets/gui/shop-main.png); padding: 6px; border: 0; }
#shop .w-title { position: absolute; left: 6px; right: 6px; top: 335px; }
.s-grid { display: grid; grid-template-columns: repeat(8, 32px); grid-auto-rows: 32px; width: 256px; height: 320px; overflow: auto; }
.s-grid > div { cursor: pointer; }
#shopinfo { position: absolute; left: 6px; top: 362px; width: 257px; font: 10px Arial, sans-serif; color: #fff; padding: 5px; }
#trade { left: 40px; top: 40px; width: 432px; }
.t-cols { display: flex; gap: 10px; }
.t-cols > div { flex: 1; }
.t-cols h3 { margin: 0 0 4px; font-size: 12px; color: #f3d77a; }
.t-items { min-height: 70px; display: grid; grid-template-columns: repeat(5, 32px); grid-auto-rows: 32px; gap: 2px; background: rgba(60,0,0,.6); border: 1px solid #8a5a3a; padding: 3px; margin-bottom: 4px; }
.t-cols input { width: 90px; }
.t-ok { margin-top: 4px; font-weight: bold; }
.t-ok.yes { color: #8f8; }
#t-accept { background: url(assets/gui/trade-left.png); } #t-cancel { background: url(assets/gui/trade-cancel.png); }
#ask { left: 96px; top: 180px; width: 320px; text-align: center; z-index: 400; }

/* skills: parchment on the left half of the map */
#skills { left: 0; top: 0; width: 256px; height: 512px; background: #e7e2c7 url(assets/gui/skills-back.jpg); }
H1.stopic { color: #fff; height: 32px; margin: 0; padding: 6px 10px 0; font-size: 17px; position: relative; }
#sk-pts { font: 12px Arial, sans-serif; color: #300; padding: 6px 12px 4px; }
#sk-pts button { float: right; padding: 1px 5px; font-size: 9px; }
#skillslist { overflow: auto; height: 438px; font: 11px Arial, sans-serif; }
#skillslist h2 { margin: 6px 0 2px; padding: 2px 10px; background: #400; color: #ffe4b5; font-size: 12px; }
#skillslist .srow { display: flex; align-items: center; gap: 5px; margin: 0 8px; padding: 3px 2px; border-bottom: 1px solid rgba(64,0,0,.25); cursor: pointer; }
#skillslist .srow:hover { background: rgba(120,60,0,.1); }
#skillslist .srow.sel { background: rgba(160,0,0,.14); }
#skillslist .srow.locked .sname { color: #888; }
#skillslist .srow .sname { flex: 1; min-width: 0; font-size: 11px; }
.spips { width: 36px; height: 5px; background: #d8cfa8; border: 1px solid #8a6a3a; flex: none; }
.spips i { display: block; height: 100%; background: #a00; }
#skilldesc { position: absolute; z-index: 361; left: 256px; top: 0; width: 256px; height: 512px; background: #e7e2c7 url(assets/gui/skills-back.jpg); color: #300; font: 12px Arial, sans-serif; }
.sdbody { padding: 10px 14px; }
.sdbody p { margin: 0 0 10px; line-height: 16px; }
.sdbody .sdkind { color: #a60; font-style: italic; }
.sdbody .bad { color: #c00; } .sdbody .sdnote { color: #777; font-size: 11px; }
.sdbody button { font-size: 10px; padding: 2px 6px; }
#skillslist .sname { color: #a00; font-weight: bold; } #skillslist .sname.act::after { content: ' ⚔'; color: #a60; font-weight: normal; }
#skillslist .sstats { color: #300; display: block; } #skillslist .sreq { color: #666; display: block; } #skillslist .sreq.bad { color: #c00; }
#skillslist .slvl { width: 34px; text-align: right; color: #300; font-size: 10px; flex: none; }
#skillslist .skillLearn { flex: none; width: 22px; height: 22px; background: url(assets/gui/fr1-add.png); cursor: pointer; border: 0; padding: 0; }
#skillslist .skillLearn:hover { background-position: 0 -22px; }
#skillslist .skillLearn:disabled { opacity: .3; cursor: default; }
#oQuests { left: 50px; top: 50px; width: 400px; height: 400px; background: #e8e2c8 url(assets/gui/wquests.png); }
#questsTxt { position: absolute; left: 5px; top: 48px; width: 385px; height: 340px; overflow: auto; font-size: 12px; }
.cquest { padding: 5px 5px 12px 10px; border-bottom: 1px dotted #a08050; }
.cquest p { margin: 3px 0 0 5px; color: #080; } .cquest p.qzad { color: #a00; font-size: 90%; }
#oHelp { left: 50px; top: 50px; width: 400px; height: 400px; background: #e8e2c8 url(assets/gui/sterowanie.png); }
#helpTxt { position: absolute; left: 20px; top: 50px; width: 360px; height: 340px; overflow: auto; font-size: 12px; line-height: 17px; }
#helpTxt b { color: #400; }
#minimap { left: 0; top: 0; width: 512px; height: 512px; background: #e7e2c7 url(assets/gui/paper512.png); }
#mmapbar { height: 32px; background: url(assets/gui/title-map.png); position: relative; }
.mtabs { position: absolute; left: 150px; top: 6px; display: flex; gap: 3px; }
.mtabs b { padding: 2px 10px; background: rgba(0,0,0,.45); color: #fd9; font: bold 11px Georgia, serif; cursor: pointer; border: 1px solid #7a5a2a; }
.mtabs b.on { background: #7a1a00; color: #fff; }
#mmtip { position: absolute; z-index: 2; pointer-events: none; background: #0b2608; border: 1px solid #b08a4a; color: #fff; padding: 2px 8px; font: 11px Verdana, sans-serif; max-width: 260px; }
#mmtip b { color: #fd0; } #mmtip i { display: block; color: #dfe86a; font-style: normal; }
#mmap { display: block; margin: 10px; cursor: crosshair; }
#friends { left: 0; top: 0; width: 512px; height: 512px; background: #060 url(assets/gui/friend-window.jpg); color: #fff; }
#myfriends, #myenemies { position: absolute; width: 256px; height: 430px; top: 37px; left: 0; overflow: auto; font-size: 12px; }
#myenemies { left: 256px; }
#mfadd, #meadd { position: absolute; width: 230px; height: 30px; top: 476px; left: 10px; }
#meadd { left: 266px; }
.frinp { background: transparent; width: 195px; height: 24px; border: none; color: #fff; padding: 4px; }
#fradd, #enadd { position: absolute; right: 0; top: 1px; width: 22px; height: 22px; background: url(assets/gui/fr1-add.png); cursor: pointer; }
#enadd { background-image: url(assets/gui/fr2-add.png); }
.frbox { padding: 5px 8px; height: 58px; }
.frchar { width: 32px; height: 48px; float: left; margin-right: 10px; background-repeat: no-repeat; }
.frloc { color: gold; font-size: 90%; }
.frbox .x { float: right; padding: 0 5px; font-size: 10px; }
#config { left: 56px; top: 120px; width: 400px; background: #050 url(assets/gui/conf-back.png) bottom center; color: #fff; padding-bottom: 10px; }
.conftitle { height: 32px; background: url(assets/gui/conf-title.png); }
#configin { margin: 10px; }
#configin .opt { margin: 10px; cursor: pointer; padding-left: 30px; padding-top: 3px; height: 22px; background: url(assets/gui/checkbox.png) no-repeat 0 0; }
#configin .opt.on { background-position: 0 -22px; }
#cfgsave { background: url(assets/gui/b_zapisz.png); } #cfgcancel { background: url(assets/gui/b_anuluj.png); }
#clanw, #outfitw { left: 0; top: 0; width: 512px; height: 512px; background: #e7e2c7 url(assets/gui/paper512.png); }
#clanin { padding: 14px 18px; height: 470px; overflow: auto; font-size: 12px; }
#clanin table { border-collapse: collapse; width: 100%; margin: 8px 0; }
#clanin th { background: #400; color: yellow; padding: 3px; border: 1px solid #000; }
#clanin td { border: 1px solid #000; padding: 2px 4px; }
#clanin input { background: #fff8e0; color: #000; border: 1px solid #960; padding: 2px 4px; }
#clanin button, #outfitin button { font-size: 10px; padding: 2px 6px; }
#outfitin { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 4px; padding: 10px 14px; height: 470px; overflow: auto; align-content: start; }
#outfitin div { box-sizing: content-box; width: 32px; height: 48px; padding: 3px 4px; background-repeat: no-repeat; background-origin: content-box; background-clip: content-box; background-position: 0 0; cursor: pointer; border: 1px solid transparent; }
#outfitin div:hover, #outfitin div.cur { background-clip: content-box; box-shadow: inset 0 0 0 40px rgba(150,100,0,.12); }
#outfitin div:hover { border-color: #960; background-color: rgba(150,100,0,.15); }
#outfitin div.cur { border-color: #a00; background-color: rgba(170,0,0,.15); }

/* battle: whole map area, background themed by location */
#battle { position: absolute; z-index: 370; left: 0; top: 0; width: 512px; height: 512px; background: #000 url(assets/gui/battle.png) no-repeat bottom center; font: 12px Arial, Verdana, sans-serif; overflow: hidden; }
#battleplace { position: relative; width: 512px; height: 256px; background-size: 512px auto; background-position: center 70%; overflow: hidden; }
#troops { position: absolute; inset: 0; }
.troop { position: absolute; width: 32px; height: 52px; transition: top .35s; cursor: default; }
.troop .fig { background-repeat: no-repeat; image-rendering: pixelated; } /* centred on whole pixels in JS (a half pixel blurs the sprite) */
.troop .hpb { width: 32px; height: 3px; background: #300; margin-top: 1px; }
.troop .hpb div { height: 100%; background: #e11; transition: width .2s; }
.troop.act .hpb { box-shadow: 0 0 0 1px #fd0; }
.troop.dead .fig { opacity: .3; }
.rownum { position: absolute; left: 4px; font: bold 14px Georgia, serif; color: rgba(255,255,255,.25); }
#btip { position: absolute; z-index: 5; pointer-events: none; background: #5a0a02; border: 1px solid #c89b50; box-shadow: 0 2px 6px rgba(0,0,0,.6); padding: 2px 12px 4px; text-align: center; color: #f3e6c0; font: 12px Verdana, sans-serif; white-space: nowrap; }
#btip b { display: block; color: #fd0; } #btip i { display: block; margin-top: 4px; }
.auto { position: absolute; right: 6px; bottom: 6px; background: #b00; color: #fff; font: bold 12px Georgia; padding: 2px 12px; border: 1px solid #f66; cursor: pointer; }
.auto.on { background: #070; border-color: #6f6; }
#battlein { position: absolute; top: 277px; left: 10px; width: 325px; height: 220px; overflow: auto; font-size: 10px; }
#battlein p { margin: 0 0 3px; padding: 3px 8px; line-height: 14px; font-size: 11px; color: #fff; }
#battlein .l-me { background: rgba(24, 70, 10, .92); }
#battlein .l-foe { background: rgba(110, 12, 8, .9); }
#battlein .l-step { background: rgba(16, 32, 110, .9); }
#battlein .l-sys { background: #555; color: #ffe5c7; }
#battlein .l-info { background: #333; color: #ffe5c7; }
#battlein .skill { color: #fd0; }
#battlein .flag.up { color: #9f9; } #battlein .flag.down { color: #fb8; }
.d-fiz { color: #ff4040; font-weight: bold; } .d-mag { color: #69f; font-weight: bold; } .d-ogien { color: #ff9a2a; font-weight: bold; }
.d-zimno { color: #9ef; font-weight: bold; } .d-blysk { color: #ff6; font-weight: bold; } .d-trucizna { color: #5f5; font-weight: bold; }
.d-krew { color: #c0304a; font-weight: bold; } .d-heal { color: #7f7; font-weight: bold; }
#battlebuttons { position: absolute; left: 338px; top: 262px; width: 170px; height: 245px; }
#battle_me { margin: 3px 5px; width: 157px; height: 22px; background: #004 url(assets/gui/battle-stats.png); color: gold; text-align: right; border-collapse: collapse; table-layout: fixed; }
#battle_me td { padding-top: 3px; padding-right: 6px; font-size: 11px; width: 50%; }
#battletime { margin: 3px 5px; padding-top: 3px; height: 20px; background: #600 url(assets/gui/battle-spellback.png); color: #fff; text-align: center; font-size: 11px; }
.bbtn { width: 153px; height: 19px; margin: 5px 8px; cursor: pointer; background-position: 0 0; }
.bbtn:hover { background-position: 0 -19px; }
.bbtn.off { opacity: .35; cursor: default; background-position: 0 0; }
#bt_attack { background-image: url(assets/gui/battle-attack.png); }
#bt_move { background-image: url(assets/gui/battle-move.png); }
#bt_use { background-image: url(assets/gui/battle-use.png); width: 70px; margin: 0 8px; }
#closebattle { background-image: url(assets/gui/battle-close.png); background-position: 0 -38px; }
#closebattle:hover { background-position: 0 -57px; }
#spell { margin: 0 8px 4px; width: 153px; height: 88px; overflow-y: auto; background: #200 url(assets/gui/battle-spellback.png); border: 1px solid #a80; font: 11px Arial, sans-serif; }
#spell div { padding: 1px 4px; color: #fd0; cursor: pointer; border-bottom: 1px solid rgba(255,200,0,.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spell div small { color: #caa; }
#spell div:hover { background: rgba(255,200,0,.15); }
#spell div.sel { background: #7a1a00; color: #fff; }
#spell div.off { color: #886; cursor: default; }
#spell .none { color: #aaa; cursor: default; }
.brow { display: flex; justify-content: flex-start; }

/* editor */
#editor { position: absolute; z-index: 350; left: 4px; top: 4px; background: rgba(20,10,0,.85); border: 1px solid #c89b50; color: #f3e6c0; font: 11px Verdana, sans-serif; padding: 4px; max-width: 504px; }
.d-tabs { display: flex; gap: 2px; margin-bottom: 3px; border-bottom: 1px solid #c89b50; }
.d-tabs b { padding: 2px 8px; background: #2a1a08; cursor: pointer; font-weight: bold; color: #fd9; }
.d-tabs b.on { background: #c89b50; color: #000; }
.d-tabs .eclose { margin-left: auto; }
#d-tp, #d-char, #d-items { padding: 2px; }
#d-tp label, #d-char label { display: inline-block; margin: 2px 6px 2px 0; }
#d-tp input, #d-char input, #d-items input { width: 70px; font-size: 10px; padding: 1px 3px; }
#d-items .lib div { display: flex; gap: 4px; align-items: center; }
#dv-cats { display: flex; flex-wrap: wrap; gap: 2px; margin: 3px 0; }
#dv-cats b { padding: 1px 5px; background: #2a1a08; color: #fd9; cursor: pointer; font-size: 10px; }
#dv-cats b.on { background: #c89b50; color: #000; }
#d-items .lib { max-height: 190px; overflow: auto; }
#d-items .lib img { width: 16px; height: 16px; }
.e-modes { display: flex; gap: 2px; }
.e-modes b { padding: 2px 6px; background: #3a2610; cursor: pointer; font-weight: normal; }
.e-modes b.on { background: #a33a2a; color: #fff; }
#e-opts { margin-top: 3px; }
#e-opts select, #e-opts input { font-size: 10px; padding: 1px 3px; max-width: 180px; }
#e-opts button { font-size: 10px; padding: 1px 6px; }
#e-opts .lib { max-height: 150px; overflow: auto; background: #000; margin-top: 3px; }
#e-opts .lib div { cursor: pointer; padding: 1px 4px; } #e-opts .lib div:hover { background: #5a3f18; }

#tip { position: fixed; z-index: 500; pointer-events: none; background: #036; border: 1px solid #777; padding: 3px 5px; font: 10px Verdana, sans-serif; line-height: 13px; max-width: 250px; color: #fff; }
#tip.item { background: #630; }
#tip .n { font-weight: bold; color: #cc7; text-align: center; display: block; }
#tip .rar { text-align: center; }
#tip .mn { color: #ccc; }
#tip .unique { color: #DAA520; } #tip .heroic { color: #2090FE; } #tip .legendary { color: #FA9A20; } #tip .upgraded { color: #FD0; }
#tip .req { color: #ec0; } #tip .bad { color: red; }
#menu { position: fixed; z-index: 501; background: url(assets/gui/50blue.png); border: 1px solid #999; color: #eee; font-size: 11px; padding: 5px; min-width: 110px; }
#menu .h { display: block; text-align: center; padding: 2px; font-weight: bold; }
#menu div[data-i] { display: block; background: #05b; margin-bottom: 2px; padding: 2px 6px; cursor: pointer; text-align: center; }
#menu div[data-i]:hover { background: #08c; }