/* ============================================================
   AIR CAMPAIGN COMMAND — CAPA DE TEMA (estética AAA · fase #1)
   Sistema de diseño: tokens + tipografía + paneles coherentes.
   Se carga DESPUÉS del <style> inline de cada HTML, así que sus
   tokens y pulidos globales MANDAN. Un solo sitio que tocar para
   el aspecto global. No cambia estructura ni lógica: solo estética.
   ============================================================ */

:root{
  /* --- superficies en capas de elevación (más frías y profundas) --- */
  --bg-0:#05090d; --bg:#080f15;
  --panel:#0e1821; --panel2:#152230; --panel3:#1d2d3c;
  --border:#243746; --border-soft:#1a2a37;
  /* --- tinta --- */
  --text:#e7f1f8; --dim:#8ba1b2; --faint:#54697a;
  /* --- fósforo (acentos vivos, poquísimos y bien puestos) --- */
  --blue:#3aa0ff; --green:#54d67e; --amber:#ffb64a; --red:#ff5a4d; --cyan:#37e0d6;
  /* --- elevación / glow / foco --- */
  --shadow-1:0 1px 2px rgba(0,0,0,.55);
  --shadow-2:0 8px 22px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --glow-cyan:0 0 10px rgba(55,224,214,.35);
  --glow-amber:0 0 10px rgba(255,182,74,.35);
  --focus:0 0 0 2px rgba(55,224,214,.6);
  /* --- escala de espaciado y radios --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --r-sm:3px; --r-md:6px; --r-lg:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* --- base: nitidez de texto + fondo con leve viñeta de consola --- */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body{ background:radial-gradient(130% 130% at 50% -15%, #0c1621 0%, var(--bg) 55%, var(--bg-0) 100%); }
h1,h2,h3,h4,.hd,.bhd,.nhd{ text-shadow:0 1px 0 rgba(0,0,0,.35); }

/* --- selección y foco accesible (marca de calidad) --- */
::selection{ background:rgba(55,224,214,.28); color:#fff; }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }

/* --- scrollbars finas de consola --- */
*{ scrollbar-width:thin; scrollbar-color:#2a3f4f transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2a3f4f; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#37536a; }
*::-webkit-scrollbar-track{ background:transparent; }

/* --- transiciones globales en lo interactivo (micro-vida) --- */
.navbtn,.poirow,.mbtn,.hudres,.buybtn,.brow button,.stepper button,#mapctl button,
.opsec,.ophd,.stat,.launch,.mp-box button,#resetbtn{
  transition:background-color .14s var(--ease), border-color .14s var(--ease),
             color .14s var(--ease), box-shadow .14s var(--ease), transform .12s var(--ease);
}

/* ============ PANELES CON PROFUNDIDAD ============ */
header{ box-shadow:var(--shadow-1); position:relative; z-index:6;
  background:linear-gradient(180deg, #12202c 0%, var(--panel) 100%); }
header h1{ letter-spacing:.10em; }
nav,#rightbar{ box-shadow:var(--shadow-1); }
#ovstrip{ box-shadow:0 -8px 20px rgba(0,0,0,.38); }
#hintbar{ background:linear-gradient(180deg, rgba(255,182,74,.05), transparent); }

/* --- nav: sección activa marcada + hover con vida --- */
.navbtn{ position:relative; }
.navbtn:hover{ transform:translateX(1px); }
.navbtn.active{ background:linear-gradient(90deg, rgba(55,224,214,.15), rgba(55,224,214,0) 72%);
  box-shadow:inset 0 0 0 1px rgba(55,224,214,.10); }
.navbtn .badge{ background:rgba(255,182,74,.14); border:1px solid rgba(255,182,74,.4);
  border-radius:999px; padding:0 7px; line-height:16px; }
.nhd,.bhd{ color:var(--faint); }

/* --- HUD de recursos: chip con cuerpo y realce al pasar --- */
.hudres{ box-shadow:var(--shadow-1); background:linear-gradient(180deg, var(--panel2), var(--panel)); }
.hudres:hover{ border-color:#37536a; }
.hudres b{ text-shadow:0 0 6px rgba(255,255,255,.15); }

/* --- barra derecha: filas más de "tarjeta" --- */
.poirow:hover{ transform:translateX(1px); }
.poirow.active{ background:linear-gradient(90deg, rgba(55,224,214,.12), transparent 72%); }
.poirow .pbar2{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }

/* --- botones de acción con relieve y estado activo con glow --- */
.mbtn:hover{ box-shadow:var(--glow-cyan); transform:translateY(-1px); }
.mbtn.on{ box-shadow:var(--glow-cyan); }
#mapctl button{ box-shadow:var(--shadow-1); backdrop-filter:blur(3px);
  background:rgba(14,24,33,.82); }
#mapctl button:hover{ box-shadow:var(--glow-cyan); transform:translateY(-1px); }
.buybtn:hover:not(:disabled),.brow button:hover:not(:disabled){ box-shadow:var(--glow-cyan); }
.launch:hover:not(:disabled){ box-shadow:0 0 14px rgba(84,214,126,.4); }

/* --- estadísticas/medidores de la ficha --- */
.stat{ background:linear-gradient(180deg, var(--panel3), var(--panel2)); box-shadow:var(--shadow-1); }
.stat .v{ text-shadow:0 0 8px rgba(255,255,255,.12); }
.prev{ box-shadow:var(--shadow-1); }

/* --- ficha de hexágono: elevación y cabecera con brillo superior --- */
#hexcard{ box-shadow:0 -10px 24px rgba(0,0,0,.42); }
#hexcard .chead{ background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
.opsec{ box-shadow:var(--shadow-1); }
.opsec.open{ box-shadow:var(--glow-cyan); }

/* --- "card" genérica (hangar/tecnologías/terrestre): acento superior + elevación --- */
.card{ box-shadow:var(--shadow-1); position:relative;
  background:linear-gradient(180deg, var(--panel2), var(--panel)); }
.card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:34px;
  background:linear-gradient(90deg, var(--cyan), transparent); border-radius:2px 0 0 0; opacity:.8; }
.card h4{ letter-spacing:.04em; }

/* --- toasts: mensaje de radio (glass + glow lateral) --- */
.toast{ box-shadow:var(--shadow-2); backdrop-filter:blur(5px);
  background:rgba(13,22,30,.92); }

/* --- instrumentos: minimapa y línea de tiempo --- */
#minimap,#timeline{ box-shadow:var(--shadow-2); backdrop-filter:blur(4px); border-color:#2a3f4f; }
.mm-vp{ filter:drop-shadow(0 0 4px rgba(55,224,214,.5)); }

/* --- banner de fin de partida: más peso --- */
#banner.win,#banner.lose{ box-shadow:var(--shadow-2), 0 0 40px rgba(0,0,0,.6); backdrop-filter:blur(3px); }
#banner.win{ box-shadow:var(--shadow-2), 0 0 40px rgba(84,214,126,.25); }
#banner.lose{ box-shadow:var(--shadow-2), 0 0 40px rgba(255,90,77,.25); }

/* --- login/lobby: marca con más presencia --- */
#mp-login{ background:radial-gradient(ellipse at 50% 28%, #10202f 0%, var(--bg) 62%, var(--bg-0) 100%); }
#mp-login h1{ text-shadow:0 0 24px rgba(55,224,214,.25); }
.mp-box{ box-shadow:var(--shadow-2); background:linear-gradient(180deg, var(--panel2), var(--panel)); }
.mp-box button:hover{ box-shadow:0 0 16px rgba(84,214,126,.45); }

/* ============================================================
   #2 — MAPA CON PROFUNDIDAD
   Viñeta + bisel de consola + scanlines sutiles sobre el maparea,
   y realce de selección/frente. Todo por encima del SVG pero por
   DEBAJO de los controles (mapctl z4, minimap z4, toasts z6…).
   ============================================================ */
#maparea{ isolation:isolate; }
/* scanlines de fósforo (muy sutiles) */
#maparea::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  opacity:.35; mix-blend-mode:multiply;
}
/* viñeta + bisel empotrado */
#maparea::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 46%, transparent 52%, rgba(2,6,10,.5) 100%);
  box-shadow:inset 0 0 0 1px rgba(120,160,190,.10),
             inset 0 0 70px 8px rgba(0,0,0,.5);
}
/* selección de hex con glow; frente entre bandos con halo cálido */
.hex.sel{ filter:drop-shadow(0 0 5px rgba(55,224,214,.75)); }
.hexfront{ filter:drop-shadow(0 0 3px rgba(255,182,74,.55)); }
/* POIs: un poco de sombra para separarlos del terreno (sobre todo el desierto claro) */
.poiicon{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.poiname{ paint-order:stroke; }

/* --- construcción por casillas en la ficha: APILADA (nombre → descripción → botón),
       para que no se desencuadre en la columna estrecha --- */
.crow{ border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel2);
  box-shadow:var(--shadow-1); padding:7px 9px; margin:6px 0; }
.crow .ch{ display:flex; align-items:center; gap:7px; font-family:var(--head); font-size:12.5px;
  font-weight:700; letter-spacing:.02em; color:var(--text); }
.crow .ch svg{ width:17px; height:17px; stroke:var(--cyan); fill:none; stroke-width:1.5; flex:none; }
.crow .ch span{ flex:1; }
.crow .ch .tag{ flex:none; font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:.1em; }
.crow .cd{ font-family:var(--mono); font-size:10.5px; color:var(--dim); line-height:1.5; margin:4px 0 7px; }
.crow .cbtn{ width:100%; background:var(--panel); border:1px solid var(--border); color:var(--green);
  border-radius:var(--r-sm); padding:6px 8px; font-family:var(--mono); font-size:11px; cursor:pointer;
  transition:border-color .14s var(--ease), box-shadow .14s var(--ease); }
.crow .cbtn:hover:not(:disabled){ border-color:var(--green); box-shadow:0 0 10px rgba(84,214,126,.3); }
.crow .cbtn:disabled{ opacity:.4; cursor:not-allowed; }

/* --- edificaciones superpuestas sobre la imagen del hexágono en la ficha --- */
.cardimg .hexbld{ position:absolute; bottom:5px; width:26px; height:26px; object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8)); pointer-events:none; }

/* --- tarjeta de unidad BLOQUEADA (terrestre/defensa sin tecnología o edificio):
       apagada como los aviones, con su candado y requisitos abajo --- */
.card.locked{ opacity:.72; filter:saturate(.55); border-color:#3a3320; }
.card.locked::before{ background:linear-gradient(90deg, var(--amber), transparent); }

/* --- respeta a quien pide menos movimiento (accesibilidad) --- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}