/* Roleta de encontros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.filtro {
  border: 0; cursor: pointer; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 15px;
  background: var(--blush); color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: transform .15s var(--pop);
}
.filtro[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.filtro:active { transform: scale(.95); }

.roda-box { position: relative; width: min(340px, 86vw); aspect-ratio: 1; margin: 0 auto; }
.roda {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line), 0 18px 40px rgba(181, 18, 79, .18);
  transition: transform 4.2s cubic-bezier(.12, .7, .1, 1);
}
.roda-emoji {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: grid; place-items: center; font-size: 30px; pointer-events: none;
}
.ponteiro {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--ink);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.2));
}
.centro {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 2;
  border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.centro img { width: 40px; height: auto; }
.girar { display: flex; justify-content: center; margin-top: 26px; }
.girar .btn { min-width: 200px; font-size: 18px; }

.ideia { margin-top: 22px; background: var(--blush); border-radius: 24px; padding: 22px; text-align: center; }
.ideia-emoji { font-size: 46px; line-height: 1; }
.ideia h3 { font-size: 24px; margin: 10px 0 6px; }
.ideia p { color: var(--mauve); }
.ideia .res-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.lista-ideias { columns: 2 240px; column-gap: 24px; padding-left: 20px; }
.lista-ideias li { break-inside: avoid; }