/* Variante A — oscuro premium. El mapa es la fuente de luz de la pantalla. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  --f-ui: 'Inter', system-ui, sans-serif;
  --f-tit: 'Space Grotesk', 'Inter', sans-serif;
  --f-num: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #070809;
  --bg-panel: #0c0e13;
  --bg-mapa: #070809;
  --linea: #1b1f27;
  --linea-suave: #14171d;
  --hover: #161a22;
  --scroll: #262b35;

  --txt: #a2abba;
  --txt-fuerte: #f2f5f9;
  --txt-suave: #97a1b0;
  --txt-tenue: #5d6675;

  --acento: #4cc2ff;
  --sobre-acento: #04121c;
  --oro: #ffc95c;
  --celeste: #74acdf;
  --celeste-hover: #4d7fae;
  --sol-rayo: #ffc95c;
  --sol-cara: #ffd98a;
  --sol-rasgo: #6b4a12;
  --vivo: #43e08a;
  --vivo-glow: rgba(67, 224, 138, .28);
  --sel: #ffffff;

  --terr-libre: #22354a;
  --terr-borde: #0e161f;
  --borde-prov: rgba(255,255,255,.30);
  --terr-activo: #2a4059;
  --terr-activo-borde: #4a6684;
  --terr-contexto: #131c26;
  --terr-apagado: #14181f;
  --chip-vacio: #1b202a;
  --barra-bg: #191d25;
  --met-bg: #12151c;
  --met-destacada: #0e1a24;
  --tip-bg: #0e1117;
  --velo: rgba(3, 4, 6, .72);
  --inset-bg: rgba(10, 12, 16, .82);

  --cta-bg: linear-gradient(135deg, #ffc95c, #ff8a3d);
  --cta-txt: #1c1000;
  --cta-borde: transparent;
  --cta-sombra: 0 3px 18px rgba(255, 160, 60, .28);
  --cta-sombra-hover: 0 5px 26px rgba(255, 160, 60, .42);
  --robar-bg: linear-gradient(135deg, #ff5f57, #ff2e63);
  --robar-txt: #fff;
  --claim-bg: #101820;
  --claim-borde: #22303c;
  --claim-hover: #13202a;
}

/* Grilla tenue detrás del mapa: da profundidad sin robar atención. */
.mapa-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(76, 194, 255, .07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 46px 100%;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 40%, transparent 100%);
}
.mapa svg { filter: drop-shadow(0 0 34px rgba(116, 172, 223, .12)); }
.terr { stroke: #05060a; }
.terr.libre { fill: var(--terr-libre); }
.terr:hover { filter: brightness(1.32) saturate(1.2) drop-shadow(0 0 6px currentColor); }
/* Un territorio libre se enciende celeste al pasarle por encima: dice "esto
   todavía es de nadie" sin escribirlo. */
.terr.libre:hover, .terr.activo.libre:hover { fill: var(--celeste-hover); }
.terr.sel { stroke: #fff; }

.top { background: linear-gradient(#0e1116, #0b0d12); }
.logo { color: #fff; }
.tld { color: var(--oro); }
.stat b { color: #e7ecf3; }
.mapa-tools button { background: rgba(14, 17, 23, .9); }
.leyenda { text-shadow: 0 1px 3px #000; }
.modal-box { background: linear-gradient(#11141b, #0c0e13); }
.met.destacada { box-shadow: inset 0 0 0 1px rgba(76, 194, 255, .18); }