/* =====================================================
   TinyToolWeb - snake-game.css
   ===================================================== */

.tool-snake-game .tool-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
}

.tool-snake-game canvas {
  background: var(--bg-body);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  max-width: 100%;
}

.tool-snake-game .game-stats {
  display: flex;
  gap: var(--spacing-xl);
  font-weight: 700;
}

.tool-snake-game #messageArea {
  min-height: 28px;
  font-weight: 700;
}

.tool-snake-game .message {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
}

.tool-snake-game .message.error {
  background: rgba(var(--error-rgb), 0.1);
  color: var(--error);
  border: 1px solid var(--error);
}

.tool-snake-game .message.success {
  background: rgba(var(--success-rgb), 0.1);
  color: var(--success);
  border: 1px solid var(--success);
}

/* Board: no page scroll / zoom while swiping */
.tool-snake-game canvas {
  touch-action: none;
  height: auto;
}

/* On-screen direction pad */
.tool-snake-game .dpad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
}

.tool-snake-game .dpad-btn {
  font-size: 1.4rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-dark);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.tool-snake-game .dpad-btn:active {
  background: var(--primary);
  color: #fff;
}

.tool-snake-game .dpad-up { grid-column: 2; grid-row: 1; }
.tool-snake-game .dpad-left { grid-column: 1; grid-row: 2; }
.tool-snake-game .dpad-right { grid-column: 3; grid-row: 2; }
.tool-snake-game .dpad-down { grid-column: 2; grid-row: 3; }