/* New Splash Screen aligned with legacy visuals */
.cmp-splash {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.92)),
    radial-gradient(circle at 50% 40%, #222 0%, #000 70%);
  background-size: 20vmin 20vmin, 20vmin 20vmin, 20vmin 20vmin, 20vmin 20vmin, 20vmin 20vmin,
                   20vmin 20vmin, 20vmin 20vmin, 20vmin 20vmin, 20vmin 20vmin,
                   100% 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 10000;
  transition: opacity .5s ease, visibility .5s ease;
  animation: starTwinkle 3s ease-in-out infinite alternate;
  will-change: opacity;
}

/* Separate sky background layer for time-of-day theming */
.cmp-splash .splash-sky-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Default sky background (matches main splash) */
  background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.92)),
    radial-gradient(circle at 50% 40%, #222 0%, #000 70%);
  animation: starTwinkle 3s ease-in-out infinite alternate;
  pointer-events: none;
}

/* When sky-only mode is active, remove the main splash background to show sky layer */
.cmp-splash:has(.splash-sky-background.splash-theme-scope-sky) {
  background: none;
  animation: none;
}

.cmp-splash.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
/* Intermediate hiding state to suppress heavy animations for smoother fade */
.cmp-splash.is-hiding { pointer-events:none; }
.cmp-splash.is-hiding .polaroid,
.cmp-splash.is-hiding .splash-subtitle,
.cmp-splash.is-hiding .splash-logo-image { animation: none; filter: none; }
.cmp-splash .splash-content { display:flex; align-items:center; justify-content:space-between; width:90vw; max-width:72vw; text-align:center; z-index:3; animation: splashEntrance 1.5s ease-out; position:relative; }
.cmp-splash .splash-center-content { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:26vw; max-width:90%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cmp-splash .splash-logo-image { max-width: 90vw; max-height: 50vh; width:auto; height:auto; margin-bottom:2.8vh; animation: logoFloat 3s ease-in-out infinite alternate; filter: contrast(1.1) saturate(0.9) drop-shadow(0 0 0.8vmin rgba(255,255,255,0.3)); }
.cmp-splash .splash-subtitle { font-family:'Bangers', cursive; font-size: 7vh; font-weight:900; color:#FFD700; margin-bottom:5.6vh; margin-top:3.7vh; text-shadow: -0.15vmin -0.15vmin 0 #000, 0.15vmin -0.15vmin 0 #000, -0.15vmin 0.15vmin 0 #000, 0.15vmin 0.15vmin 0 #000, -0.1vmin -0.1vmin 0 #000, 0.1vmin -0.1vmin 0 #000, -0.1vmin 0.1vmin 0 #000, 0.1vmin 0.1vmin 0 #000; letter-spacing:0.15vmin; transform: perspective(15vmin) rotateX(-5deg) scale(1.1); filter: drop-shadow(0.3vmin 0.3vmin 0 #000); animation: subtitleExplode 2.5s ease-in-out; opacity:0; animation-fill-mode:forwards; }
.cmp-splash .splash-subtitle .mobile-text { display: flex; flex-direction: column; align-items: center; }
.cmp-splash .splash-subtitle .mobile-line { text-align: center; }
.cmp-splash .splash-subtitle .desktop-text { display: none; }
.cmp-splash .splash-subtitle.clickable { cursor:pointer; transition: all .3s ease; }
.cmp-splash .splash-subtitle.clickable:hover { color:#fff; transform: perspective(15vmin) rotateX(-5deg) scale(1.15); filter: drop-shadow(0.4vmin 0.4vmin 0 #000) drop-shadow(0 0 1vmin rgba(255,215,0,0.8)); }
.cmp-splash .splash-enter:hover { filter: brightness(1.1); }

/* Polaroids container - fix vertical alignment to top of viewport */
.cmp-splash .polaroids-left, .cmp-splash .polaroids-right { position:fixed; top:0; height:100vh; width:100%; pointer-events:none; z-index:1; }
.cmp-splash .polaroids-left { left:0; }
.cmp-splash .polaroids-right { right:0; }
.cmp-splash .polaroid { background: linear-gradient(145deg,#fefefe 0%, #f8f8f8 50%, #f0f0f0 100%); padding:1.85vh 1.85vh 6.5vh 1.85vh; box-shadow: 0 0.37vh 0.74vh rgba(0,0,0,0.25), 0 0.74vh 1.5vh rgba(0,0,0,0.15), 0 1.5vh 3vh rgba(0,0,0,0.1), inset 0 0.1vh 0 rgba(255,255,255,0.9), inset 0 -0.1vh 0 rgba(0,0,0,0.05); transform-origin:center center; position:absolute; width:10.4vw; height:24vh; border-radius:0.15vmin; border:0.15vmin solid #ffffff; transition: all .4s ease; animation: polaroidFloat 6s ease-in-out infinite; pointer-events:auto; z-index:5; background-image: radial-gradient(circle at 20% 20%, rgba(255,248,220,.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(245,245,220,.2) 0%, transparent 50%), linear-gradient(145deg,#fefefe 0%, #f8f8f8 50%, #f0f0f0 100%); background-size:10.4vw 10.4vw, 7.8vw 7.8vw, 100% 100%; transform: rotate(var(--rotation, 0deg)); }
.cmp-splash .polaroid img { width:8.3vw; height:14.8vh; object-fit:cover; border-radius:0.05vmin; display:block; margin:0 auto; border:0.1vmin solid #000; box-shadow: inset 0 0 0 0.05vmin rgba(0,0,0,0.08), 0 0.2vh 0.37vh rgba(0,0,0,0.15); background: var(--monster-tint, #ffffff); filter: contrast(.95) saturate(.9) sepia(.05); }
.cmp-splash .polaroid-caption { position:absolute; bottom:2.3vh; left:50%; transform: translateX(-50%) rotate(-1deg); font-family:'Kalam', cursive; font-size:1.4vh; color:#2c2c2c; font-weight:600; text-align:center; width:calc(100% - 3.7vw); letter-spacing:0.03vmin; text-shadow: 0 0 0.05vmin rgba(0,0,0,0.1); }
.cmp-splash .polaroid:hover { transform: translateY(-0.56vh) scale(1.08) rotate(0deg); box-shadow: 0 0.74vh 1.5vh rgba(0,0,0,0.35), 0 1.5vh 3vh rgba(0,0,0,0.25), 0 2.2vh 4.4vh rgba(0,0,0,0.15), inset 0 0.1vh 0 rgba(255,255,255,0.9), inset 0 -0.1vh 0 rgba(0,0,0,0.05); z-index:10; transition: all .3s ease; }
.cmp-splash .polaroid:hover img { filter: contrast(1.05) saturate(1.1) sepia(0); }
/* Photo tint overlay using data-tint */
.cmp-splash .splash-polaroid .sp-photo::after { content:""; position:absolute; inset:0; mix-blend-mode:multiply; background: var(--polaroid-tint, #444); opacity:.18; pointer-events:none; }
.cmp-splash .splash-polaroid[data-tint] .sp-photo { position:relative; }

/* Legacy scattered positions */
.cmp-splash .polaroid-1 { top:8%; left:5.2vw; --rotation:-15deg; animation-delay: 0s; animation-duration: 7s; }
.cmp-splash .polaroid-2 { top:35%; left:2.6vw; --rotation:12deg; animation-delay: 1.2s; animation-duration: 6.5s; }
.cmp-splash .polaroid-3 { top:58%; left:6.25vw; --rotation:-8deg; animation-delay: 2.1s; animation-duration: 6.8s; }
.cmp-splash .polaroid-4 { top:5%; right:4.2vw; --rotation:18deg; animation-delay: 0.7s; animation-duration: 7.2s; }
.cmp-splash .polaroid-5 { top:40%; right:3.1vw; --rotation:-12deg; animation-delay: 1.8s; animation-duration: 6.3s; }
.cmp-splash .polaroid-6 { top:62%; right:5.2vw; --rotation:9deg; animation-delay: 2.5s; animation-duration: 6.9s; }

/* Removed per-index tints so each monster consistently uses its own color (via inline --monster-tint) */

.cmp-splash .city-skyline-container { position:absolute; bottom:0; left:0; width:100vw; height:60vh; pointer-events:none; z-index:2; overflow:hidden; }
.cmp-splash .city-skyline-container::before { content:""; position:absolute; left:0; width:100%; top:50%; transform: translateY(-50%); height:22%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%); z-index:1; pointer-events:none; }
.cmp-splash .city-skyline-container::after { content:none; }
.cmp-splash .skyline { position:absolute; bottom:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.cmp-splash .skyline path { filter: none; animation: none; }

@keyframes polaroidFloat { 0%,100% { transform: translateY(0) rotate(var(--rotation, 0deg)); } 25% { transform: translateY(-1.1vh) rotate(calc(var(--rotation, 0deg) + 2deg)); } 50% { transform: translateY(-1.85vh) rotate(var(--rotation, 0deg)); } 75% { transform: translateY(-0.74vh) rotate(calc(var(--rotation, 0deg) - 2deg)); } }
@keyframes logoFloat { from { transform: translateY(-0.93vh) scale(1); } to { transform: translateY(0.93vh) scale(1.02); } }
@keyframes subtitleExplode {
  0% { opacity:0; transform: perspective(15vmin) rotateX(-5deg) scale(0.3) translateY(4.6vh); filter: blur(0.5vmin) drop-shadow(0.3vmin 0.3vmin 0 #000); }
  20% { opacity:0; transform: perspective(15vmin) rotateX(-5deg) scale(0.3) translateY(4.6vh); filter: blur(0.5vmin) drop-shadow(0.3vmin 0.3vmin 0 #000); }
  30% { opacity:1; transform: perspective(15vmin) rotateX(-5deg) scale(1.5) translateY(-1.85vh) rotateZ(5deg); filter: blur(0) drop-shadow(0.4vmin 0.4vmin 0 #000); }
  45% { transform: perspective(15vmin) rotateX(-5deg) scale(1.3) translateY(-0.93vh) rotateZ(-3deg); filter: drop-shadow(0.3vmin 0.3vmin 0 #000); }
  60% { transform: perspective(15vmin) rotateX(-5deg) scale(1.2) translateY(-0.46vh) rotateZ(2deg); }
  75% { transform: perspective(15vmin) rotateX(-5deg) scale(1.15) translateY(0) rotateZ(-1deg); }
  85% { transform: perspective(15vmin) rotateX(-5deg) scale(1.12) translateY(0) rotateZ(.5deg); }
  95% { transform: perspective(15vmin) rotateX(-5deg) scale(1.1) translateY(0) rotateZ(0); }
  100% { opacity:1; transform: perspective(15vmin) rotateX(-5deg) scale(1.1) translateY(0); filter: drop-shadow(0.3vmin 0.3vmin 0 #000); }
}
@keyframes buildingGlow { 0% { filter: drop-shadow(0 0 0.15vmin rgba(255,150,0,0.8)) drop-shadow(0 0 0.3vmin rgba(255,100,0,0.6)) drop-shadow(0 0 0.6vmin rgba(255,69,0,0.4)) drop-shadow(0 0 1vmin rgba(255,200,0,0.3)); } 50% { filter: drop-shadow(0 0 0.25vmin rgba(255,160,0,1)) drop-shadow(0 0 0.5vmin rgba(255,120,0,0.8)) drop-shadow(0 0 0.9vmin rgba(255,90,0,0.6)) drop-shadow(0 0 1.5vmin rgba(255,220,0,0.5)); } 100% { filter: drop-shadow(0 0 0.15vmin rgba(255,150,0,0.8)) drop-shadow(0 0 0.3vmin rgba(255,100,0,0.6)) drop-shadow(0 0 0.6vmin rgba(255,69,0,0.4)) drop-shadow(0 0 1vmin rgba(255,200,0,0.3)); } }
@keyframes explosiveFlare { 10% { filter: drop-shadow(0 0 0.4vmin rgba(255,50,0,1.2)) drop-shadow(0 0 0.8vmin rgba(255,100,0,1)) drop-shadow(0 0 1.3vmin rgba(255,150,0,0.8)) drop-shadow(0 0 2vmin rgba(255,200,0,0.6)) drop-shadow(0 0 3vmin rgba(255,100,0,0.4)); } 43% { filter: drop-shadow(0 0 0.5vmin rgba(255,30,0,1.4)) drop-shadow(0 0 1vmin rgba(255,80,0,1.2)) drop-shadow(0 0 1.5vmin rgba(255,130,0,1)) drop-shadow(0 0 2.6vmin rgba(255,180,0,0.8)) drop-shadow(0 0 4.2vmin rgba(255,120,0,0.5)); } 78% { filter: drop-shadow(0 0 0.3vmin rgba(255,60,0,1)) drop-shadow(0 0 0.6vmin rgba(255,110,0,0.8)) drop-shadow(0 0 1vmin rgba(255,160,0,0.6)) drop-shadow(0 0 1.8vmin rgba(255,210,0,0.5)) drop-shadow(0 0 2.9vmin rgba(255,140,0,0.3)); } }

@media (max-width: 1200px) { .cmp-splash .polaroids-left, .cmp-splash .polaroids-right { width:10.4vw; } .cmp-splash .polaroids-left { left:0.5vw; } .cmp-splash .polaroids-right { right:0.5vw; } .cmp-splash .polaroid { width:8.3vw; height:18.5vh; padding:1.4vh 1.4vh 4.6vh 1.4vh; } .cmp-splash .polaroid img { width:6.8vw; height:12vh; } .cmp-splash .polaroid-caption { font-size:1.2vh; bottom:1.67vh; } .cmp-splash .polaroid-1 { top:10%; left:3.1vw; } .cmp-splash .polaroid-2 { top:40%; left:1.6vw; } .cmp-splash .polaroid-3 { top:62%; left:4.2vw; } .cmp-splash .polaroid-4 { top:8%; right:2.6vw; } .cmp-splash .polaroid-5 { top:45%; right:1.6vw; } .cmp-splash .polaroid-6 { top:64%; right:3.6vw; } }

@media (max-width: 900px) { 
	.cmp-splash .splash-subtitle { font-size: 2.0em; }
	.cmp-splash .polaroids-left, .cmp-splash .polaroids-right { width:8.3vw; } 
	.cmp-splash .polaroid { width:7.3vw; height:16.7vh; padding:1.1vh 1.1vh 3.7vh 1.1vh; } 
	.cmp-splash .polaroid img { width:6vw; height:10.7vh; } 
	.cmp-splash .polaroid-caption { font-size:1.1vh; bottom:1.4vh; }
	/* Constrain center content to force text wrapping and avoid polaroid overlap */
	.cmp-splash .splash-center-content { width:14.6vw; max-width: 85%; }
}

/* Desktop breakpoint: show single-line above 900px, force stacked below to avoid polaroid obstruction */
@media (min-width: 900px) {
	.cmp-splash .splash-subtitle .desktop-text { display: inline-flex; }
	.cmp-splash .splash-subtitle .mobile-text { display: none; }
}

/* Below 900px: force stacked text to avoid polaroid obstruction */
@media (max-width: 899px) {
	.cmp-splash .splash-subtitle .desktop-text { display: none; }
	.cmp-splash .splash-subtitle .mobile-text { display: flex; }
}

@media (max-width: 1024px) { 
	.cmp-splash .splash-subtitle { font-size: 1.65em; }
	.cmp-splash .polaroids-left, .cmp-splash .polaroids-right { width:6.25vw; } 
	.cmp-splash .polaroids-left { left:0.26vw; } 
	.cmp-splash .polaroids-right { right:0.26vw; } 
	.cmp-splash .polaroid { width:5.2vw; height:12vh; padding:0.74vh 0.74vh 2.3vh 0.74vh; } 
	.cmp-splash .polaroid img { width:4.4vw; height:7.8vh; } 
	.cmp-splash .polaroid-caption { font-size:0.93vh; bottom:0.56vh; } 
	.cmp-splash .polaroid-1 { top:12%; left:0.42vw; } 
	.cmp-splash .polaroid-2 { top:38%; left:-0.26vw; } 
	.cmp-splash .polaroid-3 { top:62%; left:0.63vw; } 
	.cmp-splash .polaroid-4 { top:15%; right:0.26vw; } 
	.cmp-splash .polaroid-5 { top:42%; right:-0.42vw; } 
	.cmp-splash .polaroid-6 { top:65%; right:0.42vw; } 
}

@media (max-width: 600px) { 
	.cmp-splash .splash-subtitle { font-size: 1.4em; margin-bottom: 3.7vh; margin-top: 1.85vh; }
	.cmp-splash .polaroids-left, .cmp-splash .polaroids-right { width:4.2vw; } 
	.cmp-splash .polaroid { width:3.6vw; height:8.3vh; padding:0.56vh 0.56vh 1.67vh 0.56vh; } 
	.cmp-splash .polaroid img { width:3vw; height:5.4vh; } 
	.cmp-splash .polaroid-caption { font-size:0.74vh; bottom:0.37vh; } 
	.cmp-splash .polaroid-1 { top:15%; left:0.26vw; } 
	.cmp-splash .polaroid-2 { top:40%; left:-0.42vw; } 
	.cmp-splash .polaroid-3 { top:65%; left:0.42vw; } 
	.cmp-splash .polaroid-4 { top:18%; right:0.1vw; } 
	.cmp-splash .polaroid-5 { top:45%; right:-0.52vw; } 
	.cmp-splash .polaroid-6 { top:68%; right:0.26vw; } 
}

@media (max-width: 480px) { 
	.cmp-splash .splash-subtitle { font-size: 1.15em; margin-bottom: 2.8vh; margin-top: 1.4vh; letter-spacing: 0.05vmin; }
	.cmp-splash .splash-logo-image { margin-bottom: 1.85vh; max-height: 40vh; }
	.cmp-splash .polaroids-left, .cmp-splash .polaroids-right { width:3.1vw; } 
	.cmp-splash .polaroid { width:2.9vw; height:6.5vh; padding:0.37vh 0.37vh 1.3vh 0.37vh; } 
	.cmp-splash .polaroid img { width:2.4vw; height:4.4vh; } 
	.cmp-splash .polaroid-caption { font-size:0.65vh; bottom:0.19vh; }
}

@keyframes starTwinkle { 0% { opacity: 1; } 100% { opacity: .9; } }

/* ===== THEME SCOPE MODIFIERS ===== */
/* Sky-only mode uses the .splash-sky-background element for theming */
/* No special modifiers needed - sky background gets the classes directly */

/* ===== TIME OF DAY VARIANTS ===== */
/* These classes can be applied to either .cmp-splash (full mode) or .splash-sky-background (sky-only mode) */

/* Morning: Sunrise with warm oranges, pinks, and light blues */
.cmp-splash.splash-time-morning,
.splash-sky-background.splash-time-morning {
  background:
    linear-gradient(to bottom, 
      rgba(255, 183, 77, 0.3) 0%,
      rgba(255, 138, 101, 0.4) 30%,
      rgba(135, 206, 250, 0.5) 60%,
      rgba(70, 130, 180, 0.6) 100%
    ),
    radial-gradient(circle at 50% 80%, #FFB74D 0%, #FF6B6B 20%, #4682B4 60%, #2C5F8D 100%);
  animation: morningGlow 4s ease-in-out infinite alternate;
}

@keyframes morningGlow {
  0% { filter: brightness(1) saturate(1.1); }
  100% { filter: brightness(1.1) saturate(1.2); }
}

/* Afternoon: Bright blue sky with white clouds */
.cmp-splash.splash-time-afternoon,
.cmp-splash.splash-time-day,
.splash-sky-background.splash-time-afternoon,
.splash-sky-background.splash-time-day {
  background:
    linear-gradient(to bottom,
      rgba(135, 206, 250, 0.2) 0%,
      rgba(135, 206, 250, 0.4) 50%,
      rgba(100, 149, 237, 0.6) 100%
    ),
    radial-gradient(ellipse at 50% 30%, #87CEEB 0%, #6495ED 40%, #4682B4 70%, #2C5F8D 100%);
  animation: dayBrightness 3s ease-in-out infinite alternate;
}

/* Add clouds to daytime sky */
.cmp-splash.splash-time-afternoon::after,
.cmp-splash.splash-time-day::after,
.splash-sky-background.splash-time-afternoon::after,
.splash-sky-background.splash-time-day::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    /* Large fluffy cloud - left side */
    radial-gradient(ellipse 140px 55px at 18% 22%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse 95px 48px at 22% 26%, rgba(255, 255, 255, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse 110px 52px at 14% 28%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    
    /* Medium wispy cloud - upper right */
    radial-gradient(ellipse 160px 32px at 68% 18%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 85px 28px at 72% 20%, rgba(255, 255, 255, 0.45) 0%, transparent 50%),
    
    /* Small puffy cloud - far right */
    radial-gradient(ellipse 75px 38px at 88% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse 65px 32px at 84% 17%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
    
    /* Large stretched cloud - center */
    radial-gradient(ellipse 180px 42px at 45% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
    radial-gradient(ellipse 120px 38px at 40% 44%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    
    /* Medium round cloud - lower left */
    radial-gradient(ellipse 95px 45px at 12% 62%, rgba(255, 255, 255, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse 80px 40px at 16% 64%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    
    /* Large elongated cloud - lower right */
    radial-gradient(ellipse 155px 35px at 78% 58%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 105px 40px at 74% 56%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
    radial-gradient(ellipse 85px 32px at 82% 60%, rgba(255, 255, 255, 0.45) 0%, transparent 50%);
  pointer-events: none;
  z-index: 2;
  animation: cloudDrift 60s linear infinite;
}

@keyframes cloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(3%); }
}

@keyframes dayBrightness {
  0% { filter: brightness(1.2) saturate(1.3); }
  100% { filter: brightness(1.3) saturate(1.4); }
}

/* Evening: Sunset with deep oranges, purples, and pinks */
.cmp-splash.splash-time-evening,
.cmp-splash.splash-time-dusk,
.splash-sky-background.splash-time-evening,
.splash-sky-background.splash-time-dusk {
  background:
    linear-gradient(to bottom,
      rgba(138, 43, 226, 0.4) 0%,
      rgba(255, 99, 71, 0.5) 30%,
      rgba(255, 140, 0, 0.6) 60%,
      rgba(72, 61, 139, 0.7) 100%
    ),
    radial-gradient(circle at 50% 70%, #FF6347 0%, #FF8C00 30%, #8B008B 60%, #483D8B 100%);
  animation: duskShimmer 5s ease-in-out infinite alternate;
}

@keyframes duskShimmer {
  0% { filter: brightness(0.9) saturate(1.4) hue-rotate(0deg); }
  100% { filter: brightness(1) saturate(1.5) hue-rotate(5deg); }
}

/* Night: Dark sky with stars and subtle moon glow */
.cmp-splash.splash-time-night,
.splash-sky-background.splash-time-night {
  background:
    linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.92)),
    radial-gradient(circle at 50% 40%, #1a1a2e 0%, #0f0f1e 70%, #000 100%);
  animation: starTwinkle 3s ease-in-out infinite alternate;
}

/* Add stars to night sky */
.cmp-splash.splash-time-night::after,
.splash-sky-background.splash-time-night::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 15% 20%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 25% 35%, white 0%, transparent 50%),
    radial-gradient(circle 1.2px at 45% 15%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 60% 25%, white 0%, transparent 50%),
    radial-gradient(circle 1.5px at 70% 40%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 80% 18%, white 0%, transparent 50%),
    radial-gradient(circle 1.3px at 85% 50%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 20% 55%, white 0%, transparent 50%),
    radial-gradient(circle 1.4px at 35% 65%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 50% 70%, white 0%, transparent 50%),
    radial-gradient(circle 1.2px at 65% 60%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 75% 75%, white 0%, transparent 50%),
    radial-gradient(circle 1.5px at 90% 65%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 10% 80%, white 0%, transparent 50%),
    radial-gradient(circle 1.3px at 30% 45%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 55% 38%, white 0%, transparent 50%),
    radial-gradient(circle 1.2px at 92% 30%, white 0%, transparent 50%),
    radial-gradient(circle 1px at 8% 42%, white 0%, transparent 50%);
  pointer-events: none;
  z-index: 3;
  opacity: 0.7;
  animation: starsTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
  0% { opacity: 0.6; }
  50% { opacity: 0.8; }
  100% { opacity: 0.7; }
}

/* Add subtle moon glow for night */
.cmp-splash.splash-time-night::before,
.splash-sky-background.splash-time-night::before {
  content: '';
  position: absolute;
  top: 15%;
  right: 20%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 200, 0.3) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(255, 255, 200, 0.4), 0 0 80px rgba(255, 255, 200, 0.2);
  pointer-events: none;
  z-index: 3;
  animation: moonGlow 6s ease-in-out infinite alternate;
}

@keyframes moonGlow {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.05); }
}

/* ===== WEATHER VARIANTS ===== */
/* These can be applied to either .cmp-splash (full mode) or .splash-sky-background (sky-only mode) */

/* Cloudy: Add darker, more muted tones */
.cmp-splash.splash-weather-cloudy,
.splash-sky-background.splash-weather-cloudy {
  filter: brightness(0.8) saturate(0.7) contrast(1.1);
}

/* Rain: Add subtle rain effect and darker atmosphere */
.cmp-splash.splash-weather-rain,
.splash-sky-background.splash-weather-rain {
  filter: brightness(0.7) saturate(0.6) contrast(1.2);
}

.cmp-splash.splash-weather-rain::after,
.splash-sky-background.splash-weather-rain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(transparent 0%, rgba(100, 150, 200, 0.05) 50%, transparent 100%);
  background-size: 2px 20px;
  animation: rain 0.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes rain {
  0% { background-position: 0 0; }
  100% { background-position: 0 20px; }
}

/* Storm: Dramatic darker sky with occasional lightning flashes */
.cmp-splash.splash-weather-storm,
.splash-sky-background.splash-weather-storm {
  filter: brightness(0.5) saturate(0.5) contrast(1.3);
  animation: stormFlash 4s ease-in-out infinite;
}

@keyframes stormFlash {
  0%, 90%, 100% { filter: brightness(0.5) saturate(0.5) contrast(1.3); }
  92%, 94% { filter: brightness(1.2) saturate(0.7) contrast(1.5); }
}

/* Snow: Lighter, cooler tones with subtle snow effect */
.cmp-splash.splash-weather-snow,
.splash-sky-background.splash-weather-snow {
  filter: brightness(1.1) saturate(0.5) hue-rotate(180deg);
}

.cmp-splash.splash-weather-snow::after,
.splash-sky-background.splash-weather-snow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 50px 50px;
  animation: snow 3s linear infinite;
  pointer-events: none;
  opacity: 0.4;
  z-index: 2;
}

@keyframes snow {
  0% { background-position: 0 0, 25px 25px; }
  100% { background-position: 0 50px, 25px 75px; }
}

/* Fog: Misty, low visibility effect */
.cmp-splash.splash-weather-fog,
.splash-sky-background.splash-weather-fog {
  filter: brightness(0.9) saturate(0.3) blur(0.5px);
}

.cmp-splash.splash-weather-fog::after,
.splash-sky-background.splash-weather-fog::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, 
    rgba(200, 200, 200, 0.2) 0%,
    rgba(150, 150, 150, 0.3) 50%,
    rgba(200, 200, 200, 0.2) 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: fogDrift 8s ease-in-out infinite alternate;
}

@keyframes fogDrift {
  0% { opacity: 0.3; }
  100% { opacity: 0.5; }
}

/* ===== Moon Phase Brightness Modifiers (Night Only) ===== */
/* These modify the night sky brightness based on moon illumination */

/* New Moon: Very dark night, minimal ambient light */
.cmp-splash.splash-time-night.splash-moon-new-moon,
.splash-sky-background.splash-time-night.splash-moon-new-moon {
  filter: brightness(1) saturate(0.6);
}

.cmp-splash.splash-time-night.splash-moon-new-moon::before,
.splash-sky-background.splash-time-night.splash-moon-new-moon::before {
  opacity: 0; /* No moon glow */
}

/* Crescent Moon: Dim night with faint moon */
.cmp-splash.splash-time-night.splash-moon-crescent,
.splash-sky-background.splash-time-night.splash-moon-crescent {
  filter: brightness(2) saturate(0.7);
}

.cmp-splash.splash-time-night.splash-moon-crescent::before,
.splash-sky-background.splash-time-night.splash-moon-crescent::before {
  opacity: 0.3; /* Faint moon glow */
  box-shadow: 0 0 20px rgba(240, 240, 255, 0.3);
}

/* Half Moon: Moderate ambient light */
.cmp-splash.splash-time-night.splash-moon-half-moon,
.splash-sky-background.splash-time-night.splash-moon-half-moon {
  filter: brightness(3) saturate(0.8);
}

.cmp-splash.splash-time-night.splash-moon-half-moon::before,
.splash-sky-background.splash-time-night.splash-moon-half-moon::before {
  opacity: 0.5; /* Moderate moon glow */
  box-shadow: 0 0 30px rgba(240, 240, 255, 0.4);
}

/* Gibbous Moon: Bright night with strong moonlight */
.cmp-splash.splash-time-night.splash-moon-gibbous,
.splash-sky-background.splash-time-night.splash-moon-gibbous {
  filter: brightness(4) saturate(0.9);
}

.cmp-splash.splash-time-night.splash-moon-gibbous::before,
.splash-sky-background.splash-time-night.splash-moon-gibbous::before {
  opacity: 0.7; /* Strong moon glow */
  box-shadow: 0 0 40px rgba(240, 240, 255, 0.5);
}

/* Full Moon: Very bright night, maximum moonlight */
.cmp-splash.splash-time-night.splash-moon-full-moon,
.splash-sky-background.splash-time-night.splash-moon-full-moon {
  filter: brightness(5) saturate(1.0);
}

.cmp-splash.splash-time-night.splash-moon-full-moon::before,
.splash-sky-background.splash-time-night.splash-moon-full-moon::before {
  opacity: 0.9; /* Bright moon glow */
  box-shadow: 0 0 60px rgba(240, 240, 255, 0.6);
}

/* ===== Star Visibility Based on Moon Phase ===== */
/* Less moonlight = more visible stars (inverse relationship) */

/* New Moon: Maximum star visibility - no moonlight to wash them out */
.cmp-splash.splash-time-night.splash-moon-new-moon::after,
.splash-sky-background.splash-time-night.splash-moon-new-moon::after {
  opacity: 1.0;
  filter: brightness(5);
}

/* Crescent Moon: Very good star visibility */
.cmp-splash.splash-time-night.splash-moon-crescent::after,
.splash-sky-background.splash-time-night.splash-moon-crescent::after {
  opacity: 0.9;
  filter: brightness(4);
}

/* Half Moon: Moderate star visibility */
.cmp-splash.splash-time-night.splash-moon-half-moon::after,
.splash-sky-background.splash-time-night.splash-moon-half-moon::after {
  opacity: 0.7;
  filter: brightness(3);
}

/* Gibbous Moon: Diminished star visibility */
.cmp-splash.splash-time-night.splash-moon-gibbous::after,
.splash-sky-background.splash-time-night.splash-moon-gibbous::after {
  opacity: 0.5;
  filter: brightness(2);
}

/* Full Moon: Minimal star visibility - washed out by bright moonlight */
.cmp-splash.splash-time-night.splash-moon-full-moon::after,
.splash-sky-background.splash-time-night.splash-moon-full-moon::after {
  opacity: 0.3;
  filter: brightness(1);
}