/* ===== TV: paisagem de Alter do Chão ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
}
body.sem-cursor { cursor: none; }

#tv { position: fixed; inset: 0; }
#cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter 2s ease; }

/* ---------- Camadas que mudam com as escolhas ---------- */
.camada { opacity: 0; transition: opacity 1.8s ease; }
.cortavel { transition: opacity 1.8s ease; }

#cena[data-praia="bom"] .so-praia-bom,
#cena[data-praia="ruim"] .so-praia-ruim,
#cena[data-floresta="bom"] .so-floresta-bom,
#cena[data-floresta="ruim"] .so-floresta-ruim,
#cena[data-agua="bom"] .so-agua-bom,
#cena[data-agua="ruim"] .so-agua-ruim,
#cena[data-peixes="bom"] .so-peixes-bom,
#cena[data-peixes="ruim"] .so-peixes-ruim,
#cena[data-ceu="bom"] .so-ceu-bom,
#cena[data-ceu="ruim"] .so-ceu-ruim,
#cena[data-energia="bom"] .so-energia-bom,
#cena[data-energia="ruim"] .so-energia-ruim { opacity: 1; }

/* Camadas que "tingem" a foto (água marrom, água mais azul, arco-íris) */
.mistura-cor { mix-blend-mode: color; }
.tela { mix-blend-mode: screen; }

/* ---------- Animações da paisagem ---------- */
.nuvem { animation: nuvem 90s linear infinite; }
@keyframes nuvem { from { transform: translateX(-250px); } to { transform: translateX(1850px); } }

.raios { transform-box: fill-box; transform-origin: center; animation: girar 50s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.onda { animation: onda 5s ease-in-out infinite alternate; }
.onda.o2 { animation-duration: 6.5s; animation-direction: alternate-reverse; }
@keyframes onda { from { transform: translateX(-18px); } to { transform: translateX(18px); } }

.balanca { transform-box: fill-box; transform-origin: center bottom; animation: balanca 4s ease-in-out infinite; }
@keyframes balanca {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(5px) rotate(1.5deg); }
}

.pulo { animation: pulo 5s ease-in-out infinite; }
.pulo.p2 { animation-duration: 4.2s; animation-delay: -1.8s; }
.pulo.p3 { animation-duration: 4.6s; animation-delay: -3.1s; }
.pulo.p4 { animation-duration: 3.8s; animation-delay: -0.6s; }
@keyframes pulo {
  0% { transform: translate(-90px, 50px) rotate(-45deg); opacity: 0; }
  8% { opacity: 1; }
  25% { transform: translate(-40px, -50px) rotate(-20deg); }
  40% { transform: translate(20px, -75px) rotate(5deg); }
  58% { transform: translate(80px, -20px) rotate(35deg); }
  66% { transform: translate(100px, 40px) rotate(50deg); opacity: 1; }
  72%, 100% { transform: translate(100px, 60px) rotate(50deg); opacity: 0; }
}

.ondinha { transform-box: fill-box; transform-origin: center; animation: ondinha 2.5s ease-out infinite; }
@keyframes ondinha { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

.fumaca { transform-box: fill-box; transform-origin: center; animation: fumaca 5.5s linear infinite; }
@keyframes fumaca {
  0% { transform: translate(0, 0) scale(.35); opacity: 0; }
  12% { opacity: .85; }
  100% { transform: translate(50px, -300px) scale(2.8); opacity: 0; }
}

.fumaca-preta { transform-box: fill-box; transform-origin: center; animation: fumaca-preta 3s linear infinite; }
@keyframes fumaca-preta {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translate(25px, -110px) scale(2.2); opacity: 0; }
}

.chama { transform-box: fill-box; transform-origin: center bottom; animation: chama .35s ease-in-out infinite alternate; }
@keyframes chama { from { transform: scale(1.05, .8); } to { transform: scale(.95, 1.15); } }

.voo { animation: voo 28s linear infinite; }
@keyframes voo { from { transform: translateX(-300px); } to { transform: translateX(1900px); } }

.asa { transform-box: fill-box; transform-origin: center; animation: asa .45s ease-in-out infinite alternate; }
@keyframes asa { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }

.brilho { transform-box: fill-box; transform-origin: center; animation: brilho 2.4s ease-in-out infinite; }
@keyframes brilho { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }

.esgoto-fluxo { stroke-dasharray: 12 9; animation: fluxo .6s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -21; } }

.tartaruga { animation: andar 14s ease-in-out infinite alternate; }
@keyframes andar { from { transform: translateX(-30px); } to { transform: translateX(60px); } }

/* ---------- Faixa do topo ---------- */
#faixa {
  position: absolute;
  top: 2.2vh;
  left: 50%;
  width: min(92vw, 1600px);
  display: flex;
  align-items: center;
  gap: 1.6vw;
  padding: 1.2vh 2vw;
  border-radius: 2.4vw;
  background: rgba(10, 31, 56, .8);
  box-shadow: 0 1vh 4vh rgba(0, 0, 0, .35);
  transform: translateX(-50%);
  transition: opacity .6s, transform .6s;
}
.ano {
  flex: 0 0 auto;
  padding: .2vw 1.4vw;
  border-radius: 1.4vw;
  background: linear-gradient(180deg, #fff27a, #ffc93b);
  color: #10243f;
  font-size: 3vw;
  font-weight: 800;
  line-height: 1.2;
}
#titulo { font-size: 2.6vw; font-weight: 800; line-height: 1.1; }
#subtitulo { font-size: 1.8vw; line-height: 1.2; opacity: .95; }
body[data-fase="final"] #faixa { opacity: 0; transform: translate(-50%, -150%); }

/* ---------- Medidor ---------- */
#medidor {
  position: absolute;
  left: 2vw;
  bottom: 4vh;
  width: 28vw;
  padding: 1vw 1.4vw;
  border-radius: 1.6vw;
  background: rgba(10, 31, 56, .8);
  opacity: 0;
  transition: opacity .6s;
}
body[data-fase="jogando"] #medidor,
body[data-fase="final"] #medidor { opacity: 1; }
.medidor-topo { display: flex; justify-content: space-between; font-size: 1.5vw; font-weight: 700; }
.barra { margin-top: .6vw; height: 1.6vw; border-radius: 1vw; background: rgba(255, 255, 255, .18); overflow: hidden; }
#nivel { width: 50%; height: 100%; border-radius: 1vw; background: hsl(60, 80%, 48%); transition: width 1.5s ease, background 1.5s; }

/* ---------- Aviso da última escolha ---------- */
#aviso {
  position: absolute;
  left: 32vw;
  right: 2vw;
  bottom: 3vh;
  display: flex;
  align-items: center;
  gap: 1.6vw;
  padding: 1.2vw 2vw;
  border-left: 1.2vw solid #3ddc84;
  border-radius: 1.8vw;
  background: rgba(255, 255, 255, .96);
  color: #10243f;
  box-shadow: 0 1vh 5vh rgba(0, 0, 0, .4);
  transform: translateY(170%);
  transition: transform .6s cubic-bezier(.2, 1.4, .4, 1);
}
#aviso.mostrar { transform: none; }
#aviso.ruim { border-left-color: #ff9f43; }
#aviso-emoji { font-size: 4.6vw; line-height: 1; }
#aviso-titulo { font-size: 1.9vw; font-weight: 800; line-height: 1.15; }
#aviso-texto { font-size: 1.7vw; line-height: 1.2; }

/* ---------- Final ---------- */
#final {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 1300px);
  padding: 3vh 3vw;
  border-radius: 3vw;
  background: rgba(10, 31, 56, .86);
  box-shadow: 0 2vh 8vh rgba(0, 0, 0, .5);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.6);
  transform-origin: top center;
  transition: all 1s cubic-bezier(.2, 1.2, .4, 1);
}
#final.mostrar { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#final.mostrar.compacto { top: 2vh; transform: translate(-50%, 0) scale(.62); }
#final .pequeno { font-size: 1.6vw; opacity: .85; }
#final h1 { margin: .6vh 0; font-size: 4.6vw; line-height: 1.05; color: #ffd43b; text-shadow: 0 .4vw 0 rgba(0, 0, 0, .3); }
#final-estrelas { font-size: 4vw; letter-spacing: .6vw; }
#final-placar { font-size: 1.9vw; opacity: .9; }
#final-titulo { margin: .6vh 0; font-size: 2.9vw; font-weight: 800; }
#final .lema { margin: 1vh 0 0; font-size: 2vw; color: #b8f5c9; }
#final.compacto .lema, #final.compacto .pequeno { display: none; }

.confete {
  position: absolute;
  top: -5vh;
  width: 1vw;
  height: 1.6vw;
  border-radius: .2vw;
  pointer-events: none;
  animation: cair linear forwards;
}
@keyframes cair { to { transform: translateY(115vh) rotate(720deg); } }

/* ---------- Efeito ao mudar a paisagem ---------- */
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#flash.bom { background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(61, 220, 132, .25) 60%, transparent); animation: flash 1.2s ease-out; }
#flash.ruim { background: radial-gradient(circle, rgba(60, 40, 20, .1), rgba(40, 25, 10, .55)); animation: flash 1.2s ease-out; }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Pequenos ---------- */
#dica-tela {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 1vw 2vw;
  border-radius: 1vw;
  background: rgba(0, 0, 0, .65);
  font-size: 1.6vw;
  transform: translate(-50%, -50%);
  transition: opacity 1s;
  pointer-events: none;
}
#dica-tela.sumir { opacity: 0; }
#credito { position: absolute; left: 1vw; bottom: .4vh; font-size: .85vw; opacity: .7; text-shadow: 0 0 4px #000; }
#status { position: absolute; right: 1vw; bottom: .4vh; font-size: .9vw; opacity: .55; text-shadow: 0 0 4px #000; }