:root {
  --bg: #07080d;
  --ink: #f7f8ff;
  --muted: rgba(247, 248, 255, 0.72);
  --line: rgba(255, 255, 255, 0.16);
  --violet: #8d5cff;
  --cyan: #5ef0ff;
  --pink: #ff4fd8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  overflow-x: hidden;
}

.deck {
  width: 100%;
}

.slide {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

.slide::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -3;
  background:
    linear-gradient(135deg, rgba(141, 92, 255, 0.2), transparent 38%),
    linear-gradient(225deg, rgba(94, 240, 255, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 79, 216, 0.08), transparent 58%),
    var(--bg);
}

.slide-content {
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}

.slide-intro {
  background: #05060a;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent, black 22%, black 78%, transparent);
}

.intro-content {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 4vw, 42px);
}

.cq-logo {
  display: block;
  width: min(680px, 78vw);
  max-height: 42vh;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 38px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 30px rgba(141, 92, 255, 0.24));
}

.present-text,
.kicker {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.9vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 5;
  width: 28px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  transform: translateX(-50%);
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  animation: scrollCue 1.6s ease-in-out infinite;
}

.slide-splash {
  background: #06070b;
}

.slide-comic {
  background: #05060a;
}

.slide-comic::before {
  display: none;
}

.comic-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #05060a;
  perspective: 1800px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.comic-stage::before,
.comic-stage::after {
  display: none;
}

.comic-stage::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5, 6, 10, 0.72), transparent);
}

.comic-stage::after {
  right: 0;
  background: linear-gradient(270deg, rgba(5, 6, 10, 0.72), transparent);
}

.comic-panel {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: #05060a;
  opacity: 0;
  transform: translateX(16%) rotateY(-10deg) scale(0.985);
  transform-origin: left center;
  transition:
    opacity 0.46s ease,
    transform 0.56s ease;
  pointer-events: none;
}

.comic-panel.is-active {
  z-index: 4;
  opacity: 1;
  transform: translateX(0) rotateY(0deg) scale(1);
}

.comic-panel.is-before {
  z-index: 3;
  opacity: 0;
  transform: translateX(-16%) rotateY(10deg) scale(0.985);
}

.comic-panel img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100svh;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.54));
}

.splash-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  filter: saturate(1.06) contrast(1.02);
}

.splash-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6, 6, 12, 0.04), rgba(6, 6, 12, 0.14) 62%, rgba(6, 6, 12, 0.5));
}

.splash-footer {
  position: absolute;
  left: clamp(18px, 4vw, 48px);
  bottom: clamp(18px, 4vw, 42px);
  z-index: 4;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.65);
}

h1,
h2 {
  margin: 0;
  font-family: "Orbitron", "Inter", sans-serif;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(141, 92, 255, 0.28);
}

h1 {
  max-width: 10ch;
  font-size: clamp(3.25rem, 10vw, 9.6rem);
}

h2 {
  font-size: clamp(3.1rem, 9vw, 8.6rem);
}

.slide-snauser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(28px, 5vw, 72px);
  background: #fff;
  color: #12131a;
}

.slide-snauser::before {
  display: none;
}

.video-stage {
  position: relative;
  z-index: 2;
  width: min(330px, 70vw);
  aspect-ratio: 9 / 16;
  max-height: 54svh;
  overflow: visible;
}

.snauser-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.meet-content {
  width: min(720px, 100%);
  text-align: center;
}

.meet-content .kicker {
  color: rgba(18, 19, 26, 0.62);
}

.meet-content h2 {
  color: #12131a;
  margin-top: 12px;
  font-size: clamp(2.4rem, 6.5vw, 6.1rem);
  line-height: 0.98;
  text-shadow: none;
}

.slide-rarities {
  padding: clamp(30px, 5vw, 70px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(225deg, rgba(94, 240, 255, 0.08), transparent 42%),
    #080911;
}

.rarity-content {
  display: grid;
  gap: 22px;
  justify-items: center;
}

.rarity-content h2 {
  font-size: 4.9rem;
}

.rarity-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px);
  width: min(1180px, 100%);
  margin-top: 14px;
}

.rarity-item {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 14px;
}

.rarity-card {
  position: relative;
  width: min(210px, 15vw);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #141620;
  animation: setCardFloat 5.2s ease-in-out infinite;
  animation-delay: calc(var(--rarity-index) * -0.55s);
  box-shadow:
    0 28px 48px rgba(0, 0, 0, 0.34),
    0 0 24px color-mix(in srgb, var(--rarity-accent), transparent 74%);
}

.rarity-card::before {
  display: none;
}

.rarity-card-art,
.rarity-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.rarity-frame {
  object-fit: fill;
}

.rarity-item h3 {
  margin: 0;
  color: var(--rarity-accent);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.slide-packs {
  padding: clamp(30px, 5vw, 70px);
  background:
    linear-gradient(135deg, rgba(127, 255, 216, 0.1), transparent 36%),
    linear-gradient(225deg, rgba(169, 112, 255, 0.12), transparent 42%),
    #080911;
}

.pack-content {
  display: grid;
  gap: 24px;
  justify-items: center;
}

.pack-content h2 {
  max-width: 12ch;
  font-size: 4.6rem;
}

.pack-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(22px, 5vw, 68px);
  width: min(1060px, 100%);
  margin-top: 10px;
}

.pack-item {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 14px;
  transform: translateY(26px) scale(0.96);
  transition:
    opacity 0.68s ease,
    transform 0.68s ease;
  transition-delay: calc(var(--pack-index) * 0.15s);
}

.slide.is-visible .pack-item {
  transform: translateY(0) scale(1);
}

.pack-image {
  display: block;
  width: min(240px, 25vw);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 34px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 18px color-mix(in srgb, var(--pack-accent), transparent 64%));
  animation: packFloat 4.8s ease-in-out infinite;
  animation-delay: calc(var(--pack-index) * -0.55s);
  transform-origin: center bottom;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.pack-item:hover .pack-image {
  transform: translateY(-8px) rotateZ(1.4deg) scale(1.03);
  filter:
    drop-shadow(0 34px 40px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 26px color-mix(in srgb, var(--pack-accent), transparent 44%));
}

.pack-copy {
  display: grid;
  gap: 6px;
  text-align: center;
}

.pack-copy h3,
.pack-copy p {
  margin: 0;
}

.pack-copy h3 {
  color: var(--pack-accent);
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pack-copy p {
  color: rgba(247, 248, 255, 0.76);
  font-size: 0.98rem;
  font-weight: 800;
}

.slide-shiny {
  padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(225deg, rgba(255, 203, 69, 0.16), transparent 42%),
    #07080d;
}

.shiny-content {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(30px, 6vw, 82px);
  text-align: left;
}

.shiny-card-stage {
  position: relative;
  width: min(390px, 78vw);
  aspect-ratio: 2 / 3;
  justify-self: end;
  overflow: visible;
  transform-style: preserve-3d;
  animation: shinyCardFloat 5.2s ease-in-out infinite;
}

.shiny-card-stage::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  background: linear-gradient(135deg, #f9f7ff, #ffca45, #5ef0ff);
  filter: blur(32px);
  opacity: 0.26;
}

.shiny-card-base,
.shiny-card-glow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.shiny-card-base {
  z-index: 1;
}

.shiny-card-glow {
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  filter: saturate(1.18) contrast(1.04);
  animation: shinyReveal 4.8s ease-in-out infinite;
}

.shiny-sweep {
  display: none;
}

.shiny-copy {
  display: grid;
  max-width: 650px;
  gap: 18px;
}

.shiny-copy .kicker {
  color: rgba(255, 255, 255, 0.72);
}

.shiny-copy h2 {
  color: #fff;
  font-size: 5.8rem;
}

.shiny-description {
  max-width: 560px;
  margin: 0;
  color: rgba(247, 248, 255, 0.82);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.35;
}

.slide-daily-spin {
  padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(255, 211, 111, 0.16), transparent 36%),
    linear-gradient(225deg, rgba(94, 240, 255, 0.1), transparent 44%),
    #080911;
}

.daily-spin-content {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 6vw, 82px);
}

.spin-copy {
  display: grid;
  gap: 20px;
  justify-items: start;
  text-align: left;
}

.daily-spin-title {
  display: block;
  width: min(430px, 78vw);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 38px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 24px rgba(255, 211, 111, 0.22));
}

.spin-description {
  max-width: 480px;
  margin: 0;
  color: rgba(247, 248, 255, 0.78);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
}

.spin-rule {
  max-width: 520px;
  margin: 0;
  color: #ffd36f;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.16;
  text-transform: uppercase;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.46);
}

.spin-wheel-stage {
  position: relative;
  width: min(500px, 78vw);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.38));
}

.spin-segments {
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  overflow: hidden;
  background:
    conic-gradient(
      from -22.5deg,
      #ffe071 0deg 45deg,
      #8defff 45deg 90deg,
      #ffc16d 90deg 135deg,
      #18223a 135deg 180deg,
      #f4fbff 180deg 225deg,
      #b58cff 225deg 270deg,
      #77f49b 270deg 315deg,
      #18223a 315deg 360deg
    );
  animation: spinWheelIdle 6.5s ease-in-out infinite;
}

.spin-segments::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(255, 255, 255, 0.62) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(45deg, transparent 49.4%, rgba(255, 255, 255, 0.46) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(135deg, transparent 49.4%, rgba(255, 255, 255, 0.46) 49.4% 50.6%, transparent 50.6%);
  opacity: 0.52;
  pointer-events: none;
}

.spin-prize {
  position: absolute;
  left: calc(50% - 37px);
  top: calc(50% - 37px);
  display: grid;
  width: 74px;
  height: 74px;
  align-content: center;
  justify-items: center;
  gap: 3px;
  transform:
    rotate(var(--slot-angle))
    translateY(-154px)
    rotate(calc(var(--slot-angle) * -1));
  transform-origin: center;
  z-index: 2;
}

.spin-prize img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
}

.spin-prize span {
  color: #101320;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46);
}

.spin-prize-skull span {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.spin-wheel-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.slide-go {
  padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(119, 244, 155, 0.12), transparent 34%),
    linear-gradient(225deg, rgba(94, 240, 255, 0.12), transparent 42%),
    #080911;
}

.go-content {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.go-copy {
  display: grid;
  gap: 18px;
  text-align: left;
}

.go-copy h2 {
  max-width: 11ch;
  color: #fff;
  font-size: 3.15rem;
  line-height: 1;
}

.go-description {
  max-width: 510px;
  margin: 0;
  color: rgba(247, 248, 255, 0.8);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.38;
}

.go-map-shell {
  position: relative;
  width: min(690px, 100%);
  aspect-ratio: 1.18;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #182333;
  box-shadow: 0 34px 60px rgba(0, 0, 0, 0.38);
}

.go-map {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.go-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 28px;
  color: rgba(247, 248, 255, 0.72);
  font-weight: 800;
  text-align: center;
}

.go-chest-marker,
.go-player-marker {
  display: grid;
  place-items: center;
  pointer-events: none;
}

.go-chest-marker img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 10px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 12px rgba(255, 211, 111, 0.4));
  animation: goChestPulse 2.8s ease-in-out infinite;
}

.go-chest-marker.is-collected img {
  opacity: 0;
  transform: translateY(-10px) scale(0.6);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.go-player-marker img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 16px 13px rgba(0, 0, 0, 0.34));
  animation: goPlayerWalk 0.82s ease-in-out infinite;
}

.leaflet-control-attribution {
  font-size: 10px;
}

.slide-sets {
  padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(177, 92, 255, 0.16), transparent 36%),
    linear-gradient(225deg, rgba(255, 202, 69, 0.14), transparent 44%),
    #080911;
}

.sets-content {
  display: grid;
  gap: clamp(22px, 4vw, 38px);
  justify-items: center;
}

.sets-copy {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.sets-copy h2 {
  color: #fff;
  font-size: 4.7rem;
}

.sets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 56px);
  width: min(1120px, 100%);
  perspective: 1200px;
}

.set-item {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 14px;
  transform-style: preserve-3d;
}

.set-card-art {
  position: relative;
  width: min(240px, 19vw);
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #141620;
  box-shadow:
    0 28px 48px rgba(0, 0, 0, 0.34),
    0 0 24px color-mix(in srgb, var(--set-accent), transparent 74%);
  animation: setCardFloat 5.2s ease-in-out infinite;
  animation-delay: calc(var(--set-index) * -0.45s);
}

.set-card-art::before {
  content: attr(data-fallback);
  position: absolute;
  inset: 12%;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Orbitron", "Inter", sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.set-card-art.has-image::before {
  display: none;
}

.set-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.set-card-art.has-image .set-image {
  opacity: 1;
}

.set-rarity-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.set-item h3 {
  margin: 0;
  color: var(--set-accent);
  font-size: 1.06rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.44);
}

.hidden-sets {
  margin: 2px 0 0;
  color: rgba(247, 248, 255, 0.78);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.slide-redeem {
  padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(94, 240, 255, 0.14), transparent 36%),
    linear-gradient(225deg, rgba(255, 211, 111, 0.14), transparent 44%),
    #080911;
}

.qr-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0.58;
  pointer-events: none;
}

.qr-card {
  position: absolute;
  left: var(--qr-x);
  top: -170px;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 18px;
  background: #fff url("./qr-code-background.png") center / cover no-repeat;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(94, 240, 255, 0.18);
  transform: rotate(var(--qr-rotate, -8deg));
  animation: qrFall var(--qr-duration) linear infinite;
  animation-delay: var(--qr-delay);
}

.qr-card::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) url("./QR-CodeLogo.png") center / 82% auto no-repeat;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.qr-code-b,
.qr-code-e {
  --qr-rotate: 7deg;
  width: 108px;
  opacity: 0.72;
}

.qr-code-c,
.qr-code-f {
  --qr-rotate: -13deg;
  width: 152px;
  opacity: 0.82;
}

.redeem-content {
  z-index: 3;
  display: grid;
  max-width: 820px;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

.redeem-content h2 {
  color: #fff;
  font-size: 6.2rem;
}

.redeem-main,
.redeem-secondary {
  margin: 0;
  font-weight: 900;
  line-height: 1.28;
}

.redeem-main {
  max-width: 760px;
  color: rgba(247, 248, 255, 0.88);
  font-size: 1.48rem;
}

.redeem-secondary {
  max-width: 660px;
  color: #ffd36f;
  font-size: 1.18rem;
  text-transform: uppercase;
}

.slide-dungeon {
  background: #06070b;
}

.slide-dungeon::before {
  display: none;
}

.dungeon-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dungeon-content {
  display: grid;
  max-width: 900px;
  gap: 18px;
  justify-items: center;
  align-self: start;
  margin-top: clamp(56px, 9vh, 96px);
  text-align: center;
  text-shadow:
    0 8px 20px rgba(0, 0, 0, 0.82),
    0 0 22px rgba(0, 0, 0, 0.58);
}

.dungeon-content h2 {
  color: #fff;
  font-size: 5.8rem;
}

.dungeon-description {
  max-width: 790px;
  margin: 0;
  color: rgba(247, 248, 255, 0.92);
  font-size: 1.38rem;
  font-weight: 900;
  line-height: 1.32;
}

.slide-thanks {
  background: #05060a;
}

.thanks-content {
  display: grid;
  gap: clamp(22px, 4vw, 42px);
  justify-items: center;
}

.thanks-logo {
  display: block;
  width: min(300px, 54vw);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 22px rgba(141, 92, 255, 0.2));
}

.thanks-content h2 {
  max-width: 11ch;
  color: #fff;
  font-size: 4.7rem;
}

.slide-twitch {
  padding: clamp(30px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(169, 112, 255, 0.22), transparent 36%),
    linear-gradient(225deg, rgba(145, 70, 255, 0.32), transparent 48%),
    #9146ff;
}

.slide-twitch::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(225deg, rgba(37, 14, 62, 0.22), transparent 44%),
    #9146ff;
}

.twitch-content {
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
  align-items: center;
  justify-content: center;
  max-width: 1480px;
  gap: clamp(20px, 3vw, 42px);
  margin-inline: auto;
  text-align: left;
}

.twitch-player {
  position: relative;
  width: min(1040px, 100%);
  justify-self: end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 8px;
  background: #1f0a35;
  box-shadow: 0 34px 70px rgba(37, 14, 62, 0.42);
}

.twitch-local-video,
.twitch-player-fallback {
  position: absolute;
  inset: 0;
}

.twitch-local-video {
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1f0a35;
}

.twitch-player-fallback {
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 900;
  text-transform: uppercase;
}

.twitch-copy {
  display: grid;
  gap: 16px;
  width: min(390px, 100%);
  justify-items: start;
}

.twitch-wordmark {
  display: block;
  width: min(300px, 58vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(37, 14, 62, 0.34));
}

.twitch-content h2 {
  color: #fff;
  font-size: 5.1rem;
  text-shadow: 0 12px 30px rgba(37, 14, 62, 0.38);
}

.twitch-description {
  max-width: 520px;
  margin: 0;
  color: #fff;
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.34;
  text-shadow: 0 8px 18px rgba(37, 14, 62, 0.34);
}

.slide-dots {
  position: fixed;
  top: 50%;
  right: 22px;
  z-index: 20;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
}

.sound-unlock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  background: rgba(8, 9, 17, 0.82);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.sound-unlock.is-visible {
  display: grid;
  place-items: center;
}

.dot {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.dot.is-active {
  background: #fff;
  transform: scale(1.35);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.44);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scale-in {
  transform: scale(0.92);
}

.title-pop {
  transform: translateY(24px) scale(0.96);
}

.slide.is-visible .reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.slide.is-visible .reveal:nth-child(2) {
  transition-delay: 0.12s;
}

.rarity-item.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition:
    opacity 0.62s ease,
    transform 0.62s ease;
  transition-delay: calc(var(--rarity-index) * 0.13s);
}

.slide.is-visible .rarity-item.reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pack-item.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition:
    opacity 0.68s ease,
    transform 0.68s ease;
  transition-delay: calc(var(--pack-index) * 0.15s);
}

.slide.is-visible .pack-item.reveal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes scrollCue {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 18px);
  }
}

@keyframes packFloat {
  0%,
  100% {
    transform: translateY(0) rotateZ(-0.8deg);
  }

  50% {
    transform: translateY(-7px) rotateZ(1deg);
  }
}

@keyframes shinyCardFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) rotateY(-5deg);
  }

  50% {
    transform: translateY(-8px) rotateX(3deg) rotateY(5deg);
  }
}

@keyframes shinyReveal {
  0%,
  18% {
    clip-path: inset(0 100% 0 0);
  }

  48%,
  72% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes spinWheelIdle {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

@keyframes goChestPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.04);
  }
}

@keyframes goPlayerWalk {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes setCardFloat {
  0%,
  100% {
    transform: translateY(0) rotateY(-4deg);
  }

  50% {
    transform: translateY(-8px) rotateY(5deg);
  }
}

@keyframes qrFall {
  0% {
    transform: translate3d(-22px, -180px, 0) rotate(var(--qr-rotate, -8deg));
  }

  50% {
    transform: translate3d(24px, 54vh, 0) rotate(calc(var(--qr-rotate, -8deg) * -1));
  }

  100% {
    transform: translate3d(-18px, 118vh, 0) rotate(var(--qr-rotate, -8deg));
  }
}

@media (max-width: 820px) {
  .splash-image,
  .dungeon-image {
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .slide-splash,
  .slide-dungeon {
    background: #05060a;
  }

  .splash-shade {
    background: linear-gradient(180deg, rgba(6, 6, 12, 0.02), rgba(6, 6, 12, 0.18));
  }

  .comic-stage::before,
  .comic-stage::after {
    width: 10vw;
  }

  .slide-snauser {
    gap: 18px;
    padding: 24px 20px;
  }

  .video-stage {
    width: min(280px, 74vw);
    max-height: 50svh;
    justify-self: center;
  }

  .meet-content h2 {
    font-size: clamp(2.25rem, 12vw, 4.5rem);
  }

  .slide-rarities {
    padding: 18px 14px;
  }

  .rarity-content {
    gap: 10px;
  }

  .rarity-content h2 {
    font-size: 2.05rem;
    line-height: 1;
  }

  .rarity-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    width: min(360px, 100%);
    margin-top: 4px;
  }

  .rarity-card {
    width: min(62px, 16vw);
  }

  .rarity-item h3 {
    font-size: 0.52rem;
    line-height: 1.05;
  }

  .slide-packs {
    padding: 26px 18px;
  }

  .pack-content {
    gap: 16px;
  }

  .pack-content h2 {
    font-size: 2.7rem;
  }

  .pack-row {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 360px;
  }

  .pack-item {
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 14px;
  }

  .pack-image {
    width: 116px;
  }

  .pack-copy {
    text-align: left;
  }

  .slide-shiny {
    padding: 28px 20px;
  }

  .shiny-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
    text-align: center;
  }

  .shiny-card-stage {
    width: min(260px, 68vw);
    justify-self: center;
  }

  .shiny-copy {
    justify-items: center;
    gap: 12px;
  }

  .shiny-copy h2 {
    font-size: 3.1rem;
  }

  .shiny-description {
    max-width: 340px;
    font-size: 1rem;
  }

  .slide-daily-spin {
    padding: 28px 20px;
  }

  .daily-spin-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
  }

  .spin-copy {
    justify-items: center;
    gap: 14px;
    text-align: center;
  }

  .daily-spin-title {
    width: min(320px, 76vw);
  }

  .spin-description {
    max-width: 340px;
    font-size: 1rem;
  }

  .spin-rule {
    max-width: 340px;
    font-size: 1.08rem;
  }

  .spin-wheel-stage {
    width: min(360px, 82vw);
  }

  .spin-prize {
    left: calc(50% - 27px);
    top: calc(50% - 27px);
    width: 54px;
    height: 54px;
    transform:
      rotate(var(--slot-angle))
      translateY(-108px)
      rotate(calc(var(--slot-angle) * -1));
  }

  .spin-prize img {
    width: 30px;
    height: 30px;
  }

  .spin-prize span {
    font-size: 0.68rem;
  }

  .slide-go {
    padding: 28px 18px;
  }

  .go-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
  }

  .go-copy {
    justify-items: center;
    text-align: center;
  }

  .go-copy h2 {
    max-width: 11ch;
    font-size: 2.2rem;
  }

  .go-description {
    max-width: 340px;
    font-size: 1rem;
  }

  .go-map-shell {
    width: min(420px, 100%);
    aspect-ratio: 0.84;
  }

  .go-chest-marker img {
    width: 42px;
    height: 42px;
  }

  .go-player-marker img {
    width: 60px;
    height: 60px;
  }

  .slide-sets {
    padding: 28px 18px;
  }

  .sets-content {
    gap: 18px;
  }

  .sets-copy h2 {
    font-size: 2.85rem;
  }

  .sets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
    max-width: 520px;
  }

  .set-card-art {
    width: min(180px, 40vw);
  }

  .set-card-art::before {
    font-size: 0.92rem;
  }

  .set-item h3 {
    font-size: 0.82rem;
  }

  .hidden-sets {
    max-width: 330px;
    font-size: 0.94rem;
  }

  .slide-redeem {
    padding: 28px 20px;
  }

  .qr-rain {
    opacity: 0.42;
  }

  .qr-card {
    width: 94px;
    border-width: 6px;
    border-radius: 14px;
  }

  .qr-code-c,
  .qr-code-f {
    width: 112px;
  }

  .redeem-content {
    gap: 14px;
  }

  .redeem-content h2 {
    font-size: 3.3rem;
  }

  .redeem-main {
    max-width: 340px;
    font-size: 1.06rem;
  }

  .redeem-secondary {
    max-width: 330px;
    font-size: 0.9rem;
  }

  .dungeon-content {
    max-width: 360px;
    gap: 14px;
    margin-top: 52px;
  }

  .dungeon-content h2 {
    font-size: 3rem;
  }

  .dungeon-description {
    max-width: 340px;
    font-size: 1rem;
  }

  .thanks-logo {
    width: min(220px, 58vw);
  }

  .thanks-content h2 {
    font-size: 2.9rem;
  }

  .twitch-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
    text-align: center;
  }

  .twitch-player {
    width: min(420px, 100%);
  }

  .twitch-copy {
    justify-items: center;
    gap: 12px;
  }

  .twitch-wordmark {
    width: min(210px, 54vw);
  }

  .twitch-content h2 {
    font-size: 3.1rem;
  }

  .twitch-description {
    max-width: 340px;
    font-size: 1rem;
  }

  .slide-dots {
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .comic-panel,
  .pack-image,
  .shiny-card-stage,
  .shiny-card-glow,
  .shiny-sweep,
  .spin-segments,
  .go-chest-marker img,
  .go-player-marker img,
  .set-card-art,
  .qr-card,
  .dot,
  .scroll-cue span {
    animation: none;
    transition: none;
  }

  .shiny-card-glow {
    clip-path: inset(0 0 0 0);
  }
}