/* Estilos principais do SequeLariFN (antes dentro de public/fortnite/index.html). Ao mudar, trocar o ?v= no link da página. */

/* Logo SequeLari (retrô listrado): nome em letras de linhas paralelas e listras de pôr do sol embaixo. */
.logo-sl { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .45em; row-gap: .18em; text-decoration: none; line-height: 1; background: none; -webkit-text-fill-color: currentColor; animation: none; }
.logo-sl .logo-nome { font-family: "Monoton", "Big Shoulders Display", Impact, sans-serif; font-weight: 400; letter-spacing: .06em; color: #2fe0ff; -webkit-text-fill-color: #2fe0ff; }
.logo-sl .logo-jogo { font: 900 .62em/1 "Big Shoulders Display", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .22em .5em .26em; border-radius: .4em; background: var(--logo-jogo, #8c5aff); color: #ffffff; -webkit-text-fill-color: #ffffff; }
.logo-sl .logo-listras { grid-column: 1 / -1; display: grid; gap: .08em; }
.logo-sl .logo-listras i { display: block; height: .1em; border-radius: 1px; }
.logo-sl .logo-listras i:nth-child(1) { background: #ffd21f; width: 100%; }
.logo-sl .logo-listras i:nth-child(2) { background: #ff9a3c; width: 94%; }
.logo-sl .logo-listras i:nth-child(3) { background: #ff3ba0; width: 88%; }
.logo-sl .logo-listras i:nth-child(4) { background: #8c5aff; width: 82%; }
@media (prefers-reduced-motion: no-preference) { .logo-sl:hover .logo-listras i { animation: logo-onda .6s ease both; } .logo-sl:hover .logo-listras i:nth-child(2) { animation-delay: .06s; } .logo-sl:hover .logo-listras i:nth-child(3) { animation-delay: .12s; } .logo-sl:hover .logo-listras i:nth-child(4) { animation-delay: .18s; } }
@keyframes logo-onda { 50% { transform: scaleX(.6); } }
@media (max-width: 480px) { .topo .marca-linha .marca.logo-sl { font-size: 1.05rem; } .topo .marca-linha .logo-sl .logo-jogo { display: none; } .rodape .rodape-marca .marca.logo-sl { font-size: 1.1rem; } }
/* Conceito: painel de salto. O céu é o fundo, o amarelo marca o que muda hoje, cada seção é uma tela do painel. */
:root {
  --sky: #d8eef8; --panel: #f7fcff; --ink: #0e2a47; --muted: #47637e; --line: #a9c8da;
  --signal: #ffd21f; --on-signal: #0e2a47; --storm: #b3174f;
  --r-incomum: #2f8f3f; --r-raro: #2474d8; --r-epico: #8240cc; --r-serie: #c92a67; --r-nd: #6d8298; --r-lendario: #c9700a;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --data: "DM Mono", ui-monospace, "Courier New", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #0b1a31; --panel: #122742; --ink: #eaf4fb; --muted: #a4bdd2; --line: #2f4c6d;
    --storm: #ff8fb3; --r-incomum: #5ccb6b; --r-raro: #6db0ff; --r-epico: #bf94f5; --r-serie: #ff7fac; --r-nd: #94a9bd; --r-lendario: #f0a040;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky: #0b1a31; --panel: #122742; --ink: #eaf4fb; --muted: #a4bdd2; --line: #2f4c6d;
  --storm: #ff8fb3; --r-incomum: #5ccb6b; --r-raro: #6db0ff; --r-epico: #bf94f5; --r-serie: #ff7fac; --r-nd: #94a9bd; --r-lendario: #f0a040;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--sky); color: var(--ink); font: 400 16px/1.55 var(--body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1; margin: 0; text-wrap: balance; text-transform: uppercase; }
h1 { font-size: clamp(2.8rem, 8vw, 5.2rem); }
h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h3 { font-size: 1.5rem; line-height: 1.1; letter-spacing: .01em; }
p { margin: 0; max-width: 65ch; }
/* Site de ponta a ponta: margens laterais pequenas e conteúdo até 1.920 px; textos longos têm largura própria de leitura. */
:root { --margem: max(16px, min(2.5vw, 40px)); }
.gutter { padding-left: max(var(--margem), env(safe-area-inset-left, 0px)); padding-right: max(var(--margem), env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1920px; margin: 0 auto; }
.mono { font-family: var(--data); font-size: .8rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--data); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: #0e2a47; color: #f7fcff; }
.topo .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.marca { font: 900 1.7rem/1 var(--display); text-transform: none; text-decoration: none; color: #ffd21f; white-space: nowrap; }
.marca-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.idioma { font: 500 .85rem var(--body); color: #f7fcff; background: #0e2a47; border: 1px solid rgba(247, 252, 255, .5); padding: 4px 6px; }
.idioma:focus-visible { outline: 3px solid #ffd21f; }
.topo .wrap { position: relative; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.menu a, .grupo-botao { padding: 8px 8px; text-decoration: none; font: 500 .92rem/1.2 var(--body); white-space: nowrap; color: #f7fcff; }
.menu a[aria-current="page"], .grupo-botao.atual { background: #ffd21f; color: #0e2a47; }
.menu a:focus-visible, .grupo-botao:focus-visible { outline: 3px solid #ffd21f; outline-offset: -3px; }
.grupo { position: relative; }
.grupo-botao { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.grupo-botao::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.grupo-botao[aria-expanded="true"] { background: #1d4670; color: #f7fcff; }
.grupo-botao[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.grupo-lista { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 190px; display: grid; background: #0e2a47; border-top: 3px solid #ffd21f; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); padding: 6px; }
.grupo-lista[hidden] { display: none; }
.grupo-lista a { padding: 10px 12px; }
.grupo-lista a:hover { background: #1d4670; }
.aviso { background: var(--signal); color: var(--on-signal); }
.aviso .wrap { padding-block: 8px; font-size: .9rem; font-weight: 500; }

main { padding-block: 28px 56px; }
.tela[hidden] { display: none; }
.tela { display: grid; gap: 28px; }
.cabeca { display: grid; gap: 10px; }
/* Celular (revisão de 07/11/2026): título longo não alarga a coluna nem sai do banner. */
.cabeca { grid-template-columns: minmax(0, 1fr); } .cabeca > * { min-width: 0; } h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 420px) { h2 { font-size: clamp(1.6rem, 8.4vw, 2.2rem); } }

.salto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.manchete { display: grid; gap: 16px; align-content: start; }
.relogio { background: #0e2a47; color: #d8eef8; padding: 20px; display: grid; gap: 6px; align-content: start; align-self: start; }
.relogio .eyebrow { color: inherit; opacity: .8; }
.tempo { font: 900 clamp(3.2rem, 7vw, 4.6rem)/1 var(--display); color: var(--signal); font-variant-numeric: tabular-nums; }
.leve { color: var(--muted); }
.seo-sobre { margin: 28px 0 8px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); max-width: 72ch; }
.seo-sobre h2 { margin: 0 0 6px; font-size: 1.05rem; }
.seo-sobre p { margin: 4px 0; }
.relogio .leve { color: inherit; opacity: .85; }

.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 2px solid var(--ink); }
.numeros div { padding: 14px 12px; display: grid; gap: 2px; }
.numeros div + div { border-left: 1px solid var(--line); }
.numeros strong { font: 900 2.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.numeros span { font-size: .88rem; color: var(--muted); }

.colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.bloco { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mais { font-weight: 700; }
.noticia { background: var(--panel); padding: 16px; display: grid; gap: 6px; border-left: 6px solid var(--signal); align-content: start; }
#noticias-anteriores { margin-top: 32px; } #noticias-anteriores .cabeca { margin-bottom: 14px; }
#lista-noticias, #lista-noticias-antigas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.noticia-img { display: block; width: calc(100% + 32px); max-width: none; margin: -16px -16px 4px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sky); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filtros [hidden] { display: none; }
.filtros select { max-width: 100%; }
.cos-lote { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.cos-lote[hidden] { display: none; }
.campo { display: grid; gap: 4px; font-size: .85rem; font-weight: 500; }
.campo[hidden] { display: none; }
input, select { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; min-width: 0; max-width: 100%; }
.itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.loja-grupo { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 2px; padding-bottom: 6px; border-bottom: 2px solid var(--line, rgba(127,127,127,.3)); font-size: 1.15rem; }
.loja-grupo:first-child { margin-top: 0; }
.loja-grupo small { font-size: .85rem; font-weight: 500; opacity: .75; }
.item { background: var(--panel); padding: 12px 14px; border-top: 5px solid var(--cor, var(--r-nd)); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.item h3 { font-size: 1.28rem; overflow-wrap: anywhere; }
.item-rodape { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.preco { white-space: nowrap; font: 900 1.45rem/1 var(--display); font-variant-numeric: tabular-nums; }
.preco small { font: 400 .72rem var(--data); }
.itens.catalogo { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* Loja e destaques vivos: cor forte da raridade, item que salta e gira, brilho que passa. */
#lista-loja .item, #destaques .item { position: relative; overflow: hidden; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--cor) 70%, transparent); border-top-width: 2px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--cor) 55%, #0b1a31) 0%, color-mix(in srgb, var(--cor) 22%, var(--panel)) 55%, var(--panel) 100%); transition: transform .25s cubic-bezier(.2,.8,.3,1.4), box-shadow .25s; }
#lista-loja .item img, #destaques .item img { transition: transform .35s cubic-bezier(.2,.8,.3,1.4); transform-origin: 50% 90%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
#lista-loja .item::after, #destaques .item::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: rotate(18deg) translateX(-200%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #lista-loja .item:hover, #destaques .item:hover, #lista-loja .item:focus-within, #destaques .item:focus-within { transform: translateY(-8px) scale(1.03); box-shadow: 0 0 0 2px var(--cor), 0 16px 30px color-mix(in srgb, var(--cor) 45%, transparent); z-index: 2; }
  #lista-loja .item:hover img, #destaques .item:hover img { transform: scale(1.12) rotate(-3deg); animation: loja-gira 1.6s ease-in-out .35s infinite; }
  #lista-loja .item:hover::after, #destaques .item:hover::after { animation: loja-brilho .9s ease-out; }
}
@keyframes loja-gira { 0%, 100% { transform: scale(1.12) rotate(-3deg); } 50% { transform: scale(1.16) rotate(3deg) translateY(-6px); } }
@keyframes loja-brilho { to { transform: rotate(18deg) translateX(520%); } }
@media (prefers-reduced-motion: no-preference) { #lista-loja .item, #destaques .item { animation: loja-entra .4s ease-out both; } }
@keyframes loja-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.catalogo .item { padding: 10px; }
.armas-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.arma img { width: 96px; height: 96px; object-fit: contain; align-self: center; }
.arma-tabela { overflow-x: auto; }
.arm-mud { margin-top: 28px; padding: 18px; border-radius: 20px; border: 1px solid var(--line, rgba(255,255,255,.15)); background: var(--panel); }
.arm-mud h3 { margin: 0 0 6px; }
.arm-mud-dia { margin-top: 14px; }
.arm-mud-dia h4 { margin: 0 0 8px; font-size: 1rem; }
.arm-mud-dia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arm-mud-dia li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; border-radius: 12px; border-left: 4px solid var(--cor); background: color-mix(in srgb, var(--cor) 10%, transparent); min-width: 0; }
.arm-mud-nome { min-width: 0; overflow-wrap: anywhere; }
.arm-mud-tag { font-weight: 700; font-size: .9rem; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.arm-mud-mais { background: color-mix(in srgb, #3ddc84 22%, transparent); }
.arm-mud-menos { background: color-mix(in srgb, #ff5a6e 22%, transparent); }
.arm-mud .botao { margin-top: 14px; }
.armas-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.armas-lista .arma { border-radius: 20px; border: 2px solid color-mix(in srgb, var(--cor) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 16%, var(--panel)) 0%, var(--panel) 60%); padding: 12px; gap: 8px; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.3,1.4), box-shadow .25s; }
.arma-palco { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cor) 75%, #fff) 0%, var(--cor) 38%, color-mix(in srgb, var(--cor) 45%, #0b1a31) 100%); }
.arma-palco::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 10px, transparent 10px 22px); }
.arma-palco::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -40%; width: 30%; transform: rotate(20deg) translateX(-150%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); }
.arma-palco img { position: relative; z-index: 1; width: 82%; height: 82%; aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); transition: transform .35s cubic-bezier(.2,.8,.3,1.4); }
.arma-sem-img { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.55); }
.arma-palco img + .arma-sem-img { display: none; }
.arma-rars { display: flex; flex-wrap: wrap; gap: 4px; }
.arma-pilula { font: 600 .72rem/1 var(--data); padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cor) 25%, transparent); border: 1px solid var(--cor); }
.arma-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.arma-chips span { display: grid; gap: 2px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); text-align: center; }
.arma-chips small { font-size: .7rem; color: var(--muted); }
.arma-chips strong { font: 700 1.15rem var(--data); font-variant-numeric: tabular-nums; }
.arma-acoes { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.arma-cmp-txt { width: auto !important; height: auto !important; padding: 7px 12px !important; margin: 0 !important; border-radius: 999px !important; font-size: .82rem !important; }
.arma-ver { margin-left: auto; font-weight: 700; color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .armas-lista .arma:hover, .armas-lista .arma:focus-within { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 2px var(--cor), 0 18px 32px color-mix(in srgb, var(--cor) 40%, transparent); }
  .armas-lista .arma:hover .arma-palco img { transform: scale(1.12) rotate(-8deg); animation: arma-mira 1.2s ease-in-out .3s infinite; }
  .armas-lista .arma:hover .arma-palco::after { animation: arma-brilho .8s ease-out; }
}
@keyframes arma-mira { 0%, 100% { transform: scale(1.12) rotate(-8deg); } 30% { transform: scale(1.14) rotate(-14deg) translateX(-4px); } 60% { transform: scale(1.12) rotate(-4deg) translateX(3px); } }
@keyframes arma-brilho { to { transform: rotate(20deg) translateX(520%); } }
@media (prefers-reduced-motion: no-preference) {
  .arma-det-img img { animation: arma-entra .7s cubic-bezier(.2,.8,.3,1.3), arma-flutua 3s ease-in-out .7s infinite !important; }
  .arma-det-img { animation: arma-luz 3s ease-in-out infinite; }
}
@keyframes arma-entra { from { opacity: 0; transform: translateX(-60px) rotate(-35deg) scale(.6); } }
@keyframes arma-flutua { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-10px); } }
@keyframes arma-luz { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 60px rgba(255,255,255,.25); } }
@media (prefers-reduced-motion: no-preference) {
  .fundo .f1 { animation: fundo-deriva 38s linear infinite alternate; }
  .fundo .f2 { animation: fundo-deriva2 52s linear infinite alternate; }
  body[data-fundo="palco"] .f1 { animation: fundo-holofote 9s ease-in-out infinite alternate; }
  body[data-fundo="praia"] .f1 { animation: praia-brilho 18s ease-in-out infinite alternate; }
  body[data-fundo="praia"] .f2 { animation: praia-tempestade 22s ease-in-out infinite alternate; }
}
@keyframes praia-brilho { from { background-position: 0 0, 40px 70px, 0 0, 0 0, 0 0; } 50% { background-position: 70px 420px, 0 560px, 14vw 10vh, -12vw 8vh, 8vw -10vh; } to { background-position: -40px 840px, 60px 1120px, -6vw 16vh, 10vw -6vh, -14vw -4vh; } }
@keyframes praia-tempestade { from { background-size: 165vmax 165vmax, auto, auto; background-position: 50% 45%, 0 0, 0 0; } to { background-size: 46vmax 46vmax, auto, auto; background-position: 56% 52%, 0 180px, 180px 0; } }
@keyframes fundo-deriva { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 180px 90px, -140px 60px, 60px -40px, 0 0; } }
@keyframes fundo-deriva2 { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -120px 140px, 90px -60px, 0 0; } }
@keyframes fundo-holofote { from { background-position: -6vw 0, 6vw 0, 0 0, 0 0; } to { background-position: 6vw 0, -6vw 0, 0 0, 0 0; } }

.arma-tabela table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.arma-tabela th, .arma-tabela td { padding: 5px 6px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.arma-tabela th:first-child { text-align: left; }
.arma-tabela thead th { font-weight: 600; color: var(--muted); border-top: 0; }
@media (max-width: 420px) { .arma-tabela table { font-size: .78rem; } .arma-tabela th, .arma-tabela td { padding: 4px 3px; } }
.arma-cmp { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border: 1px solid var(--line); font-weight: 700; cursor: pointer; vertical-align: middle; }
.arma-cmp[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.arma-cmp:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; }
.arma-tabela td.melhor { font-weight: 700; background: color-mix(in srgb, var(--signal) 25%, transparent); }
/* Janela de detalhes padrão: entrada com zoom e esmaecer, imagem com movimento leve e abas. */
.det-fundo { animation: det-esmaece .2s ease-out; }
.det-fundo .cos-det { animation: det-zoom .28s cubic-bezier(.2,.8,.3,1.15); }
@keyframes det-esmaece { from { opacity: 0; } }
@keyframes det-zoom { from { opacity: 0; transform: scale(.9); } }
@keyframes det-flutua { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
@media (prefers-reduced-motion: no-preference) { .det-img img { animation: det-flutua 3.2s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .det-fundo, .det-fundo .cos-det { animation: none; } }
.blog-previa-secoes { background: color-mix(in srgb, var(--panel) 80%, var(--signal)); border-radius: 14px; padding: 12px 16px; }
.blog-previa-secoes h3 { margin: 0 0 6px; font-size: 1rem; }
.blog-previa-secoes ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
#det .det-capa.item { object-fit: contain; }
.det-capa { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--sky); display: block; }
.det-texto { display: grid; gap: 10px; padding-right: 80px; }
.det-texto p { margin: 0; white-space: pre-line; }
@media (max-width: 640px) { .det-texto { padding-right: 0; } }
.noticia[data-nid], .item.loja-det { cursor: pointer; }
.item.loja-det h3 a { color: inherit; text-decoration: none; }
.item.loja-det h3 a:hover, .item.loja-det h3 a:focus-visible { text-decoration: underline; }
.noticia h3 a { color: inherit; }
.jb-banner { border-radius: 20px; padding: clamp(22px, 5vw, 56px); min-height: clamp(180px, 26vw, 320px); display: grid; align-content: end; gap: 8px; color: #fff; position: relative; overflow: hidden; }
.jb-banner > * { position: relative; margin: 0; max-width: 60ch; }
.jb-banner h3 { font-size: clamp(2rem, 6vw, 4rem); color: #fff; }
.jb-banner .eyebrow { color: #ffe27a; }
.jb-banner::before { content: ""; position: absolute; inset: 0; }
.jb-gta { background: linear-gradient(180deg, #2a0f4d 0%, #9b2d7a 45%, #ff7a59 75%, #ffc65c 100%); min-height: clamp(240px, 34vw, 440px); }
.jb-gta::before { background: radial-gradient(circle at 75% 78%, rgba(255, 236, 160, .9) 0 9%, transparent 10%), repeating-linear-gradient(180deg, transparent 0 10px, rgba(42, 15, 77, .25) 10px 12px) 0 78% / 100% 22% no-repeat; }
.jb-minecraft { background: linear-gradient(180deg, #6fb6ff 0 55%, #5ba43a 55% 64%, #8a5a2b 64%); }
.jb-minecraft::before { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 24px, transparent 24px 48px) 0 100% / 100% 36% no-repeat; }
.jb-roblox { background: linear-gradient(135deg, #1b1f2a, #3a4152); }
.jb-roblox::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 30px, transparent 30px 60px); }
.jb-cod { background: linear-gradient(135deg, #1d2417, #4a5a32 60%, #1d2417); }
.jb-cod::before { background: radial-gradient(circle at 80% 30%, rgba(255, 180, 60, .35), transparent 35%); }
.jb-contagem { display: flex; flex-wrap: wrap; gap: 10px; }
.jb-contagem div { background: rgba(14, 42, 71, .55); border-radius: 14px; padding: 8px 14px; min-width: 70px; text-align: center; }
.jb-contagem strong { display: block; font: 800 clamp(1.6rem, 4vw, 2.6rem)/1 var(--display); color: #ffd21f; }
.jb-contagem span { font-size: .8rem; }
.jb-fatos { background: var(--panel); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; }
.jb-fatos ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
#jb-painel { display: grid; gap: 16px; }
.det-abas { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.det-abas button { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-weight: 600; background: var(--sky); }
.det-abas button[aria-selected="true"] { background: var(--signal); color: var(--on-signal); }
.det-abas button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.det-painel { display: grid; gap: 12px; min-width: 0; }
.det-barras { display: grid; gap: 6px; }
.det-barra { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .85rem; }
.det-barra span:nth-child(2) { height: 14px; border-radius: 999px; background: var(--sky); overflow: hidden; }
.det-barra i { display: block; height: 100%; border-radius: 999px; background: var(--cor, var(--signal)); }
.det-escolha { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.arma h3 a { color: inherit; }
.arma { cursor: pointer; }
.arma-rar { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); margin-right: 6px; }
.catalogo .item h3 { font-size: 1.15rem; }
.catalogo .item-rodape { flex-direction: column; gap: 0; }
.armario-barra { background: var(--panel); border-left: 6px solid var(--signal); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.armario-barra strong { font: 900 1.45rem/1 var(--display); font-variant-numeric: tabular-nums; }
.armario-barra .leve { flex: 1 1 260px; }
.arm-valor { background: var(--panel); border-left: 6px solid var(--signal); margin-top: -2px; padding: 0 16px 12px; }
.arm-valor strong { font: 900 1.2rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.arm-valor p { margin: 4px 0 0; }
.selos { display: flex; flex-wrap: wrap; gap: 4px; }
.selo { font: 500 .75rem/1.3 var(--data); border: 1px solid var(--muted); padding: 2px 6px; font-variant-numeric: tabular-nums; }
.selo.forte { background: var(--signal); color: var(--on-signal); border-color: var(--signal); font-weight: 700; }
.selo.desejo { background: var(--storm); color: var(--panel); border-color: var(--storm); font-weight: 700; }
.marcar { font: 500 .85rem var(--body); color: var(--ink); background: transparent; border: 1px solid var(--muted); padding: 7px 8px; min-height: 36px; cursor: pointer; margin-top: 6px; }
.marcar[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); font-weight: 700; }
.marcar.desejar { margin-top: 0; }
.marcar.desejar[aria-pressed="true"] { background: var(--storm); color: var(--panel); border-color: var(--storm); }
.marcar:disabled { opacity: .6; cursor: default; }
.marcar:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
.paginas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.paginas .botao:disabled { opacity: .5; cursor: default; }
.vazio { background: var(--panel); padding: 20px; display: grid; gap: 8px; border: 1px dashed var(--muted); }
.conta { display: grid; gap: 16px; }
.conta-painel { background: var(--panel); padding: 20px; display: grid; gap: 10px; min-width: 0; align-content: start; }
#perfil-titulo { text-transform: none; }
.conta-painel h3 { margin: 0; }
.conta-painel p { margin: 0; }
.conta-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.conta-numero { font: 900 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.conta-painel .camada { background: var(--sky); }
.conta-niveis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 4px; }
.conta-niveis li { background: var(--sky); padding: 6px 4px; text-align: center; font-size: .8rem; display: grid; gap: 2px; min-width: 0; }
.sp-progresso { background: var(--panel); border-left: 6px solid var(--signal); margin-top: -2px; padding: 0 16px 12px; display: grid; gap: 6px; }
.sp-progresso p { margin: 0; }
.sp-barra { height: 10px; background: var(--sky); }
.sp-barra span { display: block; height: 100%; width: 0; background: var(--signal); }
.sp-niveis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: auto; padding-top: 6px; }
.sp-niveis .marcar { margin: 0; padding: 7px 2px; min-height: 40px; font-variant-numeric: tabular-nums; }
.sp-num { font: 500 .8rem var(--data); }
.sp-tabela { width: 100%; table-layout: fixed; border-collapse: collapse; }
.sp-tabela th, .sp-tabela td { padding: 7px 6px; text-align: left; border-top: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.sp-tabela thead th { border-top: 0; font-size: .85rem; }
.sp-tabela thead th:first-child { width: 40%; }
.sp-lista { --sp-cols: 4; grid-template-columns: repeat(var(--sp-cols), minmax(0, 1fr)); gap: 14px; }
.sp-lista .item { border: 2px solid var(--cor); border-radius: 18px; background: color-mix(in srgb, var(--cor) 12%, var(--panel)); padding: 14px; position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.sp-lista .item .sp-fundo { border-radius: 14px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--cor) 35%, transparent), transparent 70%); display: grid; place-items: center; padding: 6px; }
.sp-lista .item img { max-height: 150px; transform-origin: 50% 85%; }
.sp-lista .item.dom { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.sp-lista .item .sp-selo { position: absolute; top: 10px; right: 10px; background: var(--signal); color: var(--on-signal); font: 700 .7rem var(--data); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.sp-lista .sp-niveis .marcar { border-radius: 10px; }
.sp-lista .sp-duelo span { border-radius: 8px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-chip { font: 600 .72rem/1 var(--data); padding: 4px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cor) 60%, transparent); background: color-mix(in srgb, var(--cor) 18%, transparent); white-space: nowrap; }
.sp-chip.rar { background: var(--cor); color: #0b1a31; border-color: var(--cor); }
.sp-lista .sp-niveis .marcar { padding: 0; display: grid; place-items: center; }
.sp-lista .sp-niveis .marcar[data-nivel="5"] { font-size: 1rem; }
.sp-lista.minimo .item { padding: 8px; gap: 3px; }
.sp-lista.minimo .item h3 { font-size: .78rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.sp-lista.minimo .sp-chip { font-size: .6rem; padding: 3px 5px; }
.sp-lista.minimo .sp-niveis { gap: 2px; }
.sp-lista.minimo .sp-niveis .marcar { min-height: 24px; font-size: .68rem; border-radius: 6px; }
.sp-lista.minimo .sp-selo { font-size: .55rem; padding: 2px 5px; top: 5px; right: 5px; }
.sp-colunas { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sp-colunas .botao { border-radius: 10px; min-width: 40px; }
.sp-colunas .botao[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.sp-lista.denso .item > p.leve { display: none; }
.sp-lista.denso .item h3 { font-size: 1.02rem; }
.sp-lista.denso .sp-niveis .marcar { font-size: .75rem; min-height: 34px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sp-lista .item:hover, .sp-lista .item:focus-within { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--cor), 0 10px 24px color-mix(in srgb, var(--cor) 40%, transparent); }
  .sp-lista .item:hover img, .sp-lista .item:focus-within img { animation: sp-danca .9s ease-in-out infinite; }
}
.sp-abrir { color: inherit; text-decoration: none; }
.sp-abrir:hover, .sp-abrir:focus-visible { text-decoration: underline; }
.sp-lista .item[data-id] { cursor: pointer; }
.sp-det-img img { width: 80%; height: 80%; transform-origin: 50% 85%; }
@media (prefers-reduced-motion: no-preference) { .sp-det-img img { animation: sp-danca 1.6s ease-in-out infinite; } }
.sp-det-niveis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 340px; }
.sp-det-niveis .marcar { margin: 0; min-height: 40px; padding: 0; border-radius: 10px; }
.sp-det-var a { color: inherit; text-decoration: none; display: grid; gap: 4px; }
.sp-det-var a[aria-current="true"] figcaption { font-weight: 700; }
.sp-det-var figure:has(a[aria-current="true"]) { box-shadow: 0 0 0 2px var(--signal); }
.cos-det-dados.sp-det-curva { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
@keyframes sp-danca { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 25% { transform: translateY(-8px) rotate(-6deg) scale(1.06); } 50% { transform: translateY(0) rotate(0) scale(1.02); } 75% { transform: translateY(-5px) rotate(5deg) scale(1.05); } }
@media (max-width: 1100px) { .sp-lista.c9, .sp-lista.c10 { --sp-cols: 8; } }
@media (max-width: 960px) { .sp-lista.c7, .sp-lista.c8, .sp-lista.c9, .sp-lista.c10 { --sp-cols: 6; } }
@media (max-width: 760px) { .sp-lista.c5, .sp-lista.c6, .sp-lista.c7, .sp-lista.c8, .sp-lista.c9, .sp-lista.c10 { --sp-cols: 3; } }
@media (max-width: 460px) { .sp-lista { --sp-cols: 2 !important; } }
.sp-tabela .maior { font-weight: 700; background: var(--sky); }
.sp-partilha { margin: 14px 0; }
.sp-painel { display: grid; gap: 10px; margin: 12px 0 14px; }
.sp-linha { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sp-raros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-linha > div, .sp-raros > div { background: var(--panel); border-top: 3px solid var(--signal); padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.sp-painel .grande { font: 700 1.6rem var(--data); font-variant-numeric: tabular-nums; }
.sp-ritmo { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 2fr)); gap: 10px; margin: -4px 0 14px; }
.sp-ritmo > div { background: var(--panel); border-top: 3px solid var(--signal); padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.sp-ritmo .grande { font: 700 1.6rem var(--data); font-variant-numeric: tabular-nums; }
.sp-ritmo p { grid-column: 1 / -1; margin: 0; }
.sp-ritmo[hidden] { display: none; }
@media (max-width: 760px) { .sp-ritmo { grid-template-columns: minmax(0, 1fr); } }
.sp-raro { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0 2px; border-top: 1px solid var(--line); }
.sp-raro img { width: 44px; height: 44px; object-fit: contain; }
.sp-raro strong { display: block; overflow-wrap: anywhere; }
.sp-raro .pct { font: 700 1.1rem var(--data); text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .sp-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-raros { grid-template-columns: minmax(0, 1fr); } }
.sp-partilha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.sp-partilha-grade > div { display: grid; gap: 8px; min-width: 0; }
.sp-partilha input { width: 100%; min-width: 0; font-family: var(--data); }
.sp-cmp { background: var(--panel); border-left: 6px solid var(--signal); padding: 12px 16px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sp-cmp strong { font-variant-numeric: tabular-nums; }
.sp-cmp .botao[aria-pressed="true"] { background: var(--signal); color: #0a1a2f; border-color: var(--signal); }
.sp-duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; font: 500 .8rem var(--data); }
.sp-duelo span { border: 1px solid var(--line); padding: 5px 4px; text-align: center; overflow-wrap: anywhere; }
.sp-duelo .tem { border-color: var(--signal); }
.conta-niveis b { font: 500 1.05rem var(--data); font-variant-numeric: tabular-nums; }
.conta-link { font-family: var(--data); font-size: .9rem; overflow-wrap: anywhere; }
.codigo-grande { margin: 0; font: 700 1.35rem/1.3 var(--data); letter-spacing: .06em; overflow-wrap: anywhere; background: var(--sky); padding: 10px 12px; user-select: all; }
.conta-novo { border-top: 5px solid var(--signal); }
@media (max-width: 420px) { .codigo-grande { font-size: 1.02rem; letter-spacing: .01em; } }
#conta-area .botao[aria-pressed="true"] { background: var(--signal); color: var(--on-signal, #0a1a2f); border-color: var(--signal); }

.palco-int { position: absolute; width: 150%; height: 150%; left: -21.6%; top: -24.7%; }
.palco-int img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.des-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.des-svg.ativo { pointer-events: auto; cursor: crosshair; touch-action: none; }
.des-svg text { font: 800 26px/1 var(--display, sans-serif); paint-order: stroke; stroke: #0a0820; stroke-width: 7px; stroke-linejoin: round; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.des-svg circle { stroke: #0a0820; stroke-width: 2px; pointer-events: none; }
.des-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 4px; }
.des-cores { display: inline-flex; gap: 6px; }
.des-cor { all: unset; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: var(--cor); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.des-cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.des-cor:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.mapa-palco .evo-local.marco .ponto { background: #f7fcff; border-radius: 2px; }
.evo-palco.arrastando { cursor: grabbing; }
.marca-mapa { all: unset; box-sizing: border-box; position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #0e2a47; color: #f7fcff; border: 2px solid #f7fcff; font: 500 11px/20px var(--data); text-align: center; cursor: pointer; z-index: 1; }
.marca-mapa:focus-visible { outline: 3px solid var(--storm); }
.marca-mapa.ativo { background: #ffd21f; color: #0e2a47; border-color: #0e2a47; transform: scale(1.3); z-index: 3; }
.rotulo-mapa { position: absolute; z-index: 4; transform: translate(-50%, -34px); background: #0e2a47; color: #f7fcff; padding: 3px 8px; font-size: .85rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
.evo-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.evo-linha { display: grid; gap: 6px; }
.evo-linha input { width: 100%; padding: 0; }
.evo-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.botao { font: inherit; font-weight: 700; color: var(--ink); background: var(--panel); border: 1px solid var(--line); padding: 8px 12px; cursor: pointer; }
.botao:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
.cmp { display: grid; gap: 12px; border-top: 2px solid var(--ink); padding-top: 20px; }
.cmp-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmp-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: var(--panel); padding: 10px; border-top: 5px solid var(--signal); }
.cmp-lado + .cmp-lado { border-top-color: var(--storm); }
.cmp-lado strong { grid-column: 1 / -1; font-size: .9rem; }
@media (max-width: 640px) { .cmp-lados { grid-template-columns: minmax(0, 1fr); } }
.cmp-lado select, .cmp-filtros select { width: 100%; }
.cmp-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.cmp-palco { --pos: 50%; --lado: min(100%, calc(100vh - 110px)); position: relative; width: var(--lado); margin-inline: auto; aspect-ratio: 1; overflow: hidden; background: #0d5aa0; cursor: ew-resize; touch-action: pan-y; user-select: none; border-radius: 26px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .45), 0 0 90px rgba(47, 224, 255, .18); }
.cmp-palco::before, .cmp-palco::after { position: absolute; z-index: 3; top: 14px; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: .95rem; color: #0e2a47; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.cmp-palco::before { content: "A"; left: 14px; background: #ffd21f; }
.cmp-palco::after { content: "B"; right: 14px; background: #2fe0ff; }
.cmp-divisa::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #ffd21f; color: #0e2a47; font: 800 1.1rem/46px sans-serif; text-align: center; letter-spacing: 2px; box-shadow: 0 0 0 4px rgba(14, 42, 71, .35), 0 6px 18px rgba(0, 0, 0, .4); }
#cmp-status { text-align: center; }
#cmp-pos-rotulo { width: min(100%, calc(100vh - 110px)); margin-inline: auto; text-align: center; }
.cmp-palco img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
.cmp-palco img[src=""], .cmp-palco img:not([src]) { visibility: hidden; }
#cmp-img-a { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-divisa { position: absolute; z-index: 2; inset-block: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #ffd21f; box-shadow: 0 0 16px rgba(255, 210, 31, .8); pointer-events: none; }
.cmp-palco.lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(100%, calc(2 * (100vh - 110px))); aspect-ratio: 2 / 1; cursor: default; }
.cmp-palco.lado img { position: static; height: auto; aspect-ratio: 1; clip-path: none; }
.cmp-palco.lado .cmp-divisa { display: none; }
#cmp-pos { width: 100%; padding: 0; }
.xp-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; background: var(--panel); padding: 16px; }
.xp-campos input { width: 100%; }
.evo-palco { position: relative; aspect-ratio: 1; width: min(100%, calc(100vh - 24px)); margin-inline: auto; overflow: hidden; background: #0d5aa0; cursor: grab; touch-action: pan-y; }
.evo-palco.zoom { touch-action: none; }
.evo-selo { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(11, 26, 49, .88); color: #f7fcff; border: 2px solid #ffd21f; border-radius: 999px; padding: 8px 18px; display: grid; justify-items: center; pointer-events: none; text-align: center; max-width: calc(100% - 24px); }
.evo-selo strong { font: 900 clamp(1rem, 2.6vw, 1.5rem)/1.1 var(--display); text-transform: uppercase; color: #ffd21f; }
.evo-selo span { font: 500 .75rem var(--data); }
.evo-selo:empty { display: none; }
.evo-ctrl { position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(11, 26, 49, .88); color: #f7fcff; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
.evo-ctrl-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #f7fcff; font: 800 1.3rem/1 var(--body); cursor: pointer; }
.evo-ctrl-btn.evo-ctrl-play { width: 48px; height: 48px; background: #ffd21f; color: #0e2a47; font-size: 1.2rem; }
.evo-ctrl-btn:focus-visible, .evo-ctrl-vel button:focus-visible { outline: 3px solid #2fe0ff; outline-offset: 2px; }
.evo-ctrl-vel { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.evo-ctrl-vel button { font: 800 .8rem var(--body); color: #f7fcff; background: transparent; border: 0; border-radius: 999px; padding: 6px 9px; cursor: pointer; }
.evo-ctrl-vel button[aria-pressed="true"] { background: #2fe0ff; color: #0e2a47; }
.evo-ctrl-conta { font: 600 .8rem var(--data); padding: 0 6px; white-space: nowrap; }
body.evo-cinema .evo-ctrl { display: none; }
.evo-selo.troca { animation: evo-selo-troca 1.1s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes evo-selo-troca { 0% { transform: translateX(-50%) scale(1.6); background: #ffd21f; color: #0e2a47; } 60% { transform: translateX(-50%) scale(.96); } 100% { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .evo-selo.troca { animation: none; } }
@media (max-width: 520px) { .evo-ctrl-conta { display: none; } .evo-ctrl-btn { width: 34px; height: 34px; } .evo-ctrl-btn.evo-ctrl-play { width: 40px; height: 40px; } }
/* Modo cinema da Evolução: o mapa grande no meio da tela, título gigante a cada temporada, transição com impacto e barra de progresso. */
.evo-cine { position: fixed; inset: 0; z-index: 902; pointer-events: none; }
.evo-cine-base { pointer-events: auto; }
body.evo-cinema::after { content: ""; position: fixed; inset: 0; z-index: 900; background: radial-gradient(60vmax 50vmax at 20% 20%, rgba(47, 224, 255, .25), transparent 70%), radial-gradient(60vmax 50vmax at 80% 80%, rgba(140, 90, 255, .35), transparent 70%), #050b18; }
body.evo-cinema { overflow: hidden; }
body.evo-cinema .evo-palco { position: fixed; z-index: 901; left: 50%; top: calc(50% - 26px); width: min(100vw, calc(100vh - 70px)); transform: translate(-50%, -50%); border-radius: 18px; box-shadow: 0 0 0 3px rgba(255, 210, 31, .5), 0 0 120px rgba(47, 224, 255, .35); cursor: default; }
body.evo-cinema .evo-palco .evo-selo, body.evo-cinema .evo-int .rotulo-mapa, body.evo-cinema .evo-int .marca-mapa { display: none; }
.evo-cine-cartao { position: fixed; z-index: 903; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; white-space: nowrap; }
.evo-cine-cartao strong { display: block; font: 900 clamp(2rem, 7vw, 5.2rem)/.95 var(--display); text-transform: uppercase; color: #ffd21f; -webkit-text-stroke: 2px #0e2a47; text-shadow: 0 6px 0 #0e2a47, 0 10px 40px rgba(0, 0, 0, .6); }
.evo-cine-cartao span { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; background: #0e2a47; color: #f7fcff; font: 800 clamp(.9rem, 2.4vw, 1.4rem) var(--display); text-transform: uppercase; letter-spacing: .06em; }
.evo-cine-cartao.entra { animation: cine-cartao 1.7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cine-cartao { 0% { opacity: 0; transform: translateX(-50%) scale(2.2) rotate(-6deg); } 18% { opacity: 1; transform: translateX(-50%) scale(.95) rotate(1deg); } 28% { transform: translateX(-50%) scale(1.04) rotate(0); } 80% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9) translateY(-20px); } }
.evo-cine-flash { position: fixed; inset: 0; z-index: 902; background: #fff; opacity: 0; pointer-events: none; }
.evo-cine-flash.vai { animation: cine-flash .45s ease-out; }
@keyframes cine-flash { 0% { opacity: .75; } 100% { opacity: 0; } }
body.evo-cinema .evo-int.soco { animation: cine-soco .5s cubic-bezier(.2, .9, .3, 1); }
body.evo-cinema .evo-int.soco-forte { animation: cine-soco-forte .9s cubic-bezier(.2, .9, .3, 1); }
@keyframes cine-soco { 0% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes cine-soco-forte { 0% { transform: scale(1.08); filter: brightness(1.35) saturate(1.3); } 100% { transform: scale(1); filter: none; } }
.evo-cine-base { position: fixed; z-index: 904; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(100vw - 24px, 900px); display: flex; gap: 10px; align-items: center; }
.evo-cine-btn { font: 800 .95rem var(--display); text-transform: uppercase; background: #ffd21f; color: #0e2a47; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.evo-cine-btn:focus-visible { outline: 3px solid #2fe0ff; outline-offset: 2px; }
.evo-cine-barra { position: relative; flex: 1; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .15); cursor: pointer; touch-action: none; }
.evo-cine-barra input { position: absolute; left: 0; right: 0; top: -12px; z-index: 3; width: 100%; height: 34px; margin: 0; opacity: 0; cursor: pointer; }
.evo-cine-barra span::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(14, 42, 71, .55), 0 4px 12px rgba(0, 0, 0, .4); transition: transform .15s; }
.evo-cine-barra:hover span::after, .evo-cine-barra.arrastando span::after { transform: scale(1.25); }
.evo-cine-barra.arrastando span { transition: none; }
.evo-cine-barra:focus-within { outline: 3px solid #ffd21f; outline-offset: 4px; }
.evo-cine-dica { position: absolute; bottom: 22px; transform: translateX(-50%); z-index: 4; padding: 5px 10px; border-radius: 10px; background: rgba(7, 11, 28, .92); color: #fff; font: 700 .78rem/1.2 var(--data, ui-monospace, monospace); font-style: normal; white-space: nowrap; pointer-events: none; }
.evo-cine-barra span { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #2fe0ff, #ffd21f); border-radius: 999px; transition: width .4s ease; }
.evo-cine-barra i { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 999px; }
.evo-cine-barra i b { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(14, 42, 71, .8); }
.evo-cine-vel { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(14, 42, 71, .85); }
.evo-cine-vel button { font: 800 .85rem var(--display); color: #f7fcff; background: transparent; border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.evo-cine-vel button[aria-pressed="true"] { background: #2fe0ff; color: #0e2a47; }
.evo-cine-vel button:focus-visible { outline: 3px solid #ffd21f; outline-offset: 1px; }
.evo-cine-conta { color: #f7fcff; font: 700 .85rem var(--data); white-space: nowrap; }
#evo-play { min-width: 8.6em; }
.evo-cine-botao { background: #ffd21f; color: #0e2a47; border-color: #ffd21f; }
@media (max-width: 640px) { .evo-cine-conta { display: none; } .evo-cine-cartao { top: 8%; } }
@media (max-width: 480px) { .evo-cine-base { flex-wrap: wrap; justify-content: center; gap: 8px; } .evo-cine-barra { flex: 0 0 100%; order: 5; } .evo-cine-vel button { padding: 6px 7px; } .evo-cine-btn { padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .evo-cine-cartao.entra { animation: none; opacity: 1; } .evo-cine-flash.vai, body.evo-cinema .evo-int.soco, body.evo-cinema .evo-int.soco-forte { animation: none; } }

/* Sobrevoo 3D: a imagem oficial do mapa da versão inclinada em perspectiva, com câmera que passeia, nuvens e anel da tempestade. */
.voo { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: linear-gradient(#3aa8ff 0%, #9fd8ff 38%, #e9f6ff 55%, #0b1a31 100%); color: #fff; }
.voo[hidden] { display: none; }
.voo-cena { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 30%; }
.voo-chao { position: absolute; left: 50%; top: 58%; width: min(150vmin, 1500px); aspect-ratio: 1; margin-left: calc(min(150vmin, 1500px) / -2); margin-top: calc(min(150vmin, 1500px) / -2); transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(0deg); }
.voo-chao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 4000px #2f6fae; }
.voo-chao::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 3vmin solid rgba(140, 90, 255, .55); box-shadow: 0 0 80px rgba(140, 90, 255, .8), inset 0 0 80px rgba(140, 90, 255, .6); }
.voo-nuvem { position: absolute; width: 40vmax; height: 14vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); filter: blur(6px); pointer-events: none; }
.voo-n1 { top: 8%; left: -40vmax; } .voo-n2 { top: 22%; left: -60vmax; opacity: .7; } .voo-n3 { top: 40%; left: -50vmax; opacity: .5; }
.voo-topo { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(rgba(7, 15, 31, .75), transparent); }
.voo-titulo { font: 900 clamp(1.4rem, 5vw, 2.6rem)/1 var(--display, Impact, sans-serif); text-transform: uppercase; text-shadow: 0 3px 12px rgba(0, 0, 0, .5); }
.voo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.voo-nota { position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0; font-size: .8rem; color: #eaf4fb; text-shadow: 0 1px 4px #000; }
@media (prefers-reduced-motion: no-preference) {
  .voo.ligado .voo-chao { animation: voo-camera 26s ease-in-out infinite alternate; }
  .voo.ligado .voo-n1 { animation: voo-nuvem 22s linear infinite; } .voo.ligado .voo-n2 { animation: voo-nuvem 34s linear infinite; } .voo.ligado .voo-n3 { animation: voo-nuvem 46s linear infinite; }
}
@keyframes voo-camera { 0% { transform: rotateX(60deg) rotateZ(-8deg) translate3d(18%, 14%, 0) scale(1.15); } 35% { transform: rotateX(64deg) rotateZ(10deg) translate3d(-16%, 6%, 0) scale(1.45); } 70% { transform: rotateX(58deg) rotateZ(-4deg) translate3d(-6%, -18%, 0) scale(1.3); } 100% { transform: rotateX(66deg) rotateZ(14deg) translate3d(14%, -10%, 0) scale(1.6); } }
@keyframes voo-nuvem { to { transform: translateX(200vmax); } }
/* Passeio pelos locais nomeados: a câmera vai de um local ao outro, com um pino no chão e o nome na tela. */
.voo-pino { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #ffd21f; box-shadow: 0 0 0 4px rgba(255, 210, 31, .35), 0 0 24px #ffd21f; pointer-events: none; }
.voo-pino[hidden] { display: none; }
.voo-local { position: absolute; left: 50%; top: 58%; max-width: calc(100% - 32px); transform: translate(-50%, -190%); padding: 6px 14px; border-radius: 999px; background: rgba(7, 15, 31, .82); color: #ffd21f; font: 900 clamp(1rem, 3.4vw, 1.6rem)/1.15 var(--display, Impact, sans-serif); text-transform: uppercase; text-align: center; letter-spacing: .03em; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); pointer-events: none; overflow-wrap: anywhere; }
.voo-local small { display: block; font: 700 .7rem/1.3 system-ui, sans-serif; color: #cfe3f5; text-transform: none; letter-spacing: 0; }
.voo-local[hidden] { display: none; }
.voo.ligado.tour .voo-chao { animation: none; transition: transform 4s ease-in-out; }
/* Virada de temporada no sobrevoo, no estilo do Cinema 2: um painel da cor do capítulo cruza a tela com capítulo e temporada. */
.voo-virada { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 0 clamp(20px, 6vw, 80px); overflow: hidden; background: var(--c2-cor, #ffd21f); color: #0e2a47; pointer-events: none; clip-path: inset(0 100% 0 0); }
.voo-topo { z-index: 3; }
.voo-virada .evo-c2-temp { font-size: clamp(2.4rem, 11vw, 6.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .voo-virada.vai { animation: voo-virada 1.9s cubic-bezier(.6, 0, .3, 1) both; }
  .voo-virada.vai .voo-virada-cartao { animation: c2-vira .9s .25s cubic-bezier(.2, .9, .3, 1.1) both; }
}
@keyframes voo-virada { 0% { clip-path: inset(0 100% 0 0); } 28% { clip-path: inset(0 0 0 0); } 72% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@media (prefers-reduced-motion: reduce) { .voo.ligado.tour .voo-chao { transition: none; } }
/* Relevo simulado: a própria imagem oficial vira mapa de altura (claro = alto) com luz de lado, desenhada uma vez num canvas. */
.voo-chao canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.voo-chao canvas.pronto { opacity: 1; }
/* Trailer oficial da temporada: reprodutor do YouTube só depois do clique, por cima do sobrevoo. */
.voo-trailer[hidden], .voo-tv[hidden] { display: none; }
.voo-tv { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(4, 10, 22, .92); }
.voo-tv-quadro { position: relative; width: min(100%, 960px, calc((100vh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.voo-tv-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.voo-tv-pe { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; max-width: 960px; margin: 0; font-size: .85rem; color: #cfe3f5; text-align: center; }
.voo-tv-pe b { color: #fff; }
.voo-tv-pe a { color: #ffd21f; }
.voo-pino { transform-style: preserve-3d; }
.voo-pino::after { content: ""; position: absolute; left: 5px; bottom: 7px; width: 4px; height: 70px; border-radius: 2px; background: linear-gradient(to top, #ffd21f, rgba(255, 210, 31, 0)); transform-origin: 50% 100%; transform: rotateX(-90deg); }
@media (prefers-reduced-motion: reduce) { .voo-chao canvas { transition: none; } }
/* Cinema 2: tela dividida, painel de cor forte com capítulo e temporada à esquerda e o mapa da versão à direita. */
.evo-c2-ver { display: none; }
body.evo-cine2 .evo-c2-ver { display: block; position: absolute; z-index: 3; top: 12px; right: 12px; padding: 6px 14px; border-radius: 999px; background: #0e2a47; color: #ffd21f; font: 900 clamp(1rem, 2.2vw, 1.6rem) var(--display); letter-spacing: .04em; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); pointer-events: none; }
body.evo-cine2 .evo-cine-cartao, body.evo-cine2 .evo-cine-flash { display: none; }
body.evo-cine2::after { background: radial-gradient(50vmax 40vmax at 85% 15%, rgba(47, 224, 255, .22), transparent 70%), #050b18; }
.evo-c2 { position: fixed; z-index: 903; left: 0; top: 0; bottom: 0; width: 40vw; display: flex; align-items: center; padding: 32px clamp(20px, 3vw, 48px) 90px; overflow: hidden; perspective: 1400px; background: var(--c2-cor, #ffd21f); color: #0e2a47; transition: background .6s ease; pointer-events: auto; }
.evo-c2-cartao { position: relative; z-index: 1; width: 100%; transform-origin: 0 50%; }
.evo-c2-cartao.vira { animation: c2-vira .9s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes c2-vira { 0% { opacity: 0; transform: rotateY(-88deg) translateX(-30px); } 60% { opacity: 1; transform: rotateY(8deg); } 100% { opacity: 1; transform: rotateY(0); } }
.evo-c2-cap { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #0e2a47; color: #f7fcff; font: 800 clamp(.95rem, 1.8vw, 1.35rem) var(--display); text-transform: uppercase; letter-spacing: .08em; }
.evo-c2-temp { display: block; margin: 10px 0 6px; font: 900 clamp(2rem, min(4.6vw, 10vh), 5rem)/.9 var(--display); text-transform: uppercase; }
.evo-c2-titulo { margin: 8px 0 4px; font: 800 clamp(1.05rem, 1.9vw, 1.6rem)/1.15 var(--display); }
.evo-c2-datas { margin: 0 0 10px; font: 700 .95rem var(--data); }
.evo-c2-resumo { margin: 0; max-width: 40ch; font-size: clamp(.92rem, 1.25vw, 1.08rem); line-height: 1.45; }
.evo-c2-nota { margin: 12px 0 0; font-size: .8rem; opacity: .8; }
.evo-c2-listras { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.evo-c2-listras b { display: block; height: 8px; opacity: .55; background: #0e2a47; }
.evo-c2-listras b:nth-child(2) { opacity: .4; } .evo-c2-listras b:nth-child(3) { opacity: .28; } .evo-c2-listras b:nth-child(4) { opacity: .16; }
body.evo-cine2 .evo-palco { left: 70vw; top: calc(50% - 30px); width: min(60vw - 48px, 100vh - 120px); }
body.evo-cine2 .evo-cine-base { left: 70vw; width: min(60vw - 24px, 820px); }
@media (max-aspect-ratio: 5/6) {
  .evo-c2 { width: auto; right: 0; bottom: auto; height: 40vh; height: 40dvh; padding: 16px 16px 40px; align-items: flex-end; }
  .evo-c2-resumo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: none; }
  .evo-c2-temp { margin: 6px 0 2px; }
  .evo-c2-nota { display: none; }
  .evo-c2-listras { height: 30px; } .evo-c2-listras b { height: 4px; }
  body.evo-cine2 .evo-palco { left: 50%; top: calc(40vh + (60vh - 70px) / 2); width: min(100vw - 24px, 60vh - 90px); }
  body.evo-cine2 .evo-cine-base { left: 50%; width: min(100vw - 24px, 900px); }
}
@media (max-aspect-ratio: 5/6) and (max-width: 480px) { body.evo-cine2 .evo-palco { top: calc(40vh + (60vh - 120px) / 2); width: min(100vw - 24px, 60vh - 140px); } }
@media (prefers-reduced-motion: reduce) { .evo-c2-cartao.vira { animation: none; } .evo-c2 { transition: none; } }
.evo-int { position: absolute; inset: 0; transform-origin: 0 0; }
.evo-int img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.evo-int .evo-img-b { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.evo-int .evo-img-b:not([src]) { display: none; }
.evo-vel { flex-direction: row; align-items: center; gap: 6px; }
.evo-local { animation: evoSurgir .7s ease both; }
@keyframes evoSurgir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .evo-local { animation: none; } }
.evo-int .marca-mapa { transform: scale(var(--inv, 1)); }
.evo-int .marca-mapa.ativo { transform: scale(calc(var(--inv, 1) * 1.3)); }
.evo-int .rotulo-mapa { transform: translate(-50%, -34px) scale(var(--inv, 1)); transform-origin: 50% 100%; }
.evo-local { all: unset; position: absolute; width: 0; height: 0; cursor: pointer; z-index: 1; }
.evo-local .ponto { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #ffd21f; border: 2px solid #0e2a47; transform-origin: 0 0; transform: scale(var(--inv, 1)) translate(-6px, -6px); }
.evo-local .nome { position: absolute; left: 0; top: 0; white-space: nowrap; background: rgba(14, 42, 71, .86); color: #f7fcff; padding: 1px 5px; font: 600 12px/16px var(--data); transform-origin: 0 0; }
.evo-local:hover .nome, .evo-local:focus-visible .nome { background: #0e2a47; outline: 2px solid #ffd21f; }
.evo-local:focus-visible .ponto { outline: 3px solid var(--storm); }
.evo-local.ativo { z-index: 3; }
.evo-local.ativo .nome { background: #ffd21f; color: #0e2a47; }
.evo-local.ativo .ponto { background: #f7fcff; }
@media (max-width: 760px) { .evo-local .nome { font-size: 11px; line-height: 14px; padding: 1px 4px; } }
.camadas { display: flex; gap: 8px; flex-wrap: wrap; }
/* Mapa da comunidade: painel lateral recolhível à esquerda e mapa grande à direita, com o zoom no canto. */
.com-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.com-layout.recolhido { grid-template-columns: minmax(0, 1fr); }
.com-layout.recolhido .com-lateral { display: none; }
.com-lateral { display: grid; gap: 12px; background: var(--panel); border-radius: 16px; padding: 14px; max-height: calc(100vh - 90px); overflow-y: auto; position: sticky; top: 72px; }
.com-lateral .camadas { flex-direction: column; flex-wrap: nowrap; }
.com-grupo-cat { display: grid; gap: 6px; }
.com-grupo-cat[hidden] { display: none; }
.com-grupo-cat summary { cursor: pointer; font-weight: 700; padding: 6px 4px; border-radius: 10px; }
.com-grupo-cat summary:focus-visible { outline: 3px solid #ffd21f; }
.com-grupo-cat[open] summary { margin-bottom: 4px; }
.com-grupo-cat .camada { display: flex; margin: 0 0 6px 10px; }
.com-grupo-cat .com-g-todas { font-weight: 600; background: transparent; padding-block: 2px; }
.com-lateral .com-painel { border-radius: 12px; }
.com-lat-titulo { font-size: 1.1rem; }
.com-mapa { position: relative; min-width: 0; display: grid; gap: 8px; }
.com-mapa .evo-palco { width: min(100%, calc(100vh - 90px)); margin-inline: 0; }
.camada[hidden] { display: none; }
.com-recolher { justify-self: start; }
.com-zoom-botoes { position: absolute; top: 56px; left: 10px; z-index: 4; pointer-events: none; flex-direction: column; align-items: flex-start; }
.com-zoom-botoes .botao { pointer-events: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.com-zoom-botoes #com-status { background: var(--panel); border-radius: 10px; padding: 4px 8px; max-width: 220px; pointer-events: none; }
.com-zoom-botoes #com-status:empty { display: none; }
@media (max-width: 760px) { .com-layout { grid-template-columns: minmax(0, 1fr); } .com-lateral { position: static; max-height: none; } .com-zoom-botoes { top: 56px; left: 8px; } }
.camada { display: inline-flex; gap: 6px; align-items: center; background: var(--panel); padding: 6px 10px; font-size: .9rem; }
.camada.vazia { color: var(--muted); }
.com-painel { background: var(--panel); padding: 14px 16px; display: grid; gap: 10px; border-left: 6px solid var(--signal); }
.com-painel[hidden] { display: none; }
.com-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.com-painel .botao[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.com-icone { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cor); color: #0e2a47; border: 2px solid #0e2a47; flex: none; }
.com-icone svg { width: 12px; height: 12px; fill: currentColor; }
.com-marca { all: unset; position: absolute; width: 0; height: 0; cursor: pointer; z-index: 2; }
.com-marca .com-icone { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--inv, 1)) translate(-13px, -13px); border-color: #f7fcff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.com-marca.ativo .com-icone { outline: 3px solid #ffd21f; }
.com-marca:focus-visible .com-icone { outline: 3px solid #ffd21f; }
.com-marca.pendente .com-icone { border-style: dashed; animation: none; }
.com-marca.equipe .com-icone { box-shadow: 0 0 0 2px #ffd21f, 0 1px 4px rgba(0, 0, 0, .5); }
.com-selo { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #ffd21f; color: #0e2a47; font-size: .8em; font-weight: 700; }
.com-equipe { border: 2px solid #ffd21f; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.com-eq-barra { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.com-eq-barra .botao { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: .85em; }
.com-eq-barra .botao[aria-pressed="true"] { outline: 3px solid #ffd21f; }
.mapa-com { margin: 6px 0 10px; }
.mapa-com summary { cursor: pointer; font-weight: 700; }
.mapa-com .camadas { margin-top: 8px; }
.ls-nome { margin: 10px 0 6px; font-size: 1.2rem; overflow-wrap: anywhere; }
.ls-quadro .nv-linha { grid-template-columns: 1fr; }
.ls-quadro [data-ls-secao] { transition: box-shadow .15s; border-radius: 14px; }
.ls-quadro [data-ls-secao].ls-sobre { box-shadow: 0 0 0 3px var(--nv, #2fe0ff); }
[data-ls-tirar], [data-ls-add] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ls-origem { opacity: .35; }
.ls-votacao { margin-top: 18px; padding-top: 6px; border-top: 1px solid rgba(127,127,160,.3); }
.ls-vot-titulo { margin: 8px 0 4px; font-size: 1.15rem; }
.ls-vot-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.ls-vot { padding: 10px 12px; border-radius: 14px; background: rgba(127,127,160,.1); min-width: 0; }
.ls-vot.minha { box-shadow: 0 0 0 2px #ff3ba0; }
.ls-vot-topo { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 6px; }
.ls-vot-topo a { margin-left: auto; font-weight: 700; }
.ls-fantasma { position: fixed; z-index: 1000; pointer-events: none; margin: 0; transform: rotate(-3deg) scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity: .95; }
.ls-quadro .nv-linha .ls-rotulo { font-size: 1rem; min-height: 34px; justify-items: start; padding: 0 12px; }
.ofi-marca { all: unset; position: absolute; width: 0; height: 0; cursor: pointer; z-index: 3; }
.ofi-marca .ofi-icone { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 6px; background: #2a1a5e; border: 2px solid #ffd21f; color: #ffd21f; display: grid; place-items: center; font: 800 13px/1 sans-serif; transform-origin: 0 0; transform: scale(var(--inv, 1)) translate(-13px, -30px) rotate(45deg); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.ofi-marca .ofi-icone span { transform: rotate(-45deg); }
.ofi-marca.ativo .ofi-icone, .ofi-marca:focus-visible .ofi-icone { outline: 3px solid #f7fcff; }
.ofi-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ofi-lista li { border: 1px solid rgba(255, 210, 31, .5); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.ofi-lista li.ativo { border-color: #ffd21f; box-shadow: 0 0 0 2px #ffd21f inset; }
.ofi-lista strong { display: block; }
#com-palco.marcando { cursor: crosshair; }
.com-raio { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--inv, 1)) translate(-50%, -50%); display: inline-flex; align-items: center; gap: 3px; min-width: 34px; height: 34px; padding: 0 8px; box-sizing: border-box; justify-content: center; border-radius: 999px; background: var(--cor); color: #0e2a47; border: 2px solid #f7fcff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor) 35%, transparent), 0 1px 6px rgba(0, 0, 0, .5); font: 700 .85rem var(--data); }
.com-grupo { z-index: 3; }
.com-raio svg { width: 12px; height: 12px; fill: currentColor; }
.com-grupo:focus-visible .com-raio, .com-grupo:hover .com-raio { outline: 3px solid #ffd21f; }
.com-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.com-lista .botao { width: 100%; text-align: left; }
.ilha svg { display: block; width: 100%; height: auto; background: var(--panel); }
.ponto circle { fill: var(--ink); }
.ponto text { fill: var(--sky); font: 500 11px var(--data); text-anchor: middle; }
.ponto.ativo circle { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }
.ponto.ativo text { fill: var(--on-signal); }
.grade line { stroke: var(--line); stroke-width: 1; }

.post { background: var(--panel); padding: 20px; display: grid; gap: 10px; }
.post ul { margin: 0; padding-left: 20px; max-width: 65ch; }
/* Tela de carregamento: controle de videogame próprio do SequeLariFN (desenho nosso, sem símbolos de marca), pulando, apertando botões e soltando moedas. Some sozinha em 8 s mesmo sem script. */
.carregando { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #1d4a78 0, #0e2a47 65%); color: #eaf4fb; animation: carr-some .4s ease 8s forwards; }
.carregando.saindo { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.carr-caixa { display: grid; justify-items: center; gap: 10px; padding: 16px; }
.carr-boneco { width: min(56vw, 240px); height: auto; overflow: visible; }
.carr-ctl { fill: #2fe0ff; stroke: #0e2a47; stroke-width: 4; stroke-linejoin: round; }
.carr-ombro { fill: #a184ff; stroke: #0e2a47; stroke-width: 3.5; stroke-linejoin: round; }
.carr-cruz { fill: #0e2a47; }
.carr-botao { stroke: #0e2a47; stroke-width: 2.5; } .carr-botao.b1 { fill: #ffd21f; } .carr-botao.b2 { fill: #ff8a3d; } .carr-botao.b3 { fill: #ff5fa2; } .carr-botao.b4 { fill: #a184ff; }
.carr-base { fill: #0e2a47; } .carr-topo { fill: #5d7fa6; }
.carr-listra.l1 { fill: #ffd21f; } .carr-listra.l2 { fill: #ff5fa2; }
.carr-olho { fill: #0e2a47; } .carr-luz { fill: #f7fcff; } .carr-bochecha { fill: #ff5fa2; opacity: .7; }
.carr-boca { fill: none; stroke: #0e2a47; stroke-width: 3; stroke-linecap: round; }
.carr-moeda circle { fill: #ffd21f; stroke: #0e2a47; stroke-width: 3; } .carr-moeda path { stroke: #0e2a47; stroke-width: 2.5; stroke-linecap: round; }
.carr-brilho { fill: #f7fcff; opacity: 0; } .carr-brilho.e { fill: #2fe0ff; }
.carr-moeda { opacity: 0; }
.carr-sombra { fill: rgba(0, 0, 0, .3); }
.carr-texto { margin: 0; font: italic 900 clamp(2rem, 8vw, 3.6rem)/1 var(--display, Arial Black, Arial, sans-serif); text-transform: uppercase; letter-spacing: .02em; color: #ffd21f; text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
/* O mesmo controle, pequeno, ao lado dos textos "Carregando" de cada seção. */
.mini-carr { display: flex; align-items: center; gap: 10px; font-style: italic; font-weight: 700; }
.mini-carr::before { content: ""; flex: none; width: 40px; height: 40px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgNzAgMTIwIDgwIj48cGF0aCBkPSJNMTYgOTAgUTE4IDc2IDMyIDc2IEw0NCA3NiBMNDQgODggWiBNMTA0IDkwIFExMDIgNzYgODggNzYgTDc2IDc2IEw3NiA4OCBaIiBmaWxsPSIjYTE4NGZmIiBzdHJva2U9IiMwZTJhNDciIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0zMCA4NCBIOTAgUTEwOCA4NCAxMTIgMTA0IEwxMTYgMTI4IFExMTggMTQ2IDEwMyAxNDYgUTk1IDE0NiA5MCAxMzYgTDg2IDEzMCBIMzQgTDMwIDEzNiBRMjUgMTQ2IDE3IDE0NiBRMiAxNDYgNCAxMjggTDggMTA0IFExMiA4NCAzMCA4NCBaIiBmaWxsPSIjMmZlMGZmIiBzdHJva2U9IiMwZTJhNDciIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yNyA5NSBIMzMgVjEwMSBIMzkgVjEwNyBIMzMgVjExMyBIMjcgVjEwNyBIMjEgVjEwMSBIMjcgWiIgZmlsbD0iIzBlMmE0NyIvPjxjaXJjbGUgY3g9IjkxIiBjeT0iOTUiIHI9IjUiIGZpbGw9IiNmZmQyMWYiLz48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDQiIHI9IjUiIGZpbGw9IiNmZjhhM2QiLz48Y2lyY2xlIGN4PSI5MSIgY3k9IjExMyIgcj0iNSIgZmlsbD0iI2ZmNWZhMiIvPjxjaXJjbGUgY3g9IjgyIiBjeT0iMTA0IiByPSI1IiBmaWxsPSIjYTE4NGZmIi8+PGNpcmNsZSBjeD0iNTIiIGN5PSI5OCIgcj0iNC41IiBmaWxsPSIjMGUyYTQ3Ii8+PGNpcmNsZSBjeD0iNjgiIGN5PSI5OCIgcj0iNC41IiBmaWxsPSIjMGUyYTQ3Ii8+PHBhdGggZD0iTTU0IDEwNCBRNjAgMTEwIDY2IDEwNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGUyYTQ3IiBzdHJva2Utd2lkdGg9IjMuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHJlY3QgeD0iNDAiIHk9IjEyMiIgd2lkdGg9IjQwIiBoZWlnaHQ9IjMuNSIgcng9IjEuNSIgZmlsbD0iI2ZmZDIxZiIvPjwvc3ZnPg==") no-repeat center / contain; transform-origin: 50% 90%; }
@media (prefers-reduced-motion: no-preference) { .mini-carr::before { animation: carr-pulo .6s ease-in-out infinite alternate; } }
@keyframes carr-some { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: no-preference) {
  .carr-corpo { transform-origin: 60px 140px; animation: carr-salto 1.2s cubic-bezier(.3, .7, .4, 1) infinite; }
  .carr-ombro { transform-box: fill-box; transform-origin: center bottom; animation: carr-ombro 1.2s ease-in-out infinite; }
  .carr-botao { transform-box: fill-box; transform-origin: center; animation: carr-botao 1.2s ease-in-out infinite; }
  .carr-botao.b2 { animation-delay: .15s; } .carr-botao.b3 { animation-delay: .3s; } .carr-botao.b4 { animation-delay: .45s; }
  .carr-alavanca.esq { animation: carr-alav-e 1.2s ease-in-out infinite; } .carr-alavanca.dir { animation: carr-alav-d 1.2s ease-in-out infinite; }
  .carr-moeda.a { animation: carr-moeda-a 1.2s ease-out infinite; }
  .carr-moeda.b { animation: carr-moeda-b 1.2s ease-out .08s infinite; }
  .carr-moeda.c { animation: carr-moeda-c 1.2s ease-out .16s infinite; }
  .carr-brilho { transform-box: fill-box; transform-origin: center; }
  .carr-brilho.d { animation: carr-brilho-d 1.2s ease-out infinite; }
  .carr-brilho.e { animation: carr-brilho-e 1.2s ease-out .1s infinite; }
  .carr-sombra { transform-origin: 60px 150px; animation: carr-sombra-b 1.2s cubic-bezier(.3, .7, .4, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .carr-moeda.a { opacity: 1; transform: translate(30px, -72px); } .carr-moeda.c { opacity: 1; transform: translate(46px, -44px); } }
@keyframes carr-pulo { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10px) rotate(6deg); } }
@keyframes carr-salto { 0%, 100% { transform: translateY(0) scale(1.07, .93); } 35% { transform: translateY(-20px) scale(.96, 1.05); } 62% { transform: translateY(0) scale(1.06, .94); } 75% { transform: translateY(0) scale(.98, 1.02); } }
@keyframes carr-ombro { 0%, 55%, 100% { transform: translateY(0); } 65% { transform: translateY(3px) scaleY(.8); } }
@keyframes carr-botao { 0%, 30%, 100% { transform: scale(1); filter: none; } 15% { transform: scale(.72); filter: brightness(1.5); } }
@keyframes carr-alav-e { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, -1px); } 50% { transform: translate(1px, 2px); } 75% { transform: translate(2px, -1px); } }
@keyframes carr-alav-d { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(2px, 1px); } 50% { transform: translate(-1px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes carr-moeda-a { 0%, 28% { opacity: 0; transform: translate(0, 0); } 36% { opacity: 1; } 75% { opacity: 1; transform: translate(-30px, -62px) rotate(-20deg); } 100% { opacity: 0; transform: translate(-38px, -40px) rotate(-30deg); } }
@keyframes carr-moeda-b { 0%, 28% { opacity: 0; transform: translate(0, 0); } 36% { opacity: 1; } 75% { opacity: 1; transform: translate(4px, -80px); } 100% { opacity: 0; transform: translate(6px, -62px); } }
@keyframes carr-moeda-c { 0%, 28% { opacity: 0; transform: translate(0, 0); } 36% { opacity: 1; } 75% { opacity: 1; transform: translate(32px, -60px) rotate(20deg); } 100% { opacity: 0; transform: translate(40px, -38px) rotate(30deg); } }
@keyframes carr-brilho-d { 0%, 35% { opacity: 0; transform: translate(0, 0) scale(.2); } 55% { opacity: 1; transform: translate(-40px, -50px) scale(1.2); } 80%, 100% { opacity: 0; transform: translate(-46px, -56px) scale(.3); } }
@keyframes carr-brilho-e { 0%, 35% { opacity: 0; transform: translate(0, 0) scale(.2); } 55% { opacity: 1; transform: translate(42px, -70px) scale(1); } 80%, 100% { opacity: 0; transform: translate(48px, -76px) scale(.3); } }
@keyframes carr-sombra-b { 0%, 62%, 100% { transform: scaleX(1); } 35% { transform: scaleX(.7); opacity: .6; } }
.blog-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.blog-paginas { margin-top: 18px; }
.blog-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.blog-cartao { background: var(--panel); padding: 18px; display: grid; gap: 8px; align-content: start; border-top: 6px solid var(--signal); text-decoration: none; overflow: hidden; }
.blog-cartao.com-capa { border-top: 0; padding-top: 0; }
.blog-capa-mini { margin: 0 -18px 6px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--cor, #1d4670), #0e2a47); display: grid; place-items: center; overflow: hidden; }
.blog-capa-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-capa-mini.item img { object-fit: contain; padding: 8%; box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { .blog-cartao:hover .blog-capa-mini img { transform: scale(1.05); } }
.artigo-capa { margin: 0; display: grid; gap: 6px; }
.artigo-capa .moldura, .artigo-img .moldura { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 8; background: linear-gradient(135deg, var(--cor, #1d4670), #0e2a47); display: grid; place-items: center; }
.artigo-capa img, .artigo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artigo-capa.item img, .artigo-img.item img { object-fit: contain; padding: 4%; box-sizing: border-box; }
.artigo-img { margin: 6px 0; display: grid; gap: 6px; }
.artigo figcaption { font-size: .8rem; color: var(--muted); }
.artigo-dica { background: color-mix(in srgb, var(--signal) 22%, var(--panel)); border-left: 6px solid var(--signal); border-radius: 12px; padding: 12px 16px; max-width: 65ch; }
.artigo-dica strong { display: block; font-family: var(--data, monospace); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.artigo-dica p { margin: 0; }
.artigo-ilustra { margin: 6px 0; display: grid; gap: 6px; max-width: 760px; min-width: 0; }
.artigo-ilustra-rola { overflow-x: auto; max-width: 100%; border-radius: 14px; }
.artigo-ilustra svg { width: 100%; min-width: 560px; height: auto; display: block; color: var(--ink, #0e2a47); background: color-mix(in srgb, var(--storm) 8%, var(--panel)); border-radius: 14px; padding: 8px; box-sizing: border-box; }
.blog-quiz, .blog-check, .blog-ferramenta { background: color-mix(in srgb, var(--storm) 12%, var(--panel)); border: 2px solid color-mix(in srgb, var(--storm) 40%, transparent); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; max-width: 70ch; min-width: 0; }
.bq-pergunta { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.bq-pergunta legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.bq-ops { display: grid; gap: 6px; }
.bq-op { text-align: left; padding: 9px 12px; border-radius: 10px; border: 2px solid rgba(14, 42, 71, .2); background: var(--panel); color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.bq-op:hover:not(:disabled) { border-color: var(--storm); }
.bq-op:disabled { cursor: default; opacity: .75; }
.bq-op.certa { border-color: #1f9d55; background: color-mix(in srgb, #1f9d55 18%, var(--panel)); opacity: 1; }
.bq-op.errada { border-color: #d64545; background: color-mix(in srgb, #d64545 16%, var(--panel)); opacity: 1; }
.bq-por { margin: 0; }
.bq-placar { margin: 0; font-weight: 800; font-size: 1.1rem; }
.bq-denovo { justify-self: start; }
.blog-enq { max-width: 70ch; }
.artigo .blog-check ul { list-style: none; padding: 0; max-width: none; }
.blog-check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.blog-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--storm); }
.blog-check p, .blog-ferramenta p { margin: 0; }
.blog-ferramenta .botao { justify-self: start; }
.artigo-destaque { font-size: 1.25rem; font-weight: 700; border-left: 4px solid var(--storm); padding: 4px 0 4px 16px; max-width: 60ch; margin: 6px 0; }
.artigo-tabela { overflow-x: auto; max-width: 100%; }
.artigo-tabela table { border-collapse: collapse; width: 100%; min-width: 320px; font-size: .95rem; }
.artigo-tabela th, .artigo-tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.artigo-tabela thead th { font-family: var(--data, monospace); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.blog-cartao:hover h3 { text-decoration: underline; }
.blog-cartao .eyebrow { overflow-wrap: anywhere; }
.artigo { background: var(--panel); padding: clamp(18px, 4vw, 36px); display: grid; gap: 14px; min-width: 0; max-width: 900px; width: 100%; margin-inline: auto; box-sizing: border-box; }
[data-view="privacidade"] { max-width: 900px; width: 100%; margin-inline: auto; }
#blog-area:has(.artigo) .blog-aviso-idioma { max-width: 900px; width: 100%; margin-inline: auto; }
.artigo h2 { font-size: clamp(2rem, 5vw, 3rem); }
.artigo h3 { margin-top: 14px; }
.artigo ul { margin: 0; padding-left: 20px; max-width: 65ch; display: grid; gap: 6px; }
.artigo-fontes { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.artigo-fontes a { overflow-wrap: anywhere; }
.redes { display: flex; gap: 10px; flex-wrap: wrap; }
.rede { background: var(--panel); padding: 12px 16px; font-weight: 700; }
.rede span { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }

.rodape { position: relative; margin-top: 56px; color: #cfe3f2; background: radial-gradient(circle at 15% 0%, #1d4670 0%, transparent 55%), radial-gradient(circle at 90% 100%, #2a1f5c 0%, transparent 50%), #0a1830; }
.rodape-onda { position: absolute; left: 0; top: -38px; width: 100%; height: 40px; fill: #0a1830; display: block; }
.rodape-corpo { display: grid; grid-template-columns: minmax(220px, 1.2fr) 3fr; gap: 32px; padding: 36px clamp(16px, 4vw, 56px) 28px; }
.rodape-marca { display: grid; gap: 12px; align-content: start; }
.rodape-marca .marca { font-size: 2rem; }
.rodape-marca p { margin: 0; color: #a9c4da; max-width: 34ch; }
.rodape-topo { justify-self: start; color: #0e2a47 !important; background: #ffd21f; font-weight: 700; text-decoration: none; padding: 8px 16px; border-radius: 999px; transition: transform .2s; }
.rodape-topo:hover { transform: translateY(-2px); }
.rodape-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.rodape-links div { display: grid; gap: 8px; align-content: start; }
.rodape-links h3 { margin: 0 0 4px; font: 900 1.05rem var(--display); text-transform: uppercase; color: #ffd21f; letter-spacing: .02em; }
.rodape-links a { color: #e6f2fb; text-decoration: none; width: fit-content; border-radius: 6px; transition: color .15s, transform .15s; }
.rodape-links a:hover, .rodape-links a:focus-visible { color: #ffd21f; transform: translateX(3px); }
.rodape-base { display: grid; gap: 4px; padding: 16px clamp(16px, 4vw, 56px) 22px; border-top: 1px solid rgba(207, 227, 242, .14); font-size: .8rem; color: #8fabc3; }
.rodape-base strong { color: #cfe3f2; font-weight: 600; }
.rodape-base a { color: #cfe3f2; }
@media (max-width: 760px) { .rodape-corpo { grid-template-columns: minmax(0, 1fr); } .rodape-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.travado { overflow: hidden; }
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel); color: var(--ink); border-top: 4px solid var(--signal); box-shadow: 0 -4px 18px rgba(10, 26, 47, .25); padding: 14px 16px; }
.cookies[hidden] { display: none; }
.cookies .wrap { display: grid; gap: 10px; }
.cookies p { margin: 0; }
.cookies-link { all: unset; cursor: pointer; text-decoration: underline; }
.cookies-link:focus-visible { outline: 3px solid #ffd21f; }
.parceiro-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(10, 26, 47, .72); display: grid; place-items: center; padding: 16px; }
.parceiro-fundo[hidden] { display: none; }
.parceiro-caixa { background: var(--panel); color: var(--ink); max-width: 520px; width: 100%; padding: 22px; display: grid; gap: 12px; border-top: 6px solid var(--signal); }
.parceiro-caixa h2 { margin: 0; font-size: 1.4rem; }
.parceiro-caixa p { margin: 0; }
.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
/* Adivinhe o local: recorte do mapa que abre a cada erro. */
.adv-jogo { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 700px) { .adv-jogo { grid-template-columns: minmax(0, 1fr); } }
.adv-recorte { position: relative; aspect-ratio: 1; width: 100%; max-width: 360px; overflow: hidden; border-radius: 18px; background: #0b1a31; box-shadow: inset 0 0 0 3px var(--signal); }
.adv-recorte img { position: absolute; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: no-preference) { .adv-recorte img { transition: left .6s ease, top .6s ease, width .6s ease; } }
.adv-alvo { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid var(--signal); box-shadow: 0 0 0 3px rgba(0, 0, 0, .45); }
.adv-alvo[hidden] { display: none; }
.adv-lado { display: grid; gap: 10px; align-content: start; min-width: 0; }
.adv-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.adv-form .campo { flex: 1 1 220px; min-width: 0; }
.adv-form select { width: 100%; }
.adv-quadros { margin: 0; font-size: 1.5rem; letter-spacing: .15em; min-height: 1.5em; }
.adv-lista { margin: 0; padding-left: 1.3em; display: grid; gap: 2px; }
.adv-lista .ok { color: var(--r-incomum); font-weight: 700; }
.adv-lista .erro { text-decoration: line-through; color: var(--muted); }
/* Bingo da semana: cartela 5 × 5 com desafios próprios. */
.bg-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 640px; width: 100%; justify-self: center; }
.bg-casa { aspect-ratio: 1; border: 0; border-radius: 12px; padding: 4px; cursor: pointer; background: var(--sky); color: var(--ink); font: 600 clamp(.58rem, 1.9vw, .82rem)/1.15 var(--body); display: grid; place-items: center; text-align: center; overflow: hidden; overflow-wrap: anywhere; box-shadow: inset 0 0 0 1px var(--line); }
.bg-casa[aria-pressed="true"] { background: linear-gradient(135deg, #2a6df4, #7b3fe4); color: #fff; box-shadow: none; }
.bg-casa.livre { background: var(--signal); color: var(--on-signal); cursor: default; font-family: var(--display); font-weight: 900; font-size: clamp(.8rem, 2.6vw, 1.1rem); text-transform: uppercase; }
.bg-casa.linha { box-shadow: 0 0 0 3px var(--signal); }
.bg-casa:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .bg-casa { transition: transform .2s ease, background .2s ease; } .bg-casa.festa { animation: bg-festa .7s ease; } }
@keyframes bg-festa { 30% { transform: scale(1.12) rotate(-3deg); } 60% { transform: scale(.96) rotate(2deg); } }
/* Comparador de armários na Conta. */
.ac-caixa { display: grid; gap: 10px; }
.ac-caixa h3, .ac-caixa h4, .ac-caixa p { margin: 0; }
.ac-link { width: 100%; min-width: 0; font: 500 .85rem var(--data); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--sky); color: inherit; }
.ac-res { display: grid; gap: 10px; }
.ac-numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ac-numeros li { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: var(--sky); text-align: center; font-size: .85rem; }
.ac-numeros b { font: 800 1.6rem var(--display, inherit); }
.ac-tabelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.ac-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ac-valor { margin-top: 12px; }
.ac-tab caption { text-align: left; font-weight: 700; padding-bottom: 4px; }
.ac-tab th, .ac-tab td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.ac-tab th[scope="row"] { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.ac-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.ac-lista a { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 10px; background: var(--sky); color: inherit; text-decoration: none; font-size: .85rem; min-width: 0; }
.ac-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-lista img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.ac-caixa summary { cursor: pointer; font-weight: 700; }
/* Sequência diária: chama no topo e caixa na Conta. */
.seq-topo { display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 9px 0 6px; border-radius: 999px; background: #1d4670; border: 1px solid rgba(247, 252, 255, .35); color: #ffd23f; font: 700 .9rem var(--data); text-decoration: none; flex: none; }
.seq-topo[hidden] { display: none; }
@media (max-width: 420px) { .seq-topo { padding: 0 6px 0 3px; gap: 1px; font-size: .8rem; } .seq-topo svg { width: 14px; height: 14px; } .topo .marca-linha .marca { font-size: 1.35rem; } .topo .marca-linha .idioma { min-width: 72px; } .topo .marca-linha { gap: 6px; } }
@media (max-width: 360px) { .topo .marca-linha .marca { font-size: 1.05rem; } .topo .marca-linha .idioma { min-width: 60px; max-width: 66px; } .topo .marca-linha { gap: 4px; } .seq-topo svg { display: none; } .seq-topo { padding: 0 7px; } }
.seq-topo svg, .seq-numero svg { width: 18px; height: 18px; fill: #ff8a3d; stroke: #ffd23f; stroke-width: 1.2; }
.seq-topo:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .seq-topo.seq-festa { animation: cr-pulo .8s ease 3; } .seq-numero svg { animation: seq-chama 1.6s ease-in-out infinite; transform-origin: 50% 100%; } }
@keyframes seq-chama { 50% { transform: scale(1.08) rotate(-3deg); } }
.seq-caixa { display: grid; gap: 12px; }
.seq-topo-caixa { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.seq-numero { display: grid; justify-items: center; min-width: 110px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, #ff8a3d, #e4572e); color: #fff; }
.seq-numero svg { width: 34px; height: 34px; }
.seq-numero b { font: 800 2.6rem/1 var(--display, inherit); }
.seq-info { display: grid; gap: 4px; min-width: 0; flex: 1 1 240px; }
.seq-info h3, .seq-info p { margin: 0; }
.seq-frase { font-size: 1.15rem; font-style: italic; font-weight: 600; overflow-wrap: anywhere; }
.seq-novo { font-weight: 800; color: #e4572e; }
.seq-selos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.seq-selos li { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--sky); opacity: .6; text-align: center; }
.seq-selos li.ok { opacity: 1; background: linear-gradient(135deg, #ffd23f, #ff8a3d); color: #0a1a2f; }
.seq-selos b { font: 800 1.4rem var(--display, inherit); }
.seq-selos span { font-size: .78rem; }
/* Aviso da loja nova: faixa sob o topo e selo no menu Loja. */
.avl-link { position: relative; }
.avl-selo { position: absolute; top: -2px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e4572e; color: #fff; font: 700 .7rem/18px var(--data); text-align: center; }
.avl-selo[hidden] { display: none; }
.aviso-loja { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(90deg, #ffd23f, #ffb03f); color: #0a1a2f; }
.aviso-loja[hidden] { display: none; }
.avl-texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.avl-itens { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.avl-itens a { display: flex; align-items: center; gap: 6px; max-width: 180px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .6); color: inherit; text-decoration: none; font-size: .85rem; }
.avl-itens a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avl-itens img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; }
.avl-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-loja .botao.forte { background: #0e2a47; border-color: #0e2a47; color: #fff; }
@media (prefers-reduced-motion: no-preference) { .aviso-loja:not([hidden]) { animation: avl-entra .4s ease; } }
@keyframes avl-entra { from { transform: translateY(-8px); opacity: 0; } }
/* Modo carreira dos Jogos: personagem próprio em SVG, missões e armário de trajes. */
.cr-jogo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
@media (max-width: 760px) { .cr-jogo { grid-template-columns: 1fr; } }
.cr-perfil { align-self: start; display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #2a6df4, #7b3fe4); color: #fff; border-radius: 18px; padding: 14px; min-width: 0; }
.cr-boneco { flex: none; width: 120px; display: grid; place-items: center; }
.cr-boneco svg { width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) { .cr-boneco svg { animation: cr-respira 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .cr-aviso.cr-pulo { animation: cr-pulo .6s ease; } }
@keyframes cr-respira { 50% { transform: translateY(-4px) scale(1.02); } }
@keyframes cr-pulo { 40% { transform: scale(1.25); } }
.cr-dados { display: grid; gap: 4px; min-width: 0; flex: 1; }
.cr-dados b { font: 800 1.6rem var(--display, inherit); }
.cr-trilho { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.cr-trilho i { display: block; height: 100%; background: #ffd23f; border-radius: 999px; }
.cr-dados small { opacity: .9; }
.cr-aviso { font: 700 .95rem var(--data); color: var(--r-incomum); display: inline-block; }
.cr-missoes h4 { margin: 0 0 6px; }
.cr-missoes ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.cr-missao { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--sky); border-radius: 12px; padding: 10px 12px; }
.cr-missao span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; position: relative; }
.cr-missao small { color: var(--muted); }
.cr-missao .botao { position: relative; flex: none; }
.cr-missao.feita { opacity: .7; }
.cr-missao .botao:disabled { opacity: .55; cursor: not-allowed; }
.cr-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--signal); }
.cr-ok { color: #2e9e4f; flex: none; }
.cr-abas { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-abas button { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--sky); color: inherit; font-weight: 700; cursor: pointer; }
.cr-abas button[aria-selected="true"] { background: var(--signal); color: var(--on-signal); }
.cr-armario { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 10px; }
.cr-peca { display: grid; justify-items: center; gap: 2px; border: 0; border-radius: 14px; padding: 10px 6px; background: var(--sky); color: inherit; cursor: pointer; }
.cr-peca svg { height: 80px; width: auto; }
.cr-peca small { color: var(--muted); text-align: center; }
.cr-peca[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--signal); }
.cr-peca:disabled { cursor: not-allowed; opacity: .5; }
.cr-peca:focus-visible, .cr-cor:focus-visible, .cr-abas button:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
.cr-cores { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-cores span { width: 100%; font-weight: 700; }
.cr-cor { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.cr-cor[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--signal); }
@media (prefers-reduced-motion: no-preference) { .cr-peca { transition: transform .2s ease; } .cr-peca:not(:disabled):hover { transform: translateY(-3px) rotate(-2deg); } }
/* Minijogos: jogo da memória com ícones próprios. */
.mj-caixa { background: var(--panel); border-radius: 20px; padding: 18px; display: grid; gap: 10px; }
.mj-placar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font: 600 .95rem var(--data); }
.mj-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 520px; width: 100%; justify-self: center; }
.mj-carta { aspect-ratio: 1; border: 0; border-radius: 14px; cursor: pointer; padding: 0; background: linear-gradient(135deg, #2a6df4, #7b3fe4); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.mj-carta::before { content: "?"; font: 800 1.8rem var(--display, inherit); opacity: .55; }
.mj-carta svg { display: none; width: 58%; height: 58%; }
.mj-carta[data-virada="1"], .mj-carta[data-par="1"] { background: var(--sky); color: var(--ink); }
.mj-carta[data-virada="1"]::before, .mj-carta[data-par="1"]::before { content: none; }
.mj-carta[data-virada="1"] svg, .mj-carta[data-par="1"] svg { display: block; }
.mj-carta[data-par="1"] { box-shadow: 0 0 0 3px var(--signal); cursor: default; }
.mj-carta:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
.mj-fim { margin: 0; font-weight: 700; font-size: 1.1rem; }
.pl-abas .botao[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.pl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-lista li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--sky); font-weight: 500; }
.pl-lista li.eu { outline: 2px solid var(--signal); }
.pl-lista .pl-pos { font: 700 1rem var(--data); }
.pl-lista .pl-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-lista .pl-val { font: 600 .95rem var(--data); }
.pl-lista li.pl-vazio { display: block; background: none; padding: 0; color: var(--muted); }
.pl-aviso { font-size: .8rem; }
.qz-lista { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; }
.qz-pergunta p { margin: 0 0 6px; overflow-wrap: anywhere; }
.qz-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-opcao { max-width: 100%; white-space: normal; text-align: left; }
.qz-opcao[data-qz="certa"] { background: #2e9e4f; border-color: #2e9e4f; color: #fff; opacity: 1; }
.qz-opcao[data-qz="errada"] { background: #e4572e; border-color: #e4572e; color: #fff; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .mj-carta { transition: transform .25s ease; } .mj-carta[data-virada="1"] { animation: mj-vira .3s ease; } }
@keyframes mj-vira { from { transform: rotateY(90deg); } }
.rf-painel { min-height: 180px; border: 0; border-radius: 18px; cursor: pointer; font: 800 clamp(1.3rem, 4vw, 2rem) var(--display, inherit); color: #fff; background: linear-gradient(135deg, #2a6df4, #7b3fe4); padding: 16px; touch-action: manipulation; }
.rf-painel[data-estado="espera"] { background: linear-gradient(135deg, #c2185b, #6a1b9a); }
.rf-painel[data-estado="ja"] { background: #ffd23f; color: #0a1a2f; }
.rf-painel[data-estado="cedo"] { background: linear-gradient(135deg, #e4572e, #a4161a); }
.rf-painel:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
/* Jogos ao vivo: arte própria por código da ilha, sem imagem da fonte. */
.radar { background: var(--panel); border-radius: 20px; padding: 16px; display: grid; gap: 10px; margin-bottom: 16px; }
.radar[hidden] { display: none; }
.radar .evo-acoes { margin: 0; }
.radar-lista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.radar-item { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--sky); color: inherit; text-decoration: none; scroll-snap-align: start; min-width: 0; }
.radar-item:hover, .radar-item:focus-visible { box-shadow: 0 0 0 2px var(--signal); }
.radar-item h4 { margin: 0; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-sobe { font: 700 1.05rem var(--data); color: var(--r-incomum); }
.radar-item svg { width: 100%; height: 40px; }
.radar-item svg polyline { fill: none; stroke: var(--r-raro); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rel-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; margin: 0; }
.rel-dados div { background: var(--sky); border-radius: 12px; padding: 10px 12px; }
.rel-dados dt { font-size: .8rem; color: var(--muted); }
.rel-dados dd { margin: 0; font: 700 1.2rem var(--data); }
.av-favs { margin: 0 0 18px; } .av-favs h3 { margin: 0 0 10px; }
.av-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.av-cartao { display: grid; gap: 6px; background: var(--panel); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.av-arte { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, hsl(var(--h1) 75% 52%), hsl(var(--h2) 70% 34%)); display: grid; place-items: center; overflow: hidden; }
.av-arte::before, .av-arte::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.av-arte::before { width: 70%; aspect-ratio: 1; left: -18%; top: -30%; }
.av-arte::after { width: 45%; aspect-ratio: 1; right: -8%; bottom: -25%; }
.av-arte b { position: relative; font: 800 2.4rem var(--display, inherit); color: #fff; letter-spacing: .04em; text-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.av-ccu { position: absolute; left: 10px; bottom: 10px; z-index: 1; background: rgba(8, 24, 43, .78); color: #fff; border-radius: 999px; padding: 3px 10px; font: 600 .82rem var(--data); }
.av-ccu.sem { opacity: .8; font-weight: 500; }
.av-corpo { display: grid; gap: 2px; padding: 4px 14px 14px; min-width: 0; }
.av-corpo h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
.av-corpo small { color: var(--muted); overflow-wrap: anywhere; }
.av-paginas { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.fil-img.av-arte, .cos-det-img.av-arte { background: linear-gradient(135deg, hsl(var(--h1) 75% 52%), hsl(var(--h2) 70% 34%)); }
.cos-det-img.av-arte b { font-size: 4rem; }
.av-graf { width: 100%; height: 150px; display: block; }
.av-graf rect { fill: var(--signal); }
@media (prefers-reduced-motion: no-preference) { .av-cartao { transition: transform .18s ease, box-shadow .18s ease; } .av-cartao:hover, .av-cartao:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, .2); } }
/* Rankings da comunidade: cartões de entrada e lista com posição, nota e reações. */
.rk-entradas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.rk-entrada { position: relative; display: grid; gap: 6px; align-content: end; min-height: 170px; padding: 18px; border-radius: 18px; color: #fff; text-decoration: none; overflow: hidden; background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.rk-entrada svg { position: absolute; right: -10px; top: -10px; width: 120px; height: 120px; opacity: .28; fill: none; stroke: #fff; stroke-width: 1.6; }
.rk-entrada h3 { font-size: 1.35rem; color: #fff; }
.rk-entrada p { margin: 0; font-size: .92rem; opacity: .92; }
.rk-entrada .selo { justify-self: start; background: rgba(255, 255, 255, .22); color: #fff; }
.rk-breve { filter: saturate(.45); }
@media (prefers-reduced-motion: no-preference) {
  a.rk-entrada { transition: transform .2s ease, box-shadow .2s ease; }
  a.rk-entrada:hover, a.rk-entrada:focus-visible { transform: perspective(600px) rotateX(4deg) rotateY(-5deg) translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, .28); }
  .rk-linha:hover .rk-img img { animation: rk-pulo .5s ease; }
  .rk-cos .rk-img img { transition: transform .25s ease; }
  .rk-cos .rk-linha:hover .rk-img img { animation: none; transform: perspective(300px) rotateY(-18deg) rotateX(6deg) scale(1.08); }
  /* Cada tipo de cosmético com um movimento próprio no ranking. */
  .rk-cos .rk-linha[data-tipo="pickaxe"]:hover .rk-img img { transform: none; animation: rk-balanco .7s ease-in-out; transform-origin: 30% 80%; }
  .rk-cos .rk-linha[data-tipo="glider"]:hover .rk-img img, .rk-cos .rk-linha[data-tipo="contrail"]:hover .rk-img img { transform: none; animation: rk-voo 1.2s ease-in-out infinite alternate; }
  .rk-cos .rk-linha[data-tipo="emote"]:hover .rk-img img, .rk-cos .rk-linha[data-tipo="emoji"]:hover .rk-img img, .rk-cos .rk-linha[data-tipo="music"]:hover .rk-img img { transform: none; animation: rk-danca .6s ease-in-out infinite; }
  .rk-cos .rk-linha[data-tipo="backpack"]:hover .rk-img img, .rk-cos .rk-linha[data-tipo="pet"]:hover .rk-img img { transform: none; animation: rk-pulo .5s ease; }
}
@media (prefers-reduced-motion: no-preference) {
  .rk-temp .rk-img { position: relative; }
  .rk-temp .rk-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
  .rk-temp .rk-linha:hover .rk-img::after { animation: rk-brilho .8s ease; }
}
.rk-temp .rk-img img { width: 100%; height: 100%; object-fit: cover; }
.rk-temp .rk-linha:hover .rk-img img { animation: none; }
@keyframes rk-brilho { to { transform: translateX(120%); } }
@keyframes rk-balanco { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-24deg) scale(1.06); } 60% { transform: rotate(14deg); } }
@keyframes rk-voo { from { transform: translate(-4px, 4px) rotate(-4deg); } to { transform: translate(4px, -6px) rotate(4deg) scale(1.05); } }
@keyframes rk-danca { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-5px); } }
@keyframes rk-pulo { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px) scale(1.06); } 70% { transform: translateY(2px); } }
.rk-voltar { justify-self: start; }
.rk-pagina { display: grid; gap: 14px; }
.hi-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-bottom: 24px; }
.hi-guia { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--panel); border-top: 6px solid var(--c); text-decoration: none; color: inherit; }
.hi-guia h4 { margin: 0; } .hi-guia p { margin: 0; font-size: .92rem; }
@media (prefers-reduced-motion: no-preference) { .hi-guia { transition: transform .2s; } .hi-guia:hover { transform: translateY(-3px); } }
.hi-linha { list-style: none; margin: 14px 0 0; padding: 0 0 0 22px; border-left: 4px solid var(--line); display: grid; gap: 14px; }
.hi-temp { position: relative; }
.hi-ponto { position: absolute; left: -33px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 4px solid var(--line); }
.hi-temp.jogou .hi-ponto { background: var(--signal); border-color: var(--signal); }
.hi-cartao { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; background: var(--panel); border-radius: 16px; padding: 12px; }
.hi-cartao.sem-img { grid-template-columns: minmax(0, 1fr); }
.hi-cartao img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; background: var(--sky); }
.hi-cartao h4 { margin: 0 0 4px; }
.hi-jogou { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-weight: 600; }
.hi-breve { font-size: .85rem; margin: 6px 0 0; }
.hi-titulo { margin: 2px 0 6px; font-weight: 700; }
.hi-texto p { margin: 0 0 8px; line-height: 1.55; }
.hi-mais { margin-top: 8px; }
.hi-mais summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.hi-quiz { display: grid; gap: 10px; margin: 8px 0; }
.hi-q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hi-q legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.hi-op { display: flex; flex-wrap: wrap; gap: 6px; }
.hi-op button { border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line, rgba(127,127,127,.4)); background: var(--panel); color: inherit; cursor: pointer; font: inherit; }
.hi-op button.certa { background: #1f9d55; color: #fff; border-color: #1f9d55; }
.hi-op button.errada { background: #c53030; color: #fff; border-color: #c53030; }
.hi-op button:disabled { cursor: default; }
.hi-fontes { font-size: .82rem; margin: 6px 0 0; padding-left: 18px; }
.hi-fontes a { word-break: break-word; }
@media (max-width: 640px) { .hi-cartao { grid-template-columns: 1fr; } .hi-cartao img { width: 100%; height: auto; aspect-ratio: 1; } }
.nv-quadro { display: grid; gap: 8px; }
.nv-linha { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: stretch; background: var(--panel); border-radius: 14px; padding: 6px; border: 2px solid transparent; }
.nv-linha.nv-sobre { border-color: var(--nv); }
.nv-linha.nv-fora { grid-template-columns: 1fr; }
.nv-rotulo { border: 0; border-radius: 10px; background: var(--nv); color: #fff; font: 800 1.6rem/1 var(--display, inherit); min-height: 64px; display: grid; place-items: center; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.nv-linha.nv-fora .nv-rotulo { font-size: 1rem; min-height: 40px; }
button.nv-rotulo { cursor: pointer; }
.nv-itens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 64px; min-width: 0; }
.nv-vazio { padding: 0 8px; }
.nv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 2px solid transparent; background: var(--sky); color: inherit; font: inherit; font-size: .85rem; max-width: 100%; text-align: left; }
button.nv-chip { cursor: grab; }
.nv-chip[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 35%, transparent); }
.nv-chip img, .nv-sem-img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.5); display: grid; place-items: center; flex: none; }
.nv-chip span { overflow-wrap: anywhere; }
.nv-chip small { opacity: .75; }
.nc-quadro { display: grid; gap: 8px; margin-top: 12px; }
.nc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 2px solid transparent; background: var(--sky); color: inherit; font: inherit; font-size: .85rem; max-width: 100%; text-align: left; }
button.nc-chip { cursor: grab; }
button.nc-chip[data-nc-add] { cursor: pointer; }
button.nc-chip:disabled { opacity: .5; cursor: default; }
.nc-chip[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 35%, transparent); }
.nc-chip img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.5); flex: none; }
.nc-chip span { overflow-wrap: anywhere; }
.nc-chip small { opacity: .75; }
.nc-res { margin-bottom: 8px; min-height: 0; }
.nc-busca { align-items: flex-end; }
@media (prefers-reduced-motion: no-preference) { button.nc-chip { transition: transform .15s; } button.nc-chip:not(:disabled):hover { transform: translateY(-2px) rotate(-2deg); } }
@media (max-width: 640px) { .nc-chip img { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: no-preference) { button.nv-chip { transition: transform .15s; } button.nv-chip:hover { transform: translateY(-2px) rotate(-2deg); } }
@media (max-width: 640px) { .nv-linha { grid-template-columns: 44px 1fr; } .nv-rotulo { font-size: 1.2rem; min-height: 52px; } .nv-chip img, .nv-sem-img { width: 32px; height: 32px; } }
.rk-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rk-linha { display: grid; grid-template-columns: auto 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--panel); border-radius: 16px; padding: 10px 14px; border-left: 6px solid var(--cor, var(--r-nd)); }
.rk-pos { font: 700 1.5rem var(--data); min-width: 2.2ch; text-align: center; }
.rk-img { width: 72px; height: 72px; border-radius: 12px; background: color-mix(in srgb, var(--cor, var(--r-nd)) 35%, var(--sky)); display: grid; place-items: center; overflow: hidden; }
.rk-img img { width: 90%; height: 90%; object-fit: contain; }
.rk-nome { min-width: 0; display: grid; gap: 2px; }
.rk-nome a { font-weight: 700; color: inherit; overflow-wrap: anywhere; }
.rk-nota { text-align: right; display: grid; gap: 2px; }
.rk-nota strong { font: 700 1.4rem var(--data); }
.rk-nota small { color: var(--muted); font-size: .78rem; }
.rk-linha .reacoes { grid-column: 3 / -1; margin-top: 0; }
@media (max-width: 640px) {
  .rk-linha { grid-template-columns: auto 56px minmax(0, 1fr); padding: 10px; gap: 8px; }
  .rk-img { width: 56px; height: 56px; }
  .rk-nota { grid-column: 3; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .rk-linha .reacoes { grid-column: 1 / -1; }
}
.reacoes[hidden] { display: none; }
.reacao { display: inline-flex; align-items: center; gap: 4px; font: 500 .8rem var(--data); color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 4px 7px; min-height: 32px; cursor: pointer; }
.reacao svg { width: 18px; height: 18px; }
.reacao[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.reacao:focus-visible { outline: 3px solid var(--storm); outline-offset: 1px; }
.botao.forte { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.rodape a { color: inherit; }
.legal { max-width: 760px; }
.legal h3 { margin-top: 1.2em; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }

@media (max-width: 760px) {
  .topo .wrap { flex-direction: column; align-items: stretch; gap: 4px; padding-block: 10px 6px; }
  .grupo { position: static; }
  .grupo-lista { left: 0; right: 0; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .salto, .colunas, .ilha, .conta-resumo { grid-template-columns: minmax(0, 1fr); }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros div:nth-child(3) { border-left: 0; }
  .numeros div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* Cantos arredondados em todo o site; mapa e tabelas continuam retos. */
:root { --raio-cartao: 16px; --raio-botao: 10px; --raio-campo: 10px; --raio-pilula: 999px; }
.item, .noticia, .relogio, .vazio, .conta-painel, .post, .blog-cartao, .artigo, .rede, .xp-campos, .cmp-lado, .com-painel, .parceiro-caixa,
.sp-linha > div, .sp-raros > div, .sp-ritmo > div, .armario-barra, .sp-cmp { border-radius: var(--raio-cartao); }
.noticia { overflow: hidden; }
.armario-barra:has(+ .arm-valor:not([hidden])), .armario-barra:has(+ .sp-progresso:not([hidden])) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.arm-valor, .sp-progresso { border-radius: 0 0 var(--raio-cartao) var(--raio-cartao); }
.botao, .marcar, .reacao, .arma-cmp { border-radius: var(--raio-botao); }
input, select, textarea, .idioma { border-radius: var(--raio-campo); }
.selo, .camada, .rotulo-mapa, .evo-selo, .sp-barra, .sp-barra span { border-radius: var(--raio-pilula); }
.grupo-lista { border-radius: 0 0 14px 14px; overflow: hidden; }
.menu > a, .grupo-botao { border-radius: var(--raio-botao); }
.grupo-lista a { border-radius: 8px; }
.item img { border-radius: 12px; }
.cookies { border-radius: 18px 18px 0 0; }
.aviso .wrap { border-radius: 0; }
/* Campeonatos */
.camp-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.camp-abas .botao[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.camp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.camp-cartao { background: var(--panel); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.camp-cartao img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #0e2a47; }
.camp-corpo { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.camp-corpo h3 { font-size: 1.2rem; overflow-wrap: anywhere; }
.camp-corpo p { margin: 0; }
.camp-tempo { font: 700 1rem var(--data); color: var(--storm); font-variant-numeric: tabular-nums; }
.camp-tempo.agora { color: var(--r-incomum); }
.camp-sessoes { margin: 0; padding-left: 18px; font-size: .9rem; }
.camp-cartao[data-cid] { cursor: pointer; }
.det-texto.camp-corpo { display: grid; gap: 10px; }
.camp-corpo h3 a { color: inherit; }
.camp-lista { gap: 18px; }
.camp-cartao { position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, color-mix(in srgb, #ffd21f 7%, var(--panel)) 0%, var(--panel) 70%); transition: transform .25s cubic-bezier(.2,.8,.3,1.4), box-shadow .25s; }
.camp-capa { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1d4670, #2a1f5c); }
.camp-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.camp-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,24,48,.85) 100%); }
.camp-selo { position: absolute; z-index: 1; left: 12px; bottom: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(10,24,48,.8); backdrop-filter: blur(4px); }
.camp-selo .camp-tempo { font-size: .85rem; color: #ffd21f; }
.camp-selo .camp-tempo.agora { color: #5ccb6b; }
.camp-corpo h3 { font-size: 1.25rem; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.camp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.camp-chips span { font: 600 .72rem/1 var(--data); padding: 5px 9px; border-radius: 999px; background: rgba(255,210,31,.12); border: 1px solid rgba(255,210,31,.35); }
.camp-prox { display: grid; gap: 2px; }
.camp-prox small { color: var(--muted); font-size: .75rem; }
.camp-prox strong { font: 700 1rem var(--data); }
.camp-ver { justify-self: start; margin-top: 4px; font-weight: 700; font-size: .85rem; padding: 6px 14px; border-radius: 999px; background: #ffd21f; color: #0e2a47; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .camp-cartao:hover, .camp-cartao:focus-within { transform: translateY(-6px); box-shadow: 0 0 0 2px #ffd21f, 0 18px 34px rgba(255,210,31,.22); }
  .camp-cartao:hover .camp-capa img { transform: scale(1.08); }
  .camp-cartao:hover .camp-ver { animation: camp-pulso 1s ease-in-out infinite; }
}
@keyframes camp-pulso { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .camp-cartao { animation: camp-entra .45s ease-out both; }
  #det .det-capa { animation: camp-capa 14s ease-in-out infinite alternate; transform-origin: 50% 40%; }
  #det .camp-corpo > * { animation: camp-entra .5s ease-out both; }
  #det .camp-corpo > *:nth-child(2) { animation-delay: .06s; } #det .camp-corpo > *:nth-child(3) { animation-delay: .12s; } #det .camp-corpo > *:nth-child(n+4) { animation-delay: .18s; }
}
@keyframes camp-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes camp-capa { from { transform: scale(1); } to { transform: scale(1.08) translateY(-2%); } }
#det .camp-sessoes { list-style: none; padding: 0; display: grid; gap: 6px; }
#det .camp-sessoes li { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 4px solid #ffd21f; }

/* Estatísticas: barras horizontais com os preços medianos guardados pelo site. */
.est-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.est-colunas h4 { margin: 0 0 8px; font-size: 1rem; }
.est-painel { background: var(--panel); border-radius: 16px; padding: 16px 18px; display: grid; gap: 10px; margin: 18px 0; }
.est-painel p { margin: 0; }
.est-barras { display: grid; gap: 8px; }
.est-barra { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .9rem; }
.est-barra span:first-child { overflow-wrap: anywhere; }
.est-trilho { height: 14px; border-radius: 999px; background: var(--sky); overflow: hidden; }
.est-trilho i { display: block; height: 100%; border-radius: 999px; background: var(--signal); }
.est-barra .mono { white-space: nowrap; }
/* Fileiras da página inicial: cartões com rolagem lateral dentro da própria fileira. */
#inicio-fileiras { display: grid; gap: 28px; margin-bottom: 28px; }
.fileira { display: grid; gap: 10px; min-width: 0; }
.fileira-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fileira-topo h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.fil-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 250px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 10px; min-width: 0; }
.fil-cartao { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--panel); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; border: 2px solid transparent; transition: transform .15s, border-color .15s; min-width: 0; }
.fil-cartao:hover { border-color: var(--signal); }
@media (prefers-reduced-motion: no-preference) { .fil-cartao:hover { transform: translateY(-3px); } }
.fil-cartao:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
.fil-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--cor, #1d4670), #0e2a47); display: grid; place-items: center; overflow: hidden; }
.fil-img img { width: 100%; height: 100%; object-fit: cover; }
.fil-img.item img { object-fit: contain; }
.fil-corpo { padding: 10px 12px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.fil-corpo h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
.fil-corpo p { margin: 0; font-size: .9rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fil-corpo p.fil-codigo { margin-top: 6px; font-size: .78rem; color: var(--ink); letter-spacing: .03em; }
.fil-codigo b { white-space: nowrap; }
.fil-numero { font: 900 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
.fil-destaque .fil-img { aspect-ratio: auto; min-height: 96px; padding: 14px; color: #ffd21f; place-items: center start; }
.fil-destaque .fil-numero { color: #ffd21f; }
.fil-icone svg { width: 56px; height: 56px; fill: none; stroke: #ffd21f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inicio-atalhos .geral-grade { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Imagens dos quadros: foto do jogo (Fortnite-API) ou arte própria, escurecida embaixo e com zoom leve ao passar o mouse */
.fil-img { position: relative; }
.fil-img > img, .fil-arte > svg { transition: transform .35s ease; }
.fil-img.fil-foto::after, .fil-arte::after, .grupo-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,14,28,.55)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .fil-cartao:hover .fil-img > img, .fil-cartao:hover .fil-arte > svg, .geral-grupo:hover .grupo-capa > img, .geral-grupo:hover .grupo-capa > svg { transform: scale(1.06); } }
.fil-arte { background: linear-gradient(135deg, hsl(var(--h1) 70% 46%), hsl(var(--h2) 72% 22%)); }
.fil-arte > svg, .geral-grupo .grupo-capa > svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 0; background: none; fill: none; stroke: none; }
.grupo-capa { position: relative; display: block; margin: -12px -12px 8px; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 16px 16px 0 0; background: linear-gradient(135deg, hsl(var(--h1, 210) 70% 46%), hsl(var(--h2, 230) 72% 22%)); }
.grupo-capa > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.grupo-capa.item > img { object-fit: contain; }
.geral-grupo .grupo-capa > h3 { position: absolute; left: 18px; right: 12px; bottom: 10px; margin: 0; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); z-index: 1; }
.fil-creditos { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.inicio-atalhos .geral-grupo { background: var(--panel); }
.inicio-atalhos .geral-grupo a:hover { background: var(--sky); }
/* Carrossel da página inicial: um destaque por vez, troca a cada 6 segundos, sem troca automática se o sistema pedir menos movimento. */
.carrossel { position: relative; border-radius: 0; overflow: hidden; margin-inline: calc(-1 * var(--margem)); margin-top: -28px; background: linear-gradient(135deg, #0e2a47 0%, #1d4670 60%, #2b5d8c 100%); color: #f7fcff; margin-bottom: 24px; }
.car-trilho { position: relative; min-height: clamp(300px, 46vw, 420px); }
.car-slide { position: absolute; inset: 0; display: grid; align-content: end; gap: 10px; padding: clamp(20px, 4vw, 44px); padding-bottom: 72px;
  background: linear-gradient(90deg, rgba(11, 26, 49, .95) 0%, rgba(11, 26, 49, .7) 50%, rgba(11, 26, 49, .15) 100%), var(--car-img, none) var(--car-pos, right center) / var(--car-tam, contain) no-repeat, linear-gradient(135deg, var(--car-cor, #0e2a47) 0%, #1d4670 70%); }
.car-slide[data-modo="capa"] { --car-pos: center; --car-tam: cover; }
.car-slide[hidden] { display: none; }
.car-slide[data-modo="arte"] { background:
  linear-gradient(90deg, rgba(11, 26, 49, .95) 0%, rgba(11, 26, 49, .55) 55%, rgba(11, 26, 49, 0) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23ffd21f' stroke-width='3' opacity='.55'%3E%3Ccircle cx='300' cy='150' r='90'/%3E%3Ccircle cx='300' cy='150' r='55' stroke='%2355c6ff'/%3E%3Cpath d='M300 40v40M300 220v40M190 150h40M370 150h40' /%3E%3C/g%3E%3Cg fill='%23ffd21f' opacity='.9'%3E%3Cpath d='M300 112l9 28h29l-23 17 9 28-24-17-24 17 9-28-23-17h29z'/%3E%3C/g%3E%3C/svg%3E") right center / contain no-repeat,
  radial-gradient(circle at 78% 50%, #2b5d8c 0%, #0e2a47 70%); }
.car-slide[data-modo="item"] { background-color: #12355c; }
.car-slide > * { max-width: 58ch; margin: 0; }
.car-slide .eyebrow { color: #ffd21f; }
.car-slide h2 { color: #f7fcff; font-size: clamp(2rem, 5vw, 3.6rem); }
.car-slide p { color: #d8eef8; }
.car-slide .car-acao { justify-self: start; display: inline-block; background: #ffd21f; color: #0e2a47; font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 999px; }
.car-slide .car-acao:hover { background: #fff; }
.car-slide .car-acao:focus-visible { outline: 3px solid #f7fcff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .car-slide:not([hidden]) { animation: car-entra .45s ease-out; } }
@keyframes car-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.car-controles { position: absolute; left: clamp(20px, 4vw, 44px); right: clamp(20px, 4vw, 44px); bottom: 18px; display: flex; align-items: center; gap: 10px; }
.car-seta { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(247, 252, 255, .14); cursor: pointer; }
.car-seta:hover { background: rgba(247, 252, 255, .28); }
.car-seta svg { width: 18px; height: 18px; fill: none; stroke: #f7fcff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.car-seta:focus-visible, .car-ponto:focus-visible { outline: 3px solid #ffd21f; outline-offset: 2px; }
.car-pontos { display: flex; gap: 6px; flex-wrap: wrap; }
@media (min-width: 900px) { .car-trilho { min-height: clamp(420px, 70vh, 860px); } .car-slide { padding-left: max(var(--margem), 4vw); padding-bottom: 96px; } .car-controles { left: max(var(--margem), 4vw); bottom: 28px; } }
.car-ponto { all: unset; box-sizing: border-box; width: 12px; height: 12px; border-radius: 999px; background: rgba(247, 252, 255, .4); cursor: pointer; transition: width .2s; }
.car-ponto[aria-current="true"] { width: 28px; background: #ffd21f; }
.car-pausa { margin-left: auto; padding: 6px 12px; font-size: .85rem; background: rgba(247, 252, 255, .14); color: #f7fcff; border-color: rgba(247, 252, 255, .35); }
@media (max-width: 760px) {
  .car-slide { background: linear-gradient(0deg, rgba(11, 26, 49, .96) 0%, rgba(11, 26, 49, .75) 55%, rgba(11, 26, 49, .25) 100%), var(--car-img, none) var(--car-pos, right top) / var(--car-tam, auto 60%) no-repeat, linear-gradient(135deg, var(--car-cor, #0e2a47) 0%, #1d4670 70%); }
  .car-slide[data-modo="capa"] { --car-pos: center; --car-tam: cover; }
  .car-trilho { min-height: 340px; }
}
/* Banners de abertura: a cabeça da seção vira um banner com imagem de fonte permitida e texto sobre fundo escuro. */
.cabeca.banner { position: relative; overflow: hidden; border-radius: 20px; padding: clamp(20px, 4vw, 36px); min-height: 230px; align-content: end; color: #f7fcff;
  background: linear-gradient(90deg, rgba(11, 26, 49, .94) 0%, rgba(11, 26, 49, .78) 45%, rgba(11, 26, 49, .25) 100%), var(--banner-img, none) var(--banner-pos, right center) / var(--banner-tam, contain) no-repeat, linear-gradient(135deg, #0e2a47 0%, #1d4670 60%, #2b5d8c 100%); }
.cabeca.banner[data-modo="capa"] { --banner-pos: center; --banner-tam: cover; }
.cabeca.banner > * { position: relative; max-width: 62ch; }
.cabeca.banner .eyebrow { color: #ffd21f; }
.cabeca.banner h2 { color: #f7fcff; }
.cabeca.banner p { color: #d8eef8; margin: 0; }
.cabeca.banner a { color: #ffd21f; }
@media (max-width: 760px) {
  .cabeca.banner { min-height: 160px; background: linear-gradient(0deg, rgba(11, 26, 49, .95) 0%, rgba(11, 26, 49, .7) 55%, rgba(11, 26, 49, .3) 100%), var(--banner-img, none) var(--banner-pos, right top) / var(--banner-tam, auto 70%) no-repeat, linear-gradient(135deg, #0e2a47 0%, #1d4670 60%, #2b5d8c 100%); }
  .cabeca.banner[data-modo="capa"] { --banner-pos: center; --banner-tam: cover; }
}
/* Valor do armário em uma linha, com o cálculo item a item escondido até pedir. */
.valor-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-top: 8px; }
.valor-linha strong { font: 900 1.1rem/1.2 var(--display); }
.valor-dolar { font-weight: 600; font-variant-numeric: tabular-nums; }
.valor-botao { padding: 5px 10px; font-size: .85rem; }
.valor-detalhe { display: grid; gap: 4px; padding-top: 6px; }
.valor-lista { max-height: 320px; overflow: auto; border-radius: 12px; background: var(--sky); padding: 4px 8px; }
.valor-lista table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.valor-lista th, .valor-lista td { text-align: left; padding: 5px 6px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.valor-lista thead th { border-top: 0; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--sky); }
/* Cosméticos vivos: fundo na cor da raridade, item que se mexe e atalhos ao passar o mouse; janela de detalhes. */
#cos-lista .cos-item { background: linear-gradient(165deg, color-mix(in srgb, var(--cor) 32%, var(--panel)) 0%, var(--panel) 62%); border: 2px solid color-mix(in srgb, var(--cor) 45%, transparent); border-top-width: 5px; border-top-color: var(--cor); }
.cos-abrir { display: grid; gap: 4px; color: inherit; text-decoration: none; border-radius: 12px; }
.cos-abrir:hover h3 { text-decoration: underline; }
.cos-abrir:focus-visible { outline: 3px solid var(--storm); outline-offset: 2px; }
.cos-abrir img { transition: transform .2s; }
@media (prefers-reduced-motion: no-preference) {
  #cos-lista .cos-item:hover .cos-abrir img, .cos-abrir:focus-visible img { animation: cos-vivo 1.4s ease-in-out infinite; }
}
@keyframes cos-vivo { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 50% { transform: translateY(-6px) rotate(-3deg) scale(1.05); } }
@media (hover: hover) {
  #cos-lista .cos-item .marcar { opacity: 0; transition: opacity .15s; }
  #cos-lista .cos-item:hover .marcar, #cos-lista .cos-item:focus-within .marcar, #cos-lista .cos-item .marcar[aria-pressed="true"] { opacity: 1; }
}
/* Cosméticos mais vivos (06/11/2026): fundo vivo da raridade no cartão inteiro, imagem maior, nome em etiqueta e atalhos sobre a imagem. */
#cos-lista.itens { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
#cos-lista .cos-item { position: relative; padding: 0; gap: 0; overflow: hidden; border: 0; border-radius: 16px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cor) 70%, #fff) 0%, var(--cor) 48%, color-mix(in srgb, var(--cor) 55%, #08182b) 100%); box-shadow: 0 2px 0 color-mix(in srgb, var(--cor) 60%, #000); transition: transform .18s ease, box-shadow .18s ease; }
#cos-lista .cos-abrir { gap: 0; border-radius: 16px 16px 0 0; }
#cos-lista .cos-palco { display: block; aspect-ratio: 1; overflow: hidden; }
#cos-lista .cos-palco img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; transform-origin: 50% 70%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); transition: transform .3s cubic-bezier(.2,.8,.3,1.3); }
#cos-lista .cos-etiqueta { display: grid; gap: 2px; padding: 8px 10px 6px; background: linear-gradient(180deg, rgba(8, 24, 43, .62), rgba(8, 24, 43, .88)); color: #fff; }
#cos-lista .cos-etiqueta .eyebrow { color: color-mix(in srgb, var(--cor) 40%, #fff); font-size: .66rem; }
#cos-lista .cos-etiqueta h3 { font-size: 1.05rem; color: #fff; }
#cos-lista .cos-conj, #cos-lista .item-rodape { background: rgba(8, 24, 43, .88); color: #d9e6f2; padding: 0 10px; font-size: .78rem; margin: 0; }
#cos-lista .item-rodape { padding-bottom: 8px; flex-direction: column; gap: 0; flex: 1 0 auto; justify-content: flex-start; }
#cos-lista .item-rodape .leve, #cos-lista .cos-conj { color: #c3d3e3; }
#cos-lista .cos-item > .marcar { position: absolute; top: 8px; width: auto; min-width: 0; margin: 0; padding: 4px 9px; font-size: .74rem; min-height: 0; border-radius: 999px; background: rgba(8, 24, 43, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .45); z-index: 1; }
#cos-lista .cos-item > .marcar:not(.desejar) { left: 8px; }
#cos-lista .cos-item > .marcar.desejar { right: 8px; }
#cos-lista .cos-item > .marcar[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
#cos-lista .cos-abrir:hover h3 { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  #cos-lista .cos-item:hover, #cos-lista .cos-item:focus-within { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--cor), 0 12px 26px color-mix(in srgb, var(--cor) 45%, transparent); }
  #cos-lista .cos-item:hover .cos-palco img, #cos-lista .cos-abrir:focus-visible .cos-palco img { animation: none; transform: scale(1.12) rotate(-4deg); }
  .cos-det-img img { animation: cos-entra .45s cubic-bezier(.2,.8,.3,1.3); }
}
@keyframes cos-entra { from { opacity: 0; transform: scale(.82) rotate(-6deg); } }
@media (max-width: 640px) { #cos-lista.itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #cos-lista .cos-etiqueta h3 { font-size: .92rem; } #cos-lista .cos-item > .marcar { font-size: .66rem; padding: 3px 7px; } }
.cos-det-fundo { position: fixed; inset: 0; z-index: 35; background: rgba(10, 26, 47, .65); overflow-y: auto; padding: 72px 16px 24px; }
.cos-det-fundo[hidden] { display: none; }
.cos-det { position: relative; max-width: 900px; margin: 0 auto; background: var(--panel); color: var(--ink); border-radius: 20px; padding: 22px; display: grid; gap: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); outline: none; }
.cos-det-fechar { position: absolute; top: 14px; right: 14px; z-index: 1; }
.cos-det-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; }
.cos-det-img { border-radius: 16px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cor, var(--r-nd)) 70%, #fff) 0%, var(--cor, var(--r-nd)) 50%, color-mix(in srgb, var(--cor, var(--r-nd)) 55%, #08182b) 100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.cos-det-img img { width: 100%; height: 100%; object-fit: contain; }
.cos-det-info { display: grid; gap: 10px; align-content: start; min-width: 0; padding-right: 80px; }
.cos-det-info h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); overflow-wrap: anywhere; }
.cos-det-info p { margin: 0; }
.cos-det-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cos-det-acoes .marcar { min-width: 150px; margin: 0; min-height: 40px; font-weight: 600; }
.cos-det-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0; }
.cos-det-dados div { background: var(--sky); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.cos-det-dados dt { font: 500 .72rem var(--data); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cos-det-dados dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cos-det-bloco { display: grid; gap: 8px; }
.cos-det-bloco h3 { font-size: 1.2rem; }
.cos-det-bloco p { margin: 0; }
.cos-det-variantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cos-det-variantes figure { margin: 0; background: var(--sky); border-radius: 12px; padding: 6px; display: grid; gap: 4px; text-align: center; font-size: .8rem; min-width: 0; }
.cos-det-variantes img, .cos-det-semimg { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; display: block; }
.cos-det-variantes figcaption { overflow-wrap: anywhere; }
.cos-det-conjunto a { color: inherit; text-decoration: none; border-radius: 12px; display: block; min-width: 0; }
.cos-det-conjunto a figure { height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.cos-det-conjunto a:hover figure, .cos-det-conjunto a:focus-visible figure { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--cor, var(--ink)); }
.cos-det-conjunto small { display: block; color: var(--muted); font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .cos-det-conjunto a figure { transition: none; } .cos-det-conjunto a:hover figure { transform: none; } }
.cos-det-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.cos-det-fonte { font-size: .85rem; }
@media (max-width: 760px) {
  .cos-det-fundo { padding: 0; }
  .cos-det { min-height: 100%; border-radius: 0; padding: 16px; padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  .cos-det-fechar { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .cos-det-topo { grid-template-columns: minmax(0, 1fr); }
  .cos-det-info { padding-right: 0; }
  .cos-det-img { max-width: 320px; width: 100%; justify-self: center; }
}
/* Menu geral: painel com todas as seções agrupadas; tela cheia no celular. */
.geral-botao { display: inline-flex; align-items: center; gap: 6px; font: 600 .85rem var(--body); color: #f7fcff; background: #1d4670; border: 1px solid rgba(247, 252, 255, .35); border-radius: var(--raio-botao); padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.geral-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.geral-botao:hover, .geral-botao[aria-expanded="true"] { background: #ffd21f; color: #0e2a47; }
.geral-botao:focus-visible { outline: 3px solid #ffd21f; outline-offset: 2px; }
.som-botao { display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0; color: #f7fcff; background: #1d4670; border: 1px solid rgba(247, 252, 255, .35); border-radius: var(--raio-botao); cursor: pointer; flex: none; }
.som-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.som-botao .som-x { display: none; }
.som-botao[aria-pressed="true"] .som-x { display: inline; }
.som-botao[aria-pressed="true"] .som-ondas { display: none; }
.som-botao:hover { background: #ffd21f; color: #0e2a47; }
.som-botao:focus-visible { outline: 3px solid #ffd21f; outline-offset: 2px; }
@media (max-width: 360px) { .marca-linha .marca { font-size: 1.35rem; } .marca-linha .idioma { min-width: 78px; max-width: 96px; } .marca-linha { gap: 6px; } }
.cos-det-img.com-video { aspect-ratio: 16 / 9; background: #000; }
.cos-det-img.com-video iframe { width: 100%; height: 100%; border: 0; border-radius: 16px; display: block; }
.video-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.video-ver svg { width: 16px; height: 16px; fill: currentColor; }
.geral { position: fixed; inset: 0; z-index: 30; background: rgba(10, 26, 47, .6); display: grid; place-items: start center; padding: 76px 16px 16px; overflow-y: auto; }
.geral[hidden] { display: none; }
.bgr-abrir svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bgr { position: fixed; inset: 0; z-index: 40; background: rgba(10, 26, 47, .6); display: grid; place-items: start center; padding: 64px 12px 12px; overflow-y: auto; }
.bgr[hidden] { display: none; }
.bgr-caixa { background: var(--panel); color: var(--ink); width: min(720px, 100%); border-radius: 20px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.bgr-campo { display: flex; align-items: center; gap: 8px; }
.bgr-campo svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bgr-campo input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(14, 42, 71, .25); background: transparent; color: inherit; }
.bgr-campo input:focus { outline: none; border-color: var(--signal); }
.bgr-estado, .bgr-dica { margin: 0; font-size: .85rem; }
.bgr-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: min(60vh, 520px); overflow-y: auto; }
.bgr-res h3 { margin: 8px 6px 2px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.bgr-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
.bgr-item img, .bgr-item i { flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: rgba(14, 42, 71, .08); }
.bgr-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bgr-item small { margin-left: auto; flex: none; opacity: .7; font-size: .78rem; }
.bgr-item[aria-selected="true"], .bgr-item:hover { background: rgba(47, 224, 255, .22); }
@media (max-width: 380px) { .bgr-dica { display: none; } }
@media (max-width: 360px) { .topo .marca-linha .som-botao { width: 28px; } .topo .marca-linha .idioma { min-width: 52px; max-width: 56px; } .topo .marca-linha .geral-botao { padding-left: 6px; padding-right: 6px; } }
@media (min-width: 361px) and (max-width: 380px) { .topo .marca-linha .geral-botao { padding-left: 7px; padding-right: 7px; } }
.geral-caixa { background: var(--panel); color: var(--ink); width: min(980px, 100%); border-radius: 20px; padding: 22px; display: grid; gap: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.app-instalar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.app-instalar[hidden], .app-caixa[hidden] { display: none; }
.app-instalar p { margin: 0; }
.app-caixa { margin-top: 16px; background: var(--panel); border-radius: var(--raio-cartao, 16px); padding: 16px 18px; display: grid; gap: 10px; justify-items: start; }
.app-caixa h3, .app-caixa p { margin: 0; }
.mudou { margin: 18px 0; background: var(--panel); border: 2px solid var(--signal); border-radius: var(--raio-cartao, 16px); padding: 16px 18px; display: grid; gap: 12px; }
.mudou h2, .mudou h3, .mudou p { margin: 0; }
.enq { margin: 18px 0; display: grid; gap: 12px; }
.enq-topo h2, .enq-topo p { margin: 0; }
.enq-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.enq-card { background: var(--panel); border-radius: var(--raio-cartao, 16px); padding: 16px 18px; display: grid; gap: 10px; align-content: start; border-top: 6px solid var(--signal); }
.enq-card h3 { margin: 0; font-size: 1.1rem; }
.enq-op { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px; border: 2px solid rgba(14, 42, 71, .18); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; }
.enq-op:hover { border-color: var(--signal); }
.enq-op:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.enq-op[aria-pressed="true"] { border-color: var(--signal); }
.enq-op span, .enq-op b { position: relative; z-index: 1; }
.enq-op i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(47, 224, 255, .28); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.enq-op[aria-pressed="true"] i { background: rgba(255, 210, 31, .55); }
.enq-rodape { margin: 0; font-size: .85rem; }
.mural { margin: 18px 0; display: grid; gap: 12px; }
.mural-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.mural-card { background: var(--panel); border-radius: var(--raio-cartao, 16px); padding: 14px 16px; display: grid; gap: 4px; border-left: 6px solid var(--mural-cor, var(--signal)); }
.mural-card b { font: 900 clamp(1.6rem, 4vw, 2.2rem)/1 var(--display); }
.mural-card span { font-size: .9rem; font-weight: 700; }
.lfav-lista { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.lfav-op { flex: 0 0 auto; width: 118px; scroll-snap-align: start; display: grid; gap: 4px; justify-items: center; padding: 8px; border-radius: 14px; border: 2px solid rgba(14, 42, 71, .18); background: var(--panel); color: inherit; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: center; }
.lfav-op img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: rgba(14, 42, 71, .08); }
.lfav-op:hover, .lfav-op[aria-pressed="true"] { border-color: var(--signal); }
.lfav-op[aria-pressed="true"] { background: rgba(255, 210, 31, .3); }
.lfav-op:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.lfav-op small { font-weight: 800; color: var(--signal-ink, inherit); }
@media (prefers-reduced-motion: reduce) { .enq-op i { transition: none; } }
.mudou h3 { font-size: 1.05rem; }
.mudou-grupo { display: grid; gap: 6px; }
.mudou-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mudou-lista a, .mudou-lista span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: inherit; text-decoration: none; font-size: .9rem; max-width: 100%; overflow-wrap: anywhere; }
.mudou-lista a:hover { border-color: var(--signal); }
.mudou-lista img { width: 22px; height: 22px; object-fit: contain; }
/* Painéis para streamers (#overlay/...): só o painel, sem o resto do site. */
html.em-overlay, html.em-overlay body { background: transparent !important; overflow: hidden; }
html.em-overlay body > *:not(#overlay), html.em-overlay body::before, html.em-overlay body::after { display: none !important; }
.ov[hidden] { display: none; }
.ov { --ov-tam: 1; position: fixed; inset: 0; display: grid; place-items: center; padding: calc(16px * var(--ov-tam)); color: #fff; font-family: var(--body); font-size: calc(22px * var(--ov-tam)); text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.ov-caixa { position: relative; display: grid; gap: .35em; justify-items: center; text-align: center; max-width: 100%; padding: .8em 1.1em 1.4em; border-radius: 1em; }
.ov.com-fundo .ov-caixa { background: rgba(9, 22, 42, .82); box-shadow: 0 .4em 1.4em rgba(0, 0, 0, .35); text-shadow: none; }
.ov-rotulo { font-family: var(--data); font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: #ffd21f; }
.ov-grande { font-family: var(--display); font-weight: 900; font-size: 2.6em; line-height: .95; text-transform: uppercase; }
.ov-grande small { font-size: .45em; }
.ov-medio { font-weight: 700; font-size: 1.1em; }
.ov-leve { font-size: .75em; opacity: .9; }
.ov-img { width: 7em; height: 7em; object-fit: contain; filter: drop-shadow(0 .2em .4em rgba(0, 0, 0, .5)); }
.ov-item { display: grid; gap: .25em; justify-items: center; animation: ov-entra .6s ease both; }
.ov-barra { width: 12em; max-width: 80vw; height: .5em; border-radius: 1em; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ov-barra i { display: block; height: 100%; background: #ffd21f; border-radius: inherit; }
.ov-linha { display: flex; gap: 1.2em; flex-wrap: wrap; justify-content: center; }
.ov-marca { position: absolute; right: .9em; bottom: .35em; font-family: var(--data); font-size: .5em; opacity: .7; letter-spacing: .05em; }
@keyframes ov-entra { from { opacity: 0; transform: translateY(.4em) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ov-item { animation: none; } }
.st-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.st-caixa { margin-top: 0; }
.st-caixa .campo, .st-caixa .campo select, .st-caixa .campo input { width: 100%; box-sizing: border-box; }
.st-passos { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.cartao-caixa .evo-acoes { margin: 0; }
.cartao-previa { display: grid; gap: 10px; justify-items: start; width: 100%; }
.cartao-previa[hidden] { display: none; }
.cartao-previa img { width: min(270px, 100%); height: auto; aspect-ratio: 9 / 16; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); background: #0b1a31; }
.geral-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.geral-topo h2 { font-size: 1.8rem; }
.geral-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.geral-grupo { display: grid; gap: 4px; align-content: start; background: var(--sky); border-radius: 16px; padding: 12px; }
.geral-grupo h3 { font-size: 1.1rem; margin: 0 0 4px 6px; }
.geral-grupo a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.geral-grupo a:hover { background: var(--panel); }
.geral-grupo a[aria-current="page"] { background: var(--signal); color: var(--on-signal); }
.geral-grupo a:focus-visible { outline: 3px solid var(--storm); outline-offset: 0; }
.geral-grupo svg { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #0e2a47; fill: none; stroke: #ffd21f; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 760px) {
  .geral { padding: 0; display: block; place-items: start; }
  .topo .menu { display: none; }
  .geral-caixa { width: min(88vw, 380px); margin: 0; min-height: 100%; box-sizing: border-box; border-radius: 0 20px 20px 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 24px; align-content: start; }
  .geral-grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .geral-botao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .marca-linha .idioma { margin-left: auto; }
}
/* Fundos temáticos por seção, feitos em CSS, em duas camadas que se movem devagar com a rolagem (paralaxe)
   e trocam de uma para a outra conforme a pessoa desce a página. Cores leves para o texto continuar legível. */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fundo i { position: absolute; inset: -20vh 0; display: block; transition: opacity .6s ease, background .6s ease; will-change: transform; }
.fundo .f1 { transform: translateY(calc(var(--rol, 0) * -40px)); opacity: calc(1 - var(--rol, 0) * .7); }
.fundo .f2 { transform: translateY(calc(var(--rol, 0) * -110px)); opacity: calc(.25 + var(--rol, 0) * .75); }
body[data-fundo="ceu"] .f1 { background: radial-gradient(circle at 18% 22%, rgba(255, 210, 31, .18) 0 2px, transparent 3px) 0 0 / 90px 90px, radial-gradient(circle at 62% 70%, rgba(47, 224, 255, .2) 0 1.5px, transparent 2.5px) 0 0 / 130px 130px, radial-gradient(ellipse at 80% 0%, rgba(120, 80, 220, .18), transparent 60%); }
body[data-fundo="ceu"] .f2 { background: radial-gradient(circle at 40% 40%, rgba(247, 252, 255, .35) 0 1px, transparent 2px) 0 0 / 60px 60px, radial-gradient(ellipse at 10% 100%, rgba(47, 120, 220, .2), transparent 55%); }
body[data-fundo="praia"] .f1 { background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 1.4px, transparent 2.4px) 0 0 / 140px 140px, radial-gradient(circle, rgba(255, 210, 31, .5) 0 1.6px, transparent 2.6px) 40px 70px / 210px 210px, radial-gradient(30vmax 22vmax at 25% 30%, rgba(47, 224, 255, .3), transparent 65%), radial-gradient(28vmax 22vmax at 75% 35%, rgba(255, 59, 160, .24), transparent 65%), radial-gradient(32vmax 22vmax at 50% 80%, rgba(140, 90, 255, .32), transparent 65%); opacity: 1; }
body[data-fundo="praia"] .f2 { background: radial-gradient(circle closest-side, transparent 0 90%, rgba(190, 90, 255, .6) 93% 94.5%, rgba(190, 90, 255, .16) 95.5% 100%) 50% 45% / 150vmax 150vmax no-repeat, repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 90px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 90px); opacity: .9; }
body[data-fundo="palco"] .f1 { background: conic-gradient(from 160deg at 20% -10%, transparent 0 10deg, rgba(255, 210, 31, .16) 14deg 24deg, transparent 28deg), conic-gradient(from 176deg at 80% -10%, transparent 0 10deg, rgba(47, 224, 255, .14) 14deg 24deg, transparent 28deg); }
body[data-fundo="palco"] .f2 { background: linear-gradient(180deg, transparent 60%, rgba(14, 42, 71, .14) 100%), radial-gradient(ellipse at 50% 100%, rgba(255, 59, 107, .14), transparent 60%); }
body[data-fundo="loja"] .f1 { background: radial-gradient(circle at 12% 18%, rgba(255, 59, 107, .16), transparent 30%), radial-gradient(circle at 85% 30%, rgba(177, 140, 255, .18), transparent 32%); }
body[data-fundo="loja"] .f2 { background: repeating-linear-gradient(135deg, transparent 0 46px, rgba(255, 210, 31, .1) 46px 52px), radial-gradient(circle at 50% 90%, rgba(47, 191, 113, .14), transparent 40%); }
body[data-fundo="nuvens"] .f1 { background: radial-gradient(ellipse 30% 12% at 20% 18%, rgba(247, 252, 255, .55), transparent 70%), radial-gradient(ellipse 26% 10% at 78% 34%, rgba(247, 252, 255, .45), transparent 70%); }
body[data-fundo="nuvens"] .f2 { background: radial-gradient(ellipse 34% 12% at 60% 70%, rgba(247, 252, 255, .4), transparent 70%), radial-gradient(ellipse at 0% 100%, rgba(47, 160, 220, .12), transparent 50%); }
@media (prefers-reduced-motion: reduce) { .fundo i { transform: none !important; transition: none; } .fundo .f2 { opacity: .4; } .fundo .f1 { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .geral:not([hidden]) .geral-caixa { animation: geral-lado .22s ease-out; } }
@keyframes geral-lado { from { transform: translateX(-100%); } }
/* Barra do ecossistema SequeLari: faixa fina acima do topo, que sai ao rolar. */
.eco { display: flex; align-items: center; gap: 8px; min-height: 30px; padding-top: env(safe-area-inset-top, 0px); background: #070f1f; color: #a4bdd2; font: 600 .78rem var(--data); }
.eco-marca { color: #ffd21f; text-decoration: none; letter-spacing: .04em; }
.eco-marca:hover { text-decoration: underline; }
.eco-marca.logo-sl { font-size: .85rem; } .eco-marca.logo-sl:hover { text-decoration: none; }
@media (max-width: 400px) { .eco-marca.logo-sl { font-size: .72rem; } .eco-marca.logo-sl .logo-nome { letter-spacing: .02em; } }
.eco-jogo { min-width: 0; }
.eco-jogo select { max-width: min(52vw, 260px); font: inherit; color: #eaf4fb; background: transparent; border: 1px solid #24405f; border-radius: 8px; padding: 1px 6px; }
.eco-jogo select option { color: #0e2a47; }
.eco-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eco-leve { margin-left: auto; opacity: .8; }
@media (max-width: 400px) { .eco-jogo select { max-width: 36vw; } .eco { gap: 6px; } }
.eco-vivo { color: #ff8a95; text-decoration: none; white-space: nowrap; } .eco-vivo:hover { text-decoration: underline; }
.eco-vivo::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #e0283a; vertical-align: 1px; }
@media (max-width: 480px) { .eco-leve { display: none; } }
/* Melhores jogadas do mês */
.cdr-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cdr-filtros label { display: grid; gap: 4px; font-size: .85rem; }
.cdr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.av-selo { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 2px 9px; border-radius: 999px; background: #d92d3a; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.av-selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: av-pulso 1.4s ease-in-out infinite; }
@keyframes av-pulso { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .av-selo::before { animation: none; } }
.av-bloco { margin: 18px 0 8px; }
.av-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); color: inherit; text-decoration: none; font-weight: 600; }
.av-aviso[hidden] { display: none; }
.av-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cdr-cartao { display: grid; gap: 6px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); color: inherit; text-decoration: none; min-width: 0; }
.cdr-cartao:hover, .cdr-cartao:focus-visible { border-color: var(--ink); }
.cdr-cartao h3 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.cdr-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.cdr-topo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.cdr-foto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--sky); flex: none; }
.cdr-topo > div { min-width: 0; flex: 1 1 220px; }
.cdr-topo h3 { margin: 0 0 4px; font-size: 1.5rem; overflow-wrap: anywhere; }
.cdr-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 12px; }
.cdr-video { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); overflow: hidden; min-width: 0; }
.cdr-tela { position: relative; aspect-ratio: 16 / 9; background: #111; }
.cdr-tela img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdr-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cdr-tela .jg-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.vds-cat { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.vds-cat .botao { font-weight: 500; }
.vds-cat .botao[aria-pressed="true"] { border-color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--signal); }
.vds-video p .jg-selo { margin-right: 4px; }
.cdr-video p { margin: 0; padding: 10px 12px; font-size: .9rem; overflow-wrap: anywhere; }
.jg-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin: 14px 0 8px; }
.jg-barra .jg-abas { flex: 1 1 320px; border-bottom: 0; padding-bottom: 0; }
.jg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.gr-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.gr-caixa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 14px 16px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.gr-caixa h3 { margin: 0; font-size: 1.05rem; }
.gr-num { font: 800 2.2rem/1 var(--data); color: var(--ink); }
.gr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gr-lista li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; min-width: 0; }
.gr-lista li:last-child { border-bottom: 0; }
.gr-lista a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.gr-lista span { color: var(--muted); font-size: .85rem; text-align: right; flex-shrink: 0; max-width: 50%; }
.loc-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .loc-grade { grid-template-columns: minmax(0, 1fr); } }
.loc-recorte { position: relative; aspect-ratio: 1; border-radius: var(--raio-cartao); border: 1px solid var(--line); background-color: #0b1a31; background-repeat: no-repeat; overflow: hidden; }
.loc-recorte::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #ffd23f; box-shadow: 0 0 0 3px rgba(0, 0, 0, .45); }
.loc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.loc-lista a { font-weight: 600; }
.tp-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .tp-grade { grid-template-columns: minmax(0, 1fr); } }
.tp-grade img { width: 100%; height: auto; border-radius: var(--raio-cartao); border: 1px solid var(--line); background: #0b1a31; }
.tp-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 16px; }
.loc-todos { columns: 3 220px; list-style: none; padding: 0; margin: 0; }
.loc-todos li { margin-bottom: 6px; break-inside: avoid; }
.ct-topo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 700px) { .ct-topo { grid-template-columns: 1fr; } }
.ct-caixa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 14px 16px; min-width: 0; }
.ct-caixa h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ct-segunda { border-left: 6px solid #ffd23f; }
.tp-nota, .loc-com { margin-top: 16px; }
.loc-evo { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.loc-evo li { display: grid; gap: 6px; font-size: .85rem; min-width: 0; }
.loc-recorte-p::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2px; }
.loc-sem { display: grid; place-items: center; text-align: center; padding: 8px; color: #cfe0ee; }
.loc-sem::after { display: none; }
.ct-horas { border-left: 6px solid #2fc6a5; margin-bottom: 18px; }
.ct-horas ul { margin: 6px 0 0; padding-left: 18px; }
.ct-num { font-family: var(--display); font-size: 2.2rem; margin: 0; line-height: 1.1; }
.ct-limpar { margin-top: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; cursor: pointer; }
.ct-titulo { margin: 22px 0 10px; }
.ct-semanas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.ct-semana { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 14px 16px; min-width: 0; border-top: 6px solid var(--ct-cor, #2474d8); }
.ct-semana h4 { margin: 0; font-size: 1.1rem; }
.ct-semana .ct-quando { display: inline-block; margin: 6px 0 8px; padding: 2px 10px; border-radius: 999px; font-size: .85rem; background: rgba(36, 116, 216, .14); }
.ct-semana .ct-quando.ja { background: rgba(47, 143, 63, .18); }
.ct-semana ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.ct-semana label, .ct-como label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; overflow-wrap: anywhere; }
.ct-semana input, .ct-como input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.ct-como { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ct-como li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 12px 14px; min-width: 0; }
.ct-como strong { display: block; margin-bottom: 4px; }
.ct-fonte { margin-top: 18px; }
.ct-como .ct-como-tarefa { list-style: none; padding: 0; margin: 8px 0 0; }
.ct-como .ct-como-tarefa li { border: 0; padding: 0; background: none; }
.eq-aviso { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); border-left: 6px solid #ffd23f; background: var(--panel); max-width: 80ch; }
.eq-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-bottom: 14px; }
.eq-caixa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 14px 16px; min-width: 0; }
.eq-caixa h3 { margin: 0 0 10px; font-size: 1.05rem; }
.eq-filtros, .eq-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.eq-form .eq-largo { grid-column: 1 / -1; }
.eq-form select, .eq-filtros select, .eq-form input[type=text] { width: 100%; min-width: 0; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--sky); color: var(--ink); }
.eq-regras { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; }
.eq-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.eq-cartao { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.eq-cartao.meu { border-color: #ffd23f; }
.eq-nome { font: 700 1.1rem var(--data); overflow-wrap: anywhere; margin: 0; }
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-chips span { font-size: .78rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.eq-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eq-mod { margin-top: 16px; border-color: #ffd23f; }
.eq-mod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eq-mod li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.eq-acoes select { font: inherit; font-size: .85rem; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--sky); color: var(--ink); max-width: 100%; }
.jg-cartao { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.jg-video { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, hsl(var(--h1) 70% 38%), hsl(var(--h2) 75% 22%)); display: grid; place-items: center; }
.jg-video::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 30px); }
.jg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jg-video.vertical { aspect-ratio: 9 / 16; width: min(100%, 300px); margin-inline: auto; }
.jg-cartao:has(.jg-video.vertical) .jg-video.vertical { margin-top: 10px; border-radius: 12px; overflow: hidden; }
.jg-play { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--signal); color: var(--on-signal); font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.jg-play svg { width: 20px; height: 20px; fill: currentColor; }
.jg-play:hover { transform: scale(1.05); }
.jg-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.jg-pos { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-family: var(--data); font-size: .8rem; padding: 3px 9px; border-radius: 999px; }
.jg-corpo { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.jg-corpo h4 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.jg-corpo p { margin: 0; overflow-wrap: anywhere; }
.jg-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.jg-voto[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.jg-selo { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--sky); width: fit-content; }
.jg-campea { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: center; background: linear-gradient(135deg, #2a1652, #0e2a47); color: #fff; border-radius: 20px; padding: 16px; margin: 6px 0 10px; }
.jg-campea .jg-video { border-radius: 14px; overflow: hidden; }
.jg-campea h3 { margin: 4px 0; font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; }
.jg-campea .leve, .jg-campea a { color: #dbe7ff; }
.jg-coroa { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; color: var(--signal); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.jg-hist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jg-hist button { all: unset; cursor: pointer; font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.jg-hist button:focus-visible { outline: 2px solid var(--signal); }
.jg-enviar, .jg-regras { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 12px 16px; }
.jg-enviar summary, .jg-regras summary { cursor: pointer; font-weight: 800; }
.jg-form { display: grid; gap: 10px; margin-top: 10px; max-width: 560px; }
.jg-form input[type="url"], .jg-form input[type="text"], .jg-form select { font: inherit; padding: 9px 10px; border-radius: var(--raio-campo); border: 1px solid var(--line); background: var(--sky); color: var(--ink); width: 100%; box-sizing: border-box; }
.jg-form .jg-aceite { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
.jg-minhas { list-style: none; padding: 0; display: grid; gap: 6px; }
.jg-minhas li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: var(--sky); border-radius: 12px; padding: 8px 10px; }
.jg-minhas span { overflow-wrap: anywhere; }
#jg-moderar { margin-top: 18px; }
.jg-mod { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; margin-bottom: 8px; }
@media (max-width: 700px) { .jg-campea { grid-template-columns: 1fr; padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .jg-play { transition: none; } .jg-play:hover { transform: none; } }
/* Gerador de visual */
.vis-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 12px 0; }
.vis-barra .vis-fonte { border-bottom: 0; padding-bottom: 0; }
.vis-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.vis-slot { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 10px; display: grid; gap: 8px; align-content: start; }
.vis-slot h4 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vis-img { aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c, #6d8298) 70%, #fff), var(--c, #6d8298)); display: grid; place-items: center; overflow: hidden; }
.vis-img img { width: 100%; height: 100%; object-fit: contain; }
.vis-img span { color: #fff; font-weight: 700; opacity: .85; padding: 8px; text-align: center; }
.vis-slot p { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.vis-slot .evo-acoes { gap: 6px; }
.vis-slot .botao { padding: 6px 10px; font-size: .85rem; }
.vis-escolha, .vis-previa { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--raio-cartao); padding: 12px; }
.vis-escolha input { font: inherit; padding: 9px 10px; border-radius: var(--raio-campo); border: 1px solid var(--line); background: var(--sky); color: var(--ink); width: 100%; box-sizing: border-box; }
.vis-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 8px; margin-top: 10px; list-style: none; padding: 0; }
.vis-opcoes button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; width: 100%; text-align: center; font-size: .8rem; font-weight: 600; padding: 6px; border-radius: 12px; background: var(--sky); overflow-wrap: anywhere; }
.vis-opcoes button:focus-visible { outline: 3px solid var(--signal); }
.vis-opcoes img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: var(--c, #6d8298); }
.vis-previa img { display: block; width: min(100%, 420px); border-radius: 14px; margin-bottom: 10px; }
.vis-salvos { list-style: none; padding: 0; display: grid; gap: 8px; }
.vis-salvos li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.vis-salvos span { overflow-wrap: anywhere; flex: 1 1 200px; }
/* Calendário */
.cal-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin: 12px 0; }
.cal-barra .cal-vistas { border-bottom: 0; padding-bottom: 0; }
.cal-dia { margin: 0 0 14px; }
.cal-dia h3 { margin: 0 0 6px; font-size: 1rem; }
.cal-ev { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c, #2474d8); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; }
.cal-ev span { overflow-wrap: anywhere; flex: 1 1 200px; }
.cal-ev .botao { padding: 5px 10px; font-size: .85rem; }
.cal-mes-topo { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-mes-topo h3 { margin: 0; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-sem { font-size: .75rem; font-weight: 700; text-align: center; color: var(--muted); }
.cal-cel { all: unset; box-sizing: border-box; cursor: pointer; min-height: 74px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; display: grid; align-content: start; gap: 2px; font-size: .75rem; overflow: hidden; }
.cal-cel[disabled] { cursor: default; opacity: .45; }
.cal-cel:focus-visible { outline: 3px solid var(--signal); }
.cal-cel.hoje { border-color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.cal-cel.sel { background: var(--sky); }
.cal-cel b { font-family: var(--data); }
.cal-pt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; padding: 1px 4px; color: #fff; background: var(--c, #2474d8); }
.cal-mais { color: var(--muted); }
#cal-sel { margin-top: 12px; }
@media (max-width: 600px) { .cal-cel { min-height: 48px; } .cal-pt { padding: 0; height: 6px; font-size: 0; } }
/* Celular (revisão de 07/11/2026): título do carrossel menor no celular estreito. */
@media (max-width: 420px) { .car-slide h2 { font-size: clamp(1.6rem, 8.4vw, 2.2rem); } }