/* ═══════════════════════════════════════════════════════════════════════════
   Ecos del Abismo — main.css
   Reset, layout, variables globales y estilos base
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── CSS Variables (paleta activa, se cambia con JS por bioma) ─────────── */
:root {
  --color-bg: #0a0a0a;
  --color-bg-secondary: #0f0f1a;
  --color-bg-tertiary: #1a1a2e;
  --color-text: #e0e0e0;
  --color-text-dim: #888;
  --color-text-bright: #ffffff;
  --color-accent: #c8a040;
  --color-accent-glow: rgba(200, 160, 64, 0.4);
  --color-hp: #ff4444;
  --color-hp-high: #44ff44;
  --color-sanity: #9944ff;
  --color-sanity-high: #4488ff;
  --color-xp: #ffd700;
  --color-danger: #ff2222;
  --color-success: #44cc44;
  --color-border: #2a2a4a;
  --color-border-bright: #4a4a6a;
  --color-overlay: rgba(0, 0, 0, 0.85);
  --color-overlay-light: rgba(0, 0, 0, 0.6);
  --color-panel-bg: rgba(10, 10, 20, 0.95);
  --color-panel-border: #3a3a5a;
  --color-glow-hp: rgba(255, 68, 68, 0.3);
  --color-glow-sanity: rgba(153, 68, 255, 0.3);
  --color-glow-accent: rgba(200, 160, 64, 0.3);

  /* Biome-specific (override via JS) */
  --biome-floor: #1a1a2e;
  --biome-wall: #0f0f1a;
  --biome-corridor: #16213e;
  --biome-decoration: #2a2a4a;
  --biome-ambient: #0a0a1a;
  --biome-fog: #000000;

  --font-narrative: 'Courier New', 'Courier', monospace;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --z-canvas: 0;
  --z-hud: 10;
  --z-minimap: 11;
  --z-ability-panel: 11;
  --z-tooltip: 20;
  --z-modal: 30;
  --z-overlay: 40;
  --z-loading: 50;
}

/* ─── Canvas ────────────────────────────────────────────────────────────── */
#gameCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  cursor: crosshair;
  z-index: var(--z-canvas);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ─── Scrollbar personalizada ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-bright);
}

/* ─── Tipografía ────────────────────────────────────────────────────────── */
.narrative-text {
  font-family: var(--font-narrative);
  line-height: 1.6;
  color: var(--color-text);
}

.ui-text {
  font-family: var(--font-ui);
}

/* ─── Utilidades ────────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

.visible {
  display: block;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Transiciones globales ─────────────────────────────────────────────── */
.modal-overlay,
.death-screen,
.victory-screen,
.transition-overlay,
.loading-screen,
.main-menu {
  transition: opacity 0.3s ease;
}

/* ─── Responsive base ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --tile-size: 32px;
  }
}

@media (max-width: 480px) {
  :root {
    --tile-size: 24px;
  }
}