/* ============================================
   TEMAS DAS 10 FASES
   Cada fase tem um modificador no #cenario que
   muda o céu, sol e elementos via JS.
   ============================================ */

/* TEMA 1 — FLORESTA (default — já no style.css) */

/* TEMA 2 — MAR */
.cenario--mar .cenario__ceu {
  background: linear-gradient(180deg, #1976d2 0%, #4fc3f7 50%, #00838f 85%);
}
.cenario--mar .cenario__chao {
  background: linear-gradient(180deg, #006978 0%, #004d5a 100%);
}
.cenario--mar .cenario__trilha {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 220, 100, 0.4) 70%, rgba(255, 220, 100, 0.7) 100%);
}

/* TEMA 3 — ESPAÇO */
.cenario--espaco .cenario__ceu {
  background: linear-gradient(180deg, #0a0a1f 0%, #1a1a4a 50%, #4a148c 100%);
}
.cenario--espaco .cenario__chao {
  background: linear-gradient(180deg, #4a148c 0%, #1a0033 100%);
}
.cenario--espaco .cenario__trilha {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.3) 100%);
}

/* TEMA 4 — DESERTO */
.cenario--deserto .cenario__ceu {
  background: linear-gradient(180deg, #ffb74d 0%, #ff8a65 50%, #d84315 100%);
}
.cenario--deserto .cenario__chao {
  background: linear-gradient(180deg, #f4a460 0%, #c97834 100%);
}

/* TEMA 5 — GELO */
.cenario--gelo .cenario__ceu {
  background: linear-gradient(180deg, #b3e5fc 0%, #e1f5fe 60%, #ffffff 100%);
}
.cenario--gelo .cenario__chao {
  background: linear-gradient(180deg, #ffffff 0%, #b3e5fc 100%);
}

/* TEMA 6 — VULCÃO */
.cenario--vulcao .cenario__ceu {
  background: linear-gradient(180deg, #b71c1c 0%, #ff6f00 50%, #ffab00 100%);
}
.cenario--vulcao .cenario__chao {
  background: linear-gradient(180deg, #5d1a0e 0%, #2a0a05 100%);
}

/* TEMA 7 — CASTELO */
.cenario--castelo .cenario__ceu {
  background: linear-gradient(180deg, #5e35b1 0%, #7e57c2 50%, #b39ddb 100%);
}
.cenario--castelo .cenario__chao {
  background: linear-gradient(180deg, #6a4c93 0%, #3d2a5c 100%);
}

/* TEMA 8 — DOCES */
.cenario--doces .cenario__ceu {
  background: linear-gradient(180deg, #f8bbd0 0%, #f48fb1 50%, #ff80ab 100%);
}
.cenario--doces .cenario__chao {
  background: linear-gradient(180deg, #ec407a 0%, #ad1457 100%);
}

/* TEMA 9 — DINOS */
.cenario--dinos .cenario__ceu {
  background: linear-gradient(180deg, #66bb6a 0%, #aed581 50%, #cddc39 100%);
}
.cenario--dinos .cenario__chao {
  background: linear-gradient(180deg, #558b2f 0%, #33691e 100%);
}

/* TEMA 10 — CIRCO */
.cenario--circo .cenario__ceu {
  background:
    repeating-linear-gradient(
      90deg,
      #f44336 0px, #f44336 80px,
      #ffeb3b 80px, #ffeb3b 160px
    );
}
.cenario--circo .cenario__chao {
  background: linear-gradient(180deg, #fbc02d 0%, #f57f17 100%);
}