:root {
  /* Mobile-First Board Dimensions */
  --cell-size: clamp(32px, 8vw, 56px);
  --gap: clamp(2px, 0.5vw, 4px);
  --board-cols: 10;
  --board-rows: 10;
  
  /* Color System */
  --primary: #00e2ff;
  --secondary: #e5edff;
  --enemy: #ff3e6b;
  --enemy-glow: 0 0 14px #ff3e6b, 0 0 24px #ff114488;
  --player: #3cefff;
  --player-glow: 0 0 14px #3cefff, 0 0 24px #00b7ff88;
  --cell-bg: #182037;
  --cell-border: #243065;
  --board-bg: #11121f;
  --action-btn: #192245;
  --action-btn-glow: 0 0 12px #00e2ff80;
  --action-btn-hover: #00e2ff;
  --disabled-btn: #22243a;
  --powerup-bg: #0079ff;
  --powerup-glow: 0 0 26px #00f7ff, 0 0 40px #30e0ff;
  --splash-bg: #0a0e20;
  --splash-glow: 0 0 80px #00e2ff88;
  --victory: #19ffb9;
  --defeat: #ff4f65;
  --victory-glow: 0 0 40px #19ffb980;
  --portal: #00a2ff;
  --portal-glow: 0 0 20px #00e2ff, 0 0 40px #0091ff88;
  --rock: #727291;
  --rock-glow: 0 0 12px #a1a1e9, 0 0 3px #fff3;
  --plus-countdown: #00f7ff;
  --plus-countdown-shadow: 0 0 6px #00cfff, 0 0 8px #fff;
  --minus-countdown: #ffce00;
  --minus-countdown-shadow: 0 0 5px #000, 0 0 7px #ffce00;
  
  /* Enhanced background gradients */
  --bg-gradient-1: #0c1432;
  --bg-gradient-2: #1d295c;
  --cell-bg-gradient-1: #1c264a;
  --cell-bg-gradient-2: #141d38;
  --board-border: #215294;
  --board-shadow: #00e2ff44;
  --header-glow: #00e2ff77;
  --panel-bg: rgba(14, 21, 48, 0.9);
  --score-text: #f1f7ff;
  
  /* Mobile-Specific Variables */
  --mobile-action-panel-height: min(40vh, 300px);
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-touch-target: max(44px, 10vw);
  --mobile-font-scale: clamp(0.8, 2vw, 1.2);
}

/* Responsive breakpoints */
@media (max-width: 480px) {
  :root {
    --cell-size: clamp(28px, 7vw, 40px);
    --gap: clamp(1px, 0.3vw, 3px);
    --mobile-font-scale: clamp(0.7, 1.8vw, 1.0);
  }
}

@media (max-width: 360px) {
  :root {
    --cell-size: clamp(24px, 6vw, 36px);
    --gap: clamp(1px, 0.2vw, 2px);
    --mobile-font-scale: clamp(0.6, 1.6vw, 0.9);
  }
}