:root {
  --maze-cell-edge: 60px;
  --maze-cell-border: 4px solid black;
  --robot-size-rel: 0.6;
  --robot-pose-x: 0;
  --robot-pose-y: 0;
  --robot-pose-r: 0;
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

#display {
  display: block;
  width: 75%;
}

#control {
  display: block;
  flex-grow: 1;
  box-shadow: 0px 0px 16px gray;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
}

#mapbox {
  width: fit-content;
  padding: 16px;
  border-radius: 16px;
  background-color: lightgray;
}
#map {
  display: flex;
  flex-direction: column;
  width: fit-content;
  border: var(--maze-cell-border);
  position: relative;
}
.map-row {
  display: flex;
  flex-direction: row;
  width: fit-content;
}
.map-cell {
  width: var(--maze-cell-edge);
  height: var(--maze-cell-edge);
  background-color: whitesmoke;
}
#robot {
  position: absolute;
  width: calc(var(--robot-size-rel) * var(--maze-cell-edge));
  height: calc(var(--robot-size-rel) * var(--maze-cell-edge));
  top: calc(var(--maze-cell-edge) / 2 + var(--maze-cell-edge) * var(--robot-pose-y));
  left: calc(var(--maze-cell-edge) / 2 + var(--maze-cell-edge) * var(--robot-pose-x));
  rotate: calc(var(--robot-pose-r) * -90deg);
  translate: -50% -50%;
  z-index: 2;
}
#robot-body {
  width: 100%;
  height: 100%;
  background-color: #000000b0;
  clip-path: polygon(10% 0%, 30% 0%, 35% 5%, 65% 5%, 70% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 70% 100%, 65% 95%, 35% 95%, 30% 100%, 10% 100%, 0% 90%, 0% 70%, 5% 65%, 5% 35%, 0% 30%, 0% 10%);
}

.map-cell-innerstart {
  width: 100%;
  height: 100%;
  background-color: #00000020;
  clip-path: polygon(85% 50%, 70% 80%, 60% 80%, 75% 50%, 60% 20%, 70% 20%);
}
.map-cell-innerend {
  width: 100%;
  height: 100%;
  background-color: #00000020;
  clip-path: polygon(15% 85%, 15% 15%, 22% 15%, 22% 20%, 55% 20%, 55% 25%, 85% 25%, 85% 60%, 50% 60%, 50% 52%, 22% 52%, 22% 85%);
}
.map-cell-innerstart.point-0 {
  rotate: 0deg;
}
.map-cell-innerstart.point-1 {
  rotate: 270deg;
}
.map-cell-innerstart.point-2 {
  rotate: 180deg;
}
.map-cell-innerstart.point-3 {
  rotate: 90deg;
}
.map-cell.cell-start {
  background-color: lightblue;
}
.map-cell.cell-end {
  background-color: lightsalmon;
}
.map-cell.cell-wall-right {
  border-right: var(--maze-cell-border);
}
.map-cell.cell-wall-top {
  border-top: var(--maze-cell-border);
}
.map-cell.cell-wall-left {
  border-left: var(--maze-cell-border);
}
.map-cell.cell-wall-bottom {
  border-bottom: var(--maze-cell-border);
}


#control-panel {
  padding: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.control-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.control-button {
  border: 2px solid black;
}
.control-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#control-saves-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.control-saves-listitems {
  padding: 16px;
}
.control-saves-listitems:hover {
  background-color: whitesmoke;
}
.control-saves-listitems.selected {
  background-color: black;
  color: white;
}
.control-saves-listitem-tooltip {
  position: absolute;
  left: 0px;
  top: -1rem;
}
.control-saves-listitem-tooltip.w3-animate-opacity {
  animation-duration: 200ms;
}