:root{color-scheme:dark;font:14px/1.5 system-ui,sans-serif;background:#131b21;color:#e9eceb}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:16px;padding:10px 20px;background:#151e24;border-bottom:1px solid #3a484c;min-height:80px}header a{color:#d1c093;text-decoration:none;white-space:nowrap}label{display:flex;gap:7px;align-items:center;font-size:12px}select,button{font:inherit;color:#ebeeee;background:#25343a;border:1px solid #4a5c64;border-radius:4px;padding:9px;max-width:350px}button{cursor:pointer}main{height:calc(100dvh -80px);min-height:360px;position:relative;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.title{position:absolute;top:20px;left:25px;pointer-events:none;text-shadow:0 1px 4px #000}.title small{color:#e3d3a6;font-size:10px;letter-spacing:.2em}h1{font:30px Georgia,serif;margin:3px 0}.title p{font-size:11px;margin:0;color:#d3dedf}#loading{position:absolute;left:25px;bottom:84px;max-width:85%;padding:10px 14px;background:#122028df;color:#e6d3a6;border:1px solid #5b655b;border-radius:4px;font-size:12px}#loading.error{background:#491b18;color:#ffdbd3}#loading[hidden]{display:none}footer{position:absolute;bottom:0;left:0;right:0;padding:10px 24px;background:#10202be0;display:flex;gap:18px;flex-wrap:wrap;font-size:11px}#movement-state{color:#efda9e}details{padding:12px 24px;background:#17232b;color:#afbec6;font-size:12px}summary{cursor:pointer;color:#d5c49b}details p{max-width:950px}code{font-size:11px;white-space:pre-wrap}@media(max-width:800px){header{flex-wrap:wrap;gap:7px 12px;padding:8px 14px}header a{font-size:11px}header label:first-of-type{flex:1;min-width:260px}header label:first-of-type select{width:100%;max-width:100%;min-width:0}select,button{padding:7px;font-size:12px}main{height:calc(100dvh -110px)}.title{top:14px;left:18px}h1{font-size:25px}footer{gap:4px 14px;padding:8px 18px}footer span:last-child{width:100%}}
#retry-loading{position:absolute;right:18px;bottom:120px;z-index:5}#retry-loading[hidden]{display:none}#stream-state{color:#b9cacc}
#combat-panel{position:absolute;right:16px;bottom:90px;z-index:2;max-width:300px;padding:8px 12px;background:#10202be6;border:1px solid #63716e;font-size:11px}#combat-panel[hidden],#respawn[hidden]{display:none}#combat-panel p{margin:4px 0}.drop-label{position:absolute;left:0;top:0;z-index:3;background:transparent;border:0;padding:3px;white-space:nowrap;cursor:pointer}.drop-label[hidden]{display:none}.drop-label canvas{width:auto;height:auto;display:block;pointer-events:none}

header .field{display:flex;align-items:center;gap:8px}header .field:first-of-type{flex:1;min-width:250px;max-width:460px}header .field:first-of-type select{width:100%;min-width:0}header .field label:first-of-type{flex:0;min-width:0;white-space:nowrap}@media(max-width:800px){header .field:first-of-type{min-width:250px}}

header .field label:first-of-type{flex:0 0 auto;min-width:auto}header .field:first-of-type select{flex:1 1 0;width:auto;max-width:none}@media(max-width:800px){header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'back recenter' 'character mode';align-items:center}header>a{grid-area:back}header>button{grid-area:recenter}header .field:first-of-type{grid-area:character;min-width:0;max-width:none}header .field:nth-of-type(2){grid-area:mode}header .field label{font-size:11px}header .field select{min-width:0}}
#chat-panel{position:absolute;left:24px;bottom:70px;max-width:min(480px,90%);font-size:12px;text-shadow:0 1px 3px #000}#network-state:not(:empty){padding:6px 9px;background:#10202be6;border:1px solid #536353;color:#e7d5a0}#chat-lines{max-height:120px;overflow:auto;background:#10202bbd}#chat-lines>div{padding:2px 8px;overflow-wrap:anywhere}#online-chat{display:flex;gap:6px;align-items:center;background:#10202be6;padding:6px}#online-chat[hidden]{display:none}#chat-input{min-width:0;flex:1;color:#fff;background:#18292f;border:1px solid #53666c;padding:6px}#online-chat button{padding:5px 8px}#online-link{font-size:12px}@media(max-width:800px){header{grid-template-areas:'back recenter' 'character mode' 'online online'}#online-link{grid-area:online}main{height:calc(100dvh -140px)}#chat-panel{left:18px;bottom:90px}}
.npc-name{position:absolute;left:0;top:0;pointer-events:auto;background:transparent;border:0;border-radius:0;padding:0;font:12px Georgia,serif;color:#eae5c9;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;white-space:nowrap}.npc-name[hidden]{display:none}#inventory-panel{position:absolute;right:16px;top:18px;z-index:2;width:260px;max-height:48%;overflow:auto;padding:9px 12px;background:#10202be8;border:1px solid #63716e;border-radius:3px}#inventory-panel[hidden]{display:none}#inventory-items{display:grid;gap:7px;padding-top:10px}#inventory-items button{font-size:11px;padding:6px;width:100%;text-align:left}.equipment-field select{max-width:155px}header{gap:10px}@media(max-width:1050px){header{flex-wrap:wrap}main{height:calc(100dvh - 130px)}}@media(max-width:800px){header{grid-template-areas:'back recenter' 'character mode' 'equipment online'}.equipment-field{grid-area:equipment}#online-link{grid-area:online}main{height:calc(100dvh - 150px)}#inventory-panel{top:110px;width:220px;max-height:42%}}