/* =========================================================
   AJUSTE MÓVIL PASO 2 — INTRO + CONFIGURACIÓN
   Objetivo de esta pasada:
   - agrandar botones, cajas y numeración
   - dar más presencia al personaje
   - evitar zoom raro en el input del nombre (iPhone)
   - hacer más legible la configuración en celular
   ========================================================= */

@media screen and (max-width: 600px) and (orientation: portrait) {
  /* ---------- INTRO GENERAL ---------- */
  #introduccionV3.introAventuraV6 {
    overflow-y: auto !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  #introduccionV3 .introV6Stage {
    width: min(94vw, 420px) !important;
    aspect-ratio: 971 / 1619 !important;
    height: auto !important;
    max-width: 420px !important;
  }

  /* Área útil más amplia dentro del marco, para que no se vea todo pequeño. */
  #introduccionV3 .introV6Clip,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Clip {
    inset: 16.7% 12.2% 10.7% 12.2% !important;
    overflow: hidden !important;
  }

  #introduccionV3 .introV6Marco {
    z-index: 50 !important;
  }

  #introduccionV3 .introV6Cerrar {
    top: 1.4% !important;
    right: 4.8% !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 70 !important;
  }

  /* Títulos superiores */
  #introduccionV3 .introV6Titulo,
  #introduccionV3 .introV6Stage[data-escena] #introV6Titulo {
    top: 1.4% !important;
    left: 1.2% !important;
    width: 97.6% !important;
    height: 17.4% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='bienvenida'] .introV6Titulo {
    top: 0.6% !important;
    left: -0.8% !important;
    width: 101.8% !important;
    height: 22.6% !important;
  }

  /* Personaje más grande y presente */
  #introduccionV3 .introV6Stage[data-escena] .introV6Pose {
    top: 19.1% !important;
    left: 13.1% !important;
    width: 73.8% !important;
    height: 34.2% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='bienvenida'] .introV6Pose {
    top: 19.8% !important;
    left: 15.2% !important;
    width: 69.4% !important;
    height: 33.0% !important;
  }

  /* Paneles más grandes */
  #introduccionV3 .introV6Panel,
  #introduccionV3 .introV6Stage[data-escena] .introV6Panel {
    top: 53.2% !important;
    left: 2.0% !important;
    width: 96.0% !important;
    height: 24.8% !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: 50.9% !important;
    left: 0.8% !important;
    width: 98.4% !important;
    height: 29.0% !important;
    transform: none !important;
  }

  /* Navegación más legible */
  #introduccionV3 .introV6Nav,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Nav {
    left: 5.2% !important;
    width: 89.6% !important;
    bottom: 8.1% !important;
    height: 8.8% !important;
    z-index: 62 !important;
  }

  /* Progreso / numeración: más visible */
  #introduccionV3 .introV6Progreso,
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6Progreso {
    left: 12.2% !important;
    width: 75.6% !important;
    bottom: 2.8% !important;
    height: 4.7% !important;
    justify-content: center !important;
    gap: 9px !important;
    z-index: 64 !important;
  }

  #introduccionV3 .introV6Puntos {
    gap: 7px !important;
  }

  #introduccionV3 .introV6Punto {
    width: 11px !important;
    height: 11px !important;
    border-width: 2px !important;
  }

  #introduccionV3 .introV6Contador {
    font-size: 16px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
  }

  /* ---------- PANTALLA 6: TU NOMBRE ---------- */
  #introduccionV3 .introV6Stage[data-escena='nombre'] #introV6Titulo {
    top: 1.0% !important;
    left: 1.4% !important;
    width: 97.2% !important;
    height: 17.6% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6Pose {
    top: 20.0% !important;
    left: 13.6% !important;
    width: 72.8% !important;
    height: 32.6% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6NombrePanel {
    top: 51.8% !important;
    left: 3.2% !important;
    width: 93.6% !important;
    height: 16.4% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre {
    top: 61.2% !important;
    left: 10.0% !important;
    width: 80.2% !important;
    height: 8.8% !important;
    font-size: 17px !important; /* evita zoom automático en iPhone */
    line-height: 1.1 !important;
    padding: 0 3.1% !important;
    border-radius: 18px !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre::placeholder {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6CandadoNombre {
    top: 61.8% !important;
  }

  /* ---------- PANTALLA 7: DIFICULTAD ---------- */
  #introduccionV3 .introV6Stage[data-escena='dificultad'] #introV6Titulo {
    top: 1.0% !important;
    left: 3.4% !important;
    width: 93.2% !important;
    height: 14.8% !important;
    transform: none !important;
  }

  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DificultadWrap {
    top: 17.4% !important;
    left: 4.8% !important;
    width: 90.4% !important;
    height: 61.0% !important;
    transform: none !important;
  }

  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifBtn {
    left: 29% !important;
    width: 42% !important;
    height: 22% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifApoyo { top: 0% !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifAventura { top: 31.8% !important; }
  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifDesafio { top: 63.6% !important; }

  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6DifImg {
    object-fit: contain !important;
    filter: drop-shadow(0 5px 8px rgba(65, 36, 18, .16)) !important;
  }

  #introduccionV3 .introV6Stage[data-escena='dificultad'] .introV6AvisoDificultad {
    left: 4% !important;
    width: 92% !important;
    top: 87.4% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* ---------- PANTALLA 8: INICIEMOS ---------- */
  #introduccionV3 .introV6Stage[data-escena='iniciemos'] #introV6Titulo {
    top: 1.0% !important;
    left: 1.6% !important;
    width: 96.8% !important;
    height: 17.0% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6Pose {
    top: 20.0% !important;
    left: 14.1% !important;
    width: 71.6% !important;
    height: 31.4% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6FinalNombrePanel {
    top: 51.0% !important;
    right: 28.2% !important;
    width: 43.6% !important;
    height: 9.0% !important;
  }

  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6NombreConfirmado {
    top: 53.0% !important;
    right: 21.4% !important;
    width: 57.2% !important;
    height: 7.2% !important;
    font-size: 19px !important;
  }

  #introduccionV3 .introV6Stage[data-escena='iniciemos'] .introV6Listo {
    top: 63.8% !important;
    right: 22.8% !important;
    width: 48.8% !important;
    height: 12.6% !important;
  }

  /* ---------- CONFIGURACIÓN ---------- */
  #fondoConfiguracionV1 {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 8px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    background: rgba(48, 41, 58, .46) !important;
  }

  .configV39 {
    width: min(96vw, 430px) !important;
    max-width: 430px !important;
    aspect-ratio: 1448 / 1086 !important;
    margin-top: 0 !important;
    filter: drop-shadow(0 12px 20px rgba(27, 18, 14, .26)) !important;
  }

  .configV39__marco {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .configV39__cerrar {
    top: 7.2% !important;
    right: 6.0% !important;
    width: 13.2% !important;
    height: 17.4% !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .configV39__subtitulo {
    left: 16.5% !important;
    right: 16.5% !important;
    top: 20.8% !important;
    gap: 7px !important;
    font: 700 clamp(9px, 2.0vw, 13px)/1.05 Cambria, Georgia, serif !important;
    white-space: nowrap !important;
  }

  .configV39__subtitulo::before,
  .configV39__subtitulo::after {
    width: clamp(22px, 3.8vw, 38px) !important;
    height: 6px !important;
  }

  .configV39__seccion {
    left: 7.0% !important;
    right: 7.0% !important;
  }

  .configV39__volumen { top: 24.3% !important; height: 18.8% !important; }
  .configV39__musica  { top: 44.4% !important; height: 23.6% !important; }
  .configV39__aventura{ top: 69.5% !important; height: 17.8% !important; }

  .configV39__seccionTitulo,
  .configV39__aventura .configV39__seccionTitulo,
  .configV39__musica .configV39__seccionTitulo,
  .configV39__volumen .configV39__seccionTitulo {
    left: 3.6% !important;
    top: 10.4% !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .configV39__filaVolumen {
    top: 33.2% !important;
    left: 4.0% !important;
    right: 4.0% !important;
    bottom: 15.8% !important;
    gap: 8px !important;
    grid-template-columns: 36px minmax(0, 1fr) 46px !important;
  }

  .configV39__sound {
    width: 34px !important;
    height: 34px !important;
  }

  .configV39__slider {
    height: 24px !important;
  }

  .configV39__sliderFill {
    top: 34.2% !important;
    height: 30% !important;
  }

  .configV39__sliderKnob {
    width: 24px !important;
    height: 24px !important;
  }

  .configV39__valorVolumen {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .configV39__musicGrid,
  .configV39__actionGrid {
    left: 3.2% !important;
    right: 3.2% !important;
    gap: 7px !important;
  }

  .configV39__musicGrid { top: 33.8% !important; bottom: 8.0% !important; }
  .configV39__actionGrid { top: 29.8% !important; bottom: 13.0% !important; }

  .configV39__pista,
  .configV39__action {
    grid-template-columns: 27px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 5px 8px 5px 6px !important;
    aspect-ratio: 3.02 / 1 !important;
    border-radius: 15px !important;
  }

  .configV39__pistaIcono,
  .configV39__action > img {
    width: 25px !important;
    height: 25px !important;
    transform: none !important;
  }

  .configV39__pistaNombre,
  .configV39__action span {
    display: block !important;
    font-size: 7.6px !important;
    line-height: 1.02 !important;
    text-align: center !important;
    white-space: normal !important;
    padding: 0 !important;
    transform: none !important;
  }

  .configV39__aviso {
    left: 8.2% !important;
    right: 8.2% !important;
    bottom: 6.1% !important;
    font-size: 7.3px !important;
    line-height: 1.06 !important;
    gap: 5px !important;
    text-align: center !important;
  }

  .configV39__aviso img {
    width: 11px !important;
    height: 11px !important;
  }
}

@media screen and (max-width: 390px) and (orientation: portrait) {
  #introduccionV3 .introV6Stage {
    width: 95vw !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre {
    font-size: 16px !important;
  }

  #introduccionV3 .introV6Stage[data-escena='nombre'] .introV6InputNombre::placeholder {
    font-size: 15px !important;
  }

  #introduccionV3 .introV6Contador {
    font-size: 15px !important;
  }

  .configV39__subtitulo { font-size: 8.6px !important; }
  .configV39__seccionTitulo { font-size: 11px !important; }
  .configV39__pistaNombre,
  .configV39__action span { font-size: 7.0px !important; }
}