/* Screenshot carousel: a native scroll-snap track of phone screens. site/js/carousel.js adds the controls; without it
   the track still scrolls. Custom properties use the --c- prefix; motion tokens come from motion.css, with fallbacks. */
.carousel{--c-slide:min(70vw,320px);--c-gap:clamp(16px,2.6vw,36px);--c-step:calc(var(--c-slide) + var(--c-gap));margin-top:clamp(40px,5vw,64px)}

/* The side padding lets the first and the last slide sit in the centre, like every other slide. */
.carousel-track{position:relative;display:flex;gap:var(--c-gap);overflow-x:auto;overflow-y:hidden;padding:12px calc(50% - var(--c-slide) / 2) 28px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-tap-highlight-color:transparent}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.carousel-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
@media (hover:hover) and (pointer:fine){.carousel.is-ready .carousel-track{cursor:grab}}

.slide{flex:0 0 var(--c-slide);margin:0;scroll-snap-align:center;transform-origin:50% 100%}
.slide-screen{border:8px solid #05070c;border-radius:30px;overflow:hidden;background:var(--night-2);box-shadow:8px 8px 0 #000}
.slide-screen img{width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.slide figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:14px;margin-top:22px;font:500 14.5px/1.4 var(--label);color:var(--muted);text-wrap:pretty}
.slide-no{grid-row:span 2;font:44px/.78 var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.slide figcaption b{display:block;margin-bottom:5px;font-weight:800;font-stretch:125%;font-size:12.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}

/* Controls: previous, a "01 / 09" counter over a segmented bar (like the hand pips in the game), next. */
.carousel-bar{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,32px);margin-top:10px;padding:0 var(--gutter)}
.carousel .carousel-btn{width:52px;height:52px;padding:0}
.carousel-prev svg{transform:scaleX(-1)}
.carousel .carousel-btn:disabled{background:transparent;color:var(--dim);border-color:var(--line);box-shadow:none;transform:none;cursor:default}
.carousel-status{display:grid;justify-items:center;gap:10px;min-width:128px}
.carousel-count{margin:0;font:34px/.8 var(--display);color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.carousel-count b{font-weight:400;color:var(--text)}
.carousel-progress{position:relative;display:block;width:calc(var(--c-n,9) * 14px - 4px);height:6px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 14px)}
.carousel-progress i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--yellow) 0 10px,transparent 10px 14px);clip-path:inset(0 calc((var(--c-n,9) - var(--c-k,1)) * 14px) 0 0)}
.carousel .c-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Focus: the centre slide is full size and the others step back. A view timeline does it on scroll where it is
   supported; elsewhere the script's .is-active class does it with a transition. */
@media (prefers-reduced-motion:no-preference){
  .carousel-progress i{transition:clip-path var(--dur-2,520ms) var(--ease-out,cubic-bezier(.16,1,.3,1))}
  @supports (animation-timeline:view()){
    .slide{animation:c-focus linear both;animation-timeline:view(inline);animation-range:cover calc(50% - var(--c-step)) cover calc(50% + var(--c-step))}
  }
  @supports not (animation-timeline:view()){
    .carousel.is-ready .slide{transition:opacity var(--dur-2,520ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),scale var(--dur-2,520ms) var(--ease-out,cubic-bezier(.16,1,.3,1))}
    .carousel.is-ready .slide:not(.is-active){opacity:.55;scale:.9}
  }
}
@keyframes c-focus{0%,100%{opacity:.55;scale:.9}50%{opacity:1;scale:1}}