/* Solo iOS instalado: el fondo y el contenido usan la misma altura física en CSS px. */
html.pk-ios-standalone,
html.pk-ios-standalone body.pk-index,
html.pk-ios-standalone body.pk-home {
  height: var(--pk-app-height) !important;
  min-height: var(--pk-app-height) !important;
}
html.pk-ios-standalone body.pk-index .page,
html.pk-ios-standalone body.pk-home .encounter {
  height: var(--pk-app-height) !important;
  min-height: var(--pk-app-height) !important;
}
html.pk-ios-standalone body.pk-index .kids-bg,
html.pk-ios-standalone body.pk-index::before,
html.pk-ios-standalone #welcomeModal {
  top: 0 !important;
  bottom: auto !important;
  height: var(--pk-app-height) !important;
}
html.pk-ios-standalone body.pk-index .footer {
  top: calc(var(--pk-app-height) - var(--pk-footer-bottom) - var(--pk-footer-h)) !important;
  bottom: auto !important;
}
html.pk-ios-standalone body.pk-home .logo {
  top: calc(env(safe-area-inset-top) + 12px) !important;
  margin-top: 0 !important;
}

/* Keep each Home character centered while its animation moves vertically. */
@media (max-width: 1100px) {
  body.pk-home .side .character-img {
    left: 50% !important;
    right: auto !important;
    max-width: none !important;
    width: auto !important;
    translate: -50% 0;
    transform-origin: center center;
  }
  body.pk-home .side.chosen .character-img {
    animation: homeChosenVertical .65s ease both;
  }
}
@media (max-width: 760px) and (orientation: portrait) {
  body.pk-home .side .character-img {
    height: min(38dvh, 340px);
    max-height: none;
    bottom: 26%;
  }
}
@keyframes homeChosenVertical {
  0% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
  100% { transform: translateY(-12px); }
}

#adventureFrame {
  position: fixed; inset: 0; width: 100%;
  height: var(--pk-app-height, 100dvh); border: 0; z-index: 10000;
  background: #100d2f;
}
#adventureFrame[hidden] { display: none; }
.welcome-error {
  position: absolute; top: 50%; left: 8%; right: 8%;
  padding: 16px; background: #17122ee6; color: white; border-radius: 18px;
  text-align: center; z-index: 5;
}