/* A single visible-screen frame in BOTH orientations. Keep long content in
   the card so the outer overlay cannot retain a stale rotation scroll offset. */
html.cpl-popup-viewport body :is(.privacy-modal, .rules-modal, .admin-drilldown-modal) {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: auto !important;
  top: var(--cpl-popup-top, 0px) !important;
  left: var(--cpl-popup-left, 0px) !important;
  width: var(--cpl-popup-width, 100vw) !important;
  height: var(--cpl-popup-height, 100dvh) !important;
  overflow: hidden !important;
}
html.cpl-popup-viewport body :is(.privacy-modal, .rules-modal, .admin-drilldown-modal) > :is(.privacy-card, .rules-card, .account-tournament-history-card, .admin-drilldown-dialog) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: var(--cpl-dialog-available-height, calc(var(--cpl-popup-height, 100dvh) - 48px)) !important;
  margin: auto !important;
}
html.cpl-popup-viewport body .privacy-modal > .privacy-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
html.cpl-popup-viewport.cpl-popup-short body :is(.privacy-modal, .rules-modal, .admin-drilldown-modal) {
  padding-top: max(8px, env(safe-area-inset-top)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Landscape popups use the visible screen, including keyboard and cutouts.
   Scope includes dynamically created history, PIN, directory and Admin cards. */
html.cpl-mobile-landscape {
  --cpl-popup-pad-top: max(8px, env(safe-area-inset-top));
  --cpl-popup-pad-bottom: max(8px, env(safe-area-inset-bottom));
  --cpl-popup-pad-left: max(12px, var(--cpl-safe-left));
  --cpl-popup-pad-right: max(12px, var(--cpl-safe-right));
  --cpl-popup-card-height: calc(var(--cpl-popup-height, 100dvh) - var(--cpl-popup-pad-top) - var(--cpl-popup-pad-bottom));
}

html.cpl-mobile-landscape body :is(#start-lead-modal, #whop-checkout-modal, #account-tournament-history-modal, .privacy-modal, .rules-modal, .admin-drilldown-modal) {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: auto !important;
  top: var(--cpl-popup-top, 0px) !important;
  left: var(--cpl-popup-left, 0px) !important;
  width: var(--cpl-popup-width, 100vw) !important;
  height: var(--cpl-popup-height, 100dvh) !important;
  padding: var(--cpl-popup-pad-top) var(--cpl-popup-pad-right) var(--cpl-popup-pad-bottom) var(--cpl-popup-pad-left) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html.cpl-mobile-landscape body :is(#start-lead-modal, #whop-checkout-modal, #account-tournament-history-modal, .privacy-modal, .rules-modal, .admin-drilldown-modal) > :is(.privacy-card, .rules-card, .account-tournament-history-card, .admin-drilldown-dialog) {
  box-sizing: border-box !important;
  width: min(760px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: var(--cpl-popup-card-height) !important;
  margin: auto !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

html.cpl-mobile-landscape body :is(#start-lead-modal, #whop-checkout-modal, #account-tournament-history-modal, .privacy-modal) > :is(.privacy-card, .account-tournament-history-card) {
  padding: 14px 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding-block: 12px 16px !important;
  -webkit-overflow-scrolling: touch;
}

html.cpl-mobile-landscape body .privacy-modal :is(.account-title, .song-title, .panel-title, .tournament-pin-title, .privacy-copy > h2),
html.cpl-mobile-landscape body .account-tournament-history-title {
  box-sizing: border-box !important;
  min-height: 44px !important;
  margin: 0 0 8px !important;
  padding: 0 52px 0 0 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html.cpl-mobile-landscape body #start-lead-modal .account-title {
  float: none !important;
  width: auto !important;
  text-align: left !important;
}
html.cpl-mobile-landscape body .privacy-modal :is(.account-note, .playlist-copy, .song-title-note, .file-note, .form-message, .report-issue-copy, .report-guidelines-note, .account-age-required-note, .account-verification-note, .tournament-pin-copy, .cpl-map-application-hint),
html.cpl-mobile-landscape body .account-tournament-history-note {
  font-size: 14px !important;
  line-height: 1.35 !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  overflow-wrap: anywhere;
}
html.cpl-mobile-landscape body .privacy-modal .form-body { padding: 0 !important; }
html.cpl-mobile-landscape body .privacy-modal form > label,
html.cpl-mobile-landscape body .privacy-modal .form-grid label {
  font-size: 16px !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  margin: 10px 0 5px !important;
}
html.cpl-mobile-landscape body .privacy-modal :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select) {
  box-sizing: border-box !important;
  width: 100%;
  min-width: 0;
  min-height: 44px !important;
  height: 44px !important;
  max-height: none !important;
  margin-bottom: 8px !important;
  padding-block: 6px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}
html.cpl-mobile-landscape body .privacy-modal textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 88px !important;
  padding: 10px !important;
  font-size: 16px !important;
}
html.cpl-mobile-landscape body .privacy-modal input[type=file]:not(.profile-photo-input) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 8px;
  font-size: 14px;
}
html.cpl-mobile-landscape body .privacy-modal .password-field {
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: start !important;
}
html.cpl-mobile-landscape body .privacy-modal .password-toggle {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  font-size: 22px !important;
}
html.cpl-mobile-landscape body .privacy-modal :is(.account-primary, .account-secondary, .account-danger, .submit-button, .song-submit, .song-cancel, .privacy-close, .marketing-confirm, .marketing-decline, .report-issue-submit, .account-tournament-history-open) {
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
html.cpl-mobile-landscape body .privacy-modal .account-actions { margin-top: 8px !important; }
html.cpl-mobile-landscape body .privacy-modal #tournament-pin-actions button { min-height: 44px !important; padding: 10px 12px !important; font-size: 16px !important; }
html.cpl-mobile-landscape body :is(#start-lead-form, #local-blast-form) { gap: 6px !important; }
html.cpl-mobile-landscape body .privacy-modal .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.cpl-mobile-landscape body .privacy-modal .form-grid.two.result-top-grid > div { grid-template-rows: auto 44px !important; }
html.cpl-mobile-landscape body .privacy-modal .choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.cpl-mobile-landscape body .privacy-modal .choice-row label {
  min-height: 44px !important;
  padding: 8px !important;
  font-size: 16px !important;
}
html.cpl-mobile-landscape body .privacy-modal :is(.account-marketing, .start-lead-terms-consent, .consent-row label) {
  min-height: 44px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}
html.cpl-mobile-landscape body .privacy-modal .account-toggle-copy { font-size: 14px !important; line-height: 1.3 !important; }

/* Close stays reachable when a long form scrolls. Its title reserves a column. */
html.cpl-mobile-landscape body .privacy-modal .modal-x-close,
html.cpl-mobile-landscape body .account-tournament-history-close {
  position: sticky !important;
  float: right !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 0 -44px 8px !important;
  transform: none !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

/* Signup/profile keep photo, title and Close in a compact, non-overlapping row. */
html.cpl-mobile-landscape body #account-signup-modal #account-signup-card .account-title {
  width: auto !important;
  max-width: 100% !important;
  padding-right: 112px !important;
  font-size: 24px !important;
  min-height: 44px !important;
}
html.cpl-mobile-landscape body #account-signup-modal #account-signup-card .account-profile-photo-top {
  --account-profile-photo-size: 44px;
  top: 14px !important;
  right: 68px !important;
}
html.cpl-mobile-landscape body #account-signup-modal #account-signup-card.edit-mode .account-title {
  padding-right: 160px !important;
  min-height: 64px !important;
}
html.cpl-mobile-landscape body #account-signup-modal #account-signup-card.edit-mode .account-profile-photo-top {
  --account-profile-photo-size: 64px;
  right: 88px !important;
}
html.cpl-mobile-landscape body #account-signup-modal #account-signup-card #account-signup-form { padding-top: 12px !important; }
html.cpl-mobile-landscape body #account-signup-modal #account-signup-card #account-signup-note:not(.is-hidden) {
  clear: both;
  margin: 8px 0 10px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
html.cpl-mobile-landscape body #account-signup-modal .account-age-verification { padding: 10px 12px !important; margin: 0 0 12px !important; }
html.cpl-mobile-landscape body #account-signup-modal .account-age-verification legend { font-size: 14px !important; }
html.cpl-mobile-landscape body #account-signup-modal .account-age-verification label { font-size: 18px !important; margin: 6px 0 !important; }
html.cpl-mobile-landscape body .signup-card .team-profile-photo-field { --account-profile-photo-size: 48px; margin: 4px 0 10px !important; }
html.cpl-mobile-landscape body .privacy-modal :is(.team-profile-photo, .player-profile-photo) { width: 64px !important; height: 64px !important; }
html.cpl-mobile-landscape body .privacy-modal .player-profile-header { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 12px; margin: 10px 0; }
html.cpl-mobile-landscape body .privacy-modal .player-profile-username { font-size: 24px; }
html.cpl-mobile-landscape body .privacy-modal .player-profile-meta-list { font-size: 14px; margin-block: 6px 0; }
html.cpl-mobile-landscape body .privacy-modal .player-profile-rank-strip { padding-top: 8px; margin-top: 0; }
html.cpl-mobile-landscape body .privacy-modal .team-profile-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
html.cpl-mobile-landscape body .privacy-modal .team-profile-name { font-size: 24px; }

/* Rules retain their own pan/pinch viewer and fixed controls. */
html.cpl-mobile-landscape body .rules-modal > .rules-card { height: var(--cpl-popup-card-height) !important; }
html.cpl-mobile-landscape body .rules-modal .rules-toolbar,
html.cpl-mobile-landscape body .rules-modal .rules-tabs { flex: 0 0 auto; padding: 6px !important; }
html.cpl-mobile-landscape body .rules-modal .rules-toolbar { grid-template-columns: minmax(0, 1fr) 44px !important; }
html.cpl-mobile-landscape body .rules-modal .rules-title { font-size: 20px !important; }
html.cpl-mobile-landscape body .rules-modal .rules-viewer { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; }

/* Admin has one scrolling content pane below its compact controls. */
html.cpl-mobile-landscape body .admin-drilldown-modal > .admin-drilldown-dialog {
  height: var(--cpl-popup-card-height) !important;
  padding-bottom: 0 !important;
  border: 1px solid rgba(245,192,79,.58) !important;
}
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-header { flex: 0 0 auto; gap: 8px; padding: 8px 12px !important; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-header > div { min-width: 0; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-header h2 { font-size: 20px !important; overflow-wrap: anywhere; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-header p { font-size: 12px !important; overflow-wrap: anywhere; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-kicker { display: none; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-search { flex: 0 0 auto; padding: 6px 12px !important; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-search input {
  box-sizing: border-box;
  min-height: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  margin: 0 !important;
}
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-search .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.cpl-mobile-landscape body .admin-drilldown-modal :is(.admin-drilldown-list, .admin-user-detail-content, .admin-backend-record-content) { flex: 1 1 auto; min-height: 0 !important; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-drilldown-more { min-height: 44px; margin: 6px 12px 8px !important; }
html.cpl-mobile-landscape body .admin-drilldown-modal .admin-user-profile-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
html.cpl-mobile-landscape body .admin-drilldown-modal :is(.admin-user-profile-photo-wrap, .admin-user-profile-photo) { width: 64px; height: 64px; }
html.cpl-mobile-landscape body .account-tournament-history-item { min-height: 64px; padding: 10px 12px; }
html.cpl-mobile-landscape body .account-tournament-history-item-title { font-size: 18px; }

/* Payment receipts remain open until Okay; only their layout changes. */
html.cpl-mobile-landscape body #cpl-paid-tournament-confirmation {
  position: fixed;
  top: calc(var(--cpl-popup-top, 0px) + var(--cpl-popup-height, 100dvh) / 2) !important;
  left: calc(var(--cpl-popup-left, 0px) + var(--cpl-popup-width, 100vw) / 2) !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  width: min(640px, calc(var(--cpl-popup-width, 100vw) - var(--cpl-popup-pad-left) - var(--cpl-popup-pad-right))) !important;
  max-height: var(--cpl-popup-card-height) !important;
  padding: 16px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}
html.cpl-mobile-landscape body #cpl-paid-tournament-confirmation h2 { font-size: 24px; margin-bottom: 8px; }
html.cpl-mobile-landscape body #cpl-paid-tournament-confirmation :is(p, dl) { margin-bottom: 10px; }
html.cpl-mobile-landscape body #cpl-paid-tournament-confirmation dt { margin-top: 8px; }
html.cpl-mobile-landscape body #cpl-paid-tournament-confirmation dd { font-size: 18px; }

/* Keep the open handle row transparent. Browser-mode tray underpaint must
   not refill it in Android WebViews or mobile browsers. */
html.cpl-mobile-landscape body .persistent-bottom-stack:not(.tray-collapsed) {
  display: flex !important;
  flex-flow: row wrap;
  align-items: stretch;
  left: max(8px, var(--cpl-safe-left));
  right: max(8px, var(--cpl-safe-right));
  width: auto;
  transform: none !important;
  will-change: auto !important;
  background: transparent !important;
  max-height: none !important;
  padding: 2px 4px calc(4px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}
/* Keep a one-pixel finish below the native iPhone landscape tray buttons.
   Do not append a home-indicator inset as a colored band below them. */
html.cpl-mobile-landscape.cpl-native-ios-app body .persistent-bottom-stack:not(.tray-collapsed) {
  padding-bottom: 1px !important;
}
html.cpl-mobile-landscape body .persistent-bottom-stack:not(.tray-collapsed)::before {
  inset: 34px 0 0 !important;
}
html.cpl-mobile-landscape body .persistent-bottom-stack:not(.tray-collapsed) .bottom-tray-controls {
  flex: 0 0 100%;
  width: 100%;
  height: 32px !important;
  min-height: 32px !important;
  background: transparent !important;
}
html.cpl-mobile-landscape body .persistent-bottom-stack:not(.tray-collapsed) .bottom-tray-toggle-left {
  width: min(124px, 30vw) !important;
  height: 32px !important;
  min-height: 32px !important;
  transform: none !important;
}
html.cpl-mobile-landscape body .persistent-bottom-stack:not(.tray-collapsed) > button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0;
  padding: 0 7px;
  border-radius: 7px;
  font-size: clamp(12px, 1.9vw, 16px) !important;
  line-height: 1.05;
  white-space: normal;
}
/* Anchor Account options above the whole tray rather than a fixed offset
   from the viewport. This also follows native/browser bottom safe areas. */
html.cpl-mobile-landscape body #account-menu {
  position: absolute;
  top: auto;
  left: auto;
  right: 0;
  bottom: calc(100% + 8px);
  transform: none;
  width: min(380px, calc(var(--cpl-popup-width, 100vw) - var(--cpl-popup-pad-left) - var(--cpl-popup-pad-right) - 8px));
  max-height: max(44px, calc(var(--cpl-popup-height, 100dvh) - 100px - env(safe-area-inset-bottom) - var(--cpl-popup-pad-top)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  gap: 8px;
  z-index: 50;
}
html.cpl-mobile-landscape body #account-menu button {
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* The native HTML receipt dialog shares the same frame after a checkout return. */
html.cpl-popup-viewport body #cpl-paid-tournament-confirmation {
  position: fixed;
  top: calc(var(--cpl-popup-top, 0px) + var(--cpl-popup-height, 100dvh) / 2) !important;
  left: calc(var(--cpl-popup-left, 0px) + var(--cpl-popup-width, 100vw) / 2) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  max-width: calc(var(--cpl-popup-width, 100vw) - 32px) !important;
  max-height: max(0px, calc(var(--cpl-popup-height, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)))) !important;
}