/* Ajustes mobile — cenário proporcional */
@media (max-width: 768px) {
  :root {
    --street-h: 34vh;
    --scene-scale: 1;
  }

  .scene {
    transform-origin: bottom center;
  }

  .city-layer.city-back {
    height: 40vh;
  }

  .suburb-layer {
    height: 10vh;
    bottom: calc(var(--street-h) + 0.4vh);
    opacity: 0.7;
  }

  .house-1 { left: 3%; width: 42px; height: 38px; }
  .house-2 { left: 11%; width: 36px; height: 32px; }
  .house-3 { right: 21%; width: 40px; height: 34px; }

  .forest-layer {
    height: 38vh;
  }

  .forest-layer .forest-hub {
    width: min(124px, 32vw);
    height: 88px;
    bottom: 5%;
  }

  .hill-far { height: 28%; }
  .hill-near { height: 18%; }

  .tree-1 { left: 22%; width: 72px; height: 42%; }
  .tree-2 { right: 2%; width: 86px; height: 48%; }
  .tree-3 { left: 48%; width: 54px; height: 34%; opacity: 0.42; }
  .tree-4 { left: 66%; width: 42px; height: 28%; opacity: 0.34; }

  .bld-1 { width: 12%; height: 56%; }
  .bld-2 { width: 9%; height: 38%; left: 11%; }
  .bld-3 { width: 10%; height: 62%; left: 22%; }
  .bld-4 { width: 11%; height: 44%; }
  .bld-5 { width: 10%; height: 64%; }
  .bld-6 { width: 8%; height: 34%; }

  .scene .celestial.sun { width: 40px; height: 40px; top: 8%; }
  .scene .celestial.moon { width: 34px; height: 34px; top: 9%; }

  .cloud-a, .cloud-b, .cloud-c, .cloud-d {
    transform: scale(0.75);
  }

  .street-lamp .lamp-pool {
    width: 50px;
    height: 22px;
  }

  .sidewalk-dog-zone .dog-wrap {
    width: min(72px, 22vw) !important;
    height: min(64px, 18vw) !important;
  }

  .horizon-glow {
    bottom: calc(var(--street-h) + 4vh);
    height: 12vh;
  }
}

@media (max-width: 480px) {
  :root { --street-h: 32vh; }
  .suburb-layer { display: none; }
  .forest-layer .forest-hub {
    width: min(110px, 31vw);
    height: 80px;
  }
}