/*
Snake Demo - Game canvas, HUD, overlay, and message styles
Written in 2026 by Philipp Hagenlocher <me@philipphagenlocher.de>
This software was written with the assistance of AI.

To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.

You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
*/
.snake-container {
  text-align: center;
  width: 100%;
  max-width: 510px;
}
.snake-game-container {
  max-width: 100%;
}
.snake-hud {
  display: flex;
  justify-content: space-between;
  padding: 10px 6px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
}
@media (max-width: 510px) {
  .snake-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .snake-game-wrapper {
    order: 0;
  }
  .snake-hud {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    font-size: 14px;
    letter-spacing: 0.5px;
    width: 100%;
  }
  .snake-message {
    display: none;
  }
}
.snake-canvas {
  display: block;
  background: #0d1a0d;
  outline: none;
}
.snake-game-wrapper {
  position: relative;
  display: inline-block;
  border: 5px solid #4a7a4a;
}
.snake-focus-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #4a7a4a;
  font-size: 22px;
  letter-spacing: 1px;
}
.snake-focus-overlay.snake-hidden {
  display: none;
}
.snake-message {
  margin-top: 16px;
  font-size: 20px;
  height: 28px;
}
.snake-colorblind .snake-canvas {
  background: #000000;
}
.snake-colorblind .snake-game-wrapper {
  border-color: #009e73;
}
.snake-colorblind .snake-focus-overlay {
  color: #009e73;
}