#game-gui{pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;align-content:center;z-index:-1;flex-wrap:wrap}#left-up{pointer-events:none;position:absolute;top:0;left:0;width:50%;height:50%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-content:flex-start;z-index:2;flex-wrap:wrap;margin-left:1%}.color{width:20px;height:20px;margin:1rem}.color[data-color=red]{background-color:red}.color[data-color=blue]{background-color:#00f}#left-up *{pointer-events:auto}#right-up{pointer-events:none;position:absolute;top:0;right:0;width:50%;height:50%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;align-content:flex-end;z-index:2;flex-wrap:wrap;margin-right:1%}#right-up *{pointer-events:auto}#left-down{pointer-events:none;position:absolute;bottom:0;left:0;width:50%;height:50%;display:flex;justify-content:flex-start;align-items:center;align-content:flex-end;z-index:2;flex-wrap:wrap;margin-left:1%}#left-down *{pointer-events:auto}#right-down{pointer-events:none;position:absolute;bottom:0;right:0;width:50%;height:50%;display:flex;justify-content:flex-end;align-items:center;align-content:flex-end;z-index:2;flex-wrap:wrap;margin-right:1%}#right-down *{pointer-events:auto}#init-gui{pointer-events:auto;position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;z-index:2;flex-wrap:wrap;background-color:#000000b3}#init-gui h2{font-size:2.4em}#init-gui-header{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}#init-gui-header h1{filter:drop-shadow(12px 5px 37px #737373)}#btn-init{margin-inline:1rem;text-align:center;-webkit-box-shadow:8px 12px 29px -8px rgba(0,0,0,.75);-moz-box-shadow:8px 12px 29px -8px rgba(0,0,0,.75);box-shadow:8px 12px 29px -8px #000000bf}#init-gui-controls{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;flex-direction:column;background-color:#242424;padding-bottom:1rem;border-radius:8px;width:25%;-webkit-box-shadow:8px 12px 29px -8px rgba(0,0,0,.75);-moz-box-shadow:8px 12px 29px -8px rgba(0,0,0,.75);box-shadow:8px 12px 29px -8px #000000bf}#init-gui-controls h2{font-size:2.4em;margin-top:0;margin-bottom:1rem;background-color:#1a1a1b;width:100%;text-align:center;border-radius:8px 8px 0 0;filter:drop-shadow(5px 5px 10px #2e2e2e)}.controls{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;margin-top:1rem;margin-bottom:1rem}.controls h3{font-size:1.4em;margin-right:1rem;margin-top:0;margin-bottom:0;font-weight:400}kbd{font-family:monospace;font-size:1.2em;font-weight:900;padding:.2em .4em;border-radius:4px;background-color:#f9f9f9;border:1px solid #1a1a1b;color:#1a1a1b;margin:0 .2em}@media (width <= 768px){#btn-init{margin-inline:0;padding:2rem}#init-gui-controls{width:80%}}@media (768px <= width <= 1024px){#init-gui-controls{width:60%}}.band_img{width:10%;margin:1rem}.band_header{margin:0;padding:0;display:flex;flex-direction:row}#band_header_red{justify-content:flex-end}.units{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap}@keyframes gui-appear{0%{opacity:0}50%{opacity:0}to{opacity:1}}#gui{pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;align-content:center;z-index:1;flex-wrap:wrap;animation:gui-appear 2s ease-in-out}#gui * h1{color:#fff;text-align:center;margin:0;padding:0;margin-bottom:1rem;font-size:4em}#gui *::selection{background-color:#1a1a1b;color:#f9f9f9}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#242424;text-decoration:inherit}a:hover{color:#737373}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s;border-color:#737373}button:hover{border-color:transparent}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@keyframes canvas-appear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@media (width > 768px){canvas{clip-path:polygon(30% 0%,70% 0%,100% 50%,70% 100%,30% 100%,0% 50%)}}@media (width <= 768px){canvas{width:100%;height:100%;clip-path:none}}canvas{animation:canvas-appear 1s ease-in-out;filter:blur(1px);transition:all .5s ease-in-out}