/* --------------------------------------------------------------------------
   1. CUTSCENE CHIẾN THẮNG: HỘP QUÀ BÍ MẬT & MÀN ĐEN NHIỄU (VICTORY)
   -------------------------------------------------------------------------- */
#screen-game-victory-pending.is-active {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #321458 0%, #1c0a34 50%, #0d041c 100%);
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}

.victory-bg-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255, 140, 0, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(157, 78, 221, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.victory-sparks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.victory-sparks-layer .spark {
  position: absolute;
  color: #ffd166;
  font-size: 1.25rem;
  opacity: 0.6;
  animation: sparkFloat 3.5s ease-in-out infinite alternate;
}

.victory-sparks-layer .s1 {
  top: 12%;
  left: 15%;
  animation-delay: 0s;
  font-size: 1.4rem;
  color: #ff9e00;
}

.victory-sparks-layer .s2 {
  top: 22%;
  right: 18%;
  animation-delay: 0.7s;
  font-size: 1rem;
  color: #e0aaff;
}

.victory-sparks-layer .s3 {
  bottom: 25%;
  left: 20%;
  animation-delay: 1.4s;
  font-size: 1.6rem;
  color: #ffe890;
}

.victory-sparks-layer .s4 {
  bottom: 18%;
  right: 15%;
  animation-delay: 2.1s;
  font-size: 1.2rem;
  color: #ffaa00;
}

.victory-sparks-layer .s5 {
  top: 45%;
  left: 8%;
  animation-delay: 1s;
  font-size: 1.3rem;
  color: #c77dff;
}

@keyframes sparkFloat {
  0% {
    transform: translateY(0) scale(0.9);
    opacity: 0.4;
  }

  100% {
    transform: translateY(-12px) scale(1.15);
    opacity: 0.95;
  }
}

.victory-stage-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1.2vh, 0.75rem);
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: 620px;
  max-height: calc(100dvh - var(--header-height) - 1rem);
  padding: clamp(0.4rem, 1.2vh, 0.85rem) 1.2rem;
  margin: auto;
  position: relative;
  box-sizing: border-box;
}

/* Nhân vật chú ma nhỏ thân thiện chúc mừng */
.victory-ghost-host {
  position: relative;
  width: clamp(70px, 13vh, 120px);
  height: clamp(70px, 13vh, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: victoryGhostFloat 3.2s ease-in-out infinite alternate;
}

@keyframes victoryGhostFloat {
  0% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-8px) rotate(2deg);
  }

  100% {
    transform: translateY(-14px) rotate(-1deg);
  }
}

.ghost-halo-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 50, 0.45) 0%, rgba(200, 100, 255, 0.2) 50%, transparent 75%);
  filter: blur(10px);
  z-index: 1;
}

.victory-ghost-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(255, 170, 0, 0.45));
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
}

/* Khung thông điệp chúc mừng */
.victory-message-card {
  background: rgba(30, 12, 52, 0.82);
  border: 1.5px solid rgba(255, 185, 60, 0.45);
  border-radius: 20px;
  padding: clamp(0.5rem, 1.2vh, 0.9rem) clamp(0.8rem, 2vw, 1.4rem);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 120, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 540px;
  width: 100%;
  box-sizing: border-box;
}

.victory-card-badge {
  display: inline-flex;
  gap: 0.35rem;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.victory-main-title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(1.4rem, 4vw, 1.95rem);
  font-weight: 700;
  color: #ffd166;
  text-shadow: 0 0 14px rgba(255, 160, 0, 0.65), 0 2px 4px rgba(0, 0, 0, 0.8);
  margin: 0 0 0.4rem 0;
  letter-spacing: 0.02em;
}

.victory-speech-text {
  font-family: var(--font-body, 'Fredoka', sans-serif);
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  line-height: 1.5;
  color: #f3e8ff;
  margin: 0;
}

.victory-speech-text strong {
  color: #ffaa00;
  font-weight: 600;
}

/* Hộp quà bí mật 3D tương tác */
.gift-box-wrap {
  position: relative;
  width: clamp(80px, 16vh, 160px);
  height: clamp(80px, 16vh, 160px);
  margin: 0.15rem auto;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gift-box-wrap:hover:not(.is-disabled) {
  transform: scale(1.08) translateY(-4px);
}

.gift-box-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(170, 110, 240, 0.45));
  animation: giftPulse 2.2s ease-in-out infinite alternate;
}

@keyframes giftPulse {
  0% {
    filter: drop-shadow(0 6px 16px rgba(170, 110, 240, 0.3)) brightness(1);
    transform: translateY(0);
  }

  100% {
    filter: drop-shadow(0 14px 32px rgba(255, 195, 45, 0.65)) brightness(1.12);
    transform: translateY(-6px);
  }
}

.gift-sparkles-orbit {
  position: absolute;
  inset: -15px;
  pointer-events: none;
  animation: orbitRotate 8s linear infinite;
}

@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.gift-sparkles-orbit .orb-spark {
  position: absolute;
  font-size: 1.1rem;
}

.gift-sparkles-orbit .p1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.gift-sparkles-orbit .p2 {
  bottom: 10%;
  left: 5%;
}

.gift-sparkles-orbit .p3 {
  bottom: 10%;
  right: 5%;
}

/* Tia sáng khi mở nắp hộp */
.gift-rays-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 160, 0.95) 0%, rgba(220, 140, 255, 0.6) 45%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.5s ease;
  z-index: 3;
}

.gift-box-wrap.is-opening .gift-rays-burst {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 1;
}

.gift-box-wrap.is-opening {
  animation: giftOpenShake 0.45s ease-in-out infinite alternate !important;
}

@keyframes giftOpenShake {
  0% {
    transform: scale(1.1) rotate(-4deg);
  }

  50% {
    transform: scale(1.15) rotate(4deg);
  }

  100% {
    transform: scale(1.12) rotate(-2deg);
  }
}

/* Nút Mở quà cuối cùng nổi bật theo TASK 04A */
.victory-actions-wrap {
  margin-top: 0.25rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-open-final-gift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: clamp(0.5rem, 1.4vh, 0.85rem) clamp(1.2rem, 3vw, 2.2rem);
  background: linear-gradient(135deg, #ff8500 0%, #ff5400 50%, #e63946 100%);
  color: #ffffff;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(0.88rem, 2vh, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid rgba(255, 220, 120, 0.6);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255, 84, 0, 0.55), 0 0 16px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.btn-open-final-gift:hover:not(:disabled) {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 84, 0, 0.75), 0 0 24px rgba(255, 215, 0, 0.5);
  border-color: #ffe6a7;
}

.btn-open-final-gift:active:not(:disabled) {
  transform: scale(0.98) translateY(1px);
}

.btn-open-final-gift:disabled,
.btn-open-final-gift.is-opening {
  opacity: 0.85;
  cursor: not-allowed;
  filter: brightness(1.1);
  animation: btnPulseGlow 0.4s ease-in-out infinite alternate;
}

@keyframes btnPulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(255, 84, 0, 0.4);
  }

  100% {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(255, 84, 0, 0.8);
  }
}

.btn-open-final-gift .gift-btn-icon {
  font-size: 1.35rem;
}

.btn-open-final-gift .gift-btn-sparkle {
  font-size: 1.1rem;
}

/* Lớp chớp tối màn hình ngắn trước khi bung Jumpscare (TASK 04A) */
.victory-blackout-flash {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in;
}

.victory-blackout-flash.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Nút Thử lại khi thua do bom */
.bomb-retry-btn {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 20px rgba(255, 50, 50, 0.5);
}

.cutscene-glitch-screen.is-active {
  opacity: 1;
  pointer-events: auto;
}

.glitch-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 2px,
      rgba(0, 0, 0, 0.6) 2px,
      rgba(0, 0, 0, 0.6) 4px);
  pointer-events: none;
  animation: scanlineScroll 0.8s linear infinite;
}

@keyframes scanlineScroll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 16px;
  }
}

.glitch-text-alert {
  position: relative;
  color: #ff2a4b;
  font-family: var(--font-display, monospace);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(255, 42, 75, 0.8), 2px 2px #00ffff, -2px -2px #ff00de;
  animation: glitchShake 0.18s infinite alternate;
  padding: 0 1.5rem;
}

@keyframes glitchShake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-3px, 2px);
  }

  50% {
    transform: translate(3px, -1px);
  }

  75% {
    transform: translate(-2px, -2px);
  }

  100% {
    transform: translate(2px, 1px);
  }
}


/* --------------------------------------------------------------------------
   2. CUTSCENE THẤT BẠI: NHIỄU TÍM ĐỎ SỰ CỐ (BOMB DEFEAT)
   -------------------------------------------------------------------------- */
#screen-game-bomb-pending.is-active {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #350820 0%, #1a0410 60%, #0d0208 100%);
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}

.bomb-screen-shake {
  animation: intenseShake 0.4s ease-out;
}

@keyframes intenseShake {
  0% {
    transform: translate(0, 0) scale(1);
  }

  15% {
    transform: translate(-10px, 8px) scale(1.02);
  }

  30% {
    transform: translate(12px, -8px) scale(0.99);
  }

  50% {
    transform: translate(-8px, 6px) scale(1.01);
  }

  75% {
    transform: translate(6px, -4px) scale(1);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.bomb-glitch-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #350820 0%, #0d0208 100%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bomb-glitch-screen.is-active {
  opacity: 1;
  pointer-events: auto;
}

.bomb-glitch-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      rgba(255, 0, 85, 0.15) 0px,
      rgba(255, 0, 85, 0.15) 3px,
      rgba(40, 5, 20, 0.8) 3px,
      rgba(40, 5, 20, 0.8) 6px);
  pointer-events: none;
  animation: scanlineScroll 0.5s linear infinite;
}

.bomb-alert-text {
  position: relative;
  color: #ff3366;
  font-family: var(--font-display, monospace);
  font-size: clamp(1.3rem, 3.8vw, 2.2rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 0 0 16px rgba(255, 51, 102, 0.9), -3px 0 #00ffff, 3px 0 #ffe600;
  animation: glitchShake 0.14s infinite alternate;
  padding: 0 1.5rem;
}


/* --------------------------------------------------------------------------
   3. GIAO DIỆN CHUNG CHO 3 MÀN HÌNH KHU RỪNG (SCREENS 2A, 2B, 2C)
   -------------------------------------------------------------------------- */
.forest-screen {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.forest-screen.is-active {
  display: block;
  opacity: 1;
  position: relative;
  animation: forestScreenCrossFade 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes forestScreenCrossFade {
  0% {
    opacity: 0.2;
    filter: brightness(1.05);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* Lớp ảnh nền rừng */
.forest-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;
  z-index: 1;
}

/* Nền Cảnh 2A (forest-cute) - Con đường đá cổ tích dẫn sâu vào rừng thần tiên */
.forest-cute-bg {
  background-image: url('../assets/images/doors_bg.webp');
  background-position: center bottom;
  background-size: cover;
  transform-origin: 50% 56%;
  animation: forwardCameraPushCute 9s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes forwardCameraPushCute {
  0% {
    transform: scale(1.0) translateY(0);
    filter: brightness(1) saturate(1);
  }

  50% {
    transform: scale(1.08) translateY(-9px);
    filter: brightness(1.04) saturate(1.06);
  }

  100% {
    transform: scale(1.16) translateY(-18px);
    filter: brightness(1.08) saturate(1.12);
  }
}

/* Nền Cảnh 2B & 2C (forest-creepy) - Con đường đá u ám dẫn sâu vào bóng tối */
.forest-creepy-bg {
  background-image: url('../assets/images/forest_creepy_path_bg.webp');
  background-position: center bottom;
  background-size: cover;
  transform-origin: 50% 56%;
  /* Đồng bộ điểm tụ 50% 56% khớp tuyệt đối với forest-cute (TASK 03F) */
  animation: forwardCameraPushCreepy 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes forwardCameraPushCreepy {
  0% {
    transform: scale(1.0) translateY(0);
    filter: brightness(1) contrast(1);
  }

  50% {
    transform: scale(1.09) translateY(-11px);
    filter: brightness(0.95) contrast(1.08);
  }

  100% {
    transform: scale(1.18) translateY(-22px);
    filter: brightness(0.9) contrast(1.16);
  }
}

/* Hiệu ứng lướt tiến tới trên nền rừng (Tương thích ngược với test_suite.py) */
.forest-bg-layer.is-zoomed {
  animation: bgSmoothZoomAdvance 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes bgSmoothZoomAdvance {
  0% {
    filter: brightness(1) saturate(1);
  }

  100% {
    transform: scale(1.12) translateY(-14px);
    filter: brightness(1.08) saturate(1.06);
  }
}

/* ==========================================================================
   TASK 03F: PROTOTYPE CHUYỂN CẢNH LIÊN TỤC FOREST-CUTE -> FOREST-CREEPY
   Chuyển động không gian xuyên suốt: Tăng tốc tiến sâu -> Biến đổi môi trường -> Chuyển vùng -> Giảm tốc ổn định
   ========================================================================== */

/* 1. Giữ màn hình cute hiển thị liên tục (không bị display: none loại bỏ trước khi chuyển động kết thúc) */
#screen-forest-cute.is-morphing-to-creepy {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  animation: cuteScreenExitMorph 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cuteScreenExitMorph {
  0% {
    opacity: 1;
  }

  38% {
    opacity: 1;
  }

  72% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* 2. Camera tăng tốc tiến sâu trên nền cute + Biến đổi nhiệt độ màu môi trường từ ấm sang lạnh u ám */
#screen-forest-cute.is-morphing-to-creepy .forest-cute-bg {
  transform-origin: 50% 56%;
  animation: cameraAccelerateCute 0.95s cubic-bezier(0.38, 0, 0.24, 1) forwards !important;
}

@keyframes cameraAccelerateCute {
  0% {
    transform: scale(1.0) translateY(0);
    filter: brightness(1) saturate(1) hue-rotate(0deg);
  }

  38% {
    transform: scale(1.16) translateY(-15px);
    filter: brightness(0.92) saturate(0.85) hue-rotate(-18deg) contrast(1.06);
  }

  100% {
    transform: scale(1.36) translateY(-34px);
    filter: brightness(0.65) saturate(0.55) hue-rotate(-42deg) contrast(1.18);
  }
}

/* 3. Cây tiền cảnh cute dạt rộng ra hai bên khi camera lướt qua giữa con đường */
#screen-forest-cute.is-morphing-to-creepy .forest-cute-foreground .fg-tree-left {
  animation: fgTreePartLeftAccelerate 0.95s cubic-bezier(0.38, 0, 0.24, 1) forwards !important;
}

#screen-forest-cute.is-morphing-to-creepy .forest-cute-foreground .fg-tree-right {
  animation: fgTreePartRightAccelerate 0.95s cubic-bezier(0.38, 0, 0.24, 1) forwards !important;
}

@keyframes fgTreePartLeftAccelerate {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.52) translate3d(-160px, 52px, 0);
  }
}

@keyframes fgTreePartRightAccelerate {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.52) translate3d(160px, 52px, 0);
  }
}

/* 4. Đom đóm lướt nhanh về phía camera rồi tan biến vào sương lạnh */
#screen-forest-cute.is-morphing-to-creepy .forest-fireflies-layer {
  animation: firefliesDisperse 0.45s ease-out forwards;
}

@keyframes firefliesDisperse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.4) translateY(-20px);
  }
}

/* 5. Chú ma dẫn đường lướt bay vào sâu trong rừng */
#screen-forest-cute.is-morphing-to-creepy .forest-ghost-actor {
  animation: ghostGuideForward 0.65s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

@keyframes ghostGuideForward {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate3d(-75px, -50px, 0) scale(0.45);
    opacity: 0;
  }
}

/* 6. Bong bóng thoại cute trượt xuống và mờ dần */
#screen-forest-cute.is-morphing-to-creepy .forest-stage-content {
  animation: bubbleExitCute 0.38s ease-out forwards !important;
}

@keyframes bubbleExitCute {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate3d(16px, 22px, 0) scale(0.94);
    opacity: 0;
  }
}

/* 7. Lớp sương mù chuyển cảnh 3D dâng lên từ điểm tụ mở rộng ra toàn màn hình */
.forest-transition-surge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  background: radial-gradient(ellipse at 50% 56%,
      rgba(20, 48, 64, 0.85) 0%,
      rgba(12, 28, 38, 0.78) 45%,
      rgba(6, 14, 20, 0.92) 80%,
      transparent 100%);
  transform-origin: 50% 56%;
}

#screen-forest-cute.is-morphing-to-creepy .forest-transition-surge {
  display: block;
  animation: transitionMistSurge 0.95s cubic-bezier(0.35, 0, 0.25, 1) forwards;
}

@keyframes transitionMistSurge {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  42% {
    transform: scale(1.15);
    opacity: 0.82;
  }

  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* 8. Màn hình creepy tiếp nhận chuyển động (Arriving from Cute) */
#screen-forest-creepy.is-arriving-from-cute {
  z-index: 4;
  animation: none !important;
}

/* Nền creepy tiếp nhận đà zoom từ 1.22 và giảm tốc êm dịu về 1.04 */
#screen-forest-creepy.is-arriving-from-cute .forest-creepy-bg {
  transform-origin: 50% 56%;
  animation: cameraDecelerateCreepy 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes cameraDecelerateCreepy {
  0% {
    transform: scale(1.22) translateY(-24px);
    filter: brightness(0.82) contrast(1.18);
  }

  50% {
    transform: scale(1.10) translateY(-12px);
    filter: brightness(0.92) contrast(1.10);
  }

  100% {
    transform: scale(1.04) translateY(-4px);
    filter: brightness(1) contrast(1);
  }
}

/* Cây tiền cảnh creepy thu dần từ ngoài vào vị trí khung hình chuẩn */
#screen-forest-creepy.is-arriving-from-cute .forest-creepy-foreground .fg-tree-left {
  animation: fgTreeSettleLeftCreepy 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

#screen-forest-creepy.is-arriving-from-cute .forest-creepy-foreground .fg-tree-right {
  animation: fgTreeSettleRightCreepy 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes fgTreeSettleLeftCreepy {
  0% {
    transform: scale(1.42) translate3d(-135px, 42px, 0);
  }

  100% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }
}

@keyframes fgTreeSettleRightCreepy {
  0% {
    transform: scale(1.42) translate3d(135px, 42px, 0);
  }

  100% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }
}

/* Sương mù creepy cuộn nhẹ hòa nhập */
#screen-forest-creepy.is-arriving-from-cute .creepy-fog-layer {
  animation: creepyFogArrive 0.58s ease-out forwards;
}

@keyframes creepyFogArrive {
  0% {
    opacity: 0.2;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Khung thoại creepy giữ ẩn trong lúc camera đang lướt và pop-in nhẹ khi dừng */
#screen-forest-creepy.is-arriving-from-cute .forest-dialogue-corner {
  animation: dialogueArriveCreepy 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dialogueArriveCreepy {

  0%,
  65% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   3.1 CẤU TRÚC PHÂN LỚP PARALLAX CHIỀU SÂU (TASK 03)
   -------------------------------------------------------------------------- */
.forest-parallax-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.forest-layer-back {
  z-index: 2;
}

.forest-layer-mid {
  z-index: 3;
}

.forest-layer-fog {
  z-index: 4;
}

.forest-layer-particles {
  z-index: 5;
}

.forest-layer-foreground {
  z-index: 7;
}

/* ==========================================================================
   A. CẢNH 2A: RỪNG DỄ THƯƠNG (forest-cute) - CHIỀU SÂU TIẾN VÀO RỪNG
   ========================================================================== */
.forest-cute-back {
  background: radial-gradient(circle at 50% 25%, rgba(255, 235, 175, 0.12) 0%, rgba(200, 150, 255, 0.05) 40%, transparent 65%);
}

/* Điểm tụ ánh sáng cuối con đường (Vanishing Point Glow) */
.path-vanishing-glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 320px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 240, 180, 0.38) 0%, rgba(200, 150, 255, 0.16) 45%, transparent 75%);
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  animation: vanishingPointPulseCute 6s ease-in-out infinite alternate;
}

@keyframes vanishingPointPulseCute {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.95;
  }
}

/* Rặng cây trung cảnh mở rộng hai bên đường khi camera tiến tới */
.midground-tree-tunnel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 62%, rgba(65, 25, 95, 0.35) 0%, transparent 46%),
    radial-gradient(ellipse at 85% 62%, rgba(65, 25, 95, 0.35) 0%, transparent 46%);
  transform-origin: 50% 55%;
  animation: midTunnelPushCute 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes midTunnelPushCute {
  0% {
    transform: scale(0.96) translateY(0);
    opacity: 0.75;
  }

  100% {
    transform: scale(1.1) translateY(6px);
    opacity: 0.95;
  }
}

.forest-cute-mid {
  background:
    radial-gradient(ellipse at 25% 65%, rgba(199, 138, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 175, 204, 0.12) 0%, transparent 45%);
}

/* Sương mù mặt đường cuộn về phía trước người xem */
.forest-cute-fog {
  background: linear-gradient(0deg,
      rgba(45, 18, 75, 0.28) 0%,
      rgba(175, 130, 225, 0.1) 30%,
      transparent 60%);
}

.ground-fog-wave {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 48%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(199, 138, 255, 0.25) 0%, rgba(45, 18, 75, 0.2) 40%, transparent 75%);
  transform-origin: 50% 10%;
}

.ground-fog-wave.wave-1 {
  animation: fogWaveRoll1 9s ease-in-out infinite alternate;
}

.ground-fog-wave.wave-2 {
  opacity: 0.7;
  height: 55%;
  animation: fogWaveRoll2 13s ease-in-out infinite alternate 1.5s;
}

@keyframes fogWaveRoll1 {
  0% {
    transform: scale(0.92) translateY(8px);
    opacity: 0.65;
  }

  100% {
    transform: scale(1.12) translateY(-6px);
    opacity: 0.95;
  }
}

@keyframes fogWaveRoll2 {
  0% {
    transform: scale(0.95) translateY(12px);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.15) translateY(-10px);
    opacity: 0.85;
  }
}

/* Đom đóm lấp lánh trôi nổi tự nhiên */
.forest-fireflies-layer {
  overflow: hidden;
}

.firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fffca8 0%, #ffc83b 50%, rgba(255, 200, 59, 0) 70%);
  box-shadow: 0 0 10px #ffc83b, 0 0 20px rgba(255, 220, 110, 0.6);
  pointer-events: none;
  will-change: transform, opacity;
}

.firefly.ff1 {
  top: 36%;
  left: 18%;
  width: 9px;
  height: 9px;
  animation: fireflyFloat1 6.5s ease-in-out infinite;
}

.firefly.ff2 {
  top: 54%;
  left: 76%;
  width: 11px;
  height: 11px;
  animation: fireflyFloat2 8.2s ease-in-out infinite 1.2s;
}

.firefly.ff3 {
  top: 26%;
  left: 64%;
  width: 7px;
  height: 7px;
  animation: fireflyFloat3 7s ease-in-out infinite 0.7s;
}

.firefly.ff4 {
  top: 68%;
  left: 22%;
  width: 10px;
  height: 10px;
  animation: fireflyFloat1 9s ease-in-out infinite 2.5s;
}

.firefly.ff5 {
  top: 42%;
  left: 48%;
  width: 8px;
  height: 8px;
  animation: fireflyFloat2 7.6s ease-in-out infinite 3.1s;
}

@keyframes fireflyFloat1 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0.4;
  }

  30% {
    transform: translate3d(8px, -12px, 0) scale(1.15);
    opacity: 0.95;
  }

  60% {
    transform: translate3d(-6px, -20px, 0) scale(0.85);
    opacity: 0.5;
  }

  80% {
    transform: translate3d(10px, -8px, 0) scale(1.2);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0.4;
  }
}

@keyframes fireflyFloat2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.35;
  }

  35% {
    transform: translate3d(-14px, -10px, 0) scale(1.25);
    opacity: 1;
  }

  70% {
    transform: translate3d(8px, -18px, 0) scale(0.9);
    opacity: 0.6;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.35;
  }
}

@keyframes fireflyFloat3 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0.5;
  }

  50% {
    transform: translate3d(12px, 10px, 0) scale(1.3);
    opacity: 0.95;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0.5;
  }
}

/* LỚP TIỀN CẢNH: Cây cổ thụ gnarled framing tiến gần và dạt ra rìa khi camera tiến sâu */
.fg-tree-img {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  pointer-events: none;
  z-index: 8;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.85));
}

.fg-tree-left {
  left: -4%;
  transform-origin: 0% 15%;
}

.fg-tree-right {
  right: -4%;
  transform-origin: 100% 15%;
}

/* Chuyển động tiền cảnh Rừng Dễ Thương */
.forest-cute-foreground .fg-tree-left {
  animation: fgTreePartLeftCute 9s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.forest-cute-foreground .fg-tree-right {
  animation: fgTreePartRightCute 9s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes fgTreePartLeftCute {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.3) translate3d(-80px, 36px, 0);
  }
}

@keyframes fgTreePartRightCute {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.3) translate3d(80px, 36px, 0);
  }
}

.forest-cute-foreground {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 66%, rgba(18, 8, 30, 0.35) 88%, rgba(12, 5, 22, 0.65) 100%),
    linear-gradient(180deg, rgba(16, 7, 28, 0.42) 0%, transparent 16%, transparent 84%, rgba(16, 7, 28, 0.42) 100%);
}

/* ==========================================================================
   B. CẢNH 2B: RỪNG KỲ QUÁI (forest-creepy) - SƯƠNG MÙ LẠNH & TĂNG TIẾN VÀO SÂU
   ========================================================================== */
.forest-creepy-back {
  background: radial-gradient(circle at 50% 30%, rgba(30, 60, 75, 0.16) 0%, transparent 60%);
}

.path-creepy-abyss {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 340px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(15, 45, 60, 0.5) 0%, rgba(5, 15, 25, 0.3) 50%, transparent 80%);
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  animation: vanishingPointPulseCreepy 5s ease-in-out infinite alternate;
}

@keyframes vanishingPointPulseCreepy {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
}

.creepy-tree-tunnel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 62%, rgba(10, 25, 35, 0.5) 0%, transparent 48%),
    radial-gradient(ellipse at 82% 62%, rgba(10, 25, 35, 0.5) 0%, transparent 48%);
  transform-origin: 50% 55%;
  animation: midTunnelPushCreepy 7.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes midTunnelPushCreepy {
  0% {
    transform: scale(0.95) translateY(0);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.12) translateY(8px);
    opacity: 1;
  }
}

.forest-creepy-mid {
  background:
    radial-gradient(ellipse at 18% 70%, rgba(8, 16, 20, 0.45) 0%, transparent 48%),
    radial-gradient(ellipse at 82% 65%, rgba(6, 12, 16, 0.45) 0%, transparent 48%);
}

/* Lớp sương mù lững lờ ở Cảnh 2B (Kế thừa & tăng chiều sâu) */
.creepy-fog-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 48%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(25, 45, 55, 0.35) 40%,
      rgba(18, 30, 40, 0.75) 100%);
  pointer-events: none;
  animation: fogDrift 14s ease-in-out infinite alternate;
}

@keyframes fogDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-25%, 0, 0);
  }
}

/* Hạt bụi sương lạnh trôi dạt */
.forest-creepy-particles {
  background-image:
    radial-gradient(circle, rgba(160, 200, 210, 0.18) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(120, 160, 180, 0.12) 1px, transparent 1px);
  background-size: 110px 110px, 75px 75px;
  background-position: 0 0, 35px 20px;
  opacity: 0.55;
  animation: creepyAshDrift 22s linear infinite;
}

@keyframes creepyAshDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-18px, 12px, 0);
  }

  100% {
    transform: translate3d(0, 24px, 0);
  }
}

/* Tiền cảnh cây cổ thụ tối dạt mạnh hơn khi tiến sâu */
.forest-creepy-foreground .fg-tree-left {
  animation: fgTreePartLeftCreepy 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.forest-creepy-foreground .fg-tree-right {
  animation: fgTreePartRightCreepy 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes fgTreePartLeftCreepy {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.35) translate3d(-90px, 42px, 0);
  }
}

@keyframes fgTreePartRightCreepy {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.35) translate3d(90px, 42px, 0);
  }
}

.forest-creepy-foreground {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(5, 10, 14, 0.55) 84%, rgba(2, 5, 8, 0.9) 100%),
    linear-gradient(0deg, rgba(2, 5, 8, 0.7) 0%, transparent 22%);
}

/* ==========================================================================
   C. CẢNH 2C: CẢNH BÁO HỒI HỘP (forest-warning) - VÙNG NGUY HIỂM ÁP SÁT
   ========================================================================== */
.forest-warning-back {
  background: radial-gradient(circle at 50% 40%, rgba(25, 4, 18, 0.25) 0%, transparent 65%);
}

.path-warning-void {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 360px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(60, 10, 30, 0.65) 0%, rgba(20, 2, 10, 0.4) 55%, transparent 85%);
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
  animation: vanishingPointPulseWarning 3.5s ease-in-out infinite alternate;
}

@keyframes vanishingPointPulseWarning {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
  }
}

.warning-shadow-stalker {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 58%, rgba(20, 2, 12, 0.6) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 58%, rgba(20, 2, 12, 0.6) 0%, transparent 45%);
  transform-origin: 50% 55%;
  animation: warningStalkerPush 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes warningStalkerPush {
  0% {
    transform: scale(0.94) translateY(0);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.15) translateY(10px);
    opacity: 1;
  }
}

.forest-warning-mid {
  background: radial-gradient(ellipse at 50% 65%, rgba(18, 3, 12, 0.55) 0%, transparent 60%);
}

.forest-warning-fog {
  background: linear-gradient(0deg,
      rgba(22, 2, 16, 0.68) 0%,
      rgba(40, 6, 28, 0.35) 32%,
      transparent 68%);
}

.warning-heavy-mist {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(40, 5, 25, 0.65) 0%, rgba(15, 2, 10, 0.4) 45%, transparent 80%);
  transform-origin: 50% 10%;
  animation: warningMistRoll 6s ease-in-out infinite alternate;
}

@keyframes warningMistRoll {
  0% {
    transform: scale(0.95) translateY(6px);
    opacity: 0.75;
  }

  100% {
    transform: scale(1.18) translateY(-8px);
    opacity: 1;
  }
}

/* Tiền cảnh cây cổ thụ tối ép sát dồn dập */
.forest-warning-foreground .fg-tree-left {
  animation: fgTreePartLeftWarning 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.forest-warning-foreground .fg-tree-right {
  animation: fgTreePartRightWarning 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes fgTreePartLeftWarning {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.4) translate3d(-100px, 48px, 0);
  }
}

@keyframes fgTreePartRightWarning {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.4) translate3d(100px, 48px, 0);
  }
}

.forest-warning-foreground {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(10, 2, 12, 0.75) 78%, rgba(2, 0, 4, 0.96) 100%),
    linear-gradient(90deg, rgba(6, 0, 8, 0.75) 0%, transparent 16%, transparent 84%, rgba(6, 0, 8, 0.75) 100%);
}

/* --------------------------------------------------------------------------
   3.2 CỤM GÓC GIAO TIẾP: NHÂN VẬT MA 2D & KHUNG HỘI THOẠI TRẢI NGHIỆM (TASK 03D)
   -------------------------------------------------------------------------- */
.forest-dialogue-corner {
  position: absolute;
  right: 2.5%;
  bottom: 2.5%;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.65rem;
  max-width: 420px;
  pointer-events: none;
}

.forest-dialogue-corner.forest-corner-bottom {
  right: 2.5%;
  bottom: 2.5%;
  max-width: 270px;
}

/* Khung thoại tối giản, trong suốt 30-45%, không che cảnh rừng (TASK 03D) */
.forest-dialogue-corner .forest-stage-content {
  pointer-events: auto;
  position: relative;
  width: clamp(230px, 18vw, 260px);
  max-width: 260px;
  margin: 0;
  padding: 0.55rem 0.75rem;
  background: rgba(16, 7, 28, 0.38);
  border: 1px solid rgba(215, 175, 255, 0.22);
  border-radius: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(175, 110, 245, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  height: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  transition: transform 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.forest-dialogue-corner.forest-corner-bottom .forest-stage-content {
  width: clamp(230px, 18vw, 260px);
  max-width: 260px;
}

.forest-speech-bubble.bubble-pop-in {
  animation: bubblePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bubblePopIn {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Đuôi khung thoại trỏ ngang sang chú ma ở bên phải */
.forest-dialogue-corner .speech-bubble-tail {
  position: absolute;
  right: -8px;
  bottom: 26px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid rgba(16, 7, 28, 0.38);
  filter: drop-shadow(1px 0 2px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.forest-dialogue-corner.forest-corner-bottom .speech-bubble-tail {
  display: none;
}

/* Header định danh người nói trong khung thoại */
.speech-bubble-header {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  background: rgba(55, 25, 90, 0.45);
  border: 1px solid rgba(210, 160, 255, 0.25);
  border-radius: 999px;
  color: #ffd6ff;
  font-size: 0.72rem;
  font-weight: 600;
  user-select: none;
  align-self: flex-start;
}

.speaker-avatar {
  font-size: 0.85rem;
  line-height: 1;
}

.speaker-name {
  letter-spacing: 0.01em;
}

.speaker-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px #4ade80;
  animation: statusDotPulse 2s ease-in-out infinite;
}

.speaker-status-dot.dot-creepy {
  background: #38bdf8;
  box-shadow: 0 0 5px #38bdf8;
}

.speaker-status-dot.dot-warning {
  background: #f43f5e;
  box-shadow: 0 0 5px #f43f5e;
}

@keyframes statusDotPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Biến thể khung thoại Cảnh 2B (Rừng kỳ quái) - Trong suốt 38% */
.forest-creepy-bubble {
  background: rgba(8, 16, 22, 0.38) !important;
  border-color: rgba(90, 190, 220, 0.25) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 10px rgba(50, 150, 180, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.forest-creepy-bubble .speech-bubble-header {
  background: rgba(20, 45, 60, 0.45);
  border-color: rgba(90, 190, 220, 0.25);
  color: #bae6fd;
}

/* Biến thể khung thoại Cảnh 2C (Cảnh báo hồi hộp) - Trong suốt 40% */
.forest-warning-bubble {
  background: rgba(22, 4, 12, 0.40) !important;
  border-color: rgba(244, 63, 94, 0.28) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(220, 38, 38, 0.15) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  animation: warningBubbleTension 3s ease-in-out infinite alternate;
}

@keyframes warningBubbleTension {
  0% {
    border-color: rgba(244, 63, 94, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 8px rgba(220, 38, 38, 0.12);
  }

  100% {
    border-color: rgba(255, 90, 120, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 16px rgba(244, 63, 94, 0.28);
  }
}

.forest-warning-bubble .speech-bubble-header {
  background: rgba(60, 15, 30, 0.45);
  border-color: rgba(244, 63, 94, 0.28);
  color: #fecdd3;
}

/* Tiêu đề & nội dung hội thoại nhỏ gọn, tương phản sắc nét */
.forest-dialogue-corner .forest-scene-title {
  font-family: var(--font-display, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(220, 150, 255, 0.35);
  text-align: left;
  margin: 0;
}

.forest-dialogue-corner .forest-scene-dialogue {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #f5eeff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  max-width: none;
  margin: 0;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.forest-dialogue-corner .screen-actions {
  align-self: flex-start;
  margin-top: 0.1rem;
}

/* Nhân vật chú ma 2D góc phải cân đối */
.forest-dialogue-corner .forest-ghost-actor {
  position: relative;
  right: auto;
  bottom: auto;
  width: clamp(105px, 9vw, 135px);
  flex-shrink: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ghostFloatingDeep 4s ease-in-out infinite;
}

.ghost-aura-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 160, 255, 0.4) 0%, rgba(160, 100, 255, 0.15) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  animation: ghostAuraPulse 3s ease-in-out infinite alternate;
}

@keyframes ghostAuraPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.95;
  }
}

.forest-ghost-img {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(185, 140, 255, 0.55));
  transform-origin: center bottom;
}

@keyframes ghostFloatingDeep {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  33% {
    transform: translate3d(-3px, -14px, 0) rotate(2deg);
  }

  66% {
    transform: translate3d(3px, -8px, 0) rotate(-1.5deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* Nút hành động phong cách Halloween nhỏ gọn */
.forest-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.32rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-body, sans-serif);
  border-radius: 9px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  background: linear-gradient(135deg, #ff8c42 0%, #ff5e36 100%);
  box-shadow: 0 3px 10px rgba(255, 94, 54, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
  user-select: none;
}

.forest-action-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(255, 94, 54, 0.6);
  filter: brightness(1.08);
}

.forest-action-btn:active:not(:disabled) {
  transform: translateY(1px);
}


/* --------------------------------------------------------------------------
   4. CẢNH 2C: CẢNH BÁO HỒI HỘP & KHÓA NÚT 5 GIÂY (WARNING)
   -------------------------------------------------------------------------- */
/* Lớp phủ Vignette bóng tối co thắt theo nhịp */
.warning-vignette-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(5, 2, 10, 0.85) 85%, #020104 100%);
  z-index: 2;
  pointer-events: none;
  transition: background 0.8s ease;
  animation: vignetteBreath 2.4s ease-in-out infinite alternate;
}

@keyframes vignetteBreath {
  0% {
    background: radial-gradient(circle at center, transparent 45%, rgba(5, 2, 10, 0.8) 85%, #020104 100%);
  }

  100% {
    background: radial-gradient(circle at center, transparent 25%, rgba(10, 3, 18, 0.94) 75%, #000000 100%);
  }
}

/* Nút hù dọa khi bị khóa trong 5 giây */
#btn-trigger-scare.is-locked,
#btn-trigger-scare:disabled {
  background: linear-gradient(135deg, #443555 0%, #2a1f38 100%);
  color: #9f8fb5;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
  opacity: 0.65;
}

/* Nút hù dọa khi được mở khóa sau 5s */
#btn-trigger-scare:not(.is-locked):not(:disabled) {
  background: linear-gradient(135deg, #ff2a4b 0%, #c40026 100%);
  box-shadow: 0 6px 24px rgba(255, 42, 75, 0.55);
  animation: unlockPulse 1.4s infinite alternate;
}

@keyframes unlockPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  100% {
    transform: scale(1.04);
    filter: brightness(1.2);
  }
}


/* --------------------------------------------------------------------------
   5. THIẾT KẾ ĐÁP ỨNG: RESPONSIVE CHO MOBILE & TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .victory-stage-wrap {
    padding: calc(var(--header-height) + 0.5rem) 1rem 1rem;
    gap: 0.65rem;
  }

  .victory-ghost-host {
    width: 100px;
    height: 100px;
  }

  .gift-box-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }

  .btn-open-final-gift {
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
  }

  #screen-forest-cute.is-active,
  #screen-forest-creepy.is-active,
  #screen-forest-warning.is-active {
    display: block;
    padding-top: calc(var(--header-height) + 0.5rem);
    padding-bottom: 0.5rem;
  }

  /* Cụm góc thoại trên mobile neo cố định góc dưới, giữ thông thoáng 85%+ diện tích rừng (TASK 03D) */
  .forest-dialogue-corner {
    right: 8px;
    bottom: 8px;
    left: auto;
    max-width: 210px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
  }

  .forest-dialogue-corner.forest-corner-bottom {
    right: 8px;
    bottom: 8px;
    left: auto;
    max-width: 210px;
  }

  .forest-dialogue-corner .forest-stage-content {
    margin: 0;
    width: clamp(175px, 50vw, 205px);
    max-width: 205px;
    padding: 0.45rem 0.6rem;
    gap: 0.22rem;
    border-radius: 11px;
    order: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .forest-dialogue-corner.forest-corner-bottom .forest-stage-content {
    width: clamp(175px, 50vw, 205px);
    max-width: 205px;
  }

  .forest-dialogue-corner .forest-ghost-actor {
    position: relative;
    right: auto;
    bottom: auto;
    width: clamp(65px, 16vw, 85px);
    margin: 0 2px 0 0;
    z-index: 10;
    order: 2;
  }

  /* Đuôi khung thoại trên mobile trỏ xuống chú ma ở góc dưới phải */
  .forest-dialogue-corner .speech-bubble-tail {
    position: absolute;
    right: 22px;
    left: auto;
    bottom: -7px;
    top: auto;
    transform: none;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(16, 7, 28, 0.38);
    border-bottom: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  }

  .forest-creepy-bubble .speech-bubble-tail,
  .forest-dialogue-corner.forest-corner-bottom .speech-bubble-tail {
    display: none;
  }

  /* Cây tiền cảnh mobile ép gọn hai bên mép màn hình */
  .fg-tree-img {
    max-width: 32vw;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .fg-tree-left {
    left: -8%;
  }

  .fg-tree-right {
    right: -8%;
  }

  .forest-dialogue-corner .forest-scene-title {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .forest-dialogue-corner .forest-scene-dialogue {
    font-size: 0.76rem;
    /* ~12.2px trên mobile */
    line-height: 1.35;
  }

  .forest-action-btn {
    min-height: 28px;
    padding: 0.25rem 0.75rem;
    font-size: 0.76rem;
    border-radius: 8px;
  }

  .glitch-text-alert,
  .bomb-alert-text {
    font-size: clamp(1.15rem, 5vw, 1.75rem);
    letter-spacing: 0.08em;
  }
}

/* ==========================================================================
   TASK 04E: VIDEO JUMPSCARE TẢI XUỐNG.MP4 & GIAO DIỆN KẾT THÚC DÙNG CHUNG
   ========================================================================== */

/* 1. Video Jumpscare toàn màn hình, phủ đúng viewport, không méo tỷ lệ */
#screen-jumpscare.is-active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#screen-jumpscare .jumpscare-stage-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  background: #000000 !important;
  overflow: hidden !important;
}

#screen-jumpscare .jumpscare-video-element {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 2. Nhánh Thua do bom nổ (Bomb Defeat) */
.bomb-defeat-card {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2.2rem 2rem;
  background: rgba(22, 6, 18, 0.92);
  border: 2px solid rgba(255, 51, 102, 0.65);
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(255, 0, 85, 0.45), inset 0 0 30px rgba(255, 0, 85, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 90vw;
  width: 520px;
  animation: popInBounce 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.bomb-defeat-badge {
  font-size: 3.5rem;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 16px rgba(255, 51, 102, 0.85));
}

.bomb-defeat-title {
  color: #ff3366;
  font-family: var(--font-display, monospace);
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 20px rgba(255, 51, 102, 0.9), 2px 2px 0 #000;
  letter-spacing: 0.05em;
}

.bomb-defeat-subtitle {
  color: #ffccd5;
  font-size: 1.1rem;
  line-height: 1.6;
}

.bomb-glitch-screen.is-glitching-hard .bomb-defeat-card {
  animation: glitchIntense 0.1s infinite alternate;
}

.bomb-glitch-screen.is-glitching-hard .bomb-glitch-lines {
  opacity: 0.95;
  animation: scanlineScroll 0.15s linear infinite;
}

@keyframes glitchIntense {
  0% {
    transform: translate(-8px, 4px) skewX(-4deg);
    filter: hue-rotate(90deg);
  }

  50% {
    transform: translate(6px, -5px) skewX(5deg);
    filter: invert(0.25);
  }

  100% {
    transform: translate(-4px, -2px) skewX(-2deg);
    filter: hue-rotate(-60deg);
  }
}

/* 3. Màn hình Outro 2 nút & Lời chào tạm biệt */
.outro-actions-grid {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.2rem !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 1.8rem !important;
}

.outro-farewell-card {
  margin-top: clamp(0.5rem, 1.5vh, 1.25rem);
  padding: clamp(0.75rem, 2vh, 1.8rem) clamp(0.75rem, 2vw, 1.6rem);
  background: rgba(26, 12, 42, 0.94);
  border: 2px solid rgba(255, 170, 0, 0.65);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 170, 0, 0.3);
  backdrop-filter: blur(12px);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  animation: popInBounce 0.4s ease-out;
  box-sizing: border-box;
}

.outro-farewell-card.is-hidden {
  display: none !important;
}

.farewell-badge {
  font-size: clamp(2rem, 4.5vh, 3rem);
  margin-bottom: clamp(0.25rem, 0.8vh, 0.6rem);
  filter: drop-shadow(0 0 15px rgba(255, 170, 0, 0.6));
}

.farewell-title {
  color: #ffaa00;
  font-size: clamp(1.15rem, 2.5vh, 1.55rem);
  font-weight: 800;
  margin-bottom: clamp(0.25rem, 0.8vh, 0.6rem);
}

.farewell-desc {
  color: #e6d8ff;
  font-size: clamp(0.82rem, 1.8vh, 0.98rem);
  line-height: 1.5;
  margin-bottom: clamp(0.6rem, 1.5vh, 1.2rem);
}

.action-btn.is-locked {
  opacity: 0.6 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   6. KHẢ NĂNG TIẾP CẬN: PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .gift-box-img,
  .gift-box-wrap,
  .gift-instruction-badge,
  .gift-rays-burst,
  .gift-shadow-entity,
  .glitch-scanlines,
  .glitch-text-alert,
  .bomb-screen-shake,
  .bomb-glitch-lines,
  .bomb-alert-text,
  .creepy-fog-layer,
  .forest-ghost-actor,
  .ghost-aura-glow,
  .warning-vignette-pulse,
  #btn-trigger-scare,
  .forest-action-btn,
  .forest-parallax-layer,
  .forest-cute-bg,
  .forest-creepy-bg,
  .forest-cute-back,
  .forest-cute-mid,
  .forest-cute-fog,
  .forest-cute-foreground,
  .forest-creepy-back,
  .forest-creepy-mid,
  .forest-creepy-particles,
  .forest-creepy-foreground,
  .forest-warning-back,
  .forest-warning-mid,
  .forest-warning-fog,
  .forest-warning-foreground,
  .path-vanishing-glow,
  .path-creepy-abyss,
  .path-warning-void,
  .midground-tree-tunnel,
  .creepy-tree-tunnel,
  .warning-shadow-stalker,
  .ground-fog-wave,
  .warning-heavy-mist,
  .fg-tree-img,
  .fg-tree-left,
  .fg-tree-right,
  .forest-speech-bubble,
  .speaker-status-dot,
  .forest-warning-bubble,
  .forest-screen.is-active,
  #screen-forest-cute.is-morphing-to-creepy,
  #screen-forest-creepy.is-arriving-from-cute,
  .forest-transition-surge,
  .firefly {
    animation: none !important;
    transition: none !important;
  }

  .forest-bg-layer.is-zoomed {
    transform: none !important;
  }
}