/* Fundo das telas: a cidade recolorida, as nuvens e as linhas de varredura.
   As imagens saem de ferramentas/preparar_assets.py — a mesma arte base
   (CIDADE VETOR) pintada com a paleta de cada referência. */

.cenario {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--fundo-topo);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.cenario--verde {
  background-image: url("/assets/cenario/cidade-verde.png");
}

.cenario--laranja {
  background-image: url("/assets/cenario/cidade-laranja.png");
}

/* Nuvens em faixa, atravessando devagar. */
.cenario__nuvens {
  position: absolute;
  top: 6%;
  left: 0;
  width: 190%;
  max-width: none;
  opacity: 0.55;
  animation: nuvens-passam 90s linear infinite;
}

@keyframes nuvens-passam {
  from { transform: translateX(0); }
  to { transform: translateX(-47.4%); } /* metade da imagem: emenda invisível */
}

/* As linhas horizontais que a arte tem por cima de tudo. */
.cenario__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.10) 0 2px,
    transparent 2px 4px
  );
}

/* Conteúdo de qualquer tela fica acima do cenário. */
.tela {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  /* As figuras decoradas passam de propósito das bordas laterais; sem isto
     elas geram uma barra de rolagem horizontal. */
  overflow-x: hidden;
}

/* --- objetos soltos (dinheiro, colar, detetive) -------------------- */

.enfeite {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--giro, 0deg));
}

.enfeite--flutua {
  animation: flutuar 7s ease-in-out infinite alternate;
}

/* O giro entra nos keyframes porque a animação substitui o transform
   inteiro — se ficasse só na classe, a inclinação sumiria ao animar. */
@keyframes flutuar {
  from { transform: rotate(var(--giro, 0deg)) translateY(0); }
  to   { transform: rotate(var(--giro, 0deg)) translateY(-18px); }
}

@media (max-width: 900px) {
  /* Em tela estreita os enfeites brigam com o conteúdo. */
  .enfeite {
    display: none;
  }
}