:root {
  --gold-primary: #ffdf7e;
  --gold-glow: rgba(255, 215, 100, 0.6);
  --gold-deep: #d4a034;
  --crimson-red: #9e1a2b;
  --navy-sky: #070d1e;
  --lantern-glow: rgba(255, 140, 40, 0.7);
  --text-gold: #fde8b3;
  --card-bg: rgba(14, 18, 35, 0.92);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--navy-sky);
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

/* Audio & Action Top Bar */
.ui-topbar {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  pointer-events: none;
}

.audio-btn, .wish-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(16, 24, 48, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 223, 126, 0.35);
  color: var(--text-gold);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.audio-btn:hover, .wish-pill:hover {
  background: rgba(26, 38, 75, 0.85);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 100, 0.25);
}

.audio-btn.playing {
  border-color: var(--gold-primary);
  box-shadow: 0 0 14px rgba(255, 215, 100, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.audio-btn.playing #soundOnIcon {
  animation: audioPulse 1.8s infinite ease-in-out;
}

@keyframes audioPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 215, 100, 0.4)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255, 215, 100, 0.8)); }
}

.wish-pill .sparkle-icon {
  font-size: 15px;
  animation: pulseSparkle 2s infinite ease-in-out;
}

@keyframes pulseSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50% { transform: scale(1.25) rotate(15deg); filter: brightness(1.5); }
}

/* Main Scenic Stage */
.scene-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Background image filling screen */
.sky-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  transform: scale(1.02);
  filter: contrast(1.05) brightness(1.02);
}

/* Canvas layer for particles, stars, fireflies */
#particleCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Dynamic released lanterns layer */
.lanterns-dynamic-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

/* Frame Wrapper: Perfectly matches 1024x503 composition aspect ratio */
.stage-frame-wrapper {
  position: relative;
  width: min(96vw, 195vh);
  aspect-ratio: 1024 / 503;
  max-width: 1400px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* General sprite properties - smooth bilinear rendering for raster PNGs */
.sprite {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  image-rendering: auto;
}

/* ================= 1. BEHIND-FRAME LAYER (Inside Window) ================= */
.frame-behind {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}

/* ================= MOON GROUP & HOLD INTERACTION ================= */
.moon-group {
  position: absolute;
  top: 12%;
  left: 35%;
  width: 15%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  pointer-events: auto;
  z-index: 8; /* Behind the red window frame (z-index: 10) */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  --hold-progress: 0;
}

.moon-group:hover {
  transform: scale(1.03);
}

.moon-group.holding {
  transform: scale(calc(1.03 + 0.07 * var(--hold-progress, 0)));
}

/* Ambient Moon Base Aura */
.moon-aura-base {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 170, 0.5) 0%, rgba(255, 210, 110, 0.2) 45%, transparent 72%);
  pointer-events: none;
  z-index: -2;
  animation: moonAuraPulse 4s ease-in-out infinite alternate;
}

@keyframes moonAuraPulse {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 1; }
}

/* Intense Holding Glow - JS drives opacity and scale via inline style */
.moon-aura-glow {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 230, 1) 0%, rgba(255, 235, 140, 0.88) 22%, rgba(255, 190, 60, 0.55) 50%, rgba(255, 160, 30, 0.2) 70%, transparent 85%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: scale(0.6);
  filter: blur(14px);
  will-change: opacity, transform;
}

/* Celestial Golden Radiance Rays - JS drives opacity and rotation */
.moon-radiance {
  position: absolute;
  top: -55%;
  left: -55%;
  width: 210%;
  height: 210%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 240, 160, 0.38) 18deg,
    transparent 36deg,
    transparent 54deg,
    rgba(255, 240, 160, 0.3) 72deg,
    transparent 90deg,
    transparent 108deg,
    rgba(255, 240, 160, 0.38) 126deg,
    transparent 144deg,
    transparent 162deg,
    rgba(255, 240, 160, 0.32) 180deg,
    transparent 198deg,
    transparent 216deg,
    rgba(255, 240, 160, 0.38) 234deg,
    transparent 252deg,
    transparent 270deg,
    rgba(255, 240, 160, 0.3) 288deg,
    transparent 306deg,
    transparent 324deg,
    rgba(255, 240, 160, 0.32) 342deg,
    transparent 360deg
  );
  pointer-events: none;
  z-index: -2;
  opacity: 0;
  transform: rotate(0deg) scale(0.7);
  will-change: opacity, transform;
  mask-image: radial-gradient(circle, black 35%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 35%, transparent 72%);
}

/* Flash of light burst on unlock */
.moon-flash {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 240, 1) 0%, rgba(255, 235, 160, 0.9) 35%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  z-index: 25;
  transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.moon-flash.active {
  opacity: 1;
  transform: scale(2.2);
}

/* The Moon Sprite */
.sprite-moon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  image-rendering: auto;
  transition: filter 0.2s ease-out;
  filter: drop-shadow(0 0 28px rgba(255, 235, 160, 0.7)) brightness(1.04);
}

.moon-group:hover .sprite-moon {
  filter: drop-shadow(0 0 40px rgba(255, 245, 185, 0.92)) brightness(1.08);
}

.moon-group.holding .sprite-moon {
  filter:
    drop-shadow(0 0 30px rgba(255, 248, 200, 0.95))
    drop-shadow(0 0 70px rgba(255, 210, 80, 0.8))
    brightness(1.15);
}

/* Instruction Text: "Ấn giữ vào mặt trăng" */
.instruction-text {
  position: absolute;
  top: 43%;
  left: 36%;
  z-index: 9;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 1.2vw, 15px);
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-gold);
  text-shadow: 0 0 8px rgba(255, 223, 126, 0.9), 0 2px 5px rgba(0, 0, 0, 0.95);
  animation: instructionFloat 3s ease-in-out infinite;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

.moon-group.holding ~ .instruction-text,
.instruction-text.hidden {
  opacity: 0.2;
}

@keyframes instructionFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
    text-shadow: 0 0 14px rgba(255, 235, 160, 1), 0 2px 6px rgba(0, 0, 0, 0.95);
  }
}

/* ================= 2. AUSPICIOUS WINDOW FRAME (Overlays Moon) ================= */
.sprite-frame {
  top: 0;
  left: 22%;
  width: 55%;
  height: auto;
  z-index: 10; /* OVERLAYS the moon (z-index 8) to create the window frame depth */
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.85));
}

/* ================= 3. SCENIC LANTERNS ================= */
.scenic-lantern {
  position: absolute;
  pointer-events: none;
}

.scenic-lantern img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  filter: drop-shadow(0 0 18px rgba(255, 140, 40, 0.78));
}

/* Large top-right lantern (Fore-frame) */
.lantern-big-scenic {
  top: 0%;
  left: 61%;
  width: 13%;
  z-index: 11;
  animation: floatLantern1 7s ease-in-out infinite alternate;
}

@keyframes floatLantern1 {
  0% { transform: translateY(0px) rotate(-1deg); }
  100% { transform: translateY(-14px) rotate(2deg); }
}

/* Mid lantern below big one (Behind frame) */
.lantern-mid-scenic {
  top: 32.5%;
  left: 64%;
  width: 8.5%;
  z-index: 7;
  animation: floatLantern2 6s ease-in-out infinite alternate 1s;
}

@keyframes floatLantern2 {
  0% { transform: translateY(0px) rotate(1.5deg); }
  100% { transform: translateY(-12px) rotate(-2deg); }
}

/* Bottom lantern middle (Behind frame) */
.lantern-bottom-scenic {
  top: 44.7%;
  left: 51.3%;
  width: 8.6%;
  z-index: 7;
  animation: floatLantern3 8s ease-in-out infinite alternate 0.5s;
}

@keyframes floatLantern3 {
  0% { transform: translateY(0px) rotate(-2deg); }
  100% { transform: translateY(-10px) rotate(1deg); }
}

/* Tiny lantern in distance (Behind frame) */
.lantern-tiny-scenic {
  top: 20.9%;
  left: 52.9%;
  width: 2.8%;
  z-index: 7;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(255, 160, 40, 0.6)) brightness(0.9);
  animation: floatLanternTiny 9s ease-in-out infinite alternate 2s;
}

@keyframes floatLanternTiny {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(-3deg); }
}

/* ================= 4. GOLDEN AUSPICIOUS CLOUDS ================= */
.cloud-left {
  top: 23.5%;
  left: 3.7%;
  width: 27.3%;
  z-index: 12;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  animation: driftCloudLeft 10s ease-in-out infinite alternate;
}

@keyframes driftCloudLeft {
  0% { transform: translateX(0px); }
  100% { transform: translateX(10px); }
}

.cloud-right {
  top: 44.3%;
  right: 4.8%;
  width: 21.5%;
  z-index: 12;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  animation: driftCloudRight 11s ease-in-out infinite alternate;
}

@keyframes driftCloudRight {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-10px); }
}

/* ================= 5. FLOWER TREE BRANCH (FOREGROUND) ================= */
.branch-wrapper {
  position: absolute;
  top: 28%;
  left: -20%;
  width: 100%;
  z-index: 14;
  pointer-events: none;
}

.sprite-branch {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.7));
  animation: branchSway 14s ease-in-out infinite alternate;
  transform-origin: left top;
}

@keyframes branchSway {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(0.3deg) translateY(2px); }
}

/* ================= 6. JADE RABBIT (ON THE BRANCH) ================= */
.rabbit-wrapper {
  position: absolute;
  top: 55%;
  left: 20%;
  width: 10%;
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: bottom center;
  animation: rabbitBreathe 4.5s ease-in-out infinite;
}

.rabbit-wrapper:hover {
  animation: none;
  transform: scale(1.08) rotate(-3deg);
}

.sprite-rabbit {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s ease;
}

@keyframes rabbitBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025, 0.985);
  }
}

/* Dynamic Released Lanterns (Floating up into infinity) */
.rising-lantern {
  position: absolute;
  pointer-events: none;
  animation: lanternAscend linear forwards;
}

.rising-lantern img {
  width: 100%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 0 18px rgba(255, 160, 40, 0.9));
}

@keyframes lanternAscend {
  0% {
    transform: translateY(0) scale(var(--init-scale, 1)) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(var(--travel-y, -120vh)) scale(calc(var(--init-scale, 1) * 0.4)) rotate(var(--drift-rot, 10deg));
    opacity: 0;
  }
}

/* ================= CELEBRATION MODAL / FESTIVAL CARD ================= */
.festival-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 7, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.festival-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.festival-card {
  position: relative;
  width: min(90vw, 440px);
  background: var(--card-bg);
  border: 1px solid rgba(255, 223, 126, 0.4);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 200, 60, 0.25);
  transform: scale(0.85) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.festival-modal-overlay.active .festival-card {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-gold);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}

.modal-close-btn:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Mooncake Presentation */
.cake-display {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.festival-cake {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
  animation: cakeHover 4s ease-in-out infinite;
}

@keyframes cakeHover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

.cake-glow {
  position: absolute;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 80, 0.5) 0%, rgba(255, 160, 40, 0.2) 50%, transparent 75%);
  z-index: -1;
  animation: cakeGlowPulse 3s ease-in-out infinite alternate;
}

@keyframes cakeGlowPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff4d1;
  margin-bottom: 6px;
  text-shadow: 0 0 16px rgba(255, 215, 100, 0.6);
  letter-spacing: 0.5px;
}

.title-divider {
  color: var(--gold-primary);
  font-size: 14px;
  margin-bottom: 16px;
  opacity: 0.8;
  letter-spacing: 6px;
}

.card-quote {
  font-size: 14px;
  line-height: 1.65;
  color: #f1dfbc;
  margin-bottom: 24px;
  font-weight: 400;
  min-height: 68px;
}

.card-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.festive-btn {
  padding: 10px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 223, 126, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.festive-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}

.festive-btn-primary {
  background: linear-gradient(135deg, #d49520, #e6b245);
  border-color: #ffd56b;
  color: #1a0f02;
  box-shadow: 0 4px 15px rgba(212, 149, 32, 0.4);
}

.festive-btn-primary:hover {
  background: linear-gradient(135deg, #e6b245, #ffe082);
  box-shadow: 0 6px 20px rgba(255, 215, 100, 0.6);
  transform: translateY(-2px);
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media (max-width: 900px) {
  .stage-frame-wrapper {
    width: 98vw;
    aspect-ratio: 1.85 / 1;
  }
}

@media (max-width: 600px) {
  .ui-topbar {
    top: 12px;
    left: 12px;
    right: 12px;
  }
  .audio-btn, .wish-pill {
    padding: 6px 12px;
    font-size: 11px;
  }
  .instruction-text {
    font-size: 11px;
  }
}