:root {
  /* === Backgrounds (depth hierarchy) === */
  --bg-deep: #0a0e1a;          /* canvas, отвъд UI */
  --bg-elevated: #131826;      /* main game area */
  --bg-panel: #1a2030;         /* side panels, cards */
  --bg-overlay: rgba(10, 14, 26, 0.85); /* modal backdrops */

  /* === Borders & dividers === */
  --border-subtle: #2a3244;
  --border-emphasis: #3d4860;
  --border-focus: #5fa9ff;

  /* === Text === */
  --text-primary: #e8ecf4;     /* main text */
  --text-secondary: #8b95a8;   /* labels, captions */
  --text-muted: #5c6478;       /* disabled, hints */
  --text-on-color: #0a0e1a;    /* text върху bright bg */

  /* === Player colors === */
  --player-a: #d63d3d;
  --player-a-glow: #ff5555;
  --player-a-bg: rgba(214, 61, 61, 0.15);
  --player-a-border: rgba(214, 61, 61, 0.5);

  --player-b: #3a8dde;
  --player-b-glow: #5fa9ff;
  --player-b-bg: rgba(58, 141, 222, 0.15);
  --player-b-border: rgba(58, 141, 222, 0.5);

  /* === Terrain (hex fill colors) === */
  /* Optimized for ≥20° hue separation + colorblind safety via pattern markers */
  --terrain-open:     #6ea562;   /* grassland — sage green */
  --terrain-road:     #d4a857;   /* dirt road — sandy yellow */
  --terrain-forest:   #1f5d33;   /* dense forest — dark deep green (clear value drop vs Open) */
  --terrain-hills:    #b86534;   /* rolling hills — burnt orange */
  --terrain-mountain: #6068a0;   /* mountains — blue-gray/purple */
  --terrain-river:    #1a72d0;   /* deep water — clear blue */
  --terrain-ford:     #5fc3d8;   /* shallow crossing — light cyan */
  --terrain-bridge:   #8a8580;   /* stone bridge — neutral stone gray */

  /* Pattern marker colors (overlay glyphs on terrain hexes) */
  --terrain-pattern-light: rgba(255, 255, 255, 0.55);  /* over dark/saturated terrain */
  --terrain-pattern-dark:  rgba(10, 14, 26, 0.45);     /* over light terrain (road, ford) */

  /* Hex stroke (grid lines) */
  --hex-stroke: #2a3244;
  --hex-terrain-rim-width: 3px;
  --hex-terrain-rim-opacity: 0.95;
  --hex-stroke-hover: #5fa9ff;
  --hex-stroke-selected: #22c55e;
  --hex-stroke-attack-target: #f87171;
  --hex-stroke-move-target: #4ade80;
  --valid-move-overlay: rgba(74, 222, 128, 0.25);
  --valid-move-border: #4ade80;
  --attack-target-overlay: rgba(248, 113, 113, 0.30);
  --attack-target-border: #f87171;
  --general-move-overlay: rgba(245, 158, 11, 0.35);
  --general-move-border: #f59e0b;
  --hex-stroke-general-move: #f59e0b;

  /* === Terrain markers === */
  --forest-los-dot: rgba(74, 222, 128, 0.28);

  /* === Fog of war overlays === */
  --intel-unknown: rgba(10, 14, 26, 0.68);
  --intel-presence-fill: #1a2030;
  --intel-presence-overlay: rgba(10, 14, 26, 0.38);
  --intel-type-overlay: rgba(10, 14, 26, 0.16);
  --intel-full-overlay: transparent;

  /* === Capital & strategic point markers === */
  --capital-marker: #fbbf24;
  --strategic-point: #a855f7;

  /* === Status colors === */
  --success: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --info: #5fa9ff;

  /* === QR invite (light-on-dark theme: QR needs a light quiet zone to scan) === */
  --qr-bg: #ffffff;
  --qr-fg: #0a0e1a;

  /* === Combat indicators === */
  --damage-dealt: #f87171;
  --damage-taken: #fbbf24;
  --charge-indicator: #4ade80;
  --fortified-indicator: #5fa9ff;
  --battle-flash-attacker: rgba(255, 255, 255, 0.80);
  --battle-flash-defender: rgba(248, 113, 113, 0.75);
  --charge-badge-bg: #fbbf24;
  --charge-badge-border: #0a0e1a;
  --charge-badge-text: #0a0e1a;

  /* === Spacing scale (8px base) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* === Typography === */
  --font-family-base: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Consolas', monospace;
  --font-family-display: 'Inter', system-ui, sans-serif;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-display: 36px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* === Borders & radii === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* === Shadows (subtle, dark-mode appropriate) === */
 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
  --shadow-glow-a: 0 0 12px rgba(214, 61, 61, 0.4);
  --shadow-glow-b: 0 0 12px rgba(58, 141, 222, 0.4);

  /* === Transitions === */
  --transition-fast: 100ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;

  /* === Hex geometry (flat-top) === */
  /* Ще се override-ват от viewport zoom level */
  --hex-size: 48px;            /* radius from center to corner */
  --hex-stroke-width: 1.5px;
  --hex-stroke-width-emphasis: 3px;

  /* === Z-index hierarchy === */
  --z-map: 1;
  --z-hex-overlay: 5;
  --z-units: 10;
  --z-selection: 15;
  --z-hud-panel: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* === Base reset === */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* играта не scroll-ва — всичко е fixed viewport */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* === Tablet breakpoint === */
@media (max-width: 1024px) {
  :root {
    --hex-size: 40px;
    --font-size-display: 30px;
    --font-size-2xl: 24px;
  }
}

/* === Mobile breakpoint === */
@media (max-width: 768px) {
  :root {
    --hex-size: 32px;
    --font-size-display: 26px;
    --font-size-2xl: 22px;
    --font-size-xl: 18px;
    --font-size-lg: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
  }
}

/* === Small phone === */
@media (max-width: 380px) {
  :root {
    --hex-size: 28px;
    --font-size-display: 22px;
    --space-4: 12px;
    --space-5: 16px;
  }
}

/* Disable :hover effects on touch devices to prevent sticky-hover */
@media (hover: none) {
  *:hover { transition: none !important; }
}

/* iOS: prevent text selection / callout on game surfaces */
.hex-grid,
.map-container,
.unit-glyph,
.general-glyph {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}