body, .t-body, .t-rec {
  background-color: #0b0f0e !important;
}

/* Base atmosphere + soft golden glow in the center */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 58% 48% at 8% 24%, rgba(35, 100, 79, .105), transparent 72%),
    radial-gradient(ellipse 48% 42% at 94% 76%, rgba(34, 91, 76, .085), transparent 74%),
    radial-gradient(ellipse 36% 28% at 78% 12%, rgba(177, 145, 77, .035), transparent 75%),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(212, 175, 55, .085), transparent 70%),
    radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, rgba(0, 0, 0, .25) 100%);
}

.char-particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  isolation: isolate;
}

.char-particles::before,
.char-particles::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  filter: blur(34px);
  opacity: .42;
}
.char-particles::before {
  background:
    radial-gradient(ellipse 27% 13% at 7% 38%, rgba(73, 125, 104, .12), transparent 75%),
    radial-gradient(ellipse 23% 11% at 93% 67%, rgba(76, 126, 103, .10), transparent 75%),
    radial-gradient(ellipse 19% 9% at 18% 88%, rgba(174, 148, 93, .045), transparent 78%);
  animation: mistDriftA 52s ease-in-out infinite alternate;
}
.char-particles::after {
  background:
    radial-gradient(ellipse 24% 10% at 88% 20%, rgba(83, 125, 104, .09), transparent 76%),
    radial-gradient(ellipse 18% 8% at 4% 76%, rgba(179, 153, 100, .04), transparent 80%);
  animation: mistDriftB 68s ease-in-out infinite alternate;
}
@keyframes mistDriftA {
  from { transform: translate(-1.5%, -1%); }
  to   { transform: translate(1.8%, 1.2%); }
}
@keyframes mistDriftB {
  from { transform: translate(1.2%, 1.4%) scale(1); }
  to   { transform: translate(-1.6%, -1%) scale(1.035); }
}

.floating-char {
  position: absolute;
  font-family: "Ma Shan Zheng", cursive;
  color: rgba(224, 210, 171, 1);
  opacity: 0;
  user-select: none;
  will-change: transform, opacity;
  animation: characterFloat var(--duration) linear infinite;
  animation-delay: var(--delay);
  text-shadow: 0 0 10px rgba(190, 165, 111, .07);
}
@keyframes characterFloat {
  0% {
    transform: translate3d(var(--start-x), 108vh, 0) scale(.82);
    opacity: 0;
  }
  13% { opacity: var(--low-opacity); }
  48% {
    transform: translate3d(var(--mid-x), 49vh, 0) scale(.93);
    opacity: var(--high-opacity);
  }
  78% {
    transform: translate3d(var(--end-x), 8vh, 0) scale(1);
    opacity: calc(var(--low-opacity) * .72);
  }
  100% {
    transform: translate3d(var(--end-x), -13vh, 0) scale(1.02);
    opacity: 0;
  }
}

.floating-char.glint {
  animation-name: characterFloat, characterGlint;
  animation-duration: var(--duration), var(--glint-duration);
  animation-delay: var(--delay), var(--glint-delay);
  animation-iteration-count: infinite, infinite;
}
@keyframes characterGlint {
  0%, 74%, 100% { filter: brightness(1); }
  79% { filter: brightness(1.5); }
  84% { filter: brightness(1.08); }
}

.sparkle {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(232, 218, 181, .78);
  box-shadow: 0 0 5px 1px rgba(208, 183, 125, .2);
  opacity: 0;
  animation: sparkleTwinkle var(--twinkle-duration) ease-in-out infinite;
  animation-delay: var(--twinkle-delay);
}
.sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 4px;
  transform: translate(-50%, -50%);
  background: rgba(232, 218, 181, .3);
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.55); }
  43% { opacity: var(--sparkle-opacity); transform: scale(1); }
  56% { opacity: .05; transform: scale(.72); }
}
</style>