/* ============================================================================
   VISION ENGLISH — CORRECCIÓN FINAL DE LA RUTA (los 3 niveles) — Claude, 06/09
   (ampliado a Intermediate/Advanced 07/09: se veían pegados a la izquierda
   en vez de centrados y curveados como Basic — ver más abajo)
   ----------------------------------------------------------------------------
   Se carga AL FINAL de todo (después de geo-levels.css), a propósito. Ese
   archivo trae reglas con !important en @media (max-width:390px) que
   devolvían la ruta al grid de escritorio (3 columnas) en el teléfono, y
   reactivaba un SVG conector viejo que ya no coincide con los nodos. Como
   carga después que el mío, siempre ganaba. Esta hoja, al cargar última,
   gana ella.
   ========================================================================= */

/* ── El conector SVG se reactivó (07/09): Iker comparó Basic con los otros
      2 niveles y prefiere que los 4 tengan la línea punteada que conecta las
      lecciones, para que los 3 niveles se vean iguales. Antes se había
      apagado porque no coincidía con los nodos — hay que confirmar que sí
      coincide ahora que los nodos de Basic tienen su propio posicionamiento
      (ver bloque de curva móvil abajo). Si no calza, revisar aquí primero. */

/* ── MÓVIL: ruta centrada de verdad, con curva (no columna perfectamente
      recta), IGUAL en los 3 niveles. Gana sobre el @media(max-width:390px)
      de geo-levels.css (que en Intermediate/Advanced dejaba los nodos
      pegados a la izquierda). ────────────────────────────────────────────── */
@media (max-width: 900px) {
  #level-basic .duo-path-container .path-row:has(.geo-node),
  #level-intermediate .duo-path-container .path-row:has(.geo-node),
  #level-advanced .duo-path-container .path-row:has(.geo-node) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node) .path-marker-col {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  /* Curva suave: el nodo se desplaza a los lados en un patrón de 4 pasos
     (centro → derecha → centro → izquierda), como una serpiente, en vez de
     un zigzag brusco de solo dos posiciones. */
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+1) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+1) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+1) .path-marker-col {
    transform: translateX(0) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col {
    transform: translateX(34px) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+3) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+3) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+3) .path-marker-col {
    transform: translateX(0) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col {
    transform: translateX(-34px) !important;
  }
}

@media (max-width: 480px) {
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col {
    transform: translateX(26px) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col,
  #level-intermediate .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col,
  #level-advanced .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col {
    transform: translateX(-26px) !important;
  }
}

/* ── El hueco vacío antes de la Lección 1: el encabezado "Explora y
      comprende" ya no necesita tanto aire encima. ─────────────────────────── */
#level-basic .duo-path-container .path-unit-break,
#level-intermediate .duo-path-container .path-unit-break,
#level-advanced .duo-path-container .path-unit-break {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: auto !important;
}

/* ── Más espacio entre lecciones, para que no se sientan amontonadas. ────── */
#level-basic .duo-path-container .path-row:has(.geo-node),
#level-intermediate .duo-path-container .path-row:has(.geo-node),
#level-advanced .duo-path-container .path-row:has(.geo-node) {
  min-height: 172px !important;
}
@media (max-width: 768px) {
  #level-basic .duo-path-container .path-row:has(.geo-node),
  #level-intermediate .duo-path-container .path-row:has(.geo-node),
  #level-advanced .duo-path-container .path-row:has(.geo-node) {
    min-height: 130px !important;
  }
}

/* ============================================================================
   FIX: burbuja de Ollie encimada en los 3 niveles (07/09)
   ----------------------------------------------------------------------------
   El texto largo ("Ruta A1-A2: fundamentos...") se inyecta con content: en el
   MISMO ::after que ya se usaba como triángulo/flecha de la burbuja
   (position:absolute; top:-7px; con bordes que dibujan un triángulo). Al
   heredar esa geometría, el texto queda flotando encima de "Ollie Coach" en
   vez de fluir debajo. Se le da su propia geometría solo cuando muestra
   texto (los 3 niveles), sin tocar el triángulo del resto de la app.
   ========================================================================= */
body:has(#level-basic.view.active) #coachBubble,
body:has(#level-intermediate.view.active) #coachBubble,
body:has(#level-advanced.view.active) #coachBubble {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-top: 12px !important;   /* espacio para el triángulo que ya no está */
}
body:has(#level-basic.view.active) #coachBubble::after,
body:has(#level-intermediate.view.active) #coachBubble::after,
body:has(#level-advanced.view.active) #coachBubble::after {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  border: 0 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--text, #1e1b2e);
  opacity: .85;
}
body.dark:has(#level-basic.view.active) #coachBubble::after,
body.dark:has(#level-intermediate.view.active) #coachBubble::after,
body.dark:has(#level-advanced.view.active) #coachBubble::after {
  color: #e9e4ff;
}
#mascotName { display: block; }

/* ============================================================================
   INTERMEDIATE: borde del círculo en negro (07/09)
   ----------------------------------------------------------------------------
   El mármol rojo fuerte se queda como estaba (deshecho el velo blanco).
   Solo el anillo/borde que rodea el rombo pasa de rojo/rosa a negro; el
   rombo (.geo-shape) y el fondo de mármol no se tocan.
   ========================================================================= */
#level-intermediate .duo-path-container .geo-node {
  border-color: rgba(0, 0, 0, .82) !important;
  box-shadow:
    0 10px 0 rgba(0, 0, 0, .3),
    0 18px 34px rgba(20, 30, 45, .16),
    inset 0 2px 4px rgba(255, 255, 255, .5) !important;
}
#level-intermediate .duo-path-container .geo-node.status-active {
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, .55),
    0 0 0 10px rgba(0, 0, 0, .18),
    0 10px 0 rgba(0, 0, 0, .35),
    0 20px 40px rgba(0, 0, 0, .25) !important;
}

/* ============================================================================
   "AQUÍ VAS": globito sobre el nodo activo, en los 3 niveles (07/09)
   ----------------------------------------------------------------------------
   Antes solo existía la tarjeta "Siguiente actividad" al lado del nodo (que en
   móvil se cae debajo). Iker pidió algo directamente sobre el círculo, tipo
   "Hey Iker! You are here", para ubicar de un vistazo en qué lección se
   quedó. El nombre viene de state.profile.full_name (script.js); si no hay
   nombre, dice solo "¡Hey! Aquí vas".
   ========================================================================= */
.geo-node {
  overflow: visible;   /* si algún .geo-node no lo tenía, el globito se cortaría */
}
.geo-here-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  white-space: nowrap;
  background: #111827;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  z-index: 6;
  pointer-events: none;
  animation: geoHereFloat 2.2s ease-in-out infinite;
}
.geo-here-badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 5px 0 5px;
  border-style: solid;
  border-color: #111827 transparent transparent transparent;
}
body.dark .geo-here-badge {
  background: #f8fafc;
  color: #111827;
}
body.dark .geo-here-badge::after {
  border-color: #f8fafc transparent transparent transparent;
}
@keyframes geoHereFloat {
  0%, 100% { transform: translate(-50%, -10px); }
  50%      { transform: translate(-50%, -15px); }
}
@media (prefers-reduced-motion: reduce) {
  .geo-here-badge { animation: none; }
}
/* En móvil, el nodo ya viene con menos aire arriba: se acerca un poco más. */
@media (max-width: 480px) {
  .geo-here-badge { transform: translate(-50%, -6px); font-size: .68rem; padding: 4px 8px; }
  .geo-here-badge::after { display: none; }  /* pegado, la flechita ya no cabe bien */
}

/* ============================================================================
   COMPLETADO: anillo verde claro (visual, los 3 niveles) — 07/09
   ----------------------------------------------------------------------------
   Ya existía el brillo verde detrás (box-shadow) y el check verde chiquito
   en el centro, pero el borde del círculo seguía del color del nivel. Ahora
   el borde también se pone verde cuando ya se completó, para que se note de
   un vistazo — igual se puede volver a entrar (no se bloquea nada).
   ========================================================================= */
.geo-node.status-completed {
  border-color: rgba(31, 157, 117, .55) !important;
}

/* ============================================================================
   CANDADOS DE VERDAD, LOS 3 NIVELES (07/09)
   ----------------------------------------------------------------------------
   Antes RUTA_SIN_CANDADOS dejaba todo abierto (script.js). Ahora cada nivel
   es independiente: su primer subnivel (A1/B1/C1) abierto, el segundo
   (A2/B2/C2) se desbloquea al aprobar el examen del primero.

   Visual del nodo bloqueado: se queda la "bola"/círculo (no se quita, para
   no romper el espaciado de la ruta) pero apagada — gris, sin el brillo de
   color del nivel — y una X grande de candado cruzándola, con un candado 🔒
   que respira suavemente (no es un gris plano/muerto: se siente que se
   puede volver a abrir).
   ========================================================================= */
.geo-node.status-locked {
  filter: grayscale(.85) brightness(.85);
  box-shadow:
    0 7px 0 rgba(100, 110, 120, .3),
    0 12px 22px rgba(20, 30, 45, .16),
    inset 0 2px 4px rgba(255, 255, 255, .3) !important;
  border-color: rgba(120, 130, 140, .4) !important;
}
.geo-node.status-locked .geo-shape {
  filter: grayscale(1) brightness(.62);
}
.geo-node.status-locked .geo-icon {
  display: none;   /* el candado grande de abajo lo reemplaza */
}

.geo-lock-x {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.geo-lock-bar {
  position: absolute;
  width: 90%;
  height: 3px;
  border-radius: 3px;
  background: rgba(30, 33, 40, .58);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.geo-lock-bar.bar-1 { transform: rotate(45deg); }
.geo-lock-bar.bar-2 { transform: rotate(-45deg); }
.geo-lock-icon {
  position: relative;
  font-size: 1.15rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
  animation: geoLockBreathe 2.6s ease-in-out infinite;
}
@keyframes geoLockBreathe {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .geo-lock-icon { animation: none; }
}

/* ── Se acaba de desbloquear: el nodo "explota" suavemente al aparecer y
      sale un candado abierto 🔓 flotando y desvaneciéndose. Una sola vez. ── */
.geo-node.just-unlocked {
  animation: geoUnlockPop .7s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes geoUnlockPop {
  0%   { transform: scale(.7); }
  55%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.geo-unlock-burst {
  position: absolute;
  top: -6px;
  left: 50%;
  font-size: 1.5rem;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  animation: geoUnlockBurst 1.2s ease-out forwards;
}
@keyframes geoUnlockBurst {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.3) rotate(-12deg); }
  35%  { opacity: 1; transform: translate(-50%, -18px) scale(1.15) rotate(8deg); }
  70%  { opacity: 1; transform: translate(-50%, -26px) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(.9) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .geo-node.just-unlocked { animation: none; }
  .geo-unlock-burst { animation: none; display: none; }
}

/* ============================================================================
   BILINGÜE (07/09): a pedido del cliente de Iker, "algo bilingüe pero no
   tanto" — el español manda, el inglés va chiquito al lado en puntos clave.
   ========================================================================= */
.hero-title-en {
  font-size: .5em;
  font-weight: 600;
  opacity: .55;
  vertical-align: middle;
}

/* ── The Games: nombre en español chiquito arriba del título grande en
      inglés (07/09, mismo pedido bilingüe). ─────────────────────────────── */
.jx-card-titulo-es {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .6;
  margin-top: 2px;
}

/* ============================================================================
   TARJETA DE LECCIÓN (#pathNodeModal): título invisible arreglado (07/09)
   ----------------------------------------------------------------------------
   .path-node-modal-title nunca tuvo color propio — heredaba, y en la
   práctica salía casi blanco sobre el fondo casi blanco de la tarjeta
   (ilegible). Se le da color explícito, con marca (morado oscuro), y su
   versión en oscuro.
   ========================================================================= */
#pathNodeModal .path-node-modal-eyebrow {
  color: #7439f6;
}
#pathNodeModal .path-node-modal-title {
  color: #1e1638;
}
#pathNodeModal .path-node-modal-desc {
  color: #4b4560;
}
#pathNodeModal .path-node-modal-meta span {
  color: #2c2340;
}
body.dark #pathNodeModal .path-node-modal-eyebrow {
  color: #c9a8ff;
}
body.dark #pathNodeModal .path-node-modal-title {
  color: #f5f2ff;
}
body.dark #pathNodeModal .path-node-modal-desc {
  color: #cbc3e0;
}
body.dark #pathNodeModal .path-node-modal-meta span {
  color: #e4dcff;
}

/* ============================================================================
   THE GAMES: candado en X (cadenas) en los niveles bloqueados (07/09)
   ----------------------------------------------------------------------------
   Mismo estilo visual que ya se usa en la ruta de lecciones (.geo-lock-x):
   una X cruzando el botón, para que se vea consistente en toda la app
   donde algo está bloqueado. No se quita el candado chiquito que ya tenía
   (juegos.css) — se le agregan las "cadenas" en X encima.
   ========================================================================= */
.jx-nivel.bloqueado,
.jx-nivel[data-estado="bloqueado"],
.jx-nivel[aria-disabled="true"] {
  overflow: visible;
}
.jx-nivel.bloqueado::marker,
.jx-nivel[data-estado="bloqueado"]::marker { content: none; }

.jx-nivel.bloqueado .jx-lock-x,
.jx-nivel[data-estado="bloqueado"] .jx-lock-x {
  display: block;
}
.jx-lock-x {
  display: none;
  position: absolute;
  inset: 2px;
  z-index: 2;
  pointer-events: none;
}
.jx-lock-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  height: 2px;
  background: rgba(90, 80, 110, .55);
  border-radius: 2px;
}
.jx-lock-bar.bar-1 { transform: translate(-50%, -50%) rotate(22deg); }
.jx-lock-bar.bar-2 { transform: translate(-50%, -50%) rotate(-22deg); }

/* ============================================================================
   NOTA (08/09): la pantalla negra en celular era el canvas de click-spark
   (ver QUIEN-TOCA-QUE.md) — ya se quitó por completo. Todos los apagados
   de rendimiento que hubo aquí para el diagnóstico (backdrop-filter,
   background-attachment:fixed, velo oscuro del mármol, decoración de la
   ruta) se restauraron a pedido de Iker — ninguno era la causa real.
   ========================================================================= */

/* ============================================================================
   INTERFAZ MÓVIL: menos saturado, más aire (08/09)
   ----------------------------------------------------------------------------
   3 ajustes a pedido de Iker:
   1. La tarjeta "Level 1" queda pegada (sticky) arriba de TODO en celular y
      tapaba mucho la pantalla al hacer scroll — se condensa a una sola
      fila compacta (ícono + nivel + racha + XP), sin la barra de progreso
      ni el texto largo de "XP para el siguiente nivel" (esa info sigue
      disponible dentro de cada sección, esto es solo el resumen fijo).
   2. La frase en inglés extra del saludo del Home (bilingüe) se oculta en
      celular — se siente como texto de más ahí, se deja solo en pantallas
      grandes donde hay espacio de sobra.
   3. Un poco más de aire entre los botones principales del Home.
   ========================================================================= */
@media (max-width: 960px) {
  .level-card {
    padding: 8px 14px !important;
  }
  .level-row {
    font-size: .92rem !important;
    gap: 6px !important;
  }
  .progress-track,
  .level-meta {
    display: none !important;
  }
}

/* Folletos de Basic, Intermediate y Advanced: contraste estable por tema. */
#pathNodeModal {
  background: rgba(15, 23, 42, .46);
}

#pathNodeModal .path-node-modal-card {
  width: min(760px, calc(100% - 40px));
  color: #17142d;
  background:
    linear-gradient(145deg, rgba(var(--path-modal-accent), .10), transparent 42%),
    rgba(255, 255, 255, .98) !important;
  border: 2px solid rgba(var(--path-modal-accent), .58) !important;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, .28),
    0 0 0 1px rgba(255, 255, 255, .86) inset,
    0 12px 32px rgba(var(--path-modal-accent), .16) !important;
}

#pathNodeModal .path-node-modal-card::after {
  z-index: 1 !important;
  opacity: .34;
}

#pathNodeModalBody {
  position: relative;
  z-index: 3;
}

#pathNodeModal .path-node-modal-eyebrow {
  color: rgb(var(--path-modal-accent));
}

#pathNodeModal .path-node-modal-title {
  color: #17142d;
  -webkit-text-fill-color: #17142d;
}

#pathNodeModal .path-node-modal-desc {
  color: #49445f;
}

#pathNodeModal .path-node-modal-meta,
#pathNodeModal .path-node-modal-meta span {
  color: #27223d;
}

#pathNodeModal .path-node-modal-cta {
  min-height: 48px;
  background: rgb(var(--path-modal-accent));
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 12px 28px rgba(var(--path-modal-accent), .30);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

#pathNodeModal[data-shape="shape-cube"] .path-node-modal-cta {
  color: #2b2104;
}

#pathNodeModal .path-node-modal-cta:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(var(--path-modal-accent), .38);
}

#pathNodeModal .path-node-modal-cta:focus-visible,
#pathNodeModal .modal-close:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

#pathNodeModal .modal-close {
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #403a57;
  border: 1px solid rgba(var(--path-modal-accent), .32);
  background: rgba(248, 250, 252, .94);
}

body.dark #pathNodeModal {
  background: rgba(3, 1, 12, .74);
}

body.dark #pathNodeModal .path-node-modal-card {
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 85, 247, .25), transparent 38%),
    linear-gradient(145deg, #17102f, #090715 72%) !important;
  border: 2px solid #a855f7 !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .68),
    0 0 22px rgba(168, 85, 247, .72),
    0 0 54px rgba(124, 58, 237, .38),
    inset 0 1px rgba(255, 255, 255, .10) !important;
}

body.dark #pathNodeModal .path-node-modal-card::before {
  background: linear-gradient(90deg, #7c3aed, #d946ef, #8b5cf6);
  box-shadow: 0 4px 22px rgba(217, 70, 239, .72);
}

body.dark #pathNodeModal .path-node-modal-card::after {
  opacity: .16;
}

body.dark #pathNodeModal .path-node-modal-eyebrow {
  color: #d8b4fe;
}

body.dark #pathNodeModal .path-node-modal-title {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 0 18px rgba(168, 85, 247, .28);
}

body.dark #pathNodeModal .path-node-modal-desc {
  color: #ddd6fe;
}

body.dark #pathNodeModal .path-node-modal-meta,
body.dark #pathNodeModal .path-node-modal-meta span {
  color: #f5f3ff;
}

body.dark #pathNodeModal .path-node-modal-cta,
body.dark #pathNodeModal[data-shape="shape-cube"] .path-node-modal-cta {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 0 18px rgba(168, 85, 247, .70), 0 12px 30px rgba(76, 29, 149, .48);
}

body.dark #pathNodeModal .modal-close {
  color: #fff;
  border-color: rgba(216, 180, 254, .62);
  background: rgba(31, 20, 58, .92);
  box-shadow: 0 0 14px rgba(168, 85, 247, .34);
}

body.dark #pathNodeModal .path-node-modal-cta:focus-visible,
body.dark #pathNodeModal .modal-close:focus-visible {
  outline-color: #f0abfc;
}

@media (max-width: 640px) {
  #home .hero-copy > p em {
    display: none;
  }
  #home .hero-actions {
    gap: 12px !important;
  }
  #home .hero-actions .primary-btn,
  #home .hero-actions .ghost-btn {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ============================================================================
   INTERFAZ MÓVIL (2): la tarjeta de nivel se mueve al menú, y el cuadro
   de navegación queda más compacto (08/09)
   ----------------------------------------------------------------------------
   1. .level-card (Level/racha/XP) ya no se queda pegada arriba siempre —
      se mueve DENTRO del menú de hamburguesa (mismo lugar que Home, Basic,
      etc.), así que solo aparece cuando lo abres, no todo el tiempo
      quitando espacio de pantalla al hacer scroll.
   2. El cuadro que se abre con el menú (☰) queda más compacto: menos
      relleno, botones más pegados entre sí para que quepa más sin
      sentirse un cuadro gigante.
   ========================================================================= */
@media (max-width: 960px) {
  .level-card {
    display: none !important;
  }
  .sidebar.mobile-menu-open .level-card {
    display: block !important;
    margin-top: 12px !important;
  }

  .nav-list {
    padding: 8px !important;
    gap: 4px !important;
    margin-top: 8px !important;
  }
  .nav-item {
    padding: 8px 10px !important;
    font-size: .85rem !important;
  }
}

/* ============================================================================
   INTERFAZ MÓVIL (3): el cuadro de "Niveles" ya no estira "The Games" (08/09)
   ----------------------------------------------------------------------------
   .nav-section (Basic/Intermediate/Advanced) es más alto que un botón
   normal (trae 3 apilados), y al vivir en la misma fila del grid que
   "The Games", esa celda se estiraba para igualar la altura — dejando un
   hueco vacío enorme debajo del ícono. Se saca a .nav-section del grid de
   2 columnas (ocupa su propia fila completa) y sus 3 niveles van en línea,
   uno al lado del otro. Todo lo demás (Games, Ollie Chat, etc.) fluye
   pegado, sin huecos. Mismos tamaños de botón e ícono, solo reorganizado.
   ========================================================================= */
@media (max-width: 960px) {
  .nav-section {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 4px 0 !important;
  }
  .nav-section-label {
    grid-column: 1 / -1 !important;
  }
  /* "Advanced" no cabía al lado del ícono en una columna tan angosta y se
     salía del cuadro — el ícono va arriba y el texto abajo, centrado, así
     usa todo el ancho de su columna en vez de compartirlo con el ícono. */
  .nav-section .nav-item-geo {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 2px !important;
    min-height: 64px !important;
  }
  .nav-section .nav-item-geo span:last-child {
    font-size: .68rem !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.1 !important;
  }
}