/* ============================================================
   🎰 RODA DOS CAMPEÕES — «ficas ou arriscas?»
   O lugar no pódio não muda os prémios: muda quantas ESCOLHAS tens.
     🥇 1º → 3 rodagens, decide depois de cada uma
     🥈 2º → 2 rodagens, troca uma vez (a segunda é final)
     🥉 3º/4º/5º → 1 rodagem, fica com o que sair
   ============================================================ */

.champ-spins{
  margin:2px 0 8px; text-align:center; font-size:.85rem; line-height:1.4;
  background:rgba(255,255,255,.1); border-radius:12px; padding:8px 12px; max-width:520px;
}

/* cartão que aparece depois de a roda parar, com a decisão */
.champ-offer{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:100%; max-width:400px;
  background:rgba(0,0,0,.28); border:2px solid rgba(255,214,90,.5);
  border-radius:16px; padding:13px 12px;
  animation:coIn .3s cubic-bezier(.2,1.3,.4,1);
}
@keyframes coIn{ from{opacity:0; transform:translateY(9px) scale(.96)} to{opacity:1; transform:none} }

.champ-offer .co-got{ margin:0; font-size:1.05rem; text-align:center }
.champ-offer .co-warn{ margin:0; font-size:.76rem; line-height:1.35; text-align:center; opacity:.9 }
.champ-offer .co-btns{ display:flex; gap:9px; width:100%; flex-wrap:wrap; justify-content:center }
.champ-offer .co-btns .btn{ flex:1 1 145px; min-width:0 }

/* o botão de arriscar é quente e distinto do verde de «ficar» */
.btn-risk{
  background:linear-gradient(180deg,#ffb347,#e8791f); color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.15;
}
.btn-risk small{ font-size:.66rem; opacity:.92; font-weight:700 }

@media (prefers-reduced-motion:reduce){ .champ-offer{ animation:none } }