/* Tết Theme Styles */
body {
  /* Banner at top, Main Background below */
  /* Added rgba(0,0,0,0.4) overlay to darken the busy background images */
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("../images/tet/bg-tet-main.png") no-repeat center top fixed !important;
  background-size: cover !important;
  color: #fff;
  font-family: "Inter", sans-serif;
}

/* Header Adjustments */
.header {
  /* Solid Dark Red to separate from background */
  background: linear-gradient(to bottom, #8b0000, #600000) !important;
  border-bottom: 2px solid #ffd700 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.desktop-menu {
  background: rgba(0, 0, 0, 0.3); /* Slight overlay for readability */
}

.desktop-menu a {
  color: #fff;
  text-shadow: 1px 1px 2px #8b0000;
}

.desktop-menu a:hover {
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700;
}

/* Red Button Style */
.desktop-menu .play-btn,
.desktop-menu .login-button {
  background: linear-gradient(to bottom, #ffd700, #ffae00);
  color: #8b0000 !important;
  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.desktop-menu .play-btn:hover,
.desktop-menu .login-button:hover {
  background: linear-gradient(to bottom, #ffae00, #ffd700);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

/* Mobile Menu Adjustments */
.mobile-header {
  background: rgba(139, 0, 0, 0.9);
  border-bottom: 1px solid #ffd700;
}

.menu-toggle {
  color: #ffd700;
}

/* Content Sections */
.news-section,
.character-section,
.feature-dac-sac-section {
  border-color: #ffd700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.news-section {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #ffd700;
}

.news-header img {
  filter: drop-shadow(0 0 2px #ffd700);
}

/* Dropdown Menu */
.desktop-menu .dropdown-content {
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #ffd700;
}

.desktop-menu .dropdown-content a:hover {
  background: #fff5e6;
  color: #b71c1c;
}

/* Footer & other elements */
/* Adjustments for better visibility on the new background */

/* Blossom Animation */
@keyframes fall {
  0% {
    top: -10%;
    opacity: 0.9;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    top: 110%;
    opacity: 0;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes fall {
  0% {
    top: -10%;
    opacity: 0.9;
    -webkit-transform: rotate(0deg);
  }
  100% {
    top: 110%;
    opacity: 0;
    -webkit-transform: rotate(360deg);
  }
}

.blossom {
  position: fixed;
  top: -10%;
  z-index: 9999;
  user-select: none;
  pointer-events: none;
  animation-name: fall;
  -webkit-animation-name: fall;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); /* Yellow shadow */
  color: #ffd700 !important; /* Force Yellow */
}

/* Firework Animation - Legacy Compatible (No Variables) */
/* Firework 1 - Center Yellow */
@keyframes fw1 {
  0% {
    transform: translate(-50%, 60vmin);
    width: 0.5vmin;
    height: 0.5vmin;
    opacity: 1;
  }
  50% {
    width: 0.5vmin;
    height: 0.5vmin;
    opacity: 1;
  }
  100% {
    width: 45vmin;
    height: 45vmin;
    opacity: 0;
    transform: translate(-50%, -30vmin);
  }
}
@-webkit-keyframes fw1 {
  0% {
    -webkit-transform: translate(-50%, 60vmin);
    width: 0.5vmin;
    height: 0.5vmin;
    opacity: 1;
  }
  50% {
    width: 0.5vmin;
    height: 0.5vmin;
    opacity: 1;
  }
  100% {
    width: 45vmin;
    height: 45vmin;
    opacity: 0;
    -webkit-transform: translate(-50%, -30vmin);
  }
}

.firework-1 {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: none;
  width: 0.5vmin;
  height: 0.5vmin;
  animation: fw1 2s infinite;
  -webkit-animation: fw1 2s infinite;
  /* Use Animated SVG Firework */
  background: url('../images/tet/firework.svg') no-repeat center center;
  background-size: contain;
}

/* Firework Animation: Launch and Explode */
@keyframes bloom-burst {
  0% { 
    bottom: 0; 
    transform: scale(0.05); 
    opacity: 1; 
  }
  40% { 
    bottom: 60%; 
    transform: scale(0.1); 
    opacity: 1; 
  }
  50% { 
    bottom: 60%; 
    transform: scale(1.5); 
    opacity: 1; 
  }
  100% { 
    bottom: 60%; 
    transform: scale(2); 
    opacity: 0; 
  }
}

@-webkit-keyframes bloom-burst {
  0% { 
    bottom: 0; 
    -webkit-transform: scale(0.05); 
    opacity: 1; 
  }
  40% { 
    bottom: 60%; 
    -webkit-transform: scale(0.1); 
    opacity: 1; 
  }
  50% { 
    bottom: 60%; 
    -webkit-transform: scale(1.5); 
    opacity: 1; 
  }
  100% { 
    bottom: 60%; 
    -webkit-transform: scale(2); 
    opacity: 0; 
  }
}

.firework-1 {
  position: fixed;
  left: 20%;
  width: 40vmin; height: 40vmin;
  z-index: 10000; pointer-events: none;
  animation: bloom-burst 3s infinite ease-out;
  -webkit-animation: bloom-burst 3s infinite ease-out;
  background: url('../images/tet/firework.svg') no-repeat center center;
  background-size: contain;
}

@keyframes bloom-burst-2 {
  0% { bottom: 0; transform: scale(0.05); opacity: 1; }
  50% { bottom: 80%; transform: scale(0.1); opacity: 1; }
  60% { bottom: 80%; transform: scale(1.5); opacity: 1; }
  100% { bottom: 80%; transform: scale(2); opacity: 0; }
}
@-webkit-keyframes bloom-burst-2 {
  0% { bottom: 0; -webkit-transform: scale(0.05); opacity: 1; }
  50% { bottom: 80%; -webkit-transform: scale(0.1); opacity: 1; }
  60% { bottom: 80%; -webkit-transform: scale(1.5); opacity: 1; }
  100% { bottom: 80%; -webkit-transform: scale(2); opacity: 0; }
}

.firework-2 {
  position: fixed;
  left: 50%;
  width: 35vmin; height: 35vmin;
  z-index: 10000; pointer-events: none;
  animation: bloom-burst-2 4s infinite 1.5s ease-out;
  -webkit-animation: bloom-burst-2 4s infinite 1.5s ease-out;
  background: url('../images/tet/firework.svg') no-repeat center center;
  background-size: contain;
}

@keyframes bloom-burst-3 {
  0% { bottom: 0; transform: scale(0.05); opacity: 1; }
  45% { bottom: 70%; transform: scale(0.1); opacity: 1; }
  55% { bottom: 70%; transform: scale(1.4); opacity: 1; }
  100% { bottom: 70%; transform: scale(1.8); opacity: 0; }
}
@-webkit-keyframes bloom-burst-3 {
  0% { bottom: 0; -webkit-transform: scale(0.05); opacity: 1; }
  45% { bottom: 70%; -webkit-transform: scale(0.1); opacity: 1; }
  55% { bottom: 70%; -webkit-transform: scale(1.4); opacity: 1; }
  100% { bottom: 70%; -webkit-transform: scale(1.8); opacity: 0; }
}

.firework-3 {
  position: fixed;
  left: 80%;
  width: 45vmin; height: 45vmin;
  z-index: 10000; pointer-events: none;
  animation: bloom-burst-3 3.5s infinite 2.5s ease-out;
  -webkit-animation: bloom-burst-3 3.5s infinite 2.5s ease-out;
  background: url('../images/tet/firework.svg') no-repeat center center;
  background-size: contain;
}