/* ---------- Ciclo em andamento ---------- */
.now-playing {
  display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; padding: 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.now-title { font-size: 2.2rem; letter-spacing: -0.03em; }
.cycle { display: grid; gap: 20px; }
.stack-sm { display: grid; gap: 6px; align-content: start; justify-items: start; }
.deadline { display: inline-block; margin: 2px 0; padding: 4px 10px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 700; background: var(--primary-soft); color: var(--primary); }
.deadline::first-letter { text-transform: uppercase; }
.deadline.is-near { background: var(--danger-soft); color: var(--danger); }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .now-playing { padding: 16px; gap: 16px; } .now-title { font-size: 1.6rem; } }

/* ---------- Fase de sugestões ---------- */
.suggesting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 28px; align-items: start; }
.suggest-list { display: grid; gap: 16px; }

/* O palco da roleta: escuro nos dois temas, para as cores das fatias brilharem */
.table-felt {
  position: sticky; top: 24px; display: grid; gap: 18px; justify-items: center; padding: 26px 22px; color: #efeaff;
  border-radius: 24px; overflow: hidden; isolation: isolate;
  background: radial-gradient(110% 80% at 50% 0%, var(--stage-2), var(--stage-1) 70%);
  box-shadow: 0 30px 60px -30px rgb(59 31 120 / 60%);
}
.table-felt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 30% at 50% 42%, rgb(167 139 250 / 25%), transparent 70%); }
.felt-actions { display: grid; gap: 10px; justify-items: center; text-align: center; }
.felt-note { color: #c8bff0; text-align: center; font-size: .9rem; max-width: 30ch; }
.table-felt .error { color: #fecaca; }
.roulette { width: 100%; max-width: 330px; }
.roulette svg { display: block; width: 100%; height: auto; overflow: visible; }
.roulette-rim { fill: none; stroke: rgb(255 255 255 / 85%); stroke-width: 5; }
.roulette-pointer { fill: #fbbf24; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 40%)); }
.roulette-slice { stroke: rgb(255 255 255 / 70%); stroke-width: 1.5; transition: opacity .3s; }
.slice-0 { fill: var(--slice-0); } .slice-1 { fill: var(--slice-1); } .slice-2 { fill: var(--slice-2); }
.slice-3 { fill: var(--slice-3); } .slice-4 { fill: var(--slice-4); } .slice-5 { fill: var(--slice-5); }
[data-theme='dark'] .roulette-slice.slice-0 { fill: #7c3aed; }
[data-theme='dark'] .roulette-slice.slice-1 { fill: #db2777; }
[data-theme='dark'] .roulette-slice.slice-2 { fill: #d97706; }
[data-theme='dark'] .roulette-slice.slice-3 { fill: #0d9488; }
[data-theme='dark'] .roulette-slice.slice-4 { fill: #2563eb; }
[data-theme='dark'] .roulette-slice.slice-5 { fill: #ea580c; }
.roulette-label { fill: #fff; font: 600 12.5px var(--font); paint-order: stroke; stroke: rgb(0 0 0 / 22%); stroke-width: 2px; }
.roulette.has-winner .roulette-slice:not(.is-winner-slice) { opacity: .35; }
.roulette .is-winner .roulette-label { font-weight: 800; }
.roulette-hub { fill: #fff; stroke: rgb(0 0 0 / 10%); stroke-width: 1; }
.roulette-hub-dot { fill: var(--stage-1); }
.roulette.is-waiting svg g g { opacity: .9; }
.verdict { text-align: center; display: grid; gap: 4px; justify-items: center; }
.verdict p:first-child { color: #c8bff0; font-size: .9rem; }
.verdict-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .verdict { animation: rise .45s cubic-bezier(.2,.9,.3,1.2); }
  @keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
}
.verdict-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.draw-list { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.draw-list .won { font-weight: 700; color: var(--primary); }
details summary { cursor: pointer; color: var(--primary); font-weight: 500; }
details p { margin-top: 8px; }
@media (max-width: 960px) {
  .suggesting { grid-template-columns: 1fr; }
  .table-felt { position: static; order: -1; }
}