/* Maze puzzle-specific styles — builds on unified-2d-game.css + newspaper-theme.css */
body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#maze-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md);
  touch-action: none;
}

/* Scoped to the game canvas on purpose: a bare `canvas` type selector also
   hits every other canvas on the page — including the shared celebration
   overlay (#confetti-canvas, z-index 10040, above the completion modal at
   10020). Its opaque background there blanked the whole screen behind a
   wall of balloons for the entire 6.8s run, and the 2D run never removes
   the canvas, so the page stayed covered for good. */
#maze-container canvas {
  border: 1px solid var(--news-rule);
  background-color: var(--news-paper);
}

.touch-controls {
  display: none;
  margin-top: var(--spacing-md);
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.touch-middle-row {
  display: flex;
  gap: var(--spacing-xs);
}

.touch-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--news-rule);
  background: var(--news-paper);
  color: var(--news-ink);
  font-size: var(--font-size-lg);
  cursor: pointer;
  font-family: var(--news-font-body);
  transition: background 0.15s, color 0.15s;
}

.touch-btn:hover {
  background: var(--news-ink);
  color: var(--news-paper);
}

.shake {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

@media (max-width: 768px) {
  .touch-controls,
  .classic-keyboard-hints {
    display: none !important;
  }

  .classic-grid-section {
    width: 100%;
    align-items: center;
  }

  .classic-grid-section > div:first-child {
    display: block !important;
    width: 100%;
  }

  #maze-container {
    width: 100%;
    padding: var(--spacing-xs);
  }

  #maze-container canvas {
    max-width: 100%;
    height: auto;
  }
}