/* =========================================================================
   PlayCash — tarefas

   Arquivo da frente de TAREFAS (www/js/telas/pesquisas.js e videos.js).
   Só o que é exclusivo dessas duas telas. A base já entrega:
   .tela, .bloco, .lista, .saudacao, .passo, .barra, .etiqueta, .chips,
   .destaque, .selo, .cartao, .pergunta, .opcoes, .opcao, .opcao-marca,
   .agregado, .cartao-video, .video-capa, .video-info, .video-premio,
   .palco, .anel, .faixa-info, .vazio, .modal-premio, .surge.

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

   Regras da casa, valem aqui também:
   - Nenhum hex, nenhum rgba, nenhum nome de cor. Cor vem de tokens.css.
   - color-mix() só dentro de @supports, com a regra base num token sólido.
   - Azul é o chassi. Verde é dinheiro. Ouro é conquista.
   ========================================================================= */

/* ================================================== 1. CASCO DAS TAREFAS */

/* Cada estado das duas telas (abertura, pergunta, fecho, lista, player) é um
   filho único da .tela e repete o mesmo respiro entre blocos. */
.tarefa-tela {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

/* Etiqueta dentro de coluna: sem isso ela estica pela largura toda e deixa de
   parecer etiqueta. */
.etiqueta-solta { align-self: flex-start; }

/* Valor colado no rótulo de um botão primário ("Nova rodada  R$ 21,00"). */
.btn-valor {
  font-variant-numeric: tabular-nums;
  border-radius: var(--raio-pill);
  padding: 2px var(--e-2);
  background: var(--overlay);
}

@supports (color: color-mix(in srgb, transparent, transparent)) {
  .btn-valor { background: color-mix(in srgb, var(--sobre-marca) 22%, transparent); }
}

/* =============================================== 2. PERGUNTAS: CATEGORIAS */

/* A primeira tela de Perguntas. Grade de dois, cartão com capa colorida em
   cima e os números embaixo — a mesma estrutura de catálogo que qualquer app
   de conteúdo usa, e que o dedo já sabe ler.

   Os três números do cartão fazem o trabalho que nenhuma frase faria: quanto o
   conjunto paga, quantas perguntas vêm e quanto desta categoria já foi
   respondido. Categoria só de reprise mostra o valor menor no mesmo lugar. */

.cabeca-perguntas {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.cat-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: transform var(--tempo-instante) var(--curva),
              border-color var(--tempo-curto) var(--curva);
}

.cat-cartao:active { transform: scale(.98); }
.cat-cartao:hover,
.cat-cartao:focus-visible { border-color: var(--marca); }

/* A capa é o cartão, não uma imagenzinha dentro dele: mesma proporção 16:9 da
   miniatura de vídeo, para as duas telas de tarefa rimarem. */
.cat-capa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-p);
  background: var(--cor-cat, var(--marca));
  overflow: hidden;
}

.cat-inicial {
  font-size: var(--txt-destaque);
  font-weight: var(--peso-extra);
  line-height: 1;
  color: var(--sobre-marca);
}

.cat-selo {
  position: absolute;
  right: var(--e-1);
  bottom: var(--e-1);
  padding: 1px var(--e-2);
  border-radius: var(--raio-pill);
  background: var(--overlay);
  color: var(--sobre-marca);
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  line-height: 1.6;
}

.cat-nome {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-forte);
  line-height: 1.2;
}

.cat-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1);
}

.cat-valor {
  color: var(--verde);
  font-size: var(--txt-corpo);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.cat-qtd,
.cat-feito {
  font-size: var(--txt-mini);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* .barra é <span> dentro de um botão (span é conteúdo válido em botão; div
   não é). Sem display:block a barra fica inline e a altura não pega. */
.cat-cartao .barra,
.cat-cartao .barra-fill { display: block; }

/* Sem pergunta inédita aqui: a capa recua e o valor menor conta o resto. */
.cat-rever .cat-capa { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .cat-cartao { transition: none; }
}

/* ================================================= 3. PERGUNTAS: ABERTURA */

/* O bloco de abertura é uma resposta curta a "quanto vale". Gap menor que o
   .destaque padrão: as três linhas são uma frase só. */
.tarefa-abre { gap: var(--e-1); }

/* A mesma capa colorida do cartão da lista, em quadrado: quem tocou em
   "Mercado" reconhece o verde do Mercado. Reaproveita .cat-inicial. */
.abre-capa {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--e-2);
  border-radius: var(--raio-g);
  background: var(--cor-cat, var(--marca));
}

/* Quanto a rodada inteira paga. Não usa --txt-valor: aquele tamanho é do
   saldo, e o saldo não tem concorrente. */
.tarefa-premio {
  font-size: var(--txt-destaque);
  font-weight: var(--peso-extra);
  line-height: var(--altura-apertada);
  letter-spacing: var(--letra-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--verde);
}

/* Quantas perguntas vêm, em bolinhas: o tamanho do conjunto visto de longe,
   antes de o olho chegar no texto. Uma bolinha por pergunta, na cor da
   categoria — a mesma da capa logo acima. */
.conjunto-pontos {
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.conjunto-ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cor-cat, var(--marca));
}

/* ================================================= 4. PERGUNTAS: RODADA */

/* O que já entrou nesta rodada, na fileira do "1 de 3". */
.rodada-total { font-variant-numeric: tabular-nums; }

.pergunta-cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}

.pergunta-cabeca .pergunta { margin-top: 0; }

/* ================================================== 5. PERGUNTAS: A PEÇA */

/* A peça que a pergunta de imagem mostra: um logotipo, uma fachada, uma
   embalagem ou um cartaz, desenhados em SVG por www/js/telas/pesquisas.js. A
   geometria mora lá; cor e tipografia moram aqui.

   As duas cores da peça chegam como variável no elemento .peca, vindas do JSON
   como token do tema — por isso nenhuma cor de marca inventada aparece neste
   arquivo, e a peça acompanha o tema claro e o escuro sozinha. */

.peca {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  line-height: 0;
}

.peca-svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-fundo      { fill: var(--superficie-2); }
.p-cor        { fill: var(--cor-peca); }
.p-cor2       { fill: var(--cor-peca-2); }
.p-sobre      { fill: var(--sobre-marca); }
.p-texto      { fill: var(--texto); }
.p-fraco      { fill: var(--texto-fraco); }
.p-superficie { fill: var(--superficie); }
.p-rotulo     { fill: var(--superficie); }
.p-vitrine    { fill: var(--superficie-3); }
.p-chao       { fill: var(--superficie-3); }
.p-sombra     { fill: var(--borda); }

.p-parede {
  fill: var(--superficie);
  stroke: var(--borda);
  stroke-width: 1;
}

.p-moldura {
  fill: none;
  stroke: var(--sobre-marca);
  stroke-width: 2;
  opacity: .45;
}

/* Tamanho de letra dentro da peça é UNIDADE DO DESENHO (o palco tem 300 x 190),
   não pixel de tela: a peça inteira encolhe junto quando a coluna encolhe. Por
   isso aqui não entram os tokens --txt-*, que são a escala da interface. */
.peca text { font-family: var(--fonte); }

.p-sigla   { font-size: 44px; font-weight: var(--peso-extra); }
.p-nome    { font-size: 22px; font-weight: var(--peso-extra); }
.p-chamada { font-size: 24px; font-weight: var(--peso-extra); }
.p-placa   { font-size: 19px; font-weight: var(--peso-extra); }
.p-marca   { font-size: 17px; font-weight: var(--peso-extra); }
.p-selo    { font-size: 13px; font-weight: var(--peso-extra); }
.p-legenda { font-size: 12px; font-weight: var(--peso-medio); }
.p-peso    { font-size: 11px; font-weight: var(--peso-forte); }

/* ============================================== 6. PERGUNTAS: O QUE CAIU */

.selo-resposta { gap: var(--e-2); }

/* O valor que acabou de cair. É o maior elemento do selo de propósito: o
   toque tem que terminar em dinheiro, não em texto. */
.ganho-entra {
  display: inline-block; /* span inline não aceita transform */
  font-size: var(--txt-destaque);
  line-height: var(--altura-apertada);
  color: var(--verde);
  animation: ganho-sobe var(--tempo-curto) var(--curva-mola) both;
}

@keyframes ganho-sobe {
  from { opacity: 0; transform: translateY(10px) scale(.86); }
  to { opacity: 1; transform: none; }
}

/* Errou a trivia: o selo é neutro (a resposta pagou igual), mas o dinheiro
   continua verde — ele caiu. */
.selo .ganho-entra { color: var(--verde); }

/* ================================================== 7. PERGUNTAS: FECHO */

.puxa-saque { gap: var(--e-2); }

/* ====================================================== 8. VÍDEOS: LISTA */

/* O trilho de filtros rola sozinho; a página nunca anda de lado. A margem
   negativa devolve o respiro que o .chips gasta como folga de barra de
   rolagem, para o vão até a lista ser o mesmo dos outros blocos. */
.filtros-tarefa { margin-bottom: calc(var(--e-1) * -1); }

.chip-conta {
  font-size: var(--txt-mini);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* A miniatura é 16:9, como em qualquer aplicativo de vídeo, e a duração fica
   sempre no mesmo canto: embaixo, à direita (a base já põe o .video-dur lá).
   A altura sai da proporção e não de um número escrito à mão — mexer na largura
   não desalinha nada, e a mesma proporção vale no trilho da tela inicial. */
.cartao-video .video-capa {
  width: 112px;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Com a capa mais larga, a coluna do meio ficou estreita: nome de campanha
   comprido esticava o cartão para quatro linhas. Duas, e o resto corta. */
.cartao-video .video-info strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.cartao-video .video-info .nota {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Categoria e "Paga mais" na mesma linha, sem o gap largo do .linha. */
.video-info-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-1);
}

.video-info-topo .etiqueta { align-self: center; }

/* Teto do dia fechado: os cartões continuam à vista (o catálogo de amanhã é
   informação), mas não abrem. */
.cartao-video:disabled {
  opacity: .5;
  box-shadow: none;
  cursor: not-allowed;
}

.cartao-video:disabled:active { transform: none; }

.video-premio .nota { font-size: var(--txt-mini); }

/* ===================================================== 9. VÍDEOS: PLAYER */

/* O anel cresce para caber três linhas dentro dele sem encostar no traço: o
   tempo, o que a tela está fazendo e o dinheiro. Com os 132px da base, a
   pílula do prêmio cavalga o próprio anel. */
.palco .anel { width: 150px; height: 150px; }

/* A recompensa fica no palco o tempo inteiro, embaixo do tempo que falta:
   enquanto espera, a pessoa está olhando para o dinheiro. */
.palco-premio {
  margin-top: var(--e-1);
  padding: 2px var(--e-3);
  border-radius: var(--raio-pill);
  font-size: var(--txt-corpo);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  background: var(--overlay);
}

@supports (color: color-mix(in srgb, transparent, transparent)) {
  .palco-premio { background: color-mix(in srgb, var(--sobre-marca) 20%, transparent); }
}

/* O anel cheio continua branco. Pintá-lo de verde no fim parecia bom até a
   campanha de cor verde: o traço sumia dentro do próprio palco, e a cor do
   palco vem do anunciante, não daqui. Quem comemora é o confete e o modal. */

/* Palco em telas curtas: o anel não pode empurrar o botão para fora. */
@media (max-height: 700px) {
  .palco { aspect-ratio: 16 / 10; }
}

/* =========================================== 10. VÍDEOS: FIM DA CAMPANHA */

/* .modal-premio da base traz align-items/text-align, mas o miolo do modal é
   um bloco: sem display:flex aqui o align-items não tem em quem pegar. */
.premio-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  text-align: center;
}

.premio-video .h2 {
  font-size: var(--txt-titulo);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.premio-video .modal-acoes { width: 100%; }

/* A próxima campanha, dentro do modal do prêmio: a fila não morre no fim do
   vídeo. Mesma capa 16:9, mesma duração no mesmo canto — só menor. */
.proximo-video {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-2);
  min-height: var(--toque-min);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: transform var(--tempo-instante) var(--curva);
}

.proximo-video:active { transform: scale(.98); }

.proximo-video .video-capa {
  width: 88px;
  height: auto;
  aspect-ratio: 16 / 9;
}

.proximo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.proximo-info strong,
.proximo-info .nota {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proximo-info strong { font-size: var(--txt-nota); line-height: 1.25; }

.proximo-premio {
  flex: none;
  color: var(--verde);
  font-size: var(--txt-nota);
  font-variant-numeric: tabular-nums;
}

/* ======================================================== 11. MOVIMENTO */

@media (prefers-reduced-motion: reduce) {
  .ganho-entra { animation: none; }
}

/* ------------------------------------------------- A moeda que cai
   O feedback de cada resposta. A moeda entra de cima, quica uma vez e
   assenta — junto com o som da caixa registradora em fx.js. */
/* A MOEDA MUDOU DE ARQUIVO. Ela caía no selo desta tela; hoje cai dentro do
   pop-up de recompensa, e a regra dela mora junto com ele, em celebracao.css. */

}

/* -------------------------------------------- Dobrar o que acabou de cair
   Aparece no fecho da rodada e no fim do vídeo, e some sozinho quando a
   janela do ledger fecha. Destaque sem virar alarme: a borda acende, o
   fundo não grita. */
.cartao-dobro {
  border-color: var(--marca);
  background: var(--marca-suave);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dobro-topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dobro-raio {
  font-size: var(--txt-forte);
  line-height: 1;
  flex: none;
  animation: dobro-pisca 2.4s ease-in-out infinite;
}

.dobro-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@keyframes dobro-pisca {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .dobro-raio { animation: none; }
}

/* ------------------------------------------------ O que achou da campanha
   Dois lados iguais, porque pagam igual: nenhum é a resposta certa. Mesma
   área de toque, mesmo peso visual, mesma cor. */
.avaliacao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.avaliacao-botoes {
  display: flex;
  gap: 12px;
}

.btn-avaliar {
  width: 64px;
  height: 56px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  font-size: var(--txt-forte);
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.btn-avaliar:hover,
.btn-avaliar:focus-visible {
  border-color: var(--marca);
}

.btn-avaliar:active {
  transform: scale(.92);
}

.avaliacao-feito {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--txt-corpo);
}

@media (prefers-reduced-motion: reduce) {
  .btn-avaliar { transition: none; }
}

/* ==========================================================================
   AS CATEGORIAS — três degraus em vez de 22 cartões iguais
   O valor no alto (é o mesmo em todas), a sugestão em destaque, e o resto
   em linhas densas. O olho pousa uma vez, não vinte e duas.
   ========================================================================== */

.cabeca-valor {
  margin: 0;
  font-size: var(--txt-nota, 13px);
  color: var(--texto-fraco);
}
.cabeca-valor strong { color: var(--verde); font-weight: 700; }

/* ------------------------------------------------------------- O destaque */

.cat-destaque {
  display: flex;
  align-items: center;
  gap: var(--e-3, 14px);
  width: 100%;
  padding: var(--e-4, 18px);
  border-radius: var(--raio-g, 16px);
  border: 1px solid var(--borda);
  /* A cor da categoria entra como brilho no canto, não como bloco chapado:
     o cartão continua sendo do app, não da categoria. */
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cor-cat) 22%, transparent) 0%, transparent 62%),
    var(--superficie);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: transform 140ms ease, border-color 140ms ease;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cat-destaque { background: var(--superficie); }
}

.cat-destaque:active { transform: scale(.985); }
.cat-destaque:hover,
.cat-destaque:focus-visible { border-color: var(--cor-cat); }

.cat-destaque-marca {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--cor-cat);
  background: color-mix(in srgb, var(--cor-cat) 15%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cat-destaque-marca { background: var(--superficie-2); }
}

.cat-destaque-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-destaque-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.cat-destaque-nome {
  font-size: var(--txt-forte, 17px);
  font-weight: 700;
  line-height: 1.2;
}

.cat-destaque-seta { flex: none; color: var(--texto-3); }

/* ---------------------------------------------------------- A lista densa */

.cat-lista {
  display: flex;
  flex-direction: column;
  border-radius: var(--raio, 12px);
  border: 1px solid var(--borda);
  background: var(--superficie);
  overflow: hidden;
}

.cat-linha-item {
  display: flex;
  align-items: center;
  gap: var(--e-3, 14px);
  /* 56px de altura: alvo de toque de gente, e cabem oito na tela sem apertar. */
  min-height: 56px;
  padding: var(--e-2, 10px) var(--e-3, 14px);
  border: 0;
  border-block-end: 1px solid var(--borda);
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: start;
  transition: background 120ms ease;
}

.cat-linha-item:last-child { border-block-end: 0; }
.cat-linha-item:active { background: var(--superficie-2); }
.cat-linha-item:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.cat-linha-marca {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--cor-cat);
  background: color-mix(in srgb, var(--cor-cat) 14%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cat-linha-marca { background: var(--superficie-2); }
}

.cat-linha-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cat-linha-nome {
  font-size: var(--txt-corpo, 15px);
  font-weight: 600;
  line-height: 1.2;
}

/* A barra fica curta de propósito: é sinal de progresso, não gráfico. */
.cat-linha-txt .barra { max-width: 92px; }

.cat-linha-conta {
  flex: none;
  font-size: 12.5px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.cat-linha-seta { flex: none; color: var(--borda-forte); }

/* Quem já respondeu tudo desce e desbota — continua acessível, sem competir. */
.cat-lista-fraca .cat-linha-item { opacity: .62; }
.cat-lista-fraca .cat-linha-item:active { opacity: 1; }

.cat-inicial {
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cat-destaque, .cat-linha-item { transition: none; }
  .cat-destaque:active { transform: none; }
}

/* ============================================ A PEÇA QUE É A MARCA DE VERDADE

   Quando a avaliação fala de uma marca real, a peça deixa de ser um desenho
   nosso e passa a ser a logo dela. O quadro é claro em qualquer tema, e é
   decisão: quase toda logo é feita para viver sobre branco, e metade delas
   desaparece sobre carvão. */

.peca-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-4);
  text-align: center;
}

.peca-marca-caixa {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: var(--raio-gg);
  background: #FFFFFF;
  box-shadow: var(--sombra);
}

.peca-marca-caixa .marca-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.peca-marca-nome {
  font-size: var(--txt-forte);
  font-weight: var(--peso-extra);
  color: var(--texto);
  line-height: var(--altura-apertada);
}

.peca-marca-legenda {
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
}

/* A logo dentro de um avatar de marca: ela ocupa o círculo inteiro e o fundo
   colorido some, porque a logo já traz a cor da própria marca. */
.feed-avatar-logo {
  background: #FFFFFF !important;
  overflow: hidden;
  padding: 3px;
}

.feed-avatar-logo .marca-logo,
.tube-canal-logo .marca-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tube-canal-logo {
  background: #FFFFFF;
  overflow: hidden;
  padding: 3px;
}