/**
 * Haunts365 — cross-device compatibility (v7)
 * Load last on guest pages. Fixes iOS backgrounds, viewport, safe areas, forms, overflow.
 */

:root {
  --haunts-safe-top: env(safe-area-inset-top, 0px);
  --haunts-safe-right: env(safe-area-inset-right, 0px);
  --haunts-safe-bottom: env(safe-area-inset-bottom, 0px);
  --haunts-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

img,
picture,
video,
embed,
iframe {
  max-width: 100%;
}

img,
svg {
  height: auto;
}

/* Guest pages use their own art — block admin bunker JPG pseudo-layer */
body.portal-page::before,
body.shop-page::before,
body.wallet-body::before,
body.verify-body::before,
body.bunker-game-body::before,
body.bunker-terminal-body::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Dynamic viewport height */
body,
.storefront,
.portal-page,
.shop-page,
.wallet-body,
.verify-body,
.bunker-game-body,
.bunker-terminal-body {
  min-height: 100vh;
  min-height: calc(var(--haunts-vh, 1vh) * 100);
  min-height: 100dvh;
}

.nav .nav-inner {
  padding-top: max(0px, var(--haunts-safe-top));
}

.mobile-menu,
#mobileMenu,
.shop-page .mobile-menu {
  padding-top: max(80px, calc(64px + var(--haunts-safe-top)));
  padding-bottom: max(24px, var(--haunts-safe-bottom));
  padding-left: max(16px, var(--haunts-safe-left));
  padding-right: max(16px, var(--haunts-safe-right));
}

.portal-shell {
  padding-top: max(92px, calc(72px + var(--haunts-safe-top)));
  padding-left: max(16px, var(--haunts-safe-left));
  padding-right: max(16px, var(--haunts-safe-right));
}

.shop-page {
  padding-top: max(60px, calc(52px + var(--haunts-safe-top)));
}

/* Form fields: prevent iOS focus zoom on all touch/narrow viewports */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}

html.env-touch button,
html.env-touch .portal-home-card,
html.env-touch .portal-dock-item,
html.env-touch .portal-journey-btn,
html.env-touch .nav-menu-pill,
html.env-touch .mobile-link,
html.env-touch .verify-btn,
html.env-touch .portal-tp-submit,
html.env-touch .portal-wallet-btn {
  touch-action: manipulation;
}

/* Tickets: same viewport bg on all breakpoints (mobile look everywhere) */
body.storefront::before {
  content: none !important;
  display: none !important;
}

body.storefront,
.storefront {
  background-color: #0d0a07 !important;
  background-image: none !important;
}

.storefront-page-bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #0d0a07 !important;
  background-image: url("../img/bg-bunker.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .auth-shell,
  body.auth-shell,
  body.admin {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  body:not(.storefront)::before {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
}

html.env-ios body.storefront,
html.env-ios .storefront,
html.env-touch body.storefront,
html.env-touch .storefront {
  background-image: none !important;
}

html.env-ios .storefront-page-bg,
html.env-touch .storefront-page-bg {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  background-image: url("../img/bg-bunker.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

/* Legal pages */
.policy-wrap,
.wrap {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: max(18px, var(--haunts-safe-left));
  padding-right: max(18px, var(--haunts-safe-right));
  padding-bottom: max(40px, var(--haunts-safe-bottom));
}

.policy-wrap h1,
.wrap h1 {
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.2;
}

/* Company pages (/about, /book, /custom-haunt) */
body.company-page .co-header-inner {
  padding-top: max(0px, var(--haunts-safe-top));
  padding-left: max(16px, var(--haunts-safe-left));
  padding-right: max(16px, var(--haunts-safe-right));
}

body.company-page .co-main {
  padding-left: max(16px, var(--haunts-safe-left));
  padding-right: max(16px, var(--haunts-safe-right));
  padding-bottom: max(64px, var(--haunts-safe-bottom));
}

body.company-page .co-footer-inner {
  padding-left: max(16px, var(--haunts-safe-left));
  padding-right: max(16px, var(--haunts-safe-right));
  padding-bottom: max(40px, var(--haunts-safe-bottom));
}

body.company-page .co-contact-grid,
body.company-page .co-contact-item {
  min-width: 0;
}

@media (max-width: 720px) {
  .hero,
  .portal-app-layout,
  .shop-grid,
  .ticket-grid,
  .features-grid,
  .about-grid,
  .shop-hero,
  .coming-soon-hero {
    max-width: 100%;
  }

  .portal-workspace,
  .portal-dock {
    max-width: 100%;
  }

  .hero-title {
    word-break: break-word;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .modal-box,
  .purchase-modal .modal-box {
    max-width: calc(100vw - 24px);
    margin: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flicker-overlay {
    animation: none !important;
  }
}