/* =============================================
   ENTER THE VOID — HUD sci-fi moderno
   Verde fósforo + ámbar industrial · glassmorphism
   ============================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Neón base — heredados (compat) */
  --green: #6affa0;
  --green-dim: #3a8a5a;
  --green-bg: rgba(20, 50, 30, 0.45);
  --green-bg-solid: rgba(8, 22, 12, 0.92);
  --amber: #ffb84a;
  --amber-dim: #b07020;
  --red: #ff5a5a;
  --bg-panel: rgba(8, 6, 18, 0.55);
  --bg-panel-hover: rgba(14, 6, 22, 0.85);
  --border-soft: rgba(255, 138, 58, 0.30);
  --border-active: rgba(0, 240, 255, 0.7);
  --shadow-glow: 0 0 24px rgba(255, 138, 58, 0.25), 0 0 40px rgba(0, 240, 255, 0.18);

  /* Paleta cockpit Alien/Aliens — cyan (pantallas) + ámbar (worklights).
     magenta/pink/violet persisten por nombre pero ahora apuntan a ámbar/teal
     (no romper los selectores que las usan). */
  --neon-magenta: #ff8a3a;
  --neon-pink:    #ffaa55;
  --neon-cyan:    #4adcff;
  --neon-blue:    #4a8cff;
  --neon-yellow:  #ffe600;
  --neon-orange:  #ff9844;
  --neon-lime:    #aaff00;
  --neon-violet:  #5a8aaa;
}

body {
  font-family: 'Share Tech Mono', 'Consolas', monospace;
  background: #000;
  color: var(--green);
  overflow: hidden;
  user-select: none;
}

canvas#game {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
}

/* Scanlines sutiles para look CRT */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 3px
  );
  z-index: 9999;
  mix-blend-mode: multiply;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: 'Share Tech Mono', monospace;
}

/* ============= TOP BAR — ULTRA COMPACTA ============= */
#hud-top {
  position: absolute;
  top: 0; left: 6px; right: 6px;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 4px;
  padding: 4px 6px;
  pointer-events: none;
}

/* ============= BOTTOM BAR — solo radar pequeño en esquina ============= */
#hud-bottom {
  position: absolute;
  bottom: 6px; left: 6px; right: 6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px;
  padding: 4px 6px;
  align-items: end;
  pointer-events: none;
}

/* ============= SIDE PANELS — finos, glassmorphism, fade in/out ============= */
.side-panel {
  position: fixed;
  top: 70px;
  bottom: 200px;
  width: 170px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  padding: 8px 10px;
  overflow-y: auto;
  pointer-events: auto;
  font-size: 9px;
  opacity: 0.45;
  transition: opacity 0.4s ease, background 0.4s, transform 0.3s, border-color 0.3s;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.side-panel:hover {
  opacity: 1;
  background: var(--bg-panel-hover);
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
}
.side-panel::-webkit-scrollbar { width: 4px; }
.side-panel::-webkit-scrollbar-thumb { background: var(--green-dim); }
.side-panel::-webkit-scrollbar-track { background: transparent; }

#crew-panel { left: 6px; }
#inv-panel { right: 6px; }

#crew-list .crew-item {
  margin-top: 5px;
  padding: 4px 6px;
  background: rgba(0, 30, 5, 0.4);
  border-left: 2px solid var(--green);
}
.crew-item .role {
  font-size: 8px;
  color: var(--green-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.crew-item .name {
  color: var(--green);
  font-size: 11px;
  margin: 1px 0;
  text-shadow: 0 0 4px var(--green);
}
.crew-item .species {
  font-size: 9px;
  color: var(--green-dim);
}
.crew-item .skill-bar {
  margin-top: 2px;
  height: 2px;
  background: rgba(0,0,0,0.5);
}
.crew-item .skill-fill {
  height: 100%;
  background: var(--amber);
  box-shadow: 0 0 4px var(--amber);
}

#inv-panel .row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 2px 0;
  color: var(--green);
}
#inv-panel .row.mineral { color: var(--amber-dim); }
#inv-panel .separator {
  height: 1px;
  background: var(--green-dim);
  margin: 6px 0;
  opacity: 0.5;
}

/* ============= PANELS ============= */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  padding: 6px 10px;
  position: relative;
  font-size: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 2px;
  box-shadow: var(--shadow-glow);
  transition: background 0.2s, border-color 0.2s;
}
.panel:hover {
  background: var(--bg-panel-hover);
  border-color: var(--border-active);
}

/* esquinas tipo HUD militar */
.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--green);
  opacity: 0.7;
  transition: opacity 0.2s, width 0.2s;
}
.panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.panel:hover::before, .panel:hover::after { opacity: 1; width: 14px; }

.panel.center { text-align: center; }
.panel.right { text-align: right; }

.label {
  font-size: 9px;
  color: var(--green-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.value {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--amber);
  margin: 0;
  text-shadow: 0 0 8px var(--amber-dim);
  line-height: 1.1;
}

.sub {
  font-size: 10px;
  color: var(--green);
  line-height: 1.4;
}

.sub b { color: var(--amber); font-weight: normal; }

.key-list {
  font-size: 9px;
  line-height: 1.5;
  color: var(--green);
}
.key-list b {
  color: var(--amber);
  display: inline-block;
  min-width: 40px;
  font-weight: normal;
}

#controls-panel {
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}
#controls-panel.hidden {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  pointer-events: none;
}

.bar {
  margin: 4px 0;
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff8a4a, var(--red));
  box-shadow: 0 0 8px var(--red);
  transition: width 0.2s ease;
}
.bar-fill.green {
  background: linear-gradient(90deg, #4adc6a, var(--green));
  box-shadow: 0 0 8px var(--green);
}
/* shimmer animado en las barras */
.bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

#radar {
  display: block;
  background: radial-gradient(circle, rgba(20, 60, 30, 0.5), rgba(0, 10, 4, 0.7));
  border: 1px solid var(--green);
  border-radius: 50%;
  width: 130px !important;
  height: 130px !important;
  box-shadow: 0 0 15px rgba(106, 255, 160, 0.3), inset 0 0 30px rgba(20, 80, 40, 0.4);
}

#crosshair {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(138, 255, 106, 0.25);
  border-radius: 50%;
}
#crosshair::before, #crosshair::after {
  content: '';
  position: absolute;
  background: rgba(138, 255, 106, 0.4);
}
#crosshair::before { top: 50%; left: -8px; right: -8px; height: 1px; }
#crosshair::after { left: 50%; top: -8px; bottom: -8px; width: 1px; }

#prompt {
  position: fixed;
  bottom: 220px; left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: rgba(20, 5, 0, 0.85);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 6px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  display: none;
  text-shadow: 0 0 8px var(--amber);
}

/* === AUTOPILOT HUD — abajo derecha, no tapa el centro === */
#autopilot-hud {
  position: fixed;
  bottom: 210px;
  right: 200px;
  width: 320px;
  background: rgba(0, 25, 8, 0.9);
  border: 1px solid var(--green);
  padding: 10px 14px;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 0 25px rgba(138, 255, 106, 0.3);
}
#autopilot-hud.hidden { display: none; }
.ap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--green-dim);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.ap-icon {
  color: var(--green);
  text-shadow: 0 0 10px var(--green);
  animation: pulse 1s infinite;
  font-size: 14px;
}
.ap-title {
  color: var(--green);
  font-size: 11px;
  letter-spacing: 3px;
  text-shadow: 0 0 6px var(--green-dim);
}
.ap-phase {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 0 10px var(--amber-dim);
}
.ap-data { font-size: 11px; }
.ap-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.ap-row span:first-child { color: var(--green-dim); }
.ap-row span:last-child { color: var(--amber); font-family: 'VT323', monospace; font-size: 14px; }
.ap-bar {
  margin-top: 10px;
  height: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--green-dim);
}
.ap-bar-fill {
  height: 100%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  width: 0%;
  transition: width 0.3s;
}
.ap-hint {
  margin-top: 8px;
  font-size: 10px;
  color: var(--green-dim);
  text-align: center;
  letter-spacing: 1px;
}

/* === PANEL ORBITAL ===
   top: 116 (no 70) para no encimarse con #mute-btn (top:78 right:184) y
   #skip-tutorial (top:78 right:280) que caen exactamente sobre la franja
   donde antes arrancaba este panel. Ahora los botones tienen su franja
   libre 70-116 y el orbital-panel queda apenas más abajo. */
#orbital-panel {
  position: fixed;
  top: 116px;
  right: 195px;
  width: 230px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  padding: 8px 12px;
  z-index: 35;
  pointer-events: none;
  font-size: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-glow);
  transition: opacity 0.3s;
}
#orbital-panel.hidden { display: none; }
.ob-header {
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--green);
  border-bottom: 1px dashed var(--border-soft);
  padding-bottom: 4px;
  margin-bottom: 6px;
  text-shadow: 0 0 6px var(--green-dim);
}
.ob-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 1px 0;
  color: var(--green-dim);
  font-family: 'Share Tech Mono', monospace;
}
.ob-row b {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 13px;
  font-weight: normal;
  text-shadow: 0 0 4px var(--amber-dim);
}
.ob-divider {
  height: 1px;
  background: rgba(106, 255, 160, 0.15);
  margin: 5px 0;
}

/* === INDICADORES PROGRADE / RETROGRADE === */
#prograde-marker, #retrograde-marker {
  position: fixed;
  pointer-events: none;
  z-index: 24;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px currentColor);
}
#prograde-marker { color: var(--green); }
#retrograde-marker { color: var(--amber); }
#prograde-marker.hidden, #retrograde-marker.hidden { display: none; }

/* === TIME WARP HUD === */
#timewarp-hud {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 5, 0, 0.85);
  border: 1px solid var(--amber);
  padding: 4px 14px;
  z-index: 30;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 20px rgba(255, 184, 74, 0.35);
}
#timewarp-hud.hidden { display: none; }
.tw-icon {
  color: var(--amber);
  font-size: 16px;
  text-shadow: 0 0 8px var(--amber);
  animation: pulse 0.6s infinite;
}
.tw-value {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 20px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--amber);
}
.tw-help {
  color: var(--green-dim);
  font-size: 9px;
  letter-spacing: 1px;
}

/* === WAYPOINT MARKER === */
#waypoint {
  position: fixed;
  pointer-events: none;
  z-index: 25;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
  font-family: 'Share Tech Mono', monospace;
  transition: opacity 0.3s;
}
#waypoint.hidden { display: none; }
.wp-icon {
  font-size: 28px;
  line-height: 1;
  animation: pulse 1.5s infinite;
}
.wp-label {
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 2px;
}
.wp-distance {
  font-size: 11px;
  color: var(--green);
  text-shadow: 0 0 6px var(--green-dim);
  font-family: 'VT323', monospace;
}
/* indicador en borde cuando waypoint sale de pantalla */
#waypoint.offscreen .wp-icon::before {
  content: '◀ ';
}

/* === ETIQUETAS FLOTANTES DE PLANETAS — feel "hud videojuego" ===
   Cada planeta visible muestra su nombre, distancia y un retículo en pantalla.
   Es un pool gestionado desde main.js (se reposicionan cada frame). */
#planet-labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 24;
}
.planet-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Share Tech Mono', monospace;
  color: var(--green);
  text-shadow: 0 0 6px var(--green-dim);
  text-align: center;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: opacity 0.2s;
}
.planet-label .pl-ret {
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor inset, 0 0 8px currentColor;
  position: relative;
}
.planet-label .pl-ret::before,
.planet-label .pl-ret::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.planet-label .pl-ret::before { left: -6px; right: -6px; top: 50%; height: 1px; }
.planet-label .pl-ret::after  { top: -6px; bottom: -6px; left: 50%; width: 1px; }
.planet-label .pl-name {
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 4px;
}
.planet-label .pl-dist {
  font-family: 'VT323', monospace;
  font-size: 12px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber);
  opacity: 0.9;
}
.planet-label.hab {
  color: #6affc8;
  text-shadow: 0 0 8px #6affc8;
}
.planet-label.starport {
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber);
}
.planet-label.starport .pl-ret {
  border-style: dashed;
  animation: pulse 1.6s infinite;
}

/* === HUD DE DESCENSO — altímetro grande tipo cabina === */
#descent-hud {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 36;
  pointer-events: none;
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  background: rgba(4, 14, 22, 0.78);
  border: 1px solid rgba(106, 220, 255, 0.55);
  padding: 10px 28px 12px;
  min-width: 280px;
  box-shadow:
    0 0 22px rgba(106, 220, 255, 0.30),
    inset 0 0 18px rgba(106, 220, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.4s, box-shadow 0.4s;
}
#descent-hud.hidden { display: none; }
#descent-hud .d-phase {
  font-size: 11px;
  letter-spacing: 6px;
  color: #cfe8ff;
  text-shadow: 0 0 6px rgba(106, 220, 255, 0.7);
  margin-bottom: 6px;
}
#descent-hud .d-altitude {
  font-family: 'VT323', monospace;
  line-height: 1;
  margin: 4px 0 6px;
}
#descent-hud .d-alt-value {
  font-size: 56px;
  color: #ffffff;
  text-shadow: 0 0 10px #fff, 0 0 22px rgba(106, 220, 255, 0.85);
  letter-spacing: 2px;
}
#descent-hud .d-alt-unit {
  font-size: 18px;
  color: rgba(106, 220, 255, 0.85);
  margin-left: 6px;
  letter-spacing: 4px;
}
#descent-hud .d-sub {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(207, 232, 255, 0.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
#descent-hud .d-sub-value {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-dim);
}
#descent-hud .d-track {
  height: 5px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(106, 220, 255, 0.35);
  position: relative;
  overflow: hidden;
}
#descent-hud .d-track-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4a8cff, #6affc8);
  box-shadow: 0 0 8px rgba(106, 255, 200, 0.7);
  transition: width 0.3s ease;
}
#descent-hud.phase-edge    { border-color: rgba(255, 184, 74, 0.7); box-shadow: 0 0 28px rgba(255, 184, 74, 0.35); }
#descent-hud.phase-edge    .d-track-fill { background: linear-gradient(90deg, #ffaa44, #ffdd66); }
#descent-hud.phase-reentry { border-color: rgba(255, 90, 90, 0.85); box-shadow: 0 0 36px rgba(255, 90, 90, 0.55); animation: descentPulse 0.9s ease-in-out infinite; }
#descent-hud.phase-reentry .d-track-fill { background: linear-gradient(90deg, #ff5a5a, #ffaa44); }
#descent-hud.phase-cloud   { border-color: rgba(207, 232, 255, 0.55); }
#descent-hud.phase-final   { border-color: rgba(106, 255, 160, 0.7); box-shadow: 0 0 28px rgba(106, 255, 160, 0.4); }
#descent-hud.phase-final   .d-track-fill { background: linear-gradient(90deg, #6affc8, #aaff66); }
@keyframes descentPulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 90, 90, 0.45); }
  50%      { box-shadow: 0 0 48px rgba(255, 90, 90, 0.85); }
}

/* === AUTO LAND DISPONIBLE === */
#autoland-available {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60px);
  background: rgba(20, 5, 0, 0.85);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--amber);
  z-index: 30;
  pointer-events: none;
  animation: pulse 1.2s infinite;
}
#autoland-available.hidden { display: none; }

/* Etiqueta de cámara actual — aparece al cambiar con F y se desvanece */
#cam-label {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -120px);
  background: rgba(0, 20, 30, 0.85);
  border: 1px solid #6adcff;
  color: #6adcff;
  padding: 8px 18px;
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #6adcff;
  box-shadow: 0 0 20px rgba(106, 220, 255, 0.4);
  z-index: 40;
  pointer-events: none;
  animation: camLabelIn 0.25s ease-out;
}
#cam-label.hidden { display: none; }
@keyframes camLabelIn {
  0%   { opacity: 0; transform: translate(-50%, -100px) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -120px) scale(1); }
}

#reentry-warning {
  margin-top: 6px;
  padding: 3px 6px;
  background: rgba(80, 10, 0, 0.6);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 0 0 6px var(--red);
  text-align: center;
  animation: blink-warn 0.5s infinite;
}
@keyframes blink-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
#reentry-warning.hidden { display: none; }

/* ============= DIÁLOGO PADRE — esquina inferior izquierda, COMPACTO ============= */
#padre-dialog {
  position: fixed;
  bottom: 210px;
  left: 200px;
  width: 360px;
  background: rgba(0, 15, 5, 0.88);
  border: 1px solid var(--green);
  padding: 8px 12px 10px;
  z-index: 40;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(138, 255, 106, 0.2);
}
#padre-dialog.hidden { display: none; }
#padre-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--green-dim);
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--green-dim);
  padding-bottom: 3px;
}
#padre-header .dot {
  width: 5px; height: 5px;
  background: var(--green);
  animation: pulse 1.2s infinite;
  box-shadow: 0 0 6px var(--green);
}
#padre-header .who { color: var(--green); }
#padre-header::after {
  content: '◉';
  margin-left: auto;
  color: var(--amber);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
#padre-text {
  color: var(--green);
  font-size: 13px;
  line-height: 1.4;
  font-family: 'VT323', monospace;
  text-shadow: 0 0 4px var(--green-dim);
}
#padre-text::before {
  content: '> ';
  color: var(--amber);
}
#padre-hint {
  margin-top: 4px;
  color: var(--amber);
  font-size: 10px;
  letter-spacing: 1px;
  border-top: 1px dashed rgba(255, 170, 0, 0.4);
  padding-top: 3px;
  text-shadow: 0 0 3px var(--amber-dim);
}

/* ============= BOTONES FLOTANTES ============= */
#mute-btn, #skip-tutorial {
  position: fixed;
  background: rgba(0, 15, 5, 0.85);
  border: 1px solid var(--green-dim);
  color: var(--green);
  padding: 5px 10px;
  font-size: 10px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 2px;
  cursor: pointer;
  z-index: 50;
  pointer-events: auto;
}
#mute-btn { top: 78px; right: 184px; }
#skip-tutorial { top: 78px; right: 280px; }
#skip-tutorial.hidden, #mute-btn.hidden { display: none; }
#mute-btn:hover, #skip-tutorial:hover {
  background: rgba(138, 255, 106, 0.2);
  border-color: var(--green);
}

/* =================================================================
   TITLE SCREEN — diseño espacial limpio (Interstel Corp)
   ================================================================= */
#title-screen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, #0a1730 0%, #050816 55%, #000 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 200;
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
#title-screen.fading {
  opacity: 0;
  filter: blur(6px) brightness(1.4);
  pointer-events: none;
}

/* Nebulosa suave de fondo (sin animación agresiva) */
#title-nebula {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(74, 140, 255, 0.18), transparent 65%),
    radial-gradient(ellipse 50% 35% at 75% 70%, rgba(106, 255, 200, 0.12), transparent 65%),
    radial-gradient(ellipse 45% 30% at 50% 95%, rgba(255, 184, 74, 0.10), transparent 70%);
  filter: blur(32px);
  animation: nebulaDrift 28s ease-in-out infinite;
  z-index: 0;
}
@keyframes nebulaDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(2%, -1%) scale(1.04); }
}

/* Estrellas — campo estrellado parallax con titileo suave */
#title-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #cfe8ff, transparent),
    radial-gradient(1px 1px at 22% 72%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 38% 28%, #aac8ff, transparent),
    radial-gradient(1px 1px at 48% 84%, #e8f4ff, transparent),
    radial-gradient(1px 1px at 58% 12%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 67% 56%, #c8e0ff, transparent),
    radial-gradient(1px 1px at 78% 22%, #ffffff, transparent),
    radial-gradient(1px 1px at 88% 78%, #b8d8ff, transparent),
    radial-gradient(1.5px 1.5px at 5% 88%, #ffffff, transparent),
    radial-gradient(1px 1px at 95% 38%, #d4e8ff, transparent);
  background-size: 700px 700px;
  opacity: 0.85;
  animation: starsDrift 120s linear infinite, starsTwinkle 4s ease-in-out infinite;
  z-index: 1;
}
@keyframes starsDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-700px, -700px); }
}
@keyframes starsTwinkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.55; }
}

/* Grid sutil — solo se ve cerca del centro */
#title-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(106, 255, 160, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 255, 160, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 60%);
  z-index: 1;
}

/* Planeta en silueta — abajo a la derecha, atmósfera glow */
#title-planet {
  position: absolute;
  width: 580px;
  height: 580px;
  right: -200px;
  bottom: -260px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #2a4f86 0%, #14284a 45%, #06101e 80%);
  box-shadow:
    inset -30px -50px 90px rgba(0,0,0,0.85),
    0 0 80px rgba(74, 140, 255, 0.35),
    0 0 160px rgba(74, 140, 255, 0.18);
  z-index: 1;
  animation: planetGlow 10s ease-in-out infinite;
}
@keyframes planetGlow {
  0%,100% { box-shadow: inset -30px -50px 90px rgba(0,0,0,0.85), 0 0 80px rgba(74,140,255,0.35), 0 0 160px rgba(74,140,255,0.18); }
  50%     { box-shadow: inset -30px -50px 90px rgba(0,0,0,0.85), 0 0 110px rgba(106,255,200,0.25), 0 0 200px rgba(74,140,255,0.22); }
}

/* Anillo orbital alrededor del planeta */
#title-orbit {
  position: absolute;
  width: 820px;
  height: 820px;
  right: -320px;
  bottom: -380px;
  border: 1px solid rgba(106, 255, 200, 0.18);
  border-radius: 50%;
  transform: rotate(-18deg);
  z-index: 1;
  box-shadow: 0 0 30px rgba(106, 255, 200, 0.10);
}
#title-orbit::before {
  content: '';
  position: absolute;
  inset: 35px;
  border: 1px dashed rgba(255, 184, 74, 0.18);
  border-radius: 50%;
}

#title-content {
  position: relative;
  z-index: 3;
  max-width: min(96vw, 1480px);
  width: 100%;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-corp {
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--green);
  margin-bottom: 14px;
  text-shadow: 0 0 8px rgba(106, 255, 160, 0.5);
}

/* ENTER THE VOID — letras del MISMO tamaño, neón Times Square con RGB split */
#title-screen h1 {
  font-family: 'VT323', monospace;
  font-weight: 100;
  margin: 0 0 6px;
  line-height: 0.92;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* Tamaño fluido: escala con viewport para que ENTER THE no se desborde nunca */
#title-screen h1 .t-small,
#title-screen h1 .t-big {
  font-size: clamp(58px, 11vw, 168px);
  letter-spacing: clamp(6px, 1.4vw, 22px);
}
/* "ENTER THE" — magenta neón con sangrado cian/amarillo (chromatic aberration) */
#title-screen h1 .t-small {
  color: #ff10f0;
  text-shadow:
    -3px  0   0   #00f0ff,
     3px  0   0   #ffe600,
     0    0   12px #ff10f0,
     0    0   28px #ff3aa0,
     0    0   60px #ff10f0,
     0    0  120px rgba(255, 16, 240, 0.55);
  animation: neonShiftA 5s ease-in-out infinite;
  filter: saturate(1.6);
}
/* "VOID" — cian neón con sangrado magenta/lima */
#title-screen h1 .t-big {
  color: #00f0ff;
  text-shadow:
    -3px  0   0   #ff10f0,
     3px  0   0   #aaff00,
     0    0   12px #00f0ff,
     0    0   28px #4a8cff,
     0    0   60px #00f0ff,
     0    0  120px rgba(0, 240, 255, 0.55);
  animation: neonShiftB 5s ease-in-out infinite;
  filter: saturate(1.6);
}
@keyframes neonShiftA {
  0%, 100% { filter: saturate(1.6) hue-rotate(0deg); }
  25%      { filter: saturate(1.9) hue-rotate(40deg); }
  50%      { filter: saturate(1.6) hue-rotate(-30deg); }
  75%      { filter: saturate(1.9) hue-rotate(20deg); }
}
@keyframes neonShiftB {
  0%, 100% { filter: saturate(1.6) hue-rotate(0deg); }
  25%      { filter: saturate(1.9) hue-rotate(-40deg); }
  50%      { filter: saturate(1.6) hue-rotate(30deg); }
  75%      { filter: saturate(1.9) hue-rotate(-20deg); }
}

.title-sub {
  font-size: 13px;
  letter-spacing: 8px;
  color: #cfe8ff;
  margin-bottom: 12px;
  text-shadow: 0 0 6px rgba(106, 220, 255, 0.7);
}

.title-divider {
  width: min(560px, 80%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(106, 220, 255, 0.6),
    rgba(106, 255, 200, 0.6),
    transparent);
  margin: 12px 0;
  box-shadow: 0 0 8px rgba(106, 220, 255, 0.4);
}

.tagline {
  font-size: 14px;
  color: #d4e8ff;
  margin-bottom: 4px;
  letter-spacing: 2px;
  font-style: italic;
  text-shadow: 0 0 6px rgba(74, 140, 255, 0.5);
}

#start-button {
  margin-top: 20px;
  background: rgba(8, 30, 50, 0.55);
  color: #ffffff;
  border: 1px solid rgba(106, 220, 255, 0.7);
  padding: 14px 56px;
  font-size: 17px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 6px;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(106, 220, 255, 0.9);
  box-shadow:
    0 0 18px rgba(106, 220, 255, 0.35),
    inset 0 0 14px rgba(106, 220, 255, 0.15);
  transition: all 0.25s ease;
  position: relative;
  animation: btnPulse 2.4s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 18px rgba(106, 220, 255, 0.35), inset 0 0 14px rgba(106, 220, 255, 0.15); }
  50%     { box-shadow: 0 0 28px rgba(106, 255, 200, 0.45), inset 0 0 20px rgba(106, 220, 255, 0.25); }
}
#start-button:hover {
  background: rgba(20, 60, 90, 0.75);
  border-color: var(--green);
  color: var(--green);
  letter-spacing: 8px;
  text-shadow: 0 0 12px var(--green);
  box-shadow: 0 0 32px rgba(106, 255, 160, 0.6), inset 0 0 22px rgba(106, 255, 160, 0.18);
}
#start-button::before, #start-button::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(106, 220, 255, 0.85);
  transition: border-color 0.25s ease;
}
#start-button::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
#start-button::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
#start-button:hover::before, #start-button:hover::after { border-color: var(--green); }

.briefing {
  margin-top: 18px;
  max-width: 640px;
  width: 100%;
  background: rgba(4, 18, 28, 0.78);
  border: 1px solid rgba(106, 255, 160, 0.35);
  padding: 14px 22px;
  text-align: left;
  position: relative;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.briefing::before, .briefing::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--green);
}
.briefing::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.briefing::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.briefing h3 {
  color: var(--amber);
  letter-spacing: 5px;
  margin-bottom: 8px;
  font-size: 12px;
  text-shadow: 0 0 6px var(--amber-dim);
}
.brief-line {
  font-size: 12px;
  color: var(--green);
  padding: 2px 0;
  line-height: 1.45;
}
.brief-line .bk {
  display: inline-block;
  width: 110px;
  color: var(--green-dim);
  letter-spacing: 1px;
}
.brief-line.warn {
  color: var(--red);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,60,60,0.3);
  text-shadow: 0 0 6px rgba(255, 90, 90, 0.4);
}

.title-footer {
  margin-top: 14px;
  font-size: 10px;
  color: var(--green-dim);
  letter-spacing: 2px;
}
.title-footer .status-ok { color: var(--green); text-shadow: 0 0 4px var(--green); }

/* === Barra de carga (boot-loader) === */
#boot-loader {
  margin: 26px auto 0;
  max-width: 460px;
  text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#boot-loader.done {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
}
.boot-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: #cfe8ff;
  margin-bottom: 8px;
  text-shadow: 0 0 6px rgba(106, 220, 255, 0.7);
  animation: bootLabelBlink 1.4s ease-in-out infinite;
}
@keyframes bootLabelBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.boot-track {
  position: relative;
  height: 10px;
  background: rgba(6, 18, 30, 0.8);
  border: 1px solid rgba(106, 220, 255, 0.45);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
  border-radius: 1px;
  overflow: hidden;
}
.boot-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(74, 140, 255, 0.85), rgba(106, 255, 200, 0.95));
  box-shadow:
    0 0 12px rgba(106, 220, 255, 0.85),
    0 0 24px rgba(106, 255, 200, 0.55);
  transition: width 0.18s linear;
  position: relative;
}
.boot-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: bootShimmer 1.6s linear infinite;
}
@keyframes bootShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.boot-pct {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(106, 220, 255, 0.85);
  font-family: 'VT323', monospace;
}

/* === Input de nombre del capitán === */
#captain-input-wrap {
  margin: 22px auto 0;
  max-width: 460px;
  text-align: center;
}
.cap-label {
  display: block;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--green);
  margin-bottom: 8px;
  text-shadow: 0 0 6px rgba(106, 255, 160, 0.6);
}
#captain-name-input {
  width: 100%;
  background: rgba(6, 18, 30, 0.85);
  border: 1px solid rgba(106, 220, 255, 0.6);
  color: #ffffff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  letter-spacing: 4px;
  text-align: center;
  padding: 11px 14px;
  outline: none;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(106, 220, 255, 0.6);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(106, 220, 255, 0.18);
  transition: border-color 0.2s, box-shadow 0.2s;
}
#captain-name-input::placeholder {
  color: rgba(207, 232, 255, 0.35);
  letter-spacing: 4px;
  font-style: italic;
}
#captain-name-input:focus {
  border-color: var(--green);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(106, 255, 160, 0.5);
}
#captain-name-input.shake {
  animation: capShake 0.45s ease;
  border-color: var(--red);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(255, 90, 90, 0.65);
}
@keyframes capShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* Botón deshabilitado durante la carga */
#start-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  animation: none;
  border-color: rgba(106, 220, 255, 0.35);
  color: rgba(207, 232, 255, 0.6);
  text-shadow: none;
  box-shadow: 0 0 8px rgba(106, 220, 255, 0.15);
}
#start-button:disabled:hover {
  background: rgba(8, 30, 50, 0.55);
  border-color: rgba(106, 220, 255, 0.35);
  color: rgba(207, 232, 255, 0.6);
  letter-spacing: 6px;
  text-shadow: none;
  box-shadow: 0 0 8px rgba(106, 220, 255, 0.15);
}

/* Estado "iniciando" tras el clic — barra que llena los motores */
#start-button.starting {
  cursor: progress;
  pointer-events: none;
  background: rgba(20, 60, 90, 0.9);
  border-color: var(--green);
  color: var(--green);
  text-shadow: 0 0 10px var(--green);
  animation: startingPulse 0.7s ease-in-out infinite;
}
@keyframes startingPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(106, 255, 160, 0.45); }
  50%      { box-shadow: 0 0 36px rgba(106, 255, 160, 0.85); }
}

@media (max-width: 720px) {
  #title-screen h1 .t-small,
  #title-screen h1 .t-big { font-size: 56px; letter-spacing: 6px; }
  .title-sub { font-size: 11px; letter-spacing: 5px; }
  #title-planet { width: 360px; height: 360px; right: -120px; bottom: -180px; }
  #title-orbit  { width: 520px; height: 520px; right: -200px; bottom: -260px; }
}

@media (prefers-reduced-motion: reduce) {
  #title-stars, #title-nebula, #title-screen h1, #start-button, #title-planet {
    animation: none !important;
  }
}

/* ============= MENSAJE FLOTANTE ============= */
#message {
  position: fixed;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 15, 5, 0.92);
  border: 1px solid var(--green);
  padding: 16px 32px;
  text-align: center;
  z-index: 50;
  max-width: 580px;
  box-shadow: 0 0 30px rgba(138, 255, 106, 0.3);
}
#message.hidden { display: none; }
#message h2 {
  color: var(--amber);
  font-size: 22px;
  font-family: 'VT323', monospace;
  margin-bottom: 8px;
  text-shadow: 0 0 10px var(--amber-dim);
  letter-spacing: 2px;
}
#message p {
  color: var(--green);
  font-size: 13px;
  line-height: 1.5;
}

/* ============= MODAL ============= */
#modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 5, 2, 0.88);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 150;
  pointer-events: auto;
}
#modal.hidden { display: none; }
#modal-box {
  width: 720px;
  max-width: 92vw;
  max-height: 84vh;
  background: var(--green-bg-solid);
  border: 1px solid var(--green);
  box-shadow: 0 0 50px rgba(138, 255, 106, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(138, 255, 106, 0.08);
  border-bottom: 1px solid var(--green-dim);
}
#modal-title {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--amber-dim);
}
#modal-close {
  background: transparent;
  border: 1px solid var(--green-dim);
  color: var(--green);
  width: 26px; height: 26px;
  cursor: pointer;
  font-family: inherit;
}
#modal-close:hover { background: rgba(255, 60, 60, 0.3); border-color: var(--red); color: var(--red); }
#modal-body {
  padding: 20px;
  overflow-y: auto;
  color: var(--green);
  line-height: 1.5;
  font-size: 12px;
}

#modal-body h3 {
  color: var(--amber);
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 14px 0 6px;
  border-bottom: 1px solid var(--green-dim);
  padding-bottom: 3px;
}
#modal-body .scan-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 3px 0;
  font-size: 12px;
}
#modal-body .scan-row span:first-child { color: var(--green-dim); }
#modal-body .scan-row span:last-child { color: var(--amber); }
#modal-body .hab-yes { color: var(--green) !important; font-weight: bold; }
#modal-body .hab-no { color: var(--red) !important; }
#modal-body .trade-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(138, 255, 106, 0.1);
}
#modal-body button {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  padding: 3px 10px;
  font-family: inherit;
  cursor: pointer;
  font-size: 11px;
}
#modal-body button:hover { background: rgba(138, 255, 106, 0.2); }
#modal-body button:disabled { opacity: 0.3; cursor: not-allowed; }
#modal-body .system-card {
  margin: 8px 0;
  padding: 10px;
  background: rgba(0, 30, 10, 0.4);
  border-left: 3px solid var(--green-dim);
  cursor: pointer;
}
#modal-body .system-card:hover { background: rgba(138, 255, 106, 0.12); border-left-color: var(--green); }
#modal-body .system-card.current { border-left-color: var(--amber); }
#modal-body .system-card .sname {
  color: var(--green);
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 3px;
}
#modal-body .system-card .sdesc {
  font-size: 11px;
  color: var(--green-dim);
}

/* =============================================================
   ============== POLISH VISUAL — v0.4.1 =======================
   Aurora · Crosshair brackets · Critical state · Bootup · Flicker
   ============================================================= */

/* ---------- AURORA / VIGNETTE ---------- */
#aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(106, 255, 160, 0.10), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 184, 74, 0.06), transparent 55%),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
  animation: aurora-breathe 7s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes aurora-breathe {
  0%, 100% { opacity: 0.55; filter: hue-rotate(0deg); }
  50%      { opacity: 0.85; filter: hue-rotate(-8deg); }
}
#aurora.alert {
  animation: aurora-alert 0.9s ease-in-out infinite;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 60, 60, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 60, 60, 0.18), transparent 55%),
    radial-gradient(ellipse at center, transparent 35%, rgba(60, 0, 0, 0.55) 100%);
}
@keyframes aurora-alert {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

/* ---------- VOID TINT — capa etérea sobre el universo real cuando muere la nave ----------
   No tapa el render del simulador, solo le tira un velo violeta/azul para que
   visualmente se sienta "otra forma de existir" sin perder estrellas/planetas. */
#void-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(80, 60, 180, 0.22) 80%, rgba(20, 10, 60, 0.45) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(170, 200, 255, 0.10), transparent 60%);
  mix-blend-mode: screen;
  transition: opacity 1.6s ease-out;
}
#void-tint.active {
  opacity: 1;
  animation: void-tint-breathe 9s ease-in-out infinite;
}
@keyframes void-tint-breathe {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  50%      { filter: hue-rotate(-12deg) saturate(1.18); }
}

/* ---------- SPEED LINES — overlay arcade radial al ir rápido ---------- */
#speed-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  /* Streaks emanando del centro (efecto "warp tunnel" suave) */
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 4.5deg,
    rgba(255, 255, 255, 0.18) 4.7deg,
    rgba(220, 240, 255, 0.18) 5.1deg,
    transparent 5.3deg,
    transparent 9deg
  );
  /* Mask: invisible en el centro, pleno en los bordes */
  -webkit-mask: radial-gradient(ellipse at center, transparent 22%, black 75%);
  mask: radial-gradient(ellipse at center, transparent 22%, black 75%);
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
  animation: speed-lines-spin 22s linear infinite;
}
#speed-lines.active { opacity: var(--speed-amount, 0.6); }
@keyframes speed-lines-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- CROSSHAIR BRACKETS (corchetes tipo KSP) ---------- */
#crosshair .bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(138, 255, 106, 0.55);
  transition: transform 0.25s ease, border-color 0.25s, opacity 0.25s;
}
#crosshair .bracket.tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }
#crosshair .bracket.tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }
#crosshair .bracket.bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }
#crosshair .bracket.br { bottom: -10px; right: -10px; border-left: none; border-top: none; }
#crosshair.lock .bracket {
  border-color: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}
#crosshair.lock .bracket.tl { transform: translate(-4px, -4px); }
#crosshair.lock .bracket.tr { transform: translate( 4px, -4px); }
#crosshair.lock .bracket.bl { transform: translate(-4px,  4px); }
#crosshair.lock .bracket.br { transform: translate( 4px,  4px); }
#crosshair.lock {
  border-color: rgba(255, 184, 74, 0.6);
  box-shadow: inset 0 0 12px rgba(255, 184, 74, 0.25);
}

/* ---------- ESTADO CRÍTICO (casco / endurium bajos) ---------- */
.value.critical,
#inv-panel .row span.critical,
.row.critical span:last-child {
  color: var(--red) !important;
  text-shadow: 0 0 10px var(--red), 0 0 2px #fff;
  animation: crit-flicker 0.7s steps(2, end) infinite;
}
.bar-fill.critical {
  background: linear-gradient(90deg, #ff8a4a, var(--red)) !important;
  box-shadow: 0 0 14px var(--red) !important;
  animation: crit-bar 0.6s ease-in-out infinite;
}
@keyframes crit-flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.35; transform: translateX(0.5px); }
  55%      { opacity: 1;    transform: translateX(-0.5px); }
}
@keyframes crit-bar {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6); }
}
.panel.critical::before, .panel.critical::after { border-color: var(--red); opacity: 1; }
.panel.critical { border-color: rgba(255, 90, 90, 0.55); }

/* ---------- HOLOGRAPHIC FLICKER en telemetría ---------- */
/* Solo opacity para componer en GPU sin repaint (text-shadow obliga repaint en cada frame) */
.value {
  animation: holo-flicker 6s infinite;
  will-change: opacity;
}
@keyframes holo-flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.55; }
  98%           { opacity: 1; }
  99%           { opacity: 0.7; }
}
.value.tick {
  animation: tick-pop 0.35s ease-out;
}
@keyframes tick-pop {
  0%   { transform: scale(1.18); color: #fff; text-shadow: 0 0 18px #fff; }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ---------- HUD BOOTUP — barrido CRT al iniciar misión ---------- */
#hud.boot .panel,
#hud.boot .side-panel,
#hud.boot #crosshair,
#hud.boot #radar {
  opacity: 0;
  animation: hud-bootup 0.55s ease-out forwards;
}
#hud.boot #hud-top   .panel:nth-child(1) { animation-delay: 0.10s; }
#hud.boot #hud-top   .panel:nth-child(2) { animation-delay: 0.25s; }
#hud.boot #hud-top   .panel:nth-child(3) { animation-delay: 0.40s; }
#hud.boot #crew-panel                   { animation-delay: 0.55s; }
#hud.boot #inv-panel                    { animation-delay: 0.55s; }
#hud.boot #hud-bottom .panel:nth-child(1) { animation-delay: 0.70s; }
#hud.boot #hud-bottom .panel:nth-child(2) { animation-delay: 0.85s; }
#hud.boot #hud-bottom .panel:nth-child(3) { animation-delay: 1.00s; }
#hud.boot #crosshair                    { animation-delay: 1.20s; }
@keyframes hud-bootup {
  0%   { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(3px) brightness(2); }
  60%  { opacity: 1; filter: blur(0) brightness(1.4); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* línea de barrido que recorre la pantalla durante el bootup */
#hud.boot::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(106, 255, 160, 0.0) 48%,
    rgba(106, 255, 160, 0.55) 50%,
    rgba(106, 255, 160, 0.0) 52%,
    transparent 100%);
  animation: hud-scanline 1.4s ease-out forwards;
}
@keyframes hud-scanline {
  0%   { transform: translateY(-100%); opacity: 0.9; }
  100% { transform: translateY(100%);  opacity: 0; }
}

/* ---------- RADAR — borde reforzado + acompaña sweep JS ---------- */
#radar {
  box-shadow:
    0 0 18px rgba(106, 255, 160, 0.45),
    inset 0 0 35px rgba(20, 80, 40, 0.55);
}

/* =================================================================
   ENTER THE VOID — REDISEÑO LISÉRGICO v2
   Magenta · Cyan · Violeta · Yellow ácido
   Todos los carteles del juego repintados de cero
   ================================================================= */

/* === REASIGNACIÓN DE TOKENS LEGACY ===
   --green / --amber se redirigen a la paleta cockpit (cyan + ámbar)
   sin tocar los selectores existentes. */
:root {
  --green:        #4adcff;
  --green-dim:    #2a8aaa;
  --green-bg:     rgba(8, 24, 38, 0.50);
  --green-bg-solid: rgba(4, 10, 18, 0.94);
  --amber:        #ff9a44;
  --amber-dim:    #b06028;
  --red:          #ff2255;
  --bg-panel:        rgba(8, 12, 18, 0.55);
  --bg-panel-hover:  rgba(14, 22, 34, 0.85);
  --border-soft:     rgba(74, 220, 255, 0.40);
  --border-active:   rgba(0, 240, 255, 0.85);
  --shadow-glow:
    0 0 18px rgba(74, 220, 255, 0.28),
    0 0 36px rgba(255, 154, 68, 0.18),
    inset 0 0 14px rgba(74, 220, 255, 0.10);
}

body { color: #fff; }

/* === AURORA — vignette mínimo, sin respirar ni cambiar de color ===
   Antes tenía gradientes magenta/cyan/violeta respirando + rotación de matiz
   constante, eso era percibido como "algo que rodea la nave todo el tiempo". */
#aurora {
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
  animation: none;
  opacity: 0.7;
  filter: none;
}
#aurora.alert {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 60, 60, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 60, 60, 0.18), transparent 55%),
    radial-gradient(ellipse at center, transparent 35%, rgba(60, 0, 0, 0.55) 100%);
  animation: aurora-alert 0.9s ease-in-out infinite;
}

/* === SCANLINES NEÓN === */
body::after {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(255, 16, 240, 0.07) 2px,
    rgba(0, 240, 255, 0.07) 3px
  );
  mix-blend-mode: screen;
}

/* === PANELES HUD — borde magenta animado, esquinas cian === */
.panel {
  background: var(--bg-panel);
  border: 1px solid rgba(255, 16, 240, 0.50);
  box-shadow:
    0 0 16px rgba(255, 16, 240, 0.28),
    0 0 36px rgba(0, 240, 255, 0.15),
    inset 0 0 18px rgba(185, 74, 255, 0.10);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
.panel:hover {
  background: var(--bg-panel-hover);
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 26px rgba(255, 16, 240, 0.45),
    0 0 50px rgba(0, 240, 255, 0.35),
    inset 0 0 22px rgba(185, 74, 255, 0.18);
}
.panel::before, .panel::after {
  border-color: var(--neon-cyan);
  filter: drop-shadow(0 0 5px var(--neon-cyan));
}

/* === SIDE PANELS (TRIPULACIÓN / INVENTARIO) === */
.side-panel {
  background: var(--bg-panel);
  border: 1px solid rgba(185, 74, 255, 0.45);
  box-shadow: 0 0 18px rgba(185, 74, 255, 0.20), inset 0 0 14px rgba(255, 16, 240, 0.05);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
.side-panel:hover {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 30px rgba(255, 16, 240, 0.50), inset 0 0 18px rgba(185, 74, 255, 0.15);
}
.side-panel::-webkit-scrollbar-thumb { background: var(--neon-violet); }

/* Items de tripulación — barra lateral magenta */
#crew-list .crew-item {
  background: rgba(40, 0, 60, 0.45);
  border-left-color: var(--neon-magenta);
  box-shadow: -2px 0 8px rgba(255, 16, 240, 0.35);
}
.crew-item .role     { color: var(--neon-violet); }
.crew-item .name     { color: #fff; text-shadow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-cyan); }
.crew-item .species  { color: var(--neon-cyan); opacity: 0.85; }
.crew-item .skill-fill { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }

/* Inventario — minerales en amarillo neón */
#inv-panel .row { color: #fff; text-shadow: 0 0 4px rgba(0, 240, 255, 0.5); }
#inv-panel .row.mineral { color: var(--neon-yellow); text-shadow: 0 0 6px var(--neon-yellow); }
#inv-panel .separator {
  background: linear-gradient(90deg, transparent, var(--neon-magenta), var(--neon-cyan), transparent);
  height: 1px; opacity: 0.6;
}

/* === LABELS / SUBS / VALUES === */
.label {
  color: var(--neon-violet);
  text-shadow: 0 0 4px var(--neon-violet);
}
.sub {
  color: #d8eaff;
  text-shadow: 0 0 3px rgba(0, 240, 255, 0.5);
}
.sub b { color: var(--neon-yellow); text-shadow: 0 0 6px var(--neon-yellow); }

/* Valores grandes — RGB split magenta/cian */
.value {
  color: #fff;
  text-shadow:
    -1.5px 0 0 var(--neon-magenta),
     1.5px 0 0 var(--neon-cyan),
     0 0 8px rgba(255, 16, 240, 0.7),
     0 0 18px rgba(0, 240, 255, 0.5);
}

/* Lista de teclas */
.key-list { color: #d8eaff; }
.key-list b { color: var(--neon-cyan); text-shadow: 0 0 5px var(--neon-cyan); }

/* === CROSSHAIR === */
#crosshair {
  border-color: rgba(255, 16, 240, 0.55);
  box-shadow: 0 0 14px rgba(255, 16, 240, 0.40);
}
#crosshair::before, #crosshair::after {
  background: rgba(0, 240, 255, 0.65);
  box-shadow: 0 0 6px var(--neon-cyan);
}
#crosshair .bracket {
  border-color: rgba(0, 240, 255, 0.85);
  filter: drop-shadow(0 0 4px var(--neon-cyan));
}
#crosshair.lock { border-color: rgba(255, 230, 0, 0.7); box-shadow: inset 0 0 14px rgba(255, 230, 0, 0.30); }
#crosshair.lock .bracket {
  border-color: var(--neon-yellow);
  box-shadow: 0 0 10px var(--neon-yellow);
}

/* === BARRAS — gradiente magenta→cian con shimmer === */
.bar {
  border: 1px solid rgba(255, 16, 240, 0.40);
  background: rgba(0, 0, 0, 0.65);
}
.bar-fill {
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-violet), var(--neon-cyan));
  box-shadow: 0 0 10px var(--neon-magenta), 0 0 18px var(--neon-cyan);
}
.bar-fill.green {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-lime));
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 16px var(--neon-lime);
}

/* === RADAR / MAPA ORBITAL === */
#radar {
  background: radial-gradient(circle, rgba(80, 0, 100, 0.55), rgba(0, 0, 20, 0.90));
  border: 1px solid var(--neon-magenta);
  box-shadow:
    0 0 24px rgba(255, 16, 240, 0.55),
    inset 0 0 38px rgba(185, 74, 255, 0.45);
}
.map-pair { display: flex; align-items: flex-end; gap: 12px; }
.map-cell { display: flex; flex-direction: column; align-items: center; }
#orbital-map {
  display: block;
  width: 130px !important; height: 130px !important;
  background: radial-gradient(circle, rgba(0, 30, 80, 0.55), rgba(0, 0, 14, 0.90));
  border: 1px solid var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.55), inset 0 0 36px rgba(0, 140, 220, 0.45);
}

/* === PROMPT (proximidad) === */
#prompt {
  background: rgba(20, 0, 32, 0.88);
  border-color: var(--neon-yellow);
  color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow), 0 0 16px var(--neon-orange);
  box-shadow: 0 0 18px rgba(255, 230, 0, 0.40);
}

/* === AUTOPILOT HUD === */
#autopilot-hud {
  background: rgba(10, 0, 24, 0.92);
  border: 1px solid var(--neon-violet);
  box-shadow: 0 0 28px rgba(185, 74, 255, 0.50), inset 0 0 18px rgba(255, 16, 240, 0.08);
}
.ap-header { border-bottom-color: rgba(185, 74, 255, 0.45); }
.ap-icon  { color: var(--neon-magenta); text-shadow: 0 0 10px var(--neon-magenta); }
.ap-title { color: #fff; text-shadow: 0 0 6px var(--neon-cyan); }
.ap-phase {
  color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--neon-yellow), -1px 0 0 var(--neon-magenta), 1px 0 0 var(--neon-cyan);
}
.ap-row span:first-child { color: var(--neon-violet); }
.ap-row span:last-child  { color: var(--neon-cyan); text-shadow: 0 0 6px var(--neon-cyan); }
.ap-bar { background: rgba(0, 0, 0, 0.65); border: 1px solid var(--neon-violet); }
.ap-bar-fill {
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  box-shadow: 0 0 12px var(--neon-magenta), 0 0 18px var(--neon-cyan);
}
.ap-hint { color: var(--neon-violet); }

/* === PANEL ORBITAL === */
#orbital-panel {
  background: rgba(10, 0, 24, 0.78);
  border: 1px solid rgba(255, 16, 240, 0.45);
  box-shadow:
    0 0 18px rgba(255, 16, 240, 0.30),
    0 0 36px rgba(0, 240, 255, 0.18);
}
.ob-header {
  color: var(--neon-cyan);
  border-bottom: 1px dashed rgba(0, 240, 255, 0.45);
  text-shadow: 0 0 6px var(--neon-cyan);
}
.ob-row     { color: var(--neon-violet); }
.ob-row b   { color: var(--neon-yellow); text-shadow: 0 0 5px var(--neon-yellow); }
.ob-divider { background: linear-gradient(90deg, transparent, var(--neon-magenta), transparent); opacity: 0.5; }

/* === HUD DE DESCENSO — neón cian/magenta === */
#descent-hud {
  background: rgba(10, 0, 24, 0.82);
  border: 1px solid rgba(0, 240, 255, 0.65);
  box-shadow:
    0 0 26px rgba(0, 240, 255, 0.40),
    0 0 50px rgba(255, 16, 240, 0.20),
    inset 0 0 20px rgba(185, 74, 255, 0.10);
}
#descent-hud .d-phase {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-magenta);
}
#descent-hud .d-alt-value {
  color: #fff;
  text-shadow:
    -1.5px 0 0 var(--neon-magenta),
     1.5px 0 0 var(--neon-cyan),
     0 0 14px #fff,
     0 0 28px var(--neon-cyan);
}
#descent-hud .d-alt-unit  { color: var(--neon-violet); }
#descent-hud .d-sub       { color: rgba(216, 234, 255, 0.85); }
#descent-hud .d-sub-value { color: var(--neon-yellow); text-shadow: 0 0 6px var(--neon-yellow); }
#descent-hud .d-track     { background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 16, 240, 0.40); }
#descent-hud .d-track-fill {
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  box-shadow: 0 0 10px var(--neon-magenta), 0 0 18px var(--neon-cyan);
}
#descent-hud.phase-edge    { border-color: var(--neon-yellow); box-shadow: 0 0 30px rgba(255, 230, 0, 0.45); }
#descent-hud.phase-edge    .d-track-fill { background: linear-gradient(90deg, var(--neon-orange), var(--neon-yellow)); }
#descent-hud.phase-reentry { border-color: var(--red); box-shadow: 0 0 36px rgba(255, 34, 85, 0.65); }
#descent-hud.phase-reentry .d-track-fill { background: linear-gradient(90deg, var(--red), var(--neon-orange)); }
#descent-hud.phase-cloud   { border-color: var(--neon-violet); box-shadow: 0 0 26px rgba(185, 74, 255, 0.40); }
#descent-hud.phase-final   { border-color: var(--neon-lime); box-shadow: 0 0 30px rgba(170, 255, 0, 0.50); }
#descent-hud.phase-final   .d-track-fill { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-lime)); }

/* === AUTOLAND DISPONIBLE === */
#autoland-available {
  background: rgba(10, 0, 24, 0.88);
  border-color: var(--neon-yellow);
  color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow), 0 0 16px var(--neon-orange);
  box-shadow: 0 0 22px rgba(255, 230, 0, 0.50);
}

/* === CAM LABEL === */
#cam-label {
  background: rgba(10, 0, 24, 0.88);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  text-shadow: 0 0 12px var(--neon-cyan), -1px 0 0 var(--neon-magenta), 1px 0 0 var(--neon-yellow);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.55);
}

/* === TIME WARP === */
#timewarp-hud {
  background: rgba(10, 0, 24, 0.88);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.55), 0 0 50px rgba(255, 16, 240, 0.25);
}
.tw-icon, .tw-value {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan), -1px 0 0 var(--neon-magenta), 1px 0 0 var(--neon-yellow);
}
.tw-help { color: var(--neon-violet); }

/* === WAYPOINT === */
#waypoint {
  color: var(--neon-magenta);
  text-shadow: 0 0 10px var(--neon-magenta), 0 0 22px var(--neon-cyan);
}
.wp-icon { filter: drop-shadow(0 0 6px var(--neon-magenta)); }
.wp-label    { color: var(--neon-cyan); text-shadow: 0 0 6px var(--neon-cyan); }
.wp-distance { color: var(--neon-yellow); text-shadow: 0 0 6px var(--neon-yellow); }

/* === PROGRADE / RETROGRADE === */
#prograde-marker  { color: var(--neon-cyan); }
#retrograde-marker{ color: var(--neon-magenta); }

/* === DIÁLOGO PADRE === */
#padre-dialog {
  background: rgba(10, 0, 24, 0.92);
  border: 1px solid var(--neon-violet);
  box-shadow: 0 0 28px rgba(185, 74, 255, 0.55), inset 0 0 16px rgba(255, 16, 240, 0.10);
}
#padre-header {
  color: var(--neon-violet);
  border-bottom: 1px dashed rgba(185, 74, 255, 0.50);
}
#padre-header .dot {
  background: var(--neon-magenta);
  box-shadow: 0 0 8px var(--neon-magenta);
}
#padre-header .who {
  color: #fff;
  text-shadow: 0 0 6px var(--neon-cyan);
}
#padre-header::after { color: var(--neon-yellow); text-shadow: 0 0 6px var(--neon-yellow); }
#padre-text {
  color: #fff;
  text-shadow: 0 0 4px var(--neon-cyan);
}
#padre-text::before { color: var(--neon-magenta); }
#padre-hint {
  color: var(--neon-yellow);
  border-top: 1px dashed rgba(255, 230, 0, 0.40);
  text-shadow: 0 0 5px var(--neon-yellow);
}

/* === BOTONES FLOTANTES === */
#mute-btn, #skip-tutorial {
  background: rgba(10, 0, 24, 0.88);
  border: 1px solid var(--neon-magenta);
  color: #fff;
  text-shadow: 0 0 6px var(--neon-magenta);
  box-shadow: 0 0 14px rgba(255, 16, 240, 0.40);
  transition: all 0.2s;
}
#mute-btn:hover, #skip-tutorial:hover {
  background: rgba(255, 16, 240, 0.20);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan);
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.65);
}

/* === MENSAJE FLOTANTE === */
#message {
  background: rgba(10, 0, 24, 0.94);
  border: 1px solid var(--neon-magenta);
  box-shadow:
    0 0 36px rgba(255, 16, 240, 0.55),
    0 0 70px rgba(0, 240, 255, 0.30);
}
#message h2 {
  color: #fff;
  text-shadow:
    -1.5px 0 0 var(--neon-magenta),
     1.5px 0 0 var(--neon-cyan),
     0 0 12px var(--neon-yellow);
}
#message p {
  color: #fff;
  text-shadow: 0 0 6px var(--neon-cyan);
}

/* === MODAL === */
#modal { background: rgba(4, 0, 10, 0.92); }
#modal-box {
  background: rgba(10, 0, 24, 0.96);
  border: 1px solid var(--neon-magenta);
  box-shadow:
    0 0 60px rgba(255, 16, 240, 0.55),
    0 0 120px rgba(0, 240, 255, 0.25);
}
#modal-header {
  background: linear-gradient(90deg, rgba(255, 16, 240, 0.18), rgba(0, 240, 255, 0.10), rgba(185, 74, 255, 0.18));
  border-bottom: 1px solid var(--neon-violet);
}
#modal-title {
  color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--neon-yellow), -1px 0 0 var(--neon-magenta), 1px 0 0 var(--neon-cyan);
}
#modal-close {
  border-color: var(--neon-violet);
  color: #fff;
  text-shadow: 0 0 5px var(--neon-magenta);
}
#modal-close:hover {
  background: rgba(255, 34, 85, 0.30);
  border-color: var(--red);
  color: var(--red);
}
#modal-body { color: #fff; }
#modal-body h3 {
  color: var(--neon-yellow);
  border-bottom: 1px solid var(--neon-violet);
  text-shadow: 0 0 6px var(--neon-yellow);
}
#modal-body .scan-row span:first-child { color: var(--neon-violet); }
#modal-body .scan-row span:last-child  { color: var(--neon-cyan); text-shadow: 0 0 5px var(--neon-cyan); }
#modal-body .hab-yes { color: var(--neon-lime) !important; text-shadow: 0 0 8px var(--neon-lime); }
#modal-body .hab-no  { color: var(--red) !important; text-shadow: 0 0 8px var(--red); }
#modal-body .trade-item { border-bottom: 1px solid rgba(255, 16, 240, 0.18); }
#modal-body button {
  background: transparent;
  color: #fff;
  border: 1px solid var(--neon-cyan);
  text-shadow: 0 0 5px var(--neon-cyan);
  transition: all 0.18s;
}
#modal-body button:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-magenta);
  color: var(--neon-magenta);
  text-shadow: 0 0 8px var(--neon-magenta);
  box-shadow: 0 0 12px rgba(255, 16, 240, 0.45);
}
#modal-body .system-card {
  background: rgba(40, 0, 60, 0.40);
  border-left: 3px solid var(--neon-violet);
}
#modal-body .system-card:hover {
  background: rgba(255, 16, 240, 0.12);
  border-left-color: var(--neon-magenta);
  box-shadow: -3px 0 12px rgba(255, 16, 240, 0.45);
}
#modal-body .system-card.current { border-left-color: var(--neon-yellow); }
#modal-body .system-card .sname {
  color: #fff;
  text-shadow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-cyan);
}
#modal-body .system-card .sdesc { color: var(--neon-violet); }

/* === REENTRY WARNING === */
#reentry-warning {
  background: rgba(40, 0, 12, 0.78);
  border: 1px solid var(--red);
  color: var(--red);
  text-shadow: 0 0 8px var(--red), 0 0 16px var(--neon-yellow);
}

/* === SURVIVAL HUD — superficie con rover === */
#survival-hud {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  background: rgba(10, 0, 24, 0.90);
  border: 1px solid var(--neon-violet);
  border-radius: 4px;
  box-shadow: 0 0 26px rgba(185, 74, 255, 0.45), inset 0 0 16px rgba(0, 240, 255, 0.08);
  font-family: 'Share Tech Mono', monospace;
  z-index: 50;
}
#survival-hud.hidden { display: none; }
#survival-hud .surv-block {
  display: flex; flex-direction: column; align-items: center;
  min-width: 110px;
}
#survival-hud .surv-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--neon-violet);
  text-shadow: 0 0 4px var(--neon-violet);
  margin-bottom: 4px;
}
#survival-hud .surv-value {
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    -1px 0 0 var(--neon-magenta),
     1px 0 0 var(--neon-cyan),
     0 0 8px rgba(0, 240, 255, 0.7);
}
#survival-hud .surv-value.critical {
  color: var(--red);
  text-shadow: 0 0 10px var(--red), 0 0 20px var(--neon-yellow);
  animation: surv-blink 0.9s ease-in-out infinite;
}
#survival-hud .surv-bar {
  width: 100px;
  height: 5px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(185, 74, 255, 0.50);
  margin-top: 5px;
  overflow: hidden;
}
#survival-hud .surv-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-lime));
  transition: width 0.25s ease-out;
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 14px var(--neon-lime);
}
#survival-hud .surv-bar-fill.critical {
  background: linear-gradient(90deg, var(--red), var(--neon-orange));
  box-shadow: 0 0 10px var(--red), 0 0 16px var(--neon-orange);
}
#survival-hud .surv-sep {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, var(--neon-magenta), transparent);
  opacity: 0.7;
}
@keyframes surv-blink { 50% { opacity: 0.45; } }

/* === STORM WARNING === */
#storm-warning {
  position: fixed;
  top: 168px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  background: rgba(28, 0, 40, 0.92);
  border: 1px solid var(--neon-orange);
  border-radius: 4px;
  color: var(--neon-yellow);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--neon-orange), 0 0 16px var(--neon-yellow);
  box-shadow: 0 0 24px rgba(255, 122, 0, 0.55);
  z-index: 50;
  animation: storm-pulse 1.4s ease-in-out infinite;
}
#storm-warning.hidden { display: none; }
#storm-warning.active {
  background: rgba(40, 0, 14, 0.95);
  border-color: var(--red);
  color: var(--neon-yellow);
  text-shadow: 0 0 10px var(--red), 0 0 20px var(--neon-yellow);
  box-shadow: 0 0 36px rgba(255, 34, 85, 0.75);
  animation: storm-pulse 0.7s ease-in-out infinite;
}
@keyframes storm-pulse { 50% { opacity: 0.55; } }

/* === ESTADO CRÍTICO — re-tinta a rojo neón === */
.value.critical,
#inv-panel .row span.critical,
.row.critical span:last-child {
  color: var(--red) !important;
  text-shadow:
    0 0 8px var(--red),
    0 0 16px var(--neon-yellow),
    -1px 0 0 var(--neon-magenta),
     1px 0 0 var(--neon-yellow) !important;
}
.bar-fill.critical {
  background: linear-gradient(90deg, var(--neon-orange), var(--red)) !important;
  box-shadow: 0 0 14px var(--red), 0 0 24px var(--neon-orange) !important;
}
.panel.critical {
  border-color: rgba(255, 34, 85, 0.65);
  box-shadow:
    0 0 22px rgba(255, 34, 85, 0.55),
    0 0 44px rgba(255, 122, 0, 0.30);
}
.panel.critical::before, .panel.critical::after {
  border-color: var(--red);
  filter: drop-shadow(0 0 5px var(--red));
}

/* === SCANLINE DE BOOT — magenta en vez de verde === */
#hud.boot::before {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 16, 240, 0.0) 47%,
    rgba(255, 16, 240, 0.55) 49%,
    rgba(0, 240, 255, 0.55) 51%,
    rgba(0, 240, 255, 0.0) 53%,
    transparent 100%);
}

/* =================================================================
   MODERNIZACIÓN v3 — anti-overlap, tipografía limpia, menos vintage
   Inter + JetBrains Mono · esquinas suaves · glows reducidos
   z-index ordenado para evitar superposiciones
   ================================================================= */

/* === TIPOGRAFÍA MODERNA === */
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}
#hud { font-family: 'Inter', system-ui, sans-serif; }

/* Cualquier cosa que antes era VT323 (vintage CRT) → JetBrains Mono moderno */
.value,
.ap-phase,
.ap-row span:last-child,
.ob-row b,
#padre-text,
.tw-value,
.wp-distance,
#message h2,
#modal-title,
#modal-body h3,
#modal-body .system-card .sname,
#descent-hud .d-altitude,
#descent-hud .d-alt-value,
#descent-hud .d-alt-unit,
#descent-hud .d-sub-value,
.boot-pct {
  font-family: 'JetBrains Mono', 'Share Tech Mono', ui-monospace, monospace;
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.label {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 2.4px;
}

/* === FUERA EFECTOS VINTAGE === */
body::after { display: none !important; }            /* scanlines del CRT */
.value { animation: none; }                          /* holo-flicker que titilaba todo */
.value.tick { animation: tick-pop 0.35s ease-out; }  /* preservamos el feedback al cambiar */
.bar::after { display: none; }                       /* shimmer interno (ruido visual) */

/* === GLOW MÁS SUAVE EN VALORES (sin RGB-split agresivo) === */
.value {
  text-shadow:
    0 0 6px rgba(0, 240, 255, 0.55),
    0 0 14px rgba(255, 16, 240, 0.35);
  letter-spacing: 0.5px;
}

/* === ESQUINAS SUAVES === */
.panel,
#prompt,
#autopilot-hud,
#orbital-panel,
#descent-hud,
#autoland-available,
#cam-label,
#timewarp-hud,
#padre-dialog,
#mute-btn, #skip-tutorial,
#message,
#modal-box,
#survival-hud,
#storm-warning,
#reentry-warning {
  border-radius: 10px;
}
.side-panel { border-radius: 12px; }
.bar, .ap-bar, #descent-hud .d-track, #survival-hud .surv-bar { border-radius: 999px; }
.bar-fill, .ap-bar-fill, #descent-hud .d-track-fill, #survival-hud .surv-bar-fill { border-radius: 999px; }

/* Corner brackets más finos y sutiles (en lugar de vintage HUD militar) */
.panel::before, .panel::after {
  width: 6px; height: 6px;
  border-width: 1px;
  opacity: 0.55;
}
.panel:hover::before, .panel:hover::after { width: 8px; opacity: 0.95; }

/* === Z-INDEX ORDENADO === */
#hud-top, #hud-bottom { z-index: 10; }
.side-panel           { z-index: 12; }
#orbital-panel        { z-index: 14; }
#descent-hud          { z-index: 18; }
#survival-hud         { z-index: 18; }
#storm-warning        { z-index: 19; }
#timewarp-hud         { z-index: 20; }
#waypoint, #prograde-marker, #retrograde-marker { z-index: 22; }
#prompt, #autoland-available, #cam-label        { z-index: 26; }
#autopilot-hud, #padre-dialog                   { z-index: 30; }
#mute-btn, #skip-tutorial                       { z-index: 40; }
#message              { z-index: 60; }
#modal                { z-index: 200; }
#error-overlay        { z-index: 99999; }

/* =================================================================
   REPOSICIÓN — fin de las superposiciones
   ================================================================= */

/* Top-bar: dejamos lugar a la derecha para el cluster de botones (mute + skip-tutorial) */
#hud-top { right: 220px; padding: 6px 6px; gap: 6px; }

/* Botones del sistema → esquina superior derecha, agrupados (top:8) */
#mute-btn {
  top: 8px; right: 8px;
  padding: 6px 10px;
  font-size: 10px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 600;
}
#skip-tutorial {
  top: 8px; right: 96px;
  padding: 6px 10px;
  font-size: 10px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 600;
}

/* Time-warp: chip compacto a la derecha, justo debajo del cluster de botones,
   alto < 28px para no chocar con el inv-panel (que empieza en top:70) */
#timewarp-hud {
  top: 40px; left: auto; right: 8px;
  transform: none;
  padding: 3px 10px;
  gap: 6px;
  font-size: 11px;
  line-height: 1.1;
}
.tw-icon  { font-size: 12px; }
.tw-value { font-size: 14px; letter-spacing: 1px; }
.tw-help  { font-size: 9px; }

/* Centro: descent y survival comparten el mismo slot (son mutuamente exclusivos) */
#descent-hud  { top: 60px; }
#survival-hud { top: 60px; }

/* Storm-warning va DEBAJO del survival-hud (que mide ~92px de alto) */
#storm-warning { top: 162px; }

/* Orbital panel: a la izquierda del inv-panel, alineado con éste, sin cruzarse con los botones del sistema */
#orbital-panel {
  top: 60px;
  right: 184px;
  width: 226px;
}

/* Autopilot y PADRE: bien por encima del bottom-bar (que con la lista de controles puede medir ~200px) */
#autopilot-hud { bottom: 220px; right: 184px; width: 320px; }
#padre-dialog  { bottom: 220px; left: 184px; width: 360px; }

/* Prompt de proximidad — por encima de autopilot/padre */
#prompt { bottom: 320px; }

/* === SOMBRAS / GLOWS REDUCIDOS — menos vintage neón saturado === */
.panel {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 16, 240, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 16, 240, 0.30);
  background: rgba(10, 0, 22, 0.50);
}
.panel:hover {
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 240, 255, 0.50),
    0 0 22px rgba(255, 16, 240, 0.30);
  border-color: rgba(0, 240, 255, 0.55);
}

.side-panel {
  background: rgba(10, 0, 22, 0.50);
  border-color: rgba(185, 74, 255, 0.30);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(185, 74, 255, 0.10);
}
.side-panel:hover {
  border-color: rgba(255, 16, 240, 0.60);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 16, 240, 0.45),
    0 0 22px rgba(255, 16, 240, 0.25);
}

/* === RADAR / ORBITAL MAP — borde más limpio === */
#radar, #orbital-map {
  box-shadow:
    0 0 0 1px rgba(255, 16, 240, 0.40),
    0 0 18px rgba(255, 16, 240, 0.30),
    inset 0 0 28px rgba(185, 74, 255, 0.30);
}
#orbital-map {
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.50),
    0 0 18px rgba(0, 240, 255, 0.30),
    inset 0 0 28px rgba(0, 140, 220, 0.30);
}

/* === BOTONES MÁS PROLIJOS === */
#mute-btn, #skip-tutorial {
  background: rgba(10, 0, 22, 0.70);
  border: 1px solid rgba(255, 16, 240, 0.55);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 16, 240, 0.10);
  text-shadow: none;
  color: #fff;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, color 0.18s;
}
#mute-btn:hover, #skip-tutorial:hover {
  background: rgba(20, 4, 42, 0.85);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 240, 255, 0.55),
    0 0 18px rgba(0, 240, 255, 0.40);
}

/* === TIME-WARP visual chip moderno === */
#timewarp-hud {
  background: rgba(10, 0, 22, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.55);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 240, 255, 0.20);
}
.tw-value, .tw-icon { text-shadow: 0 0 8px rgba(0, 240, 255, 0.6); }

/* === DESCENT HUD: glow más calmo, números más limpios === */
#descent-hud {
  background: rgba(10, 0, 22, 0.72);
  border: 1px solid rgba(0, 240, 255, 0.55);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 240, 255, 0.18),
    0 0 28px rgba(0, 240, 255, 0.18);
}
#descent-hud .d-alt-value {
  text-shadow:
    0 0 10px rgba(0, 240, 255, 0.55),
    0 0 22px rgba(255, 16, 240, 0.25);
  letter-spacing: 1px;
  font-size: 52px;
}

/* === ORBITAL PANEL — cleaner === */
#orbital-panel {
  background: rgba(10, 0, 22, 0.72);
  border: 1px solid rgba(255, 16, 240, 0.35);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 16, 240, 0.12);
}

/* === SURVIVAL HUD === */
#survival-hud {
  background: rgba(10, 0, 22, 0.78);
  border: 1px solid rgba(185, 74, 255, 0.55);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(185, 74, 255, 0.18);
}
#survival-hud .surv-value {
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.60);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* === STORM === */
#storm-warning {
  background: rgba(28, 0, 40, 0.85);
  border: 1px solid rgba(255, 122, 0, 0.65);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 122, 0, 0.18),
    0 0 18px rgba(255, 122, 0, 0.30);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
}

/* === MESSAGE / MODAL más limpios === */
#message {
  background: rgba(10, 0, 22, 0.92);
  border: 1px solid rgba(255, 16, 240, 0.55);
  box-shadow:
    0 12px 50px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 16, 240, 0.20),
    0 0 30px rgba(255, 16, 240, 0.28);
}
#message h2 {
  text-shadow: 0 0 10px rgba(255, 16, 240, 0.55), 0 0 18px rgba(0, 240, 255, 0.25);
  letter-spacing: 1.5px;
}
#modal-box {
  border: 1px solid rgba(255, 16, 240, 0.45);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 16, 240, 0.18),
    0 0 50px rgba(255, 16, 240, 0.25);
}
#modal-title {
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.6);
  letter-spacing: 2px;
  font-weight: 600;
}

/* === PADRE DIALOG === */
#padre-dialog {
  background: rgba(10, 0, 22, 0.85);
  border: 1px solid rgba(185, 74, 255, 0.55);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(185, 74, 255, 0.18),
    0 0 20px rgba(185, 74, 255, 0.30);
}

/* === AUTOPILOT === */
#autopilot-hud {
  background: rgba(10, 0, 22, 0.85);
  border: 1px solid rgba(185, 74, 255, 0.55);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(185, 74, 255, 0.18),
    0 0 22px rgba(185, 74, 255, 0.30);
}

/* === PROMPT === */
#prompt {
  background: rgba(10, 0, 22, 0.88);
  border: 1px solid rgba(255, 230, 0, 0.55);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 230, 0, 0.18);
}

/* === CAM LABEL — chip más sutil === */
#cam-label {
  background: rgba(10, 0, 22, 0.88);
  border: 1px solid rgba(0, 240, 255, 0.65);
  font-size: 14px;
  letter-spacing: 2.5px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
  padding: 8px 16px;
}

/* === AUTOLAND === */
#autoland-available {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  background: rgba(10, 0, 22, 0.85);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 230, 0, 0.30),
    0 0 14px rgba(255, 230, 0, 0.30);
}

/* === Responsive: pantallas chicas === */
@media (max-width: 900px) {
  #autopilot-hud { width: 280px; right: 10px; }
  #padre-dialog  { width: 300px; left: 10px; }
  #orbital-panel { width: 200px; right: 184px; }
  #hud-top       { grid-template-columns: 180px 1fr 180px; }
}
@media (max-width: 700px) {
  #orbital-panel { display: none; }
  #autopilot-hud, #padre-dialog { display: none; }
  #hud-top       { right: 96px; grid-template-columns: 1fr; }
  #hud-top .panel.center, #hud-top .panel.right { display: none; }
}

/* ============================================================
   HUD MODO ARCADE — INTERCEPTOR
   Estética retro-arcade rojo neón sobre negro, distinto al HUD
   sobrio del simulador. Solo visible cuando la caza está
   desplegada. Ignora eventos del mouse para no interferir.
   ============================================================ */
#arcade-hud {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
  font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
  color: #ff5a3a;
  text-shadow: 0 0 6px rgba(255, 90, 60, 0.6);
}
#arcade-hud.hidden { display: none !important; }
.arcade-hidden { display: none !important; }
/* Cuando el arcade esta activo, atenuamos el HUD del simulador
   en lugar de borrarlo (volvemos a verlo limpio al regresar). */
#hud.arcade-hidden { display: none !important; }

/* Cruceta arcade — anillo + cruz + dot central */
#arc-crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
}
#arc-crosshair .ax-ring {
  position: absolute; inset: 0;
  border: 1.5px solid rgba(255, 90, 60, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 90, 60, 0.45), inset 0 0 8px rgba(255, 90, 60, 0.2);
  animation: arcRingPulse 2.4s ease-in-out infinite;
}
#arc-crosshair .ax-dot {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px;
  background: #ff8a6a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255, 138, 106, 0.9);
}
#arc-crosshair .ax-tick {
  position: absolute;
  background: rgba(255, 90, 60, 0.9);
  box-shadow: 0 0 6px rgba(255, 90, 60, 0.6);
}
#arc-crosshair .ax-tick.t { top: -10px;    left: calc(50% - 1px); width: 2px;  height: 8px; }
#arc-crosshair .ax-tick.b { bottom: -10px; left: calc(50% - 1px); width: 2px;  height: 8px; }
#arc-crosshair .ax-tick.l { left: -10px;   top: calc(50% - 1px);  height: 2px; width: 8px; }
#arc-crosshair .ax-tick.r { right: -10px;  top: calc(50% - 1px);  height: 2px; width: 8px; }

@keyframes arcRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* Paneles laterales — esquina-cut sci-fi */
#arc-top-left, #arc-top-right {
  position: absolute; top: 18px;
  background: linear-gradient(180deg, rgba(20, 4, 0, 0.72), rgba(10, 2, 0, 0.55));
  border: 1px solid rgba(255, 90, 60, 0.55);
  padding: 12px 16px;
  min-width: 220px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
#arc-top-left  { left: 18px; }
#arc-top-right { right: 18px; text-align: right; }

#arc-top-left .arc-label,
#arc-top-right .arc-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: #ffaa88;
  margin-bottom: 6px;
  opacity: 0.85;
}
.arc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
}
#arc-top-right .arc-row { justify-content: flex-end; }
.arc-k {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 170, 136, 0.7);
}
.arc-v {
  font-size: 16px;
  font-weight: 600;
  color: #ff7a4a;
}
.arc-v.big {
  font-size: 26px;
  font-family: 'VT323', 'Share Tech Mono', monospace;
  color: #ffcc66;
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.7);
  letter-spacing: 2px;
}

.arc-bar {
  width: 100%;
  height: 6px;
  background: rgba(80, 20, 8, 0.7);
  border: 1px solid rgba(255, 90, 60, 0.4);
  margin-top: 4px;
  margin-bottom: 8px;
}
.arc-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff3a1a, #ffaa44);
  box-shadow: 0 0 6px rgba(255, 100, 60, 0.7);
  transition: width 0.2s ease-out;
}

.arc-boost {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  border: 1px solid rgba(255, 90, 60, 0.5);
}
.arc-boost.ready {
  color: #ffcc66;
  border-color: rgba(255, 200, 80, 0.7);
  text-shadow: 0 0 6px rgba(255, 200, 80, 0.8);
}
.arc-boost.active {
  color: #66eeff;
  border-color: rgba(100, 220, 255, 0.8);
  background: rgba(20, 60, 90, 0.5);
  text-shadow: 0 0 8px rgba(100, 220, 255, 0.9);
  animation: arcBoostBlink 0.4s ease-in-out infinite;
}
.arc-boost.cooldown {
  color: rgba(180, 100, 80, 0.7);
  border-color: rgba(180, 100, 80, 0.4);
}

@keyframes arcBoostBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

#arc-controls {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 2, 0, 0.7);
  border: 1px solid rgba(255, 90, 60, 0.4);
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(255, 170, 136, 0.85);
}
#arc-controls b {
  color: #ffcc66;
  font-weight: 600;
}
#arc-controls div + div { margin-top: 3px; }

#arc-hint {
  position: absolute; bottom: 90px; left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 60, 30, 0.8);
  border: 1px solid rgba(100, 255, 130, 0.6);
  color: #aaffbb;
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(100, 255, 130, 0.7);
  animation: arcHintPulse 1.4s ease-in-out infinite;
}
@keyframes arcHintPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.65; transform: translateX(-50%) scale(0.98); }
}

#arc-flash {
  position: absolute; top: 32%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 38px;
  letter-spacing: 4px;
  color: #ffcc66;
  text-shadow: 0 0 16px rgba(255, 200, 80, 0.9), 0 0 32px rgba(255, 100, 60, 0.6);
  animation: arcFlashIn 0.4s ease-out;
}
@keyframes arcFlashIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Compactar HUD arcade en pantallas chicas */
@media (max-width: 900px) {
  #arc-top-left, #arc-top-right { min-width: 160px; padding: 8px 12px; }
  .arc-v.big { font-size: 22px; }
  #arc-controls { font-size: 10px; padding: 6px 12px; }
}

/* ============================================================
   AAA EXTENSIONS — Línea de juego "Operación Carroñero"
   ============================================================ */

.arc-ammo {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  border: 1px solid rgba(255, 170, 80, 0.4);
  color: #ffaa66;
}

#arc-combo {
  position: absolute;
  left: 50%;
  top: calc(50% + 80px);
  transform: translate(-50%, 0);
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 28px;
  letter-spacing: 4px;
  color: #ffcc66;
  text-shadow: 0 0 10px rgba(255, 200, 80, 0.85), 0 0 24px rgba(255, 100, 60, 0.45);
  pointer-events: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#arc-combo.pop { transform: translate(-50%, 0) scale(1.25); }

#arc-reactors {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 0, 0, 0.7);
  border: 1px solid rgba(80, 255, 180, 0.5);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 2px;
}
.arc-rdot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(80, 255, 180, 0.6);
  background: rgba(20, 0, 0, 0.5);
  transition: background 0.3s, box-shadow 0.3s;
}
.arc-rdot.alive {
  background: #44ffaa;
  box-shadow: 0 0 8px rgba(80, 255, 180, 0.9), inset 0 0 4px rgba(255, 255, 255, 0.4);
  animation: arcReactorPulse 1.6s ease-in-out infinite;
}
@keyframes arcReactorPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(80, 255, 180, 0.9); }
  50%      { box-shadow: 0 0 14px rgba(120, 255, 200, 1); }
}
.arc-rlabel {
  margin-left: 6px;
  color: #88ffcc;
  letter-spacing: 3px;
  font-weight: 600;
}

#arc-subtitle {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  max-width: 70%;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #ffcc99;
  text-shadow: 0 0 8px rgba(255, 180, 100, 0.6), 0 2px 6px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 22px;
  border-left: 3px solid #ff6633;
  animation: arcSubIn 0.4s ease-out;
}
@keyframes arcSubIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#arc-wave-titlebox {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  animation: arcWaveIn 4.5s ease-out;
}
@keyframes arcWaveIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.85); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.95); }
}
#arc-wave-sub {
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 18px;
  letter-spacing: 6px;
  color: #ffaa66;
}
#arc-wave-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #ffeebb;
  text-shadow:
    0 0 16px rgba(255, 200, 80, 0.85),
    0 0 32px rgba(255, 100, 60, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.9);
  margin-top: 4px;
}

#arc-pickup {
  position: absolute;
  left: 50%;
  top: calc(50% + 60px);
  transform: translateX(-50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  letter-spacing: 4px;
  font-weight: 700;
  text-shadow: 0 0 10px currentColor;
  animation: arcPickupIn 1.4s ease-out;
}
@keyframes arcPickupIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-10px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

#arc-lockbox {
  position: absolute;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: filter 0.15s;
}
.arc-lock-corners { position: absolute; inset: 0; }
.lc {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 200, 60, 0.85);
}
.lc-tl { top: 0;     left: 0;     border-right: none; border-bottom: none; }
.lc-tr { top: 0;     right: 0;    border-left: none; border-bottom: none; }
.lc-bl { bottom: 0;  left: 0;     border-right: none; border-top: none; }
.lc-br { bottom: 0;  right: 0;    border-left: none; border-top: none; }
#arc-lockbox.locked .lc {
  border-color: #ff3333;
  animation: arcLockBlink 0.25s linear infinite;
}
@keyframes arcLockBlink {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50%      { box-shadow: 0 0 8px rgba(255, 60, 60, 0.85); }
}
.arc-lockprog {
  position: absolute;
  bottom: -10px; left: 0;
  width: 100%; height: 3px;
  background: rgba(255, 200, 60, 0.3);
  transform-origin: left;
  transform: scaleX(0);
}
#arc-lockbox.locked .arc-lockprog {
  background: rgba(255, 60, 60, 0.85);
  transform: scaleX(1) !important;
}
.arc-locklabel {
  position: absolute;
  bottom: -28px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: 2px;
  color: rgba(255, 200, 60, 0.95);
  white-space: nowrap;
}
#arc-lockbox.locked .arc-locklabel {
  color: #ff5555;
  text-shadow: 0 0 6px rgba(255, 60, 60, 0.8);
}

/* ============================================================
   Pantalla VICTORIA / DERROTA
   ============================================================ */
#arc-victory, #arc-defeat {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: arcVictIn 0.6s ease-out;
}
@keyframes arcVictIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.arc-vfx-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 220, 180, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(20, 5, 0, 0.92) 100%);
}
.arc-vfx-bg.defeat {
  background:
    radial-gradient(ellipse at center, rgba(255, 60, 30, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(40, 0, 0, 0.95) 100%);
}
.arc-vict-content {
  position: relative;
  text-align: center;
  z-index: 1;
}
.arc-vict-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 6px;
  color: #ffaa66;
  margin-bottom: 14px;
  animation: arcVictSubIn 0.8s ease-out backwards 0.2s;
}
@keyframes arcVictSubIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.arc-vict-content h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 8px;
  color: #ffeebb;
  text-shadow:
    0 0 24px rgba(255, 200, 80, 0.85),
    0 0 48px rgba(255, 100, 60, 0.55);
  margin: 0 0 12px;
  animation: arcVictTitleIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards 0.4s;
}
@keyframes arcVictTitleIn {
  0% { opacity: 0; transform: scale(0.6); letter-spacing: 32px; filter: blur(20px); }
  100% { opacity: 1; transform: scale(1); letter-spacing: 8px; filter: blur(0); }
}
.arc-vict-line {
  width: 280px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff7733, transparent);
  margin: 16px auto 30px;
  animation: arcVictLineIn 0.8s ease-out backwards 1.0s;
}
@keyframes arcVictLineIn {
  0% { width: 0; opacity: 0; }
  100% { width: 280px; opacity: 1; }
}
.arc-vict-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin: 30px 0;
  animation: arcVictStatsIn 0.6s ease-out backwards 1.2s;
}
@keyframes arcVictStatsIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.arc-vstat {
  text-align: center;
  min-width: 140px;
}
.arc-vstat-k {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: #aaaa88;
  margin-bottom: 6px;
}
.arc-vstat-v {
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 36px;
  color: #ffcc66;
  text-shadow: 0 0 10px rgba(255, 200, 80, 0.7);
}
.arc-vstat-v.big {
  font-size: 56px;
  color: #ffeebb;
  text-shadow: 0 0 14px rgba(255, 220, 100, 0.85);
}
.arc-vict-hint {
  margin-top: 30px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  letter-spacing: 4px;
  color: #88aaff;
  animation: arcHintBlink 1.5s ease-in-out infinite, arcVictStatsIn 0.6s ease-out backwards 2.0s;
}
@keyframes arcHintBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ============================================================
   Menú de misiones
   ============================================================ */
#missions-menu {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
#missions-menu.hidden { display: none !important; }
.mm-bg {
  position: absolute; inset: 0;
  background: rgba(2, 5, 12, 0.86);
  backdrop-filter: blur(8px);
  animation: arcVictIn 0.3s ease-out;
}
.mm-box {
  position: relative;
  width: min(900px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg, rgba(20, 25, 35, 0.95), rgba(10, 12, 20, 0.96));
  border: 1px solid rgba(255, 170, 80, 0.55);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 100, 60, 0.18);
  font-family: 'Inter', system-ui, sans-serif;
  color: #e8e8f0;
  animation: arcVictTitleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 170, 80, 0.4);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 4px;
  color: #ffcc66;
  background: rgba(255, 100, 60, 0.06);
}
#mm-close {
  background: transparent;
  border: 1px solid rgba(255, 170, 80, 0.4);
  color: #ffcc66;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
}
#mm-close:hover { background: rgba(255, 100, 60, 0.2); }
.mm-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.mm-card {
  position: relative;
  padding: 22px 24px 24px;
  background: linear-gradient(160deg, rgba(40, 20, 10, 0.7), rgba(20, 10, 5, 0.7));
  border: 1px solid rgba(255, 130, 60, 0.5);
}
.mm-card-alt {
  background: linear-gradient(160deg, rgba(20, 30, 50, 0.7), rgba(10, 15, 30, 0.7));
  border: 1px solid rgba(80, 160, 255, 0.4);
}
.mm-card-tag {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: #ffaa66;
  background: rgba(255, 100, 60, 0.18);
  padding: 4px 8px;
  margin-bottom: 12px;
}
.mm-card-tag.alt {
  color: #88bbff;
  background: rgba(80, 160, 255, 0.2);
}
.mm-card h2 {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffeebb;
}
.mm-card-alt h2 { color: #cce0ff; }
.mm-card-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: #aa9988;
  margin-bottom: 12px;
}
.mm-card p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #c8c8d4;
}
.mm-bullets { list-style: none; padding: 0; margin: 0 0 16px; }
.mm-bullets li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 12px;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 1px;
  color: #ffcc99;
  border-bottom: 1px solid rgba(255, 170, 80, 0.1);
}
.mm-bullets li::before {
  content: '▸';
  position: absolute;
  left: 4px;
  color: #ff7744;
}
.mm-launch {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(90deg, #ff5522, #ffaa44);
  color: #1a0a00;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.1s, box-shadow 0.1s;
}
.mm-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 130, 60, 0.4);
}
.mm-launch.alt {
  background: linear-gradient(90deg, #4477ff, #66ccff);
  color: #001020;
}
.mm-launch.alt:hover { box-shadow: 0 8px 20px rgba(80, 160, 255, 0.4); }
.mm-footer {
  padding: 12px 24px;
  border-top: 1px solid rgba(255, 170, 80, 0.2);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #998877;
  text-align: center;
}

@media (max-width: 760px) {
  .mm-body { grid-template-columns: 1fr; }
  .arc-vict-content h1 { font-size: 48px; letter-spacing: 4px; }
  .arc-vict-stats { gap: 16px; }
  .arc-vstat-v { font-size: 28px; }
  .arc-vstat-v.big { font-size: 38px; }
  #arc-wave-title { font-size: 36px; letter-spacing: 4px; }
}

/* ============================================================
   POLISH PASS — feedback de combate (damage flash, hit marker,
   killfeed, boss bar, damage numbers)
   ============================================================ */

/* Damage flash: viñeta interna roja que se enciende al recibir golpe */
#arc-damage-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  background:
    radial-gradient(ellipse at center,
      transparent 35%,
      rgba(255, 30, 20, 0.35) 80%,
      rgba(255, 50, 30, 0.7) 100%);
  mix-blend-mode: screen;
}

/* Hit marker — cruz blanca corta en el centro */
#arc-hitmarker {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}
.hm-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}
.hm-line.a { left: 0;     top: 50%;   width: 9px;  height: 2px; transform: translateY(-50%); }
.hm-line.b { right: 0;    top: 50%;   width: 9px;  height: 2px; transform: translateY(-50%); }
.hm-line.c { top: 0;      left: 50%;  height: 9px; width: 2px;  transform: translateX(-50%); }
.hm-line.d { bottom: 0;   left: 50%;  height: 9px; width: 2px;  transform: translateX(-50%); }

/* Boss health bar — full width arriba */
#arc-bossbar {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  width: min(60vw, 700px);
  pointer-events: none;
  text-align: center;
  font-family: 'Share Tech Mono', monospace;
  animation: arcSubIn 0.4s ease-out;
}
#arc-bossbar-label {
  font-size: 13px;
  letter-spacing: 6px;
  color: #ff6655;
  text-shadow: 0 0 8px rgba(255, 100, 80, 0.7);
  margin-bottom: 6px;
  font-weight: 700;
}
.arc-bossbar-track {
  position: relative;
  height: 14px;
  background: rgba(40, 5, 5, 0.85);
  border: 1px solid rgba(255, 80, 60, 0.6);
  box-shadow: 0 0 10px rgba(255, 80, 60, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.6);
}
#arc-bossbar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #aa1122 0%, #ff5533 50%, #ffaa44 100%);
  box-shadow: 0 0 12px rgba(255, 100, 60, 0.7);
  transition: width 0.3s ease-out;
}
#arc-bossbar-hits {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 3px;
  color: #ffaa88;
  opacity: 0.8;
}

/* Killfeed — esquina inferior derecha */
#arc-killfeed {
  position: absolute;
  right: 18px;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Share Tech Mono', monospace;
  pointer-events: none;
  text-align: right;
}
.arc-kf-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(20, 5, 0, 0.7);
  border-left: 2px solid #ff7733;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ffcc99;
  transition: opacity 0.25s;
}
.arc-kf-tag {
  font-size: 14px;
  font-weight: bold;
}
.arc-kf-tag.drone   { color: #ff5566; }
.arc-kf-tag.heavy   { color: #88ff99; }
.arc-kf-tag.fighter { color: #ffaa66; }
.arc-kf-tag.reactor { color: #66ffaa; }
.arc-kf-tag.boss    { color: #ffeeaa; }
.arc-kf-name { flex: 1; }
.arc-kf-score {
  color: #ffdd66;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 200, 80, 0.6);
}

/* Damage numbers flotantes */
#arc-damage-numbers {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.arc-dn {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #ffeebb;
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.85), 0 2px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  animation: arcDmgNum 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.arc-dn.kill {
  color: #ff8866;
  font-size: 28px;
  text-shadow: 0 0 12px rgba(255, 120, 80, 0.95), 0 2px 6px rgba(0, 0, 0, 0.9);
}
@keyframes arcDmgNum {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(0.95); }
}

/* =================================================================
   COMPACT HUD — marco delicado, chat lateral, mapas grandes
   Bloque final que sobreescribe el HUD anterior para un look más
   minimalista. No toca los IDs existentes (los reutiliza), solo
   reposiciona y afina el styling.
   ================================================================= */

:root {
  --hud-line: rgba(106, 220, 255, 0.32);
  --hud-line-soft: rgba(106, 220, 255, 0.16);
  --hud-fg: #cfe8ff;
  --hud-fg-dim: rgba(207, 232, 255, 0.55);
  --hud-accent: #ffb84a;
  --hud-bg: rgba(6, 12, 20, 0.62);
}

/* ---------- Marco superior: una sola línea fina ---------- */
#hud-top {
  top: 0; left: 50%; right: auto;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  padding: 6px 18px;
  width: auto;
  max-width: min(96vw, 920px);
  background: var(--hud-bg);
  border: 1px solid var(--hud-line);
  border-top: none;
  border-radius: 0 0 4px 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  font-family: 'Share Tech Mono', monospace;
  box-shadow: 0 0 18px rgba(106, 220, 255, 0.10);
}
#hud-top .panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: left !important;
  font-size: 10px;
}
#hud-top .panel + .panel {
  border-left: 1px solid var(--hud-line-soft) !important;
}
#hud-top .panel::before,
#hud-top .panel::after { display: none !important; }
#hud-top .panel:hover {
  background: transparent !important;
  border-color: var(--hud-line-soft) !important;
}
#hud-top .label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--hud-fg-dim);
  text-transform: uppercase;
}
#hud-top .value {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--hud-fg);
  text-shadow: 0 0 6px rgba(106, 220, 255, 0.6);
  margin: 0;
  line-height: 1;
}
#hud-top .panel.center .value { color: var(--hud-accent); text-shadow: 0 0 6px rgba(255, 184, 74, 0.55); }
#hud-top .sub {
  font-size: 9px;
  color: var(--hud-fg-dim);
}
#hud-top .panel.center,
#hud-top .panel.right { text-align: left !important; }

/* ---------- CHAT-LOG lateral derecho ---------- */
#chat-log {
  position: fixed;
  top: 64px;
  right: 12px;
  width: 280px;
  max-height: calc(100vh - 320px);
  background: linear-gradient(180deg,
    rgba(6, 12, 20, 0.72) 0%,
    rgba(6, 12, 20, 0.45) 100%);
  border: 1px solid var(--hud-line);
  border-radius: 3px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--hud-fg);
  z-index: 32;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 22px rgba(106, 220, 255, 0.10);
  opacity: 0.78;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
}
#chat-log:hover {
  opacity: 1;
  border-color: rgba(106, 220, 255, 0.55);
  box-shadow: 0 0 26px rgba(106, 220, 255, 0.22);
}
#chat-log .chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--hud-line-soft);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--hud-fg-dim);
  text-transform: uppercase;
}
#chat-log .chat-dot {
  width: 6px; height: 6px;
  background: #6affc8;
  border-radius: 50%;
  box-shadow: 0 0 6px #6affc8;
  animation: pulse 1.6s infinite;
}
#chat-log .chat-title { flex: 1; }
#chat-log #chat-clear {
  background: transparent;
  border: none;
  color: var(--hud-fg-dim);
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
  pointer-events: auto;
}
#chat-log #chat-clear:hover { color: var(--hud-accent); }

#chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--hud-line) transparent;
}
#chat-stream::-webkit-scrollbar { width: 4px; }
#chat-stream::-webkit-scrollbar-thumb { background: var(--hud-line); border-radius: 2px; }
#chat-stream::-webkit-scrollbar-track { background: transparent; }

.chat-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 6px 4px;
  border-left: 2px solid var(--hud-line);
  background: rgba(6, 12, 20, 0.4);
  animation: chatLineIn 0.25s ease-out;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-line .who {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--hud-fg-dim);
  text-transform: uppercase;
}
.chat-line .who time {
  margin-left: 6px;
  opacity: 0.6;
  font-family: 'VT323', monospace;
  font-size: 10px;
  letter-spacing: 1px;
}
.chat-line .body {
  font-size: 11px;
  line-height: 1.35;
  color: var(--hud-fg);
}
.chat-line .body :first-child { margin: 0; }
.chat-line .body h2 {
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--hud-accent);
  margin: 0 0 2px;
  text-shadow: 0 0 4px rgba(255, 184, 74, 0.4);
}
.chat-line .body p { margin: 0; }
.chat-line.kind-padre   { border-left-color: #6affa0; }
.chat-line.kind-padre .who { color: #6affa0; }
.chat-line.kind-system  { border-left-color: var(--hud-accent); }
.chat-line.kind-system .who { color: var(--hud-accent); }
.chat-line.kind-cam     { border-left-color: #6adcff; opacity: 0.85; }
.chat-line.kind-cam .who { color: #6adcff; }
.chat-line.kind-warn    { border-left-color: #ff8866; }
.chat-line.kind-warn .who { color: #ff8866; }
.chat-line.fading { opacity: 0.45; transition: opacity 0.5s; }

@keyframes chatLineIn {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Ocultamos el panel viejo de PADRE y el banner #message: ahora van al chat */
#padre-dialog { display: none !important; }
#message      { display: none !important; }

/* ---------- Paneles laterales: discretos cuando ocultos ---------- */
.side-panel {
  top: 60px;
  bottom: auto;
  max-height: calc(100vh - 280px);
  width: 150px;
  font-size: 9px;
  border-radius: 3px;
  background: var(--hud-bg);
  border-color: var(--hud-line-soft);
  opacity: 0.55;
  padding: 6px 8px;
}
.side-panel:hover {
  opacity: 1;
  border-color: var(--hud-line);
  box-shadow: 0 0 16px rgba(106, 220, 255, 0.18);
}
#crew-panel  { left: 12px; }
/* Inventario: lo conservamos pero ahora más discreto, debajo del chat */
#inv-panel {
  right: 12px;
  top: auto;
  bottom: 240px;
  width: 200px;
  max-height: 200px;
  font-size: 9px;
}
#inv-panel .row { font-size: 9px; padding: 1px 0; }
#inv-panel .label { font-size: 8px; }
#inv-panel .separator { margin: 4px 0; }

/* Tripulación: oculta por defecto, fade al alternar */
#crew-panel.hidden {
  display: block;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
#crew-panel:not(.hidden) {
  opacity: 0.55;
  transform: translateX(0);
  transition: opacity 0.25s, transform 0.25s;
}

/* ---------- HUD inferior: mapas grandes en centro, paneles laterales finos ---------- */
#hud-bottom {
  bottom: 10px; left: 10px; right: 10px;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}
#hud-bottom > .panel {
  background: var(--hud-bg);
  border: 1px solid var(--hud-line-soft);
  box-shadow: 0 0 16px rgba(106, 220, 255, 0.08);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 10px;
  opacity: 0.72;
  transition: opacity 0.3s, border-color 0.3s;
}
#hud-bottom > .panel:hover {
  opacity: 1;
  border-color: var(--hud-line);
}
#hud-bottom > .panel::before,
#hud-bottom > .panel::after { display: none !important; }
#hud-bottom > .panel.center {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 1;
  padding: 0;
}

/* Radar y mapa orbital — grandes y delicados */
#hud-bottom .map-pair {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: center;
}
#hud-bottom .map-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#hud-bottom .map-cell .label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--hud-fg-dim);
}
#radar {
  width: 168px !important;
  height: 168px !important;
  border: 1px solid rgba(106, 220, 255, 0.55);
  box-shadow: 0 0 18px rgba(106, 220, 255, 0.20),
              inset 0 0 24px rgba(20, 60, 90, 0.45);
  background: radial-gradient(circle, rgba(8, 24, 36, 0.78), rgba(2, 8, 14, 0.92));
}
#orbital-map {
  width: 168px !important;
  height: 168px !important;
  border: 1px solid var(--hud-line);
  background: rgba(2, 8, 14, 0.78);
  box-shadow: 0 0 18px rgba(106, 220, 255, 0.18);
  border-radius: 2px;
  display: block;
}

/* Controles colapsables: cuando visibles, finos y discretos */
#controls-panel {
  font-size: 9px;
  max-width: 240px;
  opacity: 0.85;
}
#controls-panel .key-list {
  font-size: 9px;
  line-height: 1.4;
  column-count: 1;
}
#controls-panel .key-list b { min-width: 30px; font-size: 9px; }

/* Panel VUELO derecho: comprimido */
#hud-bottom > .panel.right {
  max-width: 200px;
  font-size: 10px;
}
#hud-bottom > .panel.right .label { font-size: 8px; }
#hud-bottom > .panel.right .sub { font-size: 10px; }

/* ---------- Botones flotantes: minúsculos en esquina ---------- */
#mute-btn, #skip-tutorial {
  top: 8px;
  right: 12px;
  font-size: 9px;
  padding: 3px 8px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-line-soft);
  color: var(--hud-fg-dim);
  letter-spacing: 1.5px;
  z-index: 50;
}
#mute-btn:hover, #skip-tutorial:hover {
  border-color: var(--hud-line);
  color: var(--hud-fg);
  background: rgba(6, 12, 20, 0.85);
}
#skip-tutorial { right: 100px; }

/* ---------- Cam-label: lo dejamos visible pero más sutil (también va al chat) ---------- */
#cam-label {
  font-size: 14px;
  padding: 4px 12px;
  letter-spacing: 3px;
  background: rgba(6, 12, 20, 0.78);
  border: 1px solid var(--hud-line);
  box-shadow: 0 0 14px rgba(106, 220, 255, 0.20);
  transform: translate(-50%, -150px);
}

/* ---------- Prompt contextual: más fino ---------- */
#prompt {
  bottom: 230px;
  font-size: 12px;
  padding: 5px 14px;
  background: rgba(6, 12, 20, 0.78);
  border: 1px solid var(--hud-accent);
  box-shadow: 0 0 14px rgba(255, 184, 74, 0.25);
  letter-spacing: 1.5px;
}

/* ---------- Responsive — pantallas chicas ---------- */
@media (max-width: 1100px) {
  #chat-log { width: 220px; }
  #inv-panel { width: 170px; }
  #radar, #orbital-map { width: 140px !important; height: 140px !important; }
}
@media (max-width: 820px) {
  #chat-log { width: 180px; max-height: calc(100vh - 360px); }
  #hud-top { max-width: 96vw; gap: 8px; padding: 4px 10px; }
  #hud-top .panel { padding: 0 4px !important; gap: 4px; }
  #crew-panel { width: 130px; }
  #inv-panel { width: 150px; bottom: 220px; }
}

/* =============================================================
   INFO-CONSOLE — Marco "Age of Empires" (bronce + LCD).
   Frame pesado de bronce con bisel 3D, headers como placas
   grabadas, readouts dentro de pantallas hundidas. Todo el
   lado derecho del HUD vive acá adentro como una sola unidad
   monumental. Sin scan-lines, sin pulsos cyan: estática y
   monolítica.
   ============================================================= */
#info-console {
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: 360px;
  display: flex;
  flex-direction: column;
  /* Truco de doble background con clipping: el LCD oscuro va
     en padding-box (adentro del border), el gradiente bronce
     cubre el border-box (la zona del border). Border es
     transparente para que se vea el bronce. */
  background:
    linear-gradient(180deg, #0a1018 0%, #060810 100%) padding-box,
    linear-gradient(180deg,
      #d8b070 0%,
      #b08648 22%,
      #7c552a 50%,
      #4d3010 78%,
      #2e1a08 100%) border-box;
  border: 8px solid transparent;
  border-radius: 3px;
  font-family: 'Cinzel', 'Space Grotesk', 'Inter', serif;
  color: #e2cfa6;
  z-index: 33;
  pointer-events: auto;
  box-shadow:
    /* doble línea oscura por fuera para perfilar el bronce */
    0 0 0 1px #150a04,
    0 0 0 2px #2e1a08,
    /* sombra ambient externa pesada */
    0 14px 36px rgba(0, 0, 0, 0.85),
    /* línea oscura justo en el borde interno del bronce */
    inset 0 0 0 1px #150a04,
    /* highlight superior y sombra inferior internas (3D) */
    inset 0 2px 0 rgba(255, 230, 180, 0.16),
    inset 0 -2px 6px rgba(0, 0, 0, 0.65),
    /* glow LCD muy sutil */
    inset 0 0 28px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  opacity: 1;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#info-console:hover { opacity: 1; }

/* Anula la scan-line cyan anterior */
#info-console::before {
  content: none;
  display: none;
  animation: none;
  background: none;
}

/* ============ HEADER PRINCIPAL — placa de bronce grabada ============ */
#info-console .ic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 8px;
  background:
    linear-gradient(180deg,
      #d8b070 0%,
      #b58450 22%,
      #8a5e2c 55%,
      #5e3c18 100%);
  color: #1a0e04;
  text-shadow: 0 1px 0 rgba(255, 230, 180, 0.55);
  border-top: 1px solid rgba(255, 230, 180, 0.40);
  border-bottom: 2px solid #150a04;
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(45, 22, 8, 0.50);
}
/* Remache (rivet) izquierdo del header: domo de bronce */
#info-console .ic-dot {
  width: 11px; height: 11px;
  background:
    radial-gradient(circle at 30% 30%,
      #ffe6b0 0%,
      #c89958 35%,
      #6a4220 70%,
      #2e1a08 100%);
  border: 1px solid #150a04;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 220, 180, 0.20);
  flex-shrink: 0;
  animation: none;
}
#info-console .ic-title { flex: 1; }
/* Reloj — pequeña pantalla nameplate hundida en la placa */
#info-console .ic-time {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-weight: 500;
  color: #ffd068;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 5px rgba(255, 200, 80, 0.55);
  background: rgba(20, 12, 4, 0.80);
  border: 1px solid #150a04;
  padding: 2px 7px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.60),
    0 1px 0 rgba(255, 230, 180, 0.20);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  flex-shrink: 0;
}

/* ============ Reset de los hijos para que respeten el frame ============ */
#info-console #orbital-panel,
#info-console #chat-log,
#info-console #inv-panel {
  position: relative;
  top: auto; right: auto; bottom: auto; left: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0;
  padding: 0;
  opacity: 1;
  z-index: auto;
  font-size: inherit;
  transform: none;
}
#info-console #orbital-panel.hidden { display: none !important; }

/* ============ PRIMARY — readouts GIGANTES sobre LCD oscura ============ */
#info-console .ic-primary {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background:
    radial-gradient(ellipse at top,
      rgba(34, 22, 6, 0.40) 0%,
      rgba(0, 0, 0, 0.55) 100%);
  border-bottom: 2px solid #150a04;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.60),
    inset 0 -1px 0 rgba(255, 220, 180, 0.10);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
/* Cada bigstat es una pantalla LCD hundida con marco oscuro */
#info-console .ic-bigstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px 12px 9px;
  background:
    linear-gradient(180deg, rgba(0, 6, 12, 0.85), rgba(0, 0, 4, 0.95));
  border: 1px solid #2a1a08;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 220, 180, 0.06),
    0 1px 0 rgba(255, 220, 180, 0.10);
}
#info-console .ic-big-k {
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 3px;
  color: #b8965a;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
#info-console .ic-big-v {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace;
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  color: #6affc8;
  text-shadow:
    0 0 10px rgba(106, 255, 200, 0.85),
    0 0 22px rgba(106, 255, 200, 0.40);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
#info-console .ic-bigstat--alt .ic-big-v {
  color: #ffd068;
  text-shadow:
    0 0 10px rgba(255, 200, 80, 0.85),
    0 0 22px rgba(255, 200, 80, 0.40);
}

/* statline = mini-pantalla hundida horizontal */
#info-console .ic-statline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 10px;
  background:
    linear-gradient(180deg, rgba(0, 4, 10, 0.75), rgba(0, 0, 4, 0.85));
  border: 1px solid #2a1a08;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 220, 180, 0.06);
}
#info-console .ic-mini-k {
  color: #b8965a;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-size: 9px;
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}
#info-console .ic-mini-v {
  color: #ffd068;
  font-family: 'JetBrains Mono', monospace;
  text-shadow: 0 0 5px rgba(255, 200, 80, 0.50);
  font-feature-settings: 'tnum' 1;
}
#info-console .ic-mini-sep {
  color: rgba(184, 150, 90, 0.50);
  margin: 0 2px;
}

/* ============ Headers de sección — placas de bronce más finas ============ */
#info-console .ic-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 6px;
  background:
    linear-gradient(180deg,
      #b58450 0%,
      #8a5e2c 50%,
      #5e3c18 100%);
  color: #1a0e04;
  text-shadow: 0 1px 0 rgba(255, 230, 180, 0.45);
  border-top: 1px solid rgba(255, 230, 180, 0.35);
  border-bottom: 2px solid #150a04;
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.40),
    inset 0 -1px 0 rgba(45, 22, 8, 0.45);
  flex-shrink: 0;
}
#info-console .ic-section-tag {
  color: #2e1a08;
  font-size: 12px;
  flex-shrink: 0;
  text-shadow: 0 1px 0 rgba(255, 230, 180, 0.55);
}
/* Rivet vacío para .chat-dot dentro del header de sección */
#info-console .ic-section-head .chat-dot {
  width: 9px; height: 9px;
  background:
    radial-gradient(circle at 30% 30%,
      #ffe6b0 0%,
      #c89958 35%,
      #6a4220 70%,
      #2e1a08 100%);
  border: 1px solid #150a04;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50);
  flex-shrink: 0;
  animation: none;
}
#info-console .ic-section-title {
  flex: 1;
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-weight: 700;
}
#info-console #chat-clear {
  background: rgba(20, 12, 4, 0.55);
  border: 1px solid #150a04;
  color: #d8b070;
  font-size: 11px;
  cursor: pointer;
  padding: 0 5px;
  pointer-events: auto;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
#info-console #chat-clear:hover {
  color: #ffe6b0;
  background: rgba(50, 30, 10, 0.85);
}

/* ============ Body de cada sección sobre LCD oscura ============ */
#info-console #orbital-panel .ob-body,
#info-console #inv-panel .ic-inv-body {
  padding: 7px 12px 10px;
  background:
    radial-gradient(ellipse at top,
      rgba(34, 22, 6, 0.30) 0%,
      rgba(0, 0, 0, 0.45) 100%);
  position: relative;
  z-index: 2;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* ORBITAL rows — texto bronce + valores ámbar grabados */
#info-console #orbital-panel .ob-row {
  font-size: 10.5px;
  padding: 1.5px 0;
  display: flex;
  justify-content: space-between;
  color: #c4ad7c;
  font-family: 'Share Tech Mono', monospace;
}
#info-console #orbital-panel .ob-row b {
  color: #ffd068;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(255, 200, 80, 0.50);
  font-feature-settings: 'tnum' 1;
}
#info-console #orbital-panel .ob-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(184, 150, 90, 0.45) 30%,
    rgba(184, 150, 90, 0.45) 70%,
    transparent);
  margin: 5px 0;
}

/* ============ COMUNICACIONES ============ */
#info-console #chat-log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 110px;
  max-height: 280px;
}
#info-console #chat-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 7px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: #5e3c18 transparent;
  background:
    radial-gradient(ellipse at top,
      rgba(34, 22, 6, 0.30) 0%,
      rgba(0, 0, 0, 0.55) 100%);
  position: relative;
  z-index: 2;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
#info-console #chat-stream::-webkit-scrollbar { width: 5px; }
#info-console #chat-stream::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b58450, #5e3c18);
  border-radius: 0;
}
#info-console #chat-stream::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}
/* chat-line — fondo pergamino oscuro grabado */
#info-console .chat-line {
  background: rgba(20, 12, 4, 0.55) !important;
  border-left: 3px solid #8a5e2c !important;
  padding: 4px 8px 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  color: #e2cfa6;
}
#info-console .chat-line .who { color: #b8965a !important; }
#info-console .chat-line .body  { color: #e2cfa6 !important; font-family: 'Share Tech Mono', monospace; }
#info-console .chat-line.kind-padre  { border-left-color: #6affa0 !important; }
#info-console .chat-line.kind-padre .who { color: #6affa0 !important; }
#info-console .chat-line.kind-system { border-left-color: #ffd068 !important; }
#info-console .chat-line.kind-system .who { color: #ffd068 !important; }
#info-console .chat-line.kind-cam    { border-left-color: #6adcff !important; }
#info-console .chat-line.kind-cam .who { color: #6adcff !important; }
#info-console .chat-line.kind-warn   { border-left-color: #ff8866 !important; }
#info-console .chat-line.kind-warn .who { color: #ff8866 !important; }

/* ============ INVENTARIO ============ */
#info-console #inv-panel { flex: 0 0 auto; }
#info-console #inv-panel .row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 10.5px;
  color: #c4ad7c;
  font-family: 'Share Tech Mono', monospace;
}
#info-console #inv-panel .row.mineral { color: #c4ad7c; }
#info-console #inv-panel .row span:last-child {
  color: #ffd068;
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: 'tnum' 1;
  text-shadow: 0 0 4px rgba(255, 200, 80, 0.40);
}
#info-console #inv-panel .bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #2a1a08;
  border-radius: 0;
  overflow: hidden;
  margin: 4px 0 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}
#info-console #inv-panel .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6affa0, #ffd068);
  box-shadow: 0 0 6px rgba(106, 255, 160, 0.55);
  transition: width 0.3s;
  border-radius: 0;
}
#info-console #inv-panel .separator {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(184, 150, 90, 0.50) 30%,
    rgba(184, 150, 90, 0.50) 70%,
    transparent);
  margin: 7px 0;
}
#info-console #inv-panel .ic-mini-head {
  font-family: 'Cinzel', 'Space Grotesk', serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2.6px;
  color: #b8965a;
  text-transform: uppercase;
  margin: 4px 0 5px;
  padding: 3px 0;
  border-top: 1px solid rgba(184, 150, 90, 0.30);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

/* === Top HUD: ocultamos VELOCIDAD/warp del top y la franja
       derecha del bottom bar — toda esa data ahora vive grande
       adentro del marco de la consola === */
#hud-top .panel.right { display: none !important; }
#hud-bottom > .panel.right { display: none !important; }

/* Responsive: en pantallas chicas angostamos el frame.
   Mantenemos PRIMARY siempre visible (es lo más crítico). */
@media (max-width: 1100px) {
  #info-console { width: 320px; border-width: 7px; }
  #info-console .ic-big-v { font-size: 30px; }
}
@media (max-width: 900px) {
  #info-console { width: 270px; border-width: 6px; }
  #info-console .ic-time { display: none; }
  #info-console .ic-big-v { font-size: 26px; }
}
@media (max-width: 700px) {
  #info-console { width: 230px; top: 4px; bottom: 4px; border-width: 5px; }
  #info-console .ic-big-v { font-size: 22px; }
  #info-console #orbital-panel { display: none !important; }
  #info-console #inv-panel    { display: none !important; }
}