/**
 * Mobile-phone landscape only: hide the page and show the colorful rotate-screen.
 * Included only by the listed pages. Does not apply to iPad, desktop, or portrait.
 *
 * 8" tablets such as the UMIDIGI G1 Tab Mini Kids (1280×800) must never match.
 * Phone detection uses a short viewport (max-height: 500px) which Chrome's
 * toolbar can also satisfy on a tablet; html.immortal-tablet-screen (screen
 * short-side ≥ 501px and long-side ≥ 768px) and both device sides ≥ 501px
 * keep those devices on the tablet landscape UI.
 */

#turn.immortal-rotate-screen {
  display: none;
}

html.immortal-tablet-screen #turn,
html.immortal-tablet-screen #turn.immortal-rotate-screen,
html.immortal-tablet-screen body #turn,
html.immortal-tablet-screen body.for-profile #turn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media screen and (orientation: landscape)
  and (max-width: 960px)
  and (max-height: 500px) {
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen),
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
  }

  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) .view-wrapper,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) .view-wrapper.is-sidebar-v1,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) .view-wrapper.is-sidebar-v1.is-fold,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body.for-profile .view-wrapper.is-sidebar-v1 {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    width: 100% !important;
    left: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn.immortal-rotate-screen,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body.for-profile #turn,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body.for-profile #turn.immortal-rotate-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #eaf4ff !important;
    background-image:
      radial-gradient(ellipse 55% 80% at 8% 18%, rgba(91, 163, 245, 0.28) 0%, rgba(91, 163, 245, 0) 70%),
      radial-gradient(ellipse 50% 70% at 92% 12%, rgba(56, 140, 232, 0.2) 0%, rgba(56, 140, 232, 0) 68%),
      radial-gradient(ellipse 60% 50% at 88% 88%, rgba(186, 220, 255, 0.7) 0%, rgba(186, 220, 255, 0) 70%),
      url("../img/logo/immortal-rotate-landscape.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover, cover, cover, contain !important;
    pointer-events: auto !important;
  }

  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn .immortal-rotate-screen__poster,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body.for-profile #turn .immortal-rotate-screen__poster {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn .immortal-rotate-screen__title,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn .immortal-rotate-screen__subtitle,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body.for-profile #turn .immortal-rotate-screen__title,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body.for-profile #turn .immortal-rotate-screen__subtitle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Hide the original page on every listed screen. */
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .sidebar-v1,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .app-overlay,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .chat-wrapper,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .pageloader,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .toolbar-v1-fixed-wrap,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .toolbar-v1,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .mble-head,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .friendkit-hamburger,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .sidebar-v1-trigger,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #profile-friends,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #settings,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .feed-profile-wrapper,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .bg_new_layout,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .bgimgdesign,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .settings-wrapper,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .event-page-wrapper,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .navbar,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #main-navbar,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body .view-wrapper > *:not(#turn) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn.immortal-rotate-screen,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn * {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn .immortal-rotate-screen__title,
  html:not(.immortal-tablet-screen):has(#turn.immortal-rotate-screen) body #turn .immortal-rotate-screen__subtitle {
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/* 8" 1280×800 and other tablets: both CSS device sides are ≥ 501px. Phones are not. */
@media only screen and (min-device-width: 501px) and (min-device-height: 501px) {
  html body #turn,
  html body #turn.immortal-rotate-screen,
  html body.for-profile #turn,
  html body.for-profile #turn.immortal-rotate-screen {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    background: none !important;
  }
}

html.immortal-tablet-screen body #turn,
html.immortal-tablet-screen body #turn.immortal-rotate-screen,
html.immortal-tablet-screen body.for-profile #turn,
html.immortal-tablet-screen body.for-profile #turn.immortal-rotate-screen,
html.immortal-tablet-screen:has(#turn.immortal-rotate-screen) body #turn,
html.immortal-tablet-screen:has(#turn.immortal-rotate-screen) body #turn.immortal-rotate-screen,
html.immortal-tablet-screen:has(#turn.immortal-rotate-screen) body.for-profile #turn,
html.immortal-tablet-screen:has(#turn.immortal-rotate-screen) body.for-profile #turn.immortal-rotate-screen {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  background: none !important;
}