:root {
  --num-crate-variants: 12;
  --num-floor-variants: 8;
}

.boards {
  display: grid;
  grid-template-columns: repeat(var(--sokoban-boards), 1fr);
  width: 100%;
}

.board {
  aspect-ratio: var(--sokoban-cols) / var(--sokoban-rows);
  display: grid;
  grid-template-columns: repeat(var(--sokoban-cols), 1fr);
  grid-template-rows: repeat(var(--sokoban-rows), 1fr);
}

.boards .board {
  flex: 1;
  flex-grow: 1;
  max-width: 100%;
  max-height: 100%;
}

#player .board {
  height: min(80vw * var(--sokoban-rows) / var(--sokoban-cols), 80vh);
  width: min(80vw, 80vh * var(--sokoban-cols) / var(--sokoban-rows));
  margin-bottom: auto;
}

.board div {
  aspect-ratio: 1 / 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board .wall {
  --variant: 0;

  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url("assets/Walls.png");
  background-position: calc(var(--variant) * 100% / 15);  
}

.board .wall.Up.Down {
  --variant: 1;
}
.board .wall.Left.Right {
  --variant: 2;
}
.board .wall.Up.Down.Left.Right {
  --variant: 3;
}
.board .wall.Up.Down.Right {
  --variant: 4;
}
.board .wall.Down.Left.Right {
  --variant: 5;
}
.board .wall.Up.Down.Left {
  --variant: 6;
}
.board .wall.Up.Left.Right {
  --variant: 7;
}
.board .wall.Up.Right {
  --variant: 8;
}
.board .wall.Up.Left {
  --variant: 9;
}
.board .wall.Down.Left {
  --variant: 10;
}
.board .wall.Down.Right {
  --variant: 11;
}
.board .wall.Right {
  --variant: 12;
}
.board .wall.Down {
  --variant: 13;
}
.board .wall.Left {
  --variant: 14;
}
.board .wall.Up {
  --variant: 15;
}

.board .floor {
  background-size: cover;
  background-image: url("assets/Floor.png");
}

.board .floor.target {
  background-size: cover;
  background-image: url("assets/Targets.png");
}

.board .floor {
  background-position: calc(100% * (var(--num-floor-variants) / 2 + mod(var(--n), var(--num-floor-variants) / 2)) / (var(--num-floor-variants) - 1));
}

.board.solved .floor {
  background-position: calc(100% * mod(var(--n), var(--num-floor-variants) / 2) / (var(--num-floor-variants) - 1));
}

.board .floor.target {
  background-position: 100%;
}

.board.solved .floor.target {
  background-position: 0%;
}

.crate {
  display: none;
}

.player {
  display: none;
}

.floor .crate {
  position: relative;
  bottom: 10%;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url("assets/Crates.png");
}

.floor .crate {
  background-position: calc(mod(var(--random-seed), var(--num-crate-variants)) * 100% / (var(--num-crate-variants) - 1)) 0px;
}

.floor.target .crate {
  background-image: url("assets/CratesSolved.png");
}

.board .floor .player {
  position: relative;
  bottom: 30%;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url("assets/Player.png");
}

.board.alt .floor .player {
  background-image: url("assets/PlayerAlt.png");
}

.floor .player.Down {
  background-position: 0;
}
.floor .player.Right {
  background-position: calc(1 * 100% / 3);
}
.floor .player.Up {
  background-position: calc(2 * 100% / 3);
}
.floor .player.Left {
  background-position: calc(3 * 100% / 3);
}

.controls {
  padding-top: 10px;
  padding-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);  
}

.controls > div {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
  background-size: cover;
  background-image: url("assets/Floor.png");
  background-position: calc(100% * 0 / (var(--num-floor-variants) - 1));
  padding: 10px;

  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#up {
  grid-column: 2;
}

#left {
  grid-column: 1;
  grid-row: 2;
}

#right {
  grid-column: 3;
  grid-row: 2;
}

#undo {
  grid-column: 5;
  grid-row: 2;
}

#down {
  grid-column: 2;
  grid-row: 3;
}