:root{--u: 1;--t: 1;--bg: #1c1c1c;--panel: #3b3b3b;--panel-dark: #2a2a2a;--edge-light: #5e5e5e;--edge-dark: #141414;--text: #c0c0c0;--hp: #c03030;--mana: #3050c0}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:12px Verdana,Tahoma,sans-serif}[hidden]{display:none!important}.screen{height:100%}#login-screen{display:flex;align-items:center;justify-content:center;gap:16px}.dialog{width:300px;padding:12px 16px;background:var(--panel);border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light)}.dialog h1{margin:-12px -16px 12px;padding:4px 8px;font-size:12px;background:var(--panel-dark);color:#e0e0e0}.dialog label{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.dialog input{width:140px}input{background:#1a1a1a;color:#e0e0e0;border:1px solid;border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark);padding:3px 4px;font:inherit}button{min-width:70px;padding:3px 10px;background:var(--panel);color:#e0e0e0;font:inherit;cursor:pointer;border:2px solid;border-color:var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light)}button:active{border-color:var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark)}.buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.status{min-height:1em;margin:8px 0 0;white-space:pre-wrap;color:#e0a040}#characters{list-style:none;margin:0;padding:0;background:#1a1a1a;min-height:80px;border:1px solid var(--edge-dark)}#characters li{padding:2px 6px;cursor:pointer}#characters li.selected{background:#505050;color:#fff}#game-screen{display:flex;gap:calc(6px * var(--u, 1));padding:calc(6px * var(--u, 1))}#left{flex:1;display:flex;flex-direction:column;gap:calc(6px * var(--u, 1));min-width:0}#view-box{flex:1;display:flex;align-items:center;justify-content:center;background:#000;min-height:0;overflow:hidden}#view{image-rendering:pixelated;display:block}#console{height:calc(122px * var(--t, 1));display:flex;flex-direction:column;background:var(--panel-dark);border:1px solid var(--edge-dark)}#log{flex:1;overflow-y:auto;padding:calc(3px * var(--t, 1)) calc(6px * var(--t, 1));font-size:calc(11px * var(--t, 1));line-height:1.35}#log div{white-space:pre-wrap}#chat input{width:100%;border-left:0;border-right:0;border-bottom:0;height:calc(18px * var(--t, 1));font-size:calc(11px * var(--t, 1));padding:0 calc(4px * var(--t, 1));box-sizing:border-box}.say{color:#f0f000}.monster{color:#fe6500}.private{color:#9f9dfd}.warning{color:#f55e5e}.info{color:#00eb00}.blue{color:#9f9dfd}.status-line,.default{color:#e0e0e0}.special{color:#707070}.drag-ghost{position:fixed;width:calc(32px * var(--u, 1));height:calc(32px * var(--u, 1));pointer-events:none;image-rendering:pixelated;opacity:.85;z-index:10}body.dragging,body.dragging *{cursor:grabbing!important}body.use-with #view,body.use-with .slot{cursor:crosshair!important}#count-dialog{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:20}#count-dialog input[type=range]{width:100%}canvas.bitmap-text{image-rendering:pixelated;vertical-align:middle}#log div canvas.bitmap-text,#motd canvas.bitmap-text,#login-status canvas.bitmap-text{display:block}#log{line-height:0}#log div{min-height:calc(14px * var(--t, 1))}.nowrap{white-space:nowrap}#log{scrollbar-gutter:stable}#game-screen{position:relative}.curtain{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:50;pointer-events:none}#side{width:calc(176px * var(--u, 1));flex-shrink:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;background-color:#474747;image-rendering:pixelated}#side canvas{display:block;image-rendering:pixelated}#side-top{position:relative;flex-shrink:0}#side-canvas,#inventory{position:absolute;left:0;top:0}.slot{position:absolute;width:calc(34px * var(--u, 1));height:calc(34px * var(--u, 1));background-size:100% 100%;image-rendering:pixelated}.slot canvas.icon{position:absolute;left:calc(1px * var(--u, 1));top:calc(1px * var(--u, 1));width:calc(32px * var(--u, 1));height:calc(32px * var(--u, 1));pointer-events:none}.slot canvas.count{position:absolute;right:calc(2px * var(--u, 1));bottom:calc(2px * var(--u, 1));pointer-events:none}#windows{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}#windows::-webkit-scrollbar{display:none}.side-window{position:relative;flex-shrink:0;width:calc(176px * var(--u, 1))}.side-window>canvas.frame{position:absolute;left:0;top:0}.window-body{position:absolute;left:calc(5px * var(--u, 1));top:calc(16px * var(--u, 1));width:calc(156px * var(--u, 1));overflow:hidden}.container-grid{position:relative}