/* Maqueta orbital: cursos como sistemas y módulos como planetas. La galaxia es la página, no una ventana dentro de otra. */
.academy-map-page {
  --space-purple: #a878ff;
  --space-cyan: #00e5ff;
  --space-green: #59e6aa;
  /* Paleta de mundo de respaldo: se usa cuando un módulo no declara worldTheme. */
  --world-primary: #7c8aa8;
  --world-secondary: #45526b;
  --world-accent: #00e5ff;
  --world-surface: #10151f;
  --world-glow: #00e5ff33;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-x: hidden;
}
/* Identidad heredada por planeta: superficie, regiones, rutas, nodos y previews leen estas variables. */
.academy-map-page [data-world-theme="violet"] {
  --world-primary: #a878ff;
  --world-secondary: #6a3fc2;
  --world-accent: #00e5ff;
  --world-surface: #150c28;
  --world-glow: #a878ff44;
}
.academy-map-page [data-world-theme="teal"] {
  --world-primary: #38c6b0;
  --world-secondary: #1f6f63;
  --world-accent: #00e5ff;
  --world-surface: #0c1f1c;
  --world-glow: #38c6b044;
}
.academy-map-page [data-world-theme="slate"] {
  --world-primary: #8892a6;
  --world-secondary: #4b5568;
  --world-accent: #9fd3ff;
  --world-surface: #12151c;
  --world-glow: #8892a633;
}
.academy-map-page .top { flex: 0 0 auto; }
/* Interfaz inmersiva de pantalla completa: el pie compartido no encaja aquí. */
.academy-map-page footer { display: none; }
/* Estas capas decorativas compartidas no encajan en el escenario galáctico de esta página. */
.academy-map-page .pattern,
.academy-map-page .neon-console-field { display: none; }

.academy-map-page .learning-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(14px, 2.2vw, 24px) 0 0;
}
.academy-map-page .crumb { flex: 0 0 auto; margin: 0 clamp(24px, 4vw, 64px) 10px; }
.academy-map {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0 clamp(24px, 4vw, 64px) clamp(16px, 3vw, 28px);
  color: #f4f6fb;
}
/* Solo una vista (sistema, módulo o unidad) existe en el DOM a la vez; cada una hereda el mismo contexto flex. */
.view-system, .view-module, .view-unit {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.map-zoom-out > * { animation: viewZoomOut .2s ease forwards; }
.academy-map.is-scene-transition { overflow: clip; background: #0c101b; pointer-events: none; }
@keyframes viewZoomOut { to { opacity: 0; transform: scale(1.06); } }

.orbital-hud,
.module-hud {
  position: absolute;
  z-index: 40;
  top: clamp(8px, 1.6vw, 16px);
  right: clamp(24px, 4vw, 64px);
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #101827f3, #080c14f3);
  border: 1px solid #46536a;
  box-shadow: 0 4px #020407, 0 8px 18px #0009;
  backdrop-filter: blur(10px);
}
.orbital-hud strong, .module-hud strong { color: var(--space-purple); font: 20px/1 var(--ecg-font-pixel); text-shadow: 0 0 12px #a878ff99; }
.orbital-hud span, .module-hud span { color: var(--space-cyan); font: 11px var(--ecg-font-pixel); }

/* Cabecera de ruta y botón de retorno, compartidos por la vista de módulo y de unidad. */
.view-breadcrumb { position: absolute; z-index: 30; top: 8px; left: 0; margin: 0; font: 11px var(--ecg-font-pixel); color: #8e9cb1; letter-spacing: .05em; }
.view-breadcrumb button { padding: 0; color: var(--space-cyan); background: none; border: 0; font: inherit; cursor: pointer; }
.view-breadcrumb button:hover, .view-breadcrumb button:focus-visible { text-decoration: underline; outline: 2px solid var(--space-cyan); outline-offset: 2px; }
.view-breadcrumb b { margin: 0 6px; color: #4e5870; font-weight: normal; }
.view-breadcrumb [aria-current] { color: #d8dee8; }
.view-back {
  position: absolute;
  z-index: 30;
  top: 34px;
  left: 0;
  align-self: flex-start;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  color: #eaf1fa;
  background: #101925;
  border: 1px solid #3c9aae;
  font: 12px var(--ecg-font-pixel);
  cursor: pointer;
}
.view-back:hover, .view-back:focus-visible { color: var(--space-cyan); border-color: var(--space-cyan); outline: none; }

/* Vista de módulo: superficie planetaria provisional (sin cuadrícula, sin tarjetas rectangulares). */
.module-heading, .unit-heading { position: absolute; z-index: 20; top: 8px; left: 50%; width: max-content; max-width: 70%; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; text-align: center; transform: translateX(-50%); pointer-events: none; }
.module-heading small { color: var(--world-accent); font: 11px var(--ecg-font-pixel); letter-spacing: .08em; }
.module-heading h2 { margin: 2px 0 0; font: clamp(16px, 2vw, 22px)/1.2 var(--ecg-font-pixel); text-transform: uppercase; text-shadow: 2px 2px #020306, 0 0 16px var(--world-glow); }
/* El fondo vive en .view-module (no en .module-surface) para que el título quede sobre el
   mismo escenario continuo, sin el marco/corte rectangular que separaba encabezado y mapa. */
.view-module {
  background:
    radial-gradient(ellipse 58% 42% at 28% 76%, color-mix(in srgb, var(--world-primary) 30%, transparent), transparent 64%),
    radial-gradient(ellipse 46% 36% at 76% 20%, color-mix(in srgb, var(--world-accent) 20%, transparent), transparent 64%),
    repeating-linear-gradient(112deg, #ffffff05 0 2px, transparent 2px 40px),
    linear-gradient(165deg, var(--world-surface), #05070b 78%);
}
.module-surface {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.module-canvas { position: relative; width: 100%; min-height: 100%; box-sizing: border-box; }
.world-camera { position: absolute; z-index: 0; inset: 0; overflow: hidden; contain: paint; }
.world-layer { position: absolute; z-index: 0; transform: scale(var(--camera-scale, 1)); transform-origin: 0 0; image-rendering: pixelated; transition: none; }
.world-layer.is-camera-transition { transition: none; }
.world-layer.is-camera-animating { transition: left .58s ease, top .58s ease, transform .58s ease; }
.hex-map { position: absolute; z-index: 0; inset: 0; width: var(--world-width); height: var(--world-height); overflow: hidden; pointer-events: none; opacity: .78; }
.hex-tile {
  position: absolute;
  left: var(--hex-left);
  top: var(--hex-top);
  width: 64px;
  height: 56px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #1c1230;
  box-shadow: inset 0 0 0 1px #a878ff20;
  image-rendering: pixelated;
}
.hex-tile::after { content: ""; position: absolute; inset: 1px; clip-path: inherit; background: #ffffff05; }
.hex-tile[data-terrain="violet-ground"] { background: #2a1747; }
.hex-tile[data-terrain="dark-rock"] { background: #171b32; box-shadow: inset 0 0 0 1px #8892a622; }
.hex-tile[data-terrain="cyan-crystal"] { background: #123b50; box-shadow: inset 0 0 0 1px #00e5ff55; }
.hex-tile[data-terrain="crater"] { background: #38204f; box-shadow: inset 0 0 0 5px #140d25, inset 0 0 0 6px #a878ff25; }
.hex-tile[data-terrain="chasm"] { background: #080d1b; box-shadow: inset 0 0 0 1px #00e5ff38; }
.hex-tile[data-terrain="technical-ground"] { background: var(--world-surface); box-shadow: inset 0 0 0 1px var(--world-glow); }
.hex-tile[data-terrain="technical-ground"]::after { background: color-mix(in srgb, var(--world-primary) 8%, transparent); }
.module-hex-map, .shared-hex-map { opacity: .78; }
.shared-hex-map .hex-tile.is-region-tile { background-color: #513176; box-shadow: inset 0 0 0 2px #00e5ff66, 0 0 8px #a878ff33; }
.shared-hex-map .hex-tile[data-terrain="technical-ground"] { background-color: var(--world-surface); box-shadow: inset 0 0 0 1px var(--world-glow); }
.unit-region-territory { position: absolute; z-index: -1; inset: 4%; overflow: hidden; opacity: .92; pointer-events: none; }
.unit-region-territory .hex-map { position: absolute; inset: 0; }
.unit-region {
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 55%);
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  width: 64px;
  height: 56px;
  padding: 4px 8px;
  min-width: 48px;
  min-height: 48px;
  scroll-margin: 60px;
  color: #eaf1fa;
  text-align: center;
  background: #3c275e;
  border: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: inset 0 0 0 2px var(--world-primary);
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* Densidad media/extendida: regiones algo más compactas para caber más sin recortar el piso accesible. */
.module-surface[data-density="medium"] .unit-region,
.module-surface[data-density="extended"] .unit-region { width: 64px; height: 56px; }
/* Contornos superpuestos: sugieren una masa territorial irregular sin usar arte final. */
.unit-region::before, .unit-region::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
  pointer-events: none;
}
.unit-region::before, .unit-region::after { display: none; }
.unit-region::before { inset: -7%; border: 2px solid color-mix(in srgb, var(--world-accent) 42%, transparent); opacity: .5; }
.unit-region::after { inset: -15%; border: 2px solid color-mix(in srgb, var(--world-primary) 34%, transparent); opacity: .35; transform: rotate(4deg); }
.unit-region-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: var(--world-accent);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--world-accent) 30%, transparent), 0 0 18px var(--world-accent);
}
.unit-region > :not(.unit-region-territory) { position: relative; z-index: 2; }
.unit-region-territory { z-index: 0; }
.unit-region:hover, .unit-region:focus-visible { transform: translate(-50%, -50%) translateY(-6px) scale(1.02); }
.unit-region.is-selected { filter: brightness(1.18); }
.unit-region:focus-visible { outline: 3px solid var(--world-accent); outline-offset: 8px; }
.unit-region-name { max-width: 100%; overflow: hidden; font: 8px/1.05 var(--ecg-font-pixel); text-transform: uppercase; text-shadow: 1px 1px #020306; text-overflow: ellipsis; white-space: nowrap; }
.unit-region-progress { width: 80%; }
.unit-region-progress progress { display: block; width: 100%; height: 3px; padding: 0; border: 0; background: #020407; box-shadow: inset 0 0 0 1px #344055; }
.unit-region-progress progress::-webkit-progress-bar { background: #020407; }
.unit-region-progress progress::-webkit-progress-value { background: linear-gradient(90deg, var(--world-primary), var(--world-accent)); }
.unit-region-progress progress::-moz-progress-bar { background: linear-gradient(90deg, var(--world-primary), var(--world-accent)); }
.unit-region-meta { color: #cfe0e8; font: 7px/1 var(--ecg-font-pixel); opacity: .85; }
.unit-region-state { padding: 1px 3px; color: var(--world-accent); background: transparent; border: 0; font: 6px/1 var(--ecg-font-pixel); letter-spacing: .02em; }
.unit-region.state-completed .unit-region-state { color: var(--space-green); border-color: color-mix(in srgb, var(--space-green) 45%, transparent); }
.unit-region.state-locked { cursor: default; filter: grayscale(.8) brightness(.65); }
.unit-region.state-locked .unit-region-state { color: #9aa3ac; border-color: #4b5563; }
.unit-region.state-locked .unit-region-marker { background: #767e8c; box-shadow: 0 0 0 4px #767e8c33; }

.view-module-territories { min-width: 0; }
.view-module-territories .module-surface { min-width: 0; contain: inline-size; overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #665282 #160f24; scroll-padding: 110px 50px 50px; }
.view-module-territories .module-canvas { min-width: 0; }
.view-module-territories .territory-hex-map { opacity: 1; overflow: visible; }
.view-module-territories .hex-tile { opacity: .78; }
.view-module-territories .hex-tile.is-region-tile:not(.territory-cell) { background-color: #2a1747; box-shadow: inset 0 0 0 1px #a878ff20; }
.view-module-territories .unit-territory {
  --territory-accent: var(--world-accent);
  position: absolute;
  left: var(--territory-left);
  top: var(--territory-top);
  width: var(--territory-width);
  height: var(--territory-height);
  z-index: 2;
  pointer-events: none;
  transform-origin: var(--anchor-x) var(--anchor-y);
  transition: transform .16s ease;
}
.view-module-territories .unit-territory .hex-tile {
  left: calc(var(--hex-left) - var(--territory-left));
  top: calc(var(--hex-top) - var(--territory-top));
  opacity: 1;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
}
.view-module-territories .territory-cell::after {
  inset: 0;
  background: var(--territory-accent);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0, 26% 2%, 2% 50%, 26% 98%, 74% 98%, 98% 50%, 74% 2%, 26% 2%, 25% 0);
  opacity: .25;
}
.view-module-territories .territory-anchor { display: grid; place-items: center; border: 0; border-radius: 0; padding: 0; color: #f4f6fb; pointer-events: auto; cursor: pointer; }
.view-module-territories .territory-anchor::after { opacity: .85; }
.territory-marker { font: 16px/1 var(--ecg-font-pixel); text-shadow: 1px 1px 2px #000; }
.territory-marker i { color: var(--territory-accent); font: normal 7px "Segoe UI Symbol", sans-serif; }
.territory-final .territory-marker { font-size: 9px; }
.view-module-territories .module-route { z-index: 1; }
.view-module-territories .activity-route-dot { position: absolute; width: 2px; height: 2px; background: var(--world-accent); opacity: .35; border-radius: 50%; transform: translate(-50%, -50%); }
.view-module-territories .unit-territory:is(:focus-within, .is-selected) { z-index: 3; transform: translateY(-4px) scale(1.06); }
.view-module-territories .unit-territory:is(:focus-within, .is-selected) .territory-cell::after { opacity: .85; }
.view-module-territories .territory-anchor:focus-visible { outline: none; --territory-accent: #eafcff; }
.view-module-territories .unit-territory.state-locked { --territory-accent: #adb4c5; }
.view-module-territories .state-locked .territory-cell { filter: saturate(.22) brightness(.72); }
.view-module-territories .state-locked .territory-anchor { cursor: default; }
.view-module-territories .unit-territory.state-completed { --territory-accent: var(--space-green); }
@media (hover: hover) and (pointer: fine) {
  .view-module-territories .unit-territory:hover { z-index: 3; transform: translateY(-4px) scale(1.06); }
  .view-module-territories .unit-territory:hover .territory-cell::after { opacity: .85; }
}
@media (max-width: 760px) {
  .view-module-territories .view-breadcrumb { top: 12px; left: 12px; right: 12px; line-height: 1.8; letter-spacing: 0; }
  .view-module-territories .view-back { top: 48px; left: 12px; }
  .view-module-territories .module-hud { top: 114px; right: 12px; max-width: 148px; padding: 8px; flex-wrap: wrap; }
  .view-module-territories .module-heading { top: 114px; left: 12px; max-width: calc(100% - 174px); transform: none; text-align: left; }
  .view-module-territories .module-heading h2 { font-size: 16px; overflow-wrap: anywhere; }
  .view-module-territories .module-heading small { letter-spacing: 0; }
  .view-module-territories .module-surface { scroll-padding-top: 190px; }
}

/* Vista de unidad: mapa regional de misiones, nodos grandes conectados por una ruta con dirección clara. */
.unit-heading { margin-bottom: 8px; }
.unit-heading small { color: var(--world-accent); font: 11px var(--ecg-font-pixel); letter-spacing: .08em; }
.unit-heading h2 { margin: 2px 0 0; font: clamp(16px, 2vw, 22px)/1.2 var(--ecg-font-pixel); text-transform: uppercase; text-shadow: 2px 2px #020306, 0 0 16px var(--world-glow); }
.view-unit {
  background:
    radial-gradient(ellipse 58% 44% at 30% 28%, color-mix(in srgb, var(--world-primary) 26%, transparent), transparent 64%),
    radial-gradient(ellipse 50% 38% at 74% 78%, color-mix(in srgb, var(--world-accent) 20%, transparent), transparent 64%),
    repeating-linear-gradient(70deg, #ffffff05 0 2px, transparent 2px 40px),
    linear-gradient(165deg, var(--world-surface), #05070b 78%);
}
.mission-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.mission-canvas { position: relative; width: 100%; min-width: var(--world-scroll-width, 0px); min-height: 100%; box-sizing: border-box; }
.mission-hex-map { opacity: .42; }
.mission-map .world-camera { z-index: 0; }
.unit-mission-content { opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.unit-mission-content.is-visible { opacity: 1; pointer-events: auto; }
.world-layer[data-camera-level="2"] .mission-node-label { transform: none; }
.mission-route { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mission-route-segment { position: absolute; height: 0; border-top: 2px dotted var(--world-accent); opacity: .6; transform-origin: left center; }
/* Chevron estático (no animado) que marca el sentido del recorrido a mitad de cada segmento. */
.mission-route-segment::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--world-accent);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4px var(--world-accent));
}
.mission-node {
  position: absolute;
  z-index: 1;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  scroll-margin: 60px;
  padding: 0;
  color: #eaf1fa;
  background: #263354;
  border: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: inset 0 0 0 2px var(--world-primary), 0 0 0 1px #020407;
  image-rendering: pixelated;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, background-color .16s ease;
}
/* Densidad media/extendida: marcadores algo más compactos, nunca por debajo del piso táctil de 48 px. */
.mission-map[data-density="medium"] .mission-node,
.mission-map[data-density="extended"] .mission-node { width: 64px; }
/* El marcador circular es solo el icono; el título vive fuera de él para no perderse dentro. */
.mission-node-badge {
  width: 1px;
  height: 1px;
  min-width: 48px;
  min-height: 48px;
  opacity: 0;
  pointer-events: none;
}
.mission-node-label { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; width: 100%; padding: 4px 8px; overflow: hidden; color: #f4f6fb; text-align: center; text-shadow: 1px 1px #020407; pointer-events: none; }
.mission-node-label small { display: block; color: var(--world-accent); font-size: 6px; letter-spacing: .02em; }
.mission-node-label strong { display: block; max-width: 100%; overflow: hidden; font-size: 7px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.mission-node-label em, .mission-node-label i { display: block; font: 6px/1 var(--ecg-font-pixel); font-style: normal; }
.mission-node:hover, .mission-node:focus-visible { transform: translate(-50%, -50%) translateY(-4px); filter: brightness(1.2); }
.mission-node.is-selected { filter: brightness(1.2); }
.mission-node:focus-visible { outline: 3px solid var(--world-accent); outline-offset: 5px; }
.mission-node.state-completed { background: #245744; }
.mission-node.state-locked { cursor: default; }
.mission-node.state-locked { background: #343947; filter: grayscale(.8); }
.mission-node-exam { width: 80px; height: 70px; background: #4a2e70; }

.view-unit-tiles {
  --unit-tile-width: 64px;
  --unit-tile-height: 56px;
  --activity-lift: 1.12;
  min-width: 0;
}
.view-unit-tiles .mission-map { min-width: 0; contain: inline-size; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #665282 #160f24; }
.view-unit-tiles .mission-canvas { min-width: 0; }
.view-unit-tiles .hex-map { z-index: auto; overflow: visible; opacity: 1; }
.view-unit-tiles .hex-tile { width: var(--unit-tile-width); height: var(--unit-tile-height); opacity: .78; }
.view-unit-tiles .mission-route { z-index: 1; }
.view-unit-tiles .activity-route-dot { position: absolute; width: 2px; height: 2px; background: var(--world-accent); opacity: .7; border-radius: 50%; transform: translate(-50%, -50%); }
.view-unit-tiles .unit-heading { top: 20px; max-width: calc(100% - 640px); }
.view-unit-tiles .unit-heading small { font-size: 11px; letter-spacing: 0; }
.view-unit-tiles .unit-heading h2 { font-size: 16px; letter-spacing: 0; }
.view-unit-tiles .activity-tile {
  --tile-accent: var(--world-accent);
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  color: #f4f6fb;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  font-family: var(--ecg-font-pixel);
  letter-spacing: 0;
  transform-origin: center;
  transition: transform .16s ease, filter .16s ease;
}
.view-unit-tiles .activity-tile::after {
  inset: 0;
  background: var(--tile-accent);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0, 26% 2%, 2% 50%, 26% 98%, 74% 98%, 98% 50%, 74% 2%, 26% 2%, 25% 0);
  opacity: .65;
  pointer-events: none;
}
.view-unit-tiles .activity-tile.state-locked { --tile-accent: #adb4c5; filter: saturate(.22) brightness(.72); cursor: default; }
.view-unit-tiles .activity-tile.state-completed { --tile-accent: var(--space-green); }
.view-unit-tiles .activity-tile:is(:focus-visible, .is-selected) { z-index: 3; transform: scale(var(--activity-lift)); }
.view-unit-tiles .activity-tile:focus-visible { outline: none; --tile-accent: #eafcff; }
.view-unit-tiles .activity-tile:is(:focus-visible, .is-selected)::after { opacity: 1; }
.activity-tile-rest { display: flex; align-items: center; justify-content: center; gap: 3px; font: 9px/1 var(--ecg-font-pixel); text-shadow: 0 1px 2px #050309, 1px 0 2px #050309; }
.activity-tile-rest b { font-weight: normal; }
.activity-tile-marker { color: var(--tile-accent); font: 8px/1 "Segoe UI Symbol", sans-serif; }
.activity-tile.state-available .activity-tile-marker { font-size: 4px; }
@media (hover: hover) and (pointer: fine) {
  .view-unit-tiles .activity-tile:hover { z-index: 3; transform: scale(var(--activity-lift)); }
  .view-unit-tiles .activity-tile:hover::after { opacity: 1; }
}
@media (max-width: 760px) {
  .view-unit-tiles .view-breadcrumb { top: 12px; left: 12px; right: 12px; line-height: 1.8; }
  .view-unit-tiles .view-back { top: 50px; left: 12px; }
  .view-unit-tiles .unit-heading { top: 112px; max-width: calc(100% - 24px); }
  .view-unit-tiles .unit-heading h2 { font-size: 16px; }
}

/* Preview de lección en escritorio: ancla junto al nodo; mapa y ruta permanecen visibles e interactivos. */
.lesson-popover {
  position: fixed;
  z-index: 130;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(360px, calc(100vw - 32px));
  padding: 20px 22px;
  color: #eaf1fa;
  background: linear-gradient(150deg, var(--world-surface), #05070b 85%);
  border: 2px solid var(--world-accent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--world-surface) 70%, #000), 6px 6px #020407, 0 0 30px var(--world-glow);
  animation: previewIn .16s steps(3, end);
}
.lesson-popover::before { position: absolute; top: 0; right: 100%; width: 20px; height: 100%; content: ""; }
.lesson-popover::after { position: absolute; top: 50%; right: 100%; width: 20px; height: 2px; content: ""; background: var(--world-accent); box-shadow: 0 0 8px var(--world-accent); }
.lesson-popover.pop-side-left::before, .lesson-popover.pop-side-left::after { right: auto; left: 100%; }
.lesson-popover-close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #b7c7d8; background: #101925; border: 1px solid var(--world-accent); font: 11px var(--ecg-font-pixel); cursor: pointer; }
.lesson-popover-close:hover, .lesson-popover-close:focus-visible { color: #fff; outline: 2px solid var(--world-accent); outline-offset: 2px; }
.lesson-popover header { padding-right: 34px; }
.lesson-popover header small { color: var(--world-accent); font: 11px var(--ecg-font-pixel); }
.lesson-popover header strong { display: block; margin-top: 8px; font: 16px/1.35 var(--ecg-font-pixel); text-transform: uppercase; }
.lesson-popover-meta { display: flex; gap: 10px; font: 11px var(--ecg-font-pixel); }
.lesson-popover-meta span { padding: 6px 10px; background: color-mix(in srgb, var(--world-surface) 70%, #000); border: 1px solid color-mix(in srgb, var(--world-accent) 40%, transparent); color: #cdd6e0; }

/* Preview de lección en móvil: conserva la superposición actual (más espacio y mejores objetivos táctiles). */
.lesson-preview-layer { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 22px; }
.lesson-preview {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: calc(100dvh - 44px);
  padding: 24px;
  overflow-y: auto;
  color: #eef1f7;
  background: linear-gradient(145deg, var(--world-surface), #05070b 78%);
  border: 3px solid var(--world-accent);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--world-surface) 70%, #000), 0 10px #020305, 0 0 40px var(--world-glow);
  animation: previewIn .2s steps(3, end);
}
.lesson-preview header { padding-right: 40px; }
.lesson-preview header small { color: var(--world-accent); font: 11px var(--ecg-font-pixel); }
.lesson-preview header h2 { margin: 8px 0 0; font: clamp(20px, 3.6vw, 26px)/1.3 var(--ecg-font-pixel); text-transform: uppercase; }
.lesson-preview-meta { display: flex; gap: 12px; margin: 18px 0; font: 12px var(--ecg-font-pixel); }
.lesson-preview-meta span { padding: 6px 10px; background: #0b111b; border: 1px solid #3c485c; color: #bdc4cf; }
.lesson-preview-action { display: block; width: 100%; min-height: 48px; padding: 12px; color: #120e1a; background: linear-gradient(var(--world-accent), var(--world-primary)); border: 0; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--world-accent) 60%, #fff), inset 0 -5px color-mix(in srgb, var(--world-primary) 70%, #000), 0 4px #020407; font: 13px var(--ecg-font-pixel); text-align: center; text-decoration: none; cursor: pointer; }
.lesson-preview-action:hover, .lesson-preview-action:focus-visible { filter: brightness(1.12); outline: 2px solid var(--world-accent); outline-offset: 2px; }
.lesson-preview-action[disabled] { color: #8d9096; background: #292c32; box-shadow: inset 0 0 0 3px #4a4e56, inset 0 -5px #17191d, 0 4px #020407; cursor: default; }

.map-popover { animation: none; overflow: hidden; max-height: calc(100dvh - 32px); }
.map-popover::before, .map-popover::after { display: none; }
.map-preview-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; padding: 4px 0; }
.map-popover .lesson-popover-meta { flex-wrap: wrap; margin-top: 16px; }
.map-popover .lesson-popover-meta span { font-size: 12px; }
.map-popover .lesson-preview-action { flex: 0 0 auto; }
.map-popover-close { width: 36px; height: 36px; }
.map-preview-requirement { margin: 14px 0 0; color: #bdc4cf; font: 14px/1.5 var(--ecg-font-pixel); }
.map-preview-layer { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 16px; }
.map-preview-layer .map-popover { position: relative; top: auto; left: auto; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); }
@media (max-width: 760px) {
  .map-popover { padding: 20px 16px; }
  .map-popover-close { width: 44px; height: 44px; }
  .map-popover header { padding-right: 48px; }
  .map-popover header strong { font-size: 18px; }
  .map-popover .lesson-popover-meta span { font-size: 13px; }
  .map-preview-requirement { font-size: 15px; }
}

.stage-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 28%, #182644, #0a1220 55%, #04070d 85%); }
.stage-stars i { position: absolute; inset: 0; display: block; background-repeat: repeat; }
.stage-stars i:nth-child(1) { background-image: radial-gradient(#dfeaff 1px, transparent 1px); background-size: 61px 53px; opacity: .5; }
.stage-stars i:nth-child(2) { background-image: radial-gradient(#9fd3ff 1.3px, transparent 1.6px); background-size: 97px 83px; opacity: .4; transform: translate(31px, 17px); }
.stage-stars i:nth-child(3) { background-image: radial-gradient(#ffffff 1.6px, transparent 2px); background-size: 151px 127px; opacity: .5; transform: translate(19px, 41px); }
.stage-twinkle { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage-twinkle i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #eef4ff; opacity: .15; box-shadow: 0 0 4px #eef4ff; animation: starTwinkle 6s ease-in-out infinite; }
.stage-twinkle i:nth-child(1) { top: 10%; left: 8%; animation-duration: 5.4s; animation-delay: -.6s; }
.stage-twinkle i:nth-child(2) { top: 18%; left: 74%; animation-duration: 6.8s; animation-delay: -2.3s; }
.stage-twinkle i:nth-child(3) { top: 34%; left: 44%; animation-duration: 7.6s; animation-delay: -4.1s; }
.stage-twinkle i:nth-child(4) { top: 52%; left: 16%; animation-duration: 5.9s; animation-delay: -1.8s; }
.stage-twinkle i:nth-child(5) { top: 66%; left: 88%; animation-duration: 8.2s; animation-delay: -3.5s; }
.stage-twinkle i:nth-child(6) { top: 78%; left: 36%; animation-duration: 6.3s; animation-delay: -5.2s; }
.stage-twinkle i:nth-child(7) { top: 24%; left: 92%; animation-duration: 7.1s; animation-delay: -2.9s; }
@keyframes starTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }

.orbital-heading { flex: 0 0 auto; max-width: 700px; margin: clamp(8px, 1.6vw, 16px) auto clamp(14px, 2vw, 20px); text-align: center; }
.orbital-heading small { color: var(--space-cyan); font: 11px var(--ecg-font-pixel); letter-spacing: .08em; }
.orbital-heading h2 { margin: 11px 0 12px; font: clamp(28px, 4vw, 43px)/1.15 var(--ecg-font-pixel); text-shadow: 4px 4px #020306, 0 0 22px #a878ff55; }
.orbital-heading p, .orbital-hint { color: #bbc2ce; font: 16px/1.7 var(--ecg-font-pixel); }
.orbital-heading p { margin: 0; }

.solar-map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(420px, 58vh, 760px);
  margin: 0 auto;
}

.orbit {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  border: 2px dashed #7181a333;
  border-radius: 50%;
  box-shadow: 0 0 16px #a878ff0d, inset 0 0 16px #00e5ff0b;
  transform: translate(-50%, -50%) rotate(-9deg);
}
.orbit-one { width: 88%; height: 78%; }
.orbit-two { width: 64%; height: 56%; }
.orbit-three { width: 39%; height: 34%; }
.orbit-three.is-shared { width: 50%; height: 48%; }
.orbit.has-progress-track { border-color: transparent; box-shadow: none; }
.orbital-tracks { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbital-track { fill: none; stroke: #747d8b; stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; opacity: .6; }
.orbital-track.state-available { stroke: var(--space-cyan); opacity: .85; filter: drop-shadow(0 0 4px #a878ff88); }
.orbital-track.state-completed { stroke: var(--space-green); opacity: .9; }

.course-star {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(74px, 10vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff6cd 0 7%, #ffcc5d 17%, #d86446 49%, #7e2942 70%, transparent 72%);
  filter: drop-shadow(0 0 17px #ffb65cbb) drop-shadow(0 0 38px #a878ff88);
  transform: translate(-50%, -50%);
}
.course-star i { position: absolute; width: 22%; height: 22%; background: #8f3e45; box-shadow: 25px 9px #cf704a, -20px 18px #ba5547; }
.course-star b { position: absolute; top: calc(100% + 34px); color: #ffe6ab; font: 11px var(--ecg-font-pixel); text-shadow: 2px 2px #020306, 0 0 10px #ffbe69; white-space: nowrap; }

.planet-node {
  position: absolute;
  z-index: 5;
  width: clamp(62px, 7vw, 82px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.planet-node.is-preview-open { z-index: 20; }
.orbit-planet {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  color: #eef2f8;
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: filter .18s;
}
.orbit-planet:hover, .orbit-planet:focus-visible {
  outline: none;
}
.planet-sphere {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #cbb9ff 0 8%, #8d68d2 23%, #40346e 55%, #15152a 76%);
  border: 5px solid #cbb7ec;
  box-shadow: 0 0 0 4px #332844, 0 0 21px #a878ff88;
  image-rendering: pixelated;
  transition: transform .18s steps(2, end), filter .18s, box-shadow .18s;
}
.planet-sphere::before { position: absolute; top: 16%; left: -15%; width: 130%; height: 18%; content: ""; background: #00d9f07a; transform: rotate(-19deg); box-shadow: 0 17px #4c3c887d; }
.planet-sphere i { position: absolute; right: 17%; bottom: 18%; width: 18%; height: 18%; background: #252346; box-shadow: -24px -5px #654c9e, -12px 19px #302b58; }
.planet-sphere.has-art,
.preview-planet.has-art { overflow: visible; background: none; border: 0; box-shadow: none; }
.planet-sphere.has-art::before,
.preview-planet.has-art::before { display: none; }
.planet-node:is(:hover, :focus-within, .is-preview-open) .planet-sphere { transform: translateY(-7px) scale(1.08); filter: brightness(1.16); box-shadow: 0 0 0 4px #332844, 0 0 33px #a878ffcc; }
.planet-node:is(:hover, :focus-within, .is-preview-open) .planet-sphere.has-art { box-shadow: none; }
.orbit-planet:active .planet-sphere { transform: translateY(3px) scale(.97); }
.planet-label {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  width: max-content;
  max-width: 220px;
  color: #f4f5f9;
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, 0);
  filter: drop-shadow(3px 3px #020306) drop-shadow(0 0 8px #000);
}
.planet-label small, .planet-label strong, .planet-label b { display: block; font-family: var(--ecg-font-pixel); }
.planet-label small { color: var(--space-cyan); font-size: 10px; }
.planet-label strong { margin: 7px 0; font-size: 14px; line-height: 1.35; text-transform: uppercase; }
.planet-label b { color: #c0c6d0; font-size: 7px; }
.planet-popover {
  position: fixed;
  z-index: 130;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 390px;
  max-height: min(460px, calc(100dvh - 32px));
  padding: 17px;
  overflow: hidden;
  color: #eaf1fa;
  background: linear-gradient(105deg, #0d1b28, #090d15);
  border: 2px solid #3c9aae;
  box-shadow: inset 0 0 0 4px #071019, 5px 5px #020407, 0 0 25px #00e5ff33;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .14s, transform .14s, visibility 0s linear .14s;
}
.planet-popover::before { position: absolute; top: 0; right: 100%; width: 25px; height: 100%; content: ""; }
.planet-popover::after { position: absolute; top: 50%; right: 100%; width: 25px; height: 2px; content: ""; background: var(--space-cyan); box-shadow: 0 0 8px var(--space-cyan); }
.planet-popover.pop-side-left::before, .planet-popover.pop-side-left::after { right: auto; left: 100%; }
.planet-popover.pop-side-left { transform: translateX(8px); }
.planet-popover.is-preview-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
/* Corredor invisible entre el planeta y su preview: evita que el cierre programado gane la carrera al cursor lento. */
.planet-popover-bridge { position: fixed; z-index: 129; background: transparent; pointer-events: none; }
.planet-popover-bridge.is-active { pointer-events: auto; }
.planet-popover-close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; color: #b7c7d8; background: #101925; border: 1px solid #49788a; font: 11px var(--ecg-font-pixel); cursor: pointer; }
.planet-popover-close:hover, .planet-popover-close:focus-visible { color: #fff; border-color: var(--space-cyan); outline: 2px solid var(--space-cyan); outline-offset: 2px; }
.planet-popover-header { flex: 0 0 auto; padding: 2px 36px 12px 2px; border-bottom: 1px solid #33485a; }
.planet-popover-header small, .planet-popover-header strong { display: block; font-family: var(--ecg-font-pixel); }
.planet-popover-header small { color: var(--space-cyan); font-size: 10px; }
.planet-popover-header strong { margin: 8px 0; font-size: 17px; line-height: 1.35; text-transform: uppercase; }
.planet-popover-header p { margin: 0; color: #b8c2cf; font: 14px/1.55 var(--ecg-font-pixel); }
.planet-popover-progress { flex: 0 0 auto; margin: 12px 0; padding: 10px 11px; background: #071019; border: 1px solid #324a5b; }
.planet-popover-progress > span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font: 11px var(--ecg-font-pixel); }
.planet-popover-progress > span strong { color: var(--space-cyan); }
.planet-popover-progress progress { display: block; width: 100%; height: 10px; padding: 2px; border: 0; background: #020407; box-shadow: inset 0 0 0 1px #344055; }
.planet-popover-progress progress::-webkit-progress-bar { background: #020407; }
.planet-popover-progress progress::-webkit-progress-value { background: linear-gradient(90deg, var(--space-purple), var(--space-cyan)); }
.planet-popover-progress progress::-moz-progress-bar { background: linear-gradient(90deg, var(--space-purple), var(--space-cyan)); }
.planet-popover-progress > small { display: block; margin-top: 7px; color: #9ba8b8; font: 10px var(--ecg-font-pixel); text-align: right; }
.planet-popover-curriculum { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-color: #397487 #080b11; }
.planet-popover .preview-unit > header { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 11px; }
.planet-popover .preview-unit > header strong { font-size: 13px; }
.planet-popover .preview-unit > header span, .planet-popover .preview-unit > header small { font-size: 9px; }
.planet-popover .preview-unit ul { padding: 3px 10px; }
.planet-popover .preview-activity { grid-template-columns: 18px minmax(0, 1fr); gap: 7px; padding: 8px 1px; }
.planet-popover .preview-activity small { font-size: 9px; }
.planet-popover .preview-activity strong { font-size: 13px; line-height: 1.4; }
.planet-popover .preview-unit-list { gap: 6px; }
.planet-popover .preview-unit-list > span { grid-template-columns: 72px minmax(0, 1fr); gap: 7px 10px; padding: 9px 10px; }
.planet-popover .preview-unit-list b { font-size: 9px; }
.planet-popover .preview-unit-list strong { font-size: 12px; }
.planet-popover .preview-unit-list small { grid-column: 2; font-size: 9px; }
.planet-popover .preview-empty { padding: 14px; font-size: 11px; }
.planet-popover-travel { flex: 0 0 auto; width: 100%; min-height: 46px; margin-top: 12px; padding: 9px; color: #120e1a; background: linear-gradient(#d8c0ff, #a878ff); border: 0; box-shadow: inset 0 0 0 3px #eadcff, inset 0 -5px #68449c, 0 4px #020407; font: 12px/1.45 var(--ecg-font-pixel); cursor: pointer; }
.planet-popover-travel:hover, .planet-popover-travel:focus-visible { filter: brightness(1.13); outline: 2px solid var(--space-cyan); outline-offset: 2px; }
.planet-popover-travel:active { transform: translateY(2px); }
.planet-popover-travel:disabled { color: #a0a4ab; background: #292c32; box-shadow: inset 0 0 0 3px #4a4e56, inset 0 -5px #17191d, 0 4px #020407; cursor: default; }
.planet-node.state-locked .orbit-planet { filter: grayscale(.85) brightness(.58); }
.planet-node.state-locked:is(:hover, :focus-within, .is-preview-open) .orbit-planet { filter: grayscale(.75) brightness(.78); }
.planet-node.state-locked .planet-label small, .planet-node.state-locked .planet-label b { color: #a0a3aa; }
.planet-popover.state-locked { border-color: #757b85; box-shadow: inset 0 0 0 4px #0b0e13, 5px 5px #020407, 0 0 18px #8f96a322; }
.planet-popover.state-locked::after { background: #777e89; box-shadow: 0 0 7px #777e89; }
.planet-node.is-denied { animation: deniedPlanet .24s steps(2, end) 2; }
.planet-2 .planet-sphere { background: radial-gradient(circle at 33% 28%, #b7d6df 0 8%, #527583 25%, #273a4a 57%, #111923 78%); }
.planet-3 .planet-sphere { background: radial-gradient(circle at 33% 28%, #d6c09c 0 8%, #80684d 25%, #45382d 57%, #191510 78%); }
.planet-node[data-orbital-progress] .planet-sphere.has-art { background: none; }
.planet-node[data-orbital-progress].state-locked .orbit-planet,
.planet-node[data-orbital-progress].state-locked:is(:hover, :focus-within, .is-preview-open) .orbit-planet { filter: none; }
.planet-node[data-orbital-progress].state-completed .planet-sphere::after { content: ""; position: absolute; inset: -15%; border: 2px solid var(--space-green); border-radius: 50%; box-shadow: 0 0 8px #59e6aa55; pointer-events: none; }
.planet-node[data-orbital-progress] .orbital-status { color: var(--space-cyan); font-size: 10px; line-height: 1.5; letter-spacing: 0; }
.planet-node[data-label-placement="below"] .planet-label { top: calc(100% + 18px); bottom: auto; }
.planet-node[data-orbital-progress].state-locked .orbital-status { color: #c0c6d0; }
.planet-node[data-orbital-progress].state-completed .orbital-status { color: var(--space-green); }
.planet-node[data-orbital-progress] .orbit-planet:focus-visible .planet-sphere { outline: 2px solid var(--space-cyan); outline-offset: 12px; }
.orbital-hint { flex: 0 0 auto; margin: clamp(10px, 2vw, 19px) auto 0; text-align: center; font-size: 14px; }

body.academy-preview-open { overflow: hidden; }
.planet-preview-layer { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 22px; }
.planet-preview-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #02050be8; backdrop-filter: blur(8px); cursor: pointer; }
.planet-preview {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100dvh - 44px);
  padding: 26px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #eef1f7;
  background: linear-gradient(145deg, #131a29, #080c13 72%);
  border: 3px solid #755b99;
  box-shadow: inset 0 0 0 6px #090d15, 0 10px #020305, 0 0 48px #a878ff44;
  animation: previewIn .2s steps(3, end);
}
.preview-close { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; color: #eee6fa; background: #251b31; border: 2px solid #8665aa; box-shadow: 3px 3px #020305; font: 14px var(--ecg-font-pixel); cursor: pointer; }
.preview-close:hover, .preview-close:focus-visible { color: var(--space-cyan); border-color: var(--space-cyan); outline: none; }
.preview-header { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 22px; align-items: center; padding: 8px 52px 22px 4px; border-bottom: 1px solid #3c4659; }
.preview-planet { position: relative; display: block; width: 92px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 33% 28%, #cbb9ff 0 8%, #8d68d2 23%, #40346e 55%, #15152a 76%); border: 5px solid #cbb7ec; box-shadow: 0 0 0 4px #332844, 0 0 25px #a878ff88; }
.preview-planet::before { position: absolute; top: 16%; left: -15%; width: 130%; height: 18%; content: ""; background: #00d9f07a; transform: rotate(-19deg); box-shadow: 0 17px #4c3c887d; }
.preview-planet i { position: absolute; right: 17%; bottom: 18%; width: 18%; height: 18%; background: #252346; box-shadow: -24px -5px #654c9e, -12px 19px #302b58; }
.preview-header small { color: var(--space-cyan); font: 11px var(--ecg-font-pixel); }
.preview-header h2 { margin: 9px 0 11px; font: clamp(22px, 4vw, 34px)/1.2 var(--ecg-font-pixel); text-transform: uppercase; text-shadow: 3px 3px #020305; }
.preview-header p { margin: 0; color: #bdc4cf; font: 16px/1.65 var(--ecg-font-pixel); }
.preview-progress { margin: 20px 0; padding: 14px 16px; background: #0b111b; border: 1px solid #3c485c; }
.preview-progress > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 11px var(--ecg-font-pixel); }
.preview-progress b { color: #9ca5b4; }
.preview-progress strong { color: var(--space-cyan); }
.preview-progress progress { display: block; width: 100%; height: 12px; padding: 2px; border: 0; background: #020407; box-shadow: inset 0 0 0 2px #344055; }
.preview-progress progress::-webkit-progress-bar { background: #020407; }
.preview-progress progress::-webkit-progress-value { background: linear-gradient(90deg, var(--space-purple), var(--space-cyan)); }
.preview-progress progress::-moz-progress-bar { background: linear-gradient(90deg, var(--space-purple), var(--space-cyan)); }
.preview-progress > small { display: block; margin-top: 10px; color: #9aa3b2; font: 10px/1.5 var(--ecg-font-pixel); text-align: right; }
.preview-curriculum { display: grid; gap: 12px; max-height: 310px; overflow-y: auto; scrollbar-color: #76599a #080b11; }
.preview-unit { background: #0c121c; border: 1px solid #424d61; }
.preview-unit > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 15px; padding: 13px 15px; background: #151c29; border-bottom: 1px solid #3d485d; }
.preview-unit > header small { grid-column: 1 / -1; color: var(--space-cyan); font: 10px var(--ecg-font-pixel); }
.preview-unit > header strong { font: 15px/1.4 var(--ecg-font-pixel); text-transform: uppercase; }
.preview-unit > header span { color: #a0a8b6; font: 10px var(--ecg-font-pixel); }
.preview-unit ul { margin: 0; padding: 6px 14px; list-style: none; }
.preview-activity { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: center; padding: 11px 2px; border-bottom: 1px solid #252e3c; }
.preview-activity:last-child { border-bottom: 0; }
.preview-activity > span { color: #747d8c; font: 14px var(--ecg-font-pixel); }
.preview-activity small, .preview-activity strong { display: block; }
.preview-activity small { margin-bottom: 5px; color: #929cad; font: 9px var(--ecg-font-pixel); }
.preview-activity strong { color: #d0d5dd; font: 13px/1.45 var(--ecg-font-pixel); }
.preview-activity.is-completed > span, .preview-activity.is-completed strong { color: var(--space-green); }
.preview-unit-list { display: grid; gap: 8px; }
.preview-unit-list > span { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 13px 15px; background: #11161e; border: 1px solid #3d434d; }
.preview-unit-list b, .preview-unit-list strong, .preview-unit-list small { font-family: var(--ecg-font-pixel); }
.preview-unit-list b { color: #a6abb4; font-size: 10px; }
.preview-unit-list strong { color: #d0d2d7; font-size: 13px; line-height: 1.4; }
.preview-unit-list small { color: #9a9ea7; font-size: 9px; }
.preview-empty { padding: 20px; color: #a7aab0; background: #11151c; border: 1px solid #3e434b; text-align: center; font: 12px/1.6 var(--ecg-font-pixel); }
.preview-travel { display: block; width: 100%; min-height: 54px; margin-top: 17px; padding: 12px; color: #120e1a; background: linear-gradient(#d8c0ff, #a878ff); border: 0; box-shadow: inset 0 0 0 3px #eadcff, inset 0 -6px #68449c, 0 5px #020407; font: 14px/1.5 var(--ecg-font-pixel); cursor: pointer; }
.preview-travel:hover, .preview-travel:focus-visible { filter: brightness(1.12); outline: 2px solid var(--space-cyan); outline-offset: 3px; }
.preview-travel:active { transform: translateY(3px); }
.preview-travel:disabled { color: #8d9096; background: #292c32; box-shadow: inset 0 0 0 3px #4a4e56, inset 0 -6px #17191d, 0 5px #020407; cursor: default; }
.planet-preview.state-locked { border-color: #5a5e66; box-shadow: inset 0 0 0 6px #0b0d11, 0 10px #020305, 0 0 36px #9da2aa22; }
.planet-preview.state-locked .preview-planet { filter: grayscale(1) brightness(.65); }

@keyframes previewIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

.map-feedback {
  position: fixed;
  z-index: 150;
  bottom: 22px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 13px 17px;
  color: #f2e9ff;
  background: #23182ff5;
  border: 2px solid #ac84d6;
  box-shadow: 5px 5px #020407;
  text-align: center;
  font: 11px/1.5 var(--ecg-font-pixel);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .15s;
}
.map-feedback.visible { opacity: 1; }

@keyframes deniedPlanet {
  0%, 100% { translate: 0; }
  33% { translate: -7px; }
  66% { translate: 7px; }
}

@media (max-width: 760px) {
  .orbital-hud { position: static; align-self: flex-end; margin-top: 8px; padding: 7px 11px; }
  .orbital-hud strong { font-size: 17px; }
  .orbital-heading h2 { font-size: clamp(24px, 8vw, 34px); }
  .orbital-heading p { font-size: 16px; }
  .solar-map { min-height: 500px; }
  .orbit-one { width: 118%; height: 84%; }
  .orbit-two { width: 88%; height: 62%; }
  .orbit-three { width: 56%; height: 37%; }
  .orbit-three.is-shared { width: 72%; height: 58%; }
  .course-star { width: 76px; }
  .planet-node { width: 58px; }
  .planet-label { bottom: calc(100% + 15px); max-width: 170px; }
  .planet-label small { font-size: 9px; }
  .planet-label strong { font-size: 11px; }
  .planet-popover { display: none; }
  .orbital-hint { font-size: 15px; }
  .planet-preview-layer { align-items: end; padding: 10px; }
  .planet-preview { width: 100%; max-height: calc(100dvh - 20px); padding: 20px 15px; }
  .preview-header { grid-template-columns: 72px minmax(0, 1fr); gap: 15px; padding: 7px 45px 18px 2px; }
  .preview-planet { width: 64px; border-width: 4px; }
  .preview-header h2 { font-size: 20px; }
  .preview-header p { font-size: 15px; }
  .preview-curriculum { max-height: 280px; }
  .preview-unit > header { grid-template-columns: 1fr; }
  .preview-unit > header strong { font-size: 14px; }
  .preview-activity strong { font-size: 13px; }
  .preview-unit-list > span { grid-template-columns: 1fr; gap: 7px; }
  .preview-unit-list strong { font-size: 13px; }
  .preview-travel { font-size: 14px; }
  .module-hud { top: clamp(6px, 2vw, 12px); right: clamp(12px, 4vw, 24px); padding: 6px 10px; }
  .module-hud strong { font-size: 16px; }
  .module-heading h2 { font-size: clamp(22px, 8vw, 30px); }
  .unit-heading h2 { font-size: clamp(20px, 7vw, 26px); }
  .unit-region { width: 64px; height: 56px; padding: 4px 8px; }
  .mission-node { width: 64px; height: 56px; }
  .mission-node-exam { width: 80px; height: 70px; }
}

@media (max-width: 410px) {
  .solar-map { min-height: 480px; }
  .planet-node { width: 53px; }
  .planet-label { max-width: 150px; }
  .planet-label strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .academy-map *, .map-feedback { animation: none !important; transition: none !important; }
}