/* ==========================================================================
   TELA DE INÍCIO

   O que mudou e por quê.

   A tela era uma pilha de cartões arredondados: saldo num cartão, ação noutro,
   cada missão no seu, cada saque no seu. Seis molduras empilhadas, todas com o
   mesmo peso — e quando tudo tem moldura, nada tem destaque. O olho não
   encontra por onde começar porque a tela não diz.

   Aqui a hierarquia volta a ser feita por PESO e por ESPAÇO, que é a gramática
   dos aplicativos de vídeo que servem de referência:

   1. Uma capa que sangra de borda a borda, sem caixa, com o número grande
      o bastante para ser a única coisa que se lê de longe.
   2. Trilhos horizontais, onde a arte é o cartão — nada de moldura em volta de
      uma imagem que já tem borda própria.
   3. Fileira numerada com o algarismo gigante atrás, que é como se mostra
      ranking sem precisar da palavra "ranking".
   4. Fundo contínuo. Cartão só onde há mesmo um objeto separado para tocar.
   ========================================================================== */

/* --------------------------------------------------------------- capa */

/* Sangra: escapa do respiro lateral do .app para encostar nas bordas. Sem isto
   a capa vira mais um cartão, que é justamente o que ela deixou de ser. */
.capa {
  position: relative;
  margin:
    calc(-1 * (var(--topo-h) + env(safe-area-inset-top) + var(--e-4)))
    calc(-1 * var(--pad-tela))
    var(--e-5);
  padding:
    calc(var(--topo-h) + env(safe-area-inset-top) + var(--e-7))
    var(--pad-tela)
    var(--e-6);
  overflow: hidden;
  isolation: isolate;
}

/* A luz do fundo. Duas manchas de cor muito diluídas, sem forma reconhecível:
   dão profundidade sem competir com o número que está por cima. */
.capa-luz {
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 150%;
  z-index: -2;
  background:
    radial-gradient(48% 42% at 22% 18%, color-mix(in oklab, var(--marca) 42%, transparent), transparent 70%),
    radial-gradient(42% 38% at 88% 8%, color-mix(in oklab, var(--acento-vinho) 34%, transparent), transparent 72%);
  filter: blur(6px);
}

/* A malha. Linhas de 1px muito apagadas, que só aparecem no escuro e dão a
   textura técnica sem virar enfeite. */
.capa-malha {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--texto) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--texto) 6%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  /* Some para baixo, para não brigar com o conteúdo no rodapé da capa. */
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

/* A descida para o fundo da página: sem esta emenda a capa termina num
   corte reto e parece um bloco colado. */
.capa::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--fundo));
  pointer-events: none;
}

.capa-ola {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-medio);
  color: var(--texto-fraco);
  margin-bottom: var(--e-5);
}

.capa-rotulo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}

.capa-numero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

/* O valor. É a única coisa da tela nesta escala, de propósito.
   `tabular-nums` impede o número de balançar enquanto o contador anima. */
.capa-valor {
  font-size: clamp(40px, 13vw, 56px);
  font-weight: var(--peso-extra);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  text-shadow: 0 0 32px color-mix(in oklab, var(--verde) 30%, transparent);
}

.capa-alvo {
  font-size: var(--txt-forte);
  font-weight: var(--peso-medio);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.capa-barra {
  height: 5px;
  border-radius: var(--raio-pill);
  background: color-mix(in oklab, var(--texto) 12%, transparent);
  overflow: hidden;
  margin-top: var(--e-4);
}

.capa-barra > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--verde), color-mix(in oklab, var(--verde) 55%, var(--acento-jade)));
  box-shadow: 0 0 14px color-mix(in oklab, var(--verde) 55%, transparent);
  transition: width var(--tempo-longo) var(--curva);
}

.capa-nota {
  margin-top: var(--e-3);
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
}

/* UMA COLUNA, e a seta por cima dela.
   A grade era de duas colunas porque havia um "Assistir" ao lado do "Sacar".
   Com um botão só, duas colunas deixariam o Sacar encolhido do lado de um vão. */
.capa-acoes {
  display: grid;
  gap: var(--e-2);
  justify-items: center;
  margin-top: var(--e-5);
}

/* A SETA QUE APONTA PARA O SACAR.
   Ela desce em direção ao botão e volta, sem parar. Duas coisas, e cada uma faz
   um trabalho: o movimento é percebido pelo canto do olho e tira o botão do
   cenário; a direção diz para onde ir. Movimento sem direção só avisa que algo
   mudou; direção sem movimento não é notada. */
.capa-seta {
  display: grid;
  place-items: center;
  color: var(--marca);
  transform: rotate(90deg);
  animation: capa-seta-desce 1.8s ease-in-out infinite;
}

@keyframes capa-seta-desce {
  0%, 100% { transform: rotate(90deg) translateX(0); opacity: .55; }
  50%      { transform: rotate(90deg) translateX(6px); opacity: 1; }
}

/* Com o saque liberado a seta acelera e fica cheia: o mesmo desenho, outra
   urgência. Se os dois estados se movessem igual, o movimento pararia de dizer
   alguma coisa. */
.capa-seta-viva { animation-duration: 1.05s; }

/* QUEM PULSA É O HALO, NÃO O BOTÃO.
   O botão pulsava com `transform: scale()`, e um alvo de toque que nunca para
   quieto é um alvo que escapa do dedo — o teste ponta a ponta chegou a desistir
   de clicar nele, com a mensagem "element is not stable", e o dedo de uma pessoa
   real tem o mesmo problema. O mesmo princípio já estava escrito na caixa do
   presente, em celebracao.css; aqui ele tinha sido esquecido.
   O halo atrás cresce e apaga; o botão fica parado onde está. */
.capa-sacar {
  width: 100%;
  position: relative;
  isolation: isolate;
}

.capa-sacar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--sombra-marca);
  animation: capa-sacar-respira 3.4s ease-in-out infinite;
  pointer-events: none;
}

/* Antes do mínimo: um respiro lento, sem urgência. Ele existe para a pessoa
   reparar que o botão está ali, não para mandá-la tocar agora. */
@keyframes capa-sacar-respira {
  0%, 100% { transform: scale(1); opacity: .75; }
  50%      { transform: scale(1.045); opacity: 1; }
}

/* Liberado: pulso mais rápido e mais forte, e um brilho que corre por dentro.
   É o degrau que impede o movimento de virar cenário. */
.capa-sacar-livre { overflow: hidden; }
.capa-sacar-livre::before { animation-duration: 1.15s; }

.capa-sacar-livre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: capa-sacar-brilho 2.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes capa-sacar-brilho {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* Sem movimento, a direção continua sendo dita: a seta fica parada apontando
   para o botão, e o botão fica no estado forte. O recado não depende da
   animação — ela só o torna difícil de ignorar. */
@media (prefers-reduced-motion: reduce) {
  .capa-seta { animation: none; opacity: 1; }
  .capa-sacar::before { animation: none; opacity: 1; box-shadow: var(--sombra-marca-forte); }
  .capa-sacar-livre::after { animation: none; opacity: 0; }
}

/* Botão de vidro: a ação secundária não pode ter o mesmo peso do saque, mas
   também não pode sumir sobre um fundo que muda de cor ao longo da capa. */
.btn-vidro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque-min);
  padding-inline: var(--e-5);
  border-radius: var(--raio-pill);
  border: 1px solid color-mix(in oklab, var(--texto) 18%, transparent);
  background: color-mix(in oklab, var(--texto) 8%, transparent);
  backdrop-filter: blur(12px);
  color: var(--texto);
  font-weight: var(--peso-forte);
  font-size: var(--txt-corpo);
  cursor: pointer;
  transition: background var(--tempo-curto) var(--curva), transform var(--tempo-curto) var(--curva);
}

.btn-vidro:active { transform: scale(.97); }
@media (hover: hover) {
  .btn-vidro:hover { background: color-mix(in oklab, var(--texto) 14%, transparent); }
}

/* ------------------------------------------------------ fileira numerada */

/* O algarismo gigante atrás do rosto. É o que transforma uma lista de saques
   numa classificação sem precisar escrever a palavra. */
.top-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.top-linha {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  /* Nada de cartão: só um fio entre as linhas. */
  border-bottom: 1px solid color-mix(in oklab, var(--borda) 60%, transparent);
}

.top-linha:last-child { border-bottom: none; }

.top-num {
  font-size: 46px;
  font-weight: var(--peso-extra);
  line-height: .8;
  font-variant-numeric: tabular-nums;
  width: 34px;
  text-align: center;
  /* Contorno vazado: presente sem roubar a leitura do nome. */
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--texto) 26%, transparent);
  user-select: none;
}

.top-linha:first-child .top-num {
  -webkit-text-stroke-color: color-mix(in oklab, var(--marca) 70%, transparent);
}

.top-quem { min-width: 0; }

.top-nome {
  font-weight: var(--peso-forte);
  font-size: var(--txt-corpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-onde {
  font-size: var(--txt-mini);
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-valor {
  text-align: right;
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  color: var(--verde);
}

.top-quando {
  display: block;
  font-size: var(--txt-mini);
  font-weight: var(--peso-normal);
  color: var(--texto-3);
}

/* ----------------------------------------------------- trilho de missões */

/* Missão é objeto para tocar, então continua tendo caixa — mas deitada num
   trilho, e não empilhada ocupando a tela toda. */
.missoes-trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: var(--e-3);
}

.missao-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  border-radius: var(--raio-g);
  background: var(--superficie);
  border: 1px solid var(--borda);
}

.missao-cartao.pronta {
  border-color: color-mix(in oklab, var(--verde) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in oklab, var(--verde) 12%, var(--superficie)), var(--superficie));
}

.missao-titulo { font-weight: var(--peso-forte); font-size: var(--txt-corpo); }
.missao-passo { font-size: var(--txt-mini); color: var(--texto-3); }
.missao-cartao .barra { margin-block: var(--e-1); }
.missao-cartao .btn { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .capa-barra > i { transition: none; }
}