* { box-sizing: border-box; }
:root {
  --cols: 20;
  --rows: 20;
  --cellSize: 20px;
  --background-page-color: #222;
  --background-grid-color: var(--background-page-color);
  --background-fill-color: #282828;
  --failColor: #c29595;
  --textColor: #fff;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  min-width: 100svw;
  margin: 0;
  padding: 0;
  background-color: var(--background-page-color);
  color: var(--textColor);
  font-family: monospace;

  &:not(.desktop) {
    align-items: center;

    &.orientation-album {
      flex-direction: row;
    }
  }
  &.desktop #controls { display: none; }
}

#game {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 20px 20px 20px;

  &.game_over {
    .snake.head {
      background-image: var(--head-gameover);
    }
    &.paused::after {
      content: 'Game Over\A\A\ARetry?';
      text-align: center;
      white-space: pre;
    }
  }
  &.paused {
    &::after {
      content: 'Paused';
      position: absolute;
      text-transform: uppercase;
      letter-spacing: .2em;
    }

    #grid {
      filter: opacity(.5) blur(1px);
    }
  }
}

#grid {
  position: relative;
  width: calc(var(--cols) * var(--cellSize));
  height: calc(var(--rows) * var(--cellSize));
  display: grid;
  grid-template-rows: repeat(var(--rows), var(--cellSize));
  grid-template-columns: repeat(var(--cols), var(--cellSize));
/*  gap: 1px;*/
  justify-items: center;
  align-items: center;

  background-color: var(--background-fill-color);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--background-grid-color) -.5px,
      var(--background-grid-color) .5px,
      transparent .5px,
      transparent calc(var(--cellSize) - .5px)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--background-grid-color) -.5px,
      var(--background-grid-color) .5px,
      transparent .5px,
      transparent calc(var(--cellSize) - .5px)
    )
  ;
  border-radius: 4px;
}

#info {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 4px;
  opacity: 0.35;
}

#controls {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

#arrows {
  width: 120px;
  aspect-ratio: 1;
  margin-top: 60px;
  background-image: url(arrows.svg);
  background-size: contain;
  opacity: .35;
}

.snake {
  display: flex;
  width: 20px;
  height: 20px;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
  --turnDeg: 0deg;
  --even: 1;
  background-image: var(--body);
  
  &.fed {
    background-image: var(--body-food);
  }

  &.head {
    z-index: 3;
    background-image: var(--head);

    &.expecto-alimentum { background-image: var(--head-food); }
  }

  &.turn-left {
    --turnDeg: -90deg;
    background-image: var(--turn-left);
  }
  &.turn-right {
    --turnDeg: 90deg;
    background-image: var(--turn-right);
  }

  &.tail {
    z-index: 1;
    background-image: var(--tail);
  }

  /*&.fed::after {
    content: '';
    position: absolute;
    width: 5px;
    aspect-ratio: 1;
    background: #765;
    border-radius: 1px;
    transform: rotate(45deg);
  }*/

  &.up { transform: scaleX(var(--even)) rotate(calc(0deg + var(--turnDeg))); }
  &.right { transform: scaleX(var(--even)) rotate(calc(90deg + var(--turnDeg))); }
  &.down { transform: scaleX(var(--even)) rotate(calc(180deg + var(--turnDeg))); }
  &.left { transform: scaleX(var(--even)) rotate(calc(270deg + var(--turnDeg))); }
}

.food {
  --death-clock: 3;
  width: calc( var(--death-clock) * 3px + 3px );
  aspect-ratio: 1;
  background-color: #765;
  transform: rotate(45deg);
  border-radius: 3px;
  transition: all .05s cubic-bezier(.12, -0.04, .2, 1.18);
}





:root {
  --head-gameover:  url(head-gameover.svg);
  --body:           url(body.svg);
  --body-food:      url(body-food.svg);
  --head:           url(head.svg);
  --head-food:      url(head-food.svg);
  --turn-left:      url(turn-left.svg);
  --turn-right:     url(turn-right.svg);
  --tail:           url(tail.svg);
}