/* ════════════════════════════════════════════════════════════
   VOLT://GRID — styles.css
   Diseño visual cyberpunk + adaptación responsive
   ════════════════════════════════════════════════════════════ */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:        #05010d;
  --cyan:      #00f0ff;
  --magenta:   #ff2bd6;
  --yellow:    #ffe600;
  --violet:    #7b2fff;
  --ok:        #39ff88;
  --danger:    #ff3355;

  --panel:     rgba(8, 4, 24, .78);
  --line:      rgba(0, 240, 255, .35);
  --text:      #d5f6ff;

  --font-d:    'Orbitron', sans-serif;
  --font-m:    'Share Tech Mono', monospace;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html, body{ height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-m), monospace;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

button{ font-family:inherit; color:inherit; border:none; background:none; cursor:pointer; }

/* Mapa: ocupa toda la ventana */
#map{
  position:fixed; inset:0;
  height:100vh; height:100dvh;
  z-index:0; background:var(--bg);
}
.leaflet-container{ background:var(--bg); font-family:var(--font-m); }

/* Tinte cyberpunk aplicado SOLO a las teselas de imagen del satélite */
.leaflet-tile-pane img{ filter:saturate(1.12) contrast(1.08) brightness(.92) hue-rotate(-10deg); }

/* Cursor crosshair en modo simulación */
body.sim #map{ cursor:crosshair; }
body.sim .leaflet-grab{ cursor:crosshair; }

/* ---------- 2b. CONTROLES DE LEAFLET (zoom + atribución) ---------- */
.leaflet-bar{ border:none; box-shadow:0 0 20px rgba(0,240,255,.15); }
.leaflet-bar a, .leaflet-bar a:hover{
  background:var(--panel); color:var(--cyan);
  border:1px solid var(--line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  width:34px; height:34px; line-height:32px;
}
.leaflet-bar a:first-child{ border-radius:0; border-bottom:none; }
.leaflet-bar a:last-child{ border-radius:0; }
.leaflet-bar a.leaflet-disabled{ background:rgba(8,4,24,.5); color:rgba(213,246,255,.25); }
.leaflet-control-attribution{
  background:rgba(5,1,13,.62); color:rgba(213,246,255,.35);
  font-size:8px; letter-spacing:.5px; padding:1px 6px;
}
.leaflet-control-attribution a{ color:rgba(0,240,255,.5); }
/* Los marcadores divIcon no deben llevar el estilo blanco por defecto */
.leaflet-div-icon{ background:none; border:none; }

/* ---------- 3. CAPAS DE EFECTO sobre el mapa ---------- */
.fx-grid, .fx-scanlines, .fx-vignette, .fx-flash{
  position:fixed; inset:0; pointer-events:none;
}
.fx-grid{
  z-index:1;
  background-image:
    linear-gradient(rgba(0,240,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 85%);
          mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 85%);
}
.fx-scanlines{
  z-index:2;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  animation:crt 7s linear infinite;
}
.fx-vignette{
  z-index:3;
  background:radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(2,0,10,.62) 100%);
}
.fx-flash{
  z-index:4; opacity:0;
  box-shadow:inset 0 0 0 3px rgba(0,240,255,.9), inset 0 0 60px rgba(0,240,255,.35);
}
.fx-flash.on{ animation:flash .55s ease-out; }

@keyframes crt{ 0%,94%{opacity:.85} 95%{opacity:.55} 96%,100%{opacity:.85} }
@keyframes flash{ 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }

/* ---------- 4. PANELES HUD genéricos ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:0 0 22px rgba(0,240,255,.10), inset 0 0 18px rgba(0,240,255,.05);
}

/* ---------- 5. HUD SUPERIOR ---------- */
.hud-top{
  position:fixed; z-index:10;
  top:calc(10px + env(safe-area-inset-top));
  left:12px; right:12px;
  display:flex; align-items:stretch; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
}
.brand-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan), 0 0 24px var(--cyan);
  animation:blink 2.4s ease-in-out infinite;
}
.brand-txt h1{
  font-family:var(--font-d); font-weight:900; font-size:15px; letter-spacing:2px;
  color:#fff; text-shadow:0 0 12px rgba(0,240,255,.8);
}
.brand-txt h1 span{ color:var(--magenta); text-shadow:0 0 12px rgba(255,43,214,.9); }
.brand-txt p{ font-size:8px; letter-spacing:3px; color:rgba(213,246,255,.55); }

.energy{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px;
}
.energy-ic{ width:22px; height:22px; color:var(--yellow); filter:drop-shadow(0 0 6px rgba(255,230,0,.9)); }
.energy-txt{ display:flex; flex-direction:column; line-height:1.15; }
.energy-txt strong{
  font-family:var(--font-d); font-weight:900; font-size:20px;
  color:var(--cyan); text-shadow:0 0 12px rgba(0,240,255,.85);
  font-variant-numeric:tabular-nums;
}
.energy-txt span{ font-size:9px; letter-spacing:1.5px; color:rgba(213,246,255,.6); }
.energy-txt em{ font-style:normal; color:var(--danger); }

/* Estado de energía crítica */
body.low .energy{ border-color:rgba(255,51,85,.7); }
body.low .energy-txt strong{ color:var(--danger); text-shadow:0 0 12px rgba(255,51,85,.9); animation:blink 1s steps(2) infinite; }

.icon-btn{
  width:44px; display:grid; place-items:center;
  color:var(--cyan); transition:.2s;
}
.icon-btn:hover{ background:rgba(0,240,255,.12); box-shadow:0 0 18px rgba(0,240,255,.35); }
.icon-btn svg{ width:19px; height:19px; }

/* ---------- 6. PANEL DE DATOS ---------- */
.hud-left{
  position:fixed; z-index:10;
  left:12px; top:96px;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; min-width:158px;
}
.hud-left .row{
  display:flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:1px; color:rgba(213,246,255,.65);
  padding:3px 0;
}
.hud-left .row svg{ width:13px; height:13px; color:var(--cyan); flex:none; }
.hud-left .row b{
  margin-left:auto; font-family:var(--font-d); font-weight:700; font-size:11px;
  color:var(--yellow); text-shadow:0 0 8px rgba(255,230,0,.6);
  font-variant-numeric:tabular-nums;
}
.hud-left .row.near b{ color:var(--magenta); text-shadow:0 0 8px rgba(255,43,214,.7); }

/* ---------- 7. CHIP GPS ---------- */
.gps-chip{
  position:fixed; z-index:10;
  top:calc(70px + env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  padding:6px 14px;
  font-size:10px; letter-spacing:2px;
  white-space:nowrap;
}
.gps-chip .pulse-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 10px var(--yellow);
  animation:blink .9s ease-in-out infinite;
}
.gps-chip.ok{ border-color:rgba(57,255,136,.6); color:var(--ok); }
.gps-chip.ok .pulse-dot{ background:var(--ok); box-shadow:0 0 10px var(--ok); animation:blink 2.2s ease-in-out infinite; }
.gps-chip.warn{ border-color:rgba(255,230,0,.55); color:var(--yellow); }
.gps-chip.off{ border-color:rgba(255,51,85,.65); color:var(--danger); }

/* ---------- 8. CONTROLES INFERIORES ---------- */
.hud-bottom{
  position:fixed; z-index:10;
  bottom:calc(16px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
}
.ctl-btn{
  width:54px; height:54px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--cyan); font-size:8px; letter-spacing:2px;
  transition:.2s;
}
.ctl-btn svg{ width:18px; height:18px; }
.ctl-btn:hover{ background:rgba(0,240,255,.12); }
.ctl-btn.active{
  color:var(--magenta); border-color:rgba(255,43,214,.6);
  box-shadow:0 0 18px rgba(255,43,214,.35);
}

/* Botón principal: GENERAR NÚCLEOS */
.spawn-btn{
  position:relative;
  width:96px; height:96px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--cyan);
  font-family:var(--font-d); font-weight:700; font-size:9px; letter-spacing:1.5px; text-align:center;
  transition:transform .15s;
}
.spawn-btn:active{ transform:scale(.93); }
.spawn-btn svg{ width:22px; height:22px; filter:drop-shadow(0 0 8px rgba(0,240,255,1)); }
.spawn-label{ line-height:1.4; text-shadow:0 0 10px rgba(0,240,255,.9); }

/* Anillo cónico giratorio */
.spawn-ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, var(--cyan), var(--magenta), var(--yellow), var(--violet), var(--cyan));
  animation:spin 5s linear infinite;
}
.spawn-ring::after{
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, rgba(123,47,255,.45), rgba(5,1,13,.94) 68%);
  box-shadow:inset 0 0 24px rgba(0,240,255,.25);
}
.spawn-btn > *:not(.spawn-ring){ position:relative; z-index:1; }
.spawn-btn:hover .spawn-ring{ animation-duration:1.6s; }

/* Ocupado escaneando el sector */
.spawn-btn.busy .spawn-ring{ animation-duration:.7s; }

/* Enfriamiento (cooldown) */
.spawn-btn.cooling{ filter:grayscale(.7) brightness(.6); pointer-events:none; }
.spawn-cd{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  font-family:var(--font-d); font-weight:900; font-size:30px;
  color:var(--yellow); text-shadow:0 0 16px rgba(255,230,0,.9);
}
.spawn-cd:empty{ display:none; }

/* ---------- 9. TOASTS ---------- */
.toasts{
  position:fixed; z-index:40;
  bottom:calc(132px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:min(92vw, 430px);
  pointer-events:none;
}
.toast{
  width:100%; padding:9px 14px;
  background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--cyan);
  font-size:11px; letter-spacing:1.5px; text-align:center;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  opacity:0; transform:translateY(12px);
  transition:opacity .3s, transform .3s;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.ok   { border-left-color:var(--ok);      color:var(--ok); }
.toast.warn { border-left-color:var(--yellow);  color:var(--yellow); }
.toast.error{ border-left-color:var(--danger);  color:var(--danger); }

/* ---------- 10. MARCADORES SOBRE EL MAPA ---------- */
/* — Núcleo de energía — */
.ep{ display:flex; flex-direction:column; align-items:center; width:70px; animation:ep-drop .45s cubic-bezier(.2,1.4,.4,1) backwards; }
.ep-ring{
  width:46px; height:46px; border-radius:50%;
  border:1px dashed rgba(0,240,255,.85);
  display:grid; place-items:center;
  animation:spin 7s linear infinite;
  box-shadow:0 0 20px rgba(255,43,214,.30);
}
.ep-core{
  width:17px; height:17px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(135deg, var(--magenta), var(--yellow));
  box-shadow:0 0 12px 3px rgba(255,43,214,.95), 0 0 30px 7px rgba(255,230,0,.30);
  animation:core-pulse 1.6s ease-in-out infinite;
}
.ep-val{
  margin-top:4px; padding:0 6px;
  font-size:10px; font-weight:700;
  color:var(--yellow); text-shadow:0 0 8px rgba(255,230,0,.95);
  background:rgba(5,1,13,.75);
  border:1px solid rgba(255,230,0,.45); border-radius:2px;
  font-variant-numeric:tabular-nums;
}

/* — Jugador — */
.pl{ position:relative; width:56px; height:56px; display:grid; place-items:center; }
.pl-dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px 3px rgba(0,240,255,.95), 0 0 32px 9px rgba(0,240,255,.45);
  animation:core-pulse 1.4s ease-in-out infinite;
}
.pl-ping{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(0,240,255,.8);
  animation:ping 1.9s cubic-bezier(.2,.6,.4,1) infinite;
}
.pl-ring{
  position:absolute; inset:9px; border-radius:50%;
  border:1px solid rgba(0,240,255,.35);
  animation:spin 5s linear infinite reverse;
}
.pl-floaters{ position:absolute; left:50%; top:-8px; }
.floater{
  position:absolute; transform:translateX(-50%);
  font-family:var(--font-d); font-weight:900; font-size:16px;
  color:var(--yellow); text-shadow:0 0 12px rgba(255,230,0,1), 0 0 30px rgba(255,43,214,.6);
  animation:float-up 1.15s ease-out forwards;
  white-space:nowrap;
}

/* ---------- 11. MODAL (AYUDA) ---------- */
.gate{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center; padding:18px;
  background:rgba(3,0,12,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .4s, visibility .4s;
}
.gate-card{
  width:min(94vw, 460px);
  padding:26px 26px 20px;
  display:flex; flex-direction:column; gap:13px;
}
.gate-head{ display:flex; align-items:center; gap:10px; }
.gate-head svg{ width:20px; height:20px; color:var(--magenta); filter:drop-shadow(0 0 8px rgba(255,43,214,.9)); }
.gate-head h2{
  font-family:var(--font-d); font-weight:900; font-size:16px; letter-spacing:3px;
  color:#fff; text-shadow:0 0 14px rgba(0,240,255,.8);
}
.gate-steps{
  margin-left:20px;
  font-size:11px; line-height:1.9;
  color:rgba(213,246,255,.65); letter-spacing:.5px;
}
.gate-steps b{ color:var(--cyan); }
.connect-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px;
  font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:3px;
  color:#05010d;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 0 26px rgba(0,240,255,.45);
  transition:filter .2s, transform .15s;
}
.connect-btn:hover{ filter:brightness(1.25); }
.connect-btn:active{ transform:scale(.97); }
.connect-btn svg{ width:15px; height:15px; }
.reset-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px;
  font-size:10px; letter-spacing:2px;
  color:var(--danger);
  border:1px solid rgba(255,51,85,.45);
  background:rgba(255,51,85,.06);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:.2s;
}
.reset-btn:hover{ background:rgba(255,51,85,.16); box-shadow:0 0 18px rgba(255,51,85,.25); }
.reset-btn svg{ width:13px; height:13px; }
.gate-note{ font-size:9px; letter-spacing:1px; color:rgba(213,246,255,.4); text-align:center; }

/* ---------- 12. CARGA ---------- */
.bootloader{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:rgba(3,0,12,.92);
  transition:opacity .45s, visibility .45s;
}
.boot-inner{ width:min(80vw,320px); text-align:center; }
.boot-title{
  font-family:var(--font-d); font-size:12px; letter-spacing:4px;
  color:var(--cyan); text-shadow:0 0 12px rgba(0,240,255,.8);
  margin-bottom:14px; animation:blink 1.2s ease-in-out infinite;
}
.boot-bar{
  height:4px; border:1px solid var(--line); padding:1px;
}
.boot-bar span{
  display:block; height:100%; width:40%;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  animation:load 1.1s ease-in-out infinite alternate;
  box-shadow:0 0 12px rgba(0,240,255,.8);
}

/* ---------- 13. UTILIDADES ---------- */
.hidden{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }

/* ---------- 14. ANIMACIONES ---------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes core-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }
@keyframes ping{
  0%{ transform:scale(.45); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}
@keyframes ep-drop{
  0%{ transform:translateY(-34px) scale(.2); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes float-up{
  0%{ transform:translate(-50%, 0); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translate(-50%, -56px); opacity:0; }
}
@keyframes load{ 0%{transform:translateX(0)} 100%{transform:translateX(150%)} }

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width:720px){
  .hud-top{ gap:7px; left:8px; right:8px; }
  .brand{ padding:7px 10px; }
  .brand-txt p{ display:none; }
  .brand-txt h1{ font-size:12px; }
  .energy{ padding:7px 12px; }
  .energy-txt strong{ font-size:16px; }
  .energy-txt span{ font-size:7.5px; }
  .hud-left{ top:88px; left:8px; min-width:132px; padding:8px 10px; }
  .hud-left .row{ font-size:9px; }
  .gps-chip{ top:calc(64px + env(safe-area-inset-top)); font-size:9px; }
  .hud-bottom{ gap:9px; }
  .ctl-btn{ width:46px; height:46px; font-size:7px; }
  .spawn-btn{ width:82px; height:82px; font-size:8px; }
  .toasts{ bottom:calc(118px + env(safe-area-inset-bottom)); }
}
@media (max-height:560px){
  .hud-left{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .fx-scanlines, .spawn-ring, .ep-ring, .pl-ring, .boot-bar span{ animation:none; }
}