/* CNY Predictions 2026 - Auspicious Theme */
* { font-family: 'Lato', system-ui, sans-serif; }
body { background-color: #fff9f0; color: #3e2723; overflow-x: hidden; }
.font-display { font-family: 'Lato', system-ui, sans-serif; }

/* Zodiac card */
.zodiac-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #fcc200;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(230, 0, 18, 0.05);
}
.zodiac-card:hover {
  border-color: #e60012;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(230, 0, 18, 0.15);
}

/* Score bars */
.score-bar-bg { height: 8px; background: #ffeec0; border-radius: 999px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e60012, #fcc200); transition: width 1s ease; }

/* Star ratings */
.star-filled { color: #fcc200; }
.star-empty { color: #ffeec0; }

/* CNY glow */
.cny-glow { text-shadow: 0 0 10px rgba(252, 194, 0, 0.4); }
.cny-red-glow { text-shadow: 0 0 10px rgba(230, 0, 18, 0.2); }

/* Zodiac emoji */
.zodiac-emoji { font-size: 2.5rem; transition: transform 0.3s ease; }
.zodiac-card:hover .zodiac-emoji { transform: scale(1.1); }

/* Compare panel */
.compare-panel { background: #ffffff; border: 1px solid #fcc200; border-radius: 12px; }

/* Lantern float */
@keyframes lanternFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.lantern-float { animation: lanternFloat 4s ease-in-out infinite; }

/* Input */
.cny-input {
  background: #ffffff;
  border: 1px solid #fcc200;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  color: #3e2723;
  font-size: 1rem;
  transition: border-color 0.3s;
  width: 100%;
}
.cny-input:focus { border-color: #e60012; outline: none; box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.15); }
.cny-input::placeholder { color: #8d6e63; }

/* Prediction detail */
.prediction-detail { background: #ffffff; border: 1px solid #fcc200; border-radius: 12px; padding: 1.5rem; }

/* Ornate border */
.cny-ornate-border { border: 1px solid #fcc200; border-radius: 12px; }

/* Scroll reveal */
[data-scroll-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-scroll-reveal].revealed { opacity: 1; transform: translateY(0); }

/* Marquee */
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.zodiac-marquee { animation: marqueeScroll 30s linear infinite; }

/* Sparkle */
@keyframes sparkle { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.sparkle { animation: sparkle 2s ease-in-out infinite; }

/* Link hover */
.link-creative { position: relative; color: #e60012; }
.link-creative::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #e60012; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; }
.link-creative:hover::after { transform: scaleX(1); transform-origin: left; }

/* Button */
.btn-creative { position: relative; overflow: hidden; transition: all 0.3s ease; }

html { scroll-behavior: smooth; }
::selection { background: #e60012; color: #FFF; }

@media (max-width: 768px) {
  .zodiac-emoji { font-size: 2rem; }
  .zodiac-card { padding: 1rem; }
}