/* LA AVENTURA DEL SABER — DISEÑO EXCLUSIVO MÓVIL, BASE ÚNICA
   Las reglas anteriores para móvil se han retirado de index.html.
   La edición de ordenador no se modifica. */
@media (max-width: 900px) and (orientation: portrait) {
  /* --- Marco: ajustar por la altura DISPONIBLE, no por una altura fija en px. --- */
  #introduccionV3.introAventuraV6 {
    align-items:center !important; justify-content:center !important;
    padding: 4px !important; overflow:hidden !important;
    background:rgba(26,42,35,.36) !important;
  }
  #introduccionV3 .introV6Stage {
    box-sizing:border-box !important;
    flex:0 0 auto !important;
    width:min(97vw, calc(60dvh - 8px), 480px) !important;
    height:auto !important;
    min-height:0 !important; max-height:none !important;
    aspect-ratio:971 / 1619 !important;
    margin:0 auto !important; padding:0 !important;
    background:transparent !important; border:0 !important;
    border-radius:0 !important; box-shadow:none !important;
    filter:drop-shadow(0 9px 16px rgba(33,24,20,.28)) !important;
    overflow:visible !important; transform:none !important;
    contain:layout style !important;
  }
  #introduccionV3 .introV6Stage::before,
  #introduccionV3 .introV6Stage::after {display:none !important;content:none !important;}
  #introduccionV3 .introV6Marco {
    display:block !important;
    position:absolute !important; inset:0 !important;
    width:100% !important;height:100% !important;
    object-fit:fill !important;z-index:50 !important;
    user-select:none;pointer-events:none !important;
  }
  #introduccionV3 .introV6Clip,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Clip {
    inset:16.2% 12.9% 13.4% 12.9% !important;
    border:0 !important;border-radius:6px !important;
    background:#f3e6c7 !important;box-shadow:none !important;
    overflow:hidden !important;z-index:1 !important;
  }
  #introduccionV3 .introV6Fondo {opacity:.86 !important;object-fit:cover !important;}
  #introduccionV3 .introV6Pergamino {opacity:.23 !important;}
  #introduccionV3 .introV6DecoWrap {display:none !important;}
  #introduccionV3 .introV6Cerrar {
    z-index:60 !important;right:6% !important;top:6% !important;
    width:clamp(28px,8.5vw,40px) !important;
    height:clamp(28px,8.5vw,40px) !important;
    filter:drop-shadow(0 2px 3px #56442a99) !important;
  }

  /* Mismas medidas relativas para personaje, título, tarjetas y controles. */
  #introduccionV3 .introV6Stage[data-escena] #introV6Titulo {
    position:absolute !important;top:1.5% !important;
    left:0 !important;right:auto !important;
    width:100% !important;height:18% !important;
    object-fit:contain !important;transform:none !important;
    z-index:12 !important;
  }
  #introduccionV3 .introV6Stage[data-escena] .introV6Pose {
    position:absolute !important;
    top:20% !important;bottom:auto !important;
    left:9% !important;right:auto !important;
    width:82% !important;height:43% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    z-index:4 !important;
  }
  #introduccionV3 .introV6Stage[data-escena] .introV6Panel {
    position:absolute !important;
    top:54.5% !important;bottom:auto !important;
    left:1% !important;right:auto !important;
    width:98% !important;height:25.5% !important;
    object-fit:contain !important;
    transform:none !important;
    z-index:15 !important;
  }
  #introduccionV3 .introV6Stage[data-escena='explora'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='aventura'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='recompensa'] .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena='estilo'] .introV6Panel {
    top:46.5% !important;left:1% !important;
    width:98% !important;height:35.8% !important;
    transform:none !important;
  }
  /* Primero los cuadros informativos, detrás el profesor. */
  #introduccionV3 .introV6Contenido {z-index:10 !important;}
  #introduccionV3 .introV6NombreWrap,
  #introduccionV3 .introV6FinalWrap {z-index:12 !important;}
  #introduccionV3 .introV6Stage[data-escena] .introV6Pose {z-index:4 !important;}

  /* Botones siempre en dos posiciones fijas, con centro libre. */
  #introduccionV3 .introV6Nav,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Nav {
    display:flex !important;justify-content:space-between !important;
    position:absolute !important;left:1% !important;right:auto !important;
    bottom:5.8% !important;top:auto !important;
    width:98% !important;height:10% !important;
    gap:0 !important;z-index:28 !important;pointer-events:none !important;
  }
  #introduccionV3 .introV6Nav::before {content:none !important;display:none !important;}
  #introduccionV3 .introV6NavBtn {
    position:relative !important;left:auto !important;right:auto !important;
    flex:0 0 45% !important;width:45% !important;height:100% !important;
    grid-column:auto !important;pointer-events:auto !important;
    touch-action:manipulation !important;
  }
  #introduccionV3 .introV6NavBtn.introV6OcultoPrimera {visibility:hidden !important;}
  #introduccionV3 .introV6BtnImg {width:100% !important;height:100% !important;object-fit:contain !important;}
  #introduccionV3 .introV6Progreso,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Progreso {
    display:flex !important;align-items:center !important;justify-content:center !important;
    position:absolute !important;bottom:.5% !important;top:auto !important;
    left:1% !important;right:auto !important;width:98% !important;height:4.8% !important;
    padding:0 1% !important;gap:9px !important;
    background:rgba(255,247,221,.8) !important;
    border:1px solid rgba(139,91,38,.5) !important;
    border-radius:20px !important;
    z-index:29 !important;box-sizing:border-box !important;
  }
  #introduccionV3 .introV6Puntos {display:flex !important;align-items:center !important;gap:5px !important;}
  #introduccionV3 .introV6Punto {width:11px !important;height:11px !important;min-width:11px !important;border-width:2px !important;}
  #introduccionV3 .introV6Contador {font-size:15px !important;min-width:43px !important;font-weight:900 !important;line-height:1 !important;white-space:nowrap !important;color:#512a44 !important;text-shadow:none !important;}

  /* Nombre: cartel original recortado SOLO de sus márgenes transparentes. */
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6NombrePanel {
    top:54% !important;left:0 !important;right:auto !important;
    width:100% !important;height:19% !important;
    object-fit:contain !important;z-index:15 !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre {
    position:absolute !important;top:62.2% !important;left:12% !important;
    right:auto !important;width:76% !important;height:8% !important;
    font-family:system-ui,Arial,sans-serif !important;font-size:16px !important;
    font-weight:750 !important;letter-spacing:0 !important;
    line-height:1.05 !important;padding:0 7% 0 3% !important;
    text-align:center !important;color:#673818 !important;
    background:rgba(255,251,235,.16) !important;
    border:0 !important;outline-offset:2px !important;
    box-shadow:none !important;z-index:20 !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre::placeholder {
    font:700 14px/1.1 system-ui,Arial,sans-serif !important;
    color:#80593c !important;text-align:center !important;
  }
  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6CandadoNombre {
    top:56% !important;right:7% !important;left:auto !important;
    width:12% !important;height:10% !important;z-index:21 !important;
  }

  /* Dificultad: tres alternativas una debajo de otra y aviso independiente. */
  #introduccionV3 .introV6Stage[data-escena='dificultad'] #introV6Titulo {top:1.5% !important;left:0 !important;width:100% !important;height:16% !important;transform:none !important;}
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DificultadWrap {
    top:18% !important;left:4% !important;right:auto !important;
    width:92% !important;height:66% !important;
    transform:none !important;overflow:visible !important;z-index:20 !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DificultadBase {opacity:0 !important;}
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifBtn {
    left:22% !important;width:56% !important;height:28% !important;
    display:block !important;opacity:1 !important;
    border:0 !important;transform:none !important;
    pointer-events:auto !important;
  }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifApoyo {top:0 !important;}
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifAventura {top:31% !important;}
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifDesafio {top:62% !important;}
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifImg {object-fit:contain !important;}
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6AvisoDificultad {
    top:90% !important;left:1% !important;width:98% !important;
    height:10% !important;object-fit:contain !important;z-index:20 !important;
  }

  /* Confirmación: cartel con nombre sin márgenes de imagen sobrantes. */
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6FinalNombrePanel {
    top:53% !important;left:15% !important;right:auto !important;
    width:70% !important;height:17% !important;object-fit:contain !important;z-index:14 !important;
  }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6NombreConfirmado {
    top:58% !important;left:17% !important;right:auto !important;
    width:66% !important;height:7% !important;
    font-size:clamp(16px,4.6vw,22px) !important;
    font-weight:900 !important;z-index:20 !important;
  }
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6Listo {
    top:69% !important;left:13% !important;right:auto !important;
    width:74% !important;height:13% !important;object-fit:contain !important;z-index:16 !important;
  }

  /* Modo teclado: se reduce el marco SIN mover elementos por separado. */
  #introduccionV3.introV6TecladoAbierto {
    justify-content:flex-start !important;align-items:center !important;
    padding-top:2px !important;overflow-y:auto !important;
  }
  #introduccionV3.introV6TecladoAbierto .introV6Stage {
    width:min(96vw, var(--intro-ancho-teclado, 300px)) !important;
  }
}

/* Configuración: marco exclusivo vertical a partir de la ilustración original,
   elementos en filas, sin textos apilados en tres botones diminutos. */
@media (max-width: 900px) and (orientation:portrait) {
  #fondoConfiguracionV1 {
    display:flex !important;align-items:center !important;justify-content:center !important;
    padding:5px !important;overflow:auto !important;
    background:rgba(22,29,29,.52) !important;
  }
  #panelConfiguracionV1.configV39 {
    position:relative !important;width:min(94vw, 450px) !important;
    height:min(86dvh, 700px) !important;max-width:450px !important;max-height:none !important;
    aspect-ratio:auto !important;overflow:visible !important;
    border:0 !important;border-radius:0 !important;background:transparent !important;
    transform:none !important;filter:drop-shadow(0 10px 16px #29201566) !important;
  }
  #panelConfiguracionV1 .configV39__marco {
    display:block !important;position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    object-fit:fill !important;
    z-index:0 !important;pointer-events:none !important;
  }
  #panelConfiguracionV1 .configV39__cerrar {
    right:5.7% !important;top:8% !important;
    width:12% !important;height:7.9% !important;min-width:38px !important;min-height:38px !important;z-index:10 !important;
  }
  #panelConfiguracionV1 .configV39__subtitulo {
    position:absolute !important;top:16% !important;left:11% !important;right:11% !important;
    width:auto !important;font:bold clamp(12px,3.2vw,15px)/1.25 Georgia,serif !important;
    color:#6a361e !important;text-align:center !important;white-space:normal !important;
  }
  #panelConfiguracionV1 .configV39__subtitulo::before,
  #panelConfiguracionV1 .configV39__subtitulo::after {display:none !important;}
  #panelConfiguracionV1 .configV39__seccion {
    position:absolute !important;left:10.5% !important;right:10.5% !important;
    width:auto !important;border:0 !important;border-radius:18px !important;
    box-sizing:border-box !important;
    background:rgba(255,246,217,.76) !important;
    box-shadow:inset 0 0 0 2px #dba356aa !important;
  }
  #panelConfiguracionV1 .configV39__volumen {top:21.0% !important;height:16.7% !important;}
  #panelConfiguracionV1 .configV39__musica {top:39.1% !important;height:26.2% !important;}
  #panelConfiguracionV1 .configV39__aventura {top:66.6% !important;height:25.4% !important;}
  #panelConfiguracionV1 .configV39__seccionTitulo,
  #panelConfiguracionV1 .configV39__aventura .configV39__seccionTitulo,
  #panelConfiguracionV1 .configV39__musica .configV39__seccionTitulo,
  #panelConfiguracionV1 .configV39__volumen .configV39__seccionTitulo {
    position:absolute !important;left:7% !important;top:7% !important;
    font:bold clamp(15px,4.2vw,19px)/1 Georgia,serif !important;
    color:#68391f !important;
  }
  #panelConfiguracionV1 .configV39__filaVolumen {
    display:grid !important;position:absolute !important;
    grid-template-columns:42px minmax(0,1fr) 42px !important;
    left:6% !important;right:6% !important;top:40% !important;bottom:14% !important;
    gap:9px !important;align-items:center !important;
  }
  #panelConfiguracionV1 .configV39__sound {width:39px !important;height:39px !important;}
  #panelConfiguracionV1 .configV39__slider {height:30px !important;}
  #panelConfiguracionV1 .configV39__sliderKnob {width:28px !important;height:28px !important;}
  #panelConfiguracionV1 .configV39__valorVolumen {font-size:13px !important;}
  #panelConfiguracionV1 .configV39__musicGrid,
  #panelConfiguracionV1 .configV39__actionGrid {
    display:grid !important;grid-template-columns:1fr !important;
    grid-template-rows:repeat(3,1fr) !important;
    left:6% !important;right:6% !important;top:26% !important;bottom:7% !important;
    gap:4px !important;overflow:visible !important;
  }
  #panelConfiguracionV1 .configV39__pista,
  #panelConfiguracionV1 .configV39__action {
    width:100% !important;height:100% !important;min-height:0 !important;
    display:grid !important;grid-template-columns:36px minmax(0,1fr) !important;
    align-items:center !important;gap:8px !important;
    margin:0 !important;padding:2px 11px !important;
    aspect-ratio:auto !important;border-radius:13px !important;
    background-size:100% 100% !important;
  }
  #panelConfiguracionV1 .configV39__pistaIcono,
  #panelConfiguracionV1 .configV39__action > img {
    width:32px !important;height:32px !important;transform:none !important;
  }
  #panelConfiguracionV1 .configV39__pistaNombre,
  #panelConfiguracionV1 .configV39__action span {
    font:bold clamp(11px,3.25vw,14px)/1.05 Georgia,serif !important;
    white-space:normal !important;text-align:center !important;
    padding:0 !important;transform:none !important;
    overflow:visible !important;text-overflow:clip !important;
  }
  #panelConfiguracionV1 .configV39__aviso {
    position:absolute !important;left:12% !important;right:12% !important;
    bottom:3.0% !important;top:auto !important;
    font:bold clamp(10px,2.8vw,12px)/1.12 Georgia,serif !important;
    text-align:center !important;white-space:normal !important;
  }
}