/* Carousels: the home page's games and each game page's screenshots. assets/carousel.js runs them.
   A .carousel holds 2 .arrow buttons and a .track: its items in a row, each snapped to the left edge, no scrollbar
   (swipe, scroll sideways, the arrows, or the arrow keys), faded at the edges. The script sets how far each fade
   reaches (--room-l, --room-r), so an item resting at an edge stays crisp. cqi is the carousel's width.
   Each page sets its items' width and the gap; --arrow-out is how far past the track's edge the arrows sit. */
.valley { overflow-x: clip; }   /* the arrows reach a little past the page's column */
.carousel { position: relative; container-type: inline-size; --arrow-out: 12px; }
.track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; position: relative;   /* the items' offsetLeft is along the track */
  --fade: clamp(24px, 6cqi, 64px); --room-l: 0px; --room-r: 100%;
  mask-image: linear-gradient(to right, transparent, #000 min(var(--fade), var(--room-l)),
    #000 calc(100% - min(var(--fade), var(--room-r))), transparent);
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: no-preference) { .track { scroll-behavior: smooth; } }
/* a track you can focus (the screenshots, to scroll with the arrow keys) shows its ring on the carousel: the fade
   would hide a ring on the track itself */
.track:focus-visible { outline: none; box-shadow: none; }
.carousel:has(> .track:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

/* the kit's round key, with an arrow, just past the track's edge at each side; where there's no room for that (an iPad
   upright), at the screen's edge. On a phone there are none: you swipe. */
.arrow {
  position: absolute; top: 50%; z-index: 1; width: 56px; height: 56px; margin-top: -31px; padding: 0;
  display: grid; place-items: center; color: var(--ink); background: var(--sky); border: 2.5px solid var(--ink);
  border-radius: 50%; box-shadow: 0 5px 0 var(--sky-deep), 0 5px 0 2.5px var(--ink); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.arrow:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sky-deep), 0 1px 0 2.5px var(--ink); }
.arrow[data-step="-1"] { left: max(-56px - var(--arrow-out), (100cqi - 100vw) / 2); }
.arrow[data-step="1"] { right: max(-56px - var(--arrow-out), (100cqi - 100vw) / 2); }
/* at the first or last item it fades out, but keeps keyboard focus if it has it */
.arrow[aria-disabled="true"] { opacity: .45; cursor: default; }
.arrow[aria-disabled="true"]:not(:focus-visible) { opacity: 0; pointer-events: none; }
.arrow svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 640px) { .arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .arrow { transition: none; } }