/* variables.css (base + tokens) */
/* Split from legacy style.css */

/* ============================================
   Maze Generator - Dark Teal HUD Theme
   ============================================ */

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

:root {
  /* HUD-Inspired Dark Mode Color Palette */
  --neon-cyan: #00FFFF;
  --neon-cyan-dark: #00CCCC;
  --neon-cyan-light: #33FFFF;
  --neon-pink: #FF00FF;
  --neon-purple: #9d4edd;
  --dark-bg: #000000;
  --dark-panel: #0a0a0a;
  --dark-border: rgba(0, 255, 255, 0.15);
  --dark-border-hover: rgba(0, 255, 255, 0.4);
  --text-primary: rgba(0, 255, 255, 0.95);
  --text-secondary: rgba(0, 255, 255, 0.7);
  --text-muted: rgba(0, 255, 255, 0.5);
  --glow-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
  --glow-cyan-soft: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
  --glow-pink: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--dark-bg);
  color: var(--text-primary);
  /* Allow scrolling on mobile and avoid 100vh issues in mobile browsers */
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100dvh;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.help-open {
  overflow: hidden;
}