/*
 * Global responsive layout layer: owns shell sizing, safe areas, and overflow
 * hygiene only. Battle geometry, menu scrolling, and mission-map presentation
 * remain owned by their existing stylesheets; mission-map-live-v1.css follows.
 */
:root {
  --pa-app-max-width: 520px;
  --pa-screen-inline: clamp(12px, 3vw, 24px);
  --pa-shell-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  min-width: 280px;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  min-width: 280px;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

.app {
  width: min(100%, var(--pa-app-max-width));
  min-height: 100dvh;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 0 env(safe-area-inset-right, 0px) var(--pa-shell-safe-bottom) env(safe-area-inset-left, 0px);
}

.appHeader,
.screen:not(.mv2Screen) {
  min-width: 0;
  padding-inline: var(--pa-screen-inline);
}

.screen > *,
.screen .card,
.screen .topNav,
.screen .row,
.screen [class$="Body"],
.screen [class$="Content"] {
  min-width: 0;
}

/* Reliable touch scroll ownership for long mobile/PWA screens. */
body[data-screen="login"] #login {
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: flex-start;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

body[data-screen="missions"] #missions {
  min-height: 100dvh;
  height: auto;
  overflow: visible;
  overscroll-behavior-y: auto;
}

#appBottomNav {
  width: min(100%, var(--pa-app-max-width));
  box-sizing: border-box;
  padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
}

@media (min-width: 601px) {
  :root {
    --pa-app-max-width: 820px;
    --pa-screen-inline: clamp(18px, 3vw, 28px);
  }
}

@media (min-width: 1025px) {
  :root {
    --pa-app-max-width: 980px;
    --pa-screen-inline: clamp(24px, 3vw, 32px);
  }
}


/* Long destinations own their vertical scroll inside the viewport.
   Android/PWA + the fixed bottom nav can otherwise leave <body> as an
   unreliable scroll owner. That shows up as a page which only starts moving
   when the swipe begins near the footer. Keep one explicit scroll owner for
   both Khazanah/Trofi and the Ibu Bapa dashboard. */
body[data-screen="treasure"],
body[data-screen="parent"] {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body[data-screen="treasure"] .app,
body[data-screen="parent"] .app {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body[data-screen="treasure"] .appHeader,
body[data-screen="parent"] .appHeader {
  flex: 0 0 58px;
}

body[data-screen="treasure"] #treasure,
body[data-screen="parent"] #parent {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable both-edges;
  padding-bottom: calc(var(--nav-h, 72px) + env(safe-area-inset-bottom, 0px) + 34px);
}

/* Vertical swipes may begin on any Khazanah card/stage, not only the footer. */
body[data-screen="treasure"] #treasure,
body[data-screen="treasure"] .kzShow,
body[data-screen="treasure"] .kzGrid,
body[data-screen="treasure"] .kzCard,
body[data-screen="treasure"] .badgeCard {
  touch-action: pan-y;
}

/* Parent tabs still need horizontal swiping, while the page must accept
   vertical swipes from cards and report panels. */
body[data-screen="parent"] #parent {
  touch-action: pan-x pan-y;
}

body[data-screen="parent"] .parentTabs {
  touch-action: pan-x pan-y;
}


/* The Teman deck fills the space between the app header and bottom nav.
   Trofi keeps its normal scrolling collection. */
body[data-screen="treasure"] #treasure.on[data-kz-tab="pets"]{
  display:flex;flex-direction:column;overflow-y:hidden;scrollbar-gutter:auto;
  padding:10px 13px calc(var(--nav-h,72px) + env(safe-area-inset-bottom,0px) + 8px);
}
#treasure[data-kz-tab="pets"] .kzHead{position:static;flex:0 0 46px;height:46px;padding:0;background:transparent;margin-bottom:4px;border-bottom:0}
#treasure[data-kz-tab="pets"] .kzTitle h1{font-size:24px}
#treasure[data-kz-tab="pets"] .kzTabs{flex:none;margin:0 0 6px}
#treasure[data-kz-tab="pets"] .kzTab{min-height:38px;padding:6px 2px}
#treasure[data-kz-tab="pets"] .kzPanel{display:flex;flex-direction:column;flex:1;min-height:0}
#treasure[data-kz-tab="pets"] .kzCollectionHead{flex:none;margin:4px 0 6px;min-height:20px}
#treasure[data-kz-tab="pets"] .kzCollectionHead h2{font-size:14px}
#treasure[data-kz-tab="pets"] #kzPetGallery{display:flex;flex-direction:column;flex:1;min-height:0}
#treasure[data-kz-tab="pets"] .kzDeck{flex:1;min-height:0;height:auto}
#treasure[data-kz-tab="pets"] .kzDeckNav{flex:none;gap:12px;margin:4px 0 0}
#treasure[data-kz-tab="pets"] .kzDeckNav>button{width:36px;height:36px;font-size:23px}
#treasure[data-kz-tab="pets"] .kzDeckDots button{height:36px}
#treasure[data-kz-tab="pets"] .kzDeckHint{flex:none;font-size:10px;margin:4px 0 0;line-height:16px}
/* Very short landscape windows retain scrolling rather than clip card text. */
@media(max-height:540px){
  body[data-screen="treasure"] #treasure.on[data-kz-tab="pets"]{overflow-y:auto}
  #treasure[data-kz-tab="pets"] .kzPanel,#treasure[data-kz-tab="pets"] #kzPetGallery{flex:none}
  #treasure[data-kz-tab="pets"] .kzDeck{flex:none;height:350px}
}

/* No grey/blue box on tap in Android Chrome; buttons have their own :active press. */
html{-webkit-tap-highlight-color:transparent}