/* ====================================================
   HAPPY BIRTHDAY INTERACTIVE CARD - MINIMALIST LUXURY
   Target: 1991 (Tân Mùi - Lộ Bàng Thổ)
   Palette: Deep Charcoal, Earth Matte, Champagne Gold & Warm Amber
   ==================================================== */

:root {
  --bg-main: #111113;
  --bg-gradient: radial-gradient(circle at 50% 15%, #1f1e1c 0%, #131315 55%, #0b0b0d 100%);
  --gold-accent: #d4af37;
  --gold-light: #e8cd75;
  --gold-glow: rgba(212, 175, 55, 0.25);
  --earth-warm: #262422;
  --earth-border: rgba(212, 175, 55, 0.18);
  --text-main: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --font-heading: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  background: var(--bg-gradient);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: -0.01em;
}

/* Background Canvas */
#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

#confettiContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

/* Floating Audio Toggle */
.music-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--earth-border);
  color: var(--gold-light);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.music-btn:hover {
  background: rgba(38, 36, 34, 0.9);
  border-color: var(--gold-accent);
}

.music-btn.playing {
  border-color: var(--gold-accent);
  box-shadow: 0 0 15px var(--gold-glow);
  animation: pulseRotate 8s linear infinite;
}

@keyframes pulseRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* App Container */
.app-container {
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 14px;
}

/* Stage Layout */
.stage {
  display: none;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.stage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.text-center {
  text-align: center;
}

/* Minimalist Tags & Badges */
.minimal-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: 12px;
  opacity: 0.85;
}

.minimal-title {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  margin-bottom: 6px;
}

.minimal-title-md {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 8px;
}

.minimal-heading {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Modern Minimalist Button */
.btn-minimal {
  padding: 13px 34px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: var(--font-body);
  color: #111113;
  background: linear-gradient(135deg, #e8cd75 0%, #c5a059 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
  transition: all 0.25s ease;
  outline: none;
  margin-top: 18px;
}

.btn-minimal:hover {
  background: linear-gradient(135deg, #f0d886 0%, #d4af37 100%);
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}

.btn-minimal:active {
  transform: scale(0.98);
}

.btn-outline {
  padding: 11px 26px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

.btn-outline:hover {
  color: #fff;
  border-color: var(--gold-accent);
}

.hidden {
  display: none !important;
}

/* ================= STAGE 1: DATE PICKER ================= */
.date-picker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 27, 26, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid var(--earth-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 12px 0 24px 0;
  width: 100%;
  max-width: 340px;
}

.wheel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.wheel-col:first-child {
  flex: 0.85;
}

.wheel-col:last-child {
  flex: 1.15;
}

.wheel {
  height: 114px;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}

.wheel::-webkit-scrollbar {
  display: none;
}

.wheel-item {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.18rem;
  font-weight: 400;
  color: var(--text-muted);
  scroll-snap-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: var(--font-heading);
  white-space: nowrap;
  width: 100%;
}

.wheel-item.selected {
  color: var(--gold-light);
  font-size: 1.38rem;
  font-weight: 600;
  text-shadow: 0 0 12px var(--gold-glow);
  white-space: nowrap;
}

.wheel-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.wheel-divider {
  font-size: 1.2rem;
  color: var(--gold-accent);
  opacity: 0.4;
  margin: 0 8px;
  align-self: center;
}

.wheel-item.target-highlight {
  color: var(--gold-light) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  text-shadow: 0 0 16px rgba(232, 205, 117, 0.9) !important;
  animation: goldBounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap !important;
}

@keyframes goldBounce {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ================= iOS SLIDE TO UNLOCK SLIDER (ENLARGED) ================= */
.slider-wrapper {
  width: 100%;
  max-width: 340px;
  margin-top: 22px;
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
  filter: blur(2px);
}

.slider-wrapper.unlocked {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  filter: blur(0);
}

.slider-wrapper.unlocked .slider-track {
  animation: trackGlow 2.8s infinite alternate ease-in-out;
}

@keyframes trackGlow {
  0% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 0 rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(212, 175, 55, 0.35); }
}

.slider-track {
  position: relative;
  width: 100%;
  height: 64px;
  background: rgba(28, 27, 26, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid var(--earth-border);
  border-radius: 32px;
  display: flex;
  align-items: center;
  padding: 5px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.slider-shimmer-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  user-select: none;
  pointer-events: none;
  padding-left: 74px;
  padding-right: 16px;
  background: linear-gradient(90deg, rgba(161, 161, 170, 0.45) 0%, rgba(232, 205, 117, 1) 50%, rgba(161, 161, 170, 0.45) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSlide 2.5s infinite linear;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

@keyframes shimmerSlide {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

.slider-thumb {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8cd75 0%, #c5a059 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  position: relative;
  z-index: 5;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
  touch-action: none;
  transition: box-shadow 0.2s;
}

.slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 18px var(--gold-glow);
}

.thumb-icon {
  font-size: 1.8rem;
  color: #111113;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px) translateX(1px);
  user-select: none;
}

/* ================= STAGE 2: BÁNH KEM MỆNH THỔ, 2 SIÊU XE & LÔI ĐẾ THÁNH KIẾM ================= */
.cake-3d-scene {
  position: relative;
  width: 100%;
  height: 380px;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  touch-action: manipulation;
}

.cake-3d-stage {
  position: relative;
  width: 270px;
  height: 270px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(0deg);
  transition: transform 0.6s ease;
}

.cake-3d-stage.spinning {
  animation: spinCake3D 14s linear infinite;
}

@keyframes spinCake3D {
  0% { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}

/* Hiệu ứng xẻ bánh kem sau nhát chém */
.cake-3d-stage.cake-split {
  animation: cakeSplitApart 1.2s forwards cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cakeSplitApart {
  0% { transform: rotateX(-22deg) rotateY(0deg) scale(1); filter: brightness(1); }
  30% { transform: rotateX(-22deg) rotateY(20deg) scale(1.12); filter: brightness(2.2) drop-shadow(0 0 35px #ffd700); }
  70% { transform: rotateX(-22deg) rotateY(40deg) scale(1.05) translateY(40px); opacity: 0.8; }
  100% { transform: rotateX(-22deg) rotateY(60deg) scale(0.6) translateY(160px); opacity: 0; }
}

/* Tier 3D base styles */
.tier-3d {
  position: absolute;
  transform-style: preserve-3d;
}

.tier-base-3d {
  width: 270px;
  height: 270px;
  left: 0;
  top: 0;
  transform: translateY(50px);
}

.tier-top-3d {
  width: 190px;
  height: 190px;
  left: 40px;
  top: 40px;
  transform: translateY(-26px);
}

/* Circular Caps (Top & Base) - Đơn Sắc Mệnh Thổ */
.tier-cap {
  position: absolute;
  border-radius: 50%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.tier-top-cap {
  transform: rotateX(90deg) translateZ(34px);
  width: 202px;
  height: 202px;
  left: -6px;
  top: -6px;
  background: radial-gradient(circle, #f9f1e4 20%, #d4b896 65%, #9e7f5b 100%);
  border: 3px solid var(--gold-accent);
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.45);
}

.cap-top-monochrome {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9ef 10%, #ecd8b8 50%, #bfa27e 100%);
}

.cap-gold-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(212, 175, 55, 0.9);
  box-shadow: 0 0 16px var(--gold-glow);
  pointer-events: none;
}

/* Mặt đĩa trên tầng 1 (bậc đỡ tầng 2) - KHÔNG CÓ VIỀN CẮT NGANG THÂN */
.tier-base-cap {
  transform: rotateX(90deg) translateZ(38px);
  width: 282px;
  height: 282px;
  left: -6px;
  top: -6px;
  background: radial-gradient(circle, #6d5540 30%, #423224 75%, #2a1f16 100%);
  border: 2px solid var(--gold-accent);
}

.cap-base-monochrome {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #5e4735 40%, #3a2b1f 100%);
}

/* Đáy tầng 1 */
.tier-base-bottom-cap {
  transform: rotateX(90deg) translateZ(-38px);
  background: #231a13;
  border: 2px solid #5a4231;
}

/* Cylinder Panels - Đơn Sắc Mịn Màng Phong Thủy */
.cylinder-panels {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Tầng dưới: 8 mặt Nâu Đất Hoàng Gia (Royal Earth Warm Brown) */
.tier-base-panels .panel {
  position: absolute;
  width: 112px;
  height: 76px;
  left: 79px;
  top: 97px;
  overflow: hidden;
  border-top: 3px solid #d4af37;
  border-bottom: 3px solid #d4af37;
  border-left: 1px solid rgba(212, 175, 55, 0.35);
  border-right: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  backface-visibility: hidden;
  background: linear-gradient(180deg, #6c543f 0%, #443425 100%);
}

.tier-base-panels .panel-frosting {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #6c543f 0%, #433324 85%, #2c2117 100%);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45);
}

.tier-base-panels .panel.p0 { transform: rotateY(0deg) translateZ(130px); }
.tier-base-panels .panel.p1 { transform: rotateY(45deg) translateZ(130px); }
.tier-base-panels .panel.p2 { transform: rotateY(90deg) translateZ(130px); }
.tier-base-panels .panel.p3 { transform: rotateY(135deg) translateZ(130px); }
.tier-base-panels .panel.p4 { transform: rotateY(180deg) translateZ(130px); }
.tier-base-panels .panel.p5 { transform: rotateY(225deg) translateZ(130px); }
.tier-base-panels .panel.p6 { transform: rotateY(270deg) translateZ(130px); }
.tier-base-panels .panel.p7 { transform: rotateY(315deg) translateZ(130px); }

/* Tầng trên: 8 mặt Vàng Cát Kim Sa (Champagne Sand Gold) */
.tier-top-panels .panel {
  position: absolute;
  width: 78px;
  height: 68px;
  left: 56px;
  top: 61px;
  overflow: hidden;
  border-top: 3px solid #ffd54f;
  border-bottom: 3px solid #d4af37;
  border-left: 1px solid rgba(255, 230, 160, 0.35);
  border-right: 1px solid rgba(255, 230, 160, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden;
  background: linear-gradient(180deg, #caa985 0%, #9a7a58 100%);
}

.tier-top-panels .panel-frosting {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #d8bea0 0%, #b2916f 75%, #88694b 100%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.tier-top-panels .panel.p0 { transform: rotateY(0deg) translateZ(91px); }
.tier-top-panels .panel.p1 { transform: rotateY(45deg) translateZ(91px); }
.tier-top-panels .panel.p2 { transform: rotateY(90deg) translateZ(91px); }
.tier-top-panels .panel.p3 { transform: rotateY(135deg) translateZ(91px); }
.tier-top-panels .panel.p4 { transform: rotateY(180deg) translateZ(91px); }
.tier-top-panels .panel.p5 { transform: rotateY(225deg) translateZ(91px); }
.tier-top-panels .panel.p6 { transform: rotateY(270deg) translateZ(91px); }
.tier-top-panels .panel.p7 { transform: rotateY(315deg) translateZ(91px); }

/* ĐẾ BÁNH KEM HOÀNG GIA - NẰM HOÀN TOÀN DƯỚI ĐÁY TẦNG 1 KHÔNG CẮT NGANG THÂN */
.cake-stand-3d {
  position: absolute;
  width: 270px;
  height: 270px;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: rotateX(90deg) translateZ(-39px);
  background: radial-gradient(circle, #251e18 55%, #120f0c 100%);
  border: 2px solid var(--gold-accent);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 25px 50px rgba(0, 0, 0, 0.95);
}

/* Hitbox bao trọn nến & đỉnh bánh kem — Đảm bảo chạm góc nào, kể cả khi bánh xoay ra sau, cũng thổi nến 100% trúng */
.candle-hitbox-overlay {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 200px;
  z-index: 120;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}

/* ================= CÂY NẾN KHỐI TRỤ 3D LẬP THỂ (ĐƯỜNG KÍNH NHỎ 0.5 & ĐẶT SÁT MẶT BÁNH) ================= */
.candle-wrapper-3d {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(-61px);
  transform-style: preserve-3d;
  width: 20px;
  height: 85px;
  cursor: pointer;
  z-index: 150;
  touch-action: manipulation;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.candle-wrapper-3d.candle-vanished {
  opacity: 0 !important;
  transform: translate(-50%, -50%) translateY(-35px) scale(0.2) !important;
  pointer-events: none;
}

/* Đĩa đỡ nến mạ vàng phẳng đặt sát mặt bánh kem tầng trên */
.candle-gold-tray {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -10px;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: rotateX(90deg);
  background: radial-gradient(circle, #fff9c4 15%, #ffd54f 55%, #b8860b 85%, #5d4037 100%);
  border: 1.5px solid #ffd54f;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Khối trụ 3D lăng trụ 12 mặt sắc nét (Đường kính nhỏ 12px = 0.5 bản trước) */
.candle-3d-cylinder {
  position: absolute;
  left: 50%;
  top: -46px;
  margin-left: -6px;
  width: 12px;
  height: 46px;
  transform-style: preserve-3d;
}

/* 12 mặt lăng trụ quấn quanh tâm Z=5.8px */
.candle-3d-cylinder .c-face {
  position: absolute;
  width: 3.5px;
  height: 46px;
  left: 50%;
  top: 0;
  margin-left: -1.75px;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #7a5800;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.4);
  backface-visibility: hidden;
}

.candle-3d-cylinder .c-face.cf0  { transform: rotateY(0deg) translateZ(5.8px); background: linear-gradient(180deg, #fffef5 0%, #fff8e1 40%, #ffd54f 85%, #b8860b 100%); }
.candle-3d-cylinder .c-face.cf1  { transform: rotateY(30deg) translateZ(5.8px); background: linear-gradient(180deg, #fffde7 0%, #ffecb3 40%, #ffca28 85%, #a67c00 100%); }
.candle-3d-cylinder .c-face.cf2  { transform: rotateY(60deg) translateZ(5.8px); background: linear-gradient(180deg, #fff9c4 0%, #ffe082 40%, #ffb300 85%, #8f6800 100%); }
.candle-3d-cylinder .c-face.cf3  { transform: rotateY(90deg) translateZ(5.8px); background: linear-gradient(180deg, #fff59d 0%, #ffd54f 40%, #ffa000 85%, #7a5800 100%); }
.candle-3d-cylinder .c-face.cf4  { transform: rotateY(120deg) translateZ(5.8px); background: linear-gradient(180deg, #ffe082 0%, #ffca28 40%, #ff8f00 85%, #664800 100%); }
.candle-3d-cylinder .c-face.cf5  { transform: rotateY(150deg) translateZ(5.8px); background: linear-gradient(180deg, #ffd54f 0%, #ffb300 40%, #e65100 85%, #523700 100%); }
.candle-3d-cylinder .c-face.cf6  { transform: rotateY(180deg) translateZ(5.8px); background: linear-gradient(180deg, #ffca28 0%, #ffa000 40%, #bf360c 85%, #3d2600 100%); }
.candle-3d-cylinder .c-face.cf7  { transform: rotateY(210deg) translateZ(5.8px); background: linear-gradient(180deg, #ffd54f 0%, #ffb300 40%, #e65100 85%, #523700 100%); }
.candle-3d-cylinder .c-face.cf8  { transform: rotateY(240deg) translateZ(5.8px); background: linear-gradient(180deg, #ffe082 0%, #ffca28 40%, #ff8f00 85%, #664800 100%); }
.candle-3d-cylinder .c-face.cf9  { transform: rotateY(270deg) translateZ(5.8px); background: linear-gradient(180deg, #fff59d 0%, #ffd54f 40%, #ffa000 85%, #7a5800 100%); }
.candle-3d-cylinder .c-face.cf10 { transform: rotateY(300deg) translateZ(5.8px); background: linear-gradient(180deg, #fff9c4 0%, #ffe082 40%, #ffb300 85%, #8f6800 100%); }
.candle-3d-cylinder .c-face.cf11 { transform: rotateY(330deg) translateZ(5.8px); background: linear-gradient(180deg, #fffde7 0%, #ffecb3 40%, #ffca28 85%, #a67c00 100%); }

/* Nắp sáp trên của khối trụ (Wax Top Cap) */
.candle-3d-cylinder .c-top-wax {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 0;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  transform: rotateX(90deg);
  background: radial-gradient(circle, #ffffff 15%, #fff9c4 45%, #ffd54f 80%, #b8860b 100%);
  border: 1px solid #ffd54f;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), inset 0 0 2px rgba(0,0,0,0.4);
}

.c-top-wax .wax-crater {
  position: absolute;
  width: 3px;
  height: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #1a1208 40%, #8c6d37 100%);
}

/* Tim nến 3D mọc thẳng lên từ nắp sáp */
.candle-3d-wick {
  position: absolute;
  left: 50%;
  top: -53px;
  margin-left: -1px;
  width: 2px;
  height: 8px;
  background: linear-gradient(180deg, #111111 0%, #3e2723 60%, #b8860b 100%);
  border-radius: 1px;
  box-shadow: 0 0 4px #ff5722;
  z-index: 10;
}

/* Ngọn lửa 3D lập thể 3 mặt giao thoa (0deg, 60deg, 120deg) + quầng sáng đa chiều */
.candle-3d-flame {
  position: absolute;
  left: 50%;
  top: -76px;
  margin-left: -7px;
  width: 14px;
  height: 26px;
  transform-style: preserve-3d;
  animation: flameFlicker3D 1.3s infinite alternate ease-in-out;
  pointer-events: none;
  z-index: 20;
}

@keyframes flameFlicker3D {
  0% { transform: scale(1) rotateY(0deg) rotateZ(-1deg); }
  50% { transform: scale(1.08) rotateY(15deg) rotateZ(1.5deg); }
  100% { transform: scale(0.96) rotateY(-15deg) rotateZ(-2deg); }
}

.candle-3d-flame .flame-plane {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 11px;
  height: 25px;
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 65%, #ffffff 0%, #fff59d 25%, #ff9800 65%, #e65100 100%);
  box-shadow: 0 0 14px #ff9800, 0 0 28px rgba(255, 152, 0, 0.9);
  backface-visibility: visible;
}

.candle-3d-flame .flame-plane.plane-0   { transform: translateX(-50%) rotateY(0deg); }
.candle-3d-flame .flame-plane.plane-60  { transform: translateX(-50%) rotateY(60deg); }
.candle-3d-flame .flame-plane.plane-120 { transform: translateX(-50%) rotateY(120deg); }

.candle-3d-flame .flame-glow-sphere {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fff176 35%, rgba(255, 152, 0, 0.7) 70%, transparent 100%);
  box-shadow: 0 0 20px 8px rgba(255, 170, 0, 0.8);
  filter: blur(1.2px);
  pointer-events: none;
}

/* ================= 2 MÔ HÌNH XE ĐẶT TRÊN BÁNH KEM (MÔ HÌNH BAN ĐẦU) ================= */
.car-model-stand {
  position: absolute;
  transform-style: preserve-3d;
  cursor: pointer;
  z-index: 45;
  transition: transform 0.3s ease;
}

.car-model-stand.car-jeep {
  left: -15px;
  top: 130px;
  width: 110px;
  height: 85px;
  transform: translateZ(135px) rotateY(-20deg) rotateX(10deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85));
}

.car-model-stand.car-bmw {
  right: -10px;
  top: 130px;
  width: 120px;
  height: 85px;
  transform: translateZ(135px) rotateY(20deg) rotateX(10deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85));
}

.car-body-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.car-svg {
  width: 100%;
  height: auto;
  display: block;
}

.car-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffd54f;
  background: rgba(22, 19, 16, 0.95);
  border: 1px solid #d4af37;
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0.6px;
  margin-top: -6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* ================= LÔI ĐẾ THÁNH KIẾM & VỎ KIẾM (CÁCH XA BÁNH KEM) ================= */
.holy-weapon-system {
  position: absolute;
  right: -35px;
  top: -20px;
  width: 100px;
  height: 380px;
  z-index: 85;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.6s ease, transform 0.6s ease;
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9));
}

.holy-weapon-system.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px) scale(0.85);
}

.holy-weapon-system.ready {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: weaponFloat 2.8s infinite ease-in-out alternate;
}

@keyframes weaponFloat {
  0% { transform: translateY(0px) rotate(-8deg); }
  100% { transform: translateY(-14px) rotate(-4deg); }
}

/* Vỏ kiếm - Nằm phía trước bao bọc toàn bộ lưỡi kiếm */
.sheath-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}

.sheath-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sheath-wrapper.sheath-drop {
  transform: translateY(120px) rotate(-20deg);
  opacity: 0;
  pointer-events: none;
}

/* Thân kiếm - Nằm bên trong vỏ */
.sword-blade-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  transition: transform 0.5s ease;
}

.sword-blade-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hiệu ứng rút kiếm khỏi vỏ: Kiếm trượt mạnh LÊN TRÊN, lộ toàn bộ lưỡi kiếm */
.sword-blade-wrapper.drawing {
  animation: swordDrawOut 0.55s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes swordDrawOut {
  0% { transform: translateY(0) scale(1); }
  60% { transform: translateY(-220px) scale(1.15) rotate(5deg); filter: drop-shadow(0 0 35px #ffffff); }
  100% { transform: translateY(-240px) scale(1.2) rotate(10deg); }
}

/* Hiệu ứng kiếm bay múa cuồng phong quanh bánh kem */
.sword-blade-wrapper.flying-wild {
  animation: swordWildFlight 1.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes swordWildFlight {
  0% { transform: translate(0, -110px) rotate(12deg) scale(1.2); }
  20% { transform: translate(-140px, -70px) rotate(-45deg) scale(1.35); }
  40% { transform: translate(-260px, 40px) rotate(-110deg) scale(1.4); }
  60% { transform: translate(-160px, 140px) rotate(-190deg) scale(1.3); }
  80% { transform: translate(-40px, 60px) rotate(-260deg) scale(1.45); }
  100% { transform: translate(-150px, -20px) rotate(-315deg) scale(1.3); }
}

/* Hiệu ứng nhát chém kiếm */
.sword-blade-wrapper.slashing-cut {
  animation: swordRapidSlash 0.4s forwards ease-out;
}

@keyframes swordRapidSlash {
  0% { transform: translate(-80px, -60px) rotate(-30deg) scale(1.4); }
  50% { transform: translate(-160px, 60px) rotate(-65deg) scale(1.5); filter: drop-shadow(0 0 45px #fff); }
  100% { transform: translate(-220px, 140px) rotate(-85deg) scale(1.2); opacity: 0; }
}

/* ================= 5 VỆT KIẾM KHÍ LIÊN HOÀN (SWORD SLASH BEAMS) ================= */
.sword-slash-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent 0%, #ffffff 25%, #ffd700 75%, transparent 100%);
  box-shadow: 0 0 35px #ffd700, 0 0 65px rgba(255, 215, 0, 0.95);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
}

.sword-slash-beam.slash-1.active {
  animation: slashBeam1 0.45s forwards ease-out;
}
@keyframes slashBeam1 {
  0% { transform: translate(-50%, -50%) rotate(-40deg); width: 0; opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-40deg); width: 360px; opacity: 0; }
}

.sword-slash-beam.slash-2.active {
  animation: slashBeam2 0.45s forwards ease-out;
}
@keyframes slashBeam2 {
  0% { transform: translate(-50%, -50%) rotate(40deg); width: 0; opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(40deg); width: 360px; opacity: 0; }
}

.sword-slash-beam.slash-3.active {
  animation: slashBeam3 0.45s forwards ease-out;
}
@keyframes slashBeam3 {
  0% { transform: translate(-50%, -50%) rotate(0deg); width: 0; opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg); width: 380px; opacity: 0; }
}

.sword-slash-beam.slash-4.active {
  animation: slashBeam4 0.45s forwards ease-out;
}
@keyframes slashBeam4 {
  0% { transform: translate(-50%, -50%) rotate(90deg); width: 0; opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(90deg); width: 380px; opacity: 0; }
}

.sword-slash-beam.slash-5.active {
  animation: slashBeam5 0.75s forwards ease-out;
}
@keyframes slashBeam5 {
  0% { transform: translate(-50%, -50%) rotate(-45deg); width: 0; height: 10px; opacity: 1; }
  40% { transform: translate(-50%, -50%) rotate(-45deg); width: 420px; height: 12px; opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-45deg); width: 440px; height: 2px; opacity: 0; }
}

/* ================= BÙNG NỔ ẢNH TỔNG HỢP BAY VÀO MÀN HÌNH (THỜI GIAN NGẮM LÂU HƠN) ================= */
.photo-burst-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
}

.photo-burst-container.hidden {
  display: none !important;
}

.burst-glow-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 100px 50px rgba(255, 215, 0, 0.9), 0 0 160px 80px rgba(255, 255, 255, 0.8);
  animation: coreFlash 1.6s forwards ease-out;
}

@keyframes coreFlash {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}

.burst-cards-cluster {
  position: relative;
  width: 100%;
  height: 100%;
}

.burst-card {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--gold-accent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 175, 55, 0.6);
  background: #181716;
}

.burst-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 5 thẻ ảnh vệ tinh bung tỏa ra xung quanh (Dừng lại lâu hơn để ngắm) */
.photo-burst-container.fly-active .b-card-1 {
  width: 90px;
  height: 120px;
  animation: burstFly1 3.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes burstFly1 {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  25% { transform: translate(-170px, -140px) scale(1) rotate(-15deg); opacity: 1; }
  75% { transform: translate(-175px, -145px) scale(1.02) rotate(-16deg); opacity: 1; }
  100% { transform: translate(-230px, -180px) scale(0.85) rotate(-25deg); opacity: 0; }
}

.photo-burst-container.fly-active .b-card-2 {
  width: 90px;
  height: 120px;
  animation: burstFly2 3.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes burstFly2 {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  25% { transform: translate(80px, -150px) scale(1) rotate(18deg); opacity: 1; }
  75% { transform: translate(85px, -155px) scale(1.02) rotate(19deg); opacity: 1; }
  100% { transform: translate(140px, -200px) scale(0.85) rotate(30deg); opacity: 0; }
}

.photo-burst-container.fly-active .b-card-3 {
  width: 90px;
  height: 120px;
  animation: burstFly3 3.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes burstFly3 {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  25% { transform: translate(-160px, 70px) scale(1) rotate(-8deg); opacity: 1; }
  75% { transform: translate(-165px, 75px) scale(1.02) rotate(-9deg); opacity: 1; }
  100% { transform: translate(-220px, 110px) scale(0.85) rotate(-16deg); opacity: 0; }
}

.photo-burst-container.fly-active .b-card-4 {
  width: 95px;
  height: 125px;
  animation: burstFly4 3.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes burstFly4 {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  25% { transform: translate(70px, 80px) scale(1) rotate(12deg); opacity: 1; }
  75% { transform: translate(75px, 85px) scale(1.02) rotate(13deg); opacity: 1; }
  100% { transform: translate(130px, 120px) scale(0.85) rotate(22deg); opacity: 0; }
}

.photo-burst-container.fly-active .b-card-5 {
  width: 85px;
  height: 115px;
  animation: burstFly5 3.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes burstFly5 {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  25% { transform: translate(-60px, -170px) scale(1) rotate(-6deg); opacity: 1; }
  75% { transform: translate(-65px, -175px) scale(1.02) rotate(-7deg); opacity: 1; }
  100% { transform: translate(-80px, -230px) scale(0.85) rotate(-10deg); opacity: 0; }
}

/* Thẻ ảnh trung tâm BAY THẲNG ÁP SÁT MÀN HÌNH (Dừng lại 2s để nhìn rõ mặt) */
.b-card-center {
  width: 170px;
  height: 230px;
  z-index: 10;
  border: 3px solid #ffd54f;
  box-shadow: 0 0 45px rgba(255, 215, 0, 0.9), 0 10px 40px rgba(0, 0, 0, 0.95);
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
}

.burst-gold-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 18, 15, 0.9);
  border: 1px solid #d4af37;
  color: #ffd54f;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.photo-burst-container.fly-active .b-card-center {
  animation: flyIntoScreen 4.2s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flyIntoScreen {
  0% { transform: translate(-50%, -50%) scale(0.1) rotate(0deg); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.18) rotate(-2deg); opacity: 1; }
  72% { transform: translate(-50%, -50%) scale(1.22) rotate(1deg); opacity: 1; filter: blur(0px); }
  88% { transform: translate(-50%, -50%) scale(2.2); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; filter: blur(8px); }
}

/* Sword Instruction Text Pulse */
.sword-instruction {
  margin-top: 10px;
}

.sword-instruction.hidden {
  display: none !important;
}

.sword-hint-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-accent);
  background: rgba(38, 34, 28, 0.9);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff8e1;
  letter-spacing: 0.4px;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.45);
  animation: pulseSwordHint 1.8s infinite ease-in-out;
  cursor: pointer;
}

@keyframes pulseSwordHint {
  0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); }
  50% { transform: scale(1.04); box-shadow: 0 0 30px rgba(212, 175, 55, 0.6); }
}

.candle-stick {
  width: 6px;
  height: 36px;
  background: linear-gradient(to right, #e8cd75, #c5a059);
  border-radius: 3px;
}

.candle-flame {
  width: 12px;
  height: 22px;
  background: radial-gradient(ellipse at bottom, #fff 10%, #ffd000 45%, #e65100 85%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  box-shadow: 0 0 16px 6px rgba(255, 180, 0, 0.7), 0 0 30px 10px rgba(212, 175, 55, 0.3);
  animation: flickerFlame 0.18s infinite alternate;
  transform-origin: center bottom;
  margin-bottom: 2px;
  transition: all 0.4s ease;
}

@keyframes flickerFlame {
  0% { transform: scale(1) rotate(-1deg); }
  100% { transform: scale(1.04) rotate(1.5deg); }
}

.candle-flame.blown-out {
  opacity: 0;
  transform: scale(0.1);
  box-shadow: none;
}

.smoke {
  position: absolute;
  top: -8px;
  width: 6px;
  height: 20px;
  background: rgba(180, 180, 180, 0.6);
  border-radius: 50%;
  filter: blur(3px);
  opacity: 0;
}

.smoke.active {
  animation: riseSmoke 1.4s forwards;
}

@keyframes riseSmoke {
  0% { opacity: 0.7; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-35px) scale(3) rotate(-10deg); }
}

.cake-text-box {
  margin-top: 14px;
}

.sub-message {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-weight: 300;
}

.candle-instruction {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--earth-border);
  background: rgba(38, 36, 34, 0.5);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  animation: pulseInstruction 2s infinite ease-in-out;
}

@keyframes pulseInstruction {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; border-color: var(--gold-accent); }
}

/* ================= STAGE 3: TRANSITION & FAMILY PHOTO ================= */
.family-photo-wrapper {
  width: 100%;
  max-width: 320px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--earth-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.15);
  margin: 10px auto 14px auto;
  background: #181716;
  position: relative;
}

.family-photo-wrapper.clickable {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.family-photo-wrapper.clickable:active {
  transform: scale(0.98);
}

.photo-tap-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(18, 18, 20, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--earth-border);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 14px;
  letter-spacing: 0.5px;
  pointer-events: none;
  animation: pulseHint 2s infinite ease-in-out;
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); border-color: var(--gold-accent); }
}

.family-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.touching-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 360px;
  margin: 12px auto 18px auto;
  font-weight: 300;
}

.tap-photo-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 10px 22px;
  border-radius: 24px;
  background: rgba(38, 36, 34, 0.6);
  border: 1px dashed var(--earth-border);
  color: var(--gold-light);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tap-photo-note:hover,
.tap-photo-note:active {
  background: rgba(48, 44, 40, 0.85);
  border-color: var(--gold-accent);
  border-style: solid;
  transform: translateY(-1px);
}

/* ================= STAGE 4: VIP MINIMAL CARDS ================= */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  margin: 16px 0 24px 0;
  perspective: 1000px;
}

.flip-card {
  background-color: transparent;
  height: 224px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  border-radius: 10px;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--earth-border);
}

.flip-card-front {
  background: linear-gradient(160deg, #242220 0%, #161514 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.flip-card-front:hover {
  border-color: var(--gold-accent);
}

.card-num {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold-accent);
  letter-spacing: 1px;
}

.front-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 10px;
}

.front-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.tap-hint {
  font-size: 0.68rem;
  color: var(--gold-light);
  opacity: 0.7;
  letter-spacing: 0.5px;
}

/* Card Back */
.flip-card-back {
  background: #181716;
  border: 1px solid var(--gold-accent);
  transform: rotateY(180deg);
  padding: 8px 6px 10px 6px;
  justify-content: flex-start;
  box-shadow: 0 0 15px var(--gold-glow);
}

.back-img-wrap {
  width: 100%;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.back-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--gold-light);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.back-text {
  font-size: 0.68rem;
  line-height: 1.38;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 2px;
  word-break: break-word;
}

.cards-counter {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 6px;
}

.cards-counter span {
  color: var(--gold-accent);
  font-weight: 600;
}

/* ================= STAGE 5: PHOTO MOSAIC HEART ================= */
.heart-mosaic-wrapper {
  position: relative;
  width: min(365px, calc(100vw - 28px));
  height: min(345px, calc((100vw - 28px) * 0.94));
  margin: 0 auto;
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.28));
}

.heart-shape {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 4px;
  width: 100%;
  height: 100%;
  padding: 4px;
}

.heart-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.heart-tile:hover {
  transform: scale(1.1);
  border-color: var(--gold-accent);
  z-index: 5;
}

.heart-tile.empty {
  visibility: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
}

.heart-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 18px; }

/* ================= STAGE 6: CAROUSEL SLIDESHOW ================= */
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 335px;
  margin: 14px auto;
  display: flex;
  align-items: center;
}

.carousel-track-wrapper {
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  border: 1px solid var(--earth-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  background: #181716;
}

.carousel-slide img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.carousel-slide img.pos-top {
  object-position: center top !important;
}

.carousel-slide img.pos-high {
  object-position: center 10% !important;
}

.slide-caption {
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-secondary);
  background: rgba(18, 18, 20, 0.85);
  letter-spacing: 0.3px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--earth-border);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
}

.prev-btn { left: -12px; }
.next-btn { right: -12px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.carousel-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s;
}

.carousel-dots .dot.active {
  background: var(--gold-accent);
  width: 16px;
  border-radius: 3px;
}

/* ================= STAGE 7: MINIMALIST LETTER ================= */
.letter-sheet {
  position: relative;
  background: #1a1918;
  color: var(--text-main);
  border-radius: 8px;
  padding: 26px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 360px;
  width: 100%;
  margin: 16px auto 0 auto;
  border: 1px solid var(--earth-border);
  text-align: left;
}

.letter-header-line {
  width: 30px;
  height: 2px;
  background: var(--gold-accent);
  margin-bottom: 16px;
}

.letter-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--gold-light);
  margin-bottom: 12px;
}

.letter-body {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 300;
}

.letter-signature {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: var(--gold-accent);
  text-align: right;
  margin-top: 20px;
}

/* ================= STAGE 8: SHOOTING STAR ================= */
.wish-form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
  width: 100%;
}

.wish-input-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin-top: 16px;
}

.wish-input-box input {
  padding: 13px 16px;
  border-radius: 6px;
  border: 1px solid var(--earth-border);
  background: rgba(28, 27, 26, 0.7);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  text-align: center;
  transition: all 0.25s;
}

.wish-input-box input:focus {
  border-color: var(--gold-accent);
  box-shadow: 0 0 12px var(--gold-glow);
}

.wish-input-box input::placeholder {
  color: var(--text-muted);
}

.wish-privacy-note {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 290px;
  margin: 14px auto 0 auto;
  font-weight: 300;
  opacity: 0.85;
  letter-spacing: 0.2px;
}

.privacy-icon {
  margin-right: 3px;
  font-size: 0.8rem;
}

/* Cosmic Flash & Epic Meteor Shower */
.cosmic-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.28) 0%, rgba(255, 255, 255, 0.12) 40%, transparent 80%);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cosmic-flash.active {
  animation: cosmicPulse 3.5s forwards ease-out;
}

@keyframes cosmicPulse {
  0% { opacity: 0; }
  15% { opacity: 0.95; }
  45% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* Thẻ Kết Quả Ước Nguyện — Nằm Chính Giữa Màn Hình */
.star-result-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58vh;
  width: 100%;
  animation: fadeIn 0.8s ease;
}

.star-result-container.hidden {
  display: none !important;
}

.star-result-box {
  background: rgba(28, 27, 26, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold-accent);
  border-radius: 14px;
  padding: 30px 24px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  box-shadow: 0 0 45px rgba(212, 175, 55, 0.4), inset 0 0 25px rgba(212, 175, 55, 0.12);
  animation: fadeIn 0.8s ease;
  text-align: center;
}

.star-sparkle-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: inline-block;
  animation: sparkleRotate 3s infinite ease-in-out;
}

@keyframes sparkleRotate {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.15) rotate(15deg); opacity: 1; }
}

.star-result-title {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  text-shadow: 0 0 15px var(--gold-glow);
}

.star-result-text {
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--text-secondary);
  font-weight: 300;
  margin-bottom: 8px;
}

/* ================= STAGE 9: FINAL SCREEN ================= */
.final-card {
  background: rgba(28, 27, 26, 0.88);
  backdrop-filter: blur(16px);
  border: 1px solid var(--earth-border);
  border-radius: 16px;
  padding: 24px 18px;
  margin: 16px auto 0 auto;
  max-width: 350px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.8s ease;
}

.final-avatar-wrap {
  width: 210px;
  height: 290px;
  max-width: 72vw;
  border-radius: 14px;
  margin: 0 auto 16px auto;
  overflow: hidden;
  border: 2px solid var(--gold-accent);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6);
}

.final-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
}

.final-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: 0.8px;
}

.final-tagline {
  font-size: 0.76rem;
  color: var(--gold-accent);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.final-divider {
  width: 40px;
  height: 1px;
  background: var(--gold-accent);
  margin: 14px auto;
  opacity: 0.5;
}

.final-msg {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-weight: 300;
}

/* Confetti Piece - Subtle Gold Dust */
.confetti-piece {
  position: absolute;
  width: 6px;
  height: 8px;
  opacity: 0.85;
  animation: confettiFall 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}