body {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

#board {
  background: #101027;
  aspect-ratio: 1/1;
}
@media (orientation: portrait) {
  #board {
    width: 100%;
  }
}
@media (orientation: landscape) {
  #board {
    height: 100%;
  }
}

.controls {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.controls .hidden {
  display: none;
}

.wall-line {
  stroke: rgba(90, 90, 90, 0.062745098);
  stroke-linecap: butt;
}

.wall-touch {
  pointer-events: all;
  fill: none;
}

.wall-line, .wall-touch {
  cursor: pointer;
  touch-action: manipulation;
}

.wall-group.active .wall-line {
  stroke: #5a5a5a;
}

.wall-group.dangling .wall-line {
  stroke: #5b2828;
}

.wall-group:not(.active):hover .wall-line {
  stroke: #aaa;
}

.wall-group.active:hover .wall-line {
  stroke: white;
}

.galaxy-center {
  fill: #aaaaaa;
}

.galaxy-center text {
  font-size: 0.325em;
  fill: black;
  font-family: monospace;
  font-weight: 700;
}

.galaxy-center.incorrect-size text {
  fill: red;
}

.galaxy-center.asymmetric {
  fill: #5b2828;
}

.galaxy-center.cut {
  fill: #5b2828;
}

.cell {
  fill: none;
}

.cell.centerless {
  fill: #5b2828;
}