/* Reserve a real pointer lane beside each shelf; previews stay inside it. */
@media (min-width: 701px) {
  :root { --shelf-edge: clamp(48px, 3.5vw, 72px); }
  #main .shelf-wrap > .shelf {
    margin-inline: var(--shelf-edge);
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  #main .shelf-wrap > .shelf-arrow {
    z-index: 33;
    top: calc(50% - 32px);
    bottom: auto;
    width: 36px;
    height: 64px;
    border-radius: 20px;
    background: #17191abf;
    color: #ececeb;
    box-shadow: none;
    opacity: .75;
    pointer-events: auto;
  }
  #main .shelf-wrap > .shelf-arrow.previous { left: calc((var(--shelf-edge) - 36px) / 2); }
  #main .shelf-wrap > .shelf-arrow.next { right: calc((var(--shelf-edge) - 36px) / 2); }
  #main .shelf-wrap > .shelf-arrow:hover,
  #main .shelf-wrap > .shelf-arrow:focus-visible { opacity: 1; background: #303436; }
  #main .shelf-wrap > .shelf-arrow[hidden] { display: none; }
  #main .top-ten-shelf {
    --rank-count: 4;
    --rank-gap: clamp(22px, 2vw, 34px);
    --rank-poster-width: calc((100vw - 2 * var(--shelf-edge) - (var(--rank-count) - 1) * var(--rank-gap)) / (var(--rank-count) * 1.72));
  }
  #main .top-ten-shelf .shelf { gap: var(--rank-gap); }
}
@media (min-width: 701px) and (max-width: 1100px) {
  #main .top-ten-shelf { --rank-count: 3; }
}
.hover-preview.tile-preview { z-index: 32; }
#main .webcast-watch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  color: #f5f5f7;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  pointer-events: auto;
}
#main .webcast-watch svg { width: 14px; height: 14px; }
#main .webcast-watch:hover { text-decoration: underline; text-underline-offset: 3px; }