/* Roleta: só o específico (fita, marcador, animação, resultado). Casca, abas, botões, slots, selos, painéis e linhas vêm de ui-casca.css e ui-pecas.css. */
.roleta { display: flex; flex-direction: column; gap: var(--au-esp-4); min-width: 0; color: var(--au-texto); font-family: var(--au-fonte-texto); font-size: var(--au-t-2); }
.roleta-descricao { margin: 0; color: var(--au-texto-suave); line-height: 1.4; }

/* Fita: a tabela de prêmios em linha. Cada cartão leva ícone, nome e a chance; o marcador começa no primeiro prêmio e anda até o sorteado. */
/* orig/app.css ainda tem um .roleta-fita absoluto (arte antiga): .roleta .roleta-fita vence e zera top/left/gap/will-change */
.roleta .roleta-fita { display: block; top: auto; left: auto; gap: 0; will-change: auto; width: 100%; max-width: 100%; container-type: inline-size; --roleta-cartao: 96px; --roleta-vao: var(--au-esp-2); --roleta-passo: calc(var(--roleta-cartao) + var(--roleta-vao)); position: relative; overflow-x: auto; overflow-y: hidden; padding: var(--au-esp-3) 0; background: var(--au-poco); border: 1px solid var(--au-borda); border-radius: var(--au-raio-3); scrollbar-width: thin; }
.roleta-fita__pista { display: flex; gap: var(--roleta-vao); position: relative; width: max-content; padding: 0 var(--au-esp-3); }
.roleta-fita .au-slot { flex: none; width: var(--roleta-cartao); height: auto; min-height: 112px; gap: var(--au-esp-1); padding: var(--au-esp-2) var(--au-esp-1); cursor: default; text-align: center; }
.roleta-fita .au-slot__imagem { width: 40px; height: 40px; image-rendering: pixelated; }
.roleta-fita .au-slot__marca { font: 500 var(--au-t-2) var(--au-fonte-num); color: var(--au-valor); }
.roleta-marcador { position: absolute; top: calc(var(--au-esp-3) * -1); bottom: calc(var(--au-esp-3) * -1); left: calc(var(--au-esp-3) + var(--roleta-cartao) / 2); width: 0; border-left: 2px solid var(--au-sistema); box-shadow: 0 0 10px var(--au-sistema); pointer-events: none; }
.roleta-marcador::before { content: ""; position: absolute; top: 0; left: -7px; border: 6px solid transparent; border-top-color: var(--au-sistema); }

/* Giro: o marcador passa pelos cartões e para no prêmio que o servidor já devolveu. Só existe depois do resultado. */
.roleta-fita__pista--gira .roleta-marcador { animation: roleta-desliza 2400ms cubic-bezier(0.15, 0.7, 0.2, 1) forwards; }
@keyframes roleta-desliza {
  from { transform: translateX(0); }
  55% { transform: translateX(calc(var(--roleta-total) * var(--roleta-passo))); }
  to { transform: translateX(calc(var(--roleta-alvo) * var(--roleta-passo))); }
}

.roleta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--au-esp-3); }
.roleta-motivo { flex: 1; min-width: 160px; font-size: var(--au-t-1); color: var(--au-aviso); }
.roleta-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--au-esp-3); }
.roleta-regra { margin: var(--au-esp-2) 0 0; font-size: var(--au-t-1); line-height: 1.4; color: var(--au-texto-suave); }
.roleta-ver { margin: 0; }

.roleta-resultado { display: flex; flex-direction: column; gap: var(--au-esp-3); padding: var(--au-esp-4); background: var(--au-superficie); border: 1px solid var(--au-valor); border-radius: var(--au-raio-3); }
.roleta-resultado--tarde { animation: roleta-aparece 300ms ease 2400ms both; }
@keyframes roleta-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}
.roleta-resultado__titulo { margin: 0; font: 500 var(--au-t-3) var(--au-fonte-titulo); color: var(--au-valor); }
.roleta-resultado__lista { display: flex; flex-wrap: wrap; gap: var(--au-esp-3); margin: 0; padding: 0; list-style: none; }
.roleta-resultado__item { display: flex; flex-direction: column; align-items: center; gap: var(--au-esp-1); }
.roleta-resultado__item .au-slot { width: 96px; height: auto; min-height: 88px; text-align: center; cursor: default; }

.roleta-tabela { width: 100%; border-collapse: collapse; font-size: var(--au-t-2); }
.roleta-tabela th { padding: var(--au-esp-2) var(--au-esp-3); text-align: left; font-size: var(--au-t-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--au-texto-suave); border-bottom: 1px solid var(--au-borda); }
.roleta-tabela td { padding: var(--au-esp-2) var(--au-esp-3); border-bottom: 1px solid var(--au-borda); }
.roleta-tabela td:last-child { text-align: right; font-family: var(--au-fonte-num); color: var(--au-valor); }

.roleta-fita:focus-visible { outline: 2px solid var(--au-sistema); outline-offset: 2px; }

/* Movimento reduzido: sem deslize e sem atraso; o resultado aparece direto. */
@media (prefers-reduced-motion: reduce) {
  .roleta-fita__pista--gira .roleta-marcador { animation: none; transform: translateX(calc(var(--roleta-alvo) * var(--roleta-passo))); }
  .roleta-resultado--tarde { animation: none; }
}
.au-slot__imagem--falta { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; }