html {
  min-height: 100%;
  background: #03060f;
}

body {
  min-height: 100%;
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-image: none !important;
  overflow-x: hidden;
}

#space-fx-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

#space-fx-root .space-bg,
#space-fx-root .space-colorwash,
#space-fx-root .space-nebula,
#space-fx-root .space-stars,
#space-fx-root .space-meteors,
#space-fx-root .space-vignette {
  position: absolute;
  inset: 0;
}

#space-fx-root .space-bg {
  background-image: url(/assets/bg-new.png?v=202606091820);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(0.58) contrast(1.26) saturate(1.42) blur(0.25px);
  transform: scale(1.025);
  animation: bgFloat 52s ease-in-out infinite alternate;
}

#space-fx-root .space-colorwash {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 170, 95, 0.18), transparent 22%),
    radial-gradient(circle at 86% 70%, rgba(90, 180, 255, 0.18), transparent 24%),
    radial-gradient(circle at 78% 20%, rgba(50, 120, 255, 0.10), transparent 20%),
    radial-gradient(circle at 22% 78%, rgba(170, 100, 255, 0.08), transparent 24%);
  mix-blend-mode: screen;
  filter: blur(24px) saturate(126%);
  opacity: 0.84;
}

#space-fx-root .space-nebula.nebula-a {
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 175, 115, 0.15), transparent 16%),
    radial-gradient(circle at 20% 40%, rgba(255, 120, 70, 0.08), transparent 18%);
  mix-blend-mode: screen;
  filter: blur(34px);
  opacity: 0.58;
  animation: nebulaDriftA 32s ease-in-out infinite alternate;
}

#space-fx-root .space-nebula.nebula-b {
  background:
    radial-gradient(circle at 86% 78%, rgba(100, 210, 255, 0.18), transparent 18%),
    radial-gradient(circle at 80% 58%, rgba(70, 140, 255, 0.10), transparent 20%);
  mix-blend-mode: screen;
  filter: blur(38px);
  opacity: 0.56;
  animation: nebulaDriftB 38s ease-in-out infinite alternate;
}

#space-fx-root .space-nebula.nebula-c {
  background:
    radial-gradient(circle at 52% 18%, rgba(145, 110, 255, 0.055), transparent 18%),
    radial-gradient(circle at 34% 72%, rgba(110, 150, 255, 0.04), transparent 20%);
  mix-blend-mode: screen;
  filter: blur(42px);
  opacity: 0.40;
  animation: nebulaDriftC 44s ease-in-out infinite alternate;
}

#space-fx-root .space-stars {
  animation: starFieldDrift 80s ease-in-out infinite alternate;
}

#space-fx-root .space-stars .star {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: rgba(255,255,255,0.98);
  opacity: var(--min);
  box-shadow:
    0 0 8px rgba(255,255,255,0.72),
    0 0 16px rgba(145,185,255,0.28);
  animation: starPulse var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

#space-fx-root .space-stars .star.big {
  box-shadow:
    0 0 10px rgba(255,255,255,0.90),
    0 0 22px rgba(160,210,255,0.40);
}

#space-fx-root .space-stars .star.warm {
  background: rgba(255, 235, 210, 0.98);
  box-shadow:
    0 0 8px rgba(255,220,185,0.78),
    0 0 18px rgba(255,165,95,0.24);
}

#space-fx-root .space-stars .star.cool {
  background: rgba(225, 240, 255, 0.98);
  box-shadow:
    0 0 8px rgba(225,240,255,0.78),
    0 0 18px rgba(100,170,255,0.28);
}

/* Canvas meteors: mucho más natural que los rayos CSS */
#space-fx-root .space-meteors {
  width: 100%;
  height: 100%;
  opacity: 0.78;
  mix-blend-mode: screen;
}

#space-fx-root .space-vignette {
  background:
    radial-gradient(circle at center,
      transparent 22%,
      rgba(3,6,15,0.08) 48%,
      rgba(3,6,15,0.28) 74%,
      rgba(3,6,15,0.56) 100%
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.012),
      rgba(255,255,255,0.00) 20%,
      rgba(0,0,0,0.14) 100%
    );
  opacity: 0.95;
}

@keyframes bgFloat {
  0% { transform: scale(1.025) translate3d(0%, 0%, 0); }
  100% { transform: scale(1.045) translate3d(-0.55%, -0.35%, 0); }
}

@keyframes nebulaDriftA {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-1.0%, 0.8%, 0) scale(1.03); }
}

@keyframes nebulaDriftB {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(1.0%, -0.8%, 0) scale(1.04); }
}

@keyframes nebulaDriftC {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0.5%, -0.5%, 0) scale(1.03); }
}

@keyframes starFieldDrift {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-0.35%, 0.25%, 0); }
}

@keyframes starPulse {
  0%, 100% {
    opacity: var(--min);
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    opacity: var(--max);
    transform: scale(1.8);
    filter: brightness(1.35);
  }
}

/* DDK_HOME_AVATAR_SPACING_SAFE_V1 */
body.ddk-home-clean .ddk-card {
  min-height: 340px !important;
  padding: 28px 22px 26px !important;
  justify-content: flex-start !important;
  gap: 20px !important;
}

body.ddk-home-clean .ddk-card-name {
  margin: 0 0 4px !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

body.ddk-home-clean .ddk-real-avatar {
  display: block !important;
  width: 118px !important;
  height: 118px !important;
  margin: 8px auto 18px !important;
  padding: 10px !important;
  border-radius: 999px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(5, 10, 25, 0.88) !important;
  border: 3px solid rgba(90, 150, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(6, 14, 32, 0.40) !important;
}

body.ddk-home-clean .status-badge {
  margin-top: 0 !important;
  min-width: 196px !important;
}

/* DDK_FIX_STREAMER_NAME_DESCENDERS_V1 */
body.ddk-home-clean .ddk-card-name,
body.ddk-home-clean .ddk-card-name a {
  line-height: 1.32 !important;
  padding-bottom: 8px !important;
  margin-bottom: 2px !important;
  overflow: visible !important;
  display: block !important;
}

body.ddk-home-clean .ddk-card {
  overflow: visible !important;
}