/* =========================================================
   LAYOUT FIX - loads LAST after portal-cardgame.css
   · Setup: can always scroll to pick cards (desktop + mobile)
   · Arena: full fight fits; BOOST always visible & clickable
   ========================================================= */

/* ---------- SETUP: allow real scrolling ---------- */
body > .cbg-root.is-open.is-phase-setup .cbg-shell,
body > .cbg-root.is-open:has(.cbg-setup:not([hidden])) .cbg-shell,
body > [data-bp="card-battle-root"].is-open.is-phase-setup .cbg-shell {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

/* Setup phase itself can shrink and scroll children */
body > .cbg-root.is-open .cbg-setup:not([hidden]),
body > .cbg-root.is-open .cbg-setup.is-phase-on {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  /* Mobile: column flex; pool scrolls inside */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

/* Actions sticky at top while you scroll the pool */
body > .cbg-root.is-open .cbg-setup-actions,
body > .cbg-root.is-open .cbg-setup-actions-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: linear-gradient(180deg, rgba(10, 14, 22, 0.98) 70%, rgba(10, 14, 22, 0.9)) !important;
  padding: 6px 0 10px !important;
  margin: 0 0 6px !important;
}

/* Pool must take remaining height and scroll */
body > .cbg-root.is-open .cbg-pool-wrap {
  flex: 1 1 auto !important;
  min-height: 180px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body > .cbg-root.is-open .cbg-pool,
body > .cbg-root.is-open .cbg-pool-browse {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  /* Extra bottom space so last row isn't under home indicator */
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px) !important;
}

/* Desktop two-pane: right column scrolls, left stays */
@media (min-width: 900px) {
  body > .cbg-root.is-open.is-phase-setup .cbg-shell,
  body > .cbg-root.is-open:has(.cbg-setup:not([hidden])) .cbg-shell {
    overflow: hidden !important; /* panes handle scroll */
  }

  body > .cbg-root.is-open .cbg-setup:not([hidden]),
  body > .cbg-root.is-open .cbg-setup.is-phase-on {
    display: grid !important;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body > .cbg-root.is-open .cbg-setup .cbg-setup-actions {
    position: relative !important;
    top: auto !important;
    background: transparent !important;
  }

  body > .cbg-root.is-open .cbg-setup .cbg-squad {
    overflow: auto !important;
    max-height: min(42vh, 360px) !important;
    min-height: 0 !important;
  }

  body > .cbg-root.is-open .cbg-setup .cbg-pool-wrap {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
  }

  body > .cbg-root.is-open .cbg-setup .cbg-pool,
  body > .cbg-root.is-open .cbg-setup .cbg-pool-browse {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }
}

/* Tablet / phone: whole setup scrolls if pool still stuck */
@media (max-width: 899px) {
  body > .cbg-root.is-open .cbg-setup:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
  }

  body > .cbg-root.is-open .cbg-pool-wrap {
    /* Prefer inner pool scroll; if height collapses, shell still scrolls */
    flex: 1 1 auto !important;
    min-height: min(48vh, 420px) !important;
  }

  body > .cbg-root.is-open .cbg-squad {
    flex: 0 0 auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   ARENA: fit fight + BOOST always on screen
   ========================================================= */
body > .cbg-root.is-open.is-phase-arena .cbg-shell,
body > .cbg-root.is-open:has(.cbg-arena:not([hidden])) .cbg-shell {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body > .cbg-root.is-open .cbg-arena:not([hidden]),
body > .cbg-root.is-open .cbg-arena.is-phase-on {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  gap: 4px !important;
}

body > .cbg-root.is-open .cbg-surv-hud,
body > .cbg-root.is-open .cbg-turn-bar {
  flex: 0 0 auto !important;
}

/* Field fills remaining space ABOVE boost - never push BOOST off-screen */
body > .cbg-root.is-open .cbg-field {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 4px 2px 0 !important;
}

body > .cbg-root.is-open .cbg-side-enemy {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 42% !important;
  overflow: visible !important;
  padding-bottom: 2px !important;
}

body > .cbg-root.is-open .cbg-side-you {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: 52% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-top: 6px !important;
  overflow: visible !important;
  /* Keep boost docked in this side */
}

body > .cbg-root.is-open .cbg-side-you .cbg-row {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: min(28dvh, 240px) !important;
  overflow: visible !important;
  padding-top: 4px !important;
  padding-bottom: 2px !important;
}

body > .cbg-root.is-open .cbg-side-enemy .cbg-row {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: min(26dvh, 220px) !important;
  overflow: visible !important;
}

/* BOOST always pinned, never clipped, always clickable */
body > .cbg-root.is-open .cbg-boost-row-you,
body > .cbg-root.is-open .cbg-side-you .cbg-boost-inline,
body > .cbg-root.is-open .cbg-boost-row.cbg-boost-row-you {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 40 !important;
  width: 100% !important;
  max-width: min(100%, 640px) !important;
  margin: 0 auto !important;
  pointer-events: auto !important;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
}

body > .cbg-root.is-open .cbg-btn-boost {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 41 !important;
  min-height: 44px !important;
  touch-action: manipulation !important;
}

/* Smaller cards so both teams + boost fit on desktop */
body > .cbg-root.is-open.is-ai3v3 .cbg-unit,
body > .cbg-root.is-open:not(.is-survival) .cbg-unit {
  width: min(118px, 24vw, 22dvh * 1049 / 1559) !important;
  max-width: min(118px, 26vw) !important;
}

body > .cbg-root.is-open.is-survival .cbg-unit {
  width: min(88px, 16vw, 16dvh * 1049 / 1559) !important;
  max-width: min(88px, 17vw) !important;
}

@media (min-width: 900px) {
  body > .cbg-root.is-open.is-phase-arena .cbg-shell,
  body > .cbg-root.is-open:has(.cbg-arena:not([hidden])) .cbg-shell {
    max-width: min(980px, 96vw) !important;
    height: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }

  body > .cbg-root.is-open.is-ai3v3 .cbg-unit,
  body > .cbg-root.is-open:not(.is-survival) .cbg-unit {
    /* Desktop 3v3: fit 3 cards + boost without cropping the stage */
    width: min(148px, 14vw, 26dvh * 1049 / 1559) !important;
    max-width: min(148px, 15vw) !important;
  }

  body > .cbg-root.is-open.is-survival .cbg-unit {
    width: min(118px, 11.5vw, 22dvh * 1049 / 1559) !important;
    max-width: min(118px, 12.5vw) !important;
  }

  body > .cbg-root.is-open .cbg-side-you .cbg-row {
    max-height: min(32dvh, 280px) !important;
  }
  body > .cbg-root.is-open .cbg-side-enemy .cbg-row {
    max-height: min(30dvh, 260px) !important;
  }
}

/* Short viewports: shrink cards harder, keep BOOST */
@media (max-height: 760px) {
  body > .cbg-root.is-open.is-ai3v3 .cbg-unit,
  body > .cbg-root.is-open:not(.is-survival) .cbg-unit {
    width: min(100px, 22vw, 20dvh * 1049 / 1559) !important;
  }
  body > .cbg-root.is-open.is-survival .cbg-unit {
    width: min(72px, 15vw, 14dvh * 1049 / 1559) !important;
  }
  body > .cbg-root.is-open .cbg-turn-hint {
    display: none !important;
  }
  body > .cbg-root.is-open .cbg-btn-boost {
    min-height: 40px !important;
  }
}

@media (max-height: 620px) {
  body > .cbg-root.is-open .cbg-eyebrow {
    display: none !important;
  }
  body > .cbg-root.is-open.is-ai3v3 .cbg-unit,
  body > .cbg-root.is-open:not(.is-survival) .cbg-unit {
    width: min(84px, 20vw, 18dvh * 1049 / 1559) !important;
  }
  body > .cbg-root.is-open.is-survival .cbg-unit {
    width: min(60px, 14vw, 13dvh * 1049 / 1559) !important;
  }
  body > .cbg-root.is-open .cbg-side-you .cbg-row,
  body > .cbg-root.is-open .cbg-side-enemy .cbg-row {
    max-height: min(22dvh, 160px) !important;
  }
}

/* Kill accidental pointer-events:none on boost from older layers */
body > .cbg-root.is-open .cbg-boost-row-you,
body > .cbg-root.is-open .cbg-boost-row-you * {
  pointer-events: auto !important;
}
body > .cbg-root.is-open .cbg-boost-fill,
body > .cbg-root.is-open .cbg-boost-track {
  pointer-events: none !important; /* bar itself doesn't need clicks */
}
body > .cbg-root.is-open .cbg-btn-boost {
  pointer-events: auto !important;
}