:root {
  --path-color: #222;
  --cell-color: white;
  --can-move-color: lightgreen;
  --selected-color: lightblue;
  --moved-color: #eee;
  --dot-color: Canvas;
  font-size: 18px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --path-color: #bbb;
    --cell-color: black;
    --can-move-color: darkgreen;
    --selected-color: darkblue;
    --moved-color: #222;
  }
}

* {
    box-sizing: border-box;
}

body {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100svw;
    height: 100svh;
    margin: 0;
    font-family: sans-serif;
    background: Canvas;
}

main > details, footer {
  padding: 0 1em;
}

#controls  {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

input[type="number"] {
    width: 4em;
    text-align: end;
}

button, input {
  margin: 0 0.5em;
}

header {
  text-align: center;

  & h1 {
    margin: 0;
    margin-bottom: 1rem;
  }
}

main {
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-items: center;
    overflow: hidden;
}

.invisible {
  visibility: hidden;
}


svg {
    width: 100%;
    height: 100%;

    & text {
      fill: CanvasText;
    }
}

#path path {
  stroke: var(--path-color);
}

.cell {
  cursor: pointer;

  --color: var(--cell-color);
  &.selected { --color: var(--selected-color); }
  &.can-move { --color: var(--can-move-color); }
  &.moved { --color: var(--moved-color); }

  & rect { fill: var(--color); }
}

.dot {
  fill: var(--dot-color);
}

#focus {
  stroke: orange;
}