/* ==========================================================================
   DRAMATIC ROYAL PALACE ENVIRONMENT & CINEMATIC ARCHITECTURE
   Mandodari Kingdom Throne Room: Scalloped Mughal arches, 24K gold filigree,
   deep purple velvet drapery, candlelit candelabras, and golden stardust.
   ========================================================================== */

body {
  background-color: var(--bg-palace);
  color: var(--text-ivory);
  font-family: var(--font-sans);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Main Full-Screen Palace Background Layer --- */
.palace-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #0A0414;
  background-image: url('../assets/images/mobile-palace-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

@media (min-width: 900px) {
  .palace-background {
    background-image: url('../assets/images/desktop-palace-queen.webp');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
  }

  .palace-candlelight-glow,
  .ambient-gold-flare,
  .palace-floor-reflection {
    display: none;
  }
}

/* Small Black Gradient Scrim for Enhanced Text Legibility */
.palace-text-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 95% 75% at 50% 45%, rgba(6, 2, 10, 0.48) 0%, rgba(5, 2, 9, 0.72) 70%, rgba(4, 1, 8, 0.88) 100%);
}

@media (min-width: 900px) {
  .palace-text-scrim {
    background: linear-gradient(90deg, 
      rgba(4, 2, 8, 0.82) 0%, 
      rgba(5, 2, 10, 0.68) 25%, 
      rgba(8, 3, 14, 0.42) 45%, 
      rgba(10, 4, 16, 0.15) 58%, 
      transparent 72%
    );
  }
}

/* Layer 2: Warm Candlelight Chandeliers & Golden Rays */
.palace-candlelight-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: 
    /* Chandelier & Throne warm golden flare */
    radial-gradient(circle 420px at 50% 18%, rgba(255, 235, 160, 0.16) 0%, rgba(223, 192, 103, 0.08) 45%, transparent 75%),
    /* Left candelabra amber flare */
    radial-gradient(circle 260px at 12% 50%, rgba(245, 214, 110, 0.11) 0%, transparent 70%),
    /* Right candelabra amber flare */
    radial-gradient(circle 260px at 88% 50%, rgba(245, 214, 110, 0.11) 0%, transparent 70%),
    /* Floor marble reflection glow */
    radial-gradient(ellipse 70% 30% at 50% 95%, rgba(223, 192, 103, 0.10) 0%, transparent 80%);
  mix-blend-mode: screen;
}

/* Ambient Gold & Royal Purple Flare */
.ambient-gold-flare {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(255, 238, 170, 0.20) 0%, rgba(223, 192, 103, 0.08) 45%, rgba(62, 19, 91, 0.12) 75%, transparent 90%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 2;
}

/* Floating Golden Dust Particles (Kingdom Stardust) */
.kingdom-stardust {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-image: 
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 238, 170, 0.7), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(223, 192, 103, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 60% 20%, rgba(255, 245, 209, 0.8), transparent),
    radial-gradient(1.8px 1.8px at 80% 60%, rgba(223, 192, 103, 0.5), transparent),
    radial-gradient(1px 1px at 30% 85%, rgba(242, 216, 136, 0.7), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(255, 238, 170, 0.5), transparent);
  background-size: 550px 550px;
  animation: floatStardust 45s linear infinite;
  opacity: 0.65;
}

@keyframes floatStardust {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -550px -550px;
  }
}

/* Palace Floor Shadow Gradation */
.palace-floor-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160px;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 4, 12, 0.85) 60%, #050308 100%);
  z-index: 1;
}

@media (max-width: 768px) {
  .palace-background {
    background-position: center 18%;
  }
}