html{font-family:monospace;background-color:#000;color:#fff;text-shadow:1px 1px 0px #000}*{scrollbar-width:thin;scrollbar-color:#333 #000}#root,html,body{margin:0;width:100vw;height:100vh;overflow:hidden;overscroll-behavior:none}div{margin:0;padding:0;min-width:0;min-height:0}button{border-radius:8px;border:outset #888 2px;margin:3px;padding:3px;min-width:11mm;min-height:11mm;font-family:monospace;background-color:#222;color:#fff;box-shadow:#000 1px 1px 2px 2px;overflow:hidden;overflow-wrap:normal}button:focus,button:active{border-style:inset;box-shadow:#000 1px 1px 1px 1px;transform:translate(1px,1px)}.debug.renderer .hostile{color:#f88}.debug.renderer .friendly{color:#88f}.Panel{position:relative;margin:3px;padding:6px;border-radius:6px;border:none;overflow:hidden;background-color:#222;box-shadow:#000 1px 1px 2px 2px}.EPBar{position:relative;border-radius:1em;border:inset #fff 3px;overflow:hidden;min-height:10px;height:clamp(10px,1em + 4px,2em);max-height:2em;margin:4px;padding:2px;background-color:#000}.EPBar .smooth-ep,.EPBar .ep{position:absolute;border:none;overflow:hidden;margin:0;left:0;transition:width 1s ease-in-out}.EPBar .smooth-ep{background-color:#fff;z-index:0}.EPBar .ep{background-color:#44f;box-shadow:inset 0 0 0 2px #66f;z-index:10}.EPBar .smooth-ep,.EPBar .ep{border-radius:1em;top:0;bottom:0}.EPBar .overlay{position:absolute;display:flex;flex-direction:row;align-content:space-evenly;justify-content:space-evenly;top:0;left:0;right:0;bottom:0;border:none;overflow:hidden;margin:0;z-index:1000;padding:2px}.EPBar .overlay div{flex-basis:0;flex-grow:1;text-align:center}.HPBar{position:relative;border-radius:1em;border:inset #fff 3px;overflow:hidden;min-height:10px;height:clamp(10px,1em + 4px,2em);max-height:2em;margin:4px;padding:2px;background-color:#000}.HPBar .smooth-hp,.HPBar .hp,.HPBar .cdp{position:absolute;border:none;overflow:hidden;margin:0;left:0;transition:width 1s ease-in-out}.HPBar .smooth-hp{background-color:#fff;z-index:0}.HPBar .hp{background-color:#f44;box-shadow:inset 0 0 0 2px #f66;z-index:10}.HPBar .smooth-hp,.HPBar .hp{border-radius:1em;top:0;bottom:0}.HPBar .cdp{border-radius:1em;background-color:#000;top:30%;bottom:30%;z-index:20}.HPBar .overlay{position:absolute;display:flex;flex-direction:row;align-content:space-evenly;justify-content:space-evenly;top:0;left:0;right:0;bottom:0;border:none;overflow:hidden;margin:0;z-index:1000;padding:2px}.HPBar .overlay div{flex-basis:0;flex-grow:1;text-align:center}.Scroller{position:relative;padding:0;overflow:hidden;flex-grow:1;width:100%;height:100%}.Scroller .scrollArea{position:relative;display:block;margin:0;overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable both-edges;scroll-behavior:smooth;scrollbar-color:#333 rgba(0,0,0,0);min-height:0;width:100%;height:100%}.Scroller .scrollArea:hover{scrollbar-color:#444 rgba(0,0,0,0)}.Scroller .scrollToBottom{position:absolute;display:inline-block;bottom:0;left:0;right:0;min-width:0;max-width:none;display:block}.Button{position:relative;margin:4px;padding:1em;min-width:16mm;min-height:16mm;max-width:fit-content;max-height:fit-content;color:#fff}.Button .hotkey{position:absolute;top:0;right:0;padding:4px;color:#bbb}.ActionButton{transition:box-shadow 1s;box-shadow:inset 0 0 #0000}.ActionButton.active{box-shadow:inset 0 0 4px 4px #fff}.ActionButton.queued{box-shadow:inset 0 0 1px 1px #fff}.EntityPanel{position:relative;min-height:19mm;transition:background-color 1s ease-in-out}.EntityPanel .hotkey{position:absolute;top:0;right:0;margin:2px;color:#bbb}.EntityPanel.hostile{background-color:#522}.EntityPanel.friendly{background-color:#224}.EntityPanel.targetted{box-shadow:#fff 0 0 1px 1px}.EntityPanel .ActionBar{overflow-x:auto;scroll-behavior:smooth;scrollbar-color:#333 rgba(0,0,0,0)}.EntitiesDisplay{height:100%}.EntitiesDisplay .entityPanel{display:inline-block;margin:4px;width:calc(50% - 20px);height:19mm;min-width:40mm;min-height:19mm}.Game{width:100vw;height:100vh;display:grid;grid-template:"events dynamic" 10fr "self target" 3fr "queue queue" 1fr / 1fr 1fr}.Game .events{grid-area:events}.Game .dynamic{grid-area:dynamic}.Game .self{grid-area:self}.Game .target{grid-area:target}.Game .queue{grid-area:queue}.ActionBar{display:flex;flex-direction:row;overflow-x:scroll;overflow-y:hidden}
