/*
Snake Demo - Page shell, mode selector, and feature toggle 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/>.
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: monospace;
  color: #4a7a4a;
  overflow-x: hidden;
}
.snake-canvas {
  font-family: monospace;
}
.snake-toggles {
  margin-bottom: 12px;
  font-size: 17px;
  letter-spacing: 1px;
  width: 510px;
  padding-top: 10px;
}
.snake-toggle-group {
  margin-bottom: 16px;
}
.snake-toggle-heading {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #4a7a4a;
}
.snake-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 30px;
}
.snake-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.snake-toggle-grid input[type='checkbox'] {
  accent-color: #4a7a4a;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.snake-features-details summary {
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
}
hr + .snake-features-details {
  margin-top: 0;
}
.snake-root > hr {
  border: none;
  border-top: 1px solid #4a7a4a;
  margin: 12px 0;
  width: 510px;
}
.snake-mode-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 17px;
  letter-spacing: 1px;
  padding: 10px 0;
}
.snake-mode-selector label {
  color: #4a7a4a;
}
.snake-mode-select {
  background: #1a1a1a;
  color: #4a7a4a;
  border: 1px solid #4a7a4a;
  padding: 6px 10px;
  font-family: monospace;
  font-size: 17px;
  letter-spacing: 1px;
  cursor: pointer;
}
body.snake-colorblind {
  background: #000000;
  color: #009e73;
}
.snake-colorblind .snake-toggle-heading {
  color: #009e73;
}
.snake-colorblind .snake-toggle-grid input[type='checkbox'] {
  accent-color: #009e73;
}
.snake-colorblind .snake-root > hr {
  border-color: #009e73;
}
.snake-colorblind .snake-mode-selector label {
  color: #009e73;
}
.snake-colorblind .snake-mode-select {
  background: #000000;
  color: #009e73;
  border-color: #009e73;
}
@media (max-width: 510px) {
  .snake-root {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .snake-toggles {
    width: 100%;
    font-size: 14px;
    padding-top: 6px;
  }
  .snake-toggle-heading {
    font-size: 15px;
  }
  .snake-toggle-grid {
    grid-template-columns: 1fr;
    gap: 6px 0;
  }
  .snake-toggle-grid label {
    font-size: 13px;
  }
  .snake-toggle-grid input[type='checkbox'] {
    width: 16px;
    height: 16px;
  }
  .snake-features-details summary {
    font-size: 16px;
  }
  .snake-mode-selector {
    font-size: 14px;
    padding: 6px 0;
  }
  .snake-mode-select {
    font-size: 14px;
    padding: 4px 8px;
  }
  .snake-root > hr {
    width: 100%;
    margin: 8px 0;
  }
}