/* ===== CENÁRIO 2.0 ===== */
.scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.scene > * { pointer-events: auto; }
.scene .poop-layer,
.scene .sky-layer,
.scene .forest-layer .forest-mist { pointer-events: none; }

/* --- Céu --- */
.sky-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sky-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a1020 0%, #1a2848 50%, #2a3858 100%);
  transition: background 1.2s ease;
}
.scene.phase-dawn .sky-gradient {
  background: linear-gradient(180deg, #2a2848 0%, #8a5878 35%, #d8a078 65%, #6a90a8 100%);
}
.scene.phase-day .sky-gradient {
  background: linear-gradient(180deg, #4a9ee8 0%, #8ed4f8 42%, #d4f0ff 100%);
}
.scene.phase-dusk .sky-gradient {
  background: linear-gradient(180deg, #4a3868 0%, #b86858 40%, #e8a060 70%, #3a4868 100%);
}
.scene.phase-night .sky-gradient {
  background: linear-gradient(180deg, #060a14 0%, #121c38 55%, #1e2a48 100%);
}

.horizon-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--street-h) + 8vh);
  height: 18vh;
  z-index: 1;
  background: linear-gradient(0deg, rgba(40, 80, 60, 0.35), transparent);
  pointer-events: none;
}
.scene.phase-day .horizon-glow {
  background: linear-gradient(0deg, rgba(120, 180, 100, 0.25), transparent);
}

/* Sol / Lua — só um visível por vez */
.scene .celestial {
  position: absolute;
  top: 10%;
  border-radius: 50%;
  transition: opacity 0.9s ease, left 1s ease, transform 0.9s ease;
  pointer-events: none;
  z-index: 2;
}
.scene .celestial.sun {
  width: 52px;
  height: 52px;
  background: radial-gradient(circle at 32% 28%, #fffde8, #ffd54a 55%, #f59e0b);
  box-shadow: 0 0 50px rgba(255, 210, 80, 0.55);
  opacity: 0;
  visibility: hidden;
}
.scene .celestial.moon {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle at 38% 32%, #f4f0e4, #c8c0b0 70%, #989080);
  box-shadow: 0 0 28px rgba(220, 230, 255, 0.25);
  opacity: 0;
  visibility: hidden;
}
.scene.show-sun .celestial.sun {
  opacity: 1;
  visibility: visible;
}
.scene.show-moon .celestial.moon {
  opacity: 1;
  visibility: visible;
}
.scene.phase-day.show-sun .celestial.moon,
.scene.phase-day .celestial.moon {
  opacity: 0 !important;
  visibility: hidden !important;
}
.scene.phase-night.show-moon .celestial.sun,
.scene.phase-night .celestial.sun {
  opacity: 0 !important;
  visibility: hidden !important;
}
.scene.phase-dawn.show-sun .celestial.sun { opacity: 0.75; transform: scale(0.9); }
.scene.phase-dusk.show-moon .celestial.moon { opacity: 0.85; }
.scene.phase-dusk.show-sun .celestial.sun { opacity: 0.35; transform: scale(0.75); }

/* Estrelas só à noite */
.stars-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s;
  z-index: 1;
}
.scene.phase-night .stars-layer,
.scene.phase-dawn .stars-layer,
.scene.phase-dusk .stars-layer {
  opacity: 1;
}
.scene.phase-day .stars-layer { opacity: 0; }
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}
.star-1 { top: 10%; left: 15%; width: 2px; height: 2px; }
.star-2 { top: 6%; left: 42%; width: 3px; height: 3px; animation-delay: 0.6s; }
.star-3 { top: 14%; left: 68%; width: 2px; height: 2px; animation-delay: 1.2s; }
.star-4 { top: 20%; left: 82%; width: 2px; height: 2px; animation-delay: 0.3s; }
.star-5 { top: 8%; left: 28%; width: 2px; height: 2px; animation-delay: 1.8s; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Nuvens */
.clouds-layer {
  position: absolute;
  inset: 8% 0 40%;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.scene.weather-cloudy .clouds-layer,
.scene.weather-rain .clouds-layer {
  opacity: 1;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  filter: blur(1px);
  animation: cloud-drift linear infinite;
}
.scene.phase-night .cloud,
.scene.phase-dusk .cloud {
  background: rgba(180, 190, 210, 0.35);
}
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.cloud-a { width: 80px; height: 32px; top: 12%; left: -10%; animation-duration: 95s; }
.cloud-a::before { width: 44px; height: 44px; top: -18px; left: 12px; }
.cloud-a::after { width: 52px; height: 38px; top: -10px; right: 8px; }
.cloud-b { width: 100px; height: 36px; top: 22%; left: -20%; animation-duration: 120s; animation-delay: -30s; opacity: 0.85; }
.cloud-b::before { width: 50px; height: 50px; top: -22px; left: 20px; }
.cloud-c { width: 70px; height: 28px; top: 8%; left: -15%; animation-duration: 80s; animation-delay: -50s; }
.cloud-d { width: 90px; height: 30px; top: 28%; left: -25%; animation-duration: 110s; animation-delay: -70s; opacity: 0.7; }
@keyframes cloud-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(130vw); }
}

/* Chuva */
.weather-rain {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  background: repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 14px,
    rgba(174, 210, 238, 0.35) 14px,
    rgba(174, 210, 238, 0.35) 16px
  );
  animation: rain-fall 0.45s linear infinite;
}
.scene.weather-rain .weather-rain { opacity: 0.65; }
@keyframes rain-fall {
  from { background-position: 0 0; }
  to { background-position: 40px 80px; }
}

/* --- Cidade --- */
.city-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--street-h);
  z-index: 1;
  pointer-events: none;
}
.city-back {
  height: 52vh;
  overflow: hidden;
}
.building.bld-sky {
  position: absolute;
  bottom: 0;
  border-radius: 3px 3px 0 0;
}
.bld-body {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bld-roof {
  position: absolute;
  top: -8px;
  left: 8%;
  right: 8%;
  height: 12px;
  background: #3a3548;
  border-radius: 2px;
}
.bld-antenna {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 28px;
  background: #666;
}
.bld-antenna::after {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4444;
  animation: blink-red 2s ease-in-out infinite;
}
.bld-windows {
  position: absolute;
  inset: 10px 8px;
  opacity: 0.9;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 16px, rgba(255, 220, 140, 0.15) 16px, rgba(255, 220, 140, 0.22) 20px),
    repeating-linear-gradient(90deg, transparent 0, transparent 12px, rgba(255, 220, 140, 0.12) 12px, rgba(255, 220, 140, 0.18) 16px);
}
.scene.phase-day .bld-windows {
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 16px, rgba(255, 248, 200, 0.2) 16px, rgba(255, 248, 200, 0.35) 20px),
    repeating-linear-gradient(90deg, transparent 0, transparent 12px, rgba(255, 248, 200, 0.15) 12px, rgba(255, 248, 200, 0.28) 16px);
}
.bld-1 { left: 1%; width: 12%; height: 78%; background: linear-gradient(180deg, #4e4c62, #323040); }
.bld-2 { left: 14%; width: 9%; height: 55%; background: linear-gradient(180deg, #3e4e72, #2a3858); }
.bld-3 { left: 25%; width: 10%; height: 88%; background: linear-gradient(180deg, #565668, #383848); }
.bld-4 { right: 28%; width: 11%; height: 62%; background: linear-gradient(180deg, #444c5c, #2e3448); }
.bld-5 { right: 14%; width: 10%; height: 82%; background: linear-gradient(180deg, #4e4e5c, #343038); }
.bld-6 { right: 2%; width: 8%; height: 48%; background: linear-gradient(180deg, #3a3a44, #282830); }
@keyframes blink-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Casas suburbio */
.suburb-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--street-h) + 1.2vh);
  height: 18vh;
  z-index: 2;
  pointer-events: none;
}
.house {
  position: absolute;
  bottom: 0;
}
.house-roof {
  position: absolute;
  top: 0;
  left: -6px;
  right: -6px;
  height: 42%;
  background: linear-gradient(135deg, #6a5040, #4a3020);
  clip-path: polygon(8% 100%, 50% 0, 92% 100%);
}
.house-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58%;
  background: linear-gradient(180deg, #9a8878, #6a5848);
  border-radius: 2px 2px 0 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.25);
}
.house-door {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 70%;
  background: #4a3828;
  border-radius: 3px 3px 0 0;
}
.house-win {
  position: absolute;
  top: 22%;
  width: 22%;
  height: 28%;
  background: rgba(200, 230, 255, 0.45);
  border: 2px solid #5a4838;
}
.house-1 { left: 5%; width: 66px; height: 60px; }
.house-1 .house-win { left: 12%; }
.house-2 { left: 15%; width: 52px; height: 46px; opacity: 0.86; }
.house-2 .house-win:nth-child(2) { left: 10%; }
.house-2 .house-win:nth-child(3) { right: 10%; }
.house-3 { right: 24%; width: 58px; height: 50px; }

/* --- Floresta --- */
.forest-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--street-h);
  height: 48vh;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.hill {
  position: absolute;
  left: -5%;
  right: -5%;
  border-radius: 50% 50% 0 0;
}
.hill-far {
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, #2a5840, #1a4028);
  opacity: 0.65;
}
.hill-near {
  bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, #347050, #1e5038);
  opacity: 0.85;
}
.forest-layer .tree {
  position: absolute;
  bottom: 8%;
  z-index: 2;
}
.forest-layer .tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(90deg, #3a2818, #5a4030, #3a2818);
}
.forest-layer .tree-crown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(ellipse at 40% 30%, #3a8858, #1a5030 65%, #0e3018);
}
.tree-1 { left: 32%; width: 95px; height: 58%; }
.tree-1 .tree-trunk { width: 22px; height: 38%; }
.tree-1 .tree-crown { bottom: 32%; width: 95px; height: 78px; }
.tree-2 { right: 6%; width: 115px; height: 68%; }
.tree-2 .tree-trunk { width: 26px; height: 36%; }
.tree-2 .tree-crown { bottom: 30%; width: 115px; height: 95px; }
.tree-3 { left: 52%; width: 72px; height: 44%; opacity: 0.75; }
.tree-3 .tree-trunk { width: 16px; height: 40%; }
.tree-3 .tree-crown { bottom: 34%; width: 72px; height: 58px; }
.tree-4 { left: 68%; width: 55px; height: 36%; opacity: 0.6; }
.tree-4 .tree-trunk { width: 12px; height: 42%; }
.tree-4 .tree-crown { bottom: 36%; width: 55px; height: 48px; }
.forest-layer .bush {
  position: absolute;
  bottom: 6%;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 40%, #2a6848, #1a4028);
  z-index: 3;
}
.bush-1 { left: 44%; width: 85px; height: 38px; }
.bush-2 { right: 18%; width: 65px; height: 30px; }
.bush-3 { left: 58%; width: 50px; height: 24px; opacity: 0.8; }

.forest-layer .dh-opening {
  overflow: visible;
}

.forest-layer .forest-hub {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: min(188px, 26vw);
  height: 126px;
  z-index: 9;
}
.forest-layer .forest-mist {
  position: absolute;
  inset: auto 0 0;
  height: 50%;
  background: linear-gradient(0deg, rgba(20, 45, 35, 0.8), transparent);
  z-index: 7;
}

/* --- Rua --- */
.street-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--street-h);
  z-index: 5;
}
.street-layer .sidewalk {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, #7a7870, #5a5850);
  overflow: hidden;
}
.sidewalk-tiles {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 48px, rgba(0, 0, 0, 0.08) 48px, rgba(0, 0, 0, 0.08) 50px);
}
.street-layer .curb {
  position: absolute;
  top: calc(30% - 3px);
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, #8a8880, #4a4840);
  z-index: 9;
}
.street-layer .road {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #323238, #242428);
}
.road-texture {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 8px, rgba(255, 255, 255, 0.04) 8px, rgba(255, 255, 255, 0.04) 9px);
}
.scene.weather-rain .road-texture {
  opacity: 0.35;
}