/* === Font Faces === */
/* Fat — used for headings and bold text (font-weight 700-900) */
@font-face {
  font-family: "NN Nouvelle Grotesk";
  src: url("../fonts/NNNouvelleGroteskSTD-Fat.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: block;
}
/* Light — used for body text and slot machine options (font-weight 100-600) */
@font-face {
  font-family: "NN Nouvelle Grotesk";
  src: url("../fonts/NNNouvelleGroteskSTD-Light.woff2") format("woff2");
  font-weight: 100 600;
  font-style: normal;
  font-display: block;
}

/* === Base === */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "NN Nouvelle Grotesk", system-ui, sans-serif;
  cursor: none;
  width: 100vw;
  height: 100vh;
}

#app {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
}

/* === Screens === */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.screen.active {
  display: flex;
  opacity: 1;
}

/* === Rounded Image === */
.rounded-image {
  border-radius: 100px;
  overflow: hidden;
  object-fit: cover;
}

/* === Placeholder Image Backgrounds === */
.placeholder-img {
  background: #8fa3b0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
  font-size: 24px;
}

/* === Arc Decorations === */
.arc {
  position: absolute;
  pointer-events: none;
}

.arc-tl {
  top: 90px;
  left: 90px;
  width: 340px;
  height: 340px;
  transform: rotate(0deg);
}

.arc-br {
  bottom: 50px;
  width: 340px;
  height: 340px;
}

/* === Slot Machine === */
.slot-viewport {
  position: relative;
  width: 100%;
  height: 972px; /* 9 items × 108px — centers highlight at 540px (exact screen middle) */
  overflow: hidden;
}

.slot-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

/* Light track: all items dim, gradient handles fade */
.slot-item {
  height: 108px;
  display: flex;
  align-items: center;
  font-family: "NN Nouvelle Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: 64px;
  color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  padding-left: 70px;
}

/* Bold clip zone: clips the bold track to only the pill/highlight row */
.slot-bold-clip {
  position: absolute;
  top: 432px; /* centerIndex(4) × itemHeight(108) */
  left: 0;
  width: 100%;
  height: 108px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #006853 15%,
    #006853 85%,
    transparent 100%
  );
}

/* Bold track sits above the light track, offset so its items align with main track */
#slot-track-bold {
  top: -432px; /* pull up so item[step] aligns with clip zone */
}

/* Bold items: fat font, full white */
.slot-item-bold {
  font-weight: 800;
  font-size: 72px;
  color: #fff;
}

/* Previously selected options: dark green, not selectable */
.slot-item--used {
  color: rgba(0, 60, 35, 0.7);
}
.slot-item-bold.slot-item--used {
  color: rgba(0, 80, 45, 0.8);
}

/* Gradient fades above and below the highlight zone */
.slot-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(
    to bottom,
    rgba(0, 104, 83, 1) 0%,
    rgba(0, 104, 83, 0.2) 100%
  );
  z-index: 8;
  pointer-events: none;
}

.slot-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(
    to top,
    rgba(0, 104, 83, 1) 0%,
    rgba(0, 104, 83, 0.2) 100%
  );
  z-index: 8;
  pointer-events: none;
}

/* === Bracket / Border SVG === */
.bracket-svg {
  position: absolute;
  /* Highlight zone: centerIndex(4) * itemHeight(108) = 432px, item is 108px tall */
  /* Center the 153px-tall SVG on the 108px item: 432 + (108-153)/2 = 409.5 */
  top: 410px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 5px;
  width: 100%;
  height: 153px;
  pointer-events: none;
  z-index: 10;
}

/* === Answer Screens === */
.answer-image {
  border-radius: 100px;
  overflow: hidden;
  object-fit: cover;
}

.answer-arcs-container {
  position: absolute;
  top: 98px;
  left: 105px;
  height: 899px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.answer-arcs-container--wrong {
  width: 899px;
}

.answer-arcs-container--right {
  width: 841px;
}

.answer-arc {
  position: absolute;
  width: 337px;
  pointer-events: none;
  z-index: 1;
}

.answer-arc--top-left {
  top: 0;
  left: 0;
  height: 338px;
}

.answer-arc--bottom-right {
  right: 0;
  bottom: 0;
  height: 337px;
}

#screen-wrong .answer-arc--top-left,
#screen-wrong .answer-arc--bottom-right {
  transform: translate3d(0, 0, 0) rotate(0deg);
}

#screen-wrong.screen-wrong--drop-arcs .answer-arc--top-left {
  animation: wrong-arc-fall-left var(--wrong-arc-dur-left, 1360ms) ease-in
    var(--wrong-arc-delay-left, 500ms) forwards;
}

#screen-wrong.screen-wrong--drop-arcs .answer-arc--bottom-right {
  animation: wrong-arc-fall-right var(--wrong-arc-dur-right, 1520ms) ease-in
    var(--wrong-arc-delay-right, 550ms) forwards;
}

@keyframes wrong-arc-fall-left {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(
        var(--wrong-arc-left-x, -26px),
        var(--wrong-arc-left-y, 1160px),
        0
      )
      rotate(var(--wrong-arc-left-rot, -42deg));
  }
}

@keyframes wrong-arc-fall-right {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(
        var(--wrong-arc-right-x, 34px),
        var(--wrong-arc-right-y, 1160px),
        0
      )
      rotate(var(--wrong-arc-right-rot, 46deg));
  }
}

.answer-text-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.answer-text-wrap--wrong {
  width: 800px;
}

.answer-text-wrap--right {
  width: 710px;
}

/* === End Screen Images === */
.end-image {
  border-radius: 60px;
  overflow: hidden;
  object-fit: cover;
}

.end-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}