* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; overflow: hidden; }
body { font-family: 'Cormorant Garamond', Georgia, serif; background: #0a0a0f; color: #fff; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes typewriterCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes particleDrift {
  0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10% { opacity: 1; scale: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-10vh) translateX(40px) scale(0.5); opacity: 0; }
}
@keyframes particleDrift2 {
  0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10% { opacity: 0.8; scale: 1; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-10vh) translateX(-30px) scale(0.3); opacity: 0; }
}
@keyframes glow {
  0%, 100% { text-shadow: 0 0 20px rgba(212,175,55,0.5), 0 0 40px rgba(212,175,55,0.3); }
  50% { text-shadow: 0 0 30px rgba(212,175,55,0.8), 0 0 60px rgba(212,175,55,0.5), 0 0 80px rgba(212,175,55,0.3); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(212,175,55,0.3); }
  50% { box-shadow: 0 0 30px rgba(212,175,55,0.6), 0 0 50px rgba(212,175,55,0.2); }
}
@keyframes ripple {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212,175,55,0.4); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(212,175,55,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
@keyframes heartFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
}
@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-5px, 2px) skew(2deg); }
  40% { clip-path: inset(40% 0 20% 0); transform: translate(5px, -2px) skew(-1deg); }
  60% { clip-path: inset(60% 0 10% 0); transform: translate(-3px, 1px); }
  80% { clip-path: inset(10% 0 80% 0); transform: translate(3px, -1px) skew(1deg); }
}
@keyframes whiteFlash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255,215,0,0.9), rgba(255,215,0,0));
  border-radius: 50%;
  pointer-events: none;
}

.title-glow {
  animation: glow 3s ease-in-out infinite;
}

.btn-divine {
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(255,215,0,0.1));
  border: 1px solid rgba(212,175,55,0.4);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  animation: pulseGlow 3s ease-in-out infinite;
}
.btn-divine:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.4), rgba(255,215,0,0.25));
  border-color: rgba(255,215,0,0.7);
  transform: scale(1.03);
  box-shadow: 0 0 30px rgba(212,175,55,0.5);
}

.choice-btn {
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(255,215,0,0.08));
  border: 1px solid rgba(212,175,55,0.35);
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}
.choice-btn:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.35), rgba(255,215,0,0.2));
  border-color: rgba(255,215,0,0.7);
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(212,175,55,0.4);
}
.choice-btn.selected {
  animation: ripple 0.6s ease;
}

.dialogue-box {
  background: linear-gradient(180deg, rgba(10,10,20,0.85), rgba(5,5,15,0.92));
  border-top: 2px solid rgba(212,175,55,0.5);
  backdrop-filter: blur(15px);
}

.speaker-tag {
  background: linear-gradient(135deg, rgba(20,20,30,0.9), rgba(10,10,20,0.95));
  border: 1px solid rgba(212,175,55,0.4);
  border-bottom: none;
}

.img-loading {
  background: linear-gradient(90deg, rgba(212,175,55,0.05) 0%, rgba(212,175,55,0.15) 50%, rgba(212,175,55,0.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.scene-transition {
  animation: whiteFlash 1.2s ease-out forwards;
}

.glitch-effect {
  animation: glitch1 0.3s ease infinite;
}

.heart-anim {
  animation: heartFloat 1.2s ease-out forwards;
  pointer-events: none;
  position: absolute;
  font-size: 24px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.4); border-radius: 3px; }