/* ============================================================================
   VISION ENGLISH — FONDO DE MÁRMOL POR NIVEL — Claude, 06/09 (v4, los 3 con foto real)
   ----------------------------------------------------------------------------
   Los 3 niveles usan ya texturas de mármol reales que pasó Iker (mármol
   líquido con vetas doradas, estilo "tendencia web"). La de Advanced llegó
   después, sin marca de agua — se guardó como assets/marmol-advanced.webp
   (convertida de PNG a WEBP: bajó de 2.9MB a 285KB).

   La textura se repite en mosaico a lo largo de toda la ruta (que mide miles
   de píxeles); en oscuro se le pone un velo semitransparente encima para que
   no compita con el texto ni los nodos.
   ========================================================================= */

/* ── BASIC e INTERMEDIATE: foto real de mármol, en mosaico ───────────────── */
#level-basic .duo-path-container {
  position: relative;
  background-color: #f2ede4;
  background-image: url("assets/marmol-basic.webp");
  background-repeat: repeat;
  background-size: 1240px auto;   /* más grande (07/09): se veía repetida/cortada como 4 fotos unidas */
}
#level-intermediate .duo-path-container {
  position: relative;
  background-color: #4a0d14;
  /* Velo blanco semitransparente ENCIMA de la foto (07/09): el rojo se veía
     muy saturado/intenso. Baja la intensidad sin tocar la imagen en sí. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)),
    url("assets/marmol-intermediate.webp");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 560px auto;
}

/* Oscuro: un velo semitransparente ENCIMA de la foto (misma imagen abajo),
   para que se sienta "modo noche" sin perder la textura del mármol. */
body.dark #level-basic .duo-path-container {
  background-image:
    linear-gradient(rgba(10, 8, 4, .58), rgba(10, 8, 4, .58)),
    url("assets/marmol-basic.webp");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 1240px auto;
}
body.dark #level-intermediate .duo-path-container {
  background-image:
    linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, .32)),
    url("assets/marmol-intermediate.webp");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 560px auto;
}

/* ── ADVANCED: foto real de mármol morado, en mosaico ─────────────────────── */
#level-advanced { --atmos: 139, 92, 246; }  /* violeta (el color de la esfera) */

#level-advanced .duo-path-container {
  position: relative;
  background-color: #2a1638;
  background-image: url("assets/marmol-advanced.webp");
  background-repeat: repeat;
  background-size: 1280px auto;   /* más grande (07/09): se veía repetida/cortada como 4 fotos unidas */
}
body.dark #level-advanced .duo-path-container {
  background-image:
    linear-gradient(rgba(10, 4, 16, .5), rgba(10, 4, 16, .5)),
    url("assets/marmol-advanced.webp");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 1280px auto;
}