html,
body {
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
}
hr {
  margin: 1em auto;
  border-top: 0.1em double #000;
  width: 90%;
}
#toolbox-holder {
  display: inline-block;
  vertical-align: top;
  width: 21em;
  height: 100%;
  background-color: rgba(51, 12, 0, 0.9);
  overflow: auto;
}
#toolbox {
  display: flex;
  width: 100%;
  height: auto;
  flex-flow: column wrap;
}
#settings-holder {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
}
.input-group:has(#settings-hide) {
  width: 100%;
  padding-left: 0.5em;
  font-weight: bold;
  vertical-align: center;
}
.input-group {
  padding-top: 1em;
  width: 33%;
}
.input-group label {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.input-group input {
  width: 100%;
  text-align: center;
}
.input-group:has(#lightnames),
.input-group:has(#maplight) {
  width: 50%;
}
#lightnames {
  width: 100%;
  padding: 0.5em 0.5em 0.5em 1em;
  resize: none;
}
.input-group select {
  height: 2.5em;
  width: 100%;
  border-radius: 1em;
  padding: 0.5em;
  background-color: #eca;
  border: 0.1em solid #743;
  text-align: center;
}
.input-group select option {
  background-color: #eca;
}
.input-group select:focus {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group:has(#lightrate) > span {
  position: relative;
}
.input-group:has(#lightrate) > span > span {
  display: block;
  position: absolute;
  font-size: 14px;
  top: 0.15em;
  left: 1em;
  color: #000;
}
#lightrate {
  padding-left: 1.5em;
}
.input-group span > input[type="checkbox"] {
  height: 0;
  width: 0;
  opacity: 0;
}
.input-group label:has(input[type="checkbox"]) {
  display: block;
  border-radius: 1em;
  height: 2em;
  width: 2em;
  background-color: #fff;
  margin: 0 auto;
  background-color: #eca;
  border: 0.1em solid #743;
}
.input-group label:has(input[type="checkbox"]:checked):before {
  content: "\2718";
  font-size: 1.5em;
  color: #330c00;
}
.input-group:has(#name) {
  width: 100%;
}
.input-group button {
  display: block;
  width: 5em;
  margin-left: 4em;
}
.box button {
  vertical-align: middle;
}
.box button img {
  height: 1.2em;
}
#settings-holder.hideme div,
.box.hideme div,
.box.hideme button:not(.boxhide) {
  display: none;
}
#settings-holder div:has(button.boxhide),
.box div:has(button.boxhide),
#cellbox div:has(#cellx) {
  display: block;
}
button.boxhide {
  float: right;
  width: 2em;
}
button.boxhide::before {
  content: "-";
}
.hideme button.boxhide::before {
  content: "+";
}
#tilebox img,
#iconbox img {
  width: 100%;
  border: 2px solid #000;
}
#tilebox .active img,
#iconbox .active img {
  border-color: #ff0;
}
.box {
  display: flex;
  width: 90%;
  margin-left: 5%;
  margin-top: 1em;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 2px;
  flex-flow: row wrap;
  align-items: center;
  background-color: #330c00;
}
.box > div > input[type='number'],
.box > div > input[type='text'] {
  width: 100%;
}
.box > div > label:has(input[type='checkbox']) {
  display: inline-block;
  vertical-align: text-bottom;
}
.box > div > label:has(input[type='checkbox'])::after {
  content: "";
  display: block;
  border-radius: 1em;
  font-size: 1.5em;
  height: 1em;
  width: 1em;
  background-color: #eca;
  border: 0.1em solid #743;
  padding: 0;
}
.box > div > label:has(input[type='checkbox']:checked)::after {
  content: "\2718";
  color: #330c00;
}
div.box25 {
  flex-basis: 25%;
}
div.box33 {
  flex-basis: 33%;
}
div.box50 {
  flex-basis: 50%;
}
div.box75 {
  flex-basis: 75%;
}
div.box100 {
  flex-basis: 100%;
}
#cellbox input[type=text],
#cellbox input[type=color] {
  width: 100%;
}
#showLight,
#showPath,
#showSight,
#showSpell {
  display: block;
  width: 2em;
  height: 2em;
  background-position: center;
  background-size: 75%;
  background-repeat: no-repeat;
}
body.showLight #showLight,
body.showPath #showPath,
body.showSight #showSight,
body.showSpell #showSpell {
  background-color: #ff0;
}
#showLight {
  background-image: url(/images/static/bulb-off.webp);
}
#showPath {
  background-image: url(/images/static/route.webp);
}
#showSight {
  background-image: url(/images/static/los.webp);
}
#showSpell {
  background-image: url(/images/static/magic.webp);
}
.testtool label {
  display: inline-block;
}
#mapholder {
  display: flex;
  vertical-align: top;
  max-width: calc(100% - 21em);
  width: calc(100% - 21em);
  height: 100%;
  overflow: auto;
  float: right;
}
#map {
  --s: 100px;
  /* size */
  --r: 0.8660254;
  /* ratio */
  --mv: calc(var(--s) / 100);
  /* vertical margin */
  --mh: calc(var(--mv) * 2 + var(--s) / 4);
  /* horizontal margin */
  --cellw: 3;
  --cellh: 3;
}
.container {
  font-size: 0;
  display: block;
  padding-bottom: calc(var(--s) * var(--r) / 2);
  background-color: #000;
  width: calc((var(--s) * 3 / 4 + 2 * var(--mv)) * (1 + var(--cellw)));
}
.container:not(:has(div)) {
  display: none;
}
.cell {
  position: relative;
  width: var(--s);
  margin: var(--mv) var(--mh) calc(var(--mv) - var(--s) * var(--r) / 2) var(--mh);
  height: calc(var(--s)*var(--r));
  display: inline-block;
  font-size: initial;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #888;
  --rot: 0deg;
  --irot: 0deg;
  --back: none;
  --iback: none;
  --mirror: 1;
  --imirror: 1;
  --lit: transparent;
  --color0: #ffffff;
  --color1: #dd0000;
  --color2: #0000dd;
  --token: none;
}
.cell::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: var(--s) calc(var(--s) * var(--r));
  background-image: var(--back);
  transform: rotate(var(--rot)) scaleX(var(--mirror));
}
.cell.x1 {
  margin-left: calc(var(--s) + 4 * var(--mv));
}
.cell:has(span.sight.hide) {
  filter: brightness(25%);
}
.cell:has(span.sight.partial) {
  filter: grayscale(1);
  filter: brightness(75%);
}
.cell div.tile {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.cell div.tile::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: var(--s) calc(var(--s) * var(--r));
  background-image: var(--iback);
  transform: rotate(var(--irot)) scaleX(var(--imirror));
}
.cell div.text {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  top: 0;
  left: 0;
  text-align: center;
  -webkit-text-stroke: 1px black;
  color: #fff;
  font-size: calc((60px + var(--s)) / 10);
}
.cell div.text span.lights,
.cell div.text span.sight {
  display: none;
  position: absolute;
  top: calc(50% - ((60px + var(--s)) / 20));
  border-radius: 1em;
  padding: 0 0.25em;
}
.cell div.text span.lights {
  left: 0.5em;
  background-color: var(--lit);
}
.cell div.text span.sight {
  right: 0.5em;
  text-align: right;
}
body.showLight .cell div.text span.lights,
body.showSight .cell div.text span.sight {
  display: block;
}
.cell div.text span.distance {
  position: absolute;
  left: calc(50% - ((60px + var(--s)) / 20));
  top: 0;
}
.cell.ispath div.text {
  background-color: #00ff0044;
}
.cell.selected > span {
  display: block;
  position: absolute;
  z-index: 1;
  background-image: linear-gradient(#f5bc0088, #d4b36188);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.cell div.token {
  position: absolute;
  left: calc(var(--s) * 2 / 30);
  top: 0;
  box-shadow: 0 0 0 calc(var(--s) * var(--r) / 10) var(--color2);
  outline: dashed calc(var(--s) * var(--r) / 10) var(--color1);
  background-color: var(--color0);
  border-radius: calc(var(--s) * var(--r));
  width: calc(var(--s) * var(--r) * 0.8);
  height: calc(var(--s) * var(--r) * 0.8);
  margin: calc(var(--s) * var(--r) / 10);
  background-image: var(--token);
}