/* SequeLariGTA — personagens de GTA VI (#personagens). Arte e visual próprios: emblemas de néon, mapa de relações. */

#pers-numeros { grid-template-columns: repeat(4, 1fr); }
.jogo-comparar.linha-botoes { justify-content: center; }

/* ---------- Emblemas (arte própria) ---------- */
.pers-emblema { --t: 54px; position: relative; flex: none; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cor) 70%, #fff) 0, var(--cor) 38%, color-mix(in srgb, var(--cor) 35%, #120c2a) 100%);
  box-shadow: 0 0 0 3px #120c2a, 0 0 0 5px color-mix(in srgb, var(--cor) 80%, transparent), 0 0 18px color-mix(in srgb, var(--cor) 60%, transparent); }
.pers-emblema i { font-style: normal; font-size: calc(var(--t) * .46); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.pers-emblema b { position: absolute; right: -4px; bottom: -4px; min-width: 24px; padding: 1px 6px; border-radius: 99px; font-size: .68rem; font-weight: 900; font-style: italic; letter-spacing: .5px;
  background: #120c2a; color: color-mix(in srgb, var(--cor) 60%, #fff); border: 1px solid color-mix(in srgb, var(--cor) 70%, transparent); }
.pers-emblema.grande { --t: 82px; }
.pers-emblema.grande b { font-size: .8rem; }

/* ---------- A dupla ---------- */
.pers-dupla { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.pers-dupla > .cartao + .cartao { margin-top: 0; }
.pers-heroi { display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--cor); overflow: hidden; }
.pers-heroi::after { content: ""; position: absolute; inset: auto -30% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--cor) 26%, transparent), transparent 70%); }
.pers-heroi-topo, .pers-ficha-topo, .pers-cartao-topo { display: flex; gap: 16px; align-items: center; }
.pers-heroi h3 { font-family: var(--fonte-display); margin: 4px 0 0; font-size: clamp(1.45rem, 4vw, 2rem); font-style: italic; line-height: 1.1; color: color-mix(in srgb, var(--cor) 45%, #fff); }
.pers-papel { background: color-mix(in srgb, var(--cor, var(--agua)) 18%, transparent); color: color-mix(in srgb, var(--cor, var(--agua)) 60%, #fff); }
.pers-lema { margin: 4px 0 0; font-style: italic; color: var(--texto-2); }
.pers-lema { padding-left: 10px; border-left: 3px solid var(--cor, var(--sol)); }
.pers-fatos { margin: 0; display: grid; gap: 8px; }
.pers-fatos div { padding: 8px 12px; border-radius: 12px; background: rgba(13, 16, 40, .55); border-left: 3px solid color-mix(in srgb, var(--cor, var(--agua)) 80%, transparent); }
.pers-fatos dt { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--sol); }
.pers-fatos dd { margin: 2px 0 0; font-size: .95rem; }
.pers-rotulo { margin: 4px 0 0; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--texto-2); }
.pers-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pers-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 99px; font: inherit; font-size: .82rem; font-weight: 700; color: var(--texto);
  background: color-mix(in srgb, var(--c, #aab0d6) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #aab0d6) 40%, transparent); }
button.pers-chip { cursor: pointer; transition: transform .2s, box-shadow .2s; }
button.pers-chip:hover { transform: translateY(-2px); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.pers-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
.pers-acoes .botao { padding: 8px 16px; font-size: .88rem; }
.pers-fav { font: inherit; font-weight: 700; font-size: .88rem; padding: 8px 14px; border-radius: 99px; cursor: pointer; color: var(--texto); background: rgba(255, 63, 164, .1); border: 1px solid rgba(255, 63, 164, .4); transition: transform .2s, background .2s, box-shadow .2s; }
.pers-fav span { color: var(--neon-rosa); font-size: 1.05rem; }
.pers-fav:hover { transform: scale(1.05); box-shadow: 0 0 14px rgba(255, 63, 164, .45); }
.pers-fav[aria-pressed="true"] { background: var(--neon-rosa); color: #fff; }
.pers-fav[aria-pressed="true"] span { color: #fff; }
.pers-fav[aria-pressed="true"] span, .pers-time.on { animation: pers-bate .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pers-bate { 40% { transform: scale(1.25); } }
.pers-elo { display: grid; place-items: center; }
.pers-elo-neon { font-family: var(--fonte-display); font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 900; font-style: italic; color: #fff; line-height: 1;
  text-shadow: 0 0 6px var(--neon-rosa), 0 0 18px var(--neon-rosa), 0 0 34px var(--neon-agua); animation: pers-pisca 4s infinite; }
@keyframes pers-pisca { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .35; } 96% { opacity: 1; } 97% { opacity: .55; } }
.pers-elo-texto { grid-column: 1 / -1; margin: 0; text-align: center; font-weight: 600; }
.pers-elo-texto .fonte { display: block; font-weight: 400; }

/* Time Jason ou time Lucia */
.pers-favorito { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 18px; }
.pers-fav-texto { display: grid; gap: 2px; }
.pers-fav-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pers-time { font: inherit; font-weight: 800; padding: 10px 18px; border-radius: 99px; cursor: pointer; color: var(--texto); background: color-mix(in srgb, var(--cor) 14%, var(--cartao)); border: 2px solid color-mix(in srgb, var(--cor) 60%, transparent); transition: transform .2s, box-shadow .2s, background .2s; }
.pers-time:hover { transform: translateY(-2px); box-shadow: 0 0 16px color-mix(in srgb, var(--cor) 55%, transparent); }
.pers-time.on { background: var(--cor); color: #120c2a; box-shadow: 0 0 20px color-mix(in srgb, var(--cor) 70%, transparent); }

/* ---------- Premissa ---------- */
.pers-premissa { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: passo; }
.pers-premissa .cartao + .cartao { margin-top: 0; }
.pers-passo { overflow: hidden; }
.pers-passo h3 { margin: 6px 0 4px; }
.pers-passo p { margin: 0 0 6px; }
.pers-passo-n { font-family: var(--fonte-display); position: absolute; right: 12px; top: -10px; font-size: 4.4rem; font-weight: 900; font-style: italic; opacity: .1; line-height: 1; }
.pers-passo-icone { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-size: 1.5rem; background: linear-gradient(135deg, rgba(255, 63, 164, .25), rgba(25, 227, 255, .2)); border: 1px solid var(--borda); }
.pers-passo, .pers-cartao { opacity: 0; transform: translateY(22px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * 90ms); }
.pers-passo.visivel, .pers-cartao.visivel { opacity: 1; transform: none; }
.pers-passo.visivel:hover, .pers-cartao.visivel:hover { transition-delay: 0s; }

/* ---------- Mapa de relações ---------- */
#pers-grupos { margin: 12px 0 14px; }
#pers-grupos .filtro small { opacity: .75; margin-left: 2px; }
.pers-palco { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pers-palco > .cartao + .cartao { margin-top: 0; }
.pers-rede { position: relative; aspect-ratio: 10 / 8; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 63, 164, .12), transparent 60%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 34px), linear-gradient(180deg, rgba(22, 18, 52, .92), rgba(12, 14, 34, .95)); }
.pers-linhas { position: absolute; inset: 7% 8%; width: 84%; height: 86%; overflow: visible; }
.pers-linhas line { stroke: rgba(170, 176, 214, .28); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 6; transition: stroke .3s, stroke-width .3s, opacity .3s; }
.pers-linhas line.acesa { stroke: var(--sol); stroke-width: 3.5; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(255, 201, 74, .8)); }
.pers-no { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; padding: 0; background: none; border: 0; cursor: pointer; color: var(--texto); font: inherit; z-index: 1;
  margin: 0; transition: opacity .3s, filter .3s; }
.pers-no .pers-emblema { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.pers-no.dupla .pers-emblema { --t: 72px; }
.pers-no.citado .pers-emblema { --t: 40px; }
.pers-no.citado .pers-emblema b { display: none; }
.pers-no-nome { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; font-size: .8rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: rgba(13, 16, 40, .8); white-space: nowrap; }
.pers-no:hover .pers-emblema, .pers-no:focus-visible .pers-emblema { transform: scale(1.12); }
.pers-no:focus-visible { outline: none; }
.pers-no:focus-visible .pers-no-nome { outline: 2px solid var(--sol); }
.pers-no.ativo .pers-emblema { transform: scale(1.16); box-shadow: 0 0 0 3px #120c2a, 0 0 0 6px var(--sol), 0 0 26px var(--cor); }
.pers-no.ativo .pers-no-nome { background: var(--sol); color: #1a0d0b; }
.pers-no.ativo .pers-emblema::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--cor); animation: pers-onda 1.8s ease-out infinite; }
@keyframes pers-onda { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.pers-no.longe { opacity: .58; filter: saturate(.5); } /* C5: o nome continua legível (contraste AA) */
.pers-no.fora { opacity: .12; filter: grayscale(1); }
.pers-no.fav .pers-no-nome::after { content: " ♥"; color: var(--neon-rosa); }
.pers-ficha { display: grid; gap: 10px; position: sticky; top: 90px; }
.pers-ficha h3 { margin: 4px 0 0; font-size: 1.4rem; font-style: italic; color: color-mix(in srgb, var(--cor) 45%, #fff); }
.pers-ficha-topo .pequeno { margin: 0; }
.pers-ligacoes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pers-ligacoes li { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(13, 16, 40, .55); }
.pers-ligacoes span { font-size: .9rem; color: var(--texto-2); }
.pers-ir { justify-self: start; }
.pers-ligacoes .pers-ir { font: inherit; font-weight: 800; font-size: .9rem; padding: 3px 12px; border-radius: 99px; cursor: pointer; color: var(--texto);
  background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); transition: transform .2s; }
.pers-ligacoes .pers-ir:hover { transform: translateX(3px); }
.pers-ficha > * { animation: pers-entra .35s ease-out both; }
@keyframes pers-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Grade de perfis ---------- */
.pers-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pers-grade .cartao + .cartao { margin-top: 0; }
.pers-cartao { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--cor); }
.pers-cartao h3 { margin: 0; font-size: 1.1rem; }
.pers-cartao-topo .pequeno { margin: 2px 0 0; }
.pers-cartao > p:not(.fonte):not(.pers-lema) { margin: 0; font-size: .93rem; }
.pers-cartao[hidden] { display: none; }

/* ---------- Em breve ---------- */
.pers-breve { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pers-breve .cartao + .cartao { margin-top: 0; }
.pers-breve-item { display: flex; gap: 14px; align-items: flex-start; }
.pers-breve-item h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pers-breve-item p { margin: 0 0 6px; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .pers-palco { grid-template-columns: 1fr; }
  .pers-ficha { position: static; }
  .pers-premissa { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pers-dupla { grid-template-columns: 1fr; gap: 10px; }
  .pers-elo { order: 0; }
  #pers-numeros { grid-template-columns: repeat(2, 1fr); }
  .pers-rede { aspect-ratio: 10 / 12; }
  .pers-no .pers-emblema { --t: 42px; }
  .pers-no.dupla .pers-emblema { --t: 56px; }
  .pers-no.citado .pers-emblema { --t: 32px; }
  .pers-no-nome { font-size: .7rem; padding: 1px 6px; }
  .pers-emblema b { font-size: .6rem; min-width: 20px; padding: 0 4px; }
  .pers-emblema.grande { --t: 64px; }
  .pers-favorito { flex-direction: column; align-items: stretch; }
  .pers-fav-botoes .pers-time { flex: 1; }
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .pers-passo, .pers-cartao { opacity: 1; transform: none; transition: none; }
  .pers-elo-neon, .pers-no.ativo .pers-emblema::after, .pers-ficha > *, .pers-fav[aria-pressed="true"] span, .pers-time.on { animation: none; }
  .pers-no .pers-emblema, .pers-linhas line { transition: none; }
}