:root {
  color-scheme: dark;
  --ink: #f4efdf;
  --acid: #e7d94a;
  --red: #e74d37;
  --black: #10100f;
  --panel: rgba(14, 14, 13, .91);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; background: var(--black); }

body { overflow: hidden; }

button { font: inherit; }

.game {
  position: relative;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: clip;
  background: #565139;
  color: var(--ink);
  isolation: isolate;
}

.scene-image {
  position: absolute;
  inset: 0;
  z-index: -5;
  background-position: center;
  background-size: cover;
  transition: opacity 1.2s cubic-bezier(.65,0,.2,1), filter 1.2s;
}

.scene-image--child { background-image: url("assets/background-child-v2.png"); opacity: 1; }
.scene-image--adult { background-image: url("assets/background-adult-v2.png"); opacity: 0; }
.scene-image--middle { background-image: url("assets/background-middle-v1.png"); opacity: 0; }
.scene-image--elder { background-image: url("assets/background-elder-v1.png"); opacity: 0; }

[data-scene="adult"] .scene-image--child { opacity: 0; }
[data-scene="adult"] .scene-image--adult { opacity: 1; }
[data-scene="middle"] .scene-image--child,
[data-scene="middle"] .scene-image--adult { opacity: 0; }
[data-scene="middle"] .scene-image--middle { opacity: 1; }
[data-scene="elder"] .scene-image--child,
[data-scene="elder"] .scene-image--adult,
[data-scene="elder"] .scene-image--middle { opacity: 0; }
[data-scene="elder"] .scene-image--elder { opacity: 1; }

.vignette {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58), transparent 28%, transparent 55%, rgba(0,0,0,.76)),
    radial-gradient(circle at 55% 45%, transparent 34%, rgba(0,0,0,.55) 115%);
  pointer-events: none;
}

.character {
  position: absolute;
  right: clamp(2rem, 9vw, 9rem);
  bottom: -3.5vh;
  z-index: -3;
  width: auto;
  height: min(93vh, 62rem);
  max-width: 48vw;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(1.2rem 1rem 1.5rem rgba(0, 0, 0, .58));
  transform-origin: bottom center;
  transition: opacity 1.05s cubic-bezier(.65,0,.2,1), transform 1.05s cubic-bezier(.65,0,.2,1), right 1.2s cubic-bezier(.65,0,.2,1), height 1.2s cubic-bezier(.65,0,.2,1), filter 1.05s;
  pointer-events: none;
}

.character--child,
.character--child-facing { transform: translateX(0) scale(.94); }

.character--adult,
.character--adult-facing,
.character--middle,
.character--middle-facing,
.character--elder,
.character--elder-facing { opacity: 0; transform: translateX(2rem) scale(.97); }

.character--child { opacity: 1; }
.character--child-facing { opacity: 0; }

.is-addressing .character--child { opacity: 0; }
.is-addressing .character--child-facing { opacity: 1; }

[data-scene="adult"] .character--child,
[data-scene="adult"] .character--child-facing { opacity: 0; transform: translateX(-1.5rem) scale(.96); }

[data-scene="adult"] .character--adult { opacity: 1; transform: translateX(0) scale(1); }
[data-scene="adult"] .character--adult-facing { opacity: 0; transform: translateX(0) scale(1); }
[data-scene="adult"].is-addressing .character--adult { opacity: 0; }
[data-scene="adult"].is-addressing .character--adult-facing { opacity: 1; }

[data-scene="middle"] .character--child,
[data-scene="middle"] .character--child-facing,
[data-scene="middle"] .character--adult,
[data-scene="middle"] .character--adult-facing { opacity: 0; transform: translateX(-1.5rem) scale(.96); }

[data-scene="middle"] .character--middle { opacity: 1; transform: translateX(0) scale(1); }
[data-scene="middle"] .character--middle-facing { opacity: 0; transform: translateX(0) scale(1); }
[data-scene="middle"].is-addressing .character--middle { opacity: 0; }
[data-scene="middle"].is-addressing .character--middle-facing { opacity: 1; }

[data-scene="elder"] .character--child,
[data-scene="elder"] .character--child-facing,
[data-scene="elder"] .character--adult,
[data-scene="elder"] .character--adult-facing,
[data-scene="elder"] .character--middle,
[data-scene="elder"] .character--middle-facing { opacity: 0; transform: translateX(-1.5rem) scale(.96); }

[data-scene="elder"] .character--elder { opacity: 1; transform: translateX(0) scale(1); }
[data-scene="elder"] .character--elder-facing { opacity: 0; transform: translateX(0) scale(1); }
[data-scene="elder"].is-addressing .character--elder { opacity: 0; }
[data-scene="elder"].is-addressing .character--elder-facing { opacity: 1; }

.memory-child {
  position: absolute;
  right: clamp(1rem, 6vw, 6rem);
  bottom: -2vh;
  z-index: -3;
  height: min(75vh, 49rem);
  max-width: 34vw;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  filter: drop-shadow(1rem 1rem 1.4rem rgba(0,0,0,.6));
  transform: translateX(4rem) scaleX(-1);
  transform-origin: bottom center;
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

[data-scene="elder"].is-memory .character--elder,
[data-scene="elder"].is-memory .character--elder-facing {
  right: 48vw;
  height: min(86vh, 57rem);
}

[data-scene="elder"].is-memory .memory-child {
  opacity: .96;
  transform: translateX(0) scaleX(-1);
}

.is-memory .stage-copy { opacity: 0; transform: translateX(-1rem); }

.noise {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: static-shift .16s steps(2) infinite;
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding: clamp(1rem, 3vw, 2.5rem);
}

h1 {
  margin: 0;
  font-family: SimSun, "Songti SC", serif;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-shadow: 0 2px 18px #000;
}

h1 span { color: var(--acid); }

.stage-copy {
  position: absolute;
  top: 20%;
  left: clamp(1.25rem, 7vw, 8rem);
  max-width: 28rem;
  text-shadow: 0 3px 25px #000;
  transition: opacity .45s, transform .45s;
}

.stage-copy .chapter {
  margin: 0 0 .4rem;
  font-size: clamp(.8rem, 1.3vw, 1rem);
  letter-spacing: .15em;
}

.stage-copy .age {
  margin: 0;
  font: 900 clamp(4.5rem, 12vw, 10rem)/.9 Impact, sans-serif;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.78);
  opacity: .74;
}

.question {
  position: absolute;
  left: 50%;
  bottom: clamp(5rem, 13vh, 8.5rem);
  min-width: min(88vw, 24rem);
  padding: 1.05rem 2rem .9rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: rgba(15,15,14,.82);
  box-shadow: 8px 8px 0 var(--red);
  transform: translateX(-50%) rotate(-.6deg);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
  animation: question-breathe 2.6s ease-in-out infinite;
}

.question:hover,
.question:focus-visible {
  outline: none;
  background: var(--ink);
  color: var(--black);
  transform: translate(-50%, -4px) rotate(.5deg);
  box-shadow: 11px 12px 0 var(--red);
}

.question span { display: block; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 900; }
.question small { display: block; margin-top: .25rem; font-size: .72rem; opacity: .64; }
.question[hidden] { display: none; }

.dialogue {
  position: absolute;
  left: 50%;
  bottom: clamp(3.7rem, 6vh, 5rem);
  width: min(90vw, 58rem);
  min-height: 9.5rem;
  padding: 2.25rem clamp(1.25rem, 4vw, 3.3rem) 1.4rem;
  border: 1px solid rgba(255,255,255,.5);
  background: var(--panel);
  box-shadow: 13px 13px 0 rgba(231,77,55,.75), 0 -20px 70px rgba(0,0,0,.25);
  transform: translate(-50%, 130%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .4s;
  cursor: pointer;
}

.dialogue.is-open { transform: translate(-50%, 0); opacity: 1; }

.speaker {
  position: absolute;
  top: -1rem;
  left: 1.4rem;
  padding: .55rem 1.5rem;
  color: var(--black);
  background: var(--acid);
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--red);
  transform: rotate(-1deg);
}

.dialogue p {
  min-height: 3.4rem;
  margin: 0;
  font-family: SimSun, "Songti SC", serif;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.75;
  letter-spacing: .04em;
}

.dialogue p::after {
  content: "▋";
  display: inline;
  color: var(--acid);
  animation: caret .8s steps(1) infinite;
}

.advance {
  float: right;
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  color: rgba(255,255,255,.65);
  background: none;
  cursor: pointer;
  font-size: .75rem;
}

.advance i {
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--acid);
  border-bottom: 2px solid var(--acid);
  transform: rotate(45deg);
  animation: arrow 1s ease-in-out infinite;
}

.time-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  gap: 1rem;
  color: var(--ink);
  background: var(--black);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s;
}

.time-card.is-visible { opacity: 1; visibility: visible; }
.time-card span { color: var(--acid); font-weight: 900; letter-spacing: .5em; }
.time-card strong { font: 900 clamp(4rem, 15vw, 10rem)/1 Impact, sans-serif; letter-spacing: .06em; }

.ending {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #050505;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2.1s ease, background-color .9s ease, visibility 0s linear 2.1s;
}

.ending.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 2.1s ease, background-color .9s ease;
}

.ending-message {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 2rem;
  transition: opacity .65s ease, transform .65s ease;
}

.ending p {
  margin: 0;
  color: rgba(244,239,223,.92);
  font-family: SimSun, "Songti SC", serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: .14em;
  text-align: center;
}

.ending.is-writing p::after {
  content: "▋";
  color: var(--acid);
  animation: caret .8s steps(1) infinite;
}

.egg-trigger {
  min-width: 8rem;
  padding: .8rem 1.8rem;
  border: 2px solid var(--acid);
  color: var(--acid);
  background: transparent;
  box-shadow: 6px 6px 0 rgba(231,77,55,.78);
  font-weight: 900;
  letter-spacing: .3em;
  text-indent: .3em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(1rem) rotate(-1deg);
  transition: opacity .7s ease, transform .7s ease, color .2s, background .2s;
}

.egg-trigger[hidden] { display: none; }
.egg-trigger.is-visible { opacity: 1; transform: translateY(0) rotate(-1deg); }
.egg-trigger:hover,
.egg-trigger:focus-visible {
  outline: none;
  color: #050505;
  background: var(--acid);
  transform: translateY(-3px) rotate(.5deg);
}

.egg-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s ease .25s, transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;
  pointer-events: none;
}

.egg-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(94vw, 62rem);
  max-height: 92vh;
  object-fit: contain;
  filter: drop-shadow(0 1.4rem 3rem rgba(0,0,0,.75));
}

.ending.is-egg-open .ending-message {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
}

.ending.is-egg-open { background-color: #fff; }

.ending.is-egg-open .egg-art {
  z-index: 3;
  opacity: 1;
  transform: scale(1);
}

footer {
  position: absolute;
  inset: auto clamp(1rem, 3vw, 2.5rem) 1.1rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  letter-spacing: .06em;
}

footer button {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
}

.is-transitioning .scene-image,
.is-transitioning .vignette,
.is-transitioning .character { filter: contrast(2) grayscale(1); }

.is-transitioning::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.13) 5px 6px);
  animation: glitch .1s steps(2) infinite;
}

@keyframes caret { 50% { opacity: 0; } }
@keyframes arrow { 50% { transform: translateY(4px) rotate(45deg); } }
@keyframes question-breathe { 50% { box-shadow: 11px 11px 0 rgba(231,77,55,.72); } }
@keyframes static-shift { 50% { transform: translate(1px, -1px); } }
@keyframes glitch { 50% { transform: translateX(3px); opacity: .6; } }

@media (max-width: 640px) {
  .scene-image { background-position: 62% center; }
  .character {
    right: -16vw;
    bottom: 0;
    height: 78vh;
    max-width: none;
  }
  .topbar { padding: 1rem; }
  .stage-copy { top: 18%; left: 1.2rem; }
  .stage-copy .age { font-size: 4.2rem; }
  .dialogue { bottom: 4rem; min-height: 10.5rem; }
  .dialogue p { font-size: 1.08rem; line-height: 1.65; }
  [data-scene="elder"].is-memory .character--elder,
  [data-scene="elder"].is-memory .character--elder-facing {
    right: 42vw;
    height: 68vh;
  }
  .memory-child {
    right: -16vw;
    height: 63vh;
    max-width: none;
  }
  .ending-message { gap: 1.5rem; }
  .egg-art { padding: .75rem; }
  .egg-art img { max-width: 98vw; max-height: 88vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}