/* SequeLariCOD — tema "radar tático noturno", próprio do site (sem copiar visual de ninguém).
   Cores: grafite oliva no fundo, verde-limão do selo (#b5d96a), âmbar de sinal e ciano de radar. */
:root {
  --fundo: #0b0f0a;
  --fundo-2: #121a10;
  --painel: #172115;
  --painel-2: #1e2a1a;
  --linha: #2c3c27;
  --texto: #e9f0e1;
  --suave: #a9b89f;
  --limao: #b5d96a;
  --limao-escuro: #1a2406;
  --ambar: #ffb02e;
  --ciano: #4fd1ff;
  --vermelho: #ff6a4d;
  --raio: 18px;
  --raio-p: 12px;
  --titulo: "Saira Condensed", "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --corpo: "Figtree", "Segoe UI", system-ui, sans-serif;
  --dado: "DM Mono", ui-monospace, monospace;
  --margem: clamp(14px, 3.4vw, 40px);
  --cena-a: #b5d96a;
  --cena-b: #4fd1ff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body { margin: 0; min-height: 100vh; background: var(--fundo); color: var(--texto); font: 400 16px/1.55 var(--corpo); overflow-x: hidden; }
a { color: var(--limao); }
img { max-width: 100%; height: auto; }
button, select, input { font: inherit; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tela de carregamento com o Bipinho, o drone de radar do SequeLariCOD (personagem próprio). */
#carregando { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 8px; background: radial-gradient(circle at 50% 45%, #1b2817, var(--fundo) 70%); transition: opacity .45s ease, visibility .45s; }
#carregando.saiu { opacity: 0; visibility: hidden; }
.carregando-txt { margin: 0; padding: 0 16px; max-width: 36ch; text-align: center; font: 600 1rem var(--dado); color: var(--suave); }
.m-sombra { fill: #000; opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .m-corpo { animation: flutua 1.4s ease-in-out infinite; transform-origin: 60px 60px; }
  .m-sombra { animation: sombra 1.4s ease-in-out infinite; transform-origin: 60px 108px; }
  .m-luz { animation: pisca 0.9s steps(2) infinite; }
  .m-olho { animation: olhar 2.8s ease-in-out infinite; }
}
@keyframes flutua { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes sombra { 50% { transform: scaleX(.75); opacity: .25; } }
@keyframes pisca { 50% { opacity: .2; } }
@keyframes olhar { 0%, 40%, 100% { transform: translateX(0); } 60%, 80% { transform: translateX(4px); } }
/* Variações do Bipinho por seção: cor, selo com um ícone próprio e um jeito diferente de mexer. */
#carregando { --bip: #b5d96a; }
#carregando[data-secao="noticias"], #carregando[data-secao="videos"], #carregando[data-secao="blog"] { --bip: #ff6a4d; }
#carregando[data-secao="armas"], #carregando[data-secao="rankings"], #carregando[data-secao="estatisticas"], #carregando[data-secao="comparar"] { --bip: #ffb02e; }
#carregando[data-secao="operadores"], #carregando[data-secao="mapas"], #carregando[data-secao="privacidade"], #carregando[data-secao="busca"] { --bip: #4fd1ff; }
#carregando[data-secao="seguranca"], #carregando[data-secao="fontes"] { --bip: #6ee7a8; }
#carregando[data-secao="colecao"], #carregando[data-secao="jogos"], #carregando[data-secao="linha-do-tempo"], #carregando[data-secao="glossario"], #carregando[data-secao="atualizacoes"] { --bip: #c9a5ff; }
#carregando[data-secao="temporadas"] { --bip: #ffb02e; }
#carregando .m-olho { fill: var(--bip); }
.m-selo { display: none; stroke: var(--bip); stroke-width: 2.2; }
.m-selo-fundo { fill: #0b0f0a; stroke-width: 2.5; }
.m-selo .ac { display: none; }
#carregando[data-secao]:not([data-secao="inicio"]) .m-selo { display: inline; }
#carregando[data-secao="noticias"] .ac-noticias, #carregando[data-secao="armas"] .ac-armas, #carregando[data-secao="operadores"] .ac-operadores,
#carregando[data-secao="mapas"] .ac-mapas, #carregando[data-secao="calendario"] .ac-calendario, #carregando[data-secao="linha-do-tempo"] .ac-linha-do-tempo,
#carregando[data-secao="videos"] .ac-videos, #carregando[data-secao="colecao"] .ac-colecao, #carregando[data-secao="rankings"] .ac-rankings,
#carregando[data-secao="jogos"] .ac-jogos, #carregando[data-secao="estatisticas"] .ac-estatisticas, #carregando[data-secao="privacidade"] .ac-privacidade, #carregando[data-secao="seguranca"] .ac-privacidade,
#carregando[data-secao="nao-encontrada"] .ac-nao-encontrada, #carregando[data-secao="blog"] .ac-blog, #carregando[data-secao="busca"] .ac-busca, #carregando[data-secao="comparar"] .ac-comparar, #carregando[data-secao="glossario"] .ac-glossario, #carregando[data-secao="atualizacoes"] .ac-atualizacoes, #carregando[data-secao="temporadas"] .ac-temporadas, #carregando[data-secao="fontes"] .ac-fontes { display: inline; }
#carregando .carregando-txt::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: var(--bip); vertical-align: .05em; }
@media (prefers-reduced-motion: no-preference) {
  .m-selo { animation: selo-entra .5s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
  .m-selo .ac { transform-box: fill-box; transform-origin: center; }
  #carregando[data-secao="armas"] .ac-armas, #carregando[data-secao="linha-do-tempo"] .ac-linha-do-tempo, #carregando[data-secao="busca"] .ac-busca, #carregando[data-secao="atualizacoes"] .ac-atualizacoes, #carregando[data-secao="temporadas"] .ac-temporadas { animation: selo-gira 1.6s ease-in-out infinite; }
  #carregando[data-secao="rankings"] .ac-rankings, #carregando[data-secao="glossario"] .ac-glossario, #carregando[data-secao="colecao"] .ac-colecao, #carregando[data-secao="mapas"] .ac-mapas, #carregando[data-secao="fontes"] .ac-fontes { animation: selo-pula .9s ease-in-out infinite; }
  #carregando[data-secao="videos"] .ac-videos, #carregando[data-secao="noticias"] .ac-noticias, #carregando[data-secao="estatisticas"] .ac-estatisticas { animation: pisca 1.1s ease-in-out infinite; }
  #carregando[data-secao="jogos"] .ac-jogos, #carregando[data-secao="comparar"] .ac-comparar, #carregando[data-secao="nao-encontrada"] .ac-nao-encontrada, #carregando[data-secao="operadores"] .ac-operadores, #carregando[data-secao="blog"] .ac-blog { animation: selo-balanca 1.3s ease-in-out infinite; }
  #carregando[data-secao="mapas"] .m-olho, #carregando[data-secao="nao-encontrada"] .m-olho { animation-duration: 1.4s; }
  #carregando[data-secao="jogos"] .m-corpo, #carregando[data-secao="rankings"] .m-corpo { animation: flutua .9s ease-in-out infinite; }
}
@keyframes selo-entra { from { transform: scale(0); opacity: 0; } }
@keyframes selo-gira { 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes selo-pula { 50% { transform: translateY(-3px) scale(1.08); } }
@keyframes selo-balanca { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

/* Fundo animado: grade, varredura de radar e curvas de nível. A cor muda por seção (body[data-secao]). */
.fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fundo-grade { position: absolute; inset: -40px; background-image: linear-gradient(rgba(181,217,106,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(181,217,106,.06) 1px, transparent 1px); background-size: 46px 46px; }
.fundo-radar { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 40%; margin: -70vmax 0 0 -70vmax; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--cena-a) 22%, transparent), transparent 18%); opacity: .35; }
.fundo-topo { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 40% at 15% 10%, color-mix(in srgb, var(--cena-b) 16%, transparent), transparent 70%),
  radial-gradient(ellipse 50% 50% at 90% 80%, color-mix(in srgb, var(--cena-a) 14%, transparent), transparent 70%),
  repeating-radial-gradient(circle at 70% 30%, transparent 0 34px, rgba(255,255,255,.025) 35px 36px); }
@media (prefers-reduced-motion: no-preference) {
  .fundo-radar { animation: varre 9s linear infinite; }
  .fundo-grade { animation: grade 30s linear infinite; }
}
@keyframes varre { to { transform: rotate(360deg); } }
@keyframes grade { to { transform: translate(46px, 46px); } }
body[data-secao="armas"] { --cena-a: #ffb02e; --cena-b: #b5d96a; }
body[data-secao="operadores"] { --cena-a: #4fd1ff; --cena-b: #b5d96a; }
body[data-secao="mapas"] { --cena-a: #b5d96a; --cena-b: #ffb02e; }
body[data-secao="calendario"], body[data-secao="linha-do-tempo"] { --cena-a: #ffb02e; --cena-b: #4fd1ff; }
body[data-secao="videos"] { --cena-a: #ff6a4d; --cena-b: #ffb02e; }
body[data-secao="jogos"], body[data-secao="rankings"], body[data-secao="colecao"] { --cena-a: #c39bff; --cena-b: #4fd1ff; }

/* Barra do ecossistema SequeLari */
.eco { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: env(safe-area-inset-top, 0px) var(--margem) 0; background: #060905; color: var(--suave); font: 600 .78rem var(--dado); border-bottom: 1px solid #1a2416; }
.eco-marca { font-size: .85rem; text-decoration: none; }
.eco select { max-width: min(42vw, 220px); color: var(--texto); background: transparent; border: 1px solid var(--linha); border-radius: 8px; padding: 1px 6px; }
.eco select option { color: #0b0f0a; background: #e9f0e1; }
.eco-link { color: var(--suave); text-decoration: none; }
.eco-link:hover { color: var(--texto); text-decoration: underline; }
.eco-conta { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha); color: var(--texto); }
.eco-conta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.eco-conta:hover, .eco-conta:focus-visible { border-color: var(--limao); color: var(--limao); }
.eco-idioma { margin-left: 0; }
@media (max-width: 520px) { .eco-link { display: none; } .eco-marca.logo-sl { font-size: .72rem; } }

/* Topo e menu */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px var(--margem); background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-logo { font-size: 1.25rem; flex: none; }
.topo-logo .logo-jogo { color: var(--limao-escuro); -webkit-text-fill-color: var(--limao-escuro); }
.menu { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.menu a { padding: 6px 8px; border-radius: 10px; color: var(--suave); text-decoration: none; font: 700 .95rem var(--titulo); letter-spacing: .04em; text-transform: uppercase; transition: color .2s, background .2s; }
.menu a:hover { color: var(--texto); background: var(--painel); }
.menu a[aria-current="page"] { color: var(--limao-escuro); background: var(--limao); }
.menu-botao { display: none; margin-left: auto; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel); color: var(--texto); cursor: pointer; font-weight: 700; }
@media (max-width: 1320px) {
  .menu-botao { display: inline-flex; gap: 6px; align-items: center; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 10px var(--margem) 16px; background: var(--fundo-2); border-bottom: 1px solid var(--linha); flex-direction: column; }
  .menu.aberto { display: flex; }
  .menu a { padding: 10px 12px; font-size: 1.05rem; }
}

/* Conteúdo */
main { padding: 0 var(--margem) 40px; outline: none; }
.ssr { padding: 28px 0 8px; max-width: 980px; }
.ssr h1 { margin: 0 0 6px; font: 800 clamp(1.9rem, 5vw, 3.4rem)/1 var(--titulo); text-transform: uppercase; letter-spacing: .01em; background: linear-gradient(90deg, var(--texto), var(--limao) 60%, var(--ambar)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ssr p { margin: 0; color: var(--suave); max-width: 72ch; }
.ssr-fonte { margin-top: 6px !important; font-size: .85rem; }
.js .ssr-lista, .js .ssr-jogo, .js .ssr-temporada h2, .js .ssr-grupo { display: none; }
.ssr-lista { columns: 3 180px; padding-left: 18px; }
.bloco { margin: 26px 0; }
.bloco-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; font: 800 1.5rem var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
.bloco-titulo small { font: 500 .8rem var(--dado); color: var(--suave); text-transform: none; letter-spacing: 0; }
.nota { color: var(--suave); font-size: .88rem; }
.nota-fonte { font: 500 .78rem var(--dado); color: var(--suave); }
.vazio { padding: 22px; border: 1px dashed var(--linha); border-radius: var(--raio); color: var(--suave); text-align: center; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 18px; }
.chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linha); background: var(--painel); color: var(--suave); cursor: pointer; font-weight: 600; font-size: .9rem; transition: transform .15s, background .2s, color .2s; }
.chip:hover { color: var(--texto); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--limao); color: var(--limao-escuro); border-color: var(--limao); }
.busca { flex: 1 1 200px; max-width: 320px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto); }

/* Cartões que inclinam e brilham seguindo o mouse */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
@media (max-width: 560px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cartao { padding: 10px; } .cartao h3 { font-size: 1.05rem; } .cartao p { display: none; } .fav { width: 30px; height: 30px; } }
.grade.larga { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cartao { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border-radius: var(--raio); background: linear-gradient(160deg, var(--painel-2), var(--painel)); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; cursor: pointer; transform-style: preserve-3d; transition: transform .25s ease, border-color .25s, box-shadow .25s; overflow: hidden; text-align: left; }
.cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 45%); opacity: 0; transition: opacity .25s; }
.cartao:hover, .cartao:focus-visible { border-color: var(--cena-a); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--cena-a) 40%, transparent); }
.cartao:hover::after { opacity: 1; }
.cartao-arte { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--raio-p); background: var(--fundo-2); overflow: hidden; }
.cartao-arte svg { width: 100%; height: 100%; }
.cartao h3 { margin: 4px 0 0; font: 800 1.25rem/1.05 var(--titulo); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.cartao p { margin: 0; color: var(--suave); font-size: .88rem; }
.selos { display: flex; flex-wrap: wrap; gap: 5px; }
.selo { padding: 2px 8px; border-radius: 999px; font: 600 .72rem var(--dado); background: #0e140c; border: 1px solid var(--linha); color: var(--suave); }
.selo.jogo { color: #0b0f0a; border: 0; }
.fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(11,15,10,.8); color: var(--suave); cursor: pointer; font-size: 1rem; }
.fav[aria-pressed="true"] { color: var(--ambar); border-color: var(--ambar); }
/* Animações diferentes ao passar o mouse em cada página */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  body[data-secao="armas"] .cartao:hover .cartao-arte svg { animation: recuo .45s ease; }
  body[data-secao="operadores"] .cartao:hover .cartao-arte svg { animation: gira-y .7s ease; }
  body[data-secao="mapas"] .cartao:hover .cartao-arte svg { transform: scale(1.08); transition: transform .6s ease; }
  body[data-secao="noticias"] .cartao:hover h3 { color: var(--limao); }
  body[data-secao="videos"] .cartao:hover .play { transform: scale(1.18); }
  body[data-secao=""] .atalho:hover .atalho-ico { animation: quica .5s ease; }
}
@keyframes recuo { 30% { transform: translateX(-6px); } 60% { transform: translateX(3px); } }
@keyframes gira-y { 50% { transform: rotateY(25deg) scale(1.04); } }
@keyframes quica { 40% { transform: translateY(-8px) rotate(-8deg); } }

/* Carrossel de banners animados */
.carrossel { position: relative; margin-top: 18px; border-radius: 24px; overflow: hidden; border: 1px solid var(--linha); background: var(--fundo-2); }
.carrossel-faixa { display: flex; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.banner { position: relative; flex: 0 0 100%; min-height: clamp(260px, 38vw, 420px); display: grid; align-content: end; gap: 8px; padding: clamp(18px, 4vw, 44px); overflow: hidden; color: var(--texto); text-decoration: none; }
.banner-arte { position: absolute; inset: 0; z-index: 0; }
.banner-arte svg { width: 100%; height: 100%; }
.banner > :not(.banner-arte) { position: relative; z-index: 1; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(6,9,5,.92) 8%, rgba(6,9,5,.35) 55%, transparent); }
.banner-rotulo { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--limao); color: var(--limao-escuro); font: 800 .82rem var(--titulo); text-transform: uppercase; letter-spacing: .08em; }
.banner h2 { margin: 0; font: 800 clamp(1.8rem, 5.6vw, 3.8rem)/.95 var(--titulo); text-transform: uppercase; max-width: 18ch; }
.banner p { margin: 0; max-width: 60ch; color: #d3dccb; }
.contagem { display: flex; gap: 8px; flex-wrap: wrap; font: 500 .8rem var(--dado); }
.contagem span { display: grid; min-width: 62px; padding: 6px 10px; border-radius: 12px; background: rgba(11,15,10,.75); border: 1px solid var(--linha); text-align: center; }
.contagem b { font: 800 1.6rem/1 var(--titulo); color: var(--ambar); }
.carrossel-ctrl { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 8px; align-items: center; }
.carrossel-ctrl button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(11,15,10,.8); color: var(--texto); cursor: pointer; }
.pontos { display: flex; gap: 6px; }
.pontos button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: #50604a; cursor: pointer; }
.pontos button[aria-current="true"] { background: var(--limao); width: 24px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .banner .anima-1 { animation: desliza 14s ease-in-out infinite alternate; }
  .banner .anima-2 { animation: pulsa 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  .banner .anima-3 { animation: varre 6s linear infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes desliza { to { transform: translateX(-60px); } }
@keyframes pulsa { 50% { opacity: .35; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .carrossel-faixa { transition: none; } }

/* Atalhos e destaques */
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.atalho { display: grid; gap: 4px; justify-items: start; padding: 14px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; font: 800 1.05rem var(--titulo); text-transform: uppercase; }
.atalho-ico { font-size: 1.5rem; }
.atalho small { font: 500 .78rem var(--dado); color: var(--suave); text-transform: none; }

/* Notícias e reações */
.noticia time { font: 500 .78rem var(--dado); color: var(--ambar); }
.reacoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reacao { display: inline-flex; gap: 4px; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--linha); background: #0e140c; color: var(--suave); cursor: pointer; font-size: .82rem; }
.reacao[aria-pressed="true"] { border-color: var(--limao); color: var(--texto); background: #22311b; }
.ler-mais { font-weight: 700; }

/* Calendário e linha do tempo */
.evento { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--linha); margin-bottom: 10px; }
.evento-data { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 16px; background: var(--fundo-2); border: 1px solid var(--linha); font: 800 1.6rem/1 var(--titulo); text-align: center; }
.evento-data small { font: 600 .68rem var(--dado); color: var(--suave); text-transform: uppercase; }
.evento h3 { margin: 0; font: 800 1.15rem var(--titulo); text-transform: uppercase; }
.evento .contagem { margin-top: 6px; }
.evento .contagem b { font-size: 1.15rem; }
.evento.passado { opacity: .7; }
.linha { position: relative; padding-left: 26px; border-left: 3px solid var(--linha); }
.linha-ano { position: relative; margin: 6px 0 10px -8px; font: 800 1.5rem/1 var(--titulo); color: var(--cena-a); letter-spacing: .04em; }
.linha-ano::before { content: ""; position: absolute; left: -26px; top: 50%; width: 18px; height: 3px; background: var(--cena-a); }
.linha-item { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--raio-p); overflow: visible; }
.linha-item::before { content: ""; position: absolute; left: -35px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--limao); box-shadow: 0 0 0 4px var(--fundo); transition: transform .25s, background .25s; }
.linha-item[data-familia="bo"]::before { background: #ffb02e; }
.linha-item[data-familia="warzone"]::before { background: #4fd1ff; }
.linha-item[data-familia="mobile"]::before { background: #c39bff; }
.linha-item[data-familia="guerra"]::before, .linha-item[data-familia="classico"]::before { background: #ff6a4d; }
.linha-item:target { border-color: var(--cena-a); }
.linha-item h3 { margin: 0; font: 800 1.1rem var(--titulo); text-transform: uppercase; }
.linha-item p, .cartao.linha-item p { display: block; margin: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  body[data-secao="linha-do-tempo"] .linha-item:hover::before { transform: scale(1.5); animation: pulsa 1s ease infinite; }
}
.linha-item b { font: 800 1.15rem var(--titulo); text-transform: uppercase; }

/* Vídeos */
.video-capa { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--raio-p); background: #000 center / cover; overflow: hidden; }
.play { width: 58px; height: 58px; border-radius: 50%; background: rgba(11,15,10,.8); border: 2px solid var(--limao); display: grid; place-items: center; color: var(--limao); font-size: 1.4rem; transition: transform .25s; }
.reprodutor { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio-p); overflow: hidden; background: #000; }
.reprodutor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Janela de detalhes */
.janela { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.janela[hidden] { display: none; }
.janela-fundo { position: absolute; inset: 0; background: rgba(3,5,3,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.janela-caixa { position: relative; width: min(980px, 100%); max-height: min(88vh, 900px); overflow: auto; border-radius: 24px; background: linear-gradient(170deg, #1d2a19, #10170e 60%); border: 1px solid var(--linha); box-shadow: 0 30px 90px rgba(0,0,0,.6); outline: none; }
.janela-fechar { position: sticky; float: right; top: 10px; margin: 10px 10px 0 0; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); cursor: pointer; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .janela:not([hidden]) .janela-caixa { animation: abre .38s cubic-bezier(.2,.9,.25,1.2); }
  .janela:not([hidden]) .janela-fundo { animation: esmaece .3s ease; }
  .det-arte svg { animation: respira 6s ease-in-out infinite; }
}
@keyframes abre { from { opacity: 0; transform: translateY(24px) scale(.92); } }
@keyframes esmaece { from { opacity: 0; } }
@keyframes respira { 50% { transform: scale(1.04); } }
.det-topo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; padding: 22px; }
@media (max-width: 720px) { .det-topo { grid-template-columns: 1fr; } }
.det-arte { border-radius: 18px; overflow: hidden; background: var(--fundo-2); aspect-ratio: 16 / 10; }
.det-arte svg { width: 100%; height: 100%; }
.det-topo h2 { margin: 6px 0; font: 800 clamp(1.8rem, 5vw, 2.8rem)/1 var(--titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.det-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.botao { display: inline-flex; gap: 6px; align-items: center; padding: 9px 15px; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel); color: var(--texto); cursor: pointer; font-weight: 700; text-decoration: none; }
.botao.forte { background: var(--limao); color: var(--limao-escuro); border-color: var(--limao); }
.botao[aria-pressed="true"] { border-color: var(--ambar); color: var(--ambar); }
.abas { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.aba { padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--suave); cursor: pointer; font: 800 1rem var(--titulo); text-transform: uppercase; white-space: nowrap; }
.aba[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--limao); }
.painel-aba { padding: 18px 22px 24px; }
.painel-aba[hidden] { display: none; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dl dt { color: var(--suave); font: 500 .85rem var(--dado); }
.dl dd { margin: 0; }
.locais { display: flex; flex-wrap: wrap; gap: 6px; }

/* Jogos rápidos */
.quiz { max-width: 720px; padding: 18px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--linha); }
.quiz h3 { margin: 0 0 10px; font: 800 1.3rem var(--titulo); text-transform: uppercase; }
.opcoes { display: grid; gap: 8px; }
.opcao { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto); text-align: left; cursor: pointer; font-weight: 600; }
.opcao:hover { border-color: var(--limao); }
.opcao.certa { border-color: var(--limao); background: #263a18; }
.opcao.errada { border-color: var(--vermelho); background: #3a1d17; }
.barra { height: 10px; border-radius: 6px; background: var(--fundo-2); overflow: hidden; border: 1px solid var(--linha); }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--limao), var(--ambar)); transition: width .6s ease; }
.letras { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; font: 800 1.4rem var(--titulo); }
.letras span { display: grid; place-items: center; min-width: 34px; height: 42px; padding: 0 6px; border-radius: 8px; background: var(--fundo-2); border: 1px solid var(--linha); }

/* Rodapé */
.rodape { padding: 26px var(--margem) calc(30px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linha); background: #070a06; color: var(--suave); font-size: .86rem; }
.rodape p { max-width: 90ch; }
.classificacao { font-weight: 700; color: var(--ambar); }

/* Janela de saída para parceiros (desligada até o Vitor decidir) */
.saida p { margin: 0 0 12px; }

/* Mapa interativo desenhado por nós (esquema com posições aproximadas) */
.mapa-int { display: grid; gap: 12px; }
.mapa-palco { position: relative; width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--linha); background: #0b0f0a; }
.mapa-svg { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapa-svg:active { cursor: grabbing; }
.mapa-grade line { stroke: #b5d96a; stroke-opacity: .08; stroke-width: calc(1px / var(--zoom, 1)); }
.mapa-lado-nk { fill: #ff6a4d; fill-opacity: .06; }
.mapa-fronteira { fill: none; stroke: #ff6a4d; stroke-opacity: .55; stroke-width: 3; stroke-dasharray: 10 8; }
.mapa-cidade { fill: #4fd1ff; fill-opacity: .05; stroke: #4fd1ff; stroke-opacity: .4; stroke-width: 2; stroke-dasharray: 6 6; }
.mapa-regiao { fill: var(--suave); font: 700 15px var(--dado); letter-spacing: .06em; text-transform: uppercase; }
.mapa-bussola circle { fill: #0e140c; stroke: var(--linha); stroke-width: 2; }
.mapa-bussola path { fill: var(--limao); }
.mapa-bussola text { fill: var(--limao); font: 800 16px var(--titulo); }
.mapa-local { cursor: pointer; outline: none; }
.mapa-ponto { fill: var(--limao); stroke: #0b0f0a; stroke-width: 3; transition: fill .2s; }
.mapa-pulso { fill: none; stroke: var(--limao); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; }
.mapa-rotulo-fundo { fill: rgba(11,15,10,.86); stroke: var(--linha); stroke-width: 1.5; transition: stroke .2s, fill .2s; }
.mapa-rotulo { fill: var(--texto); font: 700 15px var(--corpo, system-ui); pointer-events: none; }
.mapa-local:hover .mapa-rotulo-fundo, .mapa-local:focus-visible .mapa-rotulo-fundo { stroke: var(--limao); }
.mapa-local.ativo .mapa-ponto { fill: #ffb02e; }
.mapa-local.ativo .mapa-rotulo-fundo { fill: #2a2410; stroke: #ffb02e; }
.mapa-ctrl { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapa-ctrl .botao { width: 42px; height: 42px; justify-content: center; padding: 0; font-size: 1.2rem; background: rgba(11,15,10,.86); }
.mapa-info { padding: 12px 14px; border-radius: var(--raio-p); background: var(--painel); border: 1px solid var(--linha); min-height: 64px; }
.mapa-info h3 { margin: 0 0 4px; font: 800 1.1rem var(--titulo); text-transform: uppercase; color: var(--limao); }
.mapa-info p { margin: 4px 0; }
.mapa-lista { margin: 0; }
.mapa-lista .chip.ativo { background: var(--limao); color: #1a2406; }
.mapa-sem summary { cursor: pointer; color: var(--suave); font-weight: 700; }
.mapa-sem .locais { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .mapa-svg { transition: none; }
  .mapa-pulso { animation: mapa-sonar 2.4s ease-out infinite; }
  .mapa-local.ativo .mapa-pulso { stroke: #ffb02e; animation-duration: 1.2s; }
}
@keyframes mapa-sonar { from { transform: scale(.6); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }

/* Cartão para stories */
.stories { max-width: none; }
.stories-corpo { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.stories canvas { width: min(270px, 100%); height: auto; aspect-ratio: 9 / 16; border-radius: var(--raio); border: 1px solid var(--linha); box-shadow: 0 10px 40px rgba(0,0,0,.45); transition: transform .35s ease, box-shadow .35s ease; }
.stories canvas:hover { transform: rotate(-2deg) scale(1.02); box-shadow: 0 16px 50px rgba(181,217,106,.25); }
.stories-acoes { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 200px; }
@media (prefers-reduced-motion: reduce) { .stories canvas, .stories canvas:hover { transition: none; transform: none; } }
/* Aplicativo instalável: botão no rodapé (só aparece quando o navegador deixa ou no iPhone) */
.instalar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.instalar-nota { flex: 1 1 260px; color: var(--texto); background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 8px 12px; }
@media (prefers-reduced-motion: no-preference) {
  .instalar .botao { transition: transform .2s ease, box-shadow .2s ease; }
  .instalar .botao:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(181, 217, 106, .25), 0 0 18px rgba(181, 217, 106, .35); }
}

/* Bingo da semana: cartela 5 × 5 */
.quiz.bingo { max-width: 860px; }
.bingo-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; margin: 12px 0; }
.bingo-casa { position: relative; min-height: 104px; min-width: 0; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto); font: 600 .8rem/1.2 inherit; font-family: inherit; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; cursor: pointer; display: grid; place-items: center; text-align: center; }
.bingo-casa[aria-pressed="true"] { background: #263a18; border-color: var(--limao); color: #eef7dc; }
.bingo-casa[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--limao); box-shadow: 0 0 8px var(--limao); }
.bingo-casa.livre { background: radial-gradient(circle, #2f4520, #182412); border-color: var(--ambar); color: var(--ambar); font-weight: 800; text-transform: uppercase; cursor: default; }
.bingo-casa.livre::after { display: none; }
.bingo-casa.linha { border-color: var(--ambar); box-shadow: inset 0 0 0 1px var(--ambar); }
.bingo-casa:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.bingo-placar { margin: 6px 0; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .bingo-grade { gap: 4px; } .bingo-casa { min-height: 72px; padding: 8px 2px; font-size: .6rem; border-radius: 9px; } }
@media (prefers-reduced-motion: no-preference) {
  .bingo-casa { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .bingo-casa:not(.livre):hover { transform: perspective(300px) rotateX(8deg) scale(1.05); border-color: var(--limao); box-shadow: 0 6px 18px rgba(181, 217, 106, .25); z-index: 1; }
  .bingo-casa[aria-pressed="true"]::after { animation: bingo-bip 1.6s ease-out infinite; }
  .bingo-casa.linha { animation: bingo-linha 2.4s ease-in-out infinite; }
}
@keyframes bingo-bip { 0% { box-shadow: 0 0 0 0 rgba(181, 217, 106, .7); } 100% { box-shadow: 0 0 0 10px rgba(181, 217, 106, 0); } }
@keyframes bingo-linha { 50% { box-shadow: inset 0 0 0 1px var(--ambar), 0 0 14px rgba(255, 176, 46, .35); } }
/* Estatísticas: números e barras próprias, contados com os dados do site. */
body[data-secao="estatisticas"] { --cena-a: #ffb02e; --cena-b: #c39bff; }
.estat-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.estat-numero { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--raio-p); background: linear-gradient(160deg, var(--painel-2), var(--painel)); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; transition: border-color .25s, transform .25s; min-width: 0; }
.estat-numero b { font: 800 2.2rem/1 var(--titulo); color: var(--limao); }
.estat-numero span { color: var(--suave); font-size: .88rem; overflow-wrap: anywhere; }
.estat-numero:hover, .estat-numero:focus-visible { border-color: var(--cena-a); }
.estat-grade { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.cartao.estat { cursor: default; overflow: visible; gap: 10px; scroll-margin-top: 90px; }
.cartao.estat:target { border-color: var(--cena-a); }
.estat-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.estat-cab h2 { margin: 0; font: 800 1.2rem/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.estat-cab h2 small { color: var(--suave); font: 500 .9rem var(--dado); margin-left: 4px; }
.estat-link { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--linha); color: var(--suave); text-decoration: none; font: 700 1rem var(--dado); }
.estat-link:hover, .estat-link:focus-visible { color: var(--limao); border-color: var(--limao); }
.barras { display: grid; gap: 4px; flex: none; }
.barras .barra { flex: none; height: auto; min-height: 34px; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 2.6em; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-align: left; cursor: pointer; }
.barras .barra:hover, .barras .barra:focus-visible { background: rgba(181, 217, 106, .08); outline: none; }
.barras .barra:focus-visible { box-shadow: 0 0 0 2px var(--limao); }
.barra-rot { font-size: .88rem; color: var(--suave); overflow-wrap: anywhere; line-height: 1.25; }
.barras .barra:hover .barra-rot, .barras .barra:focus-visible .barra-rot { color: var(--texto); }
.barra-trilho { position: relative; height: 12px; border-radius: 0 6px 6px 0; background: rgba(255, 255, 255, .04); overflow: hidden; }
.barra-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); min-width: 3px; border-radius: 0 4px 4px 0; background: var(--limao); transition: width .7s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.barra-fill.cresce { width: 0; transition: none; }
.barra-num { font: 600 .95rem var(--dado); text-align: right; color: var(--texto); }
.estat-tabela summary { cursor: pointer; color: var(--suave); font-size: .88rem; }
.estat-tabela table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .88rem; }
.estat-tabela th, .estat-tabela td { padding: 5px 6px; border-bottom: 1px solid var(--linha); text-align: left; overflow-wrap: anywhere; }
.estat-tabela td:not(:first-child), .estat-tabela th:not(:first-child) { text-align: right; font-family: var(--dado); white-space: nowrap; }
.estat-dica { position: fixed; left: 0; top: 0; z-index: 60; max-width: 280px; padding: 6px 10px; border-radius: 10px; background: #0b0f0a; border: 1px solid var(--limao); color: var(--texto); font-size: .85rem; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.estat-itens { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.estat-itens li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--painel-2); border: 1px solid var(--linha); }
@media (max-width: 560px) { .barras .barra { grid-template-columns: minmax(0, 1fr) 2.4em; gap: 4px 8px; } .barra-rot { grid-column: 1 / -1; } .estat-numero b { font-size: 1.8rem; } }
/* Animação própria desta página ao passar o mouse: um brilho de radar varre a barra. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .barra-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); }
  body[data-secao="estatisticas"] .barra:hover .barra-fill::after { animation: varre-barra .8s ease; }
  body[data-secao="estatisticas"] .estat-numero:hover { transform: translateY(-3px); }
}
@keyframes varre-barra { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .barra-fill { transition: none; } }
.cartao.estat p { display: block; margin: 0; }

/* Adivinhe o mapa */
.pistas-mapa { margin: 10px 0 14px; padding-left: 1.4em; display: grid; gap: 6px; }
.pistas-mapa li { padding: 8px 12px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--linha); }
.pistas-mapa li::marker { color: var(--limao); font-weight: 800; }
.opcoes-mapa .opcao small { display: block; color: var(--suave); font-weight: 500; font-size: .78rem; }
@media (prefers-reduced-motion: no-preference) {
  .pistas-mapa li { animation: pista-entra .35s ease-out both; }
  .opcoes-mapa .opcao { transition: transform .18s ease, border-color .18s ease; }
  .opcoes-mapa .opcao:not(:disabled):hover { transform: translateX(4px); }
}
@keyframes pista-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Blog: lista de artigos e artigo longo (o texto vem do servidor, dentro de .ssr .artigo). */
body[data-secao="blog"] { --cena-a: #4fd1ff; --cena-b: #ffb02e; }
.artigo-cartao { text-decoration: none; color: var(--texto); padding: 0; overflow: hidden; }
.artigo-arte { display: block; width: 100%; height: auto; aspect-ratio: 300 / 140; background: radial-gradient(circle at 50% 50%, rgba(79, 209, 255, .14), transparent 70%), var(--painel-2); border-bottom: 1px solid var(--linha); }
.artigo-varre { transform-origin: 150px 70px; }
.artigo-cartao-txt { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.artigo-cartao h3 { margin: 0; font: 800 1.3rem/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.artigo-cartao p { margin: 0; color: var(--suave); font-size: .92rem; }
.artigo-cartao time { font: 500 .8rem var(--dado); color: var(--suave); }
.ssr .artigo { margin-top: 14px; max-width: 76ch; }
.ssr .artigo p, .ssr .artigo li { color: var(--texto); font-size: 1.04rem; line-height: 1.7; }
.ssr .artigo .artigo-corpo p { margin: 0 0 14px; }
.ssr .artigo h2 { margin: 28px 0 10px; font: 800 1.45rem/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .02em; color: var(--limao); scroll-margin-top: 90px; }
.ssr .artigo ul, .ssr .artigo ol { padding-left: 22px; margin: 0 0 14px; }
.ssr .artigo li { margin-bottom: 6px; }
.ssr .artigo .artigo-meta { font: 500 .82rem var(--dado); color: var(--suave); margin-bottom: 10px; }
.artigo-fontes li, .artigo-veja li { font-size: .95rem !important; overflow-wrap: anywhere; }
.artigo-sumario { margin: 8px 0 18px; padding: 14px 18px; border-radius: var(--raio-p); border: 1px solid var(--linha); background: linear-gradient(160deg, var(--painel-2), var(--painel)); }
.artigo-sumario strong { font: 800 1rem var(--titulo); text-transform: uppercase; letter-spacing: .04em; }
.artigo-sumario ol { margin: 6px 0 0 !important; columns: 2 220px; }
.artigo-sumario li { font-size: .92rem !important; line-height: 1.4 !important; break-inside: avoid; }
.artigo-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.leitura { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 50; pointer-events: none; }
.leitura i { display: block; height: 100%; background: linear-gradient(90deg, var(--limao), var(--ciano)); transform: scaleX(0); transform-origin: left; }
/* Animação própria desta página ao passar o mouse: a varredura do radar gira na arte do artigo. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  body[data-secao="blog"] .artigo-cartao:hover .artigo-varre { animation: gira-varre 1.6s linear infinite; }
  body[data-secao="blog"] .artigo-cartao:hover h3 { color: var(--ciano); }
}
@keyframes gira-varre { to { transform: rotate(360deg); } }

/* Busca geral: caixa grande com radar, resultados agrupados por tipo. */
body[data-secao="busca"] { --cena-a: #4fd1ff; --cena-b: #b5d96a; }
#menu a[data-sec="busca"]::before { content: "⌕"; margin-right: .3em; }
.busca-geral { position: relative; display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; padding: 8px 8px 8px 52px; border-radius: 999px; border: 1px solid var(--linha); background: linear-gradient(160deg, var(--painel-2), var(--painel)); }
.busca-geral:focus-within { border-color: var(--cena-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cena-a) 25%, transparent); }
.busca-geral .busca { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 1.05rem; border: 0; background: transparent; padding: 8px 4px; }
.busca-geral .busca:focus { outline: none; }
.busca-geral .botao { flex: none; }
.busca-radar { position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 2px solid var(--cena-a); background: radial-gradient(circle, var(--cena-a) 0 2px, transparent 3px); overflow: hidden; }
.busca-radar::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, color-mix(in srgb, var(--cena-a) 70%, transparent), transparent 30%); border-radius: 50%; }
.busca-sugestoes { margin-top: 6px; }
.busca-grupo > .botao { margin-top: 10px; }
.busca-linhas { display: grid; gap: 8px; }
.busca-linha { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--raio-p, 14px); border: 1px solid var(--linha); background: var(--painel); color: var(--texto); text-decoration: none; overflow: hidden; }
.busca-linha b { font-weight: 600; overflow-wrap: anywhere; }
.busca-linha small { color: var(--suave); font-family: var(--dado); white-space: nowrap; }
.busca-tipo { padding: 2px 8px; border-radius: 999px; background: var(--painel-2); border: 1px solid var(--linha); color: var(--cena-a); font: 600 .78rem var(--dado); white-space: nowrap; }
.busca-linha:hover, .busca-linha:focus-visible { border-color: var(--cena-a); }
@media (max-width: 560px) { .busca-geral { padding-left: 44px; } .busca-radar { left: 10px; } .busca-linha { grid-template-columns: minmax(0, 1fr) auto; } .busca-tipo { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: no-preference) {
  .busca-radar::after { animation: gira-varre 2.4s linear infinite; }
  .busca-geral:focus-within .busca-radar::after { animation-duration: .9s; }
}
/* Animação própria desta página ao passar o mouse: um "bip" de radar se espalha a partir do resultado. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .busca-linha::before { content: ""; position: absolute; left: 22px; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: color-mix(in srgb, var(--cena-a) 45%, transparent); opacity: 0; pointer-events: none; }
  .busca-linha:hover::before { animation: busca-bip .7s ease-out; }
  .busca-linha:hover { transform: translateX(4px); transition: transform .2s ease; }
  body[data-secao="busca"] .cartao:hover .cartao-arte { animation: busca-foco .6s ease; }
}
@keyframes busca-bip { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(40); } }
@keyframes busca-foco { 40% { filter: drop-shadow(0 0 10px var(--cena-a)) brightness(1.2); } }

/* Comparador de armas: colunas lado a lado; linhas que mudam ficam em destaque. */
body[data-secao="comparar"] { --cena-a: #ffb02e; --cena-b: #ff6a4d; }
.comparar-escolha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.comparar-slot { display: grid; gap: 4px; min-width: 0; color: var(--suave); font-size: .85rem; }
.comparar-slot select { width: 100%; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto); font: inherit; font-size: .95rem; }
.comparar-slot select:focus-visible { outline: 2px solid var(--cena-a); }
.comparar-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.comparar-tabela { display: grid; gap: 6px; min-width: calc(140px + var(--cols) * 170px); }
.comparar-linha { display: grid; grid-template-columns: 160px repeat(var(--cols), minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.comparar-linha:not(.comparar-topo) { padding: 8px 10px; border-radius: var(--raio-p); background: var(--painel); border: 1px solid var(--linha); }
.comparar-linha.difere { border-color: color-mix(in srgb, var(--cena-a) 55%, var(--linha)); background: linear-gradient(90deg, color-mix(in srgb, var(--cena-a) 10%, var(--painel)), var(--painel)); }
.comparar-rot { color: var(--suave); font-size: .88rem; display: flex; align-items: center; gap: 6px; }
.comparar-dif { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cena-a); color: #0b0f0a; font: 800 .8rem var(--dado); }
.comparar-val { overflow-wrap: anywhere; font-size: .95rem; }
.comparar-cab h3 { font-size: 1.05rem; }
@media (max-width: 760px) { .comparar-escolha { grid-template-columns: minmax(0, 1fr); } .comparar-linha:not(.comparar-topo) .comparar-rot { position: sticky; left: -10px; z-index: 1; margin-left: -10px; padding-left: 10px; background: var(--painel); } .comparar-linha { grid-template-columns: 110px repeat(var(--cols), minmax(0, 1fr)); } .comparar-tabela { min-width: calc(110px + var(--cols) * 140px); } }
/* Animação própria desta página ao passar o mouse: a linha "trava a mira" e os valores se alinham. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .comparar-linha:not(.comparar-topo) { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
  .comparar-linha:not(.comparar-topo):hover { transform: scale(1.01); box-shadow: 0 0 0 1px var(--cena-a), 0 6px 18px rgba(0, 0, 0, .35); }
  .comparar-linha:not(.comparar-topo):hover .comparar-val { animation: comparar-trava .45s ease; }
  .comparar-linha:not(.comparar-topo):hover .comparar-val:nth-child(3) { animation-delay: .06s; }
  .comparar-linha:not(.comparar-topo):hover .comparar-val:nth-child(4) { animation-delay: .12s; }
}
@keyframes comparar-trava { 0% { opacity: .4; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }

/* Jogue com segurança: tópicos em cartões com escudo; ao passar o mouse, um anel de proteção pulsa em volta do ícone. */
body[data-secao="seguranca"] { --cena-a: #6ee7a8; --cena-b: #4fd1ff; }
#menu a[data-sec="seguranca"]::before { content: "⛨"; margin-right: .3em; }
.seg-indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.seg-grade { align-items: start; }
.seg-cartao { padding: 18px; scroll-margin-top: 90px; min-width: 0; }
.seg-cartao:target, .seg-cartao:focus { border-color: var(--cena-a); outline: none; }
.seg-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.seg-topo h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.seg-icone { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--cena-a) 18%, var(--painel-2)); border: 1px solid var(--cena-a); color: var(--cena-a); font: 800 1rem var(--dado); }
.seg-cartao ul { margin: 0 0 10px; padding-left: 1.2em; display: grid; gap: 6px; }
.seg-cartao li { overflow-wrap: anywhere; }
.seg-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.seg-fontes .nota-fonte { margin: 2px 0; overflow-wrap: anywhere; }
.seg-copiar { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .seg-icone::after { content: ""; position: absolute; inset: -4px; border-radius: 18px; border: 2px solid var(--cena-a); opacity: 0; pointer-events: none; }
  .seg-cartao:hover .seg-icone::after { animation: seg-escudo 1s ease-out infinite; }
  .seg-cartao:hover .seg-icone { transform: rotate(-6deg) scale(1.06); transition: transform .25s ease; }
}
@keyframes seg-escudo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
/* Glossário: termos em cartões com âncora própria. */
body[data-secao="glossario"] { --cena-a: #c9a5ff; --cena-b: #4fd1ff; }
.glossario { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.cartao.glossario-termo { cursor: default; gap: 8px; scroll-margin-top: 100px; }
.glossario-termo h2 { margin: 0; font: 800 1.15rem/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.cartao.glossario-termo p { display: block; margin: 0; color: var(--texto); -webkit-line-clamp: unset; overflow: visible; }
.glossario-ancora { color: var(--cena-a); text-decoration: none; font-family: var(--dado); }
.glossario-assuntos { flex-wrap: wrap; gap: 8px; }
.chip-conta { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--cena-a) 22%, transparent); font: 700 .78rem/1.5 var(--dado); text-align: center; }
.chip[aria-pressed="true"] .chip-conta { background: rgba(0, 0, 0, .18); }
.glossario-assunto { align-self: flex-start; padding: 2px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cena-b) 55%, transparent); color: var(--cena-b); font: 700 .74rem/1.6 var(--dado); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.glossario-assunto:hover, .glossario-assunto:focus-visible { background: color-mix(in srgb, var(--cena-b) 18%, transparent); }
.glossario-termo[data-assunto="warzone"] { --cena-b: #ffb547; }
.glossario-termo[data-assunto="armas"] { --cena-b: #b5d96a; }
.glossario-termo[data-assunto="progressao"] { --cena-b: #ff7ab8; }
.glossario-termo[data-assunto="mobile"] { --cena-b: #7ef0c8; }
.glossario-termo[data-assunto="pc"] { --cena-b: #8fb8ff; }
.glossario-termo[data-assunto="dmz"] { --cena-b: #c9a2ff; }
.glossario-termo.alvo, .glossario-termo:target { border-color: var(--cena-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cena-a) 40%, transparent); }
/* Animação própria desta página ao passar o mouse: o termo "acende" como um marca-texto. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .glossario-termo h2 { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--cena-a) 35%, transparent) 62%) no-repeat 0 0 / 0% 100%; transition: background-size .45s ease; }
  .glossario-termo:hover h2 { background-size: 100% 100%; }
}
/* Atualizações por nota oficial: trilha vertical com um ponto de radar por nota, itens que recebem uma varredura ao passar o mouse. */
body[data-secao="atualizacoes"] { --cena-a: #c9a5ff; --cena-b: #b5d96a; }
.atu-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.atu-resumo .estat-numero { padding: 12px 14px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--linha); display: grid; gap: 2px; min-width: 0; }
.atu-resumo .estat-numero b { font: 800 1.7rem var(--dado); color: var(--cena-a); }
.atu-resumo .estat-numero span { color: var(--suave); font-size: .85rem; overflow-wrap: anywhere; }
.atu-trilha { position: relative; padding-left: 26px; }
.atu-trilha::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--cena-a), var(--cena-b) 70%, transparent); opacity: .6; }
.atu-nota { position: relative; scroll-margin-top: 90px; border-radius: var(--raio); }
.atu-ponto { position: absolute; left: -24px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--cena-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cena-a) 25%, transparent); }
.atu-data { margin: 0 0 4px; font: 600 .82rem var(--dado); color: var(--suave); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.atu-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.atu-nota.atu-destaque .atu-cab { outline: 2px solid var(--cena-a); outline-offset: 6px; border-radius: var(--raio-p); }
.atu-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.atu-item { flex-direction: row; align-items: flex-start; gap: 12px; }
.atu-item .cartao-arte { flex: 0 0 84px; width: 84px; }
.atu-item-txt { min-width: 0; display: grid; gap: 4px; }
.atu-item-txt h3 { font-size: 1rem; margin: 0; }
.atu-item-txt p { margin: 0; font-size: .9rem; color: var(--suave); overflow-wrap: anywhere; }
@media (max-width: 560px) { .atu-resumo .estat-numero b { font-size: 1.3rem; } .atu-trilha { padding-left: 20px; } .atu-ponto { left: -18px; } .atu-trilha::before { left: 5px; } .atu-item .cartao-arte { flex-basis: 64px; width: 64px; } .atu-item .atu-item-txt p { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .atu-ponto { animation: atu-pulso 2.4s ease-out infinite; }
  .atu-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--cena-a) 22%, transparent) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
  .atu-item:hover::before, .atu-item:focus-visible::before { animation: atu-varre .7s ease; }
  .atu-item:hover .atu-item-txt p { color: var(--texto); transition: color .3s; }
  .atu-nota.atu-destaque .atu-ponto { animation-duration: 1s; }
}
@keyframes atu-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cena-a) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes atu-varre { to { transform: translateX(110%); } }
/* Temporadas: cada temporada ganha um mostrador próprio (um traço por item que chegou); ao passar o mouse o anel gira como um ponteiro de relógio e os números sobem. */
body[data-secao="temporadas"] { --cena-a: #ffb02e; --cena-b: #4fd1ff; }
.js .ssr-temporada { display: none; }
.temp-lista { margin-top: 6px; }
.cartao.temp-cartao { flex-direction: row; align-items: center; gap: 14px; }
.temp-arte { flex: 0 0 92px; width: 92px; height: 92px; }
.temp-arte text { font-family: var(--dado); }
.temp-cartao-txt, .temp-cab-txt { min-width: 0; display: grid; gap: 6px; }
.temp-cartao-txt h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.temp-data { margin: 0; font: 600 .82rem var(--dado); color: var(--suave); }
.temp-numeros { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .85rem; color: var(--suave); }
.temp-numeros b { color: var(--cena-a); font-family: var(--dado); }
.temp-sit.temp-futura { background: color-mix(in srgb, var(--cena-b) 25%, transparent); }
.temp-sit.temp-recente { background: color-mix(in srgb, var(--cena-a) 30%, transparent); }
.temp-cab { display: flex; gap: 18px; align-items: center; padding: 16px; margin: 10px 0 6px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--linha); }
.temp-cab .temp-arte { flex-basis: 120px; width: 120px; height: 120px; }
.temp-nav { margin-top: 4px; }
.temp-num { display: grid; gap: 0; min-width: 74px; padding: 8px 10px; border-radius: var(--raio-p); border: 1px solid var(--linha); text-decoration: none; color: var(--texto); background: color-mix(in srgb, var(--cena-a) 8%, transparent); }
.temp-num b { font-size: 1.4rem; }
.temp-num span { font-size: .78rem; color: var(--suave); }
.temp-num:hover, .temp-num:focus-visible { border-color: var(--cena-a); }
.temp-bloco { scroll-margin-top: 90px; }
.temp-vizinhas { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.temp-vizinhas .botao { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 560px) { .temp-cab { flex-direction: column; align-items: flex-start; } .temp-arte { flex-basis: 70px; width: 70px; height: 70px; } .temp-cab .temp-arte { width: 90px; height: 90px; } }
@media (prefers-reduced-motion: no-preference) {
  .temp-anel { transform-origin: 50px 50px; transform-box: view-box; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
  .temp-cartao:hover .temp-anel, .temp-cartao:focus-visible .temp-anel { transform: rotate(90deg); }
  .temp-cartao:hover .temp-numeros b, .temp-cartao:focus-visible .temp-numeros b { display: inline-block; animation: temp-sobe .5s ease both; }
  .temp-cab .temp-anel { animation: temp-gira 18s linear infinite; }
}
@keyframes temp-sobe { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes temp-gira { to { transform: rotate(360deg); } }

/* Novidades desde a última visita: radar que acha "contatos" novos */
.novidades { position: relative; border: 1px solid var(--linha); border-radius: 18px; padding: 16px 18px; background: radial-gradient(circle at 0% 0%, rgba(181, 217, 106, .14), transparent 55%), var(--painel); overflow: hidden; }
.nov-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nov-cabeca .bloco-titulo { margin: 0; flex: 1 1 220px; }
.nov-radar { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--limao); background: repeating-radial-gradient(circle, transparent 0 6px, rgba(181, 217, 106, .25) 6px 7px); overflow: hidden; }
.nov-radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(181, 217, 106, .7), transparent 25%); }
.nov-lista { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 8px; }
.nov-lista a { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px 10px 26px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; overflow: hidden; }
.nov-lista a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--limao); box-shadow: 0 0 8px var(--limao); }
.nov-lista a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(181, 217, 106, .18), transparent); transform: translateX(-100%); pointer-events: none; }
.nov-lista a:hover, .nov-lista a:focus-visible { border-color: var(--limao); }
.nov-tipo { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--fundo-2); color: var(--limao); }
.nov-tipo.nov-blog { color: var(--ciano); }
.nov-tipo.nov-nota { color: var(--ambar); }
.nov-lista time { color: var(--suave); font-size: .85rem; }
.nov-titulo { flex: 1 1 100%; font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 700px) { .nov-titulo { flex: 1 1 auto; } }
@media (prefers-reduced-motion: no-preference) {
  .nov-radar i { animation: nov-varrer 2.6s linear infinite; }
  .nov-lista li { animation: nov-entrar .5s ease both; animation-delay: calc(var(--i) * 70ms); }
  .nov-lista a::before { animation: nov-pulso 1.8s ease-in-out infinite; }
  .nov-lista a:hover::after, .nov-lista a:focus-visible::after { transition: transform .6s ease; transform: translateX(100%); }
  .nov-lista a { transition: transform .2s ease, border-color .2s ease; }
  .nov-lista a:hover { transform: translateX(4px); }
}
@keyframes nov-varrer { to { transform: rotate(360deg); } }
@keyframes nov-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nov-pulso { 50% { box-shadow: 0 0 0 5px rgba(181, 217, 106, .15); } }

/* Marcações da comunidade no mapa (src/marcacoes.js) */
.marc { cursor: pointer; outline: none; }
.marc circle { stroke: #0b0f0a; stroke-width: 3; }
.marc text { fill: #0b0f0a; font: 800 13px var(--titulo); pointer-events: none; }
.marc.equipe circle { stroke: #ffd21f; stroke-width: 4; }
.marc.minha circle { stroke: #ffffff; }
.marc:hover circle, .marc:focus-visible circle { stroke: #ffffff; stroke-width: 5; }
.marc.pend circle { fill: none; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 5 4; }
.marc.pend text { fill: #ffffff; }
.mapa-int.marcando .mapa-svg { cursor: crosshair; }
.marc-painel { padding: 12px 14px; border-radius: var(--raio-p); background: var(--painel); border: 1px solid var(--linha); }
.marc-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.marc-topo h3 { margin: 0; font: 800 1.1rem var(--titulo); text-transform: uppercase; }
.marc-topo small { font: 500 .78rem var(--dado); color: var(--suave); text-transform: none; }
.marc-filtros { margin: 10px 0 4px; }
.marc-bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
@media (prefers-reduced-motion: no-preference) { .marc circle { transition: stroke-width .15s; } }
.mapa-int.marcando .mapa-local { pointer-events: none; opacity: .45; }

/* Página de cada jogo da série (/cod/linha-do-tempo/<id>): anel de radar próprio com a posição na série. */
.linha-link { color: inherit; text-decoration: none; }
.linha-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.linha-link:hover, .linha-link:focus-visible { color: var(--cena-a); }
.linha-item .nota-fonte a { position: relative; z-index: 1; }
.jogo-arte { flex: 0 0 120px; width: 120px; height: 120px; --ja: var(--limao); }
.jogo-arte[data-familia="bo"] { --ja: #ffb02e; }
.jogo-arte[data-familia="warzone"] { --ja: #4fd1ff; }
.jogo-arte[data-familia="mobile"] { --ja: #c39bff; }
.jogo-arte[data-familia="guerra"], .jogo-arte[data-familia="classico"] { --ja: #ff6a4d; }
.ja-fundo { fill: color-mix(in srgb, var(--ja) 10%, var(--painel)); stroke: var(--linha); }
.ja-trilho { fill: none; stroke: var(--linha); stroke-width: 7; }
.ja-arco { fill: none; stroke: var(--ja); stroke-width: 7; stroke-linecap: round; }
.ja-anel { fill: none; stroke: color-mix(in srgb, var(--ja) 45%, transparent); stroke-dasharray: 3 5; }
.ja-varre { stroke: var(--ja); stroke-width: 2; opacity: .55; transform-origin: 60px 60px; transform-box: view-box; }
.ja-ano { fill: var(--texto); font: 800 22px var(--titulo); text-anchor: middle; }
.ja-pos { fill: var(--suave); font: 600 11px var(--dado); text-anchor: middle; }
.jogo-cab h1, .jogo-cab .temp-data { overflow-wrap: anywhere; }
.jogo-irmaos .chip { text-decoration: none; }
.jogo-irmaos .chip small { opacity: .7; font-family: var(--dado); }
.jogo-mais { margin-top: 10px; }
[data-jogo-extra][hidden] { display: none !important; }
@media (max-width: 560px) { .jogo-cab .jogo-arte { flex-basis: 90px; width: 90px; height: 90px; } }
@media (prefers-reduced-motion: no-preference) {
  .ja-varre { animation: varre 4s linear infinite; }
  .ja-arco { transition: stroke-width .3s; }
  .jogo-cab:hover .ja-arco { stroke-width: 10; }
  .jogo-cab:hover .ja-varre { animation-duration: 1.2s; }
  body[data-secao="linha-do-tempo"] .jogo-irmaos .chip:hover { animation: selo-pula .5s ease; }
}
/* Fontes oficiais: cena verde-âmbar, cartões com carimbo "conferida" e linha de varredura ao passar o mouse. */
body[data-secao="fontes"] { --cena-a: #6ee7a8; --cena-b: #ffb02e; }
.fonte-conferencia .fonte-listas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fonte-listas li { display: flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--painel-2); border: 1px solid var(--linha); font-size: .9rem; }
.fonte-listas time { color: var(--cena-a); font: 600 .8rem var(--dado); }
.fonte-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fonte-cartao { position: relative; display: block; padding: 14px 16px; border-radius: 16px; color: inherit; text-decoration: none; overflow: hidden; min-width: 0; }
.fonte-cartao h3 { margin: 4px 0 8px; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.fonte-site { margin: 0; color: var(--cena-a); font: 600 .78rem var(--dado); overflow-wrap: anywhere; padding-right: 30px; }
.fonte-usos { margin: 8px 0 0; font-size: .85rem; opacity: .85; }
.fonte-carimbo { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cena-a); color: var(--cena-a); font: 800 .8rem var(--dado); opacity: .55; }
.fonte-cartao:target, .fonte-cartao:focus-visible { border-color: var(--cena-a); }
.fonte-itens { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fonte-itens li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fonte-dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.fonte-dados dt { font: 600 .85rem var(--dado); color: var(--cena-a); }
.fonte-dados dd { margin: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .fonte-cartao::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cena-a) 22%, transparent), transparent); opacity: 0; pointer-events: none; }
  .fonte-cartao:hover::after, .fonte-cartao:focus-visible::after { animation: fonte-varre 1.1s ease-out; }
  .fonte-cartao:hover .fonte-carimbo, .fonte-cartao:focus-visible .fonte-carimbo { animation: fonte-carimba .45s cubic-bezier(.3, 1.6, .5, 1) both; }
}
.fonte-cartao:hover .fonte-carimbo, .fonte-cartao:focus-visible .fonte-carimbo { opacity: 1; background: color-mix(in srgb, var(--cena-a) 20%, transparent); }
@keyframes fonte-varre { 0% { top: -40%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fonte-carimba { 0% { transform: scale(1.8) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Montagens oficiais no guia de classe */
.selo-montagem { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--limao); color: var(--limao); font: 600 .74rem var(--dado); letter-spacing: .04em; text-transform: uppercase; }
.guia-pecas { list-style: none; counter-reset: peca; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.guia-pecas li { counter-increment: peca; position: relative; padding: 10px 12px 10px 44px; border-radius: 12px; background: color-mix(in srgb, var(--limao) 7%, transparent); border: 1px solid color-mix(in srgb, var(--limao) 22%, transparent); transition: transform .2s ease, border-color .2s ease; }
.guia-pecas li::before { content: counter(peca); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .75rem var(--dado); background: var(--limao); color: #06110a; }
.guia-pecas li strong { display: block; overflow-wrap: anywhere; }
.guia-pecas li span { display: block; color: var(--suave); font-size: .92rem; }
.guia-pecas li:hover { transform: translateX(4px); border-color: var(--limao); }
@media (prefers-reduced-motion: reduce) { .guia-pecas li { transition: none; } .guia-pecas li:hover { transform: none; } }