/* ===========================================================
   Snake — game-specific styles only.
   Chrome, body, buttons, chips, #status, .hint come from shared.css.
   =========================================================== */

body { gap: 16px; }

/* Score / best chips row */
.chips {
  display: flex;
  gap: 14px;
}

/* ---------- Board ----------
   The canvas is square and fluid: it scales with the viewport but never
   exceeds ~420px. The wrapper is position:relative so the overlay can
   blanket the playfield. */
#boardWrap {
  position: relative;
  width: clamp(280px, 92vw, 420px);
  aspect-ratio: 1 / 1;
}
#board {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--shadow);
  border: 1px solid var(--border);
  touch-action: none;          /* let us handle swipes without scrolling */
}

/* ---------- Game-over overlay ---------- */
#overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  transition: opacity 0.2s ease;
}
#overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.overlay-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.overlay-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 1px;
}
.overlay-score {
  font-size: 1.2rem;
  font-weight: 600;
}

/* ---------- On-screen D-pad ----------
   A 3x3 CSS grid; only the four edge midpoints hold buttons. */
#dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
}
.dbtn {
  padding: 0;
  font-size: 1.2rem;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.dbtn:hover { opacity: 1; background: var(--surface-3); }
.dbtn:active { background: var(--accent); color: var(--accent-text); }
.dbtn.up    { grid-area: 1 / 2; }
.dbtn.left  { grid-area: 2 / 1; }
.dbtn.down  { grid-area: 3 / 2; }
.dbtn.right { grid-area: 2 / 3; }

/* Slightly tighter pad on very small screens */
@media (max-width: 360px) {
  #dpad {
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
  }
}