/* =========================================================================
   PlayCash — carteira

   Arquivo da frente de CARTEIRA (www/js/telas/extrato.js, saque.js).
   Só o que é exclusivo dessas telas. A base já entrega: .cartao-saldo,
   .chips, .chip, .chip-valor, .grupo-dia, .linha-extrato, .valor-mais,
   .valor-menos, .item, .linha-resumo, .trilha, .segmentado, .campo-moeda,
   .codigo, .codigo-grande, .vazio, .folha (fx.folha), .esqueleto.

   Carrega DEPOIS de styles.css: no empate de especificidade, o que estiver
   aqui vence.

   Regras herdadas da base e cumpridas aqui: nenhum hex, nenhum rgba, nenhum
   nome de cor. Cor vem de token — exceto no bloco @media print, onde entram
   as cores de sistema Canvas/CanvasText, que são o único jeito de garantir
   preto no papel para quem está no tema escuro (explicado lá embaixo).
   ========================================================================= */

/* =========================================================== 1. EXTRATO */

/* Um dia é um bloco: cabeçalho com o nome do dia e o líquido dele, e as
   linhas embaixo. Sem isso o extrato é uma pilha reta de linhas iguais em
   que "de onde veio isso" não tem resposta rápida. */
.extrato-dia-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

/* O espaço entre os dias já vem do .lista que segura os blocos; a margem que
   a base põe no rótulo desalinharia a linha de base do total. */
.extrato-dia-topo .grupo-dia { margin-top: 0; }

.extrato-dia-total {
  font-size: var(--txt-mini);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ícone do tipo dentro de uma caixa de largura fixa: sem ela, cada emoji tem
   uma largura e os títulos ficam com a margem esquerda serrilhada. Mesma
   família de .linha-acao-icone, um degrau menor porque a linha do extrato é
   mais baixa que a de ação. */
.linha-extrato .extrato-icone {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  font-size: var(--txt-corpo);
  line-height: 1;
}

/* O título do lançamento é o nome do dinheiro: ele aparece inteiro, em duas
   linhas se precisar. A base corta com reticências, e a 320px isso vira
   "Serra Clara: Ver…" e "Depósito de te…" — o extrato para de responder de
   onde veio o centavo, que é a única coisa que ele existe para responder. */
.linha-extrato .linha-extrato-info span:first-child {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Valor em cima, estado do saque embaixo. */
.extrato-fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}

/* A linha de saque é um botão: ela abre o acompanhamento daquele pedido.
   .linha-extrato é <div> na base, então o reset de botão vem aqui. */
.linha-extrato-toque {
  font: inherit;
  color: var(--texto);
  text-align: left;
  width: 100%;
  min-height: 56px;
  cursor: pointer;
  transition: transform var(--tempo-instante) var(--curva);
}

.linha-extrato-toque:active { transform: scale(.98); }

/* ============================================================= 2. SAQUE */

/* Escada de valores embaixo do campo. O trilho rola sozinho quando os quatro
   atalhos não cabem — a página nunca. */
.atalhos-valor { margin-top: calc(var(--e-1) * -1); }

/* ============================================= 2.1 ACOMPANHAMENTO DO PEDIDO */

/* Barra de andamento do pedido, dentro do destaque. O .destaque é uma coluna
   centralizada: sem largura declarada a barra encolhe até o tamanho do texto
   e vira um risco no meio do cartão. */
.saque-andamento { width: 100%; margin-top: var(--e-2); }

/* Cada parada da trilha carrega duas informações na mesma altura: o nome da
   etapa e quanto ela leva. A hora fica embaixo, na linha da nota. Sem este
   wrapper o terceiro filho de .trilha-passo cairia na coluna do marcador,
   porque a grade da base tem duas colunas e só duas. */
.trilha-corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trilha-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.trilha-tempo {
  font-size: var(--txt-mini);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}

/* ======================================================= 3. COMPROVANTE */

/* Comprovante de banco: marca em cima, valor grande, serrilha, dados e o id
   de ponta a ponta no pé. overflow:hidden é o que corta os dois entalhes da
   serrilha pela metade e faz a picotagem parecer picotagem. */
.comprovante {
  border-radius: var(--raio-g);
  padding: var(--e-5) var(--e-4);
  gap: var(--e-4);
  overflow: hidden;
}

.comprovante-cabeca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  color: var(--marca-texto);
}

.comprovante-marca-icone { display: grid; place-items: center; flex: none; }

.comprovante-marca {
  font-size: var(--txt-forte);
  font-weight: var(--peso-extra);
  letter-spacing: var(--letra-titulo);
}

.comprovante-valor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  text-align: center;
}

.comprovante-valor .rotulo-caixa { color: var(--texto-3); }

/* A picotagem. A linha sangra até a borda do cartão; os dois entalhes são
   círculos da cor do fundo da tela, metade para fora, cortados pelo
   overflow:hidden do cartão. */
.comprovante-serrilha {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--borda-forte);
  margin: var(--e-1) calc(var(--e-4) * -1);
}

.comprovante-serrilha::before,
.comprovante-serrilha::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fundo);
}

.comprovante-serrilha::before { left: -8px; }
.comprovante-serrilha::after { right: -8px; }

.comprovante-id {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  align-items: center;
}

.comprovante-id .rotulo-caixa { color: var(--texto-3); }

/* O id tem 32 caracteres e é o que identifica o Pix: ele aparece inteiro.
   A base corta .codigo com reticências, o que aqui esconderia justamente o
   pedaço que a pessoa vai conferir com o banco. <code> também não entra na
   regra de quebra do reset (p, span, strong, li, td, th, label). */
.comprovante-id .codigo {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: center;
  padding: var(--e-2) var(--e-3);
  line-height: var(--altura-normal);
}

/* ==================================================== 4. TELAS ESTREITAS */

/* Entre 320 e 359px o maior número do app (40px, peso extra) não cabe em
   "R$ 6.000,00" e quebra em duas linhas dentro do cartão. De 360px para
   cima cabe com folga, e aí ele fica no tamanho cheio. */
@media (max-width: 359px) {
  .tela-saque .cartao-saldo-valor,
  .comprovante-valor .valor-grande { font-size: var(--txt-destaque); }

  /* Nessa faixa a linha do extrato disputa 256px entre ícone, título e
     valor. Apertar o respiro lateral devolve ~24px para o título, que é
     quem precisa deles — o valor é curto e não encolhe. */
  .linha-extrato {
    padding-left: var(--e-3);
    padding-right: var(--e-3);
    gap: var(--e-2);
  }

  .linha-extrato .extrato-icone { width: 32px; height: 32px; }

  /* "Sacar R$ 700,00" não cabe em meia largura a 320px e quebra entre o
     "R$" e o número. Símbolo separado do valor, no botão que tira dinheiro
     da conta, é exatamente onde isso não pode acontecer: os dois botões
     passam a ocupar uma linha cada, o de confirmar em cima. */
  .modal-saque .modal-acoes { flex-direction: column-reverse; }
}

/* ========================================================== 5. IMPRESSO */

/*
   O comprovante existe para ser mostrado a alguém: no papel ele é a folha
   inteira, sem app em volta.

   Aqui — e só aqui — a cor não sai de token. Um token é a cor do TEMA, e
   quem está no tema escuro imprimiria texto claro numa folha branca, já que
   navegador não imprime fundo por padrão: o comprovante sairia em branco.
   Canvas e CanvasText são cores de sistema, resolvidas pelo color-scheme do
   próprio elemento — com `color-scheme: light` no cartão, elas viram branco
   e preto no papel, nos dois temas.
*/
@media print {
  @page { margin: 14mm; }

  .topo,
  .nav,
  .pilha-toast,
  .modal-fundo,
  .folha-fundo,
  .confete { display: none !important; }

  .app { padding: 0 !important; }

  /* Da tela de comprovante, só o comprovante vai para o papel: cabeçalho de
     voltar e botões não são parte do documento. */
  .tela-comprovante > :not(.comprovante) { display: none !important; }

  .comprovante {
    color-scheme: light;
    color: CanvasText;
    background: Canvas;
    border: 1px solid CanvasText;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .comprovante .nota,
  .comprovante .rotulo-caixa,
  .comprovante .icone,
  .comprovante-marca,
  .comprovante-valor .valor-grande,
  .comprovante-id .codigo { color: CanvasText; }

  .comprovante-serrilha { border-top-color: CanvasText; }
  .comprovante-serrilha::before,
  .comprovante-serrilha::after { display: none; }

  .comprovante-id .codigo {
    background: none;
    border-color: CanvasText;
  }
}

/* =========================================================================
   O QUE FALTOU NA BASE (para quem cuida de styles.css)

   1. .cartao-saldo-valor e .valor-grande são 40px fixos. "R$ 6.000,00" —
      o teto de SAQUE.maximoPorPedido — não cabe neles entre 320 e 359px e
      quebra em duas linhas. Resolvido aqui só para a carteira, na seção 4;
      a Home tem o mesmo cartão e o mesmo problema. Vale um degrau de
      tamanho na própria base, não uma correção por frente.

   2. .linha-extrato é <div> na base e não tem versão de toque, enquanto
      .item e .linha-acao têm. Assim que uma segunda tela precisar de uma
      linha de extrato clicável, .linha-extrato-toque (seção 1) deveria
      subir para lá, ao lado de .item-toque.

   3. .codigo corta com reticências. Serve para chave Pix numa linha, não
      para o id de ponta a ponta do comprovante, que precisa aparecer
      inteiro. Um .codigo-inteiro na base evitaria o override da seção 3.

   4. Não existe nada de @media print na base — nem esconder .topo e .nav,
      que é o mínimo para qualquer tela impressa. A seção 5 faz isso a
      partir daqui, e por isso ela toca em duas classes do casco.
   ========================================================================= */

/* ==========================================================================
   O SALDO NA TELA DE SACAR
   Sóbrio de propósito. Esta é a tela em que a promessa do app é cumprida, e
   bloco vermelho de tela cheia lê como alerta, não como banco. O verde é a
   cor do dinheiro no app inteiro e volta a valer aqui; o vermelho da marca
   sobra para o botão de ação, onde ele significa "toque".
   ========================================================================== */

.saque-saldo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2, 10px);
  padding: var(--e-4, 18px);
  border-radius: var(--raio-g, 16px);
  border: 1px solid var(--borda);
  background: var(--superficie);
}

.saque-saldo-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2, 10px);
}

.saque-saldo-rotulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* O selo do Pix diz para onde o dinheiro vai sem precisar de frase. */
.saque-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: 11.5px;
  font-weight: 700;
}

.saque-saldo-valor {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.saque-progresso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: 2px;
}

.saque-progresso-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2, 10px);
}

/* Quem já pode sacar não vê barra: vê a confirmação. */
.saque-liberado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--verde);
  font-size: var(--txt-nota, 13px);
  font-weight: 650;
}

/* O par "tem / precisa" na mesma linha: o valor grande, o alvo discreto ao
   lado. Sem o alvo, "faltam R$ 320,00" obriga a somar de cabeça. */
.saque-saldo-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.saque-saldo-alvo {
  font-size: var(--txt-corpo, 15px);
  font-weight: 600;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* ==================================== 4. CONFERÊNCIA DA CHAVE E RECUSA */

/* A tela que cobre o instante entre confirmar o pedido e ele existir.
   Ela ocupa a altura toda de propósito: o dinheiro acabou de sair do saldo e
   não há nada para fazer aqui além de esperar. Meia tela com o formulário
   aparecendo por baixo convidaria a tocar em alguma coisa. */
.tela-confere {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  min-height: 60vh;
  justify-content: center;
}

.confere-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  text-align: center;
}

.confere-selo {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca-texto);
}

.confere-cartao { gap: 0; }

.confere-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.confere-linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--txt-nota);
  color: var(--texto);
  /* Cada linha entra subindo um pouco. É o que faz a lista parecer que está
     acontecendo, e não que já estava pronta esperando. */
  animation: confere-entra var(--tempo-medio) var(--curva) both;
}

@keyframes confere-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* O marcador tem os dois desenhos empilhados no mesmo lugar: o giro enquanto a
   linha acontece, o certo quando ela fecha. Trocar o nó no meio da animação
   reiniciaria o layout da linha inteira. */
.confere-marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
}

.confere-marca > * { grid-area: 1 / 1; }

.confere-giro {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--borda-forte);
  border-top-color: var(--marca);
  animation: confere-gira 700ms linear infinite;
}

@keyframes confere-gira { to { transform: rotate(360deg); } }

.confere-marca .icone { color: var(--verde); opacity: 0; }

.confere-feito .confere-giro { opacity: 0; }
.confere-feito .confere-marca .icone { opacity: 1; }
.confere-feito .confere-txt { color: var(--texto-fraco); }

/* Sem movimento, a lista continua contando a mesma história: as linhas entram
   sem deslizar e o giro vira um traço parado. O certo continua chegando. */
@media (prefers-reduced-motion: reduce) {
  .confere-linha { animation: none; }
  .confere-giro { animation: none; border-top-color: var(--borda-forte); }
}

/* ---------------------------------------------------------------- a recusa */

.recusa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  text-align: center;
}

.recusa-selo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--vermelho-suave);
  color: var(--vermelho);
}

.recusa-texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: 100%;
}

/* A EXPLICAÇÃO FICA PEQUENA. Ela responde "por quê" e é lida uma vez. */
.recusa-motivo {
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
  line-height: var(--altura-normal);
  margin: 0;
  text-wrap: pretty;
}

/* O CHAMADO FICA GRANDE. É a frase que o dono escreveu para mover a pessoa, e
   no mesmo tamanho da explicação ela era lida como fim de parágrafo técnico —
   passava batida. Aqui ela ganha o corpo, o peso e a cor de quem está pedindo
   uma ação, sem uma letra do texto mudar. */
.recusa-chamada {
  font-size: var(--txt-forte);
  font-weight: var(--peso-forte);
  color: var(--texto);
  line-height: var(--altura-apertada);
  margin: 0;
  text-wrap: balance;
}

.modal-recusa .modal-acoes { width: 100%; }

/* O botão da recusa ocupa a linha inteira; o pulso vem de `.pulsa-chamando`. */
.recusa-botao { width: 100%; }
}

/* ==================================================== 5. A ROLETA PREMIADA

   Um giro por dia, na tela de saque.

   A ESTRUTURA É A DA REFERÊNCIA que o dono trouxe, com os nomes dela: `shadow`
   para a sombra interna, `markers`/`triangle` para o ponteiro, `spinner` para o
   que gira, `item` para cada fatia e `button` para o miolo branco. O que mudou
   foi só o que precisava mudar para caber aqui: as medidas em `em` viraram
   proporções da própria roda, para ela encolher junto com a tela do telefone, e
   as cores saem dos tokens do app em vez de estarem cravadas.

   AS FATIAS SÃO TRIÂNGULOS DE BORDA. Cada `.item` é um elemento sem tamanho com
   só a borda de cima pintada — um triângulo com a ponta no centro da roda. O JS
   calcula a meia-base pela tangente do meio-ângulo, que é o que faz uma fatia
   encostar na vizinha sem vão e sem sobreposição. */

.roleta { gap: var(--e-3); }

.roleta-palco {
  position: relative;
  display: grid;
  place-items: center;
  width: min(320px, 86vw);
  aspect-ratio: 1;
  margin-inline: auto;
  padding-block: var(--e-2);
}

/* A roda inteira é desenhada num raio de referência de 140px e ESCALADA para
   caber. Assim a geometria das fatias é calculada uma vez, em número redondo, e
   continua valendo em qualquer tela. */
.roulette {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  transform: scale(calc(min(320px, 86vw) / 300));
  font-family: var(--fonte);
}

/* A sombra interna que dá volume à roda. Fica por cima das fatias e por baixo
   do botão — é ela que faz a roda parecer um disco, e não um gráfico de pizza. */
.roulette-shadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 8px 0 rgba(0, 0, 0, .25),
    inset 0 0 0 6px var(--marca-2),
    var(--sombra-alta);
}

/* O que gira. `backface-visibility` é ganho de desempenho: manda o navegador
   tratar a rotação na placa de vídeo em vez de repintar a cada quadro. */
.roulette-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(0deg);
  backface-visibility: hidden;
  background: var(--superficie-2);
}

/* Uma fatia. `border-width` e `margin-left` vêm do JS, que sabe quantas são.
   `transform-origin: 50% 100%` põe o eixo do giro na ponta do triângulo, que é
   o centro da roda. */
.roulette-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  transform-origin: 50% 100%;
}

/* O rótulo sobe pelo raio da fatia, de pé em relação a ela — é assim que se lê
   roleta de verdade: o texto acompanha o raio, não a horizontal.

   A ÂNCORA É A PONTA DO TRIÂNGULO, e é isso que explica o `top` negativo.
   O `.item` tem caixa de conteúdo de tamanho zero, e um filho posicionado
   pende da caixa de PREENCHIMENTO — que, num elemento assim, é o ponto onde as
   bordas se encontram: a ponta, no centro da roda. Um `top` positivo empurrava o
   texto para DENTRO do miolo, atrás do botão, e por isso as oito etiquetas
   sumiam. Negativo, ele sobe pelo raio: 86px é pouco mais da metade do caminho
   até a borda, que é onde a fatia já é larga o bastante para caber o número. */
.roulette-label {
  position: absolute;
  top: -86px;
  left: 0;
  transform: translateX(-50%);
  color: var(--sobre-marca);
  font-weight: var(--peso-extra);
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .3);
}

/* Virado meia volta em torno do próprio centro: o número volta a ficar de pé
   sem sair do lugar em que estava. */
.roulette-label-virado { transform: translateX(-50%) rotate(180deg); }

/* Fatia escura leva texto claro: o dourado do app não se lê sobre o carvão. */
.roulette-item:nth-child(even) .roulette-label {
  color: var(--texto);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* O ponteiro. Fica fora do que gira, no topo, e é ele que marca onde a roda
   parou — um ponteiro que gira junto não marca nada. */
.roulette-markers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.roulette-marker {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

/* Triângulo de borda apontando para baixo, para dentro da roda. */
.roulette-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 13px 0 13px;
  border-color: var(--vermelho-cheio) transparent transparent transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3));
}

/* O botão no miolo. Ele é o giro — não há um segundo botão embaixo da roda,
   porque a roda inteira já é o convite e dois botões para a mesma ação dividem
   a decisão em duas. */
.roulette-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  z-index: 5;
  border: 0;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--marca-texto);
  font-family: inherit;
  font-weight: var(--peso-extra);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 0 4px var(--marca);
  transition: transform .15s cubic-bezier(.68, -.55, .265, 1.55), box-shadow .15s var(--curva);
}

.roulette-button-txt {
  font-size: 20px;
  letter-spacing: -.02em;
}

/* Pronta para girar, o botão respira: é o que diz "toque aqui" sem escrever. */
.roulette-pronta .roulette-button {
  animation: roulette-chama 2.2s ease-in-out infinite;
}

@keyframes roulette-chama {
  0%, 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 0 4px var(--marca); }
  50%      { box-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 0 10px var(--marca-suave); }
}

/* Girando, o botão afunda e para de chamar — a roda já é o assunto. */
.roulette-busy .roulette-button {
  transform: scale(.9);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 0 4px var(--marca-2);
  color: var(--texto-3);
  cursor: default;
  animation: none;
}

.roulette-button:disabled {
  color: var(--texto-3);
  cursor: default;
  animation: none;
}

/* Sem movimento, a roda troca de posição de uma vez. O prêmio é o mesmo, e a
   cerimônia continua acontecendo no pop-up.

   A RODA NÃO ESTÁ AQUI DE PROPÓSITO. O giro deixou de ser uma transição de CSS
   e virou três tempos em JS (roleta-tela.js), porque uma curva só empurrava
   todo o percurso para o primeiro segundo. Regra de CSS não alcança animação de
   JS: quem lê prefers-reduced-motion agora é o próprio módulo, e ele pula
   direto para o resultado. Se alguém devolver uma linha de "transition" para o
   spinner aqui, ela não vai fazer nada. */
@media (prefers-reduced-motion: reduce) {
  .roulette-button { animation: none !important; }
}