/* Final viewport guard for every player-facing dialog/sheet.
   Keep this file last so feature styles cannot push controls beyond a phone screen. */

:where(
  .game4-overlay,
  .sheet-mask,
  .modal-mask,
  .deploy-sheet-mask,
  .item-detail-mask,
  .hero-detail-mask,
  .craft-detail-mask,
  .skill-detail-mask,
  .buff-detail-mask,
  .roster-detail-mask,
  .result-mask,
  .result-log-mask
) {
  box-sizing: border-box;
  max-width: 100vw;
  max-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

:where(
  .game4-sheet,
  .game4-dialog,
  .sheet,
  .modal,
  .deploy-sheet,
  .item-detail-panel,
  .hero-detail-panel,
  .craft-detail-panel,
  .warehouse-picker-panel,
  .chip-rule-panel,
  .skill-detail-panel,
  .roster-detail-panel,
  .result-modal,
  .result-log-modal,
  [role="dialog"][aria-modal="true"]
) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* Content areas own vertical scrolling; heads and action bars remain reachable. */
:where(
  .sheet-body,
  .modal-body,
  .deploy-sheet-body,
  .item-detail-body,
  .hero-detail-body,
  .craft-detail-body,
  .skill-detail-body,
  .roster-detail-body,
  .chip-rule-body,
  .warehouse-picker-list-shell,
  .result-log-list
) {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 222, 255, .8) rgba(15, 25, 55, .72);
}

@media (max-width: 720px) {
  :where(
    .game4-overlay,
    .modal-mask,
    .item-detail-mask,
    .hero-detail-mask,
    .craft-detail-mask,
    .skill-detail-mask,
    .buff-detail-mask,
    .roster-detail-mask,
    .result-mask,
    .result-log-mask
  ) {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
  }

  :where(
    .game4-sheet,
    .game4-dialog,
    .modal,
    .item-detail-panel,
    .hero-detail-panel,
    .craft-detail-panel,
    .warehouse-picker-panel,
    .chip-rule-panel,
    .skill-detail-panel,
    .roster-detail-panel,
    .result-modal,
    .result-log-modal,
    [role="dialog"][aria-modal="true"]
  ) {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  }

  /* Generic dialogs do not always have a separate body wrapper. */
  :where(.game4-sheet, .game4-dialog, .modal, .result-modal) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Bottom sheets keep their edge-to-edge shape but may never cover the top safe area. */
  :where(.sheet-mask, .deploy-sheet-mask) {
    max-height: 100dvh;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    overflow: hidden;
  }

  :where(.sheet, .deploy-sheet) {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)));
    margin: 0;
    overflow: hidden;
  }

  :where(
    .sheet-head,
    .modal-head,
    .deploy-sheet-head,
    .item-detail-head,
    .hero-detail-head,
    .skill-detail-head,
    .craft-detail-head,
    .roster-detail-head,
    .sheet-foot,
    .modal-foot,
    .item-detail-actions,
    .craft-detail-foot,
    .result-log-head
  ) {
    flex: 0 0 auto;
  }
}

@media (max-width: 360px), (max-height: 620px) {
  :where(.sheet-head, .modal-head, .deploy-sheet-head, .item-detail-head, .hero-detail-head, .skill-detail-head, .craft-detail-head, .roster-detail-head) {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  :where(.sheet-body, .modal-body, .deploy-sheet-body, .item-detail-body, .hero-detail-body, .craft-detail-body, .skill-detail-body, .roster-detail-body) {
    padding-top: 10px;
    padding-bottom: 12px;
  }
}