/* DUEL & FIGHTS — Capacitor Android shell parity.
   The browser/mobile gameplay CSS is the single source of truth for board,
   Avatar, hand and HUD geometry. This file only adapts the native shell and
   non-game native views; it must not redefine gameplay measurements. */

html.native-app-shell {
  width: 100% !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
}

html.native-app-shell body.in-game {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  background-attachment: scroll !important;
}

html.native-app-shell body.in-game .orientation-guard {
  display: none !important;
  pointer-events: none !important;
}

/* The ten-card grid keeps a 620px cap; center that narrower area in the APK dialog. */
html.native-app-shell body .pack-opening-overlay .pack-opening-cards.many-cards {
  margin-inline: auto !important;
}


/* Android WebView parity for the fixed landscape game canvas.
   Immersive mode exposes a slightly taller viewport than Chrome mobile, and
   WebView may also apply text autosizing to longer effect copy. Keep the card
   boxes inherited from mobile-game.css, but normalize native text metrics and
   compensate only the HUD/card internals that visually drift in the APK. */
html.native-app-shell body.in-game,
html.native-app-shell body.in-game .card,
html.native-app-shell body.in-game .card-name,
html.native-app-shell body.in-game .card-text {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

@media (orientation: landscape) and (max-width: 1366px) {
  /* 36dvh in the immersive shell lands at the same visual height as the
     browser's 39dvh once Chrome's landscape UI reduces its viewport. */
  html.native-app-shell body.in-game .mobile-panel-toggle.log-toggle {
    top: calc(36dvh / var(--mobile-game-scale, 1)) !important;
  }

  /* Android keeps the browser geometry but can still wrap effect copy a bit
     earlier. Use the full lower parchment instead of cutting the last line. */
  html.native-app-shell body.in-game .hand-cards .card:is(.creature, .spell, .weapon).has-effect-text .card-text {
    display: -webkit-box !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    font-size: var(--hand-card-text-font, 0.36rem) !important;
    line-height: 1.14 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5 !important;
  }

  /* APK-only final alignment: the mobile browser already has the desired HP
     position, while WebView renders it one pixel too far right. */
  html.native-app-shell body.in-game .hand-cards .card .card-stat-hp {
    translate: 0 0 !important;
  }
}

/* IMPORTANT: gameplay geometry does not belong here. Android intentionally
   inherits the staged mobile-game.css cascade used by the mobile browser. */

/* Native story/onboarding must not depend on pointer media-query reporting. */
html.native-app-shell body:not(.in-game) #campaignPanel .page-panel-head {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 74px 18px !important;
  text-align: center !important;
}

html.native-app-shell body:not(.in-game) #campaignPanel .page-panel-head > div:first-child {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html.native-app-shell body:not(.in-game) #campaignPanel .page-panel-head .panel-subtitle {
  max-width: 680px !important;
  margin: 0 auto !important;
  line-height: 1.42 !important;
  text-wrap: balance;
}

html.native-app-shell body:not(.in-game) #campaignPanel .campaign-header-actions {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 2px auto 0 !important;
}

html.native-app-shell body:not(.in-game) #campaignPanel #campaignBackHomeBtn.back-nav-btn {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 !important;
}

html.native-app-shell body:not(.in-game) #campaignPanel #campaignResumeBtn,
html.native-app-shell body:not(.in-game) #campaignPanel #campaignChallengesBtn {
  flex: 0 1 220px !important;
  width: min(220px, 42vw) !important;
  min-width: 150px !important;
}

html.native-app-shell body:not(.in-game) #campaignPanel .campaign-chapters-nav {
  margin-top: 12px !important;
}

html.native-app-shell body:not(.in-game) #campaignPanel .campaign-coach-target {
  position: relative !important;
  z-index: 9 !important;
  scroll-margin-block: 42dvh !important;
  outline: 2px solid rgba(91, 222, 255, 0.92) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 4px rgba(46, 203, 255, 0.16),
    0 0 24px rgba(46, 203, 255, 0.52) !important;
}

html.native-app-shell body.first-access-pending .first-access-landing-copy {
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
  padding-inline: 18px !important;
  text-align: center !important;
}

html.native-app-shell body.first-access-pending .first-access-landing h2,
html.native-app-shell body.first-access-pending .first-access-landing p {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.native-app-shell body.first-access-pending .onboarding-wizard {
  width: min(760px, calc(100dvw - 28px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Native non-game views must scroll normally. */
html.native-app-shell body:not(.in-game) {
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.native-app-shell body:not(.in-game) .app {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

/* Resume/first-access dialogs cover the full native viewport without exposing
   the home rails on either side. */
html.native-app-shell body:not(.in-game) .onboarding-wizard {
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  place-items: center !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  z-index: 30000 !important;
}

html.native-app-shell body:not(.in-game) #resumeProgressPopup .onboarding-wizard-card {
  width: min(520px, calc(100dvw - 40px)) !important;
  max-width: 520px !important;
  max-height: calc(100dvh - 28px) !important;
  padding: clamp(20px, 4dvh, 34px) clamp(18px, 4vw, 32px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  html.native-app-shell body:not(.in-game) #resumeProgressPopup .onboarding-wizard-card {
    width: min(500px, calc(100dvw - 56px)) !important;
    max-height: calc(100dvh - 20px) !important;
    gap: 10px !important;
    padding: 18px 24px !important;
  }

  html.native-app-shell body:not(.in-game) #resumeProgressPopup .onboarding-wizard-card h2 {
    margin-bottom: 2px !important;
    font-size: clamp(1.5rem, 7dvh, 2rem) !important;
  }

  html.native-app-shell body:not(.in-game) #resumeProgressPopup .onboarding-wizard-card p {
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
  }
}

/* Home-only native spacing: WebView pointer reporting can differ from Chrome,
   so keep the crest/copy separation independent from pointer capability. */
@media (orientation: landscape) and (max-height: 620px) {
  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card,
  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card.primary-action,
  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card.secondary {
    padding-left: clamp(104px, 11vw, 132px) !important;
  }

  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card > .match-menu-copy {
    width: min(72%, 480px) !important;
  }
}

@media (orientation: portrait) and (max-width: 820px) {
  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card,
  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card.primary-action,
  html.native-app-shell.home-layout-classic body:not(.in-game) #mainMatchMenu .home-mode-card.secondary {
    padding-left: clamp(84px, 24vw, 96px) !important;
  }
}