/*
JavaScript Snake - structural rules shared by every theme.

This file is always loaded (it is not swapped when the theme changes) and it
loads BEFORE the theme stylesheet, so a theme can override anything in here.
Theme files should only need to define colors, fonts, borders, and images.
*/

body {
  margin: 0px;
  padding: 0px;
}

/* on touch devices, stop long-presses from selecting text or
   popping up the link-preview callout during play */
@media (pointer: coarse) {
  body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}

#game-area {
  margin: 10px;
  padding: 0px;
}

#game-area:focus {
  outline: none;
}

#mode-wrapper {
  font-size: 14px;
}

.snake-game-container {
  margin: 0px;
  padding: 0px;
  border-width: 0px;
  border-style: none;
  zoom: 1;
  position: relative;
}

.snake-playing-field {
  margin: 0px;
  padding: 0px;
  position: absolute;
}

.snake-snakebody-block {
  margin: 0px;
  padding: 0px;
  position: absolute;
  background-repeat: no-repeat;
}

.snake-food-block {
  margin: 0px;
  padding: 0px;
  position: absolute;
}

.snake-panel-component {
  position: absolute;
  text-align: center;
  padding: 8px;
  margin: 0px;
}

.snake-pause-screen {
  position: absolute;
  width: 300px;
  height: 80px;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -150px;
  display: none;
}

.snake-welcome-dialog {
  padding: 8px;
  margin: 0px;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  margin-top: -100px;
  margin-left: -158px;
  text-align: center;
  display: block;
}

.snake-try-again-dialog,
.snake-win-dialog {
  padding: 8px;
  margin: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 100px;
  margin-top: -75px;
  margin-left: -158px;
  text-align: center;
  display: none;
}

*{box-sizing:border-box}body{background:#101b19;color:#edf6e9;font-family:system-ui,sans-serif;margin:0;padding:24px 10px}main{max-width:620px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:32px;letter-spacing:-1px;margin:4px 0}p{color:#a8beb2;line-height:1.5;margin:8px 0}small{color:#99b1a4}.eyebrow{color:#b8ea83;letter-spacing:3px;font-size:11px}button,select{font:inherit;color:#e5f5e4;background:#263e33;border:1px solid #4a6a57;border-radius:9px;padding:10px 14px}button{cursor:pointer}button:hover{background:#36563f}button:focus-visible,select:focus-visible{outline:3px solid #dfec9d;outline-offset:2px}#game-area{margin:12px auto;background:#192c25;border-radius:16px}.snake-playing-field{background-color:#0d1915;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:20px 20px;border-radius:3px}.snake-snakebody-block{background:#b8ea83;border:1px solid #719d52;border-radius:5px}.snake-snakebody-dead{background:#ef9b7f}.snake-food-block{background:#ffad74;border:4px solid #0d1915;border-radius:50%;box-shadow:0 0 12px #ffad7444}.snake-panel-component{font-size:13px;color:#b8cabc}.snake-welcome-dialog,.snake-try-again-dialog,.snake-win-dialog,.snake-pause-screen{background:#263e33;border:1px solid #668366;border-radius:16px;color:#edf6e9;box-shadow:0 12px 48px #0008;padding:18px;height:auto}.snake-welcome-dialog,.snake-try-again-dialog,.snake-win-dialog{width:280px;margin-left:-140px;font-size:15px}.snake-pause-screen{width:280px;margin-left:-140px}.controls{display:flex;justify-content:space-between;align-items:center;gap:16px}.pad{display:grid;grid-template-columns:repeat(3,48px);gap:5px}.pad button{padding:8px;touch-action:none}footer{margin-top:18px;font-size:12px;color:#839e8d}a{color:#b8ea83}#status{min-height:24px;color:#c9e6b6}@media(max-width:420px){body{padding-top:12px}h1{font-size:27px}header{align-items:flex-start}.controls{gap:8px}p{font-size:13px}}