:root{font-family:Roboto,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input{font-family:Roboto,Avenir,Helvetica,Arial,sans-serif;line-height:1.5}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}@layer base,scopes;@font-face{font-family:BonaNova;src:url(/assets/BonaNovaSC-Regular-Bh0EsgVL.ttf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Oswald;src:url(/assets/Oswald-VariableFont_wght-CboGeR6W.ttf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:AndadaPro;src:url(/assets/AndadaPro-VariableFont_wght-D95wEyI9.ttf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:AndadaPro;src:url(/assets/AndadaPro-VariableFont_wght-D95wEyI9.ttf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:AndadaPro;src:url(/assets/AndadaPro-Italic-VariableFont_wght-mSmH35vc.ttf) format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:AndadaPro;src:url(/assets/AndadaPro-Italic-VariableFont_wght-mSmH35vc.ttf) format("opentype");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Roboto;src:url(/assets/Roboto-VariableFont_wdth-WOy3sDCz.ttf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(/assets/Roboto-VariableFont_wdth-WOy3sDCz.ttf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(/assets/Roboto-Italic-VariableFont_wdth-CtZJC3o8.ttf) format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Roboto;src:url(/assets/Roboto-Italic-VariableFont_wdth-CtZJC3o8.ttf) format("opentype");font-weight:700;font-style:italic;font-display:swap}@layer base{:root{--attacker-solid-color: rgba(124, 43, 37, 1);--attacker-transparent-color: rgba(124, 43, 37, .4);--attacker-vision-color: rgba(124, 43, 37, .2);--defender-solid-color: rgba(70, 88, 80, 1);--defender-transparent-color: rgba(70, 88, 80, .5);--visionpoint-vision-color: rgba(37, 79, 124, .2);--objective-area-color: rgba(9, 62, 88, .3);--objective-marker-color: rgba(9, 62, 88, .6);--footprint-color: rgba(192, 192, 192, .9);--footprint-stroke-color: #888;--obstacle-color: rgb(85, 85, 85);--model-normal-color: white;--model-hover-color: rgb(237, 208, 173);--model-selected-color: rgb(176, 212, 244);--model-grabbed-color: rgb(176, 186, 244);--unit-hover-color: rgb(245, 236, 226);--movepoint-selected-color: rgb(176, 212, 244, .5);--movepoint-grabbed-color: rgb(176, 186, 244, .5);--selector-color: rgb(176, 212, 244);--ui-font: "Roboto";--heading-font: "Oswald";--data-font: "AndadaPro";--title-font: "BonaNova";--ui-emphasis-color: rgb(23, 91, 125);--ui-action-color: rgba(9, 62, 88);--ui-action-hover-color: rgb(0, 72, 107)}#root{position:absolute;width:100%;height:100%;display:flex;flex-direction:column}@keyframes dash{to{stroke-dashoffset:0}}#loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#loading svg{transform:scale(.3)}#loading svg *{stroke-dasharray:1000;stroke-dashoffset:1000;animation:dash 5s linear forwards infinite}#main-logo{height:3rem}#menubar,#toolbar{display:flex;flex-direction:row;align-items:center;height:3.6rem;flex:0 0 3.6rem;padding:0 1rem;gap:.5rem;box-shadow:0 .3rem .3rem #0003;z-index:2}#menubar{justify-content:space-between;gap:1rem}#menubar h1{font-family:var(--title-font);font-size:1.8rem;font-weight:400;font-style:normal;margin:0}#menubar #menu-toggle{margin-right:1rem}#menubar section{flex:0 auto;display:flex;flex-direction:row;align-items:center}#toolbar{gap:1rem}.hotkey{display:flex;flex-direction:row;gap:.5rem;align-items:center}.hotkey .key{padding:0 .4rem;border:.15rem solid #bbb;background:#eee;border-radius:.25rem;font-weight:700;color:#444}#board-container{position:relative;flex:1 1 auto;--menu-width: 20rem}#board-container #board-menu{position:absolute;top:0;bottom:0;width:var(--menu-width);left:calc(-1 * var(--menu-width));transition:left .5s;background:#fff;border-right:.1rem solid #666}#board-container #board-menu section{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}#board-container #board-wrapper{position:absolute;inset:0;transition:left .5s}#board-container.is-menu-open #board-menu{left:0}#board-container.is-menu-open #board-wrapper{left:var(--menu-width)}#board{display:block;min-width:0;min-height:0;width:100%;height:100%;touch-action:none;background:#888}#snapshots{position:absolute;top:0;left:0;display:flex;flex-direction:row;margin:.5rem;padding:.4rem .1rem .4rem .4rem;background:#fff;border:2px solid #888;border-radius:.5rem;box-shadow:0 .3rem .3rem #0003}#snapshots .snapshot{position:relative;padding:.2rem 1rem;min-width:5rem;border-right:2px solid #888;-webkit-user-select:none;user-select:none;display:flex;flex-direction:row;align-items:center;justify-content:center}#snapshots .snapshot.is-current{font-weight:700}#snapshots .snapshot .actions{position:absolute;top:2.3rem;left:0;background:#ffffffe6;padding:.5rem 1rem;border-radius:.2rem;border:1px solid #888;box-shadow:0 .3rem .3rem #0003;display:flex;flex-direction:column;gap:.4rem;width:max-content}#snapshots .snapshot .actions a{white-space:no-wrap}#snapshots>a{padding:.2rem .6rem}#snapshots input{font-size:1rem;text-align:center}#operations{position:absolute;top:0;right:0;display:flex;flex-direction:column;gap:.5rem;padding:.5rem}#operations>*{background:#fff;padding:.5rem 1rem;border-radius:.3rem;border:1px solid #888;box-shadow:0 .3rem .3rem #0003;display:flex;flex-direction:row;align-items:center;gap:.5rem}#hovered-model{position:absolute;bottom:.5rem;right:.5rem;display:flex;flex-direction:column;padding:.5rem;background:#000000b3;color:#fff;border-radius:.3rem}#hovered-model .hovered-unit{font-family:var(--heading-font);font-size:13pt;text-transform:uppercase}#hovered-model .hovered-model{opacity:.7}.board-border{fill:#e6e6e6;stroke:#888;stroke-width:.2rem}.grid-line{stroke:#ccc;stroke-width:.05rem}.deployment-defender{stroke:var(--defender-solid-color);stroke-width:.2rem;fill:var(--defender-transparent-color)}.deployment-attacker{stroke:var(--attacker-solid-color);stroke-width:.2rem;fill:var(--attacker-transparent-color)}.objective-area{fill:var(--objective-area-color)}.objective-marker{fill:var(--objective-marker-color)}.footprint{fill:var(--footprint-color);stroke-width:.1rem;stroke:var(--footprint-stroke-color)}.obstacle{fill:var(--obstacle-color)}.deployment-visibility{fill:var(--attacker-vision-color)}.visionpoint-visibility{fill:var(--visionpoint-vision-color)}.vision-point .vision-point--marker{fill:#000;transition:fill .5s}.vision-point.selected .vision-point--marker{fill:var(--model-selected-color)}.vision-point.grabbed .vision-point--marker{fill:var(--model-grabbed-color);filter:drop-shadow(0px 4px 3px rgb(0 0 0 / .4));transform:translateY(-1px)}.vision-point image{pointer-events:none}.deployment-visibility,.visionpoint-visibility{transition:opacity 1.5s;pointer-events:none}:is(.deployment-visibility,.visionpoint-visibility).is-empty{opacity:0}.unit-canvas{fill:transparent}.model{stroke:#000;stroke-width:.2rem;fill:var(--model-normal-color);transition:fill .5s}.model.staged{display:none}g:has(>.model.grabbed){filter:drop-shadow(0px 4px 3px rgb(0 0 0 / .4));transform:translateY(-1px)}svg:not(.busy) .unit .model:not(.selected):hover{fill:var(--model-hover-color)!important}svg:not(.busy) .unit .model.selected,svg:not(.busy) .unit .model.selected:hover{fill:var(--model-selected-color)}svg:not(.busy) .unit:hover .model{fill:var(--unit-hover-color)}svg:not(.busy) .unit:hover .model.selected{fill:var(--model-selected-color)}svg.busy .unit .model.selected{fill:var(--model-selected-color)}svg.busy .unit .model.selected.grabbed{fill:var(--model-grabbed-color)!important}.move-vector{stroke:var(--defender-solid-color);stroke-width:.13rem;stroke-dasharray:.2rem}.move-point{fill:transparent;stroke:var(--defender-solid-color);stroke-width:.2rem;transition:fill .5s}.move-point.staged{display:none}.move-point.selected{fill:var(--movepoint-selected-color)}.move-point.grabbed{fill:var(--movepoint-grabbed-color)}.move-distance{text-anchor:middle;font-family:var(--ui-font);font-weight:700;font-size:14pt;stroke:#fffc;fill:var(--defender-solid-color);stroke-width:3pt;paint-order:stroke;stroke-linejoin:round;pointer-events:none;-webkit-user-select:none;user-select:none}.move-distance.staged{display:none}#polygon-board{display:block;min-width:0;min-height:0;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff}.image-drop-zone{width:100%;height:100%}.polygon-editor.disabled{pointer-events:none}.polygon-canvas{fill:transparent;stroke:#888;stroke-width:.1rem}.polygon-grid-line{stroke:#ccc;stroke-width:.01rem;pointer-events:none}.polygon-grid-line.major-line{stroke:#666}.polygon-grid-line.axis-line{stroke-width:.02rem}.polygon-grid-line.axis-line.x{stroke:#00f}.polygon-grid-line.axis-line.y{stroke:green}.polygon-grid-line.symmetry-line{stroke:red;stroke-width:.03rem}.editable-polygon{stroke-width:.2rem;stroke:#000;fill:#0003;pointer-events:none}.editable-polygon-span{stroke-width:.4rem;stroke:transparent}.editable-polygon-span.is-idle:hover{stroke:var(--model-selected-color)}.editable-polygon-handle{fill:#000;opacity:.5}.editable-polygon-handle:hover,.editable-polygon-handle.is-selected{fill:var(--model-selected-color);opacity:1}.editable-polygon-handle.is-mirrored{fill:var(--model-hover-color);opacity:1}#polygon-board .reference-image.disabled{pointer-events:none}.selector{display:none;stroke:var(--selector-color);stroke-width:.2rem;fill:none;pointer-events:none}.selector.active{display:initial}.dialog-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0003}.dialog-container dialog{background:#fff;display:flex;flex-direction:column;width:30rem;max-height:80%;border-radius:1rem;padding:0}.dialog-container dialog.wide{width:60rem;height:80%}.dialog-container dialog header{position:relative;flex:0;font-family:var(--heading-font);font-size:18pt;text-align:center;text-transform:uppercase;border-bottom:.1rem solid #888;padding:.5rem 2.5rem}.dialog-container dialog header a{position:absolute;top:.5rem;right:.3rem}.dialog-container dialog section{display:flex;flex-direction:column;flex:1;overflow:auto;padding:1rem;gap:.5rem;scrollbar-color:#aaa transparent}.dialog-container dialog footer{flex:0;border-top:.1rem solid #888;padding:.7rem 1rem;text-align:center;display:flex;flex-direction:row;align-items:center;gap:1rem}.dialog-container dialog footer button{flex:1}.dialog-container dialog footer a svg{margin-right:.3rem}.dialog-status{text-align:center}form{display:flex;flex-direction:column;gap:.5rem}form .form-section{border:1px solid #ccc;border-radius:.5rem;padding:.5rem}form .form-row{display:flex;flex-direction:row;align-items:center;gap:1rem}form .form-row-item{flex:1 1;display:flex;flex-direction:row;align-items:center;gap:.5rem;min-width:0}form .form-row-item label{display:block;flex:0 1 auto}form select{border:0;background-color:#ccc;height:2rem;padding:0 1rem;border-radius:.3rem}form input{border:1px solid #888;border-radius:.3rem;text-align:center;height:2rem;flex:1;min-width:0}form input.invalid{border-color:red}form button,dialog footer button{border:none;line-height:2.4rem;font-family:var(--heading-font);font-size:14pt;text-transform:uppercase;color:#fff;background-color:var(--ui-action-color);border-radius:.5rem}:is(form button,dialog footer button):disabled{background-color:#bbb}a,.interactive{color:var(--ui-action-color);cursor:pointer}:is(a,.interactive):hover{color:var(--ui-action-hover-color);filter:drop-shadow(0 0 4px orange)}:is(a,.interactive).toggle{padding:0 .1rem}:is(a,.interactive).toggled{background:var(--ui-action-color);color:#fff;border-radius:.2rem}:is(a,.interactive).is-disabled{opacity:.5}}@layer scope{@scope (.deployment-name){:scope{font-family:var(--heading-font);font-size:14pt;text-transform:uppercase;height:70%;margin-left:1rem;border-left:.1rem solid #666;border-right:.1rem solid #666;padding:0 2rem}}@scope (.deployment-info){:scope{flex:1;display:flex;flex-direction:row;align-items:first baseline;gap:.5rem}div{font-size:.9rem}svg{position:relative;top:.2rem}.deployment-faction-name-home{color:var(--defender-solid-color);font-weight:700}.deployment-info-section{display:flex;flex-direction:column}.deployment-deployment-name{font-weight:700}.deployment-layout-name{color:#666}}@scope (.create-unit-row){:scope{flex-direction:column;align-items:initial;gap:.2rem}.main-row,.slot-row,.model-row{display:flex;flex-direction:row;align-items:center;gap:1rem}.unit-name{flex:1;font-family:var(--heading-font);font-size:15pt;text-transform:uppercase;display:flex;flex-direction:row;align-items:center;gap:.5rem}.slot-row .slot-name{flex:3}.slot-row .slot-sizes{flex:1;display:flex;flex-direction:row}.slot-row .slot-sizes .slot-size{display:block;flex:1;padding:0 .2rem;text-align:center}.slot-row .slot-sizes .slot-size.selected{background-color:var(--ui-action-color);border-radius:.5rem;color:#fff;font-weight:700}.model-row .model-name{flex:3;font-weight:700;text-transform:uppercase;font-size:11pt}.model-row .model-counts{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:end;white-space:nowrap}.model-row .model-counts a{padding:0 .3rem}.model-row .model-counts .model-count{padding:0 .3rem;line-height:2rem;font-weight:700}.model-row .model-counts .model-count svg{opacity:.5}.unit-points{flex:0;white-space:nowrap}}@scope (.persisted-deployment-row){:scope{display:flex;flex-direction:column;gap:.2rem}.title-row,.info-row{display:flex;flex-direction:row;align-items:center}.title{flex:1;font-family:var(--heading-font);font-size:15pt;text-transform:uppercase}.operations{flex:0}.info-row section{padding:0}}}