/* Desktop: keep the complete guide workflow inside one viewport. */
@media (min-width: 901px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body {
    box-sizing: border-box;
    padding-top: 8px !important;
    padding-right: 24px !important;
    padding-bottom: 8px !important;
  }

  .section-heading {
    flex: 0 0 auto;
    margin: 0 auto 7px !important;
  }

  .section-eyebrow {
    margin-bottom: 3px !important;
    font-size: 8px !important;
  }

  .section-heading h2 {
    font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
    line-height: 1.05 !important;
  }

  .gamemode-toggle {
    flex: 0 0 auto;
    margin: 0 auto 8px !important;
  }

  .gamemode-pill {
    padding: 3px !important;
    border-radius: 11px !important;
  }

  .gamemode-btn {
    min-width: 80px !important;
    padding: 7px 20px !important;
    font-size: 10px !important;
  }

  .spec-grid {
    flex: 0 0 auto;
    max-width: 900px !important;
    gap: 7px !important;
    margin: 0 auto 5px !important;
  }

  .class-card {
    min-height: 72px !important;
    gap: 5px !important;
    padding: 8px 6px 7px !important;
    border-radius: 12px !important;
  }

  .class-card .card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
  }

  .class-card .card-label {
    font-size: 8px !important;
  }

  .class-card .card-arrow {
    bottom: 3px !important;
    right: 5px !important;
  }

  #midnight-logo {
    flex: 0 0 auto;
    margin: 4px auto 3px !important;
    padding: 0 !important;
  }

  .midnight-logo-title {
    font-size: clamp(2rem, 3vw, 2.65rem) !important;
  }

  .midnight-logo-classic {
    margin: 0 !important;
    font-size: clamp(0.72rem, 1.1vw, 0.95rem) !important;
  }

  .midnight-logo-sub {
    margin-top: 1px !important;
    font-size: clamp(0.52rem, 0.72vw, 0.66rem) !important;
  }

  #player-section {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 920px !important;
    margin: 0 auto !important;
    overflow: hidden;
  }

  #player-section .video-holder.glass {
    width: min(900px, 100%) !important;
    height: min(506px, 50.625vw, calc(100dvh - 350px)) !important;
    min-height: 0 !important;
    margin: 3px auto 2px !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  #player-section .plyr,
  #player-section .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
  }

  #video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  #player-section > div[style*="text-align:center"] {
    margin-top: 1px !important;
    min-height: 14px !important;
    line-height: 1.2 !important;
  }

  #statusLabel,
  #nowPlayingTitle,
  #endsAtLabel {
    font-size: 11px !important;
  }
}

/* Short desktop displays get an even tighter player allocation. */
@media (min-width: 901px) and (max-height: 720px) {
  .class-card {
    min-height: 64px !important;
    padding-block: 6px !important;
  }

  .class-card .card-icon {
    width: 31px !important;
    height: 31px !important;
  }

  #midnight-logo {
    margin-block: 1px !important;
  }

  .midnight-logo-title {
    font-size: 1.8rem !important;
  }

  #player-section .video-holder.glass {
    height: calc(100dvh - 318px) !important;
  }
}

/* Phones and tablets retain normal document scrolling for usability. */
@media (max-width: 900px) {
  html,
  body {
    height: auto;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
  }
}