/* Sem isto, borda e padding dos botões somam por fora e a grade de bichinhos
   estoura a largura do cartão em tela de 390px. */
.conta-tela, .conta-tela *, .conta-tela *::before, .conta-tela *::after{box-sizing:border-box}
.faixa-teste, .faixa-teste *{box-sizing:border-box}

/* Telas de conta, perfis e compra. Segue o DESIGN.md: papel recortado,
   borda grossa, sombra dura deslocada, nada de blur difuso. */

.conta-tela{
  position:fixed;inset:0;z-index:9000;display:none;
  background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px);
}
.conta-tela.ativa{display:block;animation:contaEntra .35s var(--ease-out) both}
@keyframes contaEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.conta-caixa{
  max-width:460px;margin:0 auto;background:var(--paper);border:var(--bd);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:26px 22px;
}
.conta-marca{text-align:center;margin-bottom:18px}
.conta-marca img{width:96px;height:96px;image-rendering:auto}
.conta-titulo{
  font-family:var(--font-display);font-size:1.75rem;line-height:1.15;color:var(--ink);
  text-align:center;margin:0 0 8px;
}
.conta-texto{font-size:1rem;line-height:1.5;color:var(--ink-soft);text-align:center;margin:0 0 20px}
.conta-texto strong{color:var(--ink)}

/* ---- botoes ---- */
.conta-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:var(--tap);padding:14px 18px;border:var(--bd);border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--ink);
  background:var(--sun);box-shadow:var(--sh-md);cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast);
}
.conta-btn:active{transform:translateY(4px);box-shadow:var(--sh-sm)}
.conta-btn[disabled]{opacity:.55;pointer-events:none}
.conta-btn.principal{background:var(--lime)}
.conta-btn.google{background:var(--paper);gap:12px}
.conta-btn.google svg{width:22px;height:22px;flex:none}
.conta-btn.discreto{background:transparent;border:none;box-shadow:none;color:var(--ink-soft);font-size:.95rem;min-height:44px}
.conta-btn.discreto:active{transform:none}
.conta-btn + .conta-btn{margin-top:12px}

/* ---- quem vai jogar ---- */
.perfil-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:14px;margin:8px 0 18px}
.perfil-cartao{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;
  background:var(--paper-2);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-md);
  cursor:pointer;transition:transform var(--t-fast) var(--ease-bounce);
}
.perfil-cartao:active{transform:translateY(4px) scale(.98);box-shadow:var(--sh-sm)}
.perfil-cartao img{width:76px;height:76px;pointer-events:none}
.perfil-nome{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perfil-idade{font-size:.85rem;color:var(--ink-soft);font-weight:700}
.perfil-cartao.novo{background:transparent;border-style:dashed;box-shadow:none;justify-content:center;min-height:150px}
.perfil-cartao.novo .perfil-mais{font-size:2.6rem;line-height:1;color:var(--ink-soft)}

/* ---- formulario de perfil ---- */
.conta-campo{margin-bottom:16px}
.conta-rotulo{display:block;font-weight:800;color:var(--ink);margin-bottom:8px;font-size:1rem}
.conta-input{
  width:100%;min-height:var(--tap);padding:12px 16px;border:var(--bd);border-radius:var(--r-md);
  background:#fff;font-family:var(--font);font-size:1.15rem;color:var(--ink);
}
.conta-input:focus{outline:none;box-shadow:var(--sh-sm)}
.idade-linha{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.idade-opcao{
  min-height:52px;border:var(--bd);border-radius:var(--r-md);background:var(--paper-2);
  font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--ink);cursor:pointer;
}
.idade-opcao[aria-pressed="true"]{background:var(--teal);box-shadow:var(--sh-sm)}
.avatar-linha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.avatar-opcao{
  aspect-ratio:1;display:grid;place-items:center;border:var(--bd);border-radius:var(--r-md);
  background:var(--paper-2);cursor:pointer;padding:6px;
}
.avatar-opcao img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.avatar-opcao[aria-pressed="true"]{background:var(--sun);box-shadow:var(--sh-sm)}

/* ---- aviso de teste e compra ---- */
.conta-selo{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:var(--bd-thin);
  border-radius:var(--r-pill);background:var(--sun);font-weight:800;font-size:.9rem;color:var(--ink);
  margin:0 auto 14px;
}
.conta-selo.alerta{background:var(--tomato);color:var(--paper)}
.conta-lista{list-style:none;padding:0;margin:0 0 20px}
.conta-lista li{
  display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:1rem;color:var(--ink);line-height:1.4;
}
.conta-lista li::before{content:"✔";color:var(--lime-d);font-weight:900;flex:none}
.conta-preco{
  text-align:center;font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--ink);margin:4px 0 4px;
}
.conta-preco small{display:block;font-size:.85rem;font-weight:700;color:var(--ink-soft);margin-top:2px}

/* ---- faixa de aviso do teste, dentro do app ---- */
.faixa-teste{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 16px;
  background:var(--sun);border:var(--bd);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);font-weight:800;color:var(--ink);font-size:.95rem;
}
.faixa-teste button{
  padding:8px 16px;border:var(--bd-thin);border-radius:var(--r-pill);background:var(--paper);
  font-weight:800;color:var(--ink);cursor:pointer;font-family:var(--font-display);
}
.faixa-teste.some{display:none}

/* ---- recado de erro ---- */
.conta-erro{
  background:#FFE1E1;border:var(--bd-thin);border-color:var(--tomato-d);border-radius:var(--r-md);
  padding:10px 14px;color:#8C1D1D;font-weight:700;font-size:.95rem;margin-bottom:14px;
}
.conta-erro:empty{display:none}

/* ---- area do responsavel ---- */
.conta-perfil-linha{
  display:flex;align-items:center;gap:12px;padding:12px;background:var(--paper-2);
  border:var(--bd-thin);border-radius:var(--r-md);margin-bottom:10px;
}
.conta-perfil-linha img{width:44px;height:44px;flex:none}
.conta-perfil-linha .info{flex:1;min-width:0}
.conta-perfil-linha .info b{display:block;color:var(--ink);font-size:1.05rem}
.conta-perfil-linha .info span{font-size:.85rem;color:var(--ink-soft);font-weight:700}
.conta-perfil-linha button{
  border:var(--bd-thin);background:var(--paper);border-radius:var(--r-pill);
  min-width:44px;min-height:44px;font-size:1.1rem;cursor:pointer;
}

@media (max-width:400px){
  .conta-caixa{padding:20px 16px}
  .conta-titulo{font-size:1.5rem}
  .idade-linha{grid-template-columns:repeat(3,minmax(0,1fr))}
  .avatar-linha{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Crachá de quem está jogando, no lugar do antigo crachá de idade. */
.player-age-badge.cracha-perfil{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px 4px 4px}
.player-age-badge.cracha-perfil img{width:28px;height:28px;flex:none}
.player-age-badge.cracha-perfil .cracha-nome{
  font-weight:800;font-size:.95rem;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.conta-bloqueado{overflow:hidden}