:root{--bg:#c4cac1;--panel:#e3e6df;--panel2:#d5dacf;--ink:#1f2527;--dim:#58625a;--line:#8d968c;--accent:#46622d;--ochre:#7d5a1a;--ember:#a2431f;--sky:#bcd0c8;--ground:#a7a38b;--essence:#3b5f8a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101315;--panel:#1b2124;--panel2:#242c30;--ink:#dcd8c8;--dim:#8d978f;--line:#3a4549;--accent:#9bb36e;--ochre:#c79a4a;--ember:#d0643a;--sky:#26343a;--ground:#3b3a30;--essence:#7fa7d6}}
:root[data-theme="dark"]{--bg:#101315;--panel:#1b2124;--panel2:#242c30;--ink:#dcd8c8;--dim:#8d978f;--line:#3a4549;--accent:#9bb36e;--ochre:#c79a4a;--ember:#d0643a;--sky:#26343a;--ground:#3b3a30;--essence:#7fa7d6}
*,*:before,*:after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 Bitter,Georgia,serif}
#game{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:4px}
.panel{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.tabs{display:flex;overflow-x:auto;background:var(--panel2);border-bottom:1px solid var(--line);flex:none}
.tabs button,.tabs .solo{font:600 15px 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.03em;padding:6px 14px;border:0;border-right:1px solid var(--line);background:none;color:var(--dim);cursor:pointer;white-space:nowrap}
.tabs .solo{color:var(--ink);cursor:default}
.tabs button[aria-selected=true]{color:var(--ink);background:var(--panel);box-shadow:inset 0 -3px var(--accent)}
.tabs button:focus-visible,.panel input:focus-visible,.panel select:focus-visible,.demo button:focus-visible{outline:2px solid var(--ochre);outline-offset:-2px}
.pane{flex:1;min-height:0;overflow:auto;padding:10px;display:none}
.pane.on{display:block}
.pane.flex.on{display:flex;flex-direction:column}
.log{flex:1;overflow:auto;margin:0;padding:0;list-style:none}
.log li{padding:1px 0}
.who{color:var(--accent);font-weight:600}.sys{color:var(--dim)}.hit{color:var(--ember)}.gain{color:var(--ochre)}
.say{display:flex;gap:6px;margin-top:6px}
.say input{flex:1;min-width:0;font:inherit;padding:4px 8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.say button,.demo button{font:600 14px 'Barlow Condensed',sans-serif;padding:4px 12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
svg{max-width:100%;height:auto;display:block}
svg text{fill:var(--ink);font:13px Bitter,serif}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.slot{aspect-ratio:1;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--dim);padding:2px}
.slot.full{border-style:solid;color:var(--ink);background:var(--panel2)}
.doll{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:320px}
.doll .slot{aspect-ratio:auto;height:52px}
label{display:block;margin:0 0 12px}
select{font:inherit;padding:3px 6px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
h3{font:600 17px 'Barlow Condensed',sans-serif;margin:0 0 8px}
#action{position:relative;flex:1;min-height:0;background:var(--sky);overflow:hidden}
.demo{display:flex;gap:6px;align-items:center;padding:6px 10px;border-top:1px solid var(--line);flex:none}
#status{flex:1;color:var(--dim)}
/* phones: see the .mobile rules at the end */
.act{font:600 14px 'Barlow Condensed',sans-serif;padding:5px 12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.act:focus-visible,#login input:focus-visible,#login button:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.exits{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.overlay{position:fixed;inset:0;z-index:10;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
.overlay[hidden]{display:none}
#lf{background:var(--panel);border:1px solid var(--line);padding:20px;width:100%;max-width:320px}
#lf input{display:block;width:100%;margin-top:4px;font:inherit;padding:5px 8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
#lf div{display:flex;gap:8px}
#lerr{min-height:1.5em;margin:0 0 8px}
#attrs{margin-top:14px;max-width:320px}
.arow{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:2px 0}
#cs{background:var(--panel);border:1px solid var(--line);padding:20px;width:100%;max-width:340px}
#lf[hidden],#cs[hidden],#cform[hidden]{display:none}
#cs input{display:block;width:100%;margin-top:4px;font:inherit;padding:5px 8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
#cs input:focus-visible,#cs button:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
#cl{list-style:none;margin:0 0 14px;padding:0}
#cl li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
#cform{margin-bottom:6px}#cform label{margin-bottom:8px}
.walk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.walk .act{touch-action:none;user-select:none;-webkit-user-select:none;min-width:84px;padding:8px 14px}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#scene text{font-size:11px}
#pwform{max-width:300px}
#pwform input{display:block;width:100%;margin-top:4px;font:inherit;padding:5px 8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
#pwform input:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
#cl .btns{display:flex;gap:6px}
.act.danger{color:var(--ember)}
button.slot{font:inherit;font-size:12px;cursor:pointer}
button.slot:focus-visible{outline:2px solid var(--ochre);outline-offset:-2px}
.slot.sel{outline:2px solid var(--accent);outline-offset:-2px}
.idetail{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.idetail[hidden]{display:none}
.demo{flex-wrap:wrap}
#ground{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#scene text.item{font-size:10px}
.zlink{cursor:pointer}
.zlink:focus-visible circle{stroke:var(--ink);stroke-width:4}
#sklist,#ablist{max-width:320px;margin-bottom:12px}
.tabs button.unread::after{content:' \2022';color:var(--ember)}
#ablist label.arow{cursor:pointer}
#searchBtn[aria-pressed="true"]{background:var(--accent);color:var(--panel);border-color:var(--accent)}
#joinbox{display:flex;gap:6px;flex-wrap:wrap}
.act.join{border-color:var(--ember);color:var(--ember)}
.boost{color:var(--accent);font-weight:600}
.doll .slot{flex-direction:column;gap:2px;font-size:12px}
.doll .slot small{color:var(--dim);font-size:10px}
.doll button.slot{font:inherit;font-size:12px;cursor:pointer}
.slot.worn{border-color:var(--accent)}
.slot.broken{color:var(--ember);border-color:var(--ember)}
.coins{color:var(--ochre);font-weight:600}
.act.trade{border-color:var(--ochre);color:var(--ochre)}
.overlay.shopwin{background:rgba(0,0,0,.55);z-index:20}
.shopbox{background:var(--panel);border:1px solid var(--line);width:100%;max-width:820px;max-height:90vh;display:flex;flex-direction:column;padding:16px}
.shophead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.shophead h3{margin:0;flex:1}
.shopcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0;overflow:auto}
.shopcols h4{font:600 15px 'Barlow Condensed',sans-serif;margin:0 0 6px}
.shoplist{list-style:none;margin:0;padding:0}
.shoplist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.shoplist li small{color:var(--dim)}
.shoplist li > span:last-child{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.shoplist button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:760px){.shopcols{grid-template-columns:1fr}}
.act.lootable{border-color:var(--ochre);color:var(--ochre)}
#game[hidden],.gmscreen[hidden],.gmpane,.gmform[hidden]{display:none}
.gmscreen{position:fixed;inset:0;overflow:auto;background:var(--bg);padding:12px 16px;z-index:5}
.gmhead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.gmhead h2{font:600 22px 'Barlow Condensed',sans-serif;margin:0;flex:1}
.gmpane.on{display:block;background:var(--panel);border:1px solid var(--line);border-top:0;padding:12px}
.gmmsg{min-height:1.4em;margin:6px 0;color:var(--accent)}
.gmmsg.bad{color:var(--ember)}
.gmtable{overflow-x:auto}
.gmtable table{border-collapse:collapse;width:100%;min-width:640px}
.gmtable th,.gmtable td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.gmtable th{font:600 14px 'Barlow Condensed',sans-serif;color:var(--dim)}
.gmtable td .act{margin-right:6px}
.gmform{max-width:420px;margin-top:16px;padding:12px;border:1px solid var(--line);background:var(--panel2)}
.gmform input,.gmform select{display:block;width:100%;margin-top:4px;font:inherit;padding:5px 8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.gmform label{margin-bottom:10px}
.gmform h3{margin-top:0}
.gmcard{border:1px solid var(--line);background:var(--panel2);padding:10px 12px;margin:10px 0}
.gmcard h3{margin:0 0 6px}
.gmcard ul{margin:4px 0 0;padding-left:20px}
#gmdurlabel[hidden]{display:none}
/* the two map tabs fill their panel exactly: the drawing stretches, the text stays on single lines */
#map.on,#local.on{display:flex;flex-direction:column;gap:4px;overflow:hidden}
#wm,#strip{flex:1 1 0;min-height:30px;width:100%;height:100%;max-width:none}
#wmcap,#zdesc,#nearby{margin:0;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maphead{display:flex;align-items:baseline;gap:10px;flex:none;min-width:0}
.maphead h3{margin:0;flex:none}
.maphead #pos{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#local .walk{flex:none;margin:0;gap:6px}
#local .walk .act{min-width:0;padding:5px 10px}
.goto{display:flex;align-items:center;gap:4px;margin:0;min-width:0;flex:0 1 auto}
.goto select{min-width:0;flex:1;max-width:240px}
/* item stats on hover */
#tip{position:fixed;z-index:60;max-width:270px;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:7px 9px;font-size:12px;line-height:1.45;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#tip[hidden]{display:none}
#tip strong{display:block;font-size:13px;margin-bottom:2px}
#tip .tq{color:var(--accent)}
#tip .tbad{color:var(--ember)}
.fform{display:flex;align-items:flex-end;gap:8px;max-width:360px}
.fform label{flex:1;margin:0}
.fform input{display:block;width:100%;margin-top:4px;font:inherit;padding:5px 8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.flist{list-style:none;margin:6px 0 0;padding:0;max-width:420px}
.flist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.flist li > span:last-child{display:flex;gap:6px}
.fdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--line);vertical-align:middle}
.fdot.on{background:var(--accent)}
.fon{color:var(--accent)}
.pinvite{border:1px solid var(--ochre);background:var(--panel2);padding:8px 10px;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pinvite[hidden],#pnone[hidden],#pbody[hidden],#pform[hidden]{display:none}
.plist li{flex-wrap:nowrap}
.plist{max-width:none}
.plist li > span.pinfo{display:grid;grid-template-columns:70px 100px 104px 74px 52px;align-items:center;gap:6px}
.pbar{display:inline-block;width:70px;height:6px;background:var(--panel2);border:1px solid var(--line);position:relative}
.pbar[hidden]{display:none}
.pbar span{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.php{min-width:52px}
.pwhere{color:var(--dim);min-width:90px}
#pleave{margin-top:10px}
.pready{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pready small{flex:1}
.pwalk{padding:4px 6px}
.log li.loot{color:var(--ochre)}
#tip .tup{color:#2e8b3e;font-weight:600}
#tip .tdown{color:var(--ember);font-weight:600}
@media (prefers-color-scheme: dark){#tip .tup{color:#6fd07f}}
.rbadge{margin-left:6px;padding:0 5px;border:1px solid var(--accent);color:var(--accent);font-size:11px;border-radius:3px}
.rbadge[hidden]{display:none}
.pnotes{margin:14px 0 0;font-size:14px;color:var(--dim)}
.pnotes a{color:var(--accent)}
.npcgreet{font-style:italic;margin:6px 0 10px}
.qlist,.qlog{list-style:none;margin:0;padding:0}
.qlist li,.qlog li{border-top:1px solid var(--line);padding:8px 0}
.qlist li p{margin:4px 0}
.qlist li div{display:flex;gap:6px;margin-top:6px}
.qlist li.qdone{opacity:.6}
.qlog li div{margin:2px 0}
#craftbtn:disabled{opacity:.5}
.craftlist li{display:flex;justify-content:space-between;align-items:center;gap:8px}
.forgebox{max-width:420px}
.forgeattrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin:8px 0 12px}
.forgeattrs label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0}
.forgeattrs input{width:70px;font:inherit;padding:3px 6px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
#forgeleft.tbad{color:var(--ember)}
/* ================= phones (html.mobile, set in app.js from the screen size and a touch pointer) =================
   The Action view stays on top; below it one panel at a time, picked from the bar at the bottom (Map, Chat, You).
   Turned sideways: the Action view on the left, the panel on the right. */
.pad,#mnav{display:none}
.mobile body{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);box-sizing:border-box;overflow:hidden;-webkit-text-size-adjust:100%}
.mobile #game{display:flex;flex-direction:column;height:calc(100% - 52px - env(safe-area-inset-bottom));padding:0;gap:0}
.mobile #game > .panel{display:none;flex:1 1 auto;height:auto;min-height:0;border-left:0;border-right:0}
.mobile #game > #tr{display:flex;order:-1;flex:0 0 46%;min-height:200px}
.mobile #game.m-tl > #tl,.mobile #game.m-bl > #bl,.mobile #game.m-br > #br{display:flex}
.mobile.landscape #game{flex-direction:row}
.mobile.landscape #game > #tr{flex:0 0 58%;min-height:0}
.mobile #mnav[hidden]{display:none}
.mobile #mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;height:52px;padding-bottom:env(safe-area-inset-bottom);background:var(--panel2);border-top:1px solid var(--line)}
.mobile #mnav button{flex:1;font:600 16px 'Barlow Condensed',sans-serif;letter-spacing:.04em;border:0;background:none;color:var(--dim);position:relative}
.mobile #mnav button[aria-current=true]{color:var(--ink);box-shadow:inset 0 3px var(--accent)}
.mbadge{display:inline-block;min-width:16px;height:16px;margin-left:5px;padding:0 4px;border-radius:8px;background:var(--ember);color:#fff;font:600 11px/16px system-ui,sans-serif;vertical-align:2px}
.mbadge[hidden]{display:none}
/* bigger, finger-sized controls, and no double-tap zoom or long-press menus on game controls */
.mobile button,.mobile .act,.mobile select{touch-action:manipulation}
.mobile .act{min-height:40px;padding:6px 14px;font-size:15px}
.mobile .tabs{scrollbar-width:none}
.mobile .tabs::-webkit-scrollbar{display:none}
.mobile .tabs button{padding:10px 14px}
.mobile #game,.mobile .overlay{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mobile input,.mobile textarea{-webkit-user-select:text;user-select:text;font-size:16px} /* 16px keeps iPhones from zooming in on focus */
.mobile .demo{gap:6px;padding:6px 8px;max-height:40%;overflow-y:auto}
.mobile #status{flex:1 1 100%;font-size:14px}
/* walk pads over the Action view: hold to walk */
.mobile .pad{display:flex;position:absolute;bottom:10px;z-index:3;width:64px;height:64px;border-radius:50%;align-items:center;justify-content:center;
  font-size:24px;color:#fff;background:rgba(20,14,8,.32);border:2px solid rgba(255,255,255,.55);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mobile .pad.on{background:rgba(70,98,45,.75);border-color:#fff}
.mobile .padl{left:10px}
.mobile .padr{right:10px}
/* windows fill the screen */
.mobile .overlay{padding:0;align-items:stretch}
.mobile .overlay .shopbox,.mobile .overlay .forgebox{width:100%;max-width:none;height:100%;max-height:none;box-sizing:border-box;margin:0;border:0;padding:12px 12px calc(16px + env(safe-area-inset-bottom));overflow:auto}
.mobile .shopcols{grid-template-columns:1fr}
.mobile .plist li > span.pinfo{grid-template-columns:52px 74px 1fr auto auto}
.mobile #tip{max-width:80vw;font-size:13px}
.mobile .overlay{z-index:30} /* windows cover the bottom bar */
/* phones: the Action view gets the room. No header; the status sits over the sky; the buttons are one row you can swipe */
.mobile #tr{position:relative;flex-basis:50%}
.mobile #tr > .tabs{display:none}
.mobile .demo{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;scrollbar-width:none}
.mobile .demo::-webkit-scrollbar{display:none}
.mobile .demo > *{flex:none}
.mobile #status{position:absolute;top:6px;left:8px;right:8px;z-index:2;flex:none;font:600 14px 'Barlow Condensed',sans-serif;color:#fff8e8;text-shadow:0 1px 2px #000,0 0 4px #000;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile #buffs{position:absolute;top:26px;left:8px;z-index:2;color:#ffe9a8;text-shadow:0 1px 2px #000;pointer-events:none}
.mobile .pad{width:58px;height:58px;bottom:8px}
.fps{position:absolute;top:6px;right:8px;z-index:4;font:600 12px ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.45);padding:1px 6px;pointer-events:none}
.fps[hidden]{display:none}
.mobile .fps{top:28px}
label.check{display:flex;align-items:center;gap:8px}
/* ================= desktop: layout C (html:not(.mobile)) =================
   The Action view fills the window. Over it: you (top left), the minimap (top right), chat (bottom left), the
   action hotbar (bottom centre) and the window buttons (bottom right). The map and your character panels open as
   windows over the scene. */
.hud,.winhead{display:none}
html:not(.mobile) body{overflow:hidden}
html:not(.mobile) #game{display:block;position:fixed;inset:0;padding:0}
html:not(.mobile) #tr{position:absolute;inset:0;border:0;z-index:1}
html:not(.mobile) #tr > .tabs{display:none}
html:not(.mobile) #action{position:absolute;inset:0}
html:not(.mobile) .hud{display:block;position:absolute;z-index:3;background:rgba(20,14,8,.72);border:2px solid #e8c070;color:#fff8e8;font-family:'Barlow Condensed',sans-serif}
html:not(.mobile) .hudme{top:14px;left:14px;width:300px;padding:10px 14px}
.hudname{font-size:20px;line-height:1.2}.hudname span{font-size:15px;color:#e8dcc0}
.hudbar{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-top:5px}
.hudbar > span:first-child{width:30px}
.hb{flex:1;height:11px;background:#3a2a22;border:2px solid #1e140c;position:relative}
.hbl,.hbs{position:absolute;left:0;top:0;bottom:0;background:#4ab04a;transition:width .2s}
.hbs{background:#5a7ad8}
.hudstatus{margin-top:6px;font-size:15px;color:#e8dcc0}
.hudbuffs{font-size:14px;color:#ffe9a8}
html:not(.mobile) .hudmap{top:14px;right:14px;width:340px;padding:8px 14px 10px}
.hudmaphead{display:flex;justify-content:space-between;align-items:baseline;font-size:17px}.hudmaphead span{color:#e8dcc0;font-size:15px}
.hudstrip{position:relative;height:30px;margin:6px 0}
.hudstrip i{position:absolute;top:13px;height:4px;background:rgba(255,248,232,.45);left:0;right:0}
.hudstrip b{position:absolute;top:6px;width:3px;height:18px;background:#e8c070}
.hudstrip u{position:absolute;top:9px;width:8px;height:12px;border-radius:4px;background:#7ad0ff}
.hudstrip s{position:absolute;top:7px;width:10px;height:16px;border-radius:5px;background:#7ad06a;border:1px solid #1e140c}
.hudstrip em{position:absolute;top:8px;width:10px;height:10px;background:#d8a040;transform:rotate(45deg)}
.hudbtn,.winbar button{font:600 15px 'Barlow Condensed',sans-serif;min-height:34px;padding:3px 12px;border:1px solid #e8c070;background:#3a2e22;color:#fff8e8;cursor:pointer}
.winbar button[aria-pressed=true]{background:#e8c070;color:#1f2527}
html:not(.mobile) .winbar{top:50%;transform:translateY(-50%);right:14px;display:flex;flex-direction:column;gap:6px;padding:8px}
html:not(.mobile) .winbar button{min-width:76px}
/* the action hotbar */
html:not(.mobile) .demo{position:absolute;z-index:3;left:500px;right:14px;bottom:14px;flex-wrap:wrap;justify-content:center;background:rgba(20,14,8,.6);border:2px solid #e8c070;padding:8px}
html:not(.mobile) .demo .act{background:#3a2e22;color:#fff8e8;border-color:#e8c070;min-height:44px;font-size:16px}
html:not(.mobile) .demo .act.lootable{background:#5a4220;color:#ffe9a8}
html:not(.mobile) #status,html:not(.mobile) #buffs{display:none}
/* chat, bottom left */
html:not(.mobile) #bl{position:absolute;z-index:3;left:14px;bottom:14px;width:470px;height:180px;background:rgba(20,14,8,.55);border:1px solid rgba(232,192,112,.7);
  --ink:#fff8e8;--dim:#d8ccb0;--line:rgba(232,192,112,.45);--panel:transparent;--panel2:rgba(0,0,0,.25);--accent:#e8c070;--ember:#ff9a7a;--bg:rgba(0,0,0,.35);color:#fff8e8}
html:not(.mobile) #bl .tabs button{padding:5px 10px;font-size:14px}
/* windows: the map, and your character panels */
html:not(.mobile) #tl,html:not(.mobile) #br{position:absolute;z-index:4;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4);border:2px solid #1f2527}
html:not(.mobile) #tl.open,html:not(.mobile) #br.open{display:flex}
html:not(.mobile) #br{right:124px;top:150px;width:460px;height:calc(100% - 250px);max-height:620px}
html:not(.mobile) #tl{left:50%;transform:translateX(-50%);top:90px;width:680px;height:460px}
html:not(.mobile) .winhead{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--panel2);border-bottom:1px solid var(--line);font:700 19px 'Barlow Condensed',sans-serif}
.winclose{font:600 14px 'Barlow Condensed',sans-serif;padding:3px 12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
@media (max-width:1200px){html:not(.mobile) .demo{left:410px}html:not(.mobile) #bl{width:380px;height:170px}}
/* Ready (auto-join party fights) is retired: in live combat anyone within reach of a monster fights it */
.pready,.rbadge{display:none !important}
/* looting: a hint for the E key on computers, a button on phones */
.loothint{font:600 15px 'Barlow Condensed',sans-serif;color:var(--dim);padding:0 6px;align-self:center}
.loothint.lootable{color:#ffe9a8}
html:not(.mobile) .loothint{color:#d8ccb0}html:not(.mobile) .loothint.lootable{color:#ffe9a8}
.lootbtn{display:none}
.mobile .lootbtn{display:inline-block}
.mobile .loothint{display:none}
/* zoom: same view for everyone by default; zoom in to see things bigger (never further) */
.zoomctl{position:absolute;z-index:4;display:flex;align-items:center;gap:2px;background:rgba(20,14,8,.6);border:1px solid #e8c070;color:#fff8e8;font:600 14px 'Barlow Condensed',sans-serif}
.zoomctl button{min-width:32px;min-height:30px;border:0;background:none;color:#fff8e8;font:700 18px 'Barlow Condensed',sans-serif;cursor:pointer}
.zoomctl button:disabled{opacity:.35;cursor:default}
.zoomctl span{min-width:34px;text-align:center}
html:not(.mobile) .zoomctl{top:150px;right:14px}
.mobile .zoomctl{top:6px;right:8px}
.mobile .zoomctl button{min-width:40px;min-height:36px}
.mobile .fps{top:48px}
.mobile .padj{right:10px;bottom:76px;width:52px;height:52px;font-size:20px}