.scene--cover {
  color: #fff6db;
  background:
    linear-gradient(180deg, rgba(59, 12, 9, 0.22), rgba(59, 12, 9, 0.74)),
    url("../assets/lion-dance-bg.png") center / cover no-repeat;
}

.scene--cover .scene__text {
  color: #fff6db;
  background: rgba(56, 13, 10, 0.72);
  border-color: rgba(255, 225, 145, 0.34);
}

.scene--cover .scene__text h1 {
  color: #ffe7a4;
  font-size: clamp(3.4rem, 18vw, 7rem);
}

.scene--cover .scene__text p { color: #fff0c4; }

.scene--reporter {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 224, 147, 0.42), transparent 34rem),
    linear-gradient(180deg, #fff4db, #ffe6b5 64%, #7a1a14);
}

.scene--reporter .scene-visual--cover {
  background: transparent;
}

.scene--qa {
  background:
    linear-gradient(180deg, rgba(255, 247, 225, 0.94), rgba(255, 229, 178, 0.92)),
    url("../assets/lion-dance-bg.png") center / cover no-repeat;
}

.scene-visual {
  margin: 0;
  min-height: 0;
  padding: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 160, 0.66), transparent 45%),
    linear-gradient(135deg, rgba(181, 34, 27, 0.12), rgba(13, 117, 107, 0.12));
}

.scene-visual img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34svh;
  object-fit: contain;
  animation: floatVisual 4.8s ease-in-out infinite;
}

.scene-visual--cover img {
  max-width: min(82%, 420px);
  max-height: 30svh;
}

.scene-visual:not(.scene-visual--cover) img {
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(76, 20, 12, 0.16);
}

.scene--ending,
.scene--finale {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 220, 124, 0.35), transparent 36rem),
    linear-gradient(180deg, #fff6e4, #ffe1a5 72%, #741a14);
}

.scene--ending .scene__text,
.scene--finale .scene__text {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 238, 186, 0.88)),
    repeating-linear-gradient(-12deg, transparent 0 18px, rgba(181, 34, 27, 0.06) 18px 26px);
}

.scene--ending .scene-visual img {
  max-height: min(24svh, 180px);
}

.scene--ending .scene__text h1 {
  font-size: clamp(1.72rem, 6.2vw, 3.35rem);
}

.scene--ending .scene__text p {
  font-size: clamp(0.82rem, 2.6vw, 1rem);
  line-height: 1.5;
}

.scene--finale .scene-visual img {
  max-height: min(36svh, 320px);
}

.scene-visual--drawing {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 235, 178, 0.72), transparent 52%),
    linear-gradient(135deg, rgba(255, 252, 239, 0.96), rgba(244, 219, 166, 0.86));
}

.scene-visual--drawing img {
  width: auto;
  max-width: 100%;
  max-height: min(36svh, 320px);
  object-fit: contain;
  animation: none;
}

.scene.is-complete .scene__text {
  box-shadow: 0 0 0 2px rgba(224, 164, 56, 0.28), var(--shadow);
}

.qa-card {
  min-height: 25svh;
  max-height: 38svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(99, 18, 15, 0.18);
  background: rgba(255, 250, 238, 0.92);
  box-shadow: var(--shadow);
}

.qa-card h2 {
  margin: 0;
  color: var(--deep-red);
  font-size: clamp(1.28rem, 5.8vw, 1.85rem);
  line-height: 1.5;
}

.typewriter-question::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--deep-red);
  animation: cursorBlink 0.9s steps(1) infinite;
}

.unlock-slider {
  --unlock-progress: 0;
  position: relative;
  height: 58px;
  border-radius: 999px;
  padding: 6px;
  overflow: hidden;
  background: rgba(70, 18, 13, 0.18);
  box-shadow: inset 0 0 0 1px rgba(99, 18, 15, 0.2), var(--shadow);
}

.unlock-slider::before {
  content: "";
  position: absolute;
  inset: 6px;
  width: calc((100% - 12px) * var(--unlock-progress));
  border-radius: 999px;
  background: linear-gradient(90deg, #f0bd4a, #b5221b);
}

.unlock-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(99, 18, 15, 0.72);
  font-weight: 900;
  pointer-events: none;
}

.unlock-thumb {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff8df;
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--deep-red), var(--red));
  box-shadow: 0 10px 20px rgba(75, 20, 13, 0.28);
  touch-action: none;
}

.letter-stage {
  position: relative;
  height: min(46svh, 430px);
  min-height: 310px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 238, 172, 0.68), transparent 36%),
    linear-gradient(180deg, #6b1712, #2c0907);
  box-shadow: var(--shadow);
}

.envelope-button {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 2;
  width: min(78%, 420px);
  aspect-ratio: 1.62 / 1;
  transform: translateX(-50%);
  background: transparent;
}

.envelope-body,
.envelope-lid {
  position: absolute;
  inset: auto 0 0;
  height: 66%;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(135deg, #f7c668, #dc8d2f);
  box-shadow: inset 0 0 0 3px rgba(100, 18, 15, 0.25);
}

.envelope-body {
  z-index: 4;
}

.envelope-lid {
  z-index: 6;
  inset: 0 0 auto;
  height: 58%;
  clip-path: polygon(0 0, 50% 82%, 100% 0);
  border-radius: 8px 8px 0 0;
  transform-origin: top;
  transition: transform 0.35s ease;
}

.letter-stage.is-open .envelope-lid {
  transform: rotateX(58deg);
}

.envelope-thumbs {
  position: absolute;
  left: 50%;
  bottom: 48%;
  z-index: 5;
  width: 82%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  transform: translateX(-50%);
}

.envelope-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff8e8;
  border: 3px solid #fff8e8;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(45, 10, 7, 0.25);
}

.photo-popups img {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 8;
  width: min(62%, 260px);
  max-height: 70%;
  object-fit: contain;
  border: 6px solid #fff8e8;
  border-radius: 6px;
  background: #fff8e8;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65) rotate(-5deg);
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.28);
}

.photo-popups img:nth-child(2) {
  transform: translate(-50%, -50%) scale(0.65) rotate(4deg);
}

.photo-popups img:nth-child(3) {
  transform: translate(-50%, -50%) scale(0.65) rotate(-1deg);
}

.photo-popups img.is-visible {
  opacity: 1;
}

.photo-popups img:nth-child(1).is-visible {
  transform: translate(-74%, -62%) scale(0.84) rotate(-7deg);
}

.photo-popups img:nth-child(2).is-visible {
  transform: translate(-50%, -50%) scale(0.88) rotate(3deg);
}

.photo-popups img:nth-child(3).is-visible {
  transform: translate(-26%, -36%) scale(0.84) rotate(-2deg);
}

.photo-popups img.is-featured,
.photo-popups img:nth-child(1).is-featured,
.photo-popups img:nth-child(2).is-featured,
.photo-popups img:nth-child(3).is-featured {
  z-index: 20;
  width: min(80%, 520px);
  max-height: 82%;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: opacity 0.28s ease, transform 0.32s ease, width 0.32s ease;
}

.letter-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: 0;
  color: #fff3c9;
  text-align: center;
  font-weight: 900;
  font-size: 0.9rem;
}

@keyframes floatVisual {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

@media (min-width: 760px) {
  .scene--ending .scene__inner {
    gap: 10px;
  }

  .scene--ending .scene__text {
    padding: 13px 15px;
  }

  .scene--ending .scene__text h1 {
    font-size: clamp(1.8rem, 4.6vw, 2.6rem);
  }

  .scene--ending .scene__text p {
    margin-top: 0.55rem;
    font-size: 0.94rem;
    line-height: 1.48;
  }
}