/* Perfis, criação de perfil, duelo em dupla e o modo adulto (interface profissional). */

.boas-vindas { position: relative; }
.voltar-canto { position: absolute; top: 16px; left: 16px; }
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1rem; }
.modo, .jogo-op {
  border: 3px solid var(--linha); background: #fff; border-radius: 18px; padding: 14px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .1s;
}
.modo span, .jogo-op span { font-size: 2.2rem; }
.modo b, .jogo-op b { font-family: 'Fredoka'; font-size: 1.2rem; font-weight: 600; }
.modo small, .jogo-op small { color: var(--suave); line-height: 1.35; }
.modo:hover, .jogo-op:hover { transform: translateY(-2px); }
.modo.sel, .jogo-op.sel { border-color: var(--primaria); background: #f5f3ff; }

.perfis-tela { max-width: 860px; margin: 30px auto; text-align: center; }
.perfis-tela .logo { font-size: 3.5rem; }
.perfis-tela h1 { color: var(--primaria); }
.grade-perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.perfil-card {
  border: 3px solid var(--linha); background: #fff; border-radius: 20px; padding: 18px 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .12s, border-color .12s;
}
.perfil-card:hover { transform: translateY(-4px); border-color: var(--primaria); }
.perfil-card .avatar { font-size: 3rem; width: 84px; height: 84px; display: grid; place-items: center; background: #f3e8ff; border-radius: 24px; }
.perfil-card b { font-family: 'Fredoka'; font-size: 1.3rem; font-weight: 600; }
.perfil-card small { color: var(--suave); font-weight: 700; }
.perfil-card.adulto .avatar { background: #dbeafe; border-radius: 50%; }
.perfil-card.novo { border-style: dashed; }
.perfil-card.novo .avatar { background: #f1f5f9; color: var(--suave); }
.iniciais { font: 700 1.05em 'Inter', sans-serif; color: #1d4ed8; letter-spacing: .02em; }
.perfil-card .iniciais { font-size: 1.8rem; }

.duelo-card { background: linear-gradient(120deg, #fef3c7, #fce7f3); }
.duelo { max-width: 860px; margin: 0 auto; }
.duelistas { display: flex; align-items: flex-end; gap: 14px; margin: 16px 0; flex-wrap: wrap; }
.duelistas label { flex: 1; min-width: 200px; font-weight: 800; }
.duelistas select {
  display: block; width: 100%; margin-top: 6px; font: 600 1.15rem 'Fredoka', sans-serif; padding: .6em; border-radius: 14px;
  border: 3px solid var(--linha); background: #fff; color: var(--texto);
}
.versus { font: 700 1.6rem 'Fredoka'; color: #db2777; padding: 0 6px 10px; }
.jogos-duelo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.placar-geral { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #f8fafc; border-radius: 16px; padding: 12px; margin: 16px 0 6px; }
.placar-geral:empty { display: none; }
.placar-geral span { color: var(--suave); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.placar-geral b { font: 600 1.4rem 'Fredoka'; }
.aviso-duelo { color: var(--erro); font-weight: 800; }
.duelo .grande-btn { display: block; margin: 1rem auto 0; }
.lado-a-lado { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; }
.lado-a-lado > div { flex: 1; background: #f8fafc; border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 3px solid transparent; }
.lado-a-lado > div.venceu { border-color: var(--amarelo); background: #fefce8; }
.lado-a-lado .avatar { font-size: 2.4rem; }
.lado-a-lado b { font-family: 'Fredoka'; font-size: 1.2rem; font-weight: 600; }
.lado-a-lado small { color: var(--suave); font-weight: 700; }
.zona-perigo { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Modo adulto ---------- */
body.adulto {
  --primaria: #2563eb; --primaria-esc: #1d4ed8; --raio: 12px; --amarelo: #f59e0b;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 10px rgba(15, 23, 42, .05);
  font-family: 'Inter', system-ui, sans-serif; background: #f1f5f9;
}
.adulto h1, .adulto h2, .adulto h3, .adulto .btn, .adulto .titulo-licao, .adulto .chip, .adulto .continuar,
.adulto .perfil-info b, .adulto .mundo-prog, .adulto .no-circ, .adulto .jogo-card b, .adulto .link-card b, .adulto .dica-card b,
.adulto .mini-stats b, .adulto .numeros-res b, .adulto .kpis b, .adulto .conquista b, .adulto .placar-geral b, .adulto .lado-a-lado b,
.adulto .modo b, .adulto .jogo-op b, .adulto .duelistas select, .adulto .contagem, .adulto kbd, .adulto .tecla, .adulto .versus {
  font-family: 'Inter', system-ui, sans-serif;
}
.adulto h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.adulto h2 { font-size: 1.1rem; font-weight: 600; }
.adulto .cartao, .adulto .mundo { border: 1px solid #e2e8f0; }
.adulto .btn { border-radius: 8px; box-shadow: none; border: 1px solid #cbd5e1; font-weight: 600; font-size: .95rem; }
.adulto .btn:hover { transform: none; background: #f8fafc; }
.adulto .btn:active { transform: none; box-shadow: none; }
.adulto .btn.primario { border-color: var(--primaria); }
.adulto .btn.primario:hover { background: var(--primaria-esc); }
.adulto .btn.perigo { border-color: #fca5a5; }
.adulto .grande-btn { font-size: 1.05rem; }
.adulto .chip { border-radius: 8px; font-size: .9rem; font-weight: 600; border: 1px solid #e2e8f0; }
.adulto .perfil { border-radius: 12px; border: 1px solid #e2e8f0; }
.adulto .perfil .avatar { width: 46px; height: 46px; border-radius: 50%; background: #dbeafe; font-size: 1.1rem; }
.adulto .barra-xp { background: #e2e8f0; }
.adulto .barra-xp span { background: var(--primaria); }
.adulto .continuar { background: #0f172a; box-shadow: none; border-radius: 12px; }
.adulto .continuar b { font-size: 1.2rem; }
.adulto .continuar .play { animation: none; font-size: 1.4rem; }
.adulto .mundo { border-top: 1px solid #e2e8f0; border-left: 4px solid var(--cor); }
.adulto .mundo-emoji { display: none; }
.adulto .mundo-topo h2 { color: #0f172a; }
.adulto .mundo-prog { font-size: .9rem; }
.adulto .no { width: 104px; }
.adulto .no-circ { width: 40px; height: 40px; border-width: 2px; font-size: 1rem; box-shadow: none; }
.adulto .no.atual .no-circ { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 25%, transparent); }
.adulto .no-nome { font-weight: 600; font-size: .8rem; }
.adulto .estrela.cheia { text-shadow: none; }
.adulto .jogo-card, .adulto .link-card { border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; }
.adulto .jogo-card:hover:not(:disabled), .adulto .link-card:hover { background: #eff6ff; transform: none; }
.adulto .jogo-emoji { font-size: 1.6rem; }
.adulto .duelo-card { background: #fff; }
.adulto .modo.sel, .adulto .jogo-op.sel { background: #eff6ff; }
.adulto .modo, .adulto .jogo-op, .adulto .duelistas select { border-width: 2px; border-radius: 10px; }
.adulto .versus { color: var(--primaria); }
.adulto .placar-geral b, .adulto .lado-a-lado b { font-weight: 700; }
.adulto .mini-stats span { border-radius: 8px; border: 1px solid #e2e8f0; }
.adulto .progresso { height: 6px; border-radius: 6px; }
.adulto #barra { background: var(--primaria); }
.adulto .caixa-texto { font: 500 1.65rem/1.8 'JetBrains Mono', monospace; letter-spacing: 0; border: 1px solid #e2e8f0; }
.adulto .caixa-texto.curta { font-size: 1.45rem; }
.adulto .c.ok { color: #0f172a; }
.adulto .c.corrigido { color: #b45309; }
.adulto .c.atual { background: #dbeafe; box-shadow: inset 0 -3px 0 var(--primaria); }
.adulto .c.erro { color: #fff; background: var(--erro); box-shadow: none; }
.adulto .teclado { background: #1e293b; border-radius: 12px; box-shadow: 0 4px 0 #0f172a; }
.adulto .tecla { background: color-mix(in srgb, var(--dedo, #e2e8f0) 28%, #fff); font-weight: 600; }
.adulto .tecla.alvo { background: var(--dedo, #fde047); box-shadow: 0 0 0 4px var(--primaria); animation: none; }
.adulto .tecla.toupeira { background: var(--primaria); color: #fff; }
.adulto .tecla.toupeira::before, .adulto .tecla.pegou::before { content: none; }
.adulto .caixa-modal { border-radius: 14px; animation: none; }
.adulto .caixa-modal .grande { display: none; }
.adulto .estrelas-grandes .estrela { font-size: 3rem; }
.adulto .numeros-res b, .adulto .kpis b { color: #0f172a; font-weight: 700; }
.adulto .ceu { background: linear-gradient(#0f172a, #1e293b); }
.adulto .cidade { display: none; }
.adulto .meteoro .fogo { display: none; }
.adulto .meteoro .palavra { font-family: 'JetBrains Mono', monospace; border-radius: 6px; }
.adulto .meteoro.alvo .palavra { background: #dbeafe; outline-color: var(--primaria); }
.adulto .pista { background: #e2e8f0; }
.adulto .raia-nome { color: #334155; }
.adulto .raia-pista { background-color: #cbd5e1; }
.adulto .raia:first-child .raia-pista { background-color: #bfdbfe; }
.adulto .contagem { text-shadow: 0 4px 20px rgba(37, 99, 235, .7); }
.adulto .conquista.tem { background: #eff6ff; }
.adulto .grafico .col { background: var(--primaria); }
.adulto .dica-card { border: 1px solid #e2e8f0; background: #fff; }
.adulto .recorde { background: #dbeafe; color: #1d4ed8; animation: none; }

@media (max-width: 700px) {
  .modos, .jogos-duelo { grid-template-columns: 1fr; }
}

/* ---------- Duelo online ---------- */
.online-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 10px; }
.online-bloco { background: #f8fafc; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; }
.online-bloco h2 { margin-top: 0; }
.online-bloco .grande-btn { margin-top: auto; align-self: center; }
.online-bloco .jogos-duelo { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.online-bloco .jogo-op { flex-direction: row; gap: 10px; padding: 8px 12px; text-align: left; }
.online-bloco .jogo-op span { font-size: 1.6rem; }
.campo-codigo { text-transform: uppercase; letter-spacing: .4em; font-size: 2rem !important; }
.codigo-sala { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #f5f3ff; border: 3px dashed var(--primaria); border-radius: 18px; padding: 14px; margin: 12px 0; text-align: center; }
.codigo-sala span { color: var(--suave); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.codigo-sala > b { font: 700 3rem 'Fredoka', monospace; letter-spacing: .25em; color: var(--primaria); }
.codigo-sala small { color: var(--suave); }
.lado-a-lado > div.vago { opacity: .55; border-style: dashed; border-color: var(--linha); }
.acao-sala { text-align: center; }
.espera { font-weight: 800; color: var(--suave); font-size: 1.1rem; }
.duelo .jogos-duelo .jogo-op b { font-size: 1.05rem; }
.rival-ao-vivo {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; background: #1e293b; color: #fff; border-radius: 16px;
  padding: 10px 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); display: flex; align-items: center; gap: 8px;
}
.rival-ao-vivo:empty { display: none; }
.rival-ao-vivo .iniciais { color: #93c5fd; }
.adulto .codigo-sala { background: #eff6ff; border-width: 2px; border-radius: 12px; }
.adulto .codigo-sala > b { font-family: 'JetBrains Mono', monospace; }
.adulto .online-bloco { border: 1px solid #e2e8f0; background: #fff; border-radius: 12px; }
.adulto .rival-ao-vivo { border-radius: 10px; }
@media (max-width: 800px) { .online-grade { grid-template-columns: 1fr; } }