:root{--map-height: 10;--map-width: 10;--tile-img-h: 8px;--tile-zoom: 5 }.tile:hover{opacity:.5}.tile{--r: 0}.selected-tile{opacity:.5}.image{--start-y: 0;--start-x: 0;clip-path:polygon(0 0,calc(8px*var(--image-zoom)) 0,calc(8px*var(--image-zoom)) calc(8px*var(--image-zoom)),0 calc(8px*var(--image-zoom)));object-position:calc(-1 * calc(var(--start-x)*8px*var(--image-zoom))) calc(-1 * calc(var(--start-y)*8px*var(--image-zoom)));image-rendering:pixelated;height:calc(var(--tile-img-h) * var(--image-zoom));width:calc(var(--tile-img-h) * var(--image-zoom))}.clip{--start-x: 0px;--start-y: 0px;--width: 8px;--height: 8px;--image-zoom: 0;image-rendering:pixelated;clip-path:polygon(0 0,calc(var(--width)*var(--image-zoom)) 0,calc(var(--width)*var(--image-zoom)) calc(var(--height)*var(--image-zoom)),0 calc(var(--height)*var(--image-zoom)));object-position:calc(-1 * calc(var(--start-x)*var(--image-zoom))) calc(-1 * calc(var(--start-y)*var(--image-zoom)));object-fit:cover;height:calc(8px * var(--image-zoom));width:calc(var(--width) * var(--image-zoom))}.entity{--x:0;--image-zoom: var(--tile-zoom);pointer-events:none}.selected-entity:after{content:"";position:absolute;width:5px;height:5px;background-color:#6aff00;border:2px solid seagreen;left:1px;top:-12px}.move{position:absolute;z-index:999999;left:var(--x);top:var(--y)}.build-icon{--image-zoom: 7;margin-right:10px;object-fit:cover}.tile-image{--show: block;--image-zoom: var(--tile-zoom);display:var(--show);position:absolute;overflow:hidden;object-fit:cover}.tile:after{content:"";width:calc(var(--r)*40px);height:calc(var(--r)*40px);position:absolute;background-color:#000000a0}h1,h2,p{margin:0;padding:0}.b{border-radius:5px;background-color:#e2e2e2;border:2px solid #000}.bar{display:flex}.map{display:grid;grid-template-columns:repeat(var(--map-width),40px);grid-gap:0px;grid-template-rows:repeat(var(--map-heigh),40px);position:relative;user-select:none;cursor:default}.operate{margin-left:10px;padding:10px;flex-grow:1}.building-list{overflow-y:scroll;height:200px;margin:5px 0;border:2px solid #000;border-radius:5px}.building-card:hover{background-color:#8e8e8e}.building-card{display:flex;border-radius:10px;background-color:#b7b7b7;height:60px;margin:5px;padding:10px;overflow:hidden}.building-card{font-size:.75em}.person-card{width:100%;background-color:#8e8e8e;margin-bottom:5px;border:1px solid #000;padding:2px;display:flex;position:relative}.person-card button{width:65px;margin-right:5px}.selected-card{border:4px solid #8b1515a0;padding:6px}button{width:100%}.jobs{display:flex;background-color:#7ed025;border:3px solid #569018;position:absolute;z-index:1;top:-50px;left:70px}.jobs button{margin:0}