/* Telas 2 e 3: pôster anos 70 (pedido) e tela final verde (sim). */

/* ---------- comum aos dois pôsteres ---------- */
.sunburst { position: fixed; inset: 0; background: repeating-conic-gradient(from -90deg at 50% 100%, #ecdab2 0deg 6deg, #dcc08a 6deg 12deg); }
.card {
  position: relative; z-index: 2; margin: auto; width: min(540px, 100%); background: var(--cream); border: 3px solid var(--brown);
  border-radius: 26px; padding: 34px 28px 28px; text-align: center; box-shadow: 10px 10px 0 var(--brown);
}
.card h1 { font-family: 'Shrikhand', cursive; font-weight: 400; color: var(--brown); font-size: clamp(34px, 8vw, 58px); line-height: 1.05; text-shadow: 3px 3px 0 var(--mustard); }

/* ---------- tela 2: pedido ---------- */
#pedido { background: #e6d2a6; }
.waves { position: fixed; left: 0; bottom: 0; width: 100%; height: 38vh; pointer-events: none; }
.kicker { font-family: 'Courier Prime', monospace; font-weight: 700; letter-spacing: .25em; font-size: 12px; color: var(--green); margin-bottom: 14px; }

.btns { display: flex; justify-content: center; gap: 18px; margin-top: 30px; min-height: 60px; align-items: center; }
.btn {
  font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 20px; border: 3px solid var(--brown); border-radius: 999px;
  padding: 12px 34px; cursor: pointer; box-shadow: 4px 4px 0 var(--brown); transition: transform .2s;
}
#btnSim { background: var(--green); color: var(--cream); }
#btnNao { background: var(--mustard); color: var(--brown); z-index: 30; }
#btnNao.fugitivo { position: fixed; transition: left .22s ease, top .22s ease; }
.naomsg { min-height: 1.4em; margin-top: 22px; font-family: 'Courier Prime', monospace; color: var(--brown2); font-size: 15px; }

/* ---------- tela 3: sim ---------- */
#sim { background: var(--green); }
#sim .sunburst { background: repeating-conic-gradient(from -90deg at 50% 100%, #2f4a2c 0deg 6deg, #38552f 6deg 12deg); }

.flores { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.flor { position: absolute; top: -60px; animation: cair linear infinite; }
@keyframes cair { to { transform: translateY(115vh) rotate(400deg); } }

.stamp {
  display: inline-block; font-family: 'Courier Prime', monospace; font-weight: 700; letter-spacing: .2em; color: var(--rust);
  border: 3px double var(--rust); padding: 6px 14px; transform: rotate(-7deg); margin-bottom: 16px; font-size: 15px;
}
.final .polaroid { width: min(250px, 80%); margin: 22px auto 8px; --r: 2deg; }
.final p { font-family: 'Courier Prime', monospace; color: var(--brown); font-size: 15px; line-height: 1.5; margin-top: 14px; }
.final .assin { font-family: 'Caveat', cursive; font-size: 26px; color: var(--blue); margin-top: 10px; }

@media (max-width: 600px) {
  .card { padding: 28px 18px 22px; box-shadow: 7px 7px 0 var(--brown); }
  .btn { font-size: 18px; padding: 10px 26px; }
}