/* Surface Pro portrait scroll repair.
 * Keep the document itself as the vertical scroller at 900-991px. The game
 * content is taller than the viewport once chat is stacked below the table,
 * so no ancestor may clamp that content to the viewport height. */
@media (min-width:900px) and (max-width:991px) {
  html {
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    touch-action:pan-y !important;
  }

  body.body-dark {
    position:static !important;
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    touch-action:pan-y !important;
  }

  /* Bootstrap may leave modal-open during/after the bot setup transition.
     Unless a real modal is actively open, do not let that class lock the page. */
  body.body-dark.modal-open:not(:has(.modal.show[aria-modal="true"])) {
    overflow-y:visible !important;
    padding-right:0 !important;
  }

  /* Before a game starts, a visible modal should lock the document normally.
     Once bot mode starts, however, the setup modal can still carry Bootstrap's
     .show/aria-modal state for a few frames while the game is already rendered.
     Do not let that stale transition state re-lock the Surface Pro page. */
  body.body-dark:not([data-pepper-bot-mode="true"]):has(.modal.show[aria-modal="true"]) {
    overflow:hidden !important;
  }

  html:has(body.body-dark[data-pepper-bot-mode="true"]),
  html:has(body.body-dark[data-pepper-bot-mode="true"].modal-open) {
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    overflow-y:auto !important;
  }

  html body.body-dark[data-pepper-bot-mode="true"],
  html body.body-dark[data-pepper-bot-mode="true"].modal-open,
  html body.body-dark[data-pepper-bot-mode="true"][data-pepper-game-started="true"].modal-open {
    position:static !important;
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    padding-right:0 !important;
    touch-action:pan-y !important;
  }

  .game-shell,
  #pepper-app,
  #pepper-app > div,
  #pepper-app > div > .row.mb-4.g-0,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child,
  #pepper-app .card {
    height:auto !important;
    max-height:none !important;
    overflow-y:visible !important;
  }

  /* The message list may scroll internally, but the card footer/input must
     remain in normal document flow below it and therefore reachable. */
  #chat_output {
    height:auto !important;
    max-height:360px !important;
    overflow-y:auto !important;
  }
}