/* ======================================
   Recent game same-date carousel
====================================== */

.recent-game-section {
  min-width:
    0;
}

.recent-game-carousel {
  min-width:
    0;
}

.recent-game-carousel[hidden] {
  display:
    none;
}

.recent-game-carousel-viewport {
  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  scroll-snap-type:
    x mandatory;

  scroll-behavior:
    smooth;

  scrollbar-width:
    none;

  overscroll-behavior-x:
    contain;

  touch-action:
    pan-y pinch-zoom;

  outline:
    none;
}

.recent-game-carousel-viewport::-webkit-scrollbar {
  display:
    none;
}

.recent-game-carousel-viewport:focus-visible {
  border-radius:
    20px;

  box-shadow:
    0 0 0 3px
    rgba(227, 181, 36, 0.46);
}

.recent-game-carousel-track {
  display:
    flex;

  align-items:
    stretch;

  gap:
    14px;
}

.recent-game-carousel-card {
  flex:
    0 0 100%;

  min-width:
    0;

  scroll-snap-align:
    start;

  scroll-snap-stop:
    always;
}

.recent-game-carousel.is-single
.recent-game-carousel-viewport {
  overflow-x:
    hidden;

  scroll-snap-type:
    none;
}

.recent-game-carousel-controls {
  display:
    grid;

  grid-template-columns:
    42px minmax(0, 1fr) auto 42px;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    12px;

  padding:
    0 4px;
}

.recent-game-carousel-controls[hidden] {
  display:
    none;
}

.recent-game-carousel-arrow {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  padding:
    0;

  border:
    1px solid
    rgba(125, 8, 24, 0.2);

  border-radius:
    50%;

  background:
    #ffffff;

  color:
    var(--hayate-enji);

  font:
    inherit;

  font-size:
    28px;

  font-weight:
    900;

  line-height:
    1;

  box-shadow:
    0 6px 18px
    rgba(76, 6, 16, 0.09);

  cursor:
    pointer;
}

.recent-game-carousel-arrow:hover:not(:disabled) {
  border-color:
    rgba(125, 8, 24, 0.38);

  background:
    #fff8f8;
}

.recent-game-carousel-arrow:focus-visible {
  outline:
    3px solid
    rgba(227, 181, 36, 0.52);

  outline-offset:
    2px;
}

.recent-game-carousel-arrow:disabled {
  opacity:
    0.32;

  cursor:
    default;
}

.recent-game-carousel-dots {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-width:
    0;
}

.recent-game-carousel-dot {
  width:
    9px;

  height:
    9px;

  padding:
    0;

  border:
    0;

  border-radius:
    999px;

  background:
    #c9bec0;

  cursor:
    pointer;

  transition:
    width 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.recent-game-carousel-dot.is-active {
  width:
    24px;

  background:
    var(--hayate-enji);

  transform:
    scaleY(1.08);
}

.recent-game-carousel-dot:focus-visible {
  outline:
    3px solid
    rgba(227, 181, 36, 0.52);

  outline-offset:
    3px;
}

.recent-game-carousel-position {
  min-width:
    38px;

  color:
    var(--text-sub);

  font-size:
    12px;

  font-weight:
    800;

  text-align:
    center;

  white-space:
    nowrap;
}

@media screen and (max-width: 420px) {
  .recent-game-carousel-controls {
    grid-template-columns:
      38px minmax(0, 1fr) auto 38px;

    gap:
      8px;
  }

  .recent-game-carousel-arrow {
    width:
      38px;

    height:
      38px;

    font-size:
      25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recent-game-carousel-viewport {
    scroll-behavior:
      auto;
  }

  .recent-game-carousel-dot {
    transition:
      none;
  }
}