/* Option 2 (choose a dictator): fills the window, pins centred, chosen pin keeps its oval. */
.eb-start-section-2 {
  height: 100vh;
  height: 100svh;
}

.eb-dic-slider {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  padding: 0 30px;
}

.eb-dic-slider-mask {
  height: 100%;
}

/* The pin image is the only in-flow child, so this centres the pin itself in the window.
   --pin-scale shrinks it on short windows so the name never runs under the bottom bar. */
.eb-dic-slider-item {
  height: auto;
  top: 50%;
  translate: 0 -50%;
  scale: var(--pin-scale, 1);
}

/* Reserve the pin's height before the (lazy) image arrives so centring is right from the start. */
.eb-dic-slider-item-img {
  aspect-ratio: 500 / 782;
  height: auto;
}

.eb-dic-slide {
  cursor: pointer;
}

.eb-dic-slide.is-chosen .eb-dic-slider-dic-chosen {
  opacity: 1 !important;
}

#chooseDicNext.is-pinned {
  position: fixed;
  z-index: 1000;
  margin: 0;
}

/* Chosen: the oval fills with the button gradient. */
.eb-dic-slide.is-chosen .eb-dic-slider-dic-chosen {
  background-image: linear-gradient(60deg, var(--magenta), var(--red));
  border-color: transparent;
}

/* One gutter lines up the arrows, "You've chosen" and Next: each sits that far from its side
   edge and (in the bar) that far from the bottom. */
.eb-start-section-2 {
  --gutter: 24px;
  --arrow: 45px;
  --slide: 22vw;
  --lead: 5vw;
}

.eb-dic-slider .w-slider-arrow-left,
.eb-dic-slider .w-slider-arrow-right {
  width: calc(var(--gutter) + var(--arrow));
  transition: opacity .2s;
}

.eb-dic-slider .w-slider-arrow-left { left: 0; right: auto; }
.eb-dic-slider .w-slider-arrow-right { right: 0; left: auto; }
.eb-dic-slider .w-slider-arrow-left .arrow { left: var(--gutter); right: auto; }
.eb-dic-slider .w-slider-arrow-right .arrow { right: var(--gutter); left: auto; }

.eb-dic-slider .is-hidden {
  opacity: 0;
  pointer-events: none;
}

.eb-start-bottom {
  height: auto;
  padding: var(--gutter);
  align-items: flex-end;
}

.eb-start-button-dic-name {
  line-height: 1;
}

/* The row of dictators scrolls natively (trackpad, touch, keyboard) and snaps to each one. */
.eb-dic-slider {
  padding: 0;
}

.eb-dic-slider-mask.is-scroller {
  position: absolute;
  inset: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding-left: var(--lead);
  scroll-padding-left: var(--lead);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}

.eb-dic-slider-mask.is-scroller::-webkit-scrollbar {
  display: none;
}

.eb-dic-slider-mask.is-scroller .w-slide {
  width: var(--slide);
  scroll-snap-align: start;
}

.eb-dic-slider-mask.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.eb-dic-slider-mask.is-scroller img {
  -webkit-user-drag: none;
}

@media screen and (max-width: 991px) {
  .eb-start-section-2 { --slide: 32vw; }
}

@media screen and (max-width: 767px) {
  .eb-start-section-2 { --slide: 42vw; }
}

@media screen and (max-width: 479px) {
  .eb-start-section-2 { --gutter: 16px; --arrow: 35px; --slide: 76vw; --lead: 11vw; }
}