:root {
  --snake-player1-color: hsl(29, 100%, 50%);
  --snake-player2-color: hsl(202, 100%, 50%);
}

.game-grid {
  /* margin-top: 20px; */

  width: fit-content;
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(40, 1.75rem);
  gap: 0.125rem;
  justify-content: center;

  background: #333;
  padding: 0.5rem;
  border-radius: 0.5rem;

  background-image: url(../img/AIBG\ 9.0\ Zagreb\ bear\ gray.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.cell {
  width: 1.75rem;
  height: 1.75rem;
  background: rgba(42, 42, 42, 0.8);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.item {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.item.border {
  /* background: rgba(102, 102, 102, 0.8); */

  background-image: url(../img/sprites/items/border.png);
}

.item.apple {
  /* background: #ff4444; */

  background-image: url(../img/sprites/items/apple.png);
}

.item.golden-apple {
  /* background: #ffd700; */

  background-image: url(../img/sprites/items/goldenApple.png);
}

.item.tron {
  /* background: #00ffff; */

  background-image: url(../img/sprites/items/tron.png);
}

.item.reset-borders {
  /* background: #ccc; */

  background-image: url(../img/sprites/items/resetBorders.png);
}

/* class starts with the word shorten */
.item[class*="shorten"] {
  /* background: #55b479; */

  background-image: url(../img/sprites/items/shorten.png);
}

.item.katana {
  /* background: #4400ff; */

  background-image: url(../img/sprites/items/katana.png);
}

.item.armour {
  /* background: #c0c0c0; */

  background-image: url(../img/sprites/items/armour.png);
}

.item.leap {
  /* background: #b32400; */

  background-image: url(../img/sprites/items/leap.png);
}

.item.freeze {
  /* background: #b6edff; */

  background-image: url(../img/sprites/items/freeze.png);
}

.item.nausea {
  /* background: #798e00; */

  background-image: url(../img/sprites/items/nausea.png);
}

.unknown {
  background: #ff0000;
}

.affect-self {
  border: 1px dashed #4caf50; /* green border */
}

.affect-enemy {
  border: 1px dashed #ff0000; /* red border */
}

.affect-both {
  border: 1px dashed #4169e1; /* royal blue border */
}

.snake {
}

.snake-head {
  /* background-color: #4caf50; */

  border-width: 1px;
  border-style: dashed;
  border-color: #4caf50;
}

.snake-head > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.snake-body {
  background: #45a049;
  transform: scale(0.8);
}

.snake-head.player1 {
  /* background-color: var(--snake-player1-color); */
  border-color: var(--snake-player1-color);
}

.snake-body.player1 {
  background-color: color-mix(in srgb, var(--snake-player1-color) 80%, black);
}

.snake-head.player2 {
  /* background-color: var(--snake-player2-color); */
  border-color: var(--snake-player2-color);
}

.snake-body.player2 {
  background-color: color-mix(in srgb, var(--snake-player2-color) 80%, black);
}