/* ==========================================================
   LYNX ROLEPLAY v13 — marquee visibility / logo / wheel fixes
   ========================================================== */

/* 1) Keep the hero ticker fully inside the viewport instead of touching the
      very bottom edge. The rest of the hero composition stays unchanged. */
.hero-marquee {
  bottom: 18px !important;
}
.hero .scroll-hint {
  bottom: 88px !important;
}

/* 2) Marquees are visual motion layers, not scroll containers. Allow normal
      vertical wheel/trackpad/touch scrolling while the pointer is over them. */
.hero-marquee,
.tech-marquee {
  overflow: hidden !important;
  overscroll-behavior: auto !important;
  overscroll-behavior-x: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
}

/* Do not let a child create an accidental horizontal scrolling context. */
.hero-marquee-track,
.tech-marquee-track,
.hero-marquee-group,
.tech-marquee-group {
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
}

/* 3) Give wordmark SVGs a little more real estate and prevent any visual crop
      around the ends of long labels such as OX INVENTORY / JAVASCRIPT. */
.tech-logo-card {
  padding-inline: 12px;
}
.tech-logo-card img {
  width: 136px !important;
  max-width: calc(100% - 22px);
  height: 46px !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  .hero-marquee { bottom: 14px !important; }
  .hero .scroll-hint { bottom: 78px !important; }
  .tech-logo-card img {
    width: 118px !important;
    height: 40px !important;
  }
}

@media (max-width: 560px) {
  .hero-marquee { bottom: 10px !important; }
  .tech-logo-card img {
    width: 108px !important;
    height: 38px !important;
  }
}