/*
 * Rank leaderboard as mobile bottom sheet inside shared ModalComponent (drawerable).
 * Overlay + z-index + slide animation; Rank UI partial stays unchanged.
 */

/* Lock document scroll while a modal is open. Avoid touch-action: none — it breaks nested
 * overflow scrolling (e.g. rank leaderboard list) on mobile WebKit. */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * Dialog shell: bottom-aligned sheet, overlay beneath panel.
 * Duplicate the layout for :has(.rank-page-root--modal) so the sheet is visible on the first paint
 * after Turbo replaces the frame — before rank-sheet-frame connects (otherwise the box stays at
 * translateY(100%) and only the dimmed overlay from globals.css is seen).
 */
.modal.modal--rank-sheet,
.modal-toggle:checked + .modal:has(.rank-page-root--modal) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  background: transparent !important;
}

.modal.modal--rank-sheet .modal-box.modal-box--rank-bottom-sheet,
.modal-toggle:checked + .modal:has(.rank-page-root--modal) .modal-box {
  pointer-events: auto;
  position: relative !important;
  z-index: 50 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 90vh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px 24px 0 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;

  /* Visible immediately; closing animation uses --closing only */
  transform: translateY(0);
  transition: transform 280ms ease-out;
  will-change: transform;
}

/* Flex chain so `.rank-page-list` keeps a bounded height and `overflow-y: auto` scrolls */
.modal.modal--rank-sheet .modal-box.modal-box--rank-bottom-sheet turbo-frame[data-drawerable-target="frame"],
.modal-toggle:checked + .modal:has(.rank-page-root--modal) .modal-box turbo-frame[data-drawerable-target="frame"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

.modal.modal--rank-sheet .modal-box.modal-box--rank-bottom-sheet.modal-box--rank-bottom-sheet--closing {
  transform: translateY(100%);
}

.modal-toggle:checked + .modal:has(.rank-page-root--modal) .modal-box.modal-box--rank-bottom-sheet--closing {
  transform: translateY(100%);
}

/* Dimmed backdrop — below sheet; click label still closes via Daisy checkbox */
.modal.modal--rank-sheet .modal-backdrop,
.modal-toggle:checked + .modal:has(.rank-page-root--modal) .modal-backdrop {
  pointer-events: auto !important;
  z-index: 40 !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.modal--rank-sheet .modal-box.modal-box--rank-bottom-sheet,
  .modal-toggle:checked + .modal:has(.rank-page-root--modal) .modal-box {
    transition-duration: 0.01ms;
  }
}