/* Mobile slides may be taller than the viewport. Keep desktop presentation unchanged. */
@media (max-width: 800px), (max-height: 560px) and (pointer: coarse) {
  .slide.active:not(.video-intro) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: rgba(103, 232, 249, .7) transparent;
  }

  .slide.active:not(.video-intro)::-webkit-scrollbar { width: 4px; }
  .slide.active:not(.video-intro)::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(103, 232, 249, .7);
  }

  .slide.active:not(.video-intro) > :last-child {
    margin-bottom: 34px;
  }

  .zone-layout,
  .games-shell {
    height: auto;
    min-height: 100%;
  }

  .zone-layout { justify-content: flex-start; gap: 28px; }
  .games-shell { overflow: visible; }

  /* A subtle cue appears only while there is more content below. */
  .slide.active:not(.video-intro)::after {
    content: "PRZEWIŃ W DÓŁ";
    position: fixed;
    z-index: 24;
    right: 12px;
    bottom: 82px;
    padding: 6px 8px;
    border: 1px solid rgba(103, 232, 249, .28);
    border-radius: 99px;
    background: rgba(3, 12, 22, .82);
    color: rgba(195, 244, 250, .78);
    font: 700 7px/1 monospace;
    letter-spacing: .12em;
    pointer-events: none;
    animation: mobileScrollHint 2.2s ease-in-out infinite;
  }

  .meteor-slide.active::after,
  .lab-games.active:has(.game-stage:not([hidden]))::after { display: none; }
}

@keyframes mobileScrollHint {
  0%, 100% { opacity: .38; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}