:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #cdfafa;
  overscroll-behavior: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #cdfafa;
}

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.story {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 38%;
  background: #cdfafa;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  background: #cdfafa;
  opacity: 0;
  visibility: hidden;
  transform: rotateX(0deg) translateZ(0);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.slide.is-active,
.slide.is-under,
.slide.is-turning {
  opacity: 1;
  visibility: visible;
}

.game-slide.is-active,
.game-slide.is-under,
.game-slide.is-turning {
  pointer-events: auto;
}

.slide.is-active {
  z-index: 2;
}

.slide.is-under {
  z-index: 1;
}

.slide.turn-forward {
  z-index: 3;
  animation: turn-forward 820ms cubic-bezier(.62, .02, .22, 1) both;
}

.slide.turn-back {
  z-index: 3;
  animation: turn-back 820ms cubic-bezier(.22, 1, .36, 1) both;
}

.slide > img {
  display: block;
  width: min(100vw, calc(100vh * 750 / 1624));
  width: min(100vw, calc(100dvh * 750 / 1624));
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: 750 / 1624;
  object-fit: contain;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}

.video-slide video {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: contain;
  object-position: 50% 50%;
  background: #cdfafa;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 750px;
  height: 1624px;
  overflow: hidden;
  isolation: isolate;
  background: #caf9f6;
  touch-action: none;
  user-select: none;
  transform-origin: center center;
}

.background,
.pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.background { overflow: hidden; z-index: 0; }
.shape { position: absolute; display: block; background: #f3a7d6; }
.shape-a { width: 570px; height: 960px; left: -184px; top: 430px; clip-path: polygon(0 0, 100% 12%, 52% 100%); transform-origin: top left; }
.shape-b { width: 360px; height: 700px; left: 246px; top: 66px; clip-path: polygon(88% 0, 62% 100%, 0 82%); }
.shape-c { width: 450px; height: 420px; right: -310px; top: 595px; clip-path: polygon(0 0, 100% 31%, 20% 100%); }
.shape-d { width: 430px; height: 550px; right: -85px; bottom: -270px; clip-path: polygon(78% 0, 100% 100%, 0 100%); }

.vessel {
  position: absolute;
  z-index: 2;
  left: 25px;
  top: 450px;
  width: 700px;
  height: 724px;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.vessel.dragging { cursor: grabbing; }
.vessel > img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.grab-hint { position: absolute; left: 50%; top: 22px; translate: -50% 0; color: rgba(255,255,255,.84); font-size: 22px; font-weight: 800; letter-spacing: 2px; opacity: 0; transition: opacity .25s; text-shadow: 0 2px 8px rgba(135,102,125,.2); pointer-events: none; }
.vessel:hover .grab-hint { opacity: .72; }
.star { position: absolute; line-height: 1; pointer-events: none; font-size: 72px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.22)); }
.star-pink { color: #f45bab; left: 418px; top: 228px; transform: rotate(8deg); }
.star-white { color: #fff; font-size: 70px; }
.star-left { left: 54px; top: 330px; transform: rotate(-12deg); }
.star-right { right: 36px; top: 368px; transform: rotate(14deg); }
.star-bottom { left: 170px; top: 560px; transform: rotate(-6deg); }

.piece {
  position: absolute;
  z-index: 3;
  transform-origin: 50% 55%;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 5px 5px rgba(100, 78, 99, .08));
}

.piece.escaped { filter: drop-shadow(0 8px 8px rgba(100, 78, 99, .16)); }
.restart { position: absolute; z-index: 6; left: 50%; top: 1505px; width: 214px; height: 64px; translate: -50% 0; border: 0; border-radius: 999px; background: #f78bc9; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 7px 0 rgba(231, 99, 173, .16); transition: transform .12s, filter .12s; }
.restart:active { transform: translateY(5px) scale(.98); filter: brightness(.97); box-shadow: 0 2px 0 rgba(231,99,173,.16); }
.restart:focus-visible { outline: 5px solid #fff; outline-offset: 5px; }
.restart svg { width: 48px; height: 48px; fill: none; stroke: white; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes turn-forward {
  0% {
    transform: rotateX(0deg) translateZ(0);
    filter: brightness(1);
  }
  58% {
    opacity: 1;
    filter: brightness(.78);
  }
  100% {
    opacity: 0;
    transform: rotateX(-105deg) translateZ(0);
    filter: brightness(.62);
  }
}

@keyframes turn-back {
  0% {
    opacity: 0;
    transform: rotateX(-105deg) translateZ(0);
    filter: brightness(.62);
  }
  42% {
    opacity: 1;
    filter: brightness(.8);
  }
  100% {
    transform: rotateX(0deg) translateZ(0);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .piece,
  .vessel {
    will-change: auto;
  }

  .slide.turn-forward,
  .slide.turn-back {
    animation-duration: 1ms;
  }
}