:root {
  --field-size: 50px;
}

#exercise {
  touch-action: manipulation;
  max-width: 800px;
}

#exercise #rules{
  display: block;
}

#name {
  margin: 10px 0;
}

#plan {
  display: inline-block;
  padding: 30px;
  background-color: white;
  border-radius: 6px;
  margin-bottom: 15px;
}

#plan svg {
  max-width: 100%;
  height: 100%;
  overflow: visible;
}

.tlacitko.disabled {
  pointer-events: none;
}

/************** GAME PLAN **************/
#plan .wall {
  fill: transparent;

  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#plan .wall.thick {
  stroke: var(--black);
}

#plan .wall.hole {
  stroke: var(--green);
  stroke-dasharray:
    calc(var(--field-size) / 5)
    calc(3 * var(--field-size) / 5)
    calc(var(--field-size) / 5);
}

#plan .wall.thin {
  stroke: var(--violet);
  stroke-dasharray: calc(var(--field-size) / 5);
}

#plan .wall, #plan image {
  transform-box: fill-box;
  transform-origin: center;
}

/************** GAME STATUS **************/
#plan.finished {
  box-shadow: 0 0 0 2px var(--green);
}

#plan.finished svg {
  animation: var(--animation-blink);
}

#plan.wrecked {
  box-shadow: 0 0 0 2px var(--red);
}

#plan.wrecked svg {
  animation: var(--animation-shake);
}

/************** ADMIN CONSOLE **************/
#plan-width, #plan-height {
  font-size: 20px;
  width: 60px;
}

#game-editor {
  position: relative;
  display: inline-block;
  background-color: white;
  padding: 10px;
  border: 3px;

  user-select: none;
}

#game-editor table {
  border-collapse: collapse; /* override texting.css */
  margin: 0; /* override texting.css */
}

#game-editor td {
  padding: 0; /* override texting.css */
  line-height: 0; /* override texting.css */
  border: none; /* override texting.css */
}

#game-editor td.corner {
  width: 10px;
  height: 10px;
  background-color: var(--gray);
}

#game-editor td.field {
  width: 50px;
  height: 50px;
}

#game-editor tr:nth-child(2n+1) {
  --wall-direction: to left;
}
#game-editor tr:nth-child(2n) {
  --wall-direction: to bottom;
}
#game-editor td.wall.thick {
  background-color: var(--black);
}
#game-editor td.wall.thin {
  background-color: var(--violetHover);
  mask: repeating-linear-gradient(var(--wall-direction), black, black 10px, transparent 10px, transparent 20px);
}
#game-editor td.wall.hole {
  background-color: var(--greenHover);
  mask: linear-gradient(var(--wall-direction), black 0%, black 25%, transparent 25%, transparent 75%, black 75%, black 100%);
}

#game-editor tr:first-child td.wall,
#game-editor tr:last-child td.wall,
#game-editor td.wall:first-child,
#game-editor td.wall:last-child {
  background-color: var(--black);
  mask: none;
}

#game-editor .popup {
  position: absolute;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(3, 50px);
  background-color: white;
  border: 2px solid var(--grayHover);
  padding: 5px;
  border-radius: 3px;
}
#game-editor .popup.hidden {
  display: none;
}

/************** CONTROLS **************/
#arrow-table {
  margin: 15px 0;

  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(2, 60px);
  gap: 5px;
  justify-content: center;
}

#arrow-table .arrow {
  grid-row: 2;
}

#arrow-table [data-direction=up] {
  grid-area: 1/2;
}

#arrow-table .arrow {
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  font-size: 30px;
  color: white;
  background-color: var(--blue);
  border-radius: 6px;
}

@media screen and (hover: hover) {
  #arrowTable .arrow:hover {
    background-color: var(--blueHover);
  }
}