/* ============================================================================
   SNAKE ARENA - page styling
   The game itself is drawn by Phaser on a <canvas>. This file only handles the
   page around it: the dark background, the touch button and the error message.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070f;
  background-image:
    radial-gradient(circle at 18% 12%, #14224a 0%, transparent 55%),
    radial-gradient(circle at 82% 88%, #2a1140 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #0b1330 0%, #05070f 70%);
  font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

#game-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game canvas {
  display: block;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(80, 150, 255, 0.18);
  image-rendering: auto;
  touch-action: none;
}

/* ---------------- BOOST button (touch screens only) ---------------- */
#touch-controls {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 10;
}

body.touch #touch-controls { display: block; }

.tbtn {
  pointer-events: auto;
  border: none;
  font-family: inherit;
  font-weight: bold;
  color: #06121f;
  background: rgba(124, 252, 90, 0.55);
  border: 3px solid rgba(210, 255, 190, 0.85);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  transition: transform 0.06s ease, background 0.06s ease;
  touch-action: none;
}

.tbtn:active,
.tbtn.pressed {
  transform: translateY(4px);
  background: rgba(124, 252, 90, 0.9);
}

.tbtn-boost {
  position: absolute;
  right: 22px;
  bottom: 26px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ---------------- rotate hint for narrow portrait screens ---------------- */
#rotate-hint {
  display: none;
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  color: #9fd8ff;
  font-size: 14px;
  background: rgba(10, 18, 38, 0.85);
  padding: 8px 14px;
  border-radius: 10px;
  z-index: 40;
}

@media (orientation: portrait) and (max-width: 820px) {
  #rotate-hint { display: block; }
}

/* ---------------- error message ---------------- */
#load-error {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffd6d6;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  padding: 24px;
  z-index: 50;
  background: rgba(5, 7, 15, 0.92);
}

#load-error.show { display: flex; }