body {
  background:
    radial-gradient(ellipse at 10% 0%, rgb(var(--rosa) / .18), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgb(var(--ciano) / .12), transparent 60%),
    var(--void);
}
.app { max-width: 480px; margin: 0 auto; padding: 24px 16px calc(32px + env(safe-area-inset-bottom)); }
.cabeca { text-align: center; margin-bottom: 20px; }
.sobre { font-size: 9px; margin-bottom: 10px; }
.cabeca h1 { font-size: 19px; line-height: 1.6; }

.tela { display: flex; flex-direction: column; gap: 14px; }
.tela[hidden] { display: none; }
.centro { align-items: center; text-align: center; }
.centro-t { text-align: center; }
.texto { font-size: 17px; line-height: 1.4; color: var(--tinta-2); font-weight: 500; }

.busca input {
  width: 100%; font: 700 20px var(--sans); color: var(--tinta);
  padding: 16px 18px; border-radius: 14px; border: 2px solid rgb(var(--ciano) / .6);
  background: var(--void-2); outline: none; -webkit-appearance: none; appearance: none;
}
.busca input:focus { border-color: rgb(var(--ciano)); box-shadow: 0 0 0 4px rgb(var(--ciano) / .2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.lista { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lista button {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 10px 14px; border-radius: 14px; border: 1px solid var(--void-3);
  background: var(--void-2); color: var(--tinta); font: 700 18px var(--sans); cursor: pointer;
}
.lista button:active { background: var(--void-3); border-color: rgb(var(--rosa)); }
.lista img, .lista .mini { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--void-3); display: grid; place-items: center; font: 400 12px var(--px); color: rgb(var(--ciano)); }
.lista .quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista .quem b { font-weight: 700; }
.lista .quem small { font: 500 14px var(--sans); color: var(--tinta-2); }
.detalhe { font-size: 16px; color: var(--tinta-2); margin-top: -8px; }
.lista .ja { margin-left: auto; font: 400 8px var(--px); color: rgb(var(--verde)); white-space: nowrap; }
.lista .ja-item button { opacity: .6; }
.vazio { font-size: 16px; color: rgb(var(--ambar)); line-height: 1.4; }

.rosto-grande { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; margin-top: 8px;
  border: 4px solid rgb(var(--ciano)); box-shadow: 0 0 30px rgb(var(--ciano) / .5);
  background: var(--void-3); display: grid; place-items: center; font: 400 40px var(--px); color: rgb(var(--ciano)); }
.rosto-grande img { width: 100%; height: 100%; object-fit: cover; }
.rosto-grande.aceso { border-color: rgb(var(--rosa)); box-shadow: 0 0 40px rgb(var(--rosa) / .7);
  animation: encaixa .7s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes encaixa { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }

.pergunta { font-size: 22px; line-height: 1.3; }
.pergunta strong { color: #fff; }
.aviso { font-size: 15px; color: rgb(var(--ambar)); }
.erro { font-size: 16px; color: #ff6b6b; line-height: 1.4; }
.botao {
  width: 100%; margin-top: 6px; padding: 18px; border: 0; border-radius: 16px; cursor: pointer;
  font: 400 16px var(--px); color: var(--void); background: rgb(var(--rosa));
  box-shadow: 0 6px 0 rgb(150 20 80), 0 0 30px rgb(var(--rosa) / .5);
}
.botao:active { transform: translateY(4px); box-shadow: 0 2px 0 rgb(150 20 80); }
.botao:disabled { opacity: .6; }
.link { background: none; border: 0; color: var(--tinta-2); font: 500 16px var(--sans);
  text-decoration: underline; padding: 10px; cursor: pointer; }
.encaixada { font-size: 15px; margin-top: 6px; }
.dica-troca { font-size: 14px; color: var(--tinta-2); line-height: 1.4; max-width: 300px; }
.progresso { font-size: 18px; color: var(--tinta-2); }
.progresso span { color: rgb(var(--ciano)); font-weight: 700; }
.fase { font-size: 14px; animation: pisca .8s steps(2) infinite; }
@keyframes pisca { 50% { opacity: .5; } }