#snakeCanvas { image-rendering: pixelated; }
.snake-dpad {
  display: none;
  position: relative;
  width: 140px;
  height: 140px;
  margin: 16px auto 0;
  order: -1;
}
@media(max-width:768px){ .snake-dpad { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 4px; } }
.dpad-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s;
  touch-action: manipulation;
}
.dpad-btn:active { background: var(--accent); color: #fff; }
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }
.game-overlay { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.82);backdrop-filter:blur(4px);gap:16px;z-index:10; }
.overlay-title { font-family:var(--font-display);font-size:36px;font-weight:800;color:#fff; }
.overlay-sub   { font-size:16px;color:var(--text-secondary); }
.overlay-score { font-family:var(--font-mono);font-size:28px;font-weight:700;color:#00e676; }
.overlay-btn   { margin-top:8px;padding:12px 32px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;font-family:var(--font-display); }
.overlay-btn:hover { background:#7c73ff; }