:root {
  --noite: #120C22;
  --noite-2: #1B1233;
  --noite-3: #241944;
  --limo: #A6FF4D;
  --limo-fundo: #2A4A16;
  --rosa: #FF5FA2;
  --lua: #63E0FF;
  --osso: #F6F2FF;
  --nevoa: #CDC2E6;
  --nevoa-fraca: #8B80A8;
  --linha: #33265C;
  --erro: #FF5C5C;
  --erro-fundo: #4A1616;
  --aviso: #FFD166;
  --aviso-fundo: #4A3712;
  --raio: 18px;
  --altura-nav: 66px;
  --sombra-card: 0 8px 28px rgba(0, 0, 0, .35);
  --sombra-neon: 0 0 0 1px rgba(166, 255, 77, .35), 0 8px 32px rgba(166, 255, 77, .12);
  --sombra-btn: 0 5px 0 rgba(0, 0, 0, .35);
  --veu: rgba(9, 6, 18, .82);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  color: var(--osso);
  background: var(--noite);
  background-attachment: fixed;
  overscroll-behavior-y: contain;
}
h1, h2, h3 { font-family: 'Bungee', 'Nunito', sans-serif; margin: 0; font-weight: 400; letter-spacing: .01em; }
#app {
  max-width: 460px; margin: 0 auto; position: relative; z-index: 1;
  padding: 18px 16px calc(var(--altura-nav) + 28px + env(safe-area-inset-bottom));
}

/* O céu de fundo: estrelas paradas em vez dos emoji flutuantes da v1. */
.ceu { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 14%, var(--osso), transparent),
    radial-gradient(1.5px 1.5px at 78% 9%, var(--osso), transparent),
    radial-gradient(1px 1px at 34% 28%, var(--nevoa), transparent),
    radial-gradient(1.5px 1.5px at 88% 34%, var(--osso), transparent),
    radial-gradient(1px 1px at 22% 52%, var(--nevoa), transparent),
    radial-gradient(1.5px 1.5px at 62% 66%, var(--osso), transparent),
    linear-gradient(180deg, var(--noite-2) 0%, var(--noite) 60%);
  opacity: .9;
}
.ceu span { display: none; }

.tela { display: grid; gap: 14px; animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card {
  background: var(--noite-2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra-card);
}

/* Alvos de toque: mínimo 48px de altura em tudo que é clicável. */
.btn {
  display: block; width: 100%; border: none; cursor: pointer; min-height: 50px;
  font-family: 'Bungee', sans-serif; font-size: 1rem; color: var(--noite);
  background: var(--limo); border-radius: 999px; padding: 13px 20px;
  box-shadow: var(--sombra-btn); transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn.rosa, .btn.lilas { background: var(--rosa); color: var(--noite); }
.btn.suave { background: transparent; color: var(--osso); box-shadow: none; border: 2px solid var(--linha); }
.btn:disabled { background: var(--noite-3); color: var(--nevoa); box-shadow: none; cursor: default; transform: none; }
.btn-mini { width: auto; display: inline-block; font-size: .82rem; padding: 10px 16px; min-height: 44px; }

/* font-size 16px é obrigatório: abaixo disso o iOS dá zoom ao focar o campo. */
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--osso); min-height: 48px;
  border: 2px solid var(--linha); border-radius: 14px; padding: 11px 14px;
  background: var(--noite-3); outline: none; appearance: none; -webkit-appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--limo) 50%), linear-gradient(135deg, var(--limo) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px;
}
input:focus, select:focus { border-color: var(--limo); }

/* Campo mal preenchido. Os formulários levam `novalidate` e quem confere é
   validacao.js — a validação nativa do navegador bloqueia o envio sem dizer
   nada de confiável no celular, e sobrava um botão que não fazia nada. A borda
   vermelha diz QUAL campo, e o .erro-campo logo abaixo diz O QUE fazer.
   A borda vem depois do :focus de propósito: o campo pra onde o foco acabou de
   ir é justamente o errado, e ele precisa continuar parecendo errado. Mas a
   borda lima é o ÚNICO sinal de foco que este app tem (os campos zeram o
   `outline` lá em cima), então o campo errado e focado ganha um contorno lima
   por fora da borda vermelha: sem isso, apertar Tab entre dois campos errados
   não mudaria nada na tela e ninguém saberia onde o foco está. */
input[aria-invalid="true"] { border-color: var(--erro); }
input[aria-invalid="true"]:focus { border-color: var(--erro); outline: 2px solid var(--limo); outline-offset: 2px; }
.erro-campo { margin: 6px 0 0; color: var(--erro); font-weight: 800; font-size: .9rem; }
label { font-weight: 800; font-size: .92rem; display: block; margin: 4px 0 6px; color: var(--nevoa); }

.titulo { text-align: center; font-size: 1.5rem; color: var(--osso); line-height: 1.2; text-wrap: balance; }
.subtitulo { text-align: center; color: var(--nevoa); margin: 0; }
.linha { display: flex; gap: 10px; align-items: center; }
a { color: var(--limo); font-weight: 800; text-decoration: none; }

/* Navegação fixa na base, ao alcance do polegar, respeitando a área segura do iPhone. */
.nav-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; max-width: 460px; margin: 0 auto;
  background: var(--noite-2); border-top: 1px solid var(--linha);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 22px rgba(0, 0, 0, .5);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-inferior a {
  flex: 1; display: grid; gap: 1px; justify-items: center; align-content: center;
  min-height: 54px; padding: 4px 2px; font-size: .72rem; font-weight: 800;
  color: var(--nevoa-fraca); border-radius: 14px;
}
.nav-inferior a.ativo { color: var(--limo); background: var(--noite-3); }
.nav-inferior .icone { font-size: 1.35rem; line-height: 1.1; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--altura-nav) + 20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--noite-3); color: var(--osso); border: 1px solid var(--linha);
  padding: 11px 18px; border-radius: 999px;
  z-index: 50; font-weight: 700; animation: aparecer .2s ease; max-width: 90vw; text-align: center;
}
.toast.some { opacity: 0; transition: opacity .4s; }

.confete { position: fixed; top: -30px; z-index: 40; font-size: 22px; animation: cair 1.8s linear forwards; pointer-events: none; }
@keyframes cair { to { transform: translateY(110dvh) rotate(300deg); } }

/* Quem pediu menos movimento no sistema não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.avatar-preview { display: flex; justify-content: center; }
.parte-controle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--noite-3); border-radius: 14px; padding: 5px 10px;
}
.parte-controle b { font-size: .92rem; }
.seta {
  border: none; background: var(--limo); color: var(--noite); width: 46px; height: 46px;
  border-radius: 14px; font-size: 1.05rem; cursor: pointer; flex-shrink: 0;
}

.grupo-card { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 10px; }
/* Fix 4: com flex-wrap, quando o selo+botão de ação não cabem ao lado do nome
   (celulares de 320–390px), eles descem pra própria linha em vez de espremer
   o apelido/nome do grupo até virar ilegível ou sobrepor o selo em cima do
   texto. O avatar tem tamanho fixo (svg com width/height) e nunca encolhe. */
.amiga-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.amiga-card .avatar { flex-shrink: 0; }
.amiga-card .info { flex: 1 1 150px; min-width: 150px; }
.amiga-card .info small { color: var(--nevoa); font-weight: 700; overflow-wrap: anywhere; }
/* Fix 3 (revisão): antes o "flex: 1 1 100%" forçava esse bloco pra própria
   linha em TODA largura, mesmo quando cabia de boa do lado do nome (o
   comentário antigo dizia "só quebra quando não cabe", mas na prática sempre
   quebrava). Sem basis fixo, o navegador só joga pra própria linha quando o
   conteúdo (selo + botão) de fato não cabe ao lado do avatar+nome — e nesses
   casos "margin-left:auto" empurra o bloco pro canto direito do card, seja ele
   ficando na mesma linha do nome (com espaço sobrando) ou numa linha só dele
   (largura cheia). Isso preserva o comportamento de 320px (nome/grupo nunca
   ficam por baixo do selo) sem forçar a quebra em telas largas de sobra. */
.acao-amiga {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  margin-left: auto; text-align: right;
}
.codigo {
  font-family: 'Bungee', sans-serif; letter-spacing: 2px; background: var(--noite-3);
  border: 2px dashed var(--rosa); color: var(--rosa);
  padding: 10px 14px; border-radius: 12px; text-align: center; font-size: 1.3rem;
}
.membros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.membro { text-align: center; display: grid; gap: 8px; justify-items: center; }

.progresso { height: 10px; background: var(--noite-3); border-radius: 999px; overflow: hidden; }
.progresso > div { height: 100%; background: linear-gradient(90deg, var(--rosa), var(--lua)); border-radius: 999px; transition: width .3s; }
.opcao {
  text-align: left; background: var(--noite-2); color: var(--osso);
  box-shadow: 0 4px 0 var(--linha); border: 2.5px solid var(--linha);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem;
}
.opcao.certa { background: var(--limo); border-color: var(--limo-fundo); box-shadow: 0 4px 0 var(--limo-fundo); color: var(--noite); }
.opcao.errada { background: var(--erro); border-color: var(--erro-fundo); box-shadow: 0 4px 0 var(--erro-fundo); color: var(--noite); animation: tremer .3s; }
@keyframes tremer { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.resultado-circulo {
  width: 150px; height: 150px; border-radius: 50%;
  background: conic-gradient(var(--rosa) calc(var(--pct) * 1%), var(--noite-3) 0);
  display: grid; place-items: center; margin: 0 auto;
}
.resultado-circulo > div {
  width: 118px; height: 118px; border-radius: 50%; background: var(--noite-2);
  display: grid; place-items: center; font-family: 'Bungee', sans-serif;
  font-size: 1.9rem; color: var(--limo); font-weight: 800;
}
.selo { display: inline-block; background: var(--aviso-fundo); color: var(--aviso); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 800; }
/* O ganho de Zoombucks no resultado do quiz: mesma cor do saldo na cidade
   (--limo), pra ela ligar os dois na hora — é ali que o crédito acontece. */
.ganho-zoombucks { margin: 0; font-weight: 800; color: var(--limo); }

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--linha); font-weight: 700; }
.ranking li:last-child { border-bottom: none; }

.aviso { background: var(--aviso-fundo); border-radius: var(--raio); padding: 12px 16px; font-weight: 700; color: var(--aviso); }
.lista-perguntas { display: grid; gap: 10px; }
.pergunta-propria { background: var(--noite-3); border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.carregando { text-align: center; color: var(--nevoa); }