/* ===============================
   RESET + VARIABLES + BASE LAYOUT
   =============================== */
:root {
  --cian-electrico: #00BFFF;
  --off-black: #0A0F14;
  --off-white: #F5FAFF;

  --bg: var(--off-black);
  --ink: var(--off-white);

  /* HUD nave */
  --hud-top-height: 240px;
  --hud-line-strong: rgba(0, 191, 255, 0.9);
  --hud-line-soft: rgba(0, 191, 255, 0.28);
  --hud-glow: 0 0 12px rgba(0, 191, 255, 0.55);

  /* Dial: radio + rotación global (en grados) */
  --hud-wheel-radius: 315px;          /* geometría del círculo base */
  --hud-wheel-radius-label: 310px;    /* radio donde se apoyan los textos */
  --hud-wheel-rotation: 0deg;

  /* ===============================
     AION DISPLAY SYSTEM (global)
     1 sola fuente de verdad para el tamaño del panel holográfico
     (todas las secciones excepto Roadmap)
     =============================== */

  /* Ancho del display (widescreen) */
  --aion-display-maxw: 1120px;
  --aion-display-side-gutter: 3rem; /* margen horizontal total = 100vw - gutter */

  /* Alto del display (desktop base: 1920×1080) */
  --aion-display-minh: 500px;
  --aion-display-maxh: 680px;

  /* Corredor real entre HUD top y HUD bottom (desktop base)
     🔧 Esto define cuánto “aire” dejamos arriba/abajo para que el panel NO quede tapado.
  */
  --aion-shell-pad-top: calc(var(--hud-top-height) - 30px);
  --aion-shell-pad-bottom: 210px;

  /* “Cortes” verticales (para que nunca invada HUD top/bottom)
     - vcut-min acompaña el min-height
     - vcut-max acompaña el height/max-height
  */
  --aion-display-vcut-min: 260px;
  --aion-display-vcut-max: 210px;
}

/* ===============================
   AION DISPLAY SYSTEM — Desktop FullHD (1920×1080)
   Ensanchar panel holográfico SOLO en pantallas grandes
   =============================== */
@media (min-width: 1900px) and (min-height: 900px) and (orientation: landscape){
  :root{
    --aion-display-maxw: 1280px; /* antes 1120px */
  }
}

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

html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

/* ============ SCROLL-SNAP ============ */
.snap-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

[data-section] {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===============================
   AION DISPLAY SYSTEM — shell + panel sizing único
   - Define un corredor real entre HUD TOP y HUD BOTTOM
   - Unifica el tamaño del panel holográfico en todas las secciones
   - Roadmap queda afuera (layout distinto)
   =============================== */

/* Corredor global entre HUD top y bottom (todas excepto HERO/ROADMAP) */
[data-section]:not(#hero):not(#roadmap){
  align-items: stretch !important;   /* pisa el align-items:center global */
  justify-content: center;
  box-sizing: border-box;

  padding-top: var(--aion-shell-pad-top) !important;
  padding-bottom: var(--aion-shell-pad-bottom) !important;
}

/* Wrapper estándar de cada sección (los fragments arrancan con .section-inner o .aion-section) */
[data-section]:not(#hero):not(#roadmap) > .section-inner,
[data-section]:not(#hero):not(#roadmap) > .aion-section{
  width: 100%;
  height: 100%;
  margin: 0 auto;

  max-width: min(
    var(--aion-display-maxw),
    calc(100vw - var(--aion-display-side-gutter))
  ) !important;

  /* el “aire” lo gobierna el corredor del SECTION */
  padding: 0 !important;

  display: flex;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

/* Panel holográfico (aplicarlo con class="... aion-display" en cada sección) */
.aion-display{
  box-sizing: border-box;
  width: 100% !important;

  /* El alto lo define el corredor global del SECTION */
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

/* =======================================
   STARFIELD BACKGROUND — capa global fija
   ======================================= */

#starfield-layer {
  position: fixed;
  inset: 0;
  z-index: 1;           /* 🔹 debajo de todo el contenido, encima del bg del body */
  pointer-events: none;

  /* Nebulosa muy sutil para evitar fondo plano */
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(0, 191, 255, 0.08) 0%,
      rgba(0, 191, 255, 0.0) 38%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(0, 80, 160, 0.20) 0%,
      rgba(0, 10, 40, 0.0) 40%
    ),
    radial-gradient(
      circle at 85% 60%,
      rgba(0, 50, 110, 0.18) 0%,
      rgba(0, 10, 30, 0.0) 42%
    );
  /* El color base sigue siendo el del body (off-black) */
}

/* Sacudida ligera del starfield en warp alto */
#starfield-layer.starfield-shake {
  animation: starfieldShake 0.08s infinite;
}

@keyframes starfieldShake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 0); }
  75%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}


/* El canvas en sí: ocupa toda la pantalla, sin bordes */
#starfield-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* ===============================
   HUD SUPERIOR — CABINA INTERNA
   =============================== */

#hud-top.hud-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hud-top-height);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Guías muy sutiles en la cabina (sin barra fuerte en el centro) */
#hud-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  mix-blend-mode: screen;
  background:
    /* arco grande central muy suave */
    radial-gradient(
      circle at 50% 0%,
      rgba(0, 191, 255, 0.10) 0%,
      rgba(0, 191, 255, 0.03) 26%,
      transparent 60%
    ),
    /* guía curva lado izquierdo */
    radial-gradient(
      circle at 0% 0%,
      rgba(0, 191, 255, 0.04) 0%,
      transparent 36%
    ),
    /* guía curva lado derecho */
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 191, 255, 0.04) 0%,
      transparent 36%
    );
  /* SIN línea vertical central esta vez */
}



/* Solo aparece a partir de la 2ª sección */
body.header-mode #hud-top {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hud-top-inner {
  --hud-font-head: var(--font-head, "Futura", "Futura PT", "Futura Std", system-ui, sans-serif);
  --hud-font-body: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 40px 10px;
  color: var(--cian-electrico);
  font-family: var(--hud-font-body);
  text-transform: uppercase;
}

/* Barra de estado superior — más chica y menos alta */
.hud-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.58rem;        /* antes 0.7rem */
  letter-spacing: 0.16em;    /* un poco menos separadas */
  padding-bottom: 3px;       /* antes 8px */
  margin-bottom: 5px;        /* antes 10px — acerca la línea al INTRO */

  /* quitamos el borde corto */
  border-bottom: none;

  position: relative;
}

/* desde acá */
.hud-status-row::after {
  content: "";
  position: absolute;

  /* línea inferior, misma idea que la superior */
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;

  background: var(--hud-line-soft);

  transform: translateX(-50%);
  pointer-events: none;
}
/* hasta acá */


.hud-status-row::before {
  content: "";
  position: absolute;
  top: -3px;

  /* La línea se centra respecto al viewport y se estira de lado a lado */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);

  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,191,255,0.7) 20%,
    rgba(0,191,255,0.9) 50%,
    rgba(0,191,255,0.7) 80%,
    transparent 100%
  );
  opacity: 0.65;
  pointer-events: none;
}


.hud-status-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-status-item {
  opacity: 0.9;
}

.hud-status-sep {
  opacity: 0.4;
}

/* Fila principal: menos alto */
.hud-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;    /* antes 4px */
  position: relative;
  z-index: 0;
  overflow: visible;
}

/* Halo MUCHO más suave detrás del título */
.hud-main-row::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 260px;
  transform: translate(-50%, -60%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(0, 191, 255, 0.10) 0%,
      rgba(0, 191, 255, 0.04) 22%,
      rgba(0, 191, 255, 0.02) 40%,
      transparent 62%
    );
  opacity: 0.55;
  pointer-events: none;
}



.hud-main-title {
  flex: 0 0 auto;
  text-align: center;
  width: 100%;               /* el texto se centra respecto al HUD */
  position: relative;
  z-index: 1;                /* queda por encima del halo */
}


/* Fila de sistemas / subsistemas bajo el título principal */
.hud-subsystems-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
  margin-bottom: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 191, 255, 0.88);
  opacity: 0.9;
}

.hud-subsys-item {
  white-space: nowrap;
}

.hud-subsys-sep {
  opacity: 0.45;
}

/* Si querés apretarlo un poco en pantallas chicas */
@media (max-width: 900px) {
  .hud-subsystems-row {
    font-size: 0.52rem;
    gap: 12px;
  }
}


/* Línea entre INTRO y el dial: más cerca del título */
.hud-main-divider {
  margin-top: 4px;          /* antes 10px */

  /* La línea se estira a todo el viewport */
  width: 100vw;
  height: 1px;
  background: var(--hud-line-soft);
  opacity: 1;

  /* La centramos respecto al viewport sin sacar el div del flujo */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


/* Título de sección: más chico y compacto */
.hud-section-label {
  font-family: var(--hud-font-head);
  font-size: 2.2rem;        /* antes 2.8rem */
  letter-spacing: 0.24em;   /* un poco menos separado */
  font-weight: 500;
  text-shadow: var(--hud-glow);
  color: var(--cian-electrico);
  display: inline-block;
}

/* Fila de micro-sistemas debajo del título principal */
.hud-systems-row {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

.hud-sys-label {
  white-space: nowrap;
}

.hud-sys-label--dim {
  opacity: 0.65;
  font-weight: 400;
}

.hud-sys-sep {
  opacity: 0.45;
}


/* Bloque de escudo + textos: más chico y pegado a la derecha */
.hud-shield {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) scale(0.5);  /* antes 0.8 */
  transform-origin: center right;
  display: flex;
  align-items: center;
  gap: 12px;                               /* un poco menos separación */
  z-index: 1;                              /* por encima del halo */
}


.hud-shield-ring {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2px solid rgba(0,191,255,0.55);
  box-shadow: var(--hud-glow);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,191,255,0.35) 0%,
      rgba(0,191,255,0.0) 55%);
}

.hud-shield-ring::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(0,191,255,0.4);
  opacity: 0.8;
}

.hud-shield-core {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.9) 0%,
    rgba(0,191,255,0.9) 35%,
    rgba(0,191,255,0.0) 100%);
  opacity: 0.9;
}

.hud-shield-text {
  font-size: 1.0rem;         /* antes 0.7rem */
  letter-spacing: 0.14em;
  opacity: 0.8;
}

.hud-shield-label {
  margin-bottom: 4px;
}

.hud-shield-dist .hud-unit {
  font-size: 0.7rem;
  margin-left: 4px;
  opacity: 0.8;
}

.hud-wheel {
  position: relative;
  height: 90px; /* da margen abajo para ver la mitad inferior */
  overflow: hidden;      /* recorta la mitad superior del círculo */
}

/* Anillo INTERIOR (línea interna del dial) */
.hud-wheel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -300px;      /* NO lo toco: mantiene la geometría que ya calibraste */
  width: 440px;
  height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--hud-line-soft);  /* borde completo */
  box-shadow: none;
  background: none;
  opacity: 1;
}

/* Anillo intermedio fantasma (muy suave) */
.hud-wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -320px;
  width: 480px;
  height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 191, 255, 0.10);
  opacity: 0.8;
  pointer-events: none;
}


/* Anillo EXTERIOR (línea externa del dial) */
.hud-wheel-arc {
  position: absolute;
  left: 50%;
  top: -340px;     /* mismo centro que ya tenés */
  width: 520px;
  height: 420px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--hud-line-soft);  /* borde completo */
  box-shadow: none;
  background: none;
  opacity: 1;
}

/* Marcas de calibración (ticks) sobre el arco exterior */
.hud-wheel-arc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.9;
  background:
    conic-gradient(
      from 190deg,
      transparent 0deg 4deg,
      rgba(0, 191, 255, 0.28) 4deg 4.6deg,
      transparent 4.6deg 10deg
    );
  /* Deja solo un aro fino de ticks, no el disco completo */
  -webkit-mask:
    radial-gradient(circle at 50% 50%,
      transparent 0 66%,
      black 66% 100%);
  mask:
    radial-gradient(circle at 50% 50%,
      transparent 0 66%,
      black 66% 100%);
}


/* Centro polar de los ítems — debe cubrir TODO el dial (mismo sistema de coordenadas que wheel) */
.hud-wheel-nav{
  position: absolute;
  inset: 0;                 /* llena el .hud-wheel */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 100%;

  pointer-events: auto;
  transform: none;
}

.hud-wheel-item {
  --angle: 0deg;

  position: absolute;
  left: 0;
  top: 0;

  /* La elipse da el CENTRO; luego lo centramos en X */
  transform:
    translate(var(--hud-wheel-x, 0px), var(--hud-wheel-y, 0px))
    translateX(-50%)
    scale(var(--hud-wheel-item-scale, 1));

  opacity: var(--hud-wheel-item-alpha, 1);
  transition: opacity 0.10s ease-out;

  background: none;
  border: none;
  cursor: inherit;
  padding: 0;
}

/* Texto del menú del dial */
.hud-wheel-label {
  display: block;

  /* ✅ Pivote arriba (como hicimos con los divisores):
     evita que “se vaya” hacia el borde al rotar */
  transform-origin: 50% 0%;

  /* ✅ Pequeño offset opcional (0 por defecto) + rotación */
  transform:
    translateY(var(--hud-wheel-label-offset, 0px))
    rotate(var(--hud-wheel-label-angle, 0deg))
	scale(var(--hud-wheel-label-scale, 1));

  color: rgba(0, 191, 255, 0.72);
  font-size: 0.7rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  text-shadow: none;
  white-space: nowrap;
}


/* Marca base del dial: rayito MUY tenue (todos los ítems) */
.hud-wheel-item::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);   /* pegado al borde superior del anillo */
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 191, 255, 0.18);
  opacity: 0.35;
  transition:
    height 0.18s ease-out,
    opacity 0.18s ease-out,
    background 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* Flecha: punta holográfica (inicialmente oculta) */
.hud-wheel-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px + 22px);  /* un poco por encima del rayito */
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 5px 7px 5px;      /* triángulo apuntando hacia arriba */
  border-color: transparent transparent rgba(0, 191, 255, 0) transparent;
  opacity: 0;
  transition:
    opacity 0.18s ease-out,
    border-color 0.18s ease-out,
    filter 0.18s ease-out;
}

/* Contenedor de divisores: mismo origen que los ítems del dial */
.hud-wheel-dividers {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Cada línea divisoria entre secciones */
.hud-wheel-divider {
  position: absolute;
  left: 0;
  top: 0;

  /* 👇 anclada “arriba” (donde cuelga del arco) */
  transform-origin: top center;
  will-change: transform;

  /* 👇 posición + inclinación + largo variable */
  transform:
    translate(
      var(--hud-divider-x, 0px),
      calc(var(--hud-divider-y, 0px) - 10px)
    )
    translateX(-50%)
    rotate(var(--hud-divider-rot, 0deg))
    scaleY(var(--hud-divider-scale, 1));

  width: 1px;

  /* ✅ clave: altura base variable para que el largo final NO se pase */
  height: var(--hud-divider-h, 39px);

  border-radius: 999px;
  background: var(--hud-line-soft);
  opacity: 0.9;
  box-shadow: none;
}



/* ÍTEM ACTIVO: flecha completa iluminada hacia el título */
.hud-wheel-item.is-active::before {
  height: 50px;  /* columna más larga, conecta dial con la punta */
  background: linear-gradient(
    to top,
    rgba(0, 191, 255, 0.0) 0%,
    rgba(0, 191, 255, 0.6) 45%,
    rgba(0, 191, 255, 1)   100%
  );
  opacity: 1;
  box-shadow:
    0 0 10px rgba(0, 191, 255, 0.9),
    0 0 18px rgba(0, 191, 255, 0.45);
}


/* HOVER: sin cambio visual (misma apariencia que el estado normal) */
.hud-wheel-item:hover .hud-wheel-label {
  color: rgba(0, 191, 255, 0.72);
  text-shadow: none;
}


/* ACTIVO: blanco fuerte, glow neutro */
.hud-wheel-item.is-active .hud-wheel-label {
  color: var(--cian-electrico);
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.55);
}

/* ==========================================================
   HUD WHEEL — AAA INTERACTIVITY PASS (Part A)
   Breathing glow + depth + cursor/hover + one-time hint
   ========================================================== */

/* Cursor “grab” para que sea OBVIO que se arrastra */
.hud-wheel,
.hud-wheel-nav {
  cursor: grab;
}

.hud-wheel.is-dragging,
.hud-wheel.is-dragging * {
  cursor: grabbing !important;
}

/* Botones heredan “grab” (no pointer) */
.hud-wheel-item {
  cursor: inherit;
}

/* Hover “agresivo”: más contraste + glow + underline visible */
.hud-wheel-item:hover .hud-wheel-label {
  color: var(--cian-electrico);
  text-shadow:
    0 0 10px rgba(0, 191, 255, 0.60),
    0 0 18px rgba(0, 191, 255, 0.30);
}

/* Hover también energiza el “rayito” base */
.hud-wheel-item:hover::before {
  opacity: 0.75;
  background: rgba(0, 191, 255, 0.38);
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.35);
}

/* Profundidad: vidrio (inner) + glow externo MUY sutil */
.hud-wheel::before {
  /* NO tocamos top/width/height/border */
  box-shadow:
    inset 0 -14px 22px rgba(0, 191, 255, 0.07),
    0 0 22px rgba(0, 191, 255, 0.06);
}

.hud-wheel::after {
  box-shadow: 0 0 18px rgba(0, 191, 255, 0.05);
}

.hud-wheel-arc {
  /* NO tocamos top/width/height/border */
  filter: drop-shadow(0 0 14px rgba(0, 191, 255, 0.10));
  box-shadow:
    inset 0 -16px 26px rgba(0, 191, 255, 0.06);
}

/* ==========================================================
   WHEEL — Tick Flash (micro feedback al encastrar)
   (se anima en ::before para no pisar el breathing del arco)
   ========================================================== */
.hud-wheel-arc::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(0, 191, 255, 0);
  box-shadow: none;
}

@keyframes hudWheelTickFlash {
  0% {
    opacity: 0;
    border-color: rgba(0, 191, 255, 0.0);
    box-shadow: none;
  }
  35% {
    opacity: 0.85;
    border-color: rgba(0, 191, 255, 0.55);
    box-shadow:
      0 0 14px rgba(0, 191, 255, 0.35),
      0 0 26px rgba(0, 191, 255, 0.18);
  }
  100% {
    opacity: 0;
    border-color: rgba(0, 191, 255, 0.0);
    box-shadow: none;
  }
}

.hud-wheel-arc.is-tickflash::before {
  animation: hudWheelTickFlash 220ms ease-out 1;
}

/* Breathing glow (solo cuando el HUD está visible) */
@keyframes hudWheelBreath {
  0%, 100% {
    opacity: 0.92;
    filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.08));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(0, 191, 255, 0.14));
  }
}

body.header-mode .hud-wheel-arc,
body.header-mode .hud-wheel::before,
body.header-mode .hud-wheel::after {
  animation: hudWheelBreath 2.8s ease-in-out infinite;
}

/* Hint contextual (1 sola vez) */
.hud-wheel-hint {
  position: absolute;
  left: 50%;
  top: 8px;              /* ajusta fino si querés más arriba/abajo */
  transform: translateX(-50%);
  pointer-events: none;

  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 250, 255, 0.75);

  opacity: 0.0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Visible solo cuando HUD está activo */
body.header-mode .hud-wheel-hint {
  opacity: 0.75;
  transform: translateX(-50%) translateY(0);
}

/* Se apaga cuando ya interactuó */
.hud-wheel-hint.is-hidden {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-4px);
}


/* ===============================
   HUD INFERIOR — AION CORE / NAVIGATION
   =============================== */

#hud-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;               /* mantiene la altura que tenías */
  z-index: 55;
  display: flex;
  justify-content: center;
  padding: 0 12px 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Se muestra sólo fuera de HERO, igual que el HUD superior */
body.header-mode #hud-bottom {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ===============================
   MODO INTRO — SOLO ANILLO + AION CORE
   =============================== */

/* En intro, aunque header-mode esté activo, ocultamos el HUD superior */
body.intro-core-only #hud-top {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

/* En intro, el HUD inferior completo NO debe recibir interacción
   hasta que el AION CORE esté insertado. */
body.intro-core-only #hud-bottom,
body.intro-core-only #hud-bottom * {
  pointer-events: none !important;
}

/* En intro, el HUD inferior solo muestra el anillo + módulo central.
   Ocultamos joystick, velocidad, traductor y control de audio. */
body.intro-core-only #hud-bottom .hud-bottom-joystick,
body.intro-core-only #hud-bottom .hud-bottom-speed,
body.intro-core-only #hud-bottom .audio-hatch-floating,
body.intro-core-only #hud-bottom .autopilot-hatch-floating {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Ocultar logo flotando y label "AION CORE ONLINE" en modo intro-core-only */
body.intro-core-only #hud-bottom #hud-core-logo,
body.intro-core-only #hud-bottom .hud-core-label {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease;
}

/* ===============================
   AUTOPILOT ON — BLOQUEO DE CONTROLES DE NAVEGACIÓN
   (Solo quedan visibles las bases / anillos inferiores)
   =============================== */

/* Joystick: ocultar hologramas flotantes (la pila) */
body.autopilot-on #hud-bottom .hud-bottom-joystick .hud-joystick-stack {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  filter: blur(1px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    filter 0.25s ease;
}
body.autopilot-on #hud-bottom .hud-bottom-joystick .hud-joystick-layer {
  animation: none !important;
}

/* NAV DRIVE: ocultar el dial (holograma) + label, dejando el anillo base (pseudo-elementos) */
body.autopilot-on #hud-bottom .hud-bottom-speed .hud-speed-dial,
body.autopilot-on #hud-bottom .hud-bottom-speed .hud-speed-label {
  opacity: 0;
  transform: translate(-50%, 0) translateY(10px) scale(0.98);
  filter: blur(1px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    filter 0.25s ease;
}
body.autopilot-on #hud-bottom .hud-bottom-speed .hud-speed-arc {
  animation: none !important;
}

/* Slider velocidad (panel izquierdo): ocultar y bloquear cuando Autopilot está ON */
body.autopilot-on .hud-left-speed{
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  filter: blur(1px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    filter 0.25s ease;
}


/* ===============================
   NAV MODE (Autopilot OFF) — SOLO ESTRELLAS
   Ocultamos el contenido de secciones para que quede el fondo espacial.
   =============================== */
body.nav-mode #sections-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* EXCEPCIÓN: si la sección actual es HERO, el agujero negro / escena HERO
   debe seguir visible aunque estemos en nav-mode (Autopilot OFF). */
body.nav-mode[data-current-section="hero"] #sections-container {
  opacity: 1;
}

/* Contenedor del HUD inferior */
.hud-bottom-inner {
  pointer-events: auto;
  max-width: 1100px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
  align-items: flex-end;
  gap: 32px;
  padding: 26px 46px 20px;
  position: relative;
  overflow: visible;
  z-index: 1;
}


/* ==========================================================
   NAV MODE SHIELD (bloquea interacción con secciones cuando Autopilot OFF)
   ========================================================== */

#nav-mode-shield{
  position: fixed;
  inset: 0;
  pointer-events: none;   /* por default NO bloquea */
  opacity: 0;             /* invisible */
  z-index: 45;            /* IMPORTANTE: debe quedar arriba de secciones y debajo del HUD */
}

/* Autopilot OFF => nav-mode => shield activo */
body.nav-mode #nav-mode-shield{
  pointer-events: auto;   /* ahora sí bloquea clicks/scroll sobre secciones */
}


/* ===============================
   HUD INFERIOR — JOYSTICK HOLOGRÁFICO (POSICIÓN)
   =============================== */

:root{
  /* 🔧 Ajustes finos para ubicar el joystick arriba del panel izquierdo */
  --hud-joy-x: -295px;   /* (-) izquierda | (+) derecha */
  --hud-joy-y: -40px;   /* (-) sube     | (+) baja   */
}

.hud-bottom-joystick{
  position: relative;
  width: 210px;
  height: 130px;
  justify-self: flex-start;
  align-self: flex-end;

  /* ✅ un solo transform (no se pisa) */
  transform: translate(var(--hud-joy-x), var(--hud-joy-y));

  pointer-events: auto;
  user-select: none;
}



/* ---------- PILA DE DISCOS FLOTANDO (vista más desde arriba) ---------- */

:root{
  /* 🔧 Ajustes finos para ubicar el joystick arriba del panel izquierdo */
  --hud-joy-x: -296px;
  --hud-joy-y: -40px;

  /* ✅ NUEVO: escala del holograma (solo discos) */
  --hud-joy-stack-scale: 1.55; /* probá 1.35–1.90 */
  
}

/* ---------- PILA DE DISCOS FLOTANDO (vista más desde arriba) ---------- */
.hud-joystick-stack {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 160px;
  height: 130px;

  /* ✅ Ahora escala TODO el holograma proporcionalmente */
  transform:
    translateX(-50%)
    perspective(950px)
    rotateX(42deg)
    scale(var(--hud-joy-stack-scale));

  transform-origin: 50% 100%; /* escala desde “abajo” */
  pointer-events: auto;
  cursor: grab;
}

/* Cursor cuando el joystick está “tomado” */
.hud-bottom-joystick.is-engaged .hud-joystick-stack {
  cursor: grabbing;
}


/* estilo común a todos los discos */
.hud-joystick-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(0,191,255,0.75);
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,191,255,0.28) 0%,
      rgba(0,191,255,0.10) 45%,
      rgba(0,191,255,0.00) 90%);
  box-shadow: 0 0 10px rgba(0,191,255,0.65);
  transition: transform 0.16s ease-out; /* 🔹 movimiento suave y retorno al centro */
}

/* disco inferior (más grande) */
.hud-joystick-layer.layer-1 {
  width: 140px;
  height: 54px;
  bottom: 4px;
  animation: hudJoystickLayerFloat 4.2s ease-in-out infinite;
  animation-delay: 0s;
}

/* segundo disco */
.hud-joystick-layer.layer-2 {
  width: 116px;
  height: 48px;
  bottom: 30px;
  animation: hudJoystickLayerFloat 4.2s ease-in-out infinite;
  animation-delay: 0.12s;
}

/* tercer disco */
.hud-joystick-layer.layer-3 {
  width: 92px;
  height: 42px;
  bottom: 56px;
  animation: hudJoystickLayerFloat 4.2s ease-in-out infinite;
  animation-delay: 0.24s;
}

/* disco superior (más pequeño) */
.hud-joystick-layer.layer-4 {
  width: 68px;
  height: 36px;
  bottom: 82px;
  animation: hudJoystickLayerFloat 4.2s ease-in-out infinite;
  animation-delay: 0.36s;
}


/* Levitación por disco — cada uno con un pequeño delay */
@keyframes hudJoystickLayerFloat {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-6px); /* altura del “salto” */
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}



/* -----------------------------------
   MÓDULO CENTRAL — AION CORE
   ----------------------------------- */

.hud-bottom-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;  /* si no lo tenía ya */
  top: 0px;          /* ajustá este valor a gusto: -10, -12, -16, etc. */
}


/* ============================
   CORE — EMISOR CIRCULAR (base plana, 30% más chico)
   ============================ */
.hud-core-emitter {
  position: relative;
  width: 168px;          /* 240 → 168 (≈70%) */
  height: 50px;          /* 70 → 50  */
  margin-top: -8px;      /* ajustado para mantener posición visual */
}

/* Halo suave general bajo los anillos */
.hud-core-emitter::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;           /* 8 → 6 */
  transform: translateX(-50%);
  width: 160px;          /* 230 → 160 */
  height: 32px;          /* 46 → 32 */
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0,191,255,0.28) 0%,
    rgba(0,191,255,0.08) 40%,
    transparent 80%
  );
  opacity: 0.45;
  pointer-events: none;
}

/* Anillos elípticos apoyados sobre el tablero */
.hud-core-ring {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--hud-line-soft, rgba(0,191,255,0.45));
  box-shadow: none;
}

/* 1) Anillo EXTERIOR — un poco más grueso + segmentos */
.hud-core-ring.core-ring-1 {
  width: 148px;          /* 210 → 148 */
  height: 36px;          /* 52 → 36 */
  bottom: 4px;           /* 6 → 4 */
  border-width: 2px;
  opacity: 0.95;
  overflow: visible;
}

/* Segmentos sobre el anillo exterior */
.hud-core-ring.core-ring-1::before {
  content: "";
  position: absolute;
  inset: 4px;                    /* deja el contorno exterior */
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(0,191,255,0.9) 0deg 5deg,   /* tramo encendido, corto */
      transparent 5deg 11deg           /* gap más largo → más cortes */
    );
  -webkit-mask:
    radial-gradient(farthest-side,
      transparent calc(100% - 4px),
      #000 100%);
  mask:
    radial-gradient(farthest-side,
      transparent calc(100% - 4px),
      #000 100%);
  opacity: 0.5;
  pointer-events: none;
}

/* 2) Anillo MEDIO — continuo, más grueso, sin segmentos */
.hud-core-ring.core-ring-2 {
  width: 116px;          /* 168 → 118 */
  height: 22px;          /* 44 → 31 */
  bottom: 12px;          /* 14 → 10 */
  border-width: 2px;
  opacity: 0.9;
}

/* 3) Anillo INTERIOR — mucho más pequeño, centrado */
.hud-core-ring.core-ring-3 {
  width: 42px;           /* 60 → 42 */
  height: 14px;          /* 20 → 14 */
  bottom: 16px;          /* 26 → 18 */
  border-width: 2px;
  opacity: 0.75;
}

/* Disco central brillante — mismo tamaño que el anillo interior */
.hud-core-emitter::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;          /* 26 → 18 */
  transform: translateX(-50%);
  width: 42px;           /* 60 → 42 */
  height: 11px;          /* 16 → 11 */
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,191,255,0.85) 0%,
      rgba(0,191,255,0.45) 35%,
      transparent 75%);
  box-shadow:
    0 0 16px rgba(0,191,255,0.75),
    0 0 32px rgba(0,191,255,0.45);
  pointer-events: none;
}


/* ============================
   CORE — LOGO HOLOGRÁFICO
   ============================ */
.hud-core-logo {
  position: relative;
  margin-top: -80px;
  width: 96px;
  height: 96px;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
  /* ya no necesitamos animar transform acá */
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}

.hud-core-logo-img {
  max-width: 80%;
  max-height: 80%;
  margin-top: -200px;
  filter:
    /* halo apretado alrededor del logo */
    drop-shadow(0 0 10px rgba(0,191,255,0.95))
    /* glow amplio alrededor */
    drop-shadow(0 0 26px rgba(0,191,255,0.70))
    /* sombra volumétrica hacia abajo (da sensación de espesor) */
    drop-shadow(0 12px 26px rgba(0,191,255,0.35));
  transition:
    transform 0.2s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
  animation: coreLogoFloatTransform 4s ease-in-out infinite;
}


/* Hover del core: leve zoom y más “suspensión” */
.hud-core-logo:hover .hud-core-logo-img {
  transform: translateY(-4px) scale(1.03);
}

/* Estado apagado del core (cuando hagamos la lógica JS) */
.hud-core-logo.is-off {
  opacity: 0.4;
  border-color: rgba(0,191,255,0.35);
  box-shadow:
    0 0 10px rgba(0,191,255,0.3);
}

.hud-core-label {
  margin-top: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(0,191,255,0.9);
  /* 🔹 sólo desplazamiento visual hacia arriba */
  transform: translateY(-30px);    /* probá entre -6px y -12px a gusto */
}

/* ============================
   CORE — EFECTO DE ACTIVACIÓN
   ============================ */

/* Flash del emisor cuando se inserta el núcleo */
body.core-activating #hud-bottom .hud-core-emitter::before,
body.core-activating #hud-bottom .hud-core-emitter::after {
  animation: coreEmitterActivateFlash 0.7s ease-out;
}

/* Logo AION GAMES hace un pequeño “boot holográfico” */
body.core-activating #hud-bottom .hud-core-logo.is-activating .hud-core-logo-img {
  animation: coreLogoActivateFlash 0.7s ease-out;
}

@keyframes coreLogoFloatTransform {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  33% {
    transform: translateY(-2px) rotateX(3deg) rotateY(-1.5deg);
  }
  66% {
    transform: translateY(-3px) rotateX(-2deg) rotateY(1.5deg);
  }
}


@keyframes coreEmitterActivateFlash {
  0% {
    transform: translateX(-50%) scaleX(0.8) scaleY(0.7);
    opacity: 0.25;
    box-shadow: 0 0 0 rgba(0,191,255,0);
  }
  45% {
    transform: translateX(-50%) scaleX(1.4) scaleY(1.2);
    opacity: 1;
    box-shadow:
      0 0 18px rgba(0,191,255,0.9),
      0 0 36px rgba(0,191,255,0.6);
  }
  100% {
    transform: translateX(-50%) scaleX(1) scaleY(1);
    opacity: 0.55;
    box-shadow:
      0 0 10px rgba(0,191,255,0.5),
      0 0 22px rgba(0,191,255,0.3);
  }
}

@keyframes coreLogoActivateFlash {
  0% {
    transform: translateY(12px) scale(0.55);
    opacity: 0;
    filter:
      drop-shadow(0 0 4px rgba(0,191,255,0.7))
      drop-shadow(0 0 12px rgba(0,191,255,0.4));
  }
  45% {
    transform: translateY(-4px) scale(1.12);
    opacity: 1;
    filter:
      drop-shadow(0 0 16px rgba(0,191,255,1))
      drop-shadow(0 0 32px rgba(0,191,255,0.85));
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(0,191,255,0.95))
      drop-shadow(0 0 26px rgba(0,191,255,0.70))
      drop-shadow(0 12px 26px rgba(0,191,255,0.35));
  }
}


/* ============================
   CORE — ENERGY DISCHARGE (cámara inferior)
   ============================ */

/* 🔧 Ajustes a ojo (solo estos 4 normalmente) */
.hud-core-discharge{
  --core-discharge-x: 0px;     /* izquierda/derecha */
  --core-discharge-y: 0px;   /* arriba/abajo */
  --core-discharge-w: 70px;   /* ancho del área */
  --core-discharge-h: 45px;    /* alto del área */

  --core-discharge-rot: 0deg;  /* lo pisa JS en cada disparo */
}

.hud-core-discharge{
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--core-discharge-w);
  height: var(--core-discharge-h);
  transform: translateX(-50%) translate(var(--core-discharge-x), var(--core-discharge-y)) rotate(var(--core-discharge-rot));
  transform-origin: 50% 50%;
  pointer-events: none;

  /* apagado por defecto */
  opacity: 0;

  /* holograma: “screen” para sumar luz sobre fondo oscuro */
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 10px rgba(0,191,255,0.35))
    drop-shadow(0 0 22px rgba(0,191,255,0.18));
  z-index: 2;
}

/* Solo cuando el core está “insertado” */
body.core-inserted .hud-core-discharge{
  opacity: 1;
}

/* glow base permanente MUY sutil en la cámara */
.hud-core-discharge::before{
  content:"";
  position:absolute;
  inset:-6px -10px;
  border-radius: 18px;
  background: radial-gradient(
    ellipse at 50% 70%,
    rgba(0,191,255,0.14) 0%,
    rgba(0,191,255,0.06) 38%,
    transparent 74%
  );
  opacity: 0.55;
}

/* “flash” del disparo (cortito) */
.hud-core-discharge::after{
  content:"";
  position:absolute;
  inset:-10px -18px;
  border-radius: 22px;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(0,191,255,0.35) 0%,
    rgba(0,191,255,0.10) 40%,
    transparent 72%
  );
  opacity: 0;
}

.hud-core-discharge-arc{
  position:absolute;
  inset: 6px 8px;
  border-radius: 14px;

  /* “rayos” con 2 capas: trazo + ruido leve */
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,191,255,0.0) 0px,
      rgba(0,191,255,0.0) 8px,
      rgba(0,191,255,0.85) 9px,
      rgba(0,191,255,0.0) 10px,
      rgba(0,191,255,0.0) 18px
    ),
    linear-gradient(
      to bottom,
      rgba(0,191,255,0.12),
      rgba(0,191,255,0.02)
    );

  opacity: 0;
  filter: blur(0.25px);
  transform: skewX(-10deg);
}

/* 2 arcos desfasados */
.hud-core-discharge-arc.arc-2{
  inset: 10px 12px;
  transform: skewX(12deg) rotate(2deg);
  opacity: 0;
}

/* Disparo */
@keyframes coreDischargeArcFlash{
  0%   { opacity: 0; transform: translateY(6px) scaleY(0.85); }
  35%  { opacity: 1; transform: translateY(0px) scaleY(1); }
  100% { opacity: 0; transform: translateY(-8px) scaleY(0.9); }
}

@keyframes coreDischargeBloom{
  0%   { opacity: 0; }
  30%  { opacity: 0.95; }
  100% { opacity: 0; }
}

.hud-core-discharge.is-fire .hud-core-discharge-arc{
  animation: coreDischargeArcFlash 260ms ease-out 1;
}

.hud-core-discharge.is-fire::after{
  animation: coreDischargeBloom 220ms ease-out 1;
}


/* ===============================
   HUD INFERIOR — DIAL DE VELOCIDAD
   =============================== */

.hud-bottom-speed {
  position: relative;
  width: 210px;
  height: 140px;
  justify-self: flex-end;
  align-self: flex-end;
  pointer-events: none;           /* más adelante lo activamos si es interactivo */
  transform: translateY(0px);   /* 🔹 SUBE todo el módulo (ajustá -8 a gusto) */
  transform: translateX(100px);   /* 🔹 SUBE todo el módulo (ajustá -8 a gusto) */
}

/* --- Base fija sobre el tablero (anillos planos) --- */

.hud-bottom-speed::before,
.hud-bottom-speed::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(0,191,255,0.55);
  box-shadow: none;
  pointer-events: none;
}

/* anillo exterior sobre el tablero */
.hud-bottom-speed::before {
  width: 150px;
  height: 50px;
  bottom: 8px;
  border-width: 2px;
  opacity: 0.95;
}

/* anillo interior sobre el tablero */
.hud-bottom-speed::after {
  width: 116px;
  height: 40px;
  bottom: 15px;
  opacity: 0.85;
}

/* Dial flotante en perspectiva (disco principal del NAV DRIVE) */
.hud-speed-dial {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 150px;
  height: 78px;
  transform:
    translateX(-50%)
    perspective(950px)
    rotateX(42deg);
  transform-origin: center center;
  border-radius: 50%;
  border: 1px solid rgba(0,191,255,0.75);
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0,191,255,0.28) 0%,
      rgba(0,191,255,0.10) 45%,
      rgba(0,191,255,0.00) 90%
    );
  box-shadow:
    0 0 10px rgba(0,191,255,0.65);

  display: flex;
  align-items: center;
  justify-content: center;

  /* 🔹 ahora es interactivo */
  pointer-events: auto;
  cursor: grab;

  overflow: visible;

  /* respiración suave del disco (no de la aguja) */
  animation: hudSpeedDialFloat 4.2s ease-in-out infinite;

  /* ángulo lógico del dial [-90, 90] → se corrige en ::before */
  --nav-dial-angle: 0deg;  /* 0 = reposo apuntando al norte */
}

.hud-speed-dial.is-engaged {
  cursor: grabbing;
}

/* Aguja / marca del NAV DRIVE: controlada por --nav-dial-angle */
.hud-speed-dial::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;                 /* grosor de la aguja */
  height: 42px;               /* largo de la aguja */
  border-radius: 999px;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 191, 255, 0.9),
      rgba(0, 191, 255, 0.15)
    );
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.85);

  /* Pivote cerca de la base, como una perilla */
  transform-origin: 50% 84%;
  /* +90° porque el rectángulo nace vertical hacia arriba */
  transform: translate(-50%, -84%) rotate(calc(var(--nav-dial-angle) + 90deg));

  pointer-events: none;
  transition: transform 0.15s ease-out; /* movimiento suave al arrastrar */
}


/* Cilindro holográfico dentro del dial, colores tipo joystick */
.hud-speed-arc {
  position: absolute;
  left: 50%;
  top: 36%;                         /* sube / baja el cilindro dentro del dial */
  transform: translate(-50%, -50%);
  width: 90px;
  height: 40px;
  pointer-events: none;
  /* respiración coordinada con el dial */
  animation: hudSpeedArcFloat 4.2s ease-in-out infinite;
  animation-delay: 0.18s;

  background:
    /* borde lateral izquierdo */
    linear-gradient(
      to bottom,
      rgba(0,191,255,0.75),
      rgba(0,191,255,0.25)
    ) 0 50% / 2px calc(100% - 12px) no-repeat,
    /* borde lateral derecho */
    linear-gradient(
      to bottom,
      rgba(0,191,255,0.75),
      rgba(0,191,255,0.25)
    ) 100% 50% / 2px calc(100% - 12px) no-repeat,
    /* relleno holográfico suave de la pared (similar feeling al joystick) */
    linear-gradient(
      to bottom,
      rgba(0,191,255,0.22),
      rgba(0,191,255,0.03)
    );
}


/* TAPA SUPERIOR (elipse de arriba) */
.hud-speed-arc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,191,255,0.75);  /* mismo grosor/saturación que joystick */
  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(0,191,255,0.28) 0%,        /* mismo patrón que los discos */
      rgba(0,191,255,0.10) 45%,
      rgba(0,191,255,0.00) 90%
    );
  box-shadow: 0 0 10px rgba(0,191,255,0.65);  /* glow suave, no exagerado */
  opacity: 0.95;
  pointer-events: none;
}

/* TAPA INFERIOR (elipse de abajo) */
.hud-speed-arc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,191,255,0.7);
  background:
    radial-gradient(
      ellipse at 50% 65%,
      rgba(0,191,255,0.22) 0%,
      rgba(0,191,255,0.08) 45%,
      rgba(0,191,255,0.00) 90%
    );
  opacity: 0.9;
  box-shadow: 0 0 8px rgba(0,191,255,0.5);
  pointer-events: none;
}

/* Animación de “respiración” del dial de velocidad */
@keyframes hudSpeedDialFloat {
  0%,
  100% {
    transform:
      translateX(-50%)
      perspective(950px)
      rotateX(42deg)
      translateY(0);
  }
  50% {
    transform:
      translateX(-50%)
      perspective(950px)
      rotateX(42deg)
      translateY(-4px);   /* altura del “salto” (ajustable) */
  }
}

/* Cilindro flotando dentro del dial, un poco desfasado */
@keyframes hudSpeedArcFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-2px);
  }
}


/* Pequeño label “NAV DRIVE” bajo el dial */
.hud-speed-label {
  position: absolute;          /* 🔹 lo sacamos del flujo normal */
  left: 0;
  right: 0;
  bottom: -8px;                   /* 🔹 pegado al borde inferior del módulo */
  margin-top: 0;               /* 🔹 ya no hace falta el margin-top */
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(0,191,255,0.9);
}


/* (Opcional) Animación de giro para usar más adelante */
@keyframes hudSpeedDialRotateOuter {
  0% {
    transform:
      translateX(-50%)
      perspective(950px)
      rotateX(42deg)
      rotateZ(0deg);
  }
  100% {
    transform:
      translateX(-50%)
      perspective(950px)
      rotateX(42deg)
      rotateZ(360deg);
  }
}

@keyframes hudSpeedDialRotateInner {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(-360deg);
  }
}

/* Cuando quieras que giren, sólo añadís la clase .is-rotating al dial */
.hud-speed-dial.is-rotating {
  animation: hudSpeedDialRotateOuter 18s linear infinite;
}

.hud-speed-dial.is-rotating .hud-speed-arc {
  animation: hudSpeedDialRotateInner 14s linear infinite;
}


/* -----------------------------------
   RESPONSIVE
   ----------------------------------- */

@keyframes hudJoystickIdle {
  0%   { transform: translateY(0) rotateZ(0deg); }
  50%  { transform: translateY(-2px) rotateZ(1.5deg); }
  100% { transform: translateY(0) rotateZ(0deg); }
}

@media (max-width: 900px) {
  .hud-bottom-inner {
    padding: 12px 20px 10px;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .hud-bottom-core {
    grid-column: 1 / -1;
    order: -1;
  }

  .hud-bottom-joystick,
  .hud-bottom-speed {
    justify-self: center;
  }
}


/* ===============================
   AUTOPILOT SLIDE HATCH — CONTROL DE PILOTO AUTOMÁTICO
   (mismo sistema visual que el AUDIO SLIDE)
   =============================== */

/* Contenedor flotante, anclado al tablero */
.autopilot-hatch-floating {
  position: absolute;
  left: 72%;
  bottom: 86px;                 /* 🔺 arriba del audio */
  transform: translateX(-50%) scale(0.70);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* Solo visible cuando el HUD inferior está activo (modo cabina) */
body.header-mode .autopilot-hatch-floating {
  opacity: 1;
  pointer-events: auto;
}

.autopilot-hatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
}

/* Label superior */
.autopilot-hatch-label-top {
  text-align: center;
  line-height: 1.2;
}

.autopilot-hatch-main {
  display: block;
  font-size: 0.60rem;
  letter-spacing: 0.22em;
  color: rgba(0,191,255,0.96);
}

.autopilot-hatch-sub {
  display: block;
  margin-top: 1px;
  font-size: 0.48rem;
  letter-spacing: 0.20em;
  color: rgba(0,191,255,0.60);
}

/* Pista / ranura del slide */
.autopilot-hatch-track {
  position: relative;
  margin-top: 2px;
  width: 160px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,191,255,0.65);
  background:
    linear-gradient(to bottom, rgba(0,191,255,0.12), rgba(0,191,255,0.02));
  box-shadow:
    0 0 8px rgba(0,191,255,0.35),
    0 10px 24px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.autopilot-hatch-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  opacity: 0.75;
  pointer-events: none;
}

.autopilot-hatch-text--off { left: 14px;  color: rgba(0,191,255,0.55); }
.autopilot-hatch-text--on  { right:  14px; color: rgba(0,191,255,0.90); }

/* Tapa que se desliza */
.autopilot-hatch-cover {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  width: 88px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0,191,255,0.75);
  background:
    radial-gradient(circle at 30% 40%, rgba(0,191,255,0.25), transparent 55%),
    linear-gradient(to bottom, rgba(0,191,255,0.22), rgba(0,191,255,0.08));
  box-shadow:
    0 0 10px rgba(0,191,255,0.35),
    0 0 24px rgba(0,191,255,0.18);
  cursor: pointer;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, opacity 0.18s ease-out;
  display: grid;
  place-items: center;
}

.autopilot-hatch-grip {
  width: 34px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,191,255,0.55);
  box-shadow: 0 0 10px rgba(0,191,255,0.35);
  opacity: 0.85;
}

/* Estados ON/OFF */
.autopilot-hatch--off .autopilot-hatch-text--on  { opacity: 0.55; }
.autopilot-hatch--on  .autopilot-hatch-text--off { opacity: 0.55; }

.autopilot-hatch--on .autopilot-hatch-track {
  box-shadow:
    0 0 14px rgba(0,191,255,0.80),
    0 14px 32px rgba(0,191,255,0.40),
    0 18px 40px rgba(0, 0, 0, 0.95);
}

.autopilot-hatch--on .autopilot-hatch-cover {
  box-shadow:
    0 0 16px rgba(0,191,255,0.60),
    0 0 36px rgba(0,191,255,0.24);
}

/* Texto de estado debajo de la ranura */
.autopilot-hatch-status {
  margin-top: 2px;
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,191,255,0.78);
  text-align: center;
  white-space: nowrap;
}

/* Cuerpo apoyado sobre el tablero (misma perspectiva que audio) */
.autopilot-hatch-track,
.autopilot-hatch-status {
  transform-origin: center bottom;
  transform: perspective(1100px) rotateX(38deg);
}

/* Responsive: acompaña al audio */
@media (max-width: 900px) {
  .autopilot-hatch-floating {
    left: 68%;
    bottom: 62px;
    transform: translateX(-50%) scale(0.64);
  }
}

@media (max-width: 600px) {
  .autopilot-hatch-floating {
    left: 68%;
    bottom: 66px;
    transform: translateX(-50%) scale(0.60);
  }
}


/* =======================================================
   🌌 HUD TRANSITION OVERLAY — cambio de sección holográfico
   ======================================================= */
.hud-transition {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, 0.96); /* 🔹 antes 0.8 → ahora casi opaco */
  backdrop-filter: blur(3px) brightness(1.3);
  pointer-events: none;
  opacity: 0;
  z-index: 50; /* 🔹 ahora debajo del HUD (60) y del toggle (80) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
}

/* Líneas de scan holográficas */
.hud-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 191, 255, 0.1) 0px,
    rgba(0, 191, 255, 0.1) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: screen;
  animation: hud-scanlines 0.25s linear infinite;
  opacity: 0.55; /* antes 0.4 */
}

/* Shimmer / barrido cinematográfico (muy sutil) */
.hud-transition::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(0, 191, 255, 0.10) 42%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(0, 191, 255, 0.10) 58%,
      transparent 100%
    );
  transform: translateX(-35%) translateY(-10%) rotate(0deg);
}

@keyframes hudTransitionShimmer {
  0%   { opacity: 0; transform: translateX(-35%) translateY(-10%) rotate(0deg); }
  15%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateX(35%) translateY(10%) rotate(0deg); }
}

@keyframes hud-scanlines {
  from { background-position-y: 0; }
  to { background-position-y: 3px; }
}

/* Capa de “energía” holográfica sin usar imágenes */
.hud-transition-scan {
  position: absolute;
  inset: 0;
  background:
    /* halo superior izquierdo */
    radial-gradient(
      circle at 18% 0%,
      rgba(0, 191, 255, 0.22) 0%,
      rgba(0, 191, 255, 0.0) 38%
    ),
    /* halo inferior derecho */
    radial-gradient(
      circle at 82% 100%,
      rgba(0, 191, 255, 0.20) 0%,
      rgba(0, 191, 255, 0.0) 46%
    ),
    /* velo central */
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 191, 255, 0.09) 0%,
      rgba(0, 0, 0, 0.96) 70%
    ),
    /* líneas diagonales de “interferencia” muy suaves */
    linear-gradient(
      130deg,
      rgba(0, 191, 255, 0.10) 0%,
      transparent 30%,
      transparent 55%,
      rgba(0, 191, 255, 0.08) 75%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.65; /* antes 0.4 */
  pointer-events: none;
}


/* Texto central de enrutamiento */
.hud-transition-label {
  color: var(--cian-electrico);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,191,255,0.8);
  opacity: 0.9;
  z-index: 1;
}

/* Contenedor de texto + barra */
.hud-transition-inner {
  position: relative;
  z-index: 1;               /* por delante de las capas de scan */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Barra de carga holográfica — versión más minimal */
.hud-transition-bar {
  width: 260px;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0, 191, 255, 0.5);
  box-shadow:
    0 0 6px rgba(0, 191, 255, 0.6),
    0 0 14px rgba(0, 191, 255, 0.35);
  background: rgba(0, 0, 0, 0.85);
}

/* Relleno que progresa de 0% a 100% */
.hud-transition-bar-fill {
  width: 100%;
  height: 100%;
  transform: scaleX(0);              /* empieza vacía */
  transform-origin: left center;     /* llena de izquierda a derecha */
  background: linear-gradient(
    to right,
    rgba(0, 191, 255, 0.0) 0%,
    rgba(0, 191, 255, 0.5) 30%,
    rgba(0, 255, 255, 1.0) 80%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

/* Animación de llenado ligada a la duración de la pantalla (~0.9s) */
@keyframes hud-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Cuando la transición está activa, corre la barra de 0 a 100% */
.hud-transition.is-active .hud-transition-bar-fill {
  animation: hud-bar-fill 1.2s ease-out forwards;
}

/* Versión visible durante la transición */
.hud-transition.is-active {
  opacity: 1;
}

.hud-transition.is-active::after {
  animation: hudTransitionShimmer 0.85s ease-out 1;
}


/* === AION — Overlay de advertencia inicial === */
#aion-warning,
#aion-audio-prompt {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;             /* 🔹 negro absoluto, sin transparencia */
  z-index: 13000;               /* por encima de todo lo demás */
  opacity: 1;                   /* visible por defecto */
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


.warning-content,
.prompt-content {
  text-align: center;
  background: rgba(0, 30, 50, 0.6);
  border: 1px solid rgba(0, 191, 255, 0.4);
  padding: 2rem 2.5rem;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
  color: var(--cian-electrico);
  max-width: 500px;
  font-family: "IBM Plex Sans", system-ui;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.warning-content h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.prompt-content h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.prompt-content p {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  color: rgba(200, 255, 255, 0.8);
}

.prompt-buttons button,
.warning-content button {
  background: rgba(0, 191, 255, 0.2);
  border: 1px solid rgba(0, 191, 255, 0.6);
  color: var(--cian-electrico);
  padding: 0.6rem 1.2rem;
  margin: 0 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
}

.prompt-buttons button:hover,
.warning-content button:hover {
  background: rgba(0, 191, 255, 0.5);
  transform: scale(1.05);
}

/* Para el overlay negro, que el fade-out sea solo por opacity */
#aion-audio-prompt.hidden {
  visibility: visible;   /* sobreescribe el visibility:hidden de .hidden */
  opacity: 0;
  pointer-events: none;
}

/* Animación suave del contenido del popup (solo cartel) */
#aion-audio-prompt .prompt-content {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#aion-audio-prompt .prompt-content.is-hidden {
  opacity: 0;
  transform: translateY(6px) scale(0.97);
}


/* ==========================================================
   AION — ENTRY PROMPT (Wireframe upgrade) — AAA PASS
   Desktop: 2 cards / Mobile: stacked
   NO rompe IDs ni animación .prompt-content.is-hidden
   Tipografía/Paleta: Futura (head) + IBM Plex Sans (UI/body)
   Cyan #00BFFF / Nebula #A3E4F8 / Deep #008C92 / Petrol #043C50
   Off-black #0A0F14 / Off-white #F5FAFF
   ========================================================== */

#aion-audio-prompt .prompt-content.aion-entry{
  width: min(1040px, 92vw);
  max-width: 1040px;
  padding: 30px 34px;
  border-radius: 18px;

  text-align: center;
  text-transform: none;
  letter-spacing: normal;

  color: var(--off-white);
  font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* AAA: base Petrol/Off-black + energía Cyan + “nebula wash” */
  background:
    radial-gradient(120% 140% at 50% 0%,
      rgba(0,191,255,0.16) 0%,
      rgba(163,228,248,0.07) 24%,
      rgba(0,0,0,0.00) 62%),
    radial-gradient(140% 150% at 50% 120%,
      rgba(4,60,80,0.22) 0%,
      rgba(10,15,20,0.00) 58%),
    linear-gradient(to bottom,
      rgba(4,60,80,0.18),
      rgba(10,15,20,0.52));
  border: 1px solid rgba(245,250,255,0.38);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.14),
    0 0 0 2px rgba(0,0,0,0.22) inset,
    0 30px 78px rgba(0,0,0,0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  position: relative;
  overflow: hidden;
}

/* SIN GRID: solo halo/nebula + micro textura */
#aion-audio-prompt .prompt-content.aion-entry::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity: 0.40;
  background:
    radial-gradient(120% 110% at 50% 0%,
      rgba(0,191,255,0.20) 0%,
      rgba(163,228,248,0.10) 26%,
      rgba(0,0,0,0.00) 62%),
    radial-gradient(140% 140% at 50% 120%,
      rgba(0,140,146,0.16) 0%,
      rgba(0,0,0,0.00) 62%),
    /* micro film / scan MUY suave (no “interferencia barata”) */
    repeating-linear-gradient(
      to bottom,
      rgba(245,250,255,0.020) 0px,
      rgba(245,250,255,0.020) 1px,
      rgba(0,0,0,0.00) 6px
    );
  mix-blend-mode: screen;
}

/* Vignette + “film overlay” suave */
#aion-audio-prompt .prompt-content.aion-entry::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.70;
  background:
    radial-gradient(120% 120% at 50% 38%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.22) 56%,
      rgba(0,0,0,0.52) 100%);
  mix-blend-mode: overlay;
}

#aion-audio-prompt .entry-lang{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-bottom: 14px;
}

#aion-audio-prompt .entry-lang-label{
  font-family: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.84rem;
  color: rgba(245,250,255,0.88);
  text-shadow: 0 0 18px rgba(0,191,255,0.14);
}

/* Ranura */
#aion-audio-prompt .entry-lang-slider{
  --slot-w: 268px;
  --slot-h: 50px;
  --hatch-w: 96px;
  --hatch-h: 38px;

  position: relative;
  width: var(--slot-w);
  height: var(--slot-h);
  border-radius: 999px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Track “ranura” */
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(0,191,255,0.14) 0%,
      rgba(0,0,0,0.00) 58%),
    linear-gradient(to bottom,
      rgba(4,60,80,0.28),
      rgba(10,15,20,0.24));
  border: 1px solid rgba(245,250,255,0.26);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.10) inset,
    0 10px 26px rgba(0,0,0,0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}

/* ==========================================================
   ENTRY — LANGUAGE SLOT: chevrons de guía (ELEMENTOS REALES)
   (porque ::before/::after ya los usa la tapa y los fades)
   ========================================================== */

/* Ocultamos los botones legacy ◀ ▶ del HTML (quedan por compatibilidad) */
#aion-audio-prompt .entry-lang-arrow{ display: none; }

/* Flechas HUD */
#aion-audio-prompt .entry-lang-chevron{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;                 /* arriba de la tapa y de los fades */
  pointer-events: none;       /* no interfiere con drag */

  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  color: rgba(245,250,255,0.78);
  font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;

  background:
    radial-gradient(circle at 50% 35%, rgba(0,191,255,0.16), rgba(0,0,0,0.00) 62%),
    linear-gradient(to bottom, rgba(245,250,255,0.08), rgba(10,15,20,0.18));

  border: 1px solid rgba(245,250,255,0.18);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.10) inset,
    0 0 18px rgba(0,191,255,0.10);

  opacity: 0.72;
  text-shadow: 0 0 16px rgba(0,191,255,0.22);
}

#aion-audio-prompt .entry-lang-chevron.is-left{ left: 10px; }
#aion-audio-prompt .entry-lang-chevron.is-right{ right: 10px; }

@media (max-width: 860px){
  #aion-audio-prompt .entry-lang-chevron{
    opacity: 0.62;
    transform: translateY(-50%) scale(0.92);
  }
}


#aion-audio-prompt .entry-lang-slider:active{ cursor: grabbing; }

/* Tapa fija (hatch) — la “ventanita” que muestra solo 1 idioma */
#aion-audio-prompt .entry-lang-slider::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: var(--hatch-w);
  height: var(--hatch-h);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events:none;

  background:
    radial-gradient(120% 140% at 50% 0%,
      rgba(163,228,248,0.14) 0%,
      rgba(0,0,0,0.00) 60%),
    linear-gradient(to bottom,
      rgba(245,250,255,0.12),
      rgba(10,15,20,0.22));
  border: 1px solid rgba(0,191,255,0.40);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.24) inset,
    0 0 18px rgba(0,191,255,0.16);
}

/* Indicadores sutiles (NO botones): “hay más a los lados” */
#aion-audio-prompt .entry-lang-slider::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.75;
  background:
    /* fades laterales */
    linear-gradient(to right,
      rgba(10,15,20,0.70) 0%,
      rgba(10,15,20,0.00) 20%,
      rgba(10,15,20,0.00) 80%,
      rgba(10,15,20,0.70) 100%),
    /* micro chevrons (solo hint visual) */
    radial-gradient(circle at 18% 50%, rgba(0,191,255,0.24), rgba(0,0,0,0.00) 55%),
    radial-gradient(circle at 82% 50%, rgba(0,191,255,0.24), rgba(0,0,0,0.00) 55%);
}

/* Botones prev/next EXISTEN para compatibilidad/teclado,
   pero invisibles (no flechitas en UI). */
#aion-audio-prompt .entry-lang-arrow{
  position:absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none; /* UI sin botones */
}


#aion-audio-prompt .entry-lang-arrow:hover{
  transform: translateY(-1px);
  background: rgba(0,191,255,0.12);
  border-color: rgba(0,191,255,0.42);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.16) inset,
    0 0 22px rgba(0,191,255,0.12);
}

/* ==========================================================
   ENTRY LANG SLOT (RANURA) — track real bajo “tapita”
   - Sin flechas visibles (solo hints)
   - Track 300% + items 33.33% (cada item = 1 viewport)
   - Pill NO es flex centrado (esto arregla el “vacío”)
   ========================================================== */

#aion-audio-prompt .entry-lang-pill{
  /* El “agujero” real (viewport): SOLO se ve lo que pasa por acá */
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hatch-w);
  height: var(--hatch-h);
  transform: translate(-50%, -50%);

  border-radius: 999px;
  overflow: hidden;            /* ✅ recorta: no se ve nada “bajo la tapa” */
  cursor: grab;
  touch-action: pan-y;         /* permite drag horizontal sin matar scroll vertical */

  /* micro “borde” interno para que el agujero se lea mejor */
  box-shadow:
    0 0 0 1px rgba(245,250,255,0.14) inset,
    0 0 18px rgba(0,191,255,0.12) inset;
}

#aion-audio-prompt .entry-lang-pill:active{
  cursor: grabbing;
}

#aion-audio-prompt .entry-lang-pill:active{
  cursor: grabbing;
}

/* El span #entry-lang-current ahora ES el track */
#aion-audio-prompt #entry-lang-current.entry-lang-track{
  position: absolute;
  inset: 0;
  display: flex;
  width: 300%;
  height: 100%;
  align-items: stretch;
  justify-content: flex-start; /* importante: que el track arranque a la izquierda */
  will-change: transform;
}

/* Cada item ocupa 1/3 del track => 100% del viewport (ranura) */
#aion-audio-prompt #entry-lang-current.entry-lang-track .entry-lang-item{
  flex: 0 0 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  user-select: none;

  font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.92rem;

  color: rgba(245,250,255,0.90);
  text-shadow: 0 0 14px rgba(0,191,255,0.16);
  opacity: 0.55;              /* laterales “fantasma” reales */
  transition: opacity 180ms ease;
}

/* El activo se ve más “lockeado” */
#aion-audio-prompt #entry-lang-current.entry-lang-track .entry-lang-item.is-active{
  opacity: 0.98;
}

/* Apagamos los fantasmas viejos (ya no sirven) */
#aion-audio-prompt .entry-lang-pill::before,
#aion-audio-prompt .entry-lang-pill::after{
  content: "";
  display: none;
}

/* Hint debajo */
#aion-audio-prompt .entry-lang-hint{
  font-size: 0.82rem;
  color: rgba(245,250,255,0.56);
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

/* Focus AAA aunque los botones estén invisibles */
#aion-audio-prompt .entry-lang-slider:focus-within{
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.20) inset,
    0 0 0 3px rgba(0,191,255,0.22),
    0 0 26px rgba(0,191,255,0.14);
}

/* H1 vibe: 36–40px aprox en desktop (clamp) */
#aion-audio-prompt .entry-title{
  position: relative;
  z-index: 1;
  margin: 12px 0 8px;
  font-family: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  font-weight: 950;
  letter-spacing: 0.16em; /* +tracking (manifiesto) */
  text-transform: uppercase;
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  color: rgba(245,250,255,0.98);
  text-shadow:
    0 0 26px rgba(0,191,255,0.16),
    0 10px 34px rgba(0,0,0,0.30);
}

#aion-audio-prompt .entry-sub{
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-family: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  font-weight: 900;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: rgba(245,250,255,0.72);
}

#aion-audio-prompt .entry-body{
  position: relative;
  z-index: 1;
  margin: 0 auto 16px;
  max-width: 74ch;
  font-size: 1.03rem;   /* body 16–18px vibe */
  line-height: 1.55;
  color: rgba(245,250,255,0.86);
}

#aion-audio-prompt .entry-divider{
  position: relative;
  z-index: 1;
  margin: 14px 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;

  color: rgba(245,250,255,0.82);
  font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#aion-audio-prompt .entry-divider::before,
#aion-audio-prompt .entry-divider::after{
  content:"";
  height: 1px;
  width: clamp(60px, 12vw, 150px);
  background: rgba(245,250,255,0.28);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.12),
    0 0 18px rgba(0,191,255,0.12);
}

#aion-audio-prompt .entry-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* ✅ clave para que los botones queden SIEMPRE alineados entre ES/EN/JP */
#aion-audio-prompt .entry-card{
  position: relative;
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: 16px;

  display: flex;              /* <-- */
  flex-direction: column;     /* <-- */
  height: 100%;               /* <-- */

  background:
    radial-gradient(120% 140% at 18% 0%, rgba(0,191,255,0.14) 0%, rgba(0,0,0,0.00) 56%),
    radial-gradient(120% 140% at 85% 120%, rgba(0,140,146,0.10) 0%, rgba(0,0,0,0.00) 62%),
    linear-gradient(to bottom, rgba(4,60,80,0.22), rgba(10,15,20,0.34));
  border: 1px solid rgba(245,250,255,0.28);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.08) inset,
    0 20px 54px rgba(0,0,0,0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}



/* glow/lens interno (✅ sin cuadriculado interno) */
#aion-audio-prompt .entry-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.46;
  background:
    radial-gradient(circle at 15% 0%, rgba(0,191,255,0.16), transparent 58%),
    radial-gradient(circle at 88% 110%, rgba(163,228,248,0.10), transparent 64%);
}

/* enfoque AAA por modo */
#aion-audio-prompt .entry-card--full{
  border-color: rgba(0,191,255,0.46);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.16) inset,
    0 0 28px rgba(0,191,255,0.16),
    0 22px 62px rgba(0,0,0,0.54);
}

#aion-audio-prompt .entry-card--quick{
  border-color: rgba(245,250,255,0.24);
}

/* Badge recomendado (arriba, placa HUD) */
#aion-audio-prompt .entry-badge{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 0%, rgba(0,191,255,0.14), transparent 64%),
    linear-gradient(to bottom, rgba(245,250,255,0.14), rgba(245,250,255,0.06));
  border: 1px solid rgba(245,250,255,0.36);

  font-family: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  font-weight: 950;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: rgba(245,250,255,0.94);
  z-index: 2;

  box-shadow:
    0 0 0 1px rgba(0,191,255,0.12) inset,
    0 12px 26px rgba(0,0,0,0.38);
}

#aion-audio-prompt .entry-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 22px; /* deja aire para el badge en la card full */
  position: relative;
  z-index: 1;
}

#aion-audio-prompt .entry-card--quick .entry-card-head{
  padding-top: 0;
}

#aion-audio-prompt .entry-card-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;

  background:
    radial-gradient(circle at 50% 0%, rgba(0,191,255,0.18), transparent 62%),
    rgba(245,250,255,0.06);
  border: 1px solid rgba(245,250,255,0.24);
  box-shadow: 0 0 0 1px rgba(0,191,255,0.10) inset;
  color: rgba(245,250,255,0.92);
  font-weight: 900;
}

#aion-audio-prompt .entry-card-title{
  margin: 0;
  font-family: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 1.08rem;
  color: rgba(245,250,255,0.97);
}

#aion-audio-prompt .entry-card-text{
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(245,250,255,0.82);
}

/* Botones: UI IBM Plex (manifiesto) */
#aion-audio-prompt .entry-cta{
  position: relative;
  z-index: 1;

  /* ✅ empuja el CTA al mismo “nivel” aunque cambie el texto por idioma */
  margin-top: auto;

  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  white-space: nowrap; /* desktop: evita que el botón cambie de altura por idioma */
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#aion-audio-prompt .entry-cta--primary{
  background:
    radial-gradient(120% 180% at 50% 0%, rgba(0,191,255,0.26), transparent 62%),
    linear-gradient(to bottom, rgba(0,191,255,0.14), rgba(4,60,80,0.18));
  border: 1px solid rgba(0,191,255,0.58);
  color: rgba(245,250,255,0.98);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.18) inset,
    0 16px 40px rgba(0,0,0,0.36);
}

#aion-audio-prompt .entry-cta--ghost{
  background:
    radial-gradient(circle at 50% 0%, rgba(0,140,146,0.10), transparent 70%),
    linear-gradient(to bottom, rgba(245,250,255,0.10), rgba(10,15,20,0.20));
  border: 1px solid rgba(245,250,255,0.30);
  color: rgba(245,250,255,0.94);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.10) inset,
    0 16px 40px rgba(0,0,0,0.34);
}

#aion-audio-prompt .entry-cta:hover{
  transform: translateY(-1px);
  background: rgba(0,191,255,0.18);
  border-color: rgba(0,191,255,0.70);
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.20) inset,
    0 0 30px rgba(0,191,255,0.14);
}

#aion-audio-prompt .entry-cta:focus-visible,
#aion-audio-prompt .entry-lang-arrow:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.20) inset,
    0 0 0 3px rgba(0,191,255,0.26),
    0 0 26px rgba(0,191,255,0.14);
}

#aion-audio-prompt .entry-foot{
  position: relative;
  z-index: 1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(245,250,255,0.18);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: rgba(245,250,255,0.66);

  /* ✅ estabiliza altura para que el CTA no “baje/suba” por wrapping entre idiomas */
  min-height: 1.25em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive: apilado */
@media (max-width: 860px){
  #aion-audio-prompt .prompt-content.aion-entry{
    padding: 22px 18px;
  }
  #aion-audio-prompt .entry-grid{
    grid-template-columns: 1fr;
  }
  #aion-audio-prompt .entry-card{
    padding: 16px 16px 14px;
  }
  #aion-audio-prompt .entry-title{
    letter-spacing: 0.14em;
    font-size: clamp(1.35rem, 4.8vw, 1.85rem);
  }

  /* Mobile: permitir wrap si hace falta (evita cortes feos) */
  #aion-audio-prompt .entry-cta{
    white-space: normal;
  }
  #aion-audio-prompt .entry-foot{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}




/* === AION — HUD inferior “INSERT AION CORE” (BANNER ARCADE) === */

#aion-core-hud{
  position: fixed;
  left: 0;
  bottom: 26px;              /* mantenemos tu altura actual */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 9998;

  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s ease;
  cursor: pointer;
  pointer-events: auto;
}

#aion-core-hud.show{
  opacity: 1;
  visibility: visible;
}

/* BANNER base (full width) */
#aion-core-hud .aioncore-banner{
  position: relative;

  /* ✅ FULL WIDTH */
  width: 100vw;
  max-width: none;

  /* ✅ MÁS ALTO para dar aire (antes 96px) */
  height: 118px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* “zona segura” para que no quede pegado al borde */
  padding: 0 clamp(18px, 3.6vw, 64px);

  border-radius: 0px;

  /* ✅ borde externo más grueso (arriba/abajo) */
  border-top: 0;
  border-bottom: 0;

  /* ✅ background casi imperceptible */
  background: transparent;


  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* ✅ Fade global MÁS AGRESIVO hacia los extremos
     (ajustá estos % si querés más/menos fade)
     - 0%..18%: aparece
     - 82%..100%: desaparece
  */
  --aioncore-edge-fade: 18%;

  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) var(--aioncore-edge-fade),
    rgba(0,0,0,1) calc(100% - var(--aioncore-edge-fade)),
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) var(--aioncore-edge-fade),
    rgba(0,0,0,1) calc(100% - var(--aioncore-edge-fade)),
    rgba(0,0,0,0) 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}



/* Centro: INSERT | LOGO | AION CORE */
#aion-core-hud .aioncore-mid{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ más “tight” tipográfico */
  gap: 18px;

  flex: 1;
  min-width: 0;
}

/* ✅ tipografía del sistema (headline) + tracking HUD */
#aion-core-hud .aioncore-word{
  font-family: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  font-weight: 700;
  text-transform: uppercase;

  /* tracking estilo HUD */
  letter-spacing: 0.18em;

  /* tamaño consistente con el look del boceto */
  font-size: 30px;
  line-height: 1;

  color: rgba(163,228,248,0.92);
  text-shadow:
    0 0 12px rgba(0,191,255,0.35),
    0 0 26px rgba(0,191,255,0.12);

  white-space: nowrap;
}

/* Ajuste fino para balancear “INSERT” vs “AION CORE” */
#aion-core-hud .aioncore-word-left{  margin-right: 4px; }
#aion-core-hud .aioncore-word-right{ margin-left:  4px; }

/* Logo del medio */
#aion-core-hud .aioncore-logo{
  height: 56px;
  width: auto;
  filter:
    drop-shadow(0 0 12px rgba(0,191,255,0.55))
    drop-shadow(0 0 26px rgba(0,191,255,0.22));
  opacity: 0.95;
}

/* Chevrons (izq/der) — más gruesos, más pegados al texto, y más fade a los extremos */
#aion-core-hud .aioncore-chevrons{
  position: relative;

  /* ocupa el espacio sobrante */
  flex: 1 1 auto;
  width: auto;
  max-width: 560px;

  height: 52px;
  opacity: 0.98;
  pointer-events: none;

  /* glow liviano */
  filter: drop-shadow(0 0 14px rgba(0,191,255,0.18));
}

/* Pegarlos más al texto (micro “overlap” controlado) */
#aion-core-hud .aioncore-chevrons-left{  margin-right: -12px; }
#aion-core-hud .aioncore-chevrons-right{ margin-left:  -12px; }

/* Fade SOLO hacia el borde EXTERNO (más agresivo) */
#aion-core-hud .aioncore-chevrons-left{
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,1) 100%);
}

#aion-core-hud .aioncore-chevrons-right{
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 66%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 66%,
    rgba(0,0,0,0) 100%);
}

/* Patrón de FLECHAS (SVG liviano, repetido) — MÁS GRUESAS */
#aion-core-hud .aioncore-chevrons::before{
  content:"";
  position:absolute;
  inset:0;

  /* IMPORTANTE: alineamos el patrón para que “toque” el borde interno cerca del texto */
  background-repeat: repeat-x;
  background-size: 92px 52px;
  background-position: right center;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='52' viewBox='0 0 92 52'%3E%3Cpath d='M4 6 L38 26 L4 46 L24 46 L58 26 L24 6 Z' fill='%2300BFFF' fill-opacity='0.90'/%3E%3Cpath d='M34 6 L68 26 L34 46 L54 46 L88 26 L54 6 Z' fill='%2300BFFF' fill-opacity='0.65'/%3E%3C/svg%3E");

  /* micro blur para el glow sin matar performance */
  filter: blur(0.35px);
  opacity: 0.95;
}

/* Lado derecho: flechas invertidas (apuntan hacia la izquierda) + alineación al borde interno */
#aion-core-hud .aioncore-chevrons-right::before{
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='52' viewBox='0 0 92 52'%3E%3Cpath d='M88 6 L54 26 L88 46 L68 46 L34 26 L68 6 Z' fill='%2300BFFF' fill-opacity='0.90'/%3E%3Cpath d='M58 6 L24 26 L58 46 L38 46 L4 26 L38 6 Z' fill='%2300BFFF' fill-opacity='0.65'/%3E%3C/svg%3E");
}

/* ==========================================================
   CHEVRONS — ANIMACIÓN “RUNWAY LIGHTS”
   Iluminación que corre desde los extremos hacia el centro
   (sin JS, bajo costo)
   ========================================================== */

/* Capa de brillo animada (overlay) */
#aion-core-hud .aioncore-chevrons::after{
  content:"";
  position:absolute;
  inset:0;

  /* mismo patrón que ::before (pero más brillante) */
  background-repeat: repeat-x;
  background-size: 92px 52px;
  background-position: right center;

  /* glow suave (barato) */
  filter: blur(0.45px);
  opacity: 0.0; /* por defecto apagado */
  pointer-events: none;

  /* “ventana” de luz: una franja estrecha que se mueve */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 46%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 54%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 46%,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 54%,
    rgba(0,0,0,0) 100%);

  /* importante: más grande para que la franja pueda “viajar” */
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* estado inicial */
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}

/* Brillo: lado izquierdo (apunta ->) */
#aion-core-hud .aioncore-chevrons-left::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='52' viewBox='0 0 92 52'%3E%3Cpath d='M4 6 L38 26 L4 46 L24 46 L58 26 L24 6 Z' fill='%23A3E4F8' fill-opacity='0.95'/%3E%3Cpath d='M34 6 L68 26 L34 46 L54 46 L88 26 L54 6 Z' fill='%2300BFFF' fill-opacity='0.75'/%3E%3C/svg%3E");
}

/* Brillo: lado derecho (apunta <-) */
#aion-core-hud .aioncore-chevrons-right::after{
  background-position: left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='52' viewBox='0 0 92 52'%3E%3Cpath d='M88 6 L54 26 L88 46 L68 46 L34 26 L68 6 Z' fill='%23A3E4F8' fill-opacity='0.95'/%3E%3Cpath d='M58 6 L24 26 L58 46 L38 46 L4 26 L38 6 Z' fill='%2300BFFF' fill-opacity='0.75'/%3E%3C/svg%3E");
}

/* Solo animar cuando el HUD está visible (menos costo) */
#aion-core-hud.show .aioncore-chevrons::after{
  opacity: 1;
}

/* Runway: de EXTREMO -> CENTRO
   - Left: va de izquierda a derecha
   - Right: va de derecha a izquierda
   Usamos steps() para dar “saltitos” tipo luces discretas.
*/
#aion-core-hud.show .aioncore-chevrons-left::after{
  animation: aionRunwayL 1.55s steps(10, end) infinite;
}
#aion-core-hud.show .aioncore-chevrons-right::after{
  animation: aionRunwayR 1.55s steps(10, end) infinite;
}

/* Izquierda: corre desde el EXTREMO hacia el CENTRO (hacia el texto) */
@keyframes aionRunwayL{
  0%   { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  100% { -webkit-mask-position: 0% 0%;   mask-position: 0% 0%; }
}

/* Derecha: corre desde el EXTREMO hacia el CENTRO (hacia el texto) */
@keyframes aionRunwayR{
  0%   { -webkit-mask-position: 0% 0%;   mask-position: 0% 0%; }
  100% { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
}

/* Responsive */
@media (max-width: 720px){
  #aion-core-hud{ bottom: 22px; }

	#aion-core-hud .aioncore-banner{
	  height: 98px;
	  padding: 0 18px;

	  /* mismo fade pero un toque menos agresivo en pantallas chicas */
	  --aioncore-edge-fade: 16%;
	}

  #aion-core-hud .aioncore-word{
    font-size: 22px;
    letter-spacing: 0.16em;
  }

  #aion-core-hud .aioncore-chevrons{
    width: 180px;
    height: 38px;
  }

  #aion-core-hud .aioncore-logo{
    height: 48px;
  }
}

/* === AION — Overlay de transición (fade a negro) === */
#aion-transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;                  /* invisible por defecto */
  pointer-events: none;        /* no bloquea clicks cuando está transparente */
  z-index: 12000;
  transition: opacity 0.7s ease;
}

#aion-transition-overlay.is-active {
  opacity: 1;                  /* negro completo */
  pointer-events: auto;        /* opcional: bloquea interacción mientras está activo */
}


/* INTRO — Estado de arrastre al expulsar el AION CORE desde el HUD */
#hud-core-logo.core-eject-dragging {
  cursor: grabbing;
}



/* ==========================================================
   AUTOPILOT FX — hologram boot / shutdown (AAA)
   FIX: mantener transform BASE (centro/perspectiva) para que no se corra
   ========================================================== */

/* JOYSTICK — mantiene translateX(-50%) + perspectiva */
@keyframes aionJoyBoot {
  0% {
    opacity: 0;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(10px) scale(0.94);
    filter: blur(6px) brightness(0.65);
  }
  45% {
    opacity: .75;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(2px) scale(1.01);
    filter: blur(1.2px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(0px) scale(1);
    filter: blur(0px) brightness(1);
  }
}

@keyframes aionJoyShutdown {
  0% {
    opacity: 1;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(0px) scale(1);
    filter: blur(0px) brightness(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(8px) scale(0.96);
    filter: blur(6px) brightness(0.65);
  }
}

/* NAV DRIVE — mantiene translateX(-50%) + perspectiva */
@keyframes aionSpeedBoot {
  0% {
    opacity: 0;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(10px) scale(0.94);
    filter: blur(6px) brightness(0.65);
  }
  45% {
    opacity: .75;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(2px) scale(1.01);
    filter: blur(1.2px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(0px) scale(1);
    filter: blur(0px) brightness(1);
  }
}

@keyframes aionSpeedShutdown {
  0% {
    opacity: 1;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(0px) scale(1);
    filter: blur(0px) brightness(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) perspective(950px) rotateX(42deg) translateY(8px) scale(0.96);
    filter: blur(6px) brightness(0.65);
  }
}

/* Scan sweep sutil */
@keyframes aionScanSweep {
  0%   { opacity: 0; transform: translateY(-18px); }
  15%  { opacity: .35; }
  50%  { opacity: .15; }
  100% { opacity: 0; transform: translateY(42px); }
}

/* Aplicación FX (scoped al HUD bottom para no pegarle a otra cosa) */
body.autopilot-fx-nav #hud-bottom .hud-bottom-joystick .hud-joystick-stack{
  animation: aionJoyBoot 900ms cubic-bezier(.2,.9,.2,1) both;
  will-change: transform, opacity, filter;
}

body.autopilot-fx-site #hud-bottom .hud-bottom-joystick .hud-joystick-stack{
  animation: aionJoyShutdown 520ms ease-in both;
  will-change: transform, opacity, filter;
}

body.autopilot-fx-nav #hud-bottom .hud-bottom-speed .hud-speed-dial{
  animation: aionSpeedBoot 900ms cubic-bezier(.2,.9,.2,1) both;
  will-change: transform, opacity, filter;
}

body.autopilot-fx-site #hud-bottom .hud-bottom-speed .hud-speed-dial{
  animation: aionSpeedShutdown 520ms ease-in both;
  will-change: transform, opacity, filter;
}

/* Sweep overlay solo cuando “prende” */
body.autopilot-fx-nav #hud-bottom .hud-bottom-joystick .hud-joystick-stack::after,
body.autopilot-fx-nav #hud-bottom .hud-bottom-speed .hud-speed-dial::after{
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  height: 2px;
  border-radius: 999px;
  background: rgba(0,191,255,0.70);
  opacity: 0;
  filter: blur(0.4px);
  animation: aionScanSweep 900ms ease-out both;
  pointer-events: none;
}


/* =========================================
   HUD CORE — PNG BASE (sin romper lógica actual)
   ========================================= */

:root{
  /* 🔧 Ajustá este valor para escalar el PNG */
  --hud-core-base-png-width: 520px;  /* probá 300 / 340 / 380 / 420 */
  --hud-core-base-png-max: 60vw;     /* límite responsive */
  --hud-core-base-png-bottom: -60px;  /* sube/baja el PNG */
  
    /* =========================
     HUD IZQ — panel + slider
     ========================= */
  --hud-left-panel-scale: 0.35;     /* 🔧 tamaño del panel izquierdo (0.40–0.70) */
  --hud-left-panel-left: 100px;      /* 🔧 mover a izquierda/derecha */
  --hud-left-panel-bottom: 220px;    /* 🔧 mover arriba/abajo */

  /* Slider (coordenadas dentro del PNG, ANTES de escalar) */
  --hud-left-speed-x: 210px;        /* 🔧 izquierda/derecha dentro del panel */
  --hud-left-speed-bottom: -400px;    /* 🔧 sube/baja dentro del panel */
  --hud-left-speed-w: 1400px;        /* 🔧 largo del riel */
  --hud-left-speed-h: 44px;         /* 🔧 alto del riel */
  --hud-left-speed-handle-w: 200px;  /* 🔧 ancho del “bloquecito” */
  --hud-left-speed-handle-h: 100px;  /* 🔧 alto del “bloquecito” */

}

/* Capa PNG detrás del core */
.hud-bottom-core{
  position: relative; /* ya lo tenías, lo reafirmamos */
}

.hud-core-base-png{
  position: absolute;
  left: 50%;
  bottom: var(--hud-core-base-png-bottom);
  transform: translateX(-50%);
  width: min(var(--hud-core-base-png-width), var(--hud-core-base-png-max));
  height: auto;
  display: block;
  z-index: 0;
  pointer-events: none; /* no tapa el click del botón/logo */
  user-select: none;
}

/* ============================
   CORE — BASE ENERGY GLOW (FX)
   ============================ */

.hud-core-baseglow{
  position: absolute;
  left: 50%;
  bottom: var(--hud-core-baseglow-bottom);
  width: var(--hud-core-baseglow-size);
  height: var(--hud-core-baseglow-size);
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0; /* debajo del vortex y del logo, arriba del PNG por blend */

  /* glow “pool” */
  background: radial-gradient(circle at 50% 50%,
    rgba(0,191,255,0.95) 0%,
    rgba(0,191,255,0.55) 22%,
    rgba(0,191,255,0.22) 46%,
    rgba(0,191,255,0.00) 75%
  );

  opacity: 0;
  filter:
    blur(0.6px)
    drop-shadow(0 0 18px rgba(0,191,255,0.50))
    drop-shadow(0 0 44px rgba(0,191,255,0.22));

  mix-blend-mode: screen;
  transition: opacity 220ms ease, filter 220ms ease;
}

/* Solo visible cuando el core está puesto */
body.core-inserted .hud-core-baseglow{
  opacity: var(--hud-core-baseglow-opacity);
  animation: aionCoreBaseGlowBreath var(--hud-core-baseglow-breath) ease-in-out infinite;
}

@keyframes aionCoreBaseGlowBreath{
  0%, 100%{
    transform: translateX(-50%) scale(0.92);
    filter:
      blur(0.6px)
      drop-shadow(0 0 14px rgba(0,191,255,0.42))
      drop-shadow(0 0 34px rgba(0,191,255,0.18));
  }
  50%{
    transform: translateX(-50%) scale(1.06);
    filter:
      blur(0.9px)
      drop-shadow(0 0 22px rgba(0,191,255,0.66))
      drop-shadow(0 0 58px rgba(0,191,255,0.28));
  }
}


/* Aseguramos que el core actual quede por arriba */
.hud-core-emitter,
.hud-core-logo,
.hud-core-label{
  position: relative;
  z-index: 2;
}

/* ============================
   CORE — VORTEX PARTICLES (FX)
   - back: detrás del logo
   - front: delante del logo
   ============================ */

:root{
  /* Ajustes a ojo */
  --hud-core-vortex-w: 150px;   /* 420px -> más angosto (tubo) */
  --hud-core-vortex-h: 120px;   /* podés dejarlo igual */

  /* dónde nace (ajustá a ojo) */
  --hud-core-vortex-bottom: 80px;  /* -10px -> sube el origen hacia el aro */

  /* intensidad */
  --hud-core-vortex-opacity: 0.6;
  
    /* ✅ NUEVO: CORE BASE GLOW (ajustable a ojo) */
  --hud-core-baseglow-size: 140px;     /* tamaño del glow */
  --hud-core-baseglow-bottom: 70px;    /* sube/baja el glow (alinealo al aro) */
  --hud-core-baseglow-opacity: 0.55;   /* intensidad máxima */
  --hud-core-baseglow-breath: 2.4s;    /* velocidad de respiración */
  
}

.hud-bottom-core{
  position: relative; /* (ya lo tenés, lo reafirmo) */
}

/* capa base: ocupa un rect centrado */
.hud-core-vortex-layer{
  position: absolute;
  left: 50%;
  bottom: var(--hud-core-vortex-bottom);
  width: var(--hud-core-vortex-w);
  height: var(--hud-core-vortex-h);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease, filter 220ms ease;
  filter: drop-shadow(0 0 14px rgba(0,191,255,0.25));
}

/* Solo visible cuando el core está puesto */
body.core-inserted .hud-core-vortex-layer{
  opacity: var(--hud-core-vortex-opacity);
}

/* Detrás del logo (pero sobre el PNG base) */
.hud-core-vortex-back{ z-index: 1; }

/* Delante del logo */
.hud-core-vortex-front{ z-index: 3; }


/* =========================================
   HUD RIGHT PANEL — flotante (no afecta layout)
   Visible SOLO con AION CORE activado
   ========================================= */

.hud-right-panel{
  display: block;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}


/* Solo visible cuando el core está “puesto” */
body.core-inserted .hud-right-panel{
  opacity: 1;
}

/* =========================================
   HUD LEFT PANEL — flotante (no afecta layout)
   Visible SOLO con AION CORE activado
   ========================================= */

.hud-left-panel-wrap{
  position: fixed;

  /* fallbacks */
  left:   var(--hud-left-panel-left, 24px);
  bottom: var(--hud-left-panel-bottom, 24px);

  /* escala (default 0.35 para matchear el derecho) */
  transform: translateY(0) scale(var(--hud-left-panel-scale, 0.35));
  transform-origin: left bottom;

  /* IMPORTANTE: que NO tape interacción del joystick */
  pointer-events: none;

  z-index: 999; /* visible como el derecho (no afecta layout) */

  opacity: 0;                 /* oculto por defecto */
  transition: opacity 0.2s ease;
}

body.core-inserted .hud-left-panel-wrap{
  opacity: 1;                 /* visible solo con core insertado */
  pointer-events: none;       /* NO lo habilites todavía (así no rompe joystick) */
}

.hud-left-panel{
  display: block;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;       /* el PNG nunca debe capturar eventos */
}


/* =========================================================
   LEFT PANEL SPEED SLIDER (UI ONLY) — NO LOGIC
   - Se posiciona usando las variables que ya tenés en :root
   - Solo muestra el handle, NO dibuja una barra nueva
   ========================================================= */

/* Contenedor del riel (solo el área clickable / draggable) */
.hud-left-speed{
  position: absolute;
  left:   var(--hud-left-speed-x, 290px);
  bottom: var(--hud-left-speed-bottom, 102px);

  width:  var(--hud-left-speed-w, 210px);
  height: var(--hud-left-speed-h, 44px);

  --hud-left-speed-drag-sens: 1.00; /* subilo/bajalo a ojo */

  z-index: 2;
  opacity: 1;
  pointer-events: none; /* sólo el handle */
}


/* Mostrar solo cuando el core está puesto Y el autopilot está OFF */
body.core-inserted:not(.autopilot-on) .hud-left-speed{
  opacity: 1;
  pointer-events: auto;
}

/* Rail: NO dibujamos barra (tu barra ya existe en el PNG) */
.hud-left-speed-rail{
  position: absolute;
  inset: 0;
  background: transparent;
}

/* Handle */
.hud-left-speed-handle{
  position: absolute;
  top: 50%;
  left: 0;

  width:  calc(var(--hud-left-speed-handle-w, 140px) * var(--hud-left-panel-scale, 0.35));
  height: calc(var(--hud-left-speed-handle-h, 44px)  * var(--hud-left-panel-scale, 0.35));

  transform: translateX(var(--hud-left-speed-handle-x, 0px)) translateY(-50%);
  transform-origin: center;

  /* Más sólido/visible */
  background: rgba(0, 191, 255, 0.36);
  border: 2px solid rgba(0, 191, 255, 0.75);

  /* Más “rectangular”, menos píldora */
  border-radius: 10px;

  /* Glow más presente */
  box-shadow:
    0 0 0 1px rgba(0,191,255,0.22) inset,
    0 0 14px rgba(0,191,255,0.55),
    0 0 34px rgba(0,191,255,0.28);

  cursor: grab;
  padding: 0;
}

.hud-left-speed-handle:active{
  cursor: grabbing;
}


/* Feedback interacción */
.hud-left-speed-handle:active{
  cursor: grabbing;
}



/* ===============================
   AUTOPILOT — NUEVO BOTÓN EN PANEL IZQUIERDO
   (Wrapper escalado como el panel → offsets “reales”)
   =============================== */

:root{
  /* Ajustes rápidos (valores en coordenadas “sin escala”) */
  --hud-left-ap-x: 270px;   /* mueve izq/der dentro del panel */
  --hud-left-ap-y: -500px;    /* mueve arriba/abajo dentro del panel */
  --hud-left-ap-w: 400px;   /* ancho del botón */
  --hud-left-ap-h: 64px;    /* alto del botón */
}

/* Wrapper: MISMO anclaje + MISMA escala que el panel izquierdo */
.hud-left-autopilot-wrap{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;

  z-index: 3;
  opacity: 1;
  pointer-events: none;
}
.hud-left-autopilot-btn{
  pointer-events: auto;
}


/* Visible SOLO con core insertado (misma lógica que paneles) */
body.core-inserted .hud-left-autopilot-wrap{
  opacity: 1;
}

/* El botón vive “dentro” del wrapper escalado */
.hud-left-autopilot-btn{
  position: absolute;

  left:   var(--hud-left-ap-x);
  bottom: var(--hud-left-ap-y);

  width:  var(--hud-left-ap-w);
  height: var(--hud-left-ap-h);

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  padding: 10px 14px;
  border-radius: 12px;

  /* Estética HUD */
  background: radial-gradient(120% 180% at 50% 0%,
    rgba(0,191,255,0.14) 0%,
    rgba(0,191,255,0.06) 45%,
    rgba(0,0,0,0.18) 100%);
  border: 1px solid rgba(0,191,255,0.45);
  box-shadow:
    0 0 16px rgba(0,191,255,0.18),
    inset 0 0 0 1px rgba(163,228,248,0.18);

  color: rgba(163,228,248,0.95);
  font-family: var(--font-ui, var(--font-body, system-ui, Arial));
  text-transform: uppercase;
  letter-spacing: 0.14em;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  pointer-events: auto; /* ✅ solo el botón recibe click */
}

/* Tipos */
.hud-left-autopilot-btn .ap-label{
  font-size: 32px;
  line-height: 1;
  opacity: 0.92;
}

.hud-left-autopilot-btn .ap-state{
  display: none !important;
}


/* Dot indicador */
.hud-left-autopilot-btn .ap-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(163,228,248,0.25);
  box-shadow: 0 0 10px rgba(0,191,255,0.12);
  border: 1px solid rgba(0,191,255,0.28);
}

/* Estado ON/OFF (sincroniza con body.autopilot-on) */
body.autopilot-on .hud-left-autopilot-btn{
  border-color: rgba(0,191,255,0.72);
  box-shadow:
    0 0 18px rgba(0,191,255,0.28),
    inset 0 0 0 1px rgba(163,228,248,0.22);
}
body.autopilot-on .hud-left-autopilot-btn .ap-dot{
  background: rgba(0,191,255,0.85);
  box-shadow:
    0 0 14px rgba(0,191,255,0.55),
    0 0 28px rgba(0,191,255,0.25);
}

/* =============================
   FIX CLICK AUTOPILOT BTN
   ============================= */

/* El panel izquierdo NO debe capturar clicks */
#hud-left-panel-wrap,
#hud-left-panel{
  pointer-events: none !important;
}

/* El botón debe quedar por encima de todo */
#hud-left-autopilot-wrap{
  z-index: 9999 !important;
  pointer-events: none !important; /* el wrapper no captura */
}
#hud-left-autopilot-btn{
  pointer-events: auto !important; /* el botón sí */
}

/* Mata definitivamente el slider viejo (por si reaparece) */
.autopilot-hatch-floating{
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Center AUTOPILOT + dot dentro del botón */
.hud-left-autopilot-btn{
  justify-content: center !important;  /* en vez de flex-start */
}

/* Por las dudas, que nada empuje a la derecha */
.hud-left-autopilot-btn .ap-state{
  margin-left: 0 !important;
}

/* Ajuste fino opcional (separación entre texto y luz) */
.hud-left-autopilot-btn{
  gap: 10px !important;
}


/* =========================================
   RIGHT PANEL — ORBE IDIOMA (GRANDE)
   - Solo diseño (sin lógica)
   - Visible SOLO con core insertado
   - Flota arriba del panel derecho
   ========================================= */

:root{
  /* Reusar escala/posición del panel derecho (ajustables) */
  --hud-right-panel-scale: 0.35;     /* ✅ mismo scale que el panel */
  --hud-right-panel-right: 100px;    /* ✅ mismo right que el panel */
  --hud-right-panel-bottom: 20px;    /* ✅ mismo bottom que el panel */

  /* ORBE (coordenadas "sin escala", relativas al ancla right/bottom del panel) */
  --hud-right-orb-x: 330px;          /* 🔧 mueve la orbe hacia ADENTRO (izquierda) */
  --hud-right-orb-y: 300px;          /* 🔧 mueve la orbe hacia ARRIBA */
  --hud-right-orb-size: 250px;       /* 🔧 tamaño orbe */

  /* AUDIO ICON (coordenadas "sin escala", relativas al mismo ancla) */
  --hud-right-audio-x: 580px;        /* 🔧 AJUSTE FINO: mover ícono hacia adentro (izq) */
  --hud-right-audio-y: 38px;         /* 🔧 AJUSTE FINO: subir/bajar en el “zócalo” */
  --hud-right-audio-w: 170px;        /* 🔧 ancho del botón */
  --hud-right-audio-h: 80px;         /* 🔧 alto del botón */
  --hud-right-audio-ico-size: 50px; /* <- AJUSTÁ ESTO A OJO */
  
    /* MAIL ICON (coordenadas "sin escala", relativas al mismo ancla) */
  --hud-right-mail-x: 190px;        /* 🔧 mover botón mail (más chico = más hacia la derecha) */
  --hud-right-mail-y: 38px;         /* 🔧 subir/bajar */
  --hud-right-mail-w: 150px;        /* 🔧 ancho */
  --hud-right-mail-h: 70px;         /* 🔧 alto */
  --hud-right-mail-ico-size: 80px;  /* <- AJUSTÁ ESTO A OJO (solo el ícono) */

  --hud-right-png-x: 0px;  /* + = mueve a la derecha, - = izquierda */
  --hud-right-png-y: 0px;  /* + = baja, - = sube */

}

/* Tamaño SOLO del SVG del ícono de audio */
.hud-right-audio-ico svg{
  width:  var(--hud-right-audio-ico-size);
  height: var(--hud-right-audio-ico-size);
}

/* (opcional pero recomendado) unificamos el panel derecho para usar variables */
.hud-right-panel{
  right:  var(--hud-right-panel-right, 100px);
  bottom: var(--hud-right-panel-bottom, 30px);
  transform: scale(var(--hud-right-panel-scale, 0.35));
}



/* Visible solo cuando el core está puesto (misma lógica que el panel) */
body.core-inserted .hud-right-lang-orb{
  opacity: 1;
  pointer-events: auto;
}

/* =========================================
   RIGHT PANEL — AUDIO ICON (CLICK TOGGLE)
   - Reusa escala/posición del panel derecho
   - Visible SOLO con core insertado
   ========================================= */



body.core-inserted .hud-right-audio{
  opacity: 1;
  pointer-events: auto;
}

.hud-right-audio-btn{
  position: absolute;
  right:  var(--hud-right-audio-x, 270px);
  bottom: var(--hud-right-audio-y, 42px);

  width:  var(--hud-right-audio-w, 170px);
  height: var(--hud-right-audio-h, 72px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background:
    radial-gradient(70% 110% at 50% 45%,
      rgba(0,191,255,0.18) 0%,
      rgba(0,191,255,0.06) 52%,
      rgba(0,0,0,0) 78%);

  border: 1px solid rgba(0,191,255,0.42);
  border-radius: 18px;

  color: rgba(245,250,255,0.92);

  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.20),
    inset 0 0 24px rgba(0,191,255,0.22),
    0 0 22px rgba(0,191,255,0.16);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}


.hud-right-audio-btn:active{
  transform: translateY(1px);
}

.hud-right-audio-state{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 28px;        /* antes 14px */
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.95;
}

.hud-right-audio-btn.is-muted{
  opacity: 0.55;
  filter: saturate(0.85);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.08),
    inset 0 0 10px rgba(0,191,255,0.08),
    0 0 10px rgba(0,191,255,0.06);
}

.hud-right-audio-btn:not(.is-muted){
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.16),
    inset 0 0 22px rgba(0,191,255,0.22),
    0 0 26px rgba(0,191,255,0.16);
}

/* ondas: en muted se “apagan” */
.hud-right-audio-btn.is-muted .wave{
  opacity: 0.15;
}

.hud-right-audio-btn:not(.is-muted) .wave{
  opacity: 0.95;
}


/* Tamaño SOLO del SVG del ícono de mail */
.hud-right-mail-ico svg{
  width:  var(--hud-right-mail-ico-size);
  height: var(--hud-right-mail-ico-size);
}

/* =========================================
   RIGHT PANEL — MAIL ICON (GO CONTACT)
   - Reusa escala/posición del panel derecho
   - Visible SOLO con core insertado
   ========================================= */

body.core-inserted .hud-right-mail{
  opacity: 1;
  pointer-events: auto;
}

.hud-right-mail-btn{
  position: absolute;
  right:  var(--hud-right-mail-x, 370px);
  bottom: var(--hud-right-mail-y, 38px);

  width:  var(--hud-right-mail-w, 170px);
  height: var(--hud-right-mail-h, 80px);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(70% 110% at 50% 45%,
      rgba(0,191,255,0.14) 0%,
      rgba(0,191,255,0.05) 52%,
      rgba(0,0,0,0) 78%);

  border: 1px solid rgba(0,191,255,0.42);
  border-radius: 18px;

  color: rgba(245,250,255,0.92);

  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.18),
    inset 0 0 20px rgba(0,191,255,0.18),
    0 0 18px rgba(0,191,255,0.12);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.hud-right-mail-btn:hover{
  filter: brightness(1.08) saturate(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(0,191,255,0.26),
    inset 0 0 26px rgba(0,191,255,0.24),
    0 0 26px rgba(0,191,255,0.18),
    0 0 60px rgba(0,191,255,0.10);
}

.hud-right-mail-btn:active{
  transform: translateY(1px);
}

.hud-right-mail-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(245,250,255,0.14),
    0 0 0 4px rgba(0,191,255,0.22),
    inset 0 0 0 1px rgba(0,191,255,0.20),
    inset 0 0 22px rgba(0,191,255,0.20);
}


.hud-right-lang-orb,
.hud-right-audio,
.hud-right-mail{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;

  /* Ya no hace falta opacity acá: lo controla el wrapper */
  opacity: 1;
  pointer-events: none;
}

/* Los botones sí reciben interacción */
.hud-right-lang-btn,
.hud-right-audio-btn,
.hud-right-mail-btn{
  pointer-events: auto;
}


/* Offset SOLO del PNG derecho (no mueve orbe ni íconos) */
#hud-right-panel{
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(var(--hud-right-png-x), var(--hud-right-png-y));
  transform-origin: right bottom;
  pointer-events: none;
}


/* =========================================================
   HOLO PANELS — FLOAT SYSTEM (aplica a PNG + UI del panel)
   - levitación idle (suave)
   - glow breathing + hover boost
   - micro-flicker SOLO con autopilot ON
   - luz de proyección (halo) sobre fondo estrellas
   - estado inactivo: autopilot OFF baja energía
   ========================================================= */

/* Contenedor fijo (anclaje) */
.hud-panel-float{
  position: fixed;
  width: 1px;
  height: 1px;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Visible sólo cuando core está insertado */
body.core-inserted .hud-panel-float{
  opacity: 1;
}

/* Left anchor + scale */
.hud-panel-float--left{
  left:   var(--hud-left-panel-left, 24px);
  bottom: var(--hud-left-panel-bottom, 24px);
  transform: scale(var(--hud-left-panel-scale, 0.35));
  transform-origin: left bottom;
}

/* Right anchor + scale */
.hud-panel-float--right{
  right:  var(--hud-right-panel-right, 100px);
  bottom: var(--hud-right-panel-bottom, 30px);
  transform: scale(var(--hud-right-panel-scale, 0.35));
  transform-origin: right bottom;
}

/* “Energía” base (inactivo por defecto) */
.hud-panel-float{
  --panel-energy: 0.55;      /* autopilot OFF */
  --panel-levitate: 1;       /* factor de levitación */
}

/* Calibración halo (brillo de proyección) */
.hud-panel-float--left{
  /* centro del halo medido desde el ancla left/bottom */
  --panel-halo-x: 450px;  /* mové este a ojo */
  --panel-halo-y: 450px;    /* bajá/subí el halo */
}

.hud-panel-float--right{
  /* en right panel, el contenido “vive” hacia la izquierda del ancla → suele ser negativo */
  --panel-halo-x: -500px; /* mové este a ojo */
  --panel-halo-y: -100px;
}

/* opcional: tamaño del halo si querés afinar */
.hud-panel-float{
  --panel-halo-w: 820px;
  --panel-halo-h: 260px;
}


/* Activo cuando autopilot ON */
body.autopilot-on .hud-panel-float{
  --panel-energy: 1;
  --panel-levitate: 1.25;
}

/* Hover: boost leve (solo si el panel está visible) */
body.core-inserted .hud-panel-float:hover{
  --panel-energy: 1.15;
}

/* Inner: acá vive todo y esto es lo que animamos */
.hud-panel-float-inner{
  position: relative;
  width: 1px;
  height: 1px;

  /* Levitación + glow breathing */
  animation:
    aionPanelFloat 6.6s ease-in-out infinite,
    aionPanelGlow  3.8s ease-in-out infinite;

  will-change: transform, opacity;
}

/* Desfase entre paneles */
.hud-panel-float--left .hud-panel-float-inner{
  animation-delay: -0.9s, -1.7s;
}
.hud-panel-float--right .hud-panel-float-inner{
  animation-delay: -2.4s, -0.4s;
}

/* Micro-flicker SOLO cuando autopilot ON */
body.autopilot-on .hud-panel-float-inner{
  animation:
    aionPanelFloat 6.6s ease-in-out infinite,
    aionPanelGlow  3.8s ease-in-out infinite,
    aionPanelFlicker 9.5s steps(1, end) infinite;
}

/* LUZ DE PROYECCIÓN (halo) — se ve sobre estrellas */
.hud-panel-float-inner::after{
  content:"";
  position: absolute;

  /* ✅ ahora se puede calibrar */
  left: var(--panel-halo-x, 0px);
  top: calc(100% + var(--panel-halo-y, 0px));

  transform: translateX(-50%);
  width:  var(--panel-halo-w, 820px);
  height: var(--panel-halo-h, 260px);

  background: radial-gradient(70% 90% at 50% 30%,
    rgba(0,191,255,0.26) 0%,
    rgba(0,191,255,0.12) 30%,
    rgba(0,191,255,0.06) 52%,
    rgba(0,0,0,0) 78%);

  filter: blur(18px);
  opacity: calc(0.22 * var(--panel-energy));
  pointer-events: none;

  mix-blend-mode: screen;
}

/* Hover: proyección más intensa */
body.core-inserted .hud-panel-float:hover .hud-panel-float-inner::after{
  opacity: calc(0.30 * var(--panel-energy));
  filter: blur(16px);
}

/* ====== Keyframes ====== */

@keyframes aionPanelFloat{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  35%  { transform: translate3d(0, calc(-8px * var(--panel-levitate)), 0) rotate(-0.22deg) scale(1.003); }
  70%  { transform: translate3d(0, calc( 6px * var(--panel-levitate)), 0) rotate( 0.18deg) scale(0.999); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@keyframes aionPanelGlow{
  0%   { opacity: 1; }
  50%  { opacity: calc(0.92 + (0.06 * var(--panel-energy))); }
  100% { opacity: 1; }
}

/* Flicker MUY controlado: 1–2 “frames” cada tanto */
@keyframes aionPanelFlicker{
  0%, 74%, 100% { opacity: 1; }
  75% { opacity: 0.985; }
  76% { opacity: 1; }
  92% { opacity: 0.975; }
  93% { opacity: 1; }
}



/* =========================================
   ORBE IDIOMA — AAA (80% transparente)
   - glow afuera suave + glow interior fuerte
   - grid CURVO (conic + radial)
   ========================================= */
/* ✅ ORBE — interior transparente + rim glow interno fuerte */
.hud-right-lang-btn{
  position: absolute;
  right:  var(--hud-right-orb-x, 240px);
  bottom: var(--hud-right-orb-y, 260px);

  width:  var(--hud-right-orb-size, 150px);
  height: var(--hud-right-orb-size, 150px);
  border-radius: 999px;

  /* ✅ CERO “relleno sólido”: solo highlights muy sutiles */
  background:
    /* highlight vidrio (muy leve) */
    radial-gradient(55% 45% at 30% 26%,
      rgba(245,250,255,0.12) 0%,
      rgba(163,228,248,0.05) 28%,
      rgba(0,0,0,0.00) 68%),

    /* micro glow central MUY tenue (para que no quede muerto) */
    radial-gradient(38% 38% at 50% 52%,
      rgba(0,191,255,0.06) 0%,
      rgba(0,0,0,0.00) 70%);

  /* borde casi invisible (no sólido) */
  border: 1px solid rgba(0,191,255,0.18);

  /* ✅ Glow interno (rim) + glow externo */
  box-shadow:
    /* rim interno fuerte (clave AAA) */
    inset 0 0 0 1px rgba(0,191,255,0.18),
    inset 0 0 26px rgba(0,191,255,0.22),
    inset 0 0 70px rgba(0,191,255,0.16),

    /* aura externa */
    0 0 18px rgba(0,191,255,0.30),
    0 0 60px rgba(0,191,255,0.18),
    0 0 120px rgba(0,191,255,0.10);

  /* vidrio real: el interior “toma” lo de atrás */
  backdrop-filter: blur(22px) saturate(175%) contrast(112%);
  -webkit-backdrop-filter: blur(22px) saturate(175%) contrast(112%);

  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;

  user-select: none;
  -webkit-user-select: none;

  overflow: visible;
}

/* ✅ Halo externo más fuerte */
.hud-right-lang-btn::before{
  content:"";
  position:absolute;
  inset: -20px;
  border-radius: 999px;
  pointer-events: none;

  background:
    radial-gradient(circle,
      rgba(0,191,255,0.34) 0%,
      rgba(0,191,255,0.18) 36%,
      rgba(0,191,255,0.10) 56%,
      rgba(0,0,0,0.00) 76%);

  opacity: 1;

  /* solo afuera */
  mask: radial-gradient(circle, transparent 60%, #000 78%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 78%);
}

/* ✅ Grid curvo + ecuator + rim interno brillante (sin relleno) */
.hud-right-lang-btn::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;

  background:
    /* rim interno brillante pegado al borde */
    radial-gradient(closest-side at 50% 52%,
      rgba(0,0,0,0.00) 62%,
      rgba(0,191,255,0.42) 74%,
      rgba(0,191,255,0.00) 88%),

    /* meridianos curvos */
    repeating-conic-gradient(
      from 90deg,
      rgba(0,191,255,0.26) 0deg 0.9deg,
      rgba(0,0,0,0.00)     0.9deg 13deg
    ),

    /* paralelos curvos */
    repeating-radial-gradient(
      circle at 50% 52%,
      rgba(163,228,248,0.20) 0px 1px,
      rgba(0,0,0,0.00)       1px 12px
    ),

    /* línea ecuatorial fuerte */
    radial-gradient(72% 8% at 50% 52%,
      rgba(0,191,255,0.78) 0%,
      rgba(0,191,255,0.26) 55%,
      rgba(0,0,0,0.00) 100%);

  /* curvatura: el grid se desvanece hacia el borde (esfera real) */
  mask:
    radial-gradient(circle at 50% 52%,
      rgba(0,0,0,1) 0 58%,
      rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.00) 86%);
  -webkit-mask:
    radial-gradient(circle at 50% 52%,
      rgba(0,0,0,1) 0 58%,
      rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.00) 86%);

  opacity: 0.62;
}

/* Texto (código idioma) — +50% tamaño + glow fuerte */
.hud-right-lang-code{
  position: relative;
  z-index: 2;

  font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 900;
  letter-spacing: 0.06em;

  font-size: 66px;   /* ✅ +50% (de 44 → 66) */
  line-height: 1;

  color: rgba(245,250,255,0.98);
  text-shadow:
    0 0 10px rgba(0,191,255,0.65),
    0 0 26px rgba(0,191,255,0.40),
    0 0 60px rgba(0,191,255,0.22);
}

/* =========================================
   ORBE IDIOMA — viewport + capas (centrado REAL)
   ========================================= */

.hud-right-lang-viewport{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;         /* acá sí recortamos (para que “se meta atrás”) */
  pointer-events: none;
  z-index: 3;               /* arriba del grid, debajo de nada crítico */
}

/* cada capa (front/back) queda anclada al centro real */
.hud-right-lang-code-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;

  /* por si en algún momento JS todavía no escribió transform */
  transform: translate(-50%, -50%);
}

/* Micro ajuste óptico opcional (0 por default).
   Si tu fuente te lo hace ver 1–2px corrido, ajustás esto sin tocar JS. */
:root{
  --hud-right-lang-optical-x: 0px;
}


/* ==========================================================
   ORBE IDIOMA — DRAG ANIM (solo visual, sin lógica i18n)
   ========================================================== */

/* Importante: que el dedo/mouse no haga scroll/selección al arrastrar */
.hud-right-lang-btn{
  touch-action: none; /* solo afecta cuando el pointer está encima del orb */
}

/* Viewport que recorta las letras dentro del círculo (sin cortar halos/::before/::after) */
.hud-right-lang-viewport{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none; /* el drag lo captura el botón */
  display: block;
  z-index: 5; /* arriba del grid/anim interno */
}

/* Capas de texto (front/back) */
.hud-right-lang-code-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  will-change: transform, opacity;
}

/* Estado dragging (cursor) */
.hud-right-lang-btn.is-dragging{
  cursor: grabbing;
}

/* Transición cuando “snappea” al soltar */
.hud-right-lang-btn.is-snapping .hud-right-lang-code-layer{
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Hover suave */
.hud-right-lang-btn:hover{
  border-color: rgba(0,191,255,0.45);
  box-shadow:
    0 0 22px rgba(0,191,255,0.36),
    0 0 70px rgba(0,191,255,0.20),
    inset 0 0 40px rgba(0,191,255,0.38),
    inset 0 0 0 1px rgba(0,191,255,0.16),
    inset 0 -18px 30px rgba(4,60,80,0.18);
}

/* ===============================
   ORBE RIGHT — DRAG TEXT LAYERS
   =============================== */

/* Permite drag horizontal (especialmente en touch) */
.hud-right-lang-btn{
  touch-action: pan-x;
  cursor: grab;
}
.hud-right-lang-btn.is-dragging{ cursor: grabbing; }

/* Viewport que recorta las letras al círculo */
.hud-right-lang-viewport{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none; /* el drag lo maneja el botón */
}

/* Capas de texto (front/back) */
.hud-right-lang-code-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(0);
  opacity: 1;

  will-change: transform, opacity;
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Cuando hacemos snapping, que sea un poquito más “tight” */
.hud-right-lang-btn.is-snapping .hud-right-lang-code-layer{
  transition: transform 180ms ease, opacity 180ms ease;
}


/* =========================================
   ORBE — ANIMACIÓN tipo esfera “3D”
   (adaptación del ejemplo SASS/HAML a CSS)
   - No cambia tamaño
   - Color cyan AION
   ========================================= */

:root{
  --orb-cyan: rgba(0,191,255,1);
  --orb-cyan-soft: rgba(163,228,248,1);
}

/* Capa animada dentro del botón */
.hud-right-lang-anim{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1; /* debajo del texto (que es z-index 2) */
}

/* “Meridianos” curvos + glow interior */
.hud-right-lang-anim::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;

  /* meridianos curvos (conic) + un rim interno suave */
  background:
    radial-gradient(circle at 50% 52%,
      rgba(0,0,0,0.00) 92%,
      rgba(0,191,255,0.85) 97%,
      rgba(0,191,255,0.00) 100%),

    repeating-conic-gradient(
      from 90deg,
      rgba(0,191,255,0.28) 0deg 0.9deg,
      rgba(0,0,0,0.00)     0.9deg 11deg
    );

  /* curva/caída hacia el borde para que “se lea esfera” */
  -webkit-mask: radial-gradient(circle at 50% 52%,
    rgba(0,0,0,1) 0 58%,
    rgba(0,0,0,0.55) 72%,
    rgba(0,0,0,0.00) 88%);
          mask: radial-gradient(circle at 50% 52%,
    rgba(0,0,0,1) 0 58%,
    rgba(0,0,0,0.55) 72%,
    rgba(0,0,0,0.00) 88%);

  /* glow interior fuerte (lo que pedías) */
  box-shadow:
    inset 0 0 34px rgba(0,191,255,0.30),
    inset 0 0 90px rgba(0,191,255,0.20);

  opacity: 0.95;

  transform-origin: center center;
  animation: orbSpinA 6.5s linear infinite;
}

/* “Paralelos” curvos + línea ecuatorial, rotando distinto */
.hud-right-lang-anim::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;

  background:
    /* paralelos curvos */
    repeating-radial-gradient(
      circle at 50% 52%,
      rgba(163,228,248,0.22) 0px 1px,
      rgba(0,0,0,0.00)       1px 12px
    ),
    /* ecuator brillante */
    radial-gradient(72% 8% at 50% 52%,
      rgba(0,191,255,0.95) 0%,
      rgba(0,191,255,0.30) 55%,
      rgba(0,0,0,0.00) 100%);

  -webkit-mask: radial-gradient(circle at 50% 52%,
    rgba(0,0,0,1) 0 60%,
    rgba(0,0,0,0.55) 74%,
    rgba(0,0,0,0.00) 90%);
          mask: radial-gradient(circle at 50% 52%,
    rgba(0,0,0,1) 0 60%,
    rgba(0,0,0,0.55) 74%,
    rgba(0,0,0,0.00) 90%);

  opacity: 0.65;

  transform-origin: center center;
  animation: orbSpinB 9.5s linear infinite reverse;
}

/* ✅ Respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hud-right-lang-anim::before,
  .hud-right-lang-anim::after{
    animation: none !important;
  }
}

/* Rotaciones (sensación de “esfera viva”) */
@keyframes orbSpinA{
  to { transform: rotateZ(360deg); }
}
@keyframes orbSpinB{
  to { transform: rotateZ(360deg); }
}


/* ==========================================================
   HUD RIGHT LANG ORB — viewport + capas
   Mejora: efecto “se oculta detrás de la esfera”
   ========================================================== */

.hud-right-lang-viewport{
  position: absolute;
  inset: 0;
  border-radius: 999px;

  /* Recorta dentro del círculo (clave para “detrás del vidrio”) */
  overflow: hidden;

  /* No bloquea el pointer del botón */
  pointer-events: none;

  /* Fade suave cerca del borde del círculo (más “esfera”) */
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0 58%,
    rgba(0,0,0,0.85) 64%,
    rgba(0,0,0,0.00) 84%);
          mask-image: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1) 0 58%,
    rgba(0,0,0,0.85) 64%,
    rgba(0,0,0,0.00) 84%);
}

/* Las dos capas (front/back) */
.hud-right-lang-code-layer{
  position: absolute;
  left: 50%;
  top: 50%;

  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;

  /* Suavidad cuando suelta (snapping). En drag lo apagamos desde el botón */
  transition: transform 170ms ease, opacity 170ms ease, filter 170ms ease;
}

/* Mientras arrastrás, que siga el puntero 1:1 (sin easing) */
#hud-right-lang-btn.is-dragging .hud-right-lang-code-layer{
  transition: none;
}

/* ==========================================================
   AION — HUD RESPONSIVE PASS (PARTE 1: UI NAVE)
   - NO toca secciones/visores (eso es Parte 2)
   - Objetivo portrait (celu/tablet): SOLO rueda arriba + core abajo
   ========================================================== */

/* ---- Laptop común (1366×768) — compactar HUD sin ocultar módulos ---- */
@media (min-width: 901px) and (max-width: 1366px) and (max-height: 820px) and (orientation: landscape){

  :root{
    /* TOP más compacto */
    --hud-top-height: 205px;

    /* Paneles flotantes un toque más chicos (mantiene proporción) */
    --hud-left-panel-scale: 0.28;
    --hud-right-panel-scale: 0.28;

    /* ✅ FIX #1: bajar panel izquierdo (hoy estaba muy arriba por --hud-left-panel-bottom=220px) */
    --hud-left-panel-bottom: 170px;   /* igual que el derecho */
    /* (si querés más abajo todavía: 12px / 8px) */

    /* Joystick holograma un toque más chico */
    --hud-joy-stack-scale: 1.00;
  }

  /* =========================
     HUD TOP (sin esconder nada)
     ========================= */
  .hud-top-inner{
    max-width: 1100px;
    padding: 12px 32px 8px;
  }

  .hud-status-row{
    font-size: 0.54rem;
    margin-bottom: 4px;
  }

  .hud-subsystems-row{
    font-size: 0.54rem;
    margin-top: 2px;
    margin-bottom: 1px;
  }

  .hud-section-label{
    font-size: 1.90rem;
    letter-spacing: 0.22em;
  }

/* ✅ Wheel: NO usar scale() (des-centra el menú en 1366) */
.hud-wheel{
  transform: none !important;
  transform-origin: top center;
  height: 86px;          /* un toque más compacto que el default (90) */
  overflow: hidden;      /* mantiene el recorte superior */
}

/* ✅ Achique real del dial (sin transform): mantiene centro Y = -130 */
.hud-wheel::before{
  top: -283px;           /* -130 - (306/2) */
  width: 405px;          /* 440 * 0.92 */
  height: 306px;         /* 340 * 0.90 */
}

.hud-wheel::after{
  top: -301px;           /* -130 - (342/2) */
  width: 432px;          /* 480 * 0.90 */
  height: 342px;         /* 380 * 0.90 */
}

.hud-wheel-arc{
  top: -319px;           /* -130 - (378/2) */
  width: 468px;          /* 520 * 0.90 */
  height: 378px;         /* 420 * 0.90 */
}

/* Tipografía del dial un toque más chica (opcional pero recomendado) */
.hud-wheel-label{
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

  /* ✅ FIX #2: asegurar que el contenido del wheel (menú) use el mismo sistema
     de coordenadas que el círculo (evita que quede “corrido” en 1366) */
  .hud-wheel-nav{
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  /* (extra seguro: el contenedor de divisores también clavado al origen) */
  .hud-wheel-dividers{
    left: 0 !important;
    top: 0 !important;
  }

  /* =========================
     HUD BOTTOM (sin ocultar nada)
     ========================= */
  #hud-bottom{
    bottom: -20px;
  }

  /* Compacta el “cluster” inferior completo (mantiene proporciones) */
  .hud-bottom-inner{
    max-width: 1020px;
    gap: 24px;
    padding: 20px 34px 16px;

    transform: scale(0.92);
    transform-origin: center bottom;
  }

  /* NAV DRIVE: compactor sin tocar animaciones internas */
  .hud-bottom-speed{
    transform: translateX(80px) scale(0.90);
    transform-origin: center bottom;
  }
}

/* ---- Tablet landscape / pantallas medianas ---- */
@media (max-width: 1024px){
  :root{
    --hud-top-height: 205px;
  }

  #hud-bottom{
    bottom: 14px;
  }

  .hud-wheel{
    transform: scale(0.90);
    transform-origin: top center;
  }
}

/* ==========================================================
   TABLET LANDSCAPE (1024×768) — HUD BOTTOM
   - Ajustes finos:
     1) baja joystick izquierdo
     2) achica joystick izq/der
     3) baja logo + FX
   - NO toca HUD TOP
   ========================================================== */
@media (min-width: 900px) and (max-width: 1024px) and (max-height: 820px) and (orientation: landscape){

  :root{
    /* ===== HOLO PANELS (izq/der) un toque más chicos ===== */
    --hud-left-panel-scale: 0.28;      /* antes 0.30 */
    --hud-left-panel-left:  32px;
    --hud-left-panel-bottom: 175px;

    --hud-right-panel-scale: 0.28;     /* antes 0.30 */
    --hud-right-panel-right: 32px;
    --hud-right-panel-bottom: 24px;

    /* ===== CORE (base PNG) ===== */
    --hud-core-base-png-width: 460px;
    --hud-core-base-png-max:   55vw;
    --hud-core-base-png-bottom: -74px;

    /* ===== Logo FX: bajan junto al logo ===== */
    --hud-core-vortex-bottom: 30px;      /* default 80 -> baja FX */
    --hud-core-baseglow-bottom: 30px;    /* default 70 -> baja FX */

    /* ===== Joystick (izq) ===== */
    --hud-joy-x: -340px;
    --hud-joy-y: -24px;                 /* antes -36 => baja ~12px */
    --hud-joy-stack-scale: 1.18;        /* antes 1.32 => más chico */
  }

  /* Joystick derecho / módulo derecho: más chico */
  .hud-bottom-speed{
    transform: translateX(160px) scale(0.80) !important; /* antes 150px / 0.84 */
    transform-origin: right bottom !important;
  }

  /* Mantengo tus halos (no cambia comportamiento) */
  .hud-panel-float--left{
    --panel-halo-x: 420px;
  }
  .hud-panel-float--right{
    --panel-halo-x: -460px;
  }

  /* Logo flotante: más abajo + mismo tamaño que ya venías usando */
  .hud-core-logo{
    width: 90px !important;
    height: 90px !important;
    top: 38px !important;              /* ✅ baja logo (y no pisa transforms) */
  }
}

@media (max-width: 820px) and (orientation: portrait){

  :root{
    --hud-top-height: 210px;

    /* ✅ Core base PNG: más ancho en mobile */
    --hud-core-base-png-width: 560px;
    --hud-core-base-png-max: 98vw;
    --hud-core-base-png-bottom: -56px;

    /* ✅ FIX #1: FX del logo alineados al tamaño/posición mobile */
    --hud-core-vortex-w: 120px;
    --hud-core-vortex-h: 96px;
    --hud-core-vortex-bottom: 70px;
    --hud-core-vortex-opacity: 0.55;

    --hud-core-baseglow-size: 112px;
    --hud-core-baseglow-bottom: 50px;
    --hud-core-baseglow-opacity: 0.50;
  }

  /* ---- HUD TOP: dejamos título + dial, ocultamos filas secundarias ---- */
  #hud-top .hud-status-row,
  #hud-top .hud-shield,
  #hud-top .hud-subsystems-row{
    display:none !important;
  }

  /* Padding lateral reducido para que el dial tenga ancho real */
  #hud-top .hud-top-inner{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
  }

  /* ✅ FIX #2: el dial “sale” (más porción visible) */
.hud-main-divider{
  position: relative;
  z-index: 4; /* la línea queda “encima” del dial */
}

.hud-wheel-row{
  position: relative;
  z-index: 3;
  margin-top: 0px !important; /* antes -10px: evita que el círculo cruce la línea */
}

/* ✅ Mobile: sacamos los 2 dividers “extra” (extremos) que aparecen como palito fijo */
.hud-wheel-dividers .hud-wheel-divider:first-child,
.hud-wheel-dividers .hud-wheel-divider:last-child{
  display: none !important;
}

  /* ✅ CLAVE: en portrait NO usamos scale() */
  .hud-wheel{
    transform: none !important;
    transform-origin: top center !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    height: 90px !important;   /* volvemos al alto base para ver más arco */
    overflow: hidden !important;
  }

  /* Recalibración: mantenemos centro ~ -130, pero con alturas “tipo desktop”
     para que el bottom vuelva a ~80px (y no quede hundido). */
  .hud-wheel::before{
    top: -300px !important;
    width: 360px !important;
    height: 340px !important;
  }

  .hud-wheel::after{
    top: -320px !important;
    width: 390px !important;
    height: 380px !important;
  }

  .hud-wheel-arc{
    top: -340px !important;
    width: 420px !important;
    height: 420px !important;
  }

  .hud-wheel-hint{
    font-size: 0.52rem !important;
    top: 6px !important;
  }

  /* ---- HUD BOTTOM: SOLO CORE (todo lo demás fuera) ---- */
  #hud-bottom .hud-bottom-joystick,
  #hud-bottom .hud-bottom-speed,
  #hud-bottom .autopilot-hatch-floating{
    display:none !important;
  }

  /* ✅ Portrait: “hundimos” el HUD inferior para ganar alto útil.
     - Movemos el CONTENEDOR (no sólo el core), así no bloquea taps/scroll arriba.
     - Reducimos padding-bottom para que NO empuje el core hacia arriba. */
  #hud-bottom{
    --hud-bottom-portrait-sink: 10px; /* 🔧 subí/bajá este valor (28–50) */

    bottom: calc(10px + env(safe-area-inset-bottom) - var(--hud-bottom-portrait-sink)) !important;

    /* padding-bottom SOLO safe-area: no suma altura “hacia arriba” innecesaria */
    padding: 0 6px env(safe-area-inset-bottom) !important;
  }

  .hud-bottom-inner{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 0 6px !important;
    align-items: end !important;
  }

  .hud-bottom-core{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    align-self: end !important;
    transform: none !important;
  }

  /* ✅ Ajuste fino: descargas acompañan el logo mobile (más chicas + más abajo) */
  .hud-core-discharge{
    --core-discharge-w: 58px;
    --core-discharge-h: 38px;
    --core-discharge-y: 18px;
  }

  /* Logo core: ya lo tenías bien */
  .hud-core-logo{
    margin-top: -62px !important;
    width: 82px !important;
    height: 82px !important;
  }

  .hud-core-logo-img{
    max-width: 72% !important;
    max-height: 72% !important;
    margin-top: -120px !important;

    filter:
      drop-shadow(0 0 8px rgba(0,191,255,0.90))
      drop-shadow(0 0 18px rgba(0,191,255,0.55))
      drop-shadow(0 10px 18px rgba(0,191,255,0.28)) !important;
  }

  /* Paneles flotantes laterales OFF en portrait */
  #hud-left-float,
  #hud-right-float{
    display:none !important;
  }
}

/* ==========================================================
   MICRO-PORTRAIT (360×640 aprox) — HUD TOP basado en 390×844
   - Mantiene el mismo “sistema” del 390 (sin scale, sin translateY raros)
   - Achica el dial REAL (before/after/arc) para 360
   ========================================================== */
@media (max-width: 380px) and (max-height: 700px) and (orientation: portrait){

  :root{
    /* TOP un toque más bajo para ganar centro, pero sin clipear el dial */
    --hud-top-height: 170px;

    /* Tipos del dial un toque más chicos */
    --hud-wheel-label-scale: 0.86;
  }

  /* TOP: mismo enfoque que 390 (filas secundarias ya se ocultan por el 820px) */
  #hud-top .hud-top-inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }

  /* Título de sección más chico (en 360 era demasiado grande) */
  .hud-section-label{
    font-size: 1.10rem !important;
    letter-spacing: 0.18em !important;
  }

  /* Línea superior fina (igual idea que venías usando) */
  .hud-main-divider{
    margin-top: 0px !important;
    height: 1px !important;
    opacity: 0.55 !important;
    box-shadow: none !important;

    position: relative !important;
    z-index: 4 !important;
  }

  /* Fila del wheel: recorta solo hacia arriba (como en 390) */
  .hud-wheel-row{
    position: relative !important;
    z-index: 3 !important;
    margin-top: 0px !important;
    overflow: hidden !important;
  }

  /* ✅ Wheel: sin “raise”, sin hacks. Achique REAL del aro */
  .hud-wheel{
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    height: 84px !important;      /* un poco menos que 90 para 360 */
    overflow: hidden !important;
  }

  /* ✅ Dial escalado ~0.85 desde el set de 390:
     390 set: before 360/340 top -300, after 390/380 top -320, arc 420/420 top -340
     Mantengo centro Y ≈ -130 para conservar proporción */
  .hud-wheel::before{
    top: -275px !important;
    width: 374px !important;
    height: 289px !important;
  }

  .hud-wheel::after{
    top: -292px !important;
    width: 408px !important;
    height: 323px !important;
  }

  .hud-wheel-arc{
    top: -309px !important;
    width: 442px !important;
    height: 357px !important;
  }

  /* Hint más chico */
  .hud-wheel-hint{
    font-size: 0.46rem !important;
    top: 5px !important;
  }

  /* ✅ Importante: NO desplazamos el menú.
     El nav y los dividers quedan en el mismo sistema del dial. */
  .hud-wheel-nav,
  .hud-wheel-dividers{
    transform: none !important;
  }

  /* Divisores: más cortos para que no se pasen del aro en 360 */
  .hud-wheel-divider{
    --hud-divider-h: 22px !important;
  }
  
/* 360×640: bajar logo REAL (sin tocar el core base) */
#hud-core-logo.hud-core-logo{
  margin-top: 0px !important;   /* dejalo en 0 */
  top: 5px !important;         /* ✅ esto lo baja MÁS (subí/bajá este valor) */
}

/* ✅ el límite te lo está haciendo el IMG (está muy arriba) */
#hud-core-logo .hud-core-logo-img{
  margin-top: -85px !important; /* antes -120px → menos negativo = baja el logo */
}

/* FX acompañan (más bajo = menor bottom) */
:root{
  --hud-core-vortex-bottom: 34px;    /* antes ~70 */
  --hud-core-baseglow-bottom: 14px;  /* antes ~50 */
}

/* Discharge acompaña (más Y = más abajo) */
#hud-bottom .hud-core-discharge{
  --core-discharge-y: 122px;          /* antes ~16 */
}  
}


@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape){

  :root{
    /* HUD TOP más bajo */
    --hud-top-height: 140px;

    /* Core más chico */
    --hud-core-base-png-width: 420px;
    --hud-core-base-png-max: 48vw;
    --hud-core-base-png-bottom: -76px;

    /* FX más chicos (para que no invadan) */
    --hud-core-vortex-w: 96px;
    --hud-core-vortex-h: 76px;
    --hud-core-vortex-bottom: 22px;
    --hud-core-vortex-opacity: 0.45;

    --hud-core-baseglow-size: 86px;
    --hud-core-baseglow-bottom: 24px;
    --hud-core-baseglow-opacity: 0.40;

    /* ✅ Tipos del dial más chicos para que calcen con el aro reducido */
    --hud-wheel-label-scale: 1;
  }

  /* =========================
     TOP: título chico + wheel (MISMA CONFIG que 390×844 portrait)
     ========================= */
  #hud-top .hud-status-row,
  #hud-top .hud-subsystems-row,
  #hud-top .hud-shield{
    display: none !important;
  }

  #hud-top .hud-top-inner{
    padding: 8px 14px 6px !important;
    max-width: 100% !important;
  }

  .hud-section-label{
    font-size: 1.25rem !important;
    letter-spacing: 0.18em !important;
  }

  .hud-main-divider{
    margin-top: 2px !important;

    /* la línea queda por encima del dial */
    position: relative !important;
    z-index: 5 !important;
  }

  /* ✅ Esta fila es la “ventana” que recorta lo que se asoma arriba */
  .hud-wheel-row{
    position: relative !important;
    z-index: 4 !important;

    /* IMPORTANTE: la fila NO se mueve hacia arriba */
    margin-top: 0px !important;

    /* ✅ Recorte: nada puede verse por arriba del borde superior de esta fila */
    overflow: hidden !important;
  }

  /* Igual que portrait: ocultamos los 2 dividers extremos */
  .hud-wheel-dividers .hud-wheel-divider:first-child,
  .hud-wheel-dividers .hud-wheel-divider:last-child{
    display: none !important;
  }

  /* ✅ MISMO dial que 390×844 portrait */
  .hud-wheel{
    transform: none !important;
    transform-origin: top center !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    height: 90px !important; /* o el valor que ya estás usando */
    overflow: hidden !important;

    /* ✅ Subís todo el dial (aro + labels + divisores) sin mover la “ventana” */
    position: relative !important;
    top: -20px !important;   /* ← este número equivale a tu viejo margin-top:-20 */
  }

  .hud-wheel::before{
    top: -300px !important;
    width: 360px !important;
    height: 340px !important;
  }

  .hud-wheel::after{
    top: -320px !important;
    width: 390px !important;
    height: 380px !important;
  }

  .hud-wheel-arc{
    top: -340px !important;
    width: 420px !important;
    height: 420px !important;
  }

  /* Hint igual que portrait (si lo querés ocultar, decime y lo apagamos) */
  .hud-wheel-hint{
    display: block !important;
    font-size: 0.52rem !important;
    top: 6px !important;
  }

  /* Paneles flotantes OFF en landscape phone */
  #hud-left-float,
  #hud-right-float{
    display: none !important;
  }

  /* =========================
     BOTTOM: solo core (NO TOCAR)
     ========================= */
  #hud-bottom .hud-bottom-joystick,
  #hud-bottom .autopilot-hatch-floating{
    display: none !important;
  }

  #hud-bottom{
    --hud-bottom-landscape-sink: 0px; /* 🔧 36–60 si querés más/menos hundido */
    bottom: calc(10px + env(safe-area-inset-bottom) - var(--hud-bottom-landscape-sink)) !important;
    padding: 0 8px env(safe-area-inset-bottom) !important;
  }

  .hud-bottom-inner{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 0 6px !important;
    align-items: end !important;
  }

  .hud-bottom-core{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    transform: none !important;
  }

	.hud-core-logo{
	  margin-top: 0px !important; /* antes -54px (baja 8px) */
	  width: 72px !important;
	  height: 72px !important;
	}

  .hud-core-logo-img{
    max-width: 70% !important;
    max-height: 70% !important;
    margin-top: -80px !important;
    filter:
      drop-shadow(0 0 8px rgba(0,191,255,0.90))
      drop-shadow(0 0 16px rgba(0,191,255,0.55))
      drop-shadow(0 10px 18px rgba(0,191,255,0.25)) !important;
  }

	.hud-core-discharge{
	  --core-discharge-w: 54px;
	  --core-discharge-h: 36px;
	  --core-discharge-y: 104px; /* antes 16px (baja 8px) */
	}
}

/* ==========================================================
   MICRO-LANDSCAPE (640×360 aprox) — ajuste fino
   - Subir AION core (era demasiado hundido en 360px de alto)
   - Achicar wheel manteniendo proporciones
   - Bajar logo + FX para que acompañen
   NO afecta 844×390 (porque max-width 700)
   ========================================================== */
@media (max-width: 700px) and (max-height: 380px) and (orientation: landscape){

  :root{
    /* 1) CORE: mostrar más (menos hundido) */
    --hud-core-base-png-bottom: -80px !important; /* antes -76px (sube el core) */

    /* 2) FX: un toque más abajo para acompañar */
    --hud-core-vortex-bottom: 5px !important;
    --hud-core-baseglow-bottom: -5px !important;

    /* 3) Wheel: tipografías un toque más chicas */
    --hud-wheel-label-scale: 0.92 !important;
  }

  /* Subimos el contenedor inferior (el calc ya existe en el bloque 900×480) */
  #hud-bottom{
    --hud-bottom-landscape-sink: -22px !important; /* negativo = sube */
    bottom: calc(10px + env(safe-area-inset-bottom) - var(--hud-bottom-landscape-sink)) !important;
  }

  /* Wheel más chico (manteniendo centro Y = -130) */
  .hud-wheel{
    height: 78px !important;     /* igual */
    top: 0px !important;        /* ✅ baja el dial + menú para que se vea */
  }

  .hud-wheel::before{
    /* escala ~0.82 del set actual (360×340) manteniendo centro en -130 */
    width: 296px !important;
    height: 279px !important;
    top: -270px !important;      /* -130 - (279/2) */
  }

  .hud-wheel::after{
    width: 320px !important;
    height: 312px !important;
    top: -286px !important;      /* -130 - (312/2) */
  }

  .hud-wheel-arc{
    width: 344px !important;
    height: 344px !important;
    top: -302px !important;      /* -130 - (344/2) */
  }

  /* Divisores un toque más cortos para que no “pasen” el aro en tamaño chico */
  .hud-wheel-divider{
    --hud-divider-h: 30px !important;
  }

  /* Logo flotante: bajar un poco (y forzar más rango que margin-top solo) */
  #hud-bottom .hud-core-logo{
    margin-top: 10px !important;     /* baja el bloque */
    position: relative !important;
    top: 35px !important;            /* baja extra (por si margin-top clava) */
  }

  /* Discharge acompaña (más Y = más abajo) */
  #hud-bottom .hud-core-discharge{
    --core-discharge-y: 116px !important; /* antes 104 */
  }
}

/* ==========================================================
   TABLET PORTRAIT (768×1024 aprox)
   - Sube logo + FX del logo (vortex/baseglow/discharge) sin tocar el core base
   - NO afecta mobile (390×844 / 360×640) ni desktop
   ========================================================== */
@media (min-width: 700px) and (max-width: 820px) and (min-height: 900px) and (orientation: portrait){

  /* Subimos FX (se alinean con el logo) */
  :root{
    --hud-core-vortex-bottom: 84px;     /* antes ~70px (sube 14px) */
    --hud-core-baseglow-bottom: 64px;   /* antes ~50px (sube 14px) */
  }

  /* Subimos el logo (caja) */
  .hud-core-logo{
    margin-top: -120px !important;      /* antes -62px (sube 14px) */
  }

  /* Discharge acompaña: al subir el logo, bajamos Y para que no quede “caído” */
  .hud-core-discharge{
    --core-discharge-y: 4px;           /* antes 18px (sube el efecto) */
  }
}


/* ==========================================================
   AION DISPLAY SYSTEM — RESPONSIVE MATRIX (solo variables)
   - Afecta TODAS las secciones con .aion-display
   - Roadmap queda afuera por selector
   - Ajustar SOLO estos valores por viewport
   ========================================================== */

/* 1366×768 (laptop común) — landscape */
@media (max-width: 1600px) and (min-width: 1200px) and (orientation: landscape){
  :root{
    --aion-display-maxw: 1200px;
    --aion-display-side-gutter: 3rem;

    /* corredor (alto útil) */
    --aion-shell-pad-top: calc(var(--hud-top-height) - 44px);
    --aion-shell-pad-bottom: 150px;
  }
}

/* 1024×768 (tablet landscape) */
@media (max-width: 1100px) and (min-width: 900px) and (orientation: landscape){
  :root{
    --aion-display-maxw: 920px;
    --aion-display-side-gutter: 2rem;

    --aion-shell-pad-top: calc(var(--hud-top-height) - 30px);
    --aion-shell-pad-bottom: 150px;
  }
}

/* 768×1024 (tablet portrait) */
@media (max-width: 900px) and (min-width: 700px) and (orientation: portrait){
  :root{
    --aion-display-maxw: 740px;
    --aion-display-side-gutter: 24px;

    --aion-shell-pad-top: calc(var(--hud-top-height) - 50px);
    --aion-shell-pad-bottom: 160px;
  }
}

/* 390×844 (mobile portrait “grande”) — SOLO phones (evita pisar 768×1024) */
@media (max-width: 699px) and (min-width: 381px) and (orientation: portrait){
  :root{
    --aion-display-maxw: 9999px;         /* en mobile manda el 100vw - gutter */
    --aion-display-side-gutter: 18px;

    --aion-shell-pad-top: calc(var(--hud-top-height) - 48px);
    --aion-shell-pad-bottom: 120px;
  }
}

/* 360×640 (mobile portrait “chico”) */
@media (max-width: 380px) and (orientation: portrait){
  :root{
    --aion-display-maxw: 9999px;
    --aion-display-side-gutter: 14px;

    --aion-shell-pad-top: calc(var(--hud-top-height) - 72px);
    --aion-shell-pad-bottom: 90px;
  }
}

/* 844×390 (mobile landscape) — baja altura */
@media (max-height: 420px) and (orientation: landscape){
  :root{
    --aion-display-maxw: 9999px;
    --aion-display-side-gutter: 18px;

    --aion-shell-pad-top: calc(var(--hud-top-height) - 30px);
    --aion-shell-pad-bottom: 90px;
  }
}

/* 640×360 (mobile landscape MUY bajo) — extra agresivo */
@media (max-height: 380px) and (orientation: landscape){
  :root{
    --aion-shell-pad-top: calc(var(--hud-top-height) - 52px);
    --aion-shell-pad-bottom: 82px;
  }
}