/* =====================================================================
   FAMILY FIGHT: BLOOD MEMORIES · o site
   A página feita tela de seleção (versão A), com os cortes de trailer, o seletor
   de botões e a linha do tempo da B, e a HUD explicada, as carinhas e o
   escorrido de sangue da C.
   Cores de game/fm_tema.gd; forma: painel chanfrado de 16 px (8 px nos pequenos).
   ===================================================================== */

:root {
  --fundo: #0D080A;
  --painel: #1B0F11;
  --painel-2: #140B0D;
  --moldura: #572626;
  --moldura-clara: #7a3434;
  --vazio: #331C1C;
  --texto: #E8E0D1;
  --titulo: #F7F2E8;
  --apagado: #857873;
  --rotulo: #9E918B;           /* o "apagado" clareado para texto pequeno passar no AA */
  --sangue: #B2141A;
  --sangue-vivo: #E0292B;
  --p1-texto: #FF5C5E;         /* vermelho do jogador 1 para letra pequena */
  --sepia: #D69973;
  --confirmado: #3BB5AD;
  --ouro: #FFD14C;
  --energia: #F245AD;
  --energia-clara: #FFB8E6;
  --vida: #36C24A;
  --vida-meia: #E0BF29;
  --vida-pouca: #D9332E;
  --vida-borda: #C9A24A;       /* o dourado fosco da borda da barra de vida */
  --combo: #FF8C2A;            /* o laranja do contador de acertos da HUD */

  --largura: 1320px;
  --barra-h: 64px;
  --fonte: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--fundo);
  scroll-padding-top: calc(var(--barra-h) + 12px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 600 16px/1.6 var(--fonte);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; color: var(--titulo); }
button { font: inherit; color: inherit; }
kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px;
  font: 800 12px/1 var(--fonte); color: var(--titulo);
  background: linear-gradient(#2b1c1e, #1b1012); border: 1px solid #4d3336; border-bottom-width: 3px; border-radius: 4px;
}
code {
  font: 700 .92em/1.4 ui-monospace, Consolas, monospace; color: var(--titulo);
  background: rgba(87, 38, 38, .35); padding: .08em .35em; border-radius: 3px; word-break: break-word;
}
:focus-visible { outline: 3px solid var(--titulo); outline-offset: 3px; }
::selection { background: var(--sangue); color: #fff; }

.ic { width: 1.1em; height: 1.1em; flex: none; transform: rotate(var(--r, 0deg)); }
.moldura { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.moldura-estreita { width: min(100% - 32px, 920px); }
.sprite { position: absolute; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden]:not(.barra-movel) { display: none !important; }

.pular {
  position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px;
  background: var(--sangue); color: #fff; font-weight: 800; text-decoration: none;
  transform: translateY(-200%); opacity: 0;
}
.pular:focus { transform: none; opacity: 1; }

/* sem JavaScript: some o que só funciona com ele */
html:not(.js) .so-js,
html:not(.js) .cursor,
html:not(.js) .vez,
html:not(.js) .coluna-p2,
html:not(.js) .dicas,
html:not(.js) .cen-lateral,
html:not(.js) .alternador,
html:not(.js) .luta-play,
html:not(.js) .hud-demo,
html:not(.js) .v-lista,
html:not(.js) .v-filtros,
html:not(.js) .ctl-abas,
html:not(.js) .video-pausa,
html:not(.js) .sel-acoes .botao,
html:not(.js) .botoes-modo,
html:not(.js) .cen-geral,
html:not(.js) .cen-geral-nota,
html:not(.js) .barra-mandar,
html:not(.js) .barra-menu { display: none !important; }

/* computador x celular: o celular não recebe botão de 641 MB */
html:not(.toque) .so-movel { display: none !important; }
html.toque .so-pc { display: none !important; }

/* =====================================================================
   PAINEL CHANFRADO — a "cara de painel de jogo".
   A borda e o fundo moram em ::before/::after com clip-path, e o elemento
   em si não é recortado: assim o anel de foco continua aparecendo.
   ===================================================================== */
:where(.coluna, .grade, .sel-passos, .ficha, .cen-info, .cen-tab, .mm-bloco, .dois-pc, .sis,
    .v-tab, .v-painel, .vt, .atualiza, .bx-cartao, .bx-req, .rd, .mais-info, .ctl-painel,
    .faq-item, .notacao, .lupa-caixa, .aviso, .chip-v6, .canto-menu, .menu-modos, .p2-convite, .lt-corpo, .hud-real) {
  --c: 16px; --b: 1px;
  --pc-borda: var(--moldura);
  --pc-fundo: var(--painel);
  position: relative;
  isolation: isolate;
}
:is(.coluna, .grade, .sel-passos, .ficha, .cen-info, .cen-tab, .mm-bloco, .dois-pc, .sis,
    .v-tab, .v-painel, .vt, .atualiza, .bx-cartao, .bx-req, .rd, .mais-info, .ctl-painel,
    .faq-item, .notacao, .lupa-caixa, .aviso, .chip-v6, .canto-menu, .menu-modos, .p2-convite, .lt-corpo, .hud-real)::before,
:is(.coluna, .grade, .sel-passos, .ficha, .cen-info, .cen-tab, .mm-bloco, .dois-pc, .sis,
    .v-tab, .v-painel, .vt, .atualiza, .bx-cartao, .bx-req, .rd, .mais-info, .ctl-painel,
    .faq-item, .notacao, .lupa-caixa, .aviso, .chip-v6, .canto-menu, .menu-modos, .p2-convite, .lt-corpo, .hud-real)::after {
  content: ""; position: absolute; pointer-events: none;
}
:is(.coluna, .grade, .sel-passos, .ficha, .cen-info, .cen-tab, .mm-bloco, .dois-pc, .sis,
    .v-tab, .v-painel, .vt, .atualiza, .bx-cartao, .bx-req, .rd, .mais-info, .ctl-painel,
    .faq-item, .notacao, .lupa-caixa, .aviso, .chip-v6, .canto-menu, .menu-modos, .p2-convite, .lt-corpo, .hud-real)::before {
  inset: 0; z-index: -2; background: var(--pc-borda);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
:is(.coluna, .grade, .sel-passos, .ficha, .cen-info, .cen-tab, .mm-bloco, .dois-pc, .sis,
    .v-tab, .v-painel, .vt, .atualiza, .bx-cartao, .bx-req, .rd, .mais-info, .ctl-painel,
    .faq-item, .notacao, .lupa-caixa, .aviso, .chip-v6, .canto-menu, .menu-modos, .p2-convite, .lt-corpo, .hud-real)::after {
  --ci: calc(var(--c) - var(--b) * .5);
  inset: var(--b); z-index: -1; background: var(--pc-fundo);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
                     calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
}

/* botões pequenos, chanfro de 8 px */
:where(.botao, .alt-botoes button, .v-filtro, .hb, .ctl-abas button, .vez-bt, .lupa-bt, .passo, .luta-play, .link-copiar, .botoes-modo button, .cen-geral button) {
  --c: 8px; --b: 1px;
  --pc-borda: var(--moldura-clara);
  --pc-fundo: var(--painel);
  position: relative; isolation: isolate;
}
:is(.botao, .alt-botoes button, .v-filtro, .hb, .ctl-abas button, .vez-bt, .lupa-bt, .passo, .luta-play, .link-copiar, .botoes-modo button, .cen-geral button)::before,
:is(.botao, .alt-botoes button, .v-filtro, .hb, .ctl-abas button, .vez-bt, .lupa-bt, .passo, .luta-play, .link-copiar, .botoes-modo button, .cen-geral button)::after {
  content: ""; position: absolute; pointer-events: none; transition: background .15s;
}
:is(.botao, .alt-botoes button, .v-filtro, .hb, .ctl-abas button, .vez-bt, .lupa-bt, .passo, .luta-play, .link-copiar, .botoes-modo button, .cen-geral button)::before {
  inset: 0; z-index: -2; background: var(--pc-borda);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
:is(.botao, .alt-botoes button, .v-filtro, .hb, .ctl-abas button, .vez-bt, .lupa-bt, .passo, .luta-play, .link-copiar, .botoes-modo button, .cen-geral button)::after {
  --ci: calc(var(--c) - var(--b) * .5);
  inset: var(--b); z-index: -1; background: var(--pc-fundo);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
                     calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
}

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 0; background: none; cursor: pointer;
  font: 800 14px/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f;
  transition: transform .15s;
}
.botao:hover { --pc-fundo: var(--sangue-vivo); transform: translateY(-1px); }
.botao-p { padding: 10px 16px; font-size: 13px; }
.botao .ic { width: 15px; height: 15px; }
.botao-escuro { --pc-fundo: var(--painel); --pc-borda: var(--moldura-clara); color: var(--titulo); }
.botao-escuro:hover { --pc-fundo: #2c1519; --pc-borda: var(--titulo); }

/* "estreia na versão 6" / "novo na versão 6" */
.selo-v6 {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px;
  font: 800 12px/1 var(--fonte); letter-spacing: .14em; color: var(--energia-clara);
  background: rgba(242, 69, 173, .14); border: 1px solid rgba(242, 69, 173, .6);
}
.selo-v6 .chip-ponto { width: 8px; height: 8px; }
.selo-v6-mini { margin: 0; padding: 4px 8px; font-size: 11px !important; vertical-align: middle; letter-spacing: .1em; }

/* o escorrido de sangue (da versão C) */
.escorrido { display: block; width: 100%; color: var(--sangue); pointer-events: none; }

/* marcadores de jogador */
.marca {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px;
  font: 800 12px/1 var(--fonte); letter-spacing: .04em;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.marca-p1 { background: var(--sangue); color: #fff; }
.marca-p2 { background: var(--sepia); color: #1b0f11; }
.t-p1 { color: var(--p1-texto); }
.t-p2 { color: var(--sepia); }

/* losangos de energia */
.custo { display: inline-flex; gap: 4px; align-items: center; padding: 0 2px; }
.custo i {
  width: 8px; height: 8px; transform: rotate(45deg);
  border: 1.5px solid rgba(242, 69, 173, .5); background: rgba(51, 28, 28, .8);
}
.custo i.cheio {
  background: var(--energia); border-color: var(--energia-clara);
  box-shadow: 0 0 6px rgba(242, 69, 173, .65);
}
.custo-ouro i.cheio { background: var(--ouro); border-color: #fff4c8; box-shadow: 0 0 7px rgba(255, 209, 76, .75); }

/* =====================================================================
   BARRA DO TOPO
   ===================================================================== */
.barra {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--barra-h);
  display: flex; align-items: center; gap: 18px;
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.barra::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 8, 10, .88), rgba(13, 8, 10, .55));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s;
}
.barra.rolou { border-bottom-color: rgba(87, 38, 38, .85); }
.barra.rolou::before { background: rgba(13, 8, 10, .95); }
.barra-logo { flex: none; display: block; }
.barra-logo img { height: 42px; width: auto; }
.barra-nav { margin-inline: auto; }
.barra-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.barra-nav a {
  position: relative; display: block; padding: 10px 13px;
  font: 800 13px/1 var(--fonte); letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  color: var(--texto); transition: color .15s;
}
.barra-nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px;
  background: var(--sangue-vivo); transform: skewX(-20deg) scaleX(0); transform-origin: left;
  transition: transform .2s;
}
.barra-nav a:hover { color: #fff; }
.barra-nav a:hover::after, .barra-nav a[aria-current="true"]::after { transform: skewX(-20deg) scaleX(1); }
.barra-nav a[aria-current="true"] { color: #fff; }
.nav-bolinha {
  position: absolute; top: 6px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--energia); box-shadow: 0 0 8px var(--energia);
}
.barra-baixar { flex: none; padding: 11px 16px; }
.barra-baixar .ic { width: 16px; height: 16px; }
.barra-baixar-info { font-weight: 700; opacity: .8; letter-spacing: .02em; }
.barra-mandar {
  display: none; flex: none; width: 44px; height: 44px; margin-left: auto; place-items: center;
  background: var(--sangue); border: 1px solid #ff6b5f; color: #fff; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.barra-mandar .ic { width: 20px; height: 20px; }
html.toque .barra-mandar { display: grid; }
html.toque .barra-mandar + .barra-menu { margin-left: 0 !important; }
.barra-menu {
  display: none; margin-left: auto; align-items: center; gap: 10px; padding: 10px 12px;
  background: none; border: 1px solid var(--moldura-clara); cursor: pointer;
  font: 800 13px/1 var(--fonte); letter-spacing: .1em;
}
.bm-linhas { display: grid; gap: 4px; width: 18px; }
.bm-linhas i { display: block; height: 2px; background: var(--titulo); transition: transform .2s, opacity .2s; }
.barra-menu[aria-expanded="true"] .bm-linhas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.barra-menu[aria-expanded="true"] .bm-linhas i:nth-child(2) { opacity: 0; }
.barra-menu[aria-expanded="true"] .bm-linhas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   ABERTURA
   ===================================================================== */
.abertura {
  position: relative; overflow: hidden;
  min-height: max(700px, min(100svh, 1040px));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--barra-h) + 36px) 0 34px;
  background: var(--fundo);
}
.abertura-video { position: absolute; inset: 0; z-index: 0; background: #000 url("midia/video/abertura-poster.webp") center / cover no-repeat; }
.abertura-video video { width: 100%; height: 100%; object-fit: cover; }
.abertura-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 75% at 0% 100%, rgba(178, 20, 26, .5), transparent 72%),
    radial-gradient(ellipse 40% 50% at 30% 40%, rgba(120, 10, 16, .35), transparent 70%),
    linear-gradient(90deg, rgba(13, 8, 10, .93) 0%, rgba(13, 8, 10, .78) 32%, rgba(13, 8, 10, .3) 58%, rgba(13, 8, 10, .06) 74%, rgba(13, 8, 10, .32) 100%),
    linear-gradient(0deg, var(--fundo) 0%, rgba(13, 8, 10, .7) 16%, transparent 40%),
    linear-gradient(180deg, rgba(13, 8, 10, .75) 0%, transparent 16%);
}
.abertura-conteudo { position: relative; z-index: 2; margin-bottom: 30px; }
.abertura-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.abertura-kicker span {
  padding: 6px 12px 6px 11px; font: 800 italic 12px/1 var(--fonte); letter-spacing: .16em; color: #fff;
  background: var(--sangue); transform: skewX(-12deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.abertura-kicker span + span { background: rgba(13, 8, 10, .72); box-shadow: inset 0 0 0 1px rgba(247, 242, 232, .3); }
.abertura-logo { margin: 0 0 12px -10px; max-width: 430px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)); }
.abertura-logo img { width: 100%; }
/* a manchete: itálico de verdade (sem skew em bloco, que deixa a margem em escada) */
.manchete {
  max-width: 800px; margin: 0 0 16px;
  font: 800 italic clamp(22px, 3.05vw, 46px)/1.04 var(--fonte); text-transform: uppercase; letter-spacing: -.005em;
  color: var(--titulo); text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 30px rgba(0, 0, 0, .5);
}
.m-l { display: block; }
.m-grito { margin-top: .1em; color: #fff; }
.m-grito span { position: relative; display: inline-block; padding: .02em .32em .04em .14em; isolation: isolate; margin-left: -.14em; }
.m-grito span::before {
  content: ""; position: absolute; z-index: -1; inset: 6% -2% 2% 0;
  background: linear-gradient(90deg, var(--sangue) 0%, #d11a21 70%, rgba(178, 20, 26, .55) 100%);
  transform: skewX(-14deg); box-shadow: 0 8px 28px rgba(178, 20, 26, .5);
  border-bottom: 3px solid #ff6b5f;
}
@media (prefers-reduced-motion: no-preference) {
  .js .manchete .m-l { animation: entra-linha .7s cubic-bezier(.77, 0, .18, 1) both; }
  .js .manchete .m-l:nth-child(2) { animation-delay: .1s; }
  .js .manchete .m-grito { animation-delay: .2s; }
  .js .m-grito span::before { transform-origin: left center; animation: risco .5s .5s cubic-bezier(.77, 0, .18, 1) both; }
}
@keyframes entra-linha { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes risco { from { transform: skewX(-14deg) scaleX(0); } to { transform: skewX(-14deg) scaleX(1); } }
.abertura-sub { max-width: 590px; color: var(--texto); font-size: 17px; opacity: .95; margin-bottom: 24px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* o botão de baixar: impossível de ignorar */
.botao-baixar {
  --c: 14px; --b: 2px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px;
  padding: 16px 34px 16px 24px; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none; color: #fff;
  filter: drop-shadow(0 0 20px rgba(224, 41, 43, .45)) drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
  transition: transform .15s, filter .2s;
}
.botao-baixar::before, .botao-baixar::after { content: ""; position: absolute; pointer-events: none; }
.botao-baixar::before {
  inset: 0; z-index: -2; background: linear-gradient(180deg, #ff8a7a, #c3161c 60%, #7d0c11);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.botao-baixar::after {
  --ci: calc(var(--c) - 1px);
  inset: var(--b); z-index: -1; background: linear-gradient(180deg, #e8312f 0%, var(--sangue) 55%, #8b0d12 100%);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
                     calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
}
.botao-baixar:hover { transform: translateY(-2px); filter: drop-shadow(0 0 30px rgba(255, 70, 60, .7)) drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); }
.botao-baixar:active { transform: translateY(1px); }
.bb-cursor {
  grid-row: 1 / span 2; width: 13px; height: 18px; background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: cutuca 1s ease-in-out infinite;
}
.bb-texto {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 italic 27px/1.05 var(--fonte); letter-spacing: .03em; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.bb-texto .ic { width: 24px; height: 24px; }
.bb-info { grid-column: 2; font: 700 13px/1.3 var(--fonte); letter-spacing: .03em; color: #ffe4e0; }
.botao-mandar { grid-template-columns: 1fr; padding-left: 26px; }
.botao-mandar .bb-info { grid-column: 1; }
.bb-brilho {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: brilho 3.6s ease-in-out 1.2s infinite;
}
@keyframes brilho { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
@keyframes cutuca { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.link-seta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 14px/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--titulo);
  padding: 10px 0; border-bottom: 2px solid var(--sangue-vivo);
}
.link-seta:hover .ic { transform: translateX(4px); }
button.link-seta { background: none; border-width: 0 0 2px; cursor: pointer; }
.link-seta .ic { transition: transform .15s; }

.abertura-v6 { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.abertura-nota { margin: 0; font-size: 13px; color: var(--rotulo); }
.chip-v6 {
  --c: 8px; --pc-borda: rgba(242, 69, 173, .6); --pc-fundo: rgba(27, 15, 17, .88);
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 9px 14px 9px 14px; text-decoration: none; font-size: 13px; color: var(--texto);
}
.chip-v6 .ic { width: 14px; height: 14px; color: var(--energia-clara); transition: transform .15s; }
.chip-v6:hover .ic { transform: translateX(3px); }
.chip-v6 b { font-weight: 800; letter-spacing: .08em; color: var(--energia-clara); }
.chip-v6:hover { --pc-borda: var(--energia); }
.chip-ponto, .bx-selo-ponto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--energia); box-shadow: 0 0 0 0 rgba(242, 69, 173, .7);
  animation: pulso 2s ease-out infinite;
}
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(242, 69, 173, .7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(242, 69, 173, 0); } }

/* números no formato do contador de acertos */
.numeros {
  position: relative; z-index: 2; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.contador {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: end;
  column-gap: 12px; padding: 12px 22px 12px 18px;
}
.contador::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20, 11, 13, .9), rgba(27, 15, 17, .66));
  border-bottom: 3px solid var(--sangue-vivo);
  transform: skewX(-12deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.contador strong {
  grid-row: 1 / span 2; display: flex; align-items: flex-start; gap: 4px;
  font: 800 italic 54px/.9 var(--fonte); color: var(--titulo);
  text-shadow: 0 3px 0 var(--sangue), 0 0 26px rgba(224, 41, 43, .4);
  min-width: 1.2ch; font-variant-numeric: tabular-nums;
}
.contador strong small { font: 800 italic 14px/1 var(--fonte); letter-spacing: .06em; color: var(--p1-texto); text-shadow: none; margin-top: 4px; }
.c-rotulo { font: 800 18px/1.1 var(--fonte); letter-spacing: .06em; color: var(--titulo); }
.c-nota { font: 600 13px/1.3 var(--fonte); color: var(--rotulo); }

.video-pausa {
  position: absolute; z-index: 3; right: max(16px, env(safe-area-inset-right)); top: calc(var(--barra-h) + 16px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(13, 8, 10, .7); border: 1px solid rgba(247, 242, 232, .25); cursor: pointer;
  font: 700 12px/1 var(--fonte); letter-spacing: .06em; color: var(--texto);
}
.video-pausa:hover { border-color: var(--titulo); }
.video-pausa .ic { width: 13px; height: 13px; }
.video-pausa .ic-play { display: none; }
.video-pausa[aria-pressed="true"] .ic-play { display: block; }
.video-pausa[aria-pressed="true"] .ic-pausa { display: none; }

/* =====================================================================
   LETREIRO
   ===================================================================== */
.letreiro { position: relative; z-index: 3; transform: skewY(-1.2deg); margin: 6px 0 0; }
.letreiro-link {
  display: block; overflow: hidden; text-decoration: none; padding: 12px 0;
  background: var(--sangue); border-top: 1px solid #ff6b5f;
  box-shadow: inset 0 12px 18px rgba(255, 255, 255, .07), inset 0 -8px 14px rgba(0, 0, 0, .2);
}
.letreiro-escorrido { position: absolute; left: 0; top: 100%; height: 50px; margin-top: -1px; }
.letreiro-faixa {
  display: flex; width: max-content; gap: 0; list-style: none; margin: 0; padding: 0;
}
.letreiro-faixa.dobrada { animation: letreiro 59s linear infinite; }
.letreiro-link:hover .letreiro-faixa, .letreiro-link:focus-visible .letreiro-faixa { animation-play-state: paused; }
.letreiro-faixa li {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font: 800 italic 15px/1 var(--fonte); letter-spacing: .08em; color: #fff; white-space: nowrap;
}
.letreiro-faixa li::after {
  content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--energia-clara);
  box-shadow: 0 0 8px var(--energia);
}
@keyframes letreiro { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   CORTES DO TRAILER
   ===================================================================== */
.cortes { position: relative; padding: 120px 0 20px; overflow-x: clip; }
.corte {
  width: min(100% - 32px, var(--largura)); margin: 0 auto clamp(48px, 6vw, 92px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 4vw, 64px);
}
.corte:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.corte:nth-of-type(even) .corte-foto { order: 2; }
.corte-foto {
  position: relative; margin: 0; background: #000; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.corte:nth-of-type(even) .corte-foto { clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); }
.corte-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.corte-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 8, 10, .18), transparent 30%, transparent 72%, rgba(13, 8, 10, .35)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 3px);
}
.corte-num {
  margin: 0 0 .1em; font: 800 italic clamp(64px, 8.6vw, 136px)/.82 var(--fonte);
  color: transparent; -webkit-text-stroke: 2px var(--sangue-vivo); font-variant-numeric: tabular-nums;
}
.corte-novo .corte-num { -webkit-text-stroke-color: var(--energia); }
.corte-titulo {
  margin: 0 0 18px; font: 800 italic clamp(28px, 3.3vw, 52px)/.98 var(--fonte); text-transform: uppercase;
  color: var(--titulo); text-wrap: balance; text-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
.corte-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.corte-legenda .faixa-nome { font-size: 16px; }
.corte-quem { font: 800 13px/1 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--rotulo); }
.corte-nota { flex-basis: 100%; font-size: 15px; color: var(--energia-clara); }
.corte-final {
  width: min(100% - 32px, var(--largura)); margin: 0 auto;
  font: 800 italic clamp(44px, 8.4vw, 130px)/.9 var(--fonte); text-transform: uppercase; letter-spacing: -.01em;
}
.corte-final span { display: block; color: transparent; -webkit-text-stroke: 2px var(--apagado); }
.corte-final a { text-decoration: none; display: inline-block; }
.corte-final strong { display: block; color: var(--sangue-vivo); text-shadow: 0 0 60px rgba(224, 41, 43, .35); transition: color .15s; }
.corte-final a:hover strong { color: #ff5552; }
@media (prefers-reduced-motion: no-preference) {
  .corte.revela { opacity: 1 !important; transform: none !important; }
  .corte.revela .corte-foto { transition: clip-path .8s cubic-bezier(.77, 0, .18, 1); }
  .corte.revela:not(.visto) .corte-foto { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  .corte.revela:nth-of-type(even):not(.visto) .corte-foto { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  .corte.revela .corte-foto img { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
  .corte.revela:not(.visto) .corte-foto img { transform: scale(1.12); }
  .corte.revela .corte-texto { transition: opacity .6s .3s ease, transform .8s .3s cubic-bezier(.2, .8, .2, 1); }
  .corte.revela:not(.visto) .corte-texto { opacity: 0; transform: translateX(40px); }
  .corte.revela:nth-of-type(even):not(.visto) .corte-texto { transform: translateX(-40px); }
}

/* =====================================================================
   SEÇÕES E CABEÇALHOS DE TELA
   ===================================================================== */
.secao { position: relative; padding: 110px 0 40px; overflow-x: clip; }
.rodape, .fichas { overflow-x: clip; }
.secao::before {
  content: ""; position: absolute; left: 50%; top: 40px; width: min(1100px, 90vw); height: 320px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(178, 20, 26, .14), transparent 70%);
  pointer-events: none; z-index: -1;
}
.tela-cab { text-align: center; margin-bottom: 42px; }
.tela-sobre {
  display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 12px;
  font: 800 12px/1 var(--fonte); letter-spacing: .26em; color: var(--rotulo);
}
.tela-sobre::before, .tela-sobre::after {
  content: ""; width: 42px; height: 2px; background: linear-gradient(90deg, transparent, var(--moldura-clara));
}
.tela-sobre::after { transform: scaleX(-1); }
.tela-titulo {
  position: relative; display: inline-block; isolation: isolate;
  font: 800 clamp(32px, 5.4vw, 64px)/1.05 var(--fonte); text-transform: uppercase; letter-spacing: .01em;
  color: var(--titulo); text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.tela-titulo span { position: relative; padding: 0 .35em; }
.tela-titulo::before {
  content: ""; position: absolute; z-index: -1; left: -5%; right: -5%; top: 6%; bottom: 0;
  background:
    radial-gradient(48% 62% at 50% 56%, rgba(178, 20, 26, .95), rgba(178, 20, 26, .55) 55%, transparent 76%),
    radial-gradient(30% 40% at 18% 70%, rgba(224, 41, 43, .45), transparent 70%),
    radial-gradient(28% 40% at 84% 38%, rgba(224, 41, 43, .4), transparent 70%);
  transform: skewX(-14deg); filter: blur(3px);
}
.tela-lead { max-width: 660px; margin: 16px auto 0; color: var(--texto); font-size: 17px; opacity: .92; }

.sub-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 44px 0 18px; }
.sub-cab h3 {
  position: relative; padding: 6px 18px 6px 14px; font: 800 italic 18px/1 var(--fonte); letter-spacing: .08em; color: #fff;
}
.sub-cab h3::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--sangue), rgba(178, 20, 26, .2));
  transform: skewX(-14deg); border-left: 4px solid var(--sangue-vivo);
}
.sub-cab h3 { isolation: isolate; }
.sub-cab p { margin: 0; color: var(--rotulo); font-size: 15px; }
.sub-cab-grande { margin-top: 72px; }
.sub-cab-grande h3 { font-size: 24px; padding: 8px 24px 8px 16px; }

/* barra de passos: LUTADORES ▸ CENÁRIO ▸ LUTA */
.sel-passos { --pc-fundo: var(--painel-2); padding: 14px 18px 16px; text-align: center; }
.sel-modo { margin: 0; font: 700 14px/1.2 var(--fonte); letter-spacing: .1em; color: var(--titulo); }
.confronto { margin: 6px 0 0; font: 800 italic 18px/1.2 var(--fonte); letter-spacing: .04em; }
.confronto i { font-style: normal; color: var(--rotulo); margin: 0 8px; font-size: .8em; }
.passos-lista { display: flex; align-items: center; justify-content: center; gap: 12px; list-style: none; margin: 12px 0 0; padding: 0; }
.passos-lista li { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 190px; }
.passos-lista li + li::before {
  content: ""; flex: none; width: 8px; height: 12px; background: var(--apagado); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.passo {
  flex: 1; display: block; padding: 11px 10px; text-align: center; text-decoration: none;
  font: 800 13px/1 var(--fonte); letter-spacing: .09em; color: var(--rotulo);
  --pc-borda: var(--moldura); --pc-fundo: var(--fundo);
}
a.passo:hover { color: var(--titulo); --pc-borda: var(--moldura-clara); }
.passo-ativo { color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
.sel-passos-cen, .sel-passos-luta { margin-top: 16px; }
.sel-passos-luta { max-width: 640px; margin-inline: auto; margin-top: 30px; }

/* =====================================================================
   ESCOLHA SEU LUTADOR
   ===================================================================== */
.sel-palco {
  display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(250px, 320px);
  gap: 18px; align-items: stretch;
}
.coluna {
  --c: 16px; --b: 2px; --pc-borda: rgba(247, 242, 232, .82); --pc-fundo: var(--fundo);
  display: flex; flex-direction: column; min-height: 580px; padding: 2px;
  filter: drop-shadow(0 0 16px rgba(247, 242, 232, .1));
}
.coluna-p2 { --pc-borda: rgba(214, 153, 115, .75); }
.coluna-p2 .p2-jogo { display: flex; flex-direction: column; flex: 1; position: relative; }
.coluna-p2 .p2-jogo[hidden] { display: none; }
.palco {
  position: relative; flex: 1; min-height: 380px; overflow: hidden;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
  background:
    radial-gradient(ellipse 70% 42% at 50% 92%, rgba(178, 20, 26, .22), transparent 70%),
    radial-gradient(ellipse 80% 70% at 50% 60%, #200d12 0%, #150a0d 50%, var(--fundo) 85%);
}
.palco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
}
.palco-chao {
  position: absolute; left: 12%; right: 12%; bottom: 3.5%; height: 18px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent);
}
.quadro {
  position: absolute; bottom: 1.5%; left: 50%; height: 93%;
  aspect-ratio: var(--w) / 454;
  transform: translateX(calc(var(--cx) / var(--w) * -100%));
  -webkit-mask-image: radial-gradient(ellipse 64% 72% at 50% 58%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 72% at 50% 58%, #000 60%, transparent 100%);
}
.quadro > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.palco .entrada, .palco .parado { opacity: 0; }
.palco[data-estado="entrada"] .entrada { opacity: 1; }
.palco[data-estado="parado"] .parado { opacity: 1; }
.palco[data-estado="entrada"] .pose, .palco[data-estado="parado"] .pose, .palco[data-estado="carregando"] .pose { opacity: 0; }
.palco.troca[data-estado="pose"] .pose { animation: surge .35s ease-out; }
@keyframes surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.placa {
  position: relative; padding: 12px 16px 16px; text-align: center;
  background: linear-gradient(180deg, #150b0e, var(--fundo));
  border-top: 1px solid rgba(247, 242, 232, .22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}
.placa p { margin: 0; }
.placa-topo { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--fonte); letter-spacing: .08em; color: var(--texto); }
.placa-alt { margin-left: auto; color: var(--rotulo); font-weight: 600; letter-spacing: .02em; }
.placa-p2 .placa-topo { flex-direction: row-reverse; }
.placa-p2 .placa-alt { margin-left: 0; margin-right: auto; }
.placa-nome { margin-top: 10px !important; font: 800 clamp(30px, 2.9vw, 42px)/1 var(--fonte); letter-spacing: .02em; color: var(--titulo); }
.placa-estilo { margin-top: 6px !important; font: 700 13px/1.2 var(--fonte); letter-spacing: .1em; color: var(--texto); opacity: .85; }
.placa.troca .placa-nome { animation: nome-cai .3s ease-out; }
@keyframes nome-cai { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* P2: convite */
.p2-convite {
  --c: 14px; --pc-borda: transparent; --pc-fundo: transparent;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 22px; text-align: center;
}
.p2-marca {
  font: 800 italic 120px/1 var(--fonte); color: transparent; -webkit-text-stroke: 2px rgba(214, 153, 115, .45);
  letter-spacing: -.02em;
}
.p2-texto { margin: 0; font: 800 17px/1.3 var(--fonte); letter-spacing: .08em; color: var(--titulo); animation: respira 2.4s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.botao-p2 { --pc-fundo: var(--sepia); --pc-borda: #f3c2a2; color: #1b0f11; }
.botao-p2:hover { --pc-fundo: #e8b08b; }
.p2-nota { margin: 0; font-size: 13px; color: var(--rotulo); max-width: 230px; }
.p2-sair {
  position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(13, 8, 10, .8); border: 1px solid rgba(214, 153, 115, .5); cursor: pointer; color: var(--sepia);
}
.p2-sair:hover { border-color: var(--sepia); }

/* centro: grade */
.sel-centro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vez { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vez[hidden] { display: none; }
.vez-rotulo { font: 800 12px/1 var(--fonte); letter-spacing: .14em; color: var(--rotulo); }
.vez-bt { padding: 6px 10px; border: 0; background: none; cursor: pointer; --pc-fundo: var(--fundo); opacity: .6; }
.vez-bt[aria-pressed="true"] { opacity: 1; --pc-borda: var(--titulo); }
.grade {
  --c: 16px; --pc-fundo: var(--painel-2);
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; padding: 18px 34px;
}
.cel {
  grid-column: span 2; position: relative; aspect-ratio: 1; padding: 0; border: 0; background: #000; cursor: pointer;
  transition: transform .15s, filter .2s; outline-offset: 5px;
}
.cel:nth-child(9) { grid-column: 2 / span 2; }
.cel img, .cel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cel video { opacity: 0; transition: opacity .12s; }
.cel.vivo video { opacity: 1; }
.cel-nome {
  position: absolute; left: 3px; right: 3px; bottom: 3px; z-index: 2; padding: 14px 4px 5px;
  font: 800 12px/1 var(--fonte); letter-spacing: .07em; text-transform: uppercase; text-align: center; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88)); opacity: 0; transition: opacity .15s;
}
.cel.sob-cursor .cel-nome, .cel:hover .cel-nome { opacity: 1; }
.cel:not(.sob-cursor):not([aria-pressed="true"]) { filter: saturate(.8) brightness(.82); }
.cel:hover { filter: none; }
.cel.confirma { animation: confirma .35s ease-out; }
@keyframes confirma { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.cel::before, .cel::after {
  position: absolute; top: -7px; z-index: 4; display: none;
  font: 800 11px/1 var(--fonte); padding: 4px 6px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.cel[data-p1]::before { content: "P1"; display: block; left: -7px; background: var(--sangue); color: #fff; }
.cel[data-p2]::after { content: "P2"; display: block; right: -7px; background: var(--sepia); color: #1b0f11; }
.cel.sob-cursor-1[data-p1]::before, .cel.sob-cursor-2[data-p2]::after { display: none; }
.cel-novo {
  position: absolute; left: 50%; top: -9px; z-index: 5; transform: translateX(-50%);
  padding: 4px 8px; font: 800 11px/1 var(--fonte); letter-spacing: .1em; color: #fff;
  background: var(--energia); box-shadow: 0 0 14px rgba(242, 69, 173, .75);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.cursor {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: var(--cw, 100px); height: var(--ch, 100px);
  transform: translate(var(--cx0, 0), var(--cy0, 0));
  transition: transform .2s cubic-bezier(.2, .9, .25, 1.15), width .2s, height .2s, opacity .2s;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0, 0, 0, .6), 0 0 22px 5px rgba(255, 255, 255, .3);
}
.cursor[hidden] { display: none; }
.cursor-p2 { box-shadow: 0 0 0 3px var(--sepia), 0 0 0 5px rgba(0, 0, 0, .6), 0 0 22px 5px rgba(214, 153, 115, .35); }
.cursor.cursor-junto.cursor-p2 { box-shadow: 0 0 0 7px var(--sepia), 0 0 0 9px rgba(0, 0, 0, .6); }
.cursor-tag {
  position: absolute; top: 6px; left: 6px; right: auto; margin: 0;
  padding: 4px 14px 4px 7px; font: 800 12px/1 var(--fonte); color: #fff; background: var(--sangue);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  animation: aponta .9s ease-in-out infinite;
  filter: drop-shadow(0 0 1px #fff);
}
.cursor-p2 .cursor-tag {
  left: auto; right: 6px; margin: 0; padding: 4px 7px 4px 14px;
  background: var(--sepia); color: #1b0f11;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  animation-name: aponta-2;
}
@keyframes aponta { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 0); } }
@keyframes aponta-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 0); } }

.sel-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 18px 0 0; }
#apresentar .ic-pausa { display: none; }
#apresentar[aria-pressed="true"] .ic-pausa { display: block; }
#apresentar[aria-pressed="true"] .ic-play { display: none; }
#apresentar[aria-pressed="true"] { --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; color: #fff; }
.dicas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0 0 0 16px;
  font: 700 12px/1 var(--fonte); letter-spacing: .1em; color: var(--rotulo);
}

/* os botões dos golpes: SA/SB, teclado, Xbox ou PlayStation (enxerto da versão B) */
.botoes-modo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 28px 0 0; }
.bm-rotulo { font: 800 12px/1 var(--fonte); letter-spacing: .14em; color: var(--rotulo); margin-right: 6px; }
.botoes-modo button {
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: 800 12.5px/1 var(--fonte); letter-spacing: .08em; color: var(--rotulo); --pc-fundo: var(--fundo); --pc-borda: var(--moldura);
}
.botoes-modo button:hover { color: var(--titulo); --pc-borda: var(--moldura-clara); }
.botoes-modo button[aria-checked="true"] { color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
:root {
  --f-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.2 20.6 19H3.4z' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --f-qua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
  --f-cir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.6' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
  --f-xis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-botoes] .bj > span { display: none; }
html[data-botoes] .bj { clip-path: none; min-width: 24px; width: 24px; padding: 0; font-size: 13px; }
html[data-botoes="teclado"] .bj { background: #EDE6DA; color: #1b0f11; border-radius: 3px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
html[data-botoes="teclado"] .bj-SA::before { content: "U"; }
html[data-botoes="teclado"] .bj-SB::before { content: "J"; }
html[data-botoes="teclado"] .bj-CA::before { content: "I"; }
html[data-botoes="teclado"] .bj-CB::before { content: "K"; }
html[data-botoes="xbox"] .bj { border-radius: 50%; color: #10090b; }
html[data-botoes="xbox"] .bj-SA { background: #F2C230; }
html[data-botoes="xbox"] .bj-SA::before { content: "Y"; }
html[data-botoes="xbox"] .bj-SB { background: #3D7FE0; color: #fff; }
html[data-botoes="xbox"] .bj-SB::before { content: "X"; }
html[data-botoes="xbox"] .bj-CA { background: #E0443A; color: #fff; }
html[data-botoes="xbox"] .bj-CA::before { content: "B"; }
html[data-botoes="xbox"] .bj-CB { background: #4DB35A; }
html[data-botoes="xbox"] .bj-CB::before { content: "A"; }
html[data-botoes="ps"] .bj { border-radius: 50%; background: #171012; box-shadow: inset 0 0 0 1.5px currentColor; }
html[data-botoes="ps"] .bj::before {
  content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--forma) center / contain no-repeat; mask: var(--forma) center / contain no-repeat;
}
html[data-botoes="ps"] .bj-SA { color: #3BC7A4; --forma: var(--f-tri); }
html[data-botoes="ps"] .bj-SB { color: #F07AC0; --forma: var(--f-qua); }
html[data-botoes="ps"] .bj-CA { color: #F2584C; --forma: var(--f-cir); }
html[data-botoes="ps"] .bj-CB { color: #6FA0F2; --forma: var(--f-xis); }
html[data-botoes="switch"] .bj { border-radius: 50%; background: #171012; color: var(--titulo); box-shadow: inset 0 0 0 1.5px rgba(247, 242, 232, .8); }
html[data-botoes="switch"] .bj-SA::before { content: "X"; }
html[data-botoes="switch"] .bj-SB::before { content: "Y"; }
html[data-botoes="switch"] .bj-CA::before { content: "A"; }
html[data-botoes="switch"] .bj-CB::before { content: "B"; }
.dicas span { display: inline-flex; align-items: center; gap: 6px; }

/* ficha do lutador — a tela de golpes do jogo */
.fichas { margin-top: 26px; }
.ficha {
  --c: 16px; --pc-fundo: linear-gradient(180deg, var(--painel), var(--painel-2));
  display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); margin-bottom: 20px;
  scroll-margin-top: calc(var(--barra-h) + 20px);
}
.ficha:focus { outline: none; }
.js .ficha { animation: ficha-entra .35s ease-out; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ficha-info { display: block; padding: 28px 28px 26px; border-right: 1px solid rgba(87, 38, 38, .75); }
.ficha-quem { margin: 0 0 8px; min-height: 0; }
.ficha-quem:empty { display: none; }
.ficha-nome { font: 800 40px/1 var(--fonte); text-transform: uppercase; letter-spacing: .01em; }
.ficha-estilo {
  margin: 6px 0 0; font: 700 13px/1.2 var(--fonte); letter-spacing: .1em; color: var(--sepia);
  padding-bottom: 8px; position: relative;
}
.ficha-caras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 330px; margin: 18px 0 2px; }
.cara { position: relative; margin: 0; }
.cara img, .cara video {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; padding: 2px; background: var(--moldura-clara);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cara video { position: absolute; left: 0; top: 0; }
.cara:hover img, .cara.viva img { background: var(--titulo); }
.cara figcaption { margin-top: 6px; text-align: center; font: 800 11px/1 var(--fonte); letter-spacing: .16em; color: var(--rotulo); }
.ficha-estilo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; background: var(--sangue-vivo); transform: skewX(-20deg); }
.ficha-dados { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0 16px; }
.ficha-dados div { min-width: 0; }
.ficha-dados dt { font: 800 11px/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.ficha-dados dd { margin: 5px 0 0; font: 700 15px/1.3 var(--fonte); color: var(--titulo); }
.ficha-apres { font-size: 16px; line-height: 1.65; color: var(--texto); margin-bottom: 18px; }
.ficha-sub { font: 800 12px/1 var(--fonte); letter-spacing: .16em; color: var(--rotulo); margin: 4px 0 10px; }
.marcantes { list-style: none; margin: 0; padding: 0; }
.marcantes li { position: relative; padding: 7px 0 7px 18px; font-size: 14px; line-height: 1.5; border-top: 1px solid rgba(87, 38, 38, .55); }
.marcantes li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sangue-vivo); }

.ficha-golpes { padding: 22px 22px 18px; min-width: 0; }
.aba-golpes { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.aba-g {
  padding: 9px 22px; font: 800 13px/1 var(--fonte); letter-spacing: .1em; color: #fff; background: var(--sangue);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}
.aba-n { font: 800 13px/1 var(--fonte); color: var(--rotulo); }
.golpes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sangue); }
.golpe { position: relative; padding: 13px 16px 13px 30px; border-bottom: 1px solid rgba(87, 38, 38, .55); transition: background .15s; }
.golpe::before {
  content: ""; position: absolute; left: 10px; top: 20px; width: 9px; height: 12px; background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; transition: opacity .15s, transform .15s; transform: translateX(-4px);
}
.golpe:hover { background: linear-gradient(90deg, rgba(178, 20, 26, .55), rgba(178, 20, 26, .12) 60%, transparent); }
.golpe:hover::before { opacity: 1; transform: none; }
.g-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.g-linha-2 { justify-content: flex-start; margin-top: 5px; }
.g-nome { font: 700 18px/1.25 var(--fonte); color: var(--titulo); }
.golpe-ouro .g-nome { color: var(--ouro); }
.g-icones { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.tecla-seta {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 3px;
  background: #EDE6DA; color: #1b0f11; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.tecla-seta .seta { width: 15px; height: 15px; transform: rotate(var(--r)); }
.g-icones .mais { font: 800 14px/1 var(--fonte); color: var(--rotulo); margin: 0 2px; }
.tecla-botao {
  min-width: 34px; height: 24px; padding: 0 7px; display: grid; place-items: center; flex: none;
  font: 800 12px/1 var(--fonte); letter-spacing: .04em; color: #fff; background: var(--sangue);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.g-extenso { font: 600 13px/1.3 var(--fonte); color: var(--rotulo); }
.g-efeito { margin: 7px 0 0; font-size: 15px; line-height: 1.55; color: var(--texto); }
.aviso-custo { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--rotulo); }
.aviso-custo .custo i { width: 7px; height: 7px; }

/* =====================================================================
   CENÁRIOS
   ===================================================================== */
.cen-palco { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; }
.cen-painel { min-width: 0; }
.js .cen-painel[hidden] { display: none; }
html:not(.js) .cen-painel + .cen-painel { margin-top: 40px; }
.cen-imagem {
  position: relative; overflow: hidden; background: #000;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
.js .cen-imagem { aspect-ratio: 16 / 9; }
.cen-var { margin: 0; position: relative; }
.js .cen-var { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.js .cen-var.ativa { opacity: 1; }
.cen-var img { width: 100%; height: 100%; object-fit: cover; }
.cen-rotulo {
  position: absolute; left: 18px; bottom: 16px; padding: 6px 14px 6px 12px;
  font: 800 italic 14px/1 var(--fonte); letter-spacing: .1em; color: #fff;
  background: rgba(13, 8, 10, .82); border-bottom: 2px solid var(--sangue-vivo); transform: skewX(-12deg);
}
.cen-imagem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(247, 242, 232, .35), inset 0 0 60px rgba(0, 0, 0, .45);
}
.cen-lamina {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
}
.cen-imagem.trocou .cen-lamina { animation: lamina .6s ease-out; }
@keyframes lamina { 0% { opacity: 1; transform: translateX(-80%); } 100% { opacity: 0; transform: translateX(80%); } }
.cen-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 30px; align-items: center; margin-top: 14px; padding: 22px 26px; }
.cen-titulo { font: 800 26px/1.15 var(--fonte); text-transform: uppercase; margin-bottom: 8px; }
.cen-texto p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.alternador { text-align: center; }
.alt-pergunta { margin: 0 0 10px; font: 800 12px/1 var(--fonte); letter-spacing: .16em; color: var(--rotulo); }
.alt-botoes { display: flex; gap: 8px; justify-content: center; }
.alt-botoes button {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: none; cursor: pointer;
  font: 800 13px/1 var(--fonte); letter-spacing: .08em; color: var(--rotulo); --pc-fundo: var(--fundo); --pc-borda: var(--moldura);
  white-space: nowrap;
}
.alt-botoes button .ic { width: 16px; height: 16px; }
.alt-botoes button:hover { color: var(--titulo); --pc-borda: var(--moldura-clara); }
.alt-botoes button[aria-checked="true"] { color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
.cen-lateral { position: sticky; top: calc(var(--barra-h) + 18px); }
.cen-geral { display: flex; gap: 6px; }
.cen-geral button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px;
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 800 12.5px/1 var(--fonte); letter-spacing: .08em; color: var(--rotulo); --pc-fundo: var(--fundo); --pc-borda: var(--moldura);
}
.cen-geral button .ic { width: 16px; height: 16px; }
.cen-geral button:hover { color: var(--titulo); --pc-borda: var(--moldura-clara); }
.cen-geral button[aria-checked="true"] { color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
.cen-geral-nota { margin: 8px 0 18px; font-size: 13px; line-height: 1.45; color: var(--rotulo); }
.cen-lista-titulo { margin: 0 0 10px; font: 800 12px/1 var(--fonte); letter-spacing: .2em; color: var(--rotulo); }
.cen-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cen-lista > .cen-tab:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.cen-tab {
  --c: 10px; --pc-fundo: var(--painel-2);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  width: 100%; padding: 5px 5px 10px; border: 0; background: none; cursor: pointer; text-align: left;
}
.cen-tab img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  filter: saturate(.75) brightness(.78); transition: filter .2s;
}
.cen-num { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 8px 4px 0; font: 800 italic 12px/1 var(--fonte); color: var(--rotulo); letter-spacing: .1em; }
.cen-novo { font: 800 normal 11px/1 var(--fonte); letter-spacing: .06em; color: var(--energia-clara); }
.cen-nome { margin: 4px 4px 0; font: 700 14px/1.25 var(--fonte); color: var(--texto); }
.cen-tab:hover { --pc-borda: var(--moldura-clara); }
.cen-tab:hover img { filter: none; }
.cen-tab[aria-selected="true"] { --pc-borda: #ff6b5f; --pc-fundo: linear-gradient(90deg, var(--sangue), rgba(178, 20, 26, .35)); }
.cen-tab[aria-selected="true"] img { filter: none; }
.cen-tab[aria-selected="true"] .cen-nome { color: #fff; }
.cen-tab[aria-selected="true"] .cen-num { color: #ffd6d2; }
.cen-tab[aria-selected="true"] .cen-novo { color: #fff; }

/* =====================================================================
   MOMENTOS
   ===================================================================== */
.lutas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.luta { margin: 0; }
.luta-tela {
  position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.luta-tela video, .luta-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.luta-poster { pointer-events: none; transition: opacity .25s; }
.luta.tocando .luta-poster { opacity: 0; }
.luta-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(247, 242, 232, .3); }
.luta-play {
  --c: 10px; --pc-fundo: rgba(178, 20, 26, .9); --pc-borda: #ff8a7a;
  position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: #fff;
  transition: opacity .2s, transform .2s;
}
.luta-play .ic { width: 26px; height: 26px; margin-left: 3px; }
.luta-play:hover { transform: scale(1.06); }
.luta.tocando .luta-play { opacity: 0; }
.luta.tocando:hover .luta-play, .luta.tocando .luta-play:focus-visible { opacity: .85; }
.luta figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px 0; }
.luta-lugar { font: 800 11px/1.2 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--rotulo); }
.luta-quem { font: 800 italic 18px/1.2 var(--fonte); text-transform: uppercase; }
.luta-quem i { color: var(--rotulo); font-size: .8em; margin: 0 4px; }

.galeria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.momento { min-width: 0; display: flex; flex-direction: column; }
.momento-grande { grid-column: span 2; grid-row: span 2; }
.m-link {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.m-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .3s; }
.m-link:hover img, .m-link:focus-visible img { transform: scale(1.045); }
.m-link::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(247, 242, 232, .22); transition: box-shadow .2s; }
.m-link:hover::after, .m-link:focus-visible::after { box-shadow: inset 0 0 0 3px #fff; }
.m-link:focus-visible::after { box-shadow: inset 0 0 0 4px var(--titulo), inset 0 0 0 6px var(--fundo); }
.m-lupa {
  position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(13, 8, 10, .75); color: #fff; opacity: 0; transition: opacity .2s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.m-link:hover .m-lupa, .m-link:focus-visible .m-lupa { opacity: 1; }
.m-legenda { padding: 12px 2px 0; }
.m-legenda p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--texto); }
.m-legenda p b { color: var(--titulo); }
.momento-grande .m-legenda p { font-size: 16px; }

/* a faixa inclinada do nome do especial */
.faixa {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 12px; max-width: 100%;
  background: linear-gradient(90deg, #22130f, rgba(13, 8, 10, .95));
  border-top: 1px solid rgba(247, 242, 232, .18); border-bottom: 2px solid var(--sangue-vivo);
  transform: skewX(-12deg); transform-origin: left bottom;
}
.faixa > * { transform: skewX(12deg); }
.faixa-nome { font: 800 italic 15px/1.1 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--titulo); }
.faixa .custo i { width: 7px; height: 7px; }
.faixa-ouro { border-bottom-color: var(--ouro); border-top-color: rgba(255, 209, 76, .5); box-shadow: 0 0 16px rgba(255, 209, 76, .2); }
.faixa-ouro .faixa-nome { color: var(--ouro); }
.momento-grande .faixa-nome { font-size: 20px; }

/* o contador de acertos em miniatura */
.mini-combo {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: end;
  padding: 4px 16px 4px 12px; background: linear-gradient(100deg, rgba(20, 11, 13, .95), rgba(27, 15, 17, .9));
  border-bottom: 2px solid var(--combo); transform: skewX(-12deg); transform-origin: left bottom;
}
.mini-combo > * { transform: skewX(12deg); }
.mini-combo b { grid-row: span 2; font: 800 italic 30px/.95 var(--fonte); color: var(--combo); text-shadow: 0 2px 0 #6d2a00; }
.mini-combo span { font: 800 13px/1 var(--fonte); letter-spacing: .06em; color: var(--titulo); align-self: end; }
.mini-combo em { font: 800 italic 12px/1.1 var(--fonte); color: var(--combo); letter-spacing: .06em; }
.mc-brutal { border-bottom-color: #ff4a3a; }
.mc-brutal b, .mc-brutal em { color: #ff5a44; text-shadow: 0 2px 0 #5d0000; }
.mini-nocaute {
  display: inline-block; padding: 5px 16px; font: 800 italic 17px/1 var(--fonte); letter-spacing: .08em; color: var(--titulo);
  background: linear-gradient(100deg, rgba(20, 11, 13, .95), rgba(27, 15, 17, .9)); border-bottom: 2px solid var(--confirmado);
  transform: skewX(-12deg);
}

/* ampliação */
.lupa { padding: 0; border: 0; background: transparent; color: var(--texto); width: min(1400px, 100vw - 24px, (100vh - 190px) * 16 / 9); max-width: none; max-height: calc(100vh - 24px); overflow: visible; }
.lupa::backdrop { background: rgba(8, 4, 6, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lupa-caixa { --c: 16px; --pc-borda: rgba(247, 242, 232, .5); --pc-fundo: var(--fundo); padding: 2px; }
.lupa-img { background: #000; clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%, 0 15px); }
.lupa-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; margin: 0 auto; }
.lupa-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 16px; }
.lupa-texto { min-width: 0; }
.lupa-conta { margin: 0 0 4px; font: 800 12px/1 var(--fonte); letter-spacing: .14em; color: var(--rotulo); }
.lupa-texto h3 { font: 800 italic 22px/1.2 var(--fonte); text-transform: uppercase; }
.lupa-texto p:last-child { margin: 4px 0 0; font-size: 15px; }
.lupa-botoes { display: flex; gap: 8px; flex: none; }
.lupa-bt { width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; --pc-fundo: var(--painel); }
.lupa-bt:hover { --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
.lupa-bt .ic { width: 20px; height: 20px; }
.lupa.anda .lupa-img img { animation: anda .25s ease-out; }
@keyframes anda { from { opacity: .3; } to { opacity: 1; } }

/* =====================================================================
   COMO SE LUTA
   ===================================================================== */
.menu-modos {
  --c: 16px;
  --pc-fundo: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(178, 20, 26, .3), transparent 70%), linear-gradient(180deg, #140b0d, var(--fundo));
  display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; min-height: 520px; overflow: hidden;
}
.mm-coluna { padding: 30px 0 26px 26px; display: flex; flex-direction: column; }
.mm-rotulo { margin: 0 0 12px; font: 800 12px/1 var(--fonte); letter-spacing: .2em; color: var(--rotulo); }
.mm-lista { display: flex; flex-direction: column; gap: 2px; }
.mm-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px 9px 12px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 800 23px/1.1 var(--fonte); text-transform: uppercase; letter-spacing: .02em; color: var(--texto);
  transition: color .12s;
}
.mm-item small { font: 700 12px/1 var(--fonte); text-transform: none; letter-spacing: 0; color: var(--rotulo); margin-left: -4px; }
.mm-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .12s;
  background: linear-gradient(90deg, rgba(178, 20, 26, .95), rgba(178, 20, 26, .35) 65%, transparent);
}
.mm-item { isolation: isolate; }
.mm-cursor { width: 12px; height: 15px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s; }
.mm-item[aria-selected="true"] { color: #fff; }
.mm-item[aria-selected="true"]::before { opacity: 1; }
.mm-item[aria-selected="true"] .mm-cursor { opacity: 1; transform: none; }
.mm-item:hover { color: #fff; }
.mm-apagado { color: var(--rotulo); }
.mm-item[aria-selected="true"] small { color: #ffd6d2; }
.mm-apagado[aria-selected="true"] { color: #d9cfc9; }
.mm-dica { margin: auto 0 0; padding-top: 20px; display: flex; gap: 6px; align-items: center; font: 700 12px/1 var(--fonte); letter-spacing: .1em; color: var(--rotulo); }
.mm-paineis { position: relative; padding: 34px 30px 30px; min-width: 0; }
.mm-painel { animation: ficha-entra .3s ease-out; }
.js .mm-painel[hidden] { display: none; }
html:not(.js) .mm-painel + .mm-painel { margin-top: 30px; }
.mm-nome { font: 800 italic 40px/1 var(--fonte); text-transform: uppercase; letter-spacing: .01em; }
.mm-sub { margin: 8px 0 14px; font: 700 14px/1.3 var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--sepia); }
.mm-txt { font-size: 16.5px; line-height: 1.65; max-width: 620px; }
.mm-foto { margin: 18px 0 0; max-width: 560px; }
.mm-foto img { width: 100%; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.mm-foto figcaption { margin-top: 8px; font-size: 13px; color: var(--rotulo); }
.mm-embreve {
  display: inline-block; margin-top: 8px; padding: 8px 16px; font: 800 italic 22px/1 var(--fonte); letter-spacing: .1em; color: var(--apagado);
  border: 2px dashed var(--apagado); transform: rotate(-3deg);
}
.mm-confirma { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 18px; background: rgba(13, 8, 10, .8); border: 1px solid var(--moldura); }
.mm-confirma p { margin: 0 8px 0 0; font: 800 14px/1 var(--fonte); letter-spacing: .1em; }
.mm-confirma span { padding: 7px 14px; font: 800 13px/1 var(--fonte); color: var(--rotulo); }
.mm-confirma .mm-nao { background: var(--sangue); color: #fff; }
.vagas { list-style: none; margin: 18px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.vaga {
  aspect-ratio: 3 / 4; display: grid; place-items: end center; padding-bottom: 6px;
  background: linear-gradient(180deg, #2a1a1c, #150c0e); border: 1px solid var(--moldura);
  font: 800 9px/1 var(--fonte); letter-spacing: .08em; color: var(--rotulo); position: relative;
}
.vaga::before { content: ""; position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #4a3336; box-shadow: 0 13px 0 4px #4a3336; }
.vaga-p1 { border-color: var(--sangue-vivo); color: #fff; background: linear-gradient(180deg, #5a1014, #1f0a0c); }
.vaga-p1::before { background: var(--sangue-vivo); box-shadow: 0 13px 0 4px var(--sangue-vivo); }
.vaga-p2 { border-color: var(--sepia); color: #fff; background: linear-gradient(180deg, #4b3325, #1f140f); }
.vaga-p2::before { background: var(--sepia); box-shadow: 0 13px 0 4px var(--sepia); }
.vaga-livre { border-style: dashed; background: transparent; }
.vaga-livre::before { background: transparent; box-shadow: none; border: 1px dashed var(--moldura); }
.chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 6px 11px; font: 700 13px/1 var(--fonte); color: var(--titulo); background: rgba(87, 38, 38, .45); border: 1px solid var(--moldura); }
.mm-lista-fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 640px; }
.mm-lista-fatos li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.mm-lista-fatos li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--confirmado); }
.mm-lista-fatos b { color: var(--titulo); }
.mm-trio { position: relative; min-height: 100%; }
.mm-trio img { position: absolute; bottom: -8px; height: min(92%, 470px); width: auto; max-width: none; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
.trio-jhonny { left: -16%; z-index: 1; height: min(88%, 450px) !important; }
.trio-eduardo { right: -22%; z-index: 1; height: min(84%, 430px) !important; }
.trio-lucas { left: 50%; transform: translateX(-50%); z-index: 2; }

.dois-pc {
  --c: 16px; --pc-fundo: linear-gradient(90deg, rgba(178, 20, 26, .22), rgba(214, 153, 115, .12)), var(--painel-2);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; align-items: center; margin-top: 18px; padding: 26px 28px;
}
.dp-marcas { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dp-foto { margin: 0; }
.dp-foto img { width: 100%; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.dp-marcas .marca { min-width: 58px; height: 44px; font-size: 22px; }
.dp-mais { font: 800 26px/1 var(--fonte); color: var(--rotulo); }
.dois-pc h3 { font: 800 20px/1.2 var(--fonte); letter-spacing: .04em; margin-bottom: 6px; }
.dois-pc p { margin: 0; font-size: 15.5px; }

/* a tela da luta explicada com números (enxerto da versão C) */
.hud-real {
  --c: 16px; --pc-fundo: linear-gradient(180deg, var(--painel), var(--painel-2));
  margin: 0; padding: 22px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: center;
}
.hr-tela { position: relative; }
.hr-foto { width: 100%; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.hr-marca {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font: 800 16px/1 var(--fonte); color: #fff; background: var(--sangue);
  box-shadow: 0 0 0 3px var(--titulo), 0 4px 14px rgba(0, 0, 0, .7);
}
.hr-faixa { position: absolute; right: 3%; bottom: 6%; width: 40%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.hr-faixa img { width: 100%; border: 2px solid rgba(247, 242, 232, .85); }
.hr-faixa .hr-marca { left: 0; top: 0; }
.hud-real figcaption { min-width: 0; }
.hr-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hr-notas li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.hr-notas b {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font: 800 16px/1 var(--fonte); color: #fff; background: var(--sangue); box-shadow: 0 0 0 3px var(--titulo);
}
.hr-notas p { margin: 3px 0 0; font-size: 15.5px; line-height: 1.55; }
.hr-notas strong { color: var(--titulo); font-weight: 800; }

.sistemas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sis { --c: 16px; --pc-fundo: linear-gradient(180deg, var(--painel), var(--painel-2)); grid-column: span 2; padding: 26px 26px 24px; min-width: 0; }
.sis :is(h3, h4) { font: 800 20px/1.2 var(--fonte); margin-bottom: 10px; }
.sis p { font-size: 15px; line-height: 1.6; }
.sis-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px !important; font: 800 11px/1 var(--fonte) !important; letter-spacing: .18em; color: var(--energia-clara); }
.sis-hud { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: start; --pc-borda: rgba(242, 69, 173, .45); }
.sis-hud .sis-texto :is(h3, h4) + p { margin-bottom: 18px; }
.nota-provisoria { font-size: 13px !important; color: var(--rotulo); border-left: 2px solid var(--energia); padding-left: 10px; margin: 4px 0 0 !important; }
.sis-icone { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; color: var(--sepia); background: rgba(214, 153, 115, .12); border: 1px solid rgba(214, 153, 115, .4); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sis-icone .ic { width: 24px; height: 24px; }
.sis-icone-tonto { position: relative; }
.sis-icone-tonto i { position: absolute; width: 9px; height: 9px; background: var(--ouro); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gira-estrela 2.4s linear infinite; }
.sis-icone-tonto i:nth-child(1) { animation-delay: 0s; }
.sis-icone-tonto i:nth-child(2) { animation-delay: -.8s; }
.sis-icone-tonto i:nth-child(3) { animation-delay: -1.6s; }
@keyframes gira-estrela {
  0% { transform: rotate(0deg) translateX(13px) rotate(0deg) scaleY(.55); }
  100% { transform: rotate(360deg) translateX(13px) rotate(-360deg) scaleY(.55); }
}
.teclas-linha { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 !important; }
.teclas-linha kbd { height: 28px; padding: 0 9px; font-size: 12px; }
.k-p1 { border-color: rgba(224, 41, 43, .8) !important; color: #ffd0cc; }
.k-p2 { border-color: rgba(214, 153, 115, .8) !important; color: #ffe2cf; }
.contadores { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 16px 0 14px; }
.mc-grande b { font-size: 44px; }
.mc-grande span { font-size: 15px; }
.mc-grande em { font-size: 14px; }
.sis-num { margin: 0; font-size: 14px !important; color: var(--rotulo); }
.sis-num b { color: var(--titulo); }
.niveis { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.niveis li { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; }
.nv-nome { font: 800 13px/1 var(--fonte); letter-spacing: .1em; color: var(--titulo); }
.nv-barra { display: flex; gap: 3px; }
.nv-barra i { flex: 1; height: 9px; background: var(--vazio); transform: skewX(-20deg); }
.nv-barra i:nth-child(-n+1) { background: var(--p1-texto); }
.nv-barra[style*="--n:3"] i:nth-child(-n+3) { background: var(--p1-texto); }
.nv-barra[style*="--n:6"] i { background: var(--p1-texto); }
.nv-txt { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--texto); }
.sis-mais ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sis-mais li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.sis-mais li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--energia); }
.sis-mais b { color: var(--titulo); }

/* a HUD de demonstração */
.hud-demo { min-width: 0; }
.hud-tela {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 62%, rgba(178, 20, 26, .28), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(247, 242, 232, .07), transparent 70%),
    linear-gradient(180deg, #1d1317 0%, #26171c 60%, #150b0e 60.3%, #0d080a 100%);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  transition: box-shadow .3s;
}
.hud-tela::before {
  content: ""; position: absolute; left: 0; right: 0; top: 60%; height: 1px; background: rgba(247, 242, 232, .14);
}
.hud-chao {
  position: absolute; left: -30%; right: -30%; bottom: 0; height: 40%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(247, 242, 232, .08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(247, 242, 232, .06) 0 1px, transparent 1px 20px);
  transform: perspective(240px) rotateX(55deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent); mask-image: linear-gradient(0deg, #000 30%, transparent);
}
.hud-p1, .hud-p2 { position: absolute; bottom: 7%; width: auto; max-width: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .65)); }
.hud-p1 { left: 20%; height: 64%; transform: scaleX(-1); }
.hud-p2 { right: 17%; height: 67%; }
.hud-p1.golpe { animation: avanca .26s ease-out; }
.hud-p1.defende { animation: recua .3s ease-out; }
.hud-p2.apanha { animation: apanha .32s ease-out; }
@keyframes avanca { 50% { transform: scaleX(-1) translateX(-12px); } }
@keyframes recua { 50% { transform: scaleX(-1) translateX(9px); } }
@keyframes apanha { 25% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-3px); } }
.hud-faisca {
  position: absolute; right: 27%; top: 38%; width: 70px; height: 70px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 14%, rgba(255, 226, 160, .95) 24%, rgba(255, 140, 42, .5) 40%, transparent 62%);
  clip-path: polygon(50% 0, 60% 36%, 98% 22%, 66% 50%, 100% 78%, 60% 64%, 50% 100%, 40% 64%, 2% 78%, 34% 50%, 0 22%, 40% 36%);
}
.hud-faisca.bate { animation: faisca .32s ease-out; }
@keyframes faisca { 0% { opacity: 1; transform: scale(.35) rotate(0); } 100% { opacity: 0; transform: scale(1.35) rotate(35deg); } }
.hud-treino {
  position: absolute; top: 7%; right: 4.5%; margin: 0 !important; padding: 5px 10px;
  font: 800 italic 12px/1 var(--fonte) !important; letter-spacing: .2em; color: var(--rotulo); border: 1px solid rgba(247, 242, 232, .18);
}
.hud-tela::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  box-shadow: inset 0 0 0 3px var(--ouro), inset 0 0 60px rgba(255, 209, 76, .55);
}
.hud-tela.ouro::after { opacity: 1; }
.hud-topo { position: absolute; left: 4.5%; top: 7%; width: 56%; }
.hud-vida {
  position: relative; height: 26px; background: #3c1216; border: 2px solid var(--vida-borda);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.hud-vida-barra { position: absolute; left: 0; top: 0; bottom: 0; width: var(--vida-pct, 100%); background: var(--vida); transition: width .35s ease, background .3s; }
.hud-vida.meia .hud-vida-barra { background: var(--vida-meia); }
.hud-vida.pouca .hud-vida-barra { background: var(--vida-pouca); }
.hud-vida b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 700 14px/1 var(--fonte); color: #fff; text-shadow: 0 1px 2px #000; }
.hud-rounds { display: flex; gap: 4px; margin-top: 5px; }
.hud-rounds i { width: 11px; height: 11px; border-radius: 50%; background: #2a1c1e; border: 2px solid #5b4a4c; }
.hud-energia { position: absolute; right: 0; top: 33px; display: flex; gap: 5px; width: 64%; }
.hud-energia i {
  flex: 1; height: 13px; transform: skewX(-28deg);
  background: linear-gradient(90deg, var(--energia) calc(var(--f) * 100%), #3a1a26 calc(var(--f) * 100%));
  border: 1px solid rgba(255, 184, 230, .55); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .22);
  transition: background .25s;
}
.hud-energia.sem i { animation: sem-energia .4s ease-in-out 2; }
@keyframes sem-energia { 0%, 100% { border-color: rgba(255, 184, 230, .55); } 50% { border-color: #ff2020; background: #b2141a; } }
.hud-energia.pagou i { animation: pagou .5s ease-out; }
@keyframes pagou { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.hud-nome { margin: 4px 0 0 !important; font: 700 15px/1 var(--fonte) !important; color: #fff; text-shadow: 0 1px 3px #000; }
.hud-combo {
  position: absolute; right: 4%; top: 19%; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: end;
  padding: 6px 18px 6px 12px; background: rgba(20, 11, 13, .88); border-bottom: 3px solid var(--combo);
  transform: skewX(-12deg) translateX(-30px); opacity: 0; transition: opacity .2s, transform .2s;
}
.hud-combo > * { transform: skewX(12deg); }
.hud-combo.mostra { opacity: 1; transform: skewX(-12deg); }
.hud-combo { transform: skewX(-12deg) translateX(30px); }
.hud-combo b { grid-row: span 2; font: 800 italic 46px/.9 var(--fonte); color: var(--combo); text-shadow: 0 3px 0 #6d2a00; }
.hud-combo span { font: 800 16px/1 var(--fonte); letter-spacing: .06em; color: #fff; }
.hud-combo em { font: 800 italic 14px/1.1 var(--fonte); color: var(--combo); min-height: 1em; }
.hud-combo.brutal b, .hud-combo.brutal em { color: #ff5a44; }
.hud-combo.pula b { animation: pula .2s ease-out; }
@keyframes pula { from { transform: skewX(12deg) scale(1.3); } to { transform: skewX(12deg) scale(1); } }
.hud-anuncio { position: absolute; left: 3%; bottom: 7%; max-width: 88%; pointer-events: none; }
.anuncio {
  position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 8px 20px 8px 14px;
  background: linear-gradient(90deg, #1b1010, rgba(13, 8, 10, .92)); border-bottom: 2px solid var(--sangue-vivo);
  border-top: 1px solid rgba(247, 242, 232, .2);
  transform: skewX(-12deg); animation: faixa-abre .28s ease-out both;
}
.anuncio::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; width: 5px; left: 0; background: #fff; box-shadow: 0 0 14px 4px rgba(255, 255, 255, .8);
  animation: lamina-faixa .28s ease-out both;
}
.anuncio-ouro { border-bottom-color: var(--ouro); border-top-color: rgba(255, 209, 76, .6); box-shadow: 0 0 22px rgba(255, 209, 76, .3); }
.anuncio-nome { display: inline-flex; transform: skewX(12deg); font: 800 italic 20px/1 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--titulo); white-space: pre; }
.anuncio-ouro .anuncio-nome { color: var(--ouro); }
.anuncio-nome span { display: inline-block; animation: letra-cai .22s ease-out both; }
.anuncio .custo { transform: skewX(12deg); }
.anuncio .custo i { animation: losango .25s ease-out both; }
.anuncio.sai { animation: faixa-sai .3s ease-in forwards; }
.anuncio.sai .custo i { animation: estilhaca .3s ease-in forwards; }
@keyframes faixa-abre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lamina-faixa { from { left: 0; opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes letra-cai { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes losango { from { opacity: 0; transform: rotate(45deg) scale(2); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes estilhaca { to { opacity: 0; transform: rotate(45deg) scale(2.4); } }
@keyframes faixa-sai { to { opacity: 0; transform: skewX(-12deg) translateX(-24px); } }
.hud-msg {
  min-height: 1.45em; margin: 10px 2px 0 !important;
  font: 700 14px/1.45 var(--fonte) !important; color: var(--texto);
}
.hud-msg.ruim { color: #ffb3ad; }
.hud-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hb {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 14px; border: 0; background: none; cursor: pointer; text-align: left;
  --pc-fundo: var(--fundo); --pc-borda: var(--moldura-clara);
}
.hb span { font: 800 14px/1.1 var(--fonte); letter-spacing: .04em; color: var(--titulo); }
.hb small { font: 600 12px/1 var(--fonte); color: var(--rotulo); }
.hb:hover { --pc-borda: var(--titulo); }
.hb:active { transform: translateY(1px); }
.hb-esp span { font-style: italic; }
.hb-ouro { --pc-borda: rgba(255, 209, 76, .7); }
.hb-ouro span { color: var(--ouro); }

/* =====================================================================
   NOVIDADES
   ===================================================================== */
.versoes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.v-lista { position: sticky; top: calc(var(--barra-h) + 18px); display: flex; flex-direction: column; gap: 8px; }
.v-lista::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--energia), var(--moldura) 25%, var(--moldura)); }
.v-tab {
  --c: 10px; --pc-fundo: var(--painel-2); --pc-borda: var(--moldura);
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 12px 14px 12px 10px; border: 0; background: none; cursor: pointer; text-align: left;
}
.v-no { display: none; }
.v-num {
  grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center;
  font: 800 italic 22px/1 var(--fonte); color: var(--titulo); background: var(--vazio);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.v-quando { font: 800 11px/1.2 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--rotulo); }
.v-tit { font: 700 14px/1.3 var(--fonte); color: var(--texto); margin-top: 3px; }
.v-tab:hover { --pc-borda: var(--moldura-clara); }
.v-tab[aria-selected="true"] { --pc-borda: #ff6b5f; --pc-fundo: linear-gradient(90deg, rgba(178, 20, 26, .85), rgba(178, 20, 26, .2)); }
.v-tab[aria-selected="true"] .v-quando { color: #ffd6d2; }
.v-tab[aria-selected="true"] .v-tit { color: #fff; }
.v-tab-prep .v-num { background: var(--energia); color: #fff; box-shadow: 0 0 18px rgba(242, 69, 173, .6); }
.v-tab-prep { --pc-borda: rgba(242, 69, 173, .55); }
.v-tab-prep .v-quando { color: var(--energia-clara); }
.v-painel { --c: 16px; --pc-fundo: linear-gradient(180deg, var(--painel), var(--painel-2)); padding: 30px 32px 20px; min-width: 0; }
.js .v-painel[hidden] { display: none; }
html:not(.js) .v-painel + .v-painel { margin-top: 24px; }
.v-painel[data-estado="prep"] { --pc-borda: rgba(242, 69, 173, .55); }
.v-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: 800 12px/1 var(--fonte); letter-spacing: .14em; }
.v-selo-prep { background: rgba(242, 69, 173, .16); color: var(--energia-clara); border: 1px solid rgba(242, 69, 173, .6); }
.v-selo-prep::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--energia); animation: pulso 2s ease-out infinite; }
.v-selo-pub { background: rgba(59, 181, 173, .14); color: #8fe0d9; border: 1px solid rgba(59, 181, 173, .6); }
/* a versão 6 publicada (config.publicada_a_6): o painel dela leva a cor de "para baixar hoje" */
.v-painel[data-estado="pub"] { --pc-borda: rgba(59, 181, 173, .65); }
.v-selo-pub .ic { width: 13px; height: 13px; }
.v-cab h3 { margin: 14px 0 8px; font: 800 30px/1.15 var(--fonte); }
.v-rot { display: block; font: 800 italic 14px/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--p1-texto); margin-bottom: 8px; }
.v-meta { font: 700 13px/1.4 var(--fonte); color: var(--rotulo); letter-spacing: .02em; }
.v-resumo { font-size: 17px; line-height: 1.6; max-width: 820px; }
.v-nota { font-size: 13px; color: var(--rotulo); border-left: 2px solid var(--energia); padding-left: 10px; }
.v6 { padding: 34px 34px 26px; }
.v6-cab { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px 44px; align-items: start; }
.v6-cab h3 { margin: 16px 0 12px; font: 800 italic clamp(26px, 3vw, 42px)/1.06 var(--fonte); text-transform: uppercase; text-wrap: balance; }
.v6 .v-rot { color: var(--energia-clara); }
.v6-dados { margin: 6px 0 0; padding-left: 20px; border-left: 2px solid rgba(242, 69, 173, .55); }
.v6-dados div { padding: 11px 0; border-bottom: 1px solid rgba(87, 38, 38, .7); }
.v6-dados div:last-child { border-bottom: 0; }
.v6-dados dt { font: 800 11px/1 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--rotulo); }
.v6-dados dd { margin: 6px 0 0; font: 800 17px/1.25 var(--fonte); color: var(--titulo); }
.v6-dados .v6-n { font: 800 italic 40px/1 var(--fonte); color: var(--energia-clara); text-shadow: 0 0 22px rgba(242, 69, 173, .45); }

.vitrine {
  list-style: none; padding: 0; margin: 28px 0 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.vt {
  --c: 14px; --pc-fundo: linear-gradient(180deg, #1f1114, var(--painel-2));
  display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden;
}
.vt-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.vt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vt:hover .vt-img img { transform: scale(1.04); }
.vt-txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 14px 16px 16px; }
.vt-tag { margin: 0 0 6px; font: 800 11px/1 var(--fonte); letter-spacing: .18em; color: var(--energia-clara); }
.vt h4 { font: 800 italic 21px/1.1 var(--fonte); text-transform: uppercase; letter-spacing: .01em; }
.vt-txt p:not(.vt-tag) { font-size: 14px; line-height: 1.55; margin: 8px 0 14px; color: var(--texto); }
.vt-txt .botao { margin-top: auto; }
.vt-ivanir { grid-row: span 2; --pc-borda: rgba(242, 69, 173, .6); --pc-fundo: radial-gradient(ellipse 80% 55% at 50% 30%, rgba(178, 20, 26, .45), transparent 70%), linear-gradient(180deg, #1f1114, var(--painel-2)); }
.vt-ivanir .vt-img { aspect-ratio: auto; flex: 1; min-height: 300px; background: transparent; display: flex; align-items: flex-end; justify-content: center; }
.vt-ivanir .vt-img img {
  width: auto; height: 100%; max-height: 400px; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 55%, transparent 100%);
}
.vt-ivanir .vt-txt { flex: none; }
.vt-ivanir h4 { font-size: 28px; }
.vt-cc, .vt-largo { grid-column: span 2; flex-direction: row; --pc-borda: rgba(59, 181, 173, .55); }
.vt-cc .vt-img, .vt-largo .vt-img { aspect-ratio: auto; flex: 1.25; min-height: 100%; }
.vt-cc .vt-txt, .vt-largo .vt-txt { flex: 1; }
.vt-lista { --pc-borda: rgba(214, 153, 115, .55); }
/* o cartão da fileira inteira: a foto em 16:9 ao lado do texto (o HUD precisa dos dois cantos) */
.vt-cheio { grid-column: 1 / -1; flex-direction: row; --pc-borda: rgba(242, 69, 173, .55); }
.vt-cheio .vt-img { flex: 1.35; aspect-ratio: 16 / 9; }
.vt-cheio .vt-txt { flex: 1; justify-content: center; }
.vt-cheio.vt-lista { --pc-borda: rgba(214, 153, 115, .55); }
/* o cartão largo com a foto em cima, inteira (a tela de carregamento tem medalhas nos dois lados) */
.vt-largo.vt-topo { flex-direction: column; }
.vt-largo.vt-topo .vt-img { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
.vt-cheio.vt-lista .vt-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.vt-lista .vt-txt { padding: 18px 22px 20px; }
.vt-lista .vt-tag { color: var(--sepia); }
.vt-itens { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.vt-itens li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--texto); }
.vt-itens li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sepia); }
.vt-itens b { color: var(--titulo); }

.v6-lista { margin-top: 18px; border-top: 1px solid rgba(87, 38, 38, .7); padding-top: 6px; }
.v6-lista > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 4px;
  font: 800 15px/1.2 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--titulo);
}
.v6-lista > summary::-webkit-details-marker { display: none; }
.v6-lista > summary::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--sangue); font-size: 18px; clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.v6-lista[open] > summary::before { content: "–"; }
.v6-lista > summary:hover { color: #fff; }
.v6-lista .v-filtros { margin-top: 6px; }

.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 16px; }
.linha-tempo::before { content: ""; position: absolute; left: 35px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--confirmado), var(--moldura) 30%, var(--moldura) 80%, transparent); }
/* sem a versão "para baixar hoje" na linha do tempo (com a 6 publicada, o selo fica no painel de cima), o trilho não começa verde */
.linha-tempo:not(:has(.lt-hoje))::before { background: linear-gradient(var(--moldura), var(--moldura) 80%, transparent); }
.lt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; scroll-margin-top: calc(var(--barra-h) + 20px); }
.lt-marca {
  position: relative; z-index: 1; width: 72px; height: 72px; display: grid; place-items: center;
  background: linear-gradient(180deg, #2a1518, #140b0d); box-shadow: inset 0 0 0 2px var(--moldura-clara);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.lt-marca span { font: 800 italic 26px/1 var(--fonte); color: var(--titulo); }
.lt-hoje .lt-marca { background: linear-gradient(180deg, #52d1c8, var(--confirmado)); box-shadow: 0 0 24px rgba(59, 181, 173, .5); }
.lt-hoje .lt-marca span { color: #062b28; font-size: 34px; }
.lt-corpo { --c: 14px; --pc-fundo: linear-gradient(180deg, var(--painel), var(--painel-2)); padding: 20px 26px 18px; min-width: 0; }
.lt-hoje .lt-corpo { --pc-borda: rgba(59, 181, 173, .65); }
.lt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; font: 700 13px/1.3 var(--fonte); color: var(--rotulo); }
.lt-meta b { font: 800 italic 15px/1 var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--p1-texto); }
.lt-meta span + span::before { content: "·"; margin-right: 14px; color: var(--moldura-clara); }
.lt-meta .lt-selo::before { display: none; }
.lt-selo {
  padding: 6px 10px; font: 800 11.5px/1 var(--fonte); letter-spacing: .12em; color: #062b28; background: var(--confirmado);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.lt-corpo h4 { font: 800 25px/1.15 var(--fonte); margin-bottom: 8px; }
.lt-resumo { font-size: 15.5px; line-height: 1.6; max-width: 880px; margin-bottom: 14px; }
.lt-lista > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px;
  font: 800 13px/1 var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--titulo);
  border: 1px dashed var(--moldura-clara);
}
.lt-lista > summary::-webkit-details-marker { display: none; }
.lt-lista > summary::before { content: "+"; color: var(--sangue-vivo); font-size: 16px; }
.lt-lista[open] > summary::before { content: "–"; }
.lt-lista > summary:hover { border-color: var(--titulo); }
.lt-lista[open] > summary { margin-bottom: 16px; }
.v-grupos-1 { margin-top: 0; }
.v-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.v-filtro {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; cursor: pointer;
  font: 700 13px/1 var(--fonte); color: var(--texto); --pc-fundo: var(--fundo);
}
.v-filtro span { font-weight: 800; color: var(--cat, var(--rotulo)); }
.v-filtro:hover { --pc-borda: var(--titulo); }
.v-filtro[aria-pressed="true"] { color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
.v-filtro[aria-pressed="true"] span { color: #fff; }
.v-grupos { columns: 2 360px; column-gap: 34px; margin-top: 12px; }
.v-grupo { margin: 0 0 22px; }
.v-grupo[hidden] { display: none; }
.v-grupo-t {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding-top: 4px; break-after: avoid;
  font: 800 13px/1.2 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--cat);
}
.v-grupo-marca { width: 10px; height: 10px; transform: rotate(45deg); background: var(--cat); flex: none; }
.v-grupo-n { font-weight: 800; color: var(--rotulo); }
.v-grupo ul { list-style: none; margin: 0; padding: 0; }
.v-grupo li { break-inside: avoid; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 10px 0 10px 14px; border-left: 2px solid color-mix(in srgb, var(--cat) 45%, transparent); margin-bottom: 2px; }
.v-grupo li.com-rosto { grid-template-columns: 38px 1fr; }
.v-grupo li p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.v-grupo li p b { color: var(--titulo); }
.v-mais {
  display: block; width: 100%; margin: 6px 0 0; padding: 9px 12px; text-align: left; cursor: pointer;
  background: none; border: 1px dashed color-mix(in srgb, var(--cat) 60%, transparent);
  font: 800 13px/1.2 var(--fonte); letter-spacing: .04em; color: var(--cat);
}
.v-mais:hover { background: color-mix(in srgb, var(--cat) 12%, transparent); }
.v-grupo-t:focus { outline: none; }
.d-rosto { width: 38px; height: 38px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.cat-lutadores { --cat: var(--p1-texto); }
.cat-golpes { --cat: var(--energia); }
.cat-cenarios { --cat: var(--vida); }
.cat-sistemas { --cat: var(--sepia); }
.cat-online { --cat: var(--confirmado); }
.cat-telas { --cat: #c9b9ff; }
.cat-atualizacao { --cat: var(--vida-meia); }
.cat-correcoes { --cat: var(--rotulo); }
.cat-som { --cat: #8cc8ff; }

.atualiza { --c: 16px; --pc-fundo: linear-gradient(180deg, #120b0d, var(--fundo)); --pc-borda: var(--moldura); margin-top: 40px; padding: 30px 32px 28px; }
.at-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.at-cab h3 { font: 800 28px/1.1 var(--fonte); margin-bottom: 8px; }
.at-cab p:not(.sis-tag) { margin: 0; max-width: 620px; font-size: 16px; }
.canto-menu {
  --c: 8px; --pc-fundo: rgba(13, 8, 10, .9); --pc-borda: var(--moldura);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; font: 700 13px/1 var(--fonte); letter-spacing: .04em;
}
.cm-versao { color: var(--titulo); font-weight: 800; }
.cm-status { color: var(--confirmado); min-width: 18ch; }
.cm-status.buscando { color: var(--rotulo); }
.fluxo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: fx; }
.fluxo li { position: relative; padding: 18px 18px 16px; background: rgba(27, 15, 17, .8); border-top: 3px solid var(--sangue-vivo); }
.fluxo li:not(:last-child)::after {
  content: ""; position: absolute; right: -12px; top: 26px; width: 10px; height: 14px; z-index: 1;
  background: var(--sangue-vivo); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.fx-n { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; font: 800 italic 16px/1 var(--fonte); color: #fff; background: var(--sangue); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.fluxo h4 { font: 800 15px/1.2 var(--fonte); letter-spacing: .06em; margin-bottom: 8px; }
.fluxo p { margin: 0; font-size: 14px; line-height: 1.55; }
.garantias { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.garantias li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(59, 181, 173, .35); background: rgba(59, 181, 173, .06); }
.garantias .ic { width: 24px; height: 24px; color: var(--confirmado); margin-top: 2px; }
.garantias p { margin: 0; font-size: 14px; line-height: 1.55; }
.garantias b { color: var(--titulo); }

/* =====================================================================
   BAIXAR
   ===================================================================== */
.baixar-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 20px; align-items: start; }
/* sem a linha do espelho, esticado à altura dos requisitos o cartão ficava com um vão embaixo:
   ele fica do tamanho dele e acompanha a rolagem ao lado dos requisitos */
@media (min-width: 761px) { .bx-cartao { position: sticky; top: 88px; } }
.bx-cartao {
  --c: 16px; --b: 2px; --pc-borda: linear-gradient(180deg, #ff6b5f, var(--moldura));
  --pc-fundo: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(178, 20, 26, .45), transparent 70%), var(--painel);
  padding: 32px 32px 28px; display: flex; flex-direction: column; align-items: flex-start;
  filter: drop-shadow(0 0 30px rgba(178, 20, 26, .25));
}
.bx-selo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px;
  font: 800 14px/1 var(--fonte); letter-spacing: .16em; color: #062b28; background: var(--confirmado);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.bx-selo-ponto { background: #062b28; animation: none; box-shadow: none; }
.bx-versao { display: flex; align-items: baseline; gap: 12px; }
.bx-versao span { font: 800 22px/1 var(--fonte); letter-spacing: .1em; color: var(--rotulo); }
.bx-versao strong { font: 800 italic 108px/.85 var(--fonte); color: var(--titulo); text-shadow: 0 4px 0 var(--sangue), 0 0 40px rgba(224, 41, 43, .45); }
.bx-dados { display: grid; grid-template-columns: repeat(4, auto); gap: 8px 28px; margin: 22px 0 24px; }
.bx-dados dt { font: 800 11px/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.bx-dados dd { margin: 6px 0 0; font: 800 17px/1.1 var(--fonte); color: var(--titulo); white-space: nowrap; }
.botao-baixar-cheio { width: 100%; padding-block: 20px; }
.botao-baixar-cheio .bb-texto { font-size: 30px; }
.bx-espelho { margin: 16px 0 0; font-size: 14px; color: var(--rotulo); }
.bx-espelho a { color: var(--titulo); text-decoration-color: var(--sangue-vivo); text-underline-offset: 3px; }
.bx-movel { width: 100%; }
.bx-movel p { font-size: 15px; }
.bx-movel .bx-movel-t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 14px/1 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--energia-clara); }
.mandar-link { margin: 14px 0 0; }
.mandar-link label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--rotulo); }
.mandar-link input { width: 100%; padding: 12px; font: 700 15px/1.2 var(--fonte); color: var(--titulo); background: var(--fundo); border: 1px solid var(--moldura-clara); }
.bx-movel .bx-mesmo-assim { margin: 16px 0 0; font-size: 14px; color: var(--rotulo); }
.bx-mesmo-assim a { color: var(--titulo); text-decoration-color: var(--sangue-vivo); text-underline-offset: 3px; }
.link-copiar {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 16px; border: 0; background: none; cursor: pointer;
  font: 800 13px/1 var(--fonte); letter-spacing: .06em; color: var(--titulo); --pc-fundo: var(--fundo);
}
.bx-v6 { margin: auto 0 0; padding-top: 22px; font-size: 14px; line-height: 1.55; color: var(--texto); border-top: 1px solid rgba(87, 38, 38, .7); width: 100%; margin-top: 24px; }
.bx-v6 b { color: var(--energia-clara); }
.bx-req { --c: 16px; padding: 28px 30px; }
.bx-h { font: 800 14px/1 var(--fonte); letter-spacing: .18em; color: var(--rotulo); margin-bottom: 14px; }
.requisitos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.requisitos div { padding: 11px 0 12px; border-top: 1px solid rgba(87, 38, 38, .7); }
.requisitos dt { font: 800 12px/1 var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--sepia); }
.requisitos dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }

.rounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd { --c: 14px; --pc-fundo: linear-gradient(180deg, var(--painel), var(--painel-2)); padding: 22px 22px 20px; min-width: 0; }
.rd-n {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px; font: 800 italic 13px/1 var(--fonte); letter-spacing: .12em; color: #fff;
  background: linear-gradient(90deg, var(--sangue), rgba(178, 20, 26, .3)); transform: skewX(-12deg);
}
.rd h4 { font: 800 22px/1.15 var(--fonte); margin-bottom: 8px; }
.rd p { font-size: 14.5px; line-height: 1.6; margin-bottom: .6em; }
.rd-nota { color: var(--rotulo); font-size: 13.5px !important; }
.rd-lute { --pc-borda: rgba(59, 181, 173, .6); --pc-fundo: radial-gradient(ellipse at 50% 0%, rgba(59, 181, 173, .18), transparent 70%), var(--painel-2); }
.rd-n-lute { background: var(--confirmado); color: #062b28; font-size: 16px; }
.smart { margin-top: 12px; padding: 14px 16px 12px; background: #1c63b5; color: #fff; font-family: "Segoe UI", var(--fonte); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.smart p { margin: 0; }
.smart-t { font: 600 17px/1.2 "Segoe UI", var(--fonte); margin-bottom: 10px !important; }
.smart-l { font-size: 13px; margin-bottom: 14px !important; }
.smart-mais { text-decoration: underline; outline: 2px solid #fff; outline-offset: 3px; }
.smart-b { display: flex; gap: 8px; justify-content: flex-end; }
.smart-b span { padding: 6px 12px; font-size: 13px; border: 1px solid rgba(255, 255, 255, .8); }
.smart-exec { outline: 2px solid #fff; outline-offset: 2px; background: #0f4f99; }
.smart-b { align-items: center; }
.smart-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 8px; border-radius: 50%; vertical-align: middle;
  font: 800 normal 13px/1 var(--fonte); color: #1c63b5; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
.mais-info { --c: 12px; margin-top: 16px; padding: 0; }
.mais-info summary { cursor: pointer; padding: 16px 22px; font: 800 15px/1.3 var(--fonte); color: var(--titulo); list-style: none; }
.mais-info summary::-webkit-details-marker { display: none; }
.mais-info summary::before { content: "+"; display: inline-block; width: 20px; color: var(--sangue-vivo); font-weight: 800; }
.mais-info[open] summary::before { content: "–"; }
.mais-info summary:focus-visible { outline-offset: -4px; }
.mais-info ul { margin: 0; padding: 0 22px 18px 40px; }
.mais-info li { font-size: 14.5px; line-height: 1.6; margin-bottom: 8px; word-break: break-word; }

.ctl-abas { display: flex; gap: 8px; margin-bottom: 12px; }
.ctl-abas button { padding: 12px 22px; border: 0; background: none; cursor: pointer; font: 800 14px/1 var(--fonte); letter-spacing: .1em; color: var(--rotulo); --pc-fundo: var(--fundo); }
.ctl-abas button[aria-selected="true"] { color: #fff; --pc-fundo: var(--sangue); --pc-borda: #ff6b5f; }
.ctl-painel { --c: 16px; padding: 26px 28px; }
.js .ctl-painel[hidden] { display: none; }
html:not(.js) .ctl-painel + .ctl-painel { margin-top: 16px; }
.teclados { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.teclado { padding: 18px 18px 16px; background: rgba(13, 8, 10, .7); border: 1px solid var(--moldura); }
.teclado-p1 { border-color: rgba(224, 41, 43, .55); box-shadow: inset 0 3px 0 var(--sangue); }
.teclado-p2 { border-color: rgba(214, 153, 115, .55); box-shadow: inset 0 3px 0 var(--sepia); }
.tq-quem { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 13px/1 var(--fonte); letter-spacing: .1em; }
.tq-blocos { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-items: flex-end; }
.tq-bloco { display: flex; flex-direction: column; gap: 6px; }
.tq-fila { display: flex; gap: 6px; }
.tq-fila-meio { justify-content: center; }
.tq-fila-desl { margin-left: 16px; }
.tq {
  width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, #2c1d20, #1a1013); border: 1px solid #4d3336; border-bottom-width: 4px; border-radius: 6px;
}
.tq b { font: 800 19px/1 var(--fonte); color: var(--titulo); }
.tq small { font: 800 10px/1 var(--fonte); letter-spacing: .05em; text-transform: uppercase; color: var(--rotulo); }
.teclado-p1 .tq-soco, .teclado-p1 .tq-chute { border-color: rgba(224, 41, 43, .75); background: linear-gradient(180deg, #4a1418, #240b0e); }
.teclado-p1 .tq-soco small, .teclado-p1 .tq-chute small { color: #ffb8b2; }
.teclado-p2 .tq-soco, .teclado-p2 .tq-chute { border-color: rgba(214, 153, 115, .8); background: linear-gradient(180deg, #4a3326, #22160f); }
.teclado-p2 .tq-soco small, .teclado-p2 .tq-chute small { color: #ffd9c2; }
.tq-def small { color: #8fe0d9; }
.tq-cor small { color: var(--energia-clara); }
.tq-obs { margin: 10px 0 0; text-align: right; font: 700 11px/1 var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--rotulo); }
.ctl-nota { margin: 14px 0 18px; font-size: 14px; color: var(--rotulo); }
.tabela-rola { overflow-x: auto; }
.tabela-det { margin-top: 18px; }
.tabela-det .tabela-rola { padding: 0 18px 16px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela caption { text-align: left; padding: 0 0 10px; font: 800 12px/1 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--rotulo); }
.tabela th, .tabela td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(87, 38, 38, .6); line-height: 1.45; }
.tabela thead th { font: 800 12px/1 var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--rotulo); border-bottom: 2px solid var(--sangue); }
.tabela tbody th { font-weight: 700; color: var(--texto); width: 44%; }
.tabela td { color: var(--titulo); font-weight: 700; }
.tabela tbody tr:hover { background: rgba(178, 20, 26, .12); }
.controle-desenho { display: grid; justify-items: center; gap: 10px; margin-bottom: 22px; }
.cd-ombros { display: flex; justify-content: space-between; width: min(100%, 460px); }
.cd-ombro { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 16px; background: #231518; border: 1px solid #4d3336; border-radius: 10px 10px 4px 4px; min-width: 110px; }
.cd-ombro b { font: 800 14px/1 var(--fonte); }
.cd-ombro small { font: 800 10px/1 var(--fonte); letter-spacing: .1em; color: #8fe0d9; }
.cd-ombro:last-child small { color: var(--energia-clara); }
.cd-corpo {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; width: min(100%, 460px); padding: 22px 30px;
  background: radial-gradient(ellipse at 50% 30%, #2d1d20, #150c0e); border: 1px solid #4d3336; border-radius: 60px 60px 90px 90px;
}
.cd-dpad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-dpad small { font: 800 10px/1.2 var(--fonte); letter-spacing: .06em; color: var(--rotulo); text-align: center; max-width: 96px; }
.cd-cruz { width: 66px; height: 66px; background: #3a282b; clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%); }
.cd-face { position: relative; width: 150px; height: 150px; }
.cd-bt {
  position: absolute; width: 50px; height: 50px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, #3a2629, #1d1214); border: 1px solid #5d4043;
}
.cd-bt em { font: 800 normal 10px/1 var(--fonte); color: var(--rotulo); }
.cd-bt small { position: absolute; font: 800 12px/1 var(--fonte); color: #fff; background: var(--sangue); padding: 3px 5px; }
.cd-cima { left: 50px; top: 0; }
.cd-cima small { top: -10px; right: -24px; }
.cd-esq { left: 0; top: 50px; }
.cd-esq small { left: -26px; top: 16px; }
.cd-dir { right: 0; top: 50px; }
.cd-dir small { right: -26px; top: 16px; }
.cd-baixo { left: 50px; bottom: 0; }
.cd-baixo small { bottom: -10px; right: -24px; }
.ps { display: block; width: 16px; height: 16px; }
.ps-tri { background: #EDE6DA; clip-path: polygon(50% 5%, 100% 95%, 0 95%, 50% 5%, 50% 28%, 20% 82%, 80% 82%, 50% 28%); }
.ps-quad { border: 2.5px solid #EDE6DA; width: 14px; height: 14px; }
.ps-circ { border: 2.5px solid #EDE6DA; border-radius: 50%; }
.ps-x { position: relative; }
.ps-x::before, .ps-x::after { content: ""; position: absolute; left: 7px; top: -1px; width: 2.5px; height: 18px; background: #EDE6DA; transform: rotate(45deg); }
.ps-x::after { transform: rotate(-45deg); }
.cd-leg { margin: 6px 0 0; text-align: center; font-size: 14px; color: var(--rotulo); max-width: 520px; }
.notacao { --c: 12px; --pc-fundo: var(--painel-2); margin-top: 16px; padding: 18px 22px; }
.notacao-siglas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px !important; }
.notacao-siglas span { font-size: 14px; }
.notacao-siglas b { display: inline-grid; place-items: center; min-width: 34px; height: 24px; margin-right: 6px; padding: 0 6px; font: 800 12px/1 var(--fonte); color: #fff; background: var(--sangue); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.notacao p:last-child { margin: 0; font-size: 14px; color: var(--texto); }

/* =====================================================================
   PERGUNTAS
   ===================================================================== */
.faq-item { --c: 12px; margin-bottom: 10px; }
.faq-item summary {
  position: relative; cursor: pointer; list-style: none; padding: 18px 60px 18px 22px;
  font: 700 17px/1.4 var(--fonte); color: var(--titulo);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: -5px; }
.faq-item summary:hover { color: #fff; }
.faq-marca { position: absolute; right: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; }
.faq-marca::before, .faq-marca::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--sangue-vivo); transition: transform .2s; }
.faq-marca::after { transform: rotate(90deg); }
.faq-item[open] .faq-marca::after { transform: rotate(0deg); }
.faq-item[open] { --pc-borda: var(--moldura-clara); }
.faq-resp { padding: 0 22px 20px; }
.faq-resp p { margin: 0; font-size: 15.5px; line-height: 1.7; word-break: break-word; }

/* =====================================================================
   FAIXA FINAL
   ===================================================================== */
.final { position: relative; margin-top: 90px; padding: 110px 0 100px; overflow: hidden; text-align: center; isolation: isolate; }
.final-retratos {
  position: absolute; inset: -10% -6%; z-index: -2; display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; align-content: center;
  transform: rotate(-4deg) scale(1.08);
}
.final-retratos img { width: 100%; height: auto; aspect-ratio: 1; filter: grayscale(.35) brightness(.55) contrast(1.05); }
.final-retratos img:nth-child(odd) { transform: translateY(-16%); }
.final-veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(13, 8, 10, .9), rgba(13, 8, 10, .55) 70%, rgba(13, 8, 10, .75)),
    linear-gradient(180deg, var(--fundo), transparent 18%, transparent 82%, var(--fundo)),
    linear-gradient(90deg, rgba(178, 20, 26, .35), transparent 30%, transparent 70%, rgba(178, 20, 26, .35));
}
.final-titulo {
  font: 800 italic clamp(34px, 6vw, 76px)/1 var(--fonte); text-transform: uppercase; letter-spacing: .01em; color: var(--titulo);
  text-shadow: 0 4px 0 var(--sangue), 0 0 40px rgba(224, 41, 43, .5);
}
.final-sub { margin: 16px auto 30px; font: 700 19px/1.4 var(--fonte); color: var(--texto); }
.final-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 34px; }
.final .tela-sobre { margin-bottom: 18px; }

/* =====================================================================
   RODAPÉ, BARRA DO CELULAR, AVISO
   ===================================================================== */
.rodape { position: relative; margin-top: 0; padding: 96px 0 calc(40px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #120a0c, var(--fundo)); }
.rodape-escorrido { position: absolute; left: 0; top: 0; height: 58px; }
.rodape-dentro { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
.rodape-logo { width: 190px; }
.rodape-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.rodape-nav a { display: inline-block; padding: 10px 4px; font: 800 13px/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--texto); }
.rodape-nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--sangue-vivo); text-underline-offset: 5px; }
.rodape-assina { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(87, 38, 38, .5); }
.rodape-assina img { width: 200px; opacity: .92; }
.rodape-assina p { margin: 0; font-size: 13px; color: var(--rotulo); }
.rodape-topo { grid-row: 1; grid-column: 3; display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--fonte); letter-spacing: .12em; text-decoration: none; color: var(--rotulo); }
.rodape-topo:hover { color: var(--titulo); }

.barra-movel {
  position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(13, 8, 10, .97), rgba(13, 8, 10, .85)); border-top: 1px solid var(--moldura);
  transform: translateY(0); transition: transform .3s ease;
}
.barra-movel[hidden] { display: block; transform: translateY(110%); visibility: hidden; }
.barra-movel .botao-baixar { width: 100%; padding: 13px 18px; justify-items: center; }
.barra-movel .bb-texto { font-size: 18px; }
html.toque .barra-movel .botao-mandar .bb-texto { font-size: 16px; white-space: nowrap; }
html:not(.toque) .barra-movel { display: none; }

.aviso {
  --c: 10px; --pc-borda: var(--confirmado); --pc-fundo: #0f1f1e;
  position: fixed; z-index: 90; left: 50%; bottom: 24px; width: max-content; max-width: min(520px, calc(100vw - 32px));
  padding: 14px 20px; font: 700 15px/1.4 var(--fonte); color: var(--titulo);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .3s ease, opacity .3s; pointer-events: none;
}
.aviso.mostra { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.aviso a { color: #8fe0d9; }
html.toque .aviso { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* ---------- entrada suave ao rolar: o script marca .revela e depois .visto ---------- */
@media (prefers-reduced-motion: no-preference) {
  .revela { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
  .revela:not(.visto) { opacity: 0; transform: translateY(26px); }
}
@media print { .revela { opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   TELAS MENORES
   ===================================================================== */
@media (max-width: 1240px) {
  .barra-nav a { padding: 10px 9px; font-size: 12px; letter-spacing: .07em; }
  .sel-palco { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(230px, 280px); }
  .menu-modos { grid-template-columns: 250px minmax(0, 1fr) 280px; }
}

@media (max-width: 1100px) {
  .barra-nav {
    position: fixed; inset: var(--barra-h) 0 0 0; z-index: 59; margin: 0; padding: 30px 24px;
    background:
      radial-gradient(ellipse 80% 50% at 80% 100%, rgba(178, 20, 26, .3), transparent 70%),
      var(--fundo);
    display: none; overflow-y: auto;
  }
  .barra-nav.aberto { display: block; animation: ficha-entra .25s ease-out; }
  .barra-nav ul { flex-direction: column; gap: 4px; max-width: 460px; margin: 0 auto; }
  .barra-nav a {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: 800 26px/1.1 var(--fonte); letter-spacing: .02em;
  }
  .barra-nav a::before { content: ""; width: 12px; height: 16px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; }
  .barra-nav a::after { display: none; }
  .barra-nav a:hover, .barra-nav a:focus-visible, .barra-nav a[aria-current="true"] { background: linear-gradient(90deg, var(--sangue), rgba(178, 20, 26, .2) 70%, transparent); }
  .barra-nav a:hover::before, .barra-nav a:focus-visible::before, .barra-nav a[aria-current="true"]::before { opacity: 1; }
  .nav-bolinha { position: static; margin-left: 4px; }
  .barra-menu { display: inline-flex; }
  .barra-baixar { margin-left: auto; }
  .barra-baixar ~ .barra-menu { margin-left: 0; }
  .manchete { font-size: clamp(26px, 4.1vw, 46px); }
  .abertura-veu {
    background:
      radial-gradient(ellipse 60% 75% at 0% 100%, rgba(178, 20, 26, .5), transparent 72%),
      linear-gradient(90deg, rgba(13, 8, 10, .94) 0%, rgba(13, 8, 10, .84) 45%, rgba(13, 8, 10, .5) 72%, rgba(13, 8, 10, .3) 100%),
      linear-gradient(0deg, var(--fundo) 0%, rgba(13, 8, 10, .7) 16%, transparent 40%),
      linear-gradient(180deg, rgba(13, 8, 10, .75) 0%, transparent 16%);
  }
  .sistemas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sis { grid-column: span 1; }
  .sis-hud { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 22px; }
  .fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fluxo li:nth-child(2)::after { display: none; }
  .garantias { grid-template-columns: 1fr; }
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-ivanir { grid-row: auto; grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .vt-ivanir .vt-img { flex: 0 0 40%; min-height: 300px; }
  .vt-ivanir .vt-txt { flex: 1; justify-content: center; }
  .vt-cc, .vt-largo { grid-column: 1 / -1; }
  .v6-cab { grid-template-columns: 1fr; }
  .v6-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; padding-left: 16px; }
  .v6-dados div { border-bottom: 0; }
  .hud-real { grid-template-columns: 1fr; }
  .corte-titulo { font-size: clamp(26px, 3.6vw, 44px); }
}

@media (max-width: 1024px) {
  .numeros { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
}

/* telas baixas de notebook (1366x768, 1280x720): o botão de baixar tem de caber na primeira dobra */
@media (max-height: 820px) and (min-width: 761px) {
  .abertura { padding-top: calc(var(--barra-h) + 22px); }
  .abertura-kicker { margin-bottom: 8px; }
  .abertura-logo { max-width: 330px; margin-bottom: 8px; }
  .manchete { font-size: clamp(22px, 2.55vw, 40px); margin-bottom: 12px; }
  .abertura-sub { font-size: 16px; margin-bottom: 18px; }
  .abertura-v6 { margin-top: 16px; }
  .contador strong { font-size: 46px; }
}

@media (max-width: 980px) {
  :root { --barra-h: 58px; }
  .secao { padding-top: 84px; }
  .sel-palco { grid-template-columns: 1fr 1fr; }
  .sel-centro { grid-column: 1 / -1; grid-row: 2; }
  .coluna { min-height: 470px; }
  .ficha { grid-template-columns: 1fr; }
  .ficha-info { border-right: 0; border-bottom: 1px solid rgba(87, 38, 38, .75); }
  .cen-palco { grid-template-columns: 1fr; }
  .cen-lateral { position: static; }
  .cen-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cen-lateral { margin-top: 26px; }
  .cen-tab { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 6px 6px 10px; }
  .cen-tab img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .cen-num { margin-top: 8px; }
  .menu-modos { grid-template-columns: 230px minmax(0, 1fr); }
  .mm-trio { display: none; }
  .dois-pc { grid-template-columns: 1fr; }
  .cen-geral { max-width: 520px; }
  .corte, .corte:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .corte:nth-of-type(even) .corte-foto { order: 0; }
  .corte-foto, .corte:nth-of-type(even) .corte-foto { clip-path: polygon(0 0, 100% 0, 100% 90%, 95% 100%, 0 100%); }
  .versoes { grid-template-columns: 1fr; }
  .v-lista { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .v-lista::before { display: none; }
  .v-tab { flex: 0 0 230px; scroll-snap-align: start; }
  .baixar-grade { grid-template-columns: 1fr; }
  .rounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lutas { grid-template-columns: 1fr 1fr; }
  .lutas .luta:last-child { grid-column: 1 / -1; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-dentro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .rodape-topo { grid-row: auto; grid-column: auto; }
  .rodape-assina { flex-direction: column; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .barra-logo img { height: 36px; }
  .barra-baixar { display: none; }
  .barra-menu { margin-left: auto !important; }

  /* topo: o vídeo vira uma faixa 16:9 e o texto desce */
  .abertura { min-height: 0; padding: var(--barra-h) 0 26px; justify-content: flex-start; }
  .abertura-video { position: relative; inset: auto; aspect-ratio: 16 / 9; width: 100%; }
  .abertura-veu { top: var(--barra-h); bottom: auto; height: calc(100vw * 9 / 16); background: linear-gradient(0deg, var(--fundo) 0%, rgba(13, 8, 10, .35) 30%, transparent 55%); }
  .abertura-conteudo { margin-top: -44px; margin-bottom: 26px; }
  .abertura-kicker { display: none; }
  .abertura-logo { max-width: 78vw; margin: 0 auto 12px; }
  .manchete { text-align: center; margin-inline: auto; font-size: clamp(20px, 5.9vw, 30px); }
  .m-grito span { margin-left: 0; }
  .abertura-sub { text-align: center; font-size: 15px; margin-inline: auto; }
  .cta { justify-content: center; }
  .cta .botao-baixar { width: 100%; }
  .botao-mandar .bb-texto { font-size: 19px; }
  .bb-texto { font-size: 21px; }
  .abertura-v6 { justify-content: center; text-align: center; }
  .chip-v6 { display: flex; justify-content: center; text-align: center; }
  .numeros { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .contador { padding: 10px 14px 10px 12px; column-gap: 10px; }
  .contador strong { font-size: 42px; }
  .c-rotulo { font-size: 14px; }
  .c-nota { font-size: 12px; }
  .video-pausa { top: calc(var(--barra-h) + 10px); padding: 7px 9px; }
  .video-pausa span { display: none; }
  .letreiro-faixa li { font-size: 13px; }

  .tela-cab { margin-bottom: 28px; }
  .tela-lead { font-size: 15.5px; }
  .tela-sobre { font-size: 11px; letter-spacing: .2em; }
  .tela-sobre::before, .tela-sobre::after { width: 20px; }

  .sel-palco { gap: 10px; }
  .coluna { min-height: 0; }
  .palco { min-height: 250px; }
  .placa { padding: 10px 10px 12px; }
  .placa-topo { font-size: 11px; gap: 6px; }
  .placa-jog { display: none; }
  .placa-nome { font-size: 24px; margin-top: 8px !important; }
  .placa-estilo { font-size: 11.5px; letter-spacing: .05em; }
  .p2-convite { padding: 14px 10px; gap: 10px; }
  .p2-marca { font-size: 64px; }
  .p2-texto { font-size: 13px; }
  .p2-nota { display: none; }
  .botao-p2 { padding: 10px 12px; font-size: 12px; }
  .grade { gap: 7px; padding: 12px; }
  .cursor-tag { top: 3px; right: auto; left: 3px; margin: 0; padding: 3px 5px; font-size: 10px; clip-path: none; transform: none; animation: none; }
  .cursor-p2 .cursor-tag { left: auto; right: 3px; padding: 3px 5px; clip-path: none; }
  .cel::before, .cel::after { display: none !important; }
  .cel-nome { font-size: 11px; padding: 10px 2px 3px; letter-spacing: .02em; }
  .cel-novo { font-size: 11px; padding: 3px 6px; top: -8px; }
  /* sem o P2: o lutador ocupa a largura toda, e o convite vira uma faixa curta embaixo da grade */
  .sel-palco[data-p2="fora"] { grid-template-columns: minmax(0, 1fr); }
  .sel-palco[data-p2="fora"] .coluna-p1 .palco { min-height: 330px; }
  .sel-palco[data-p2="fora"] .sel-centro { grid-row: auto; }
  .sel-palco[data-p2="fora"] .coluna-p2 { order: 3; }
  .sel-palco[data-p2="fora"] .p2-convite { flex-direction: row; flex-wrap: wrap; padding: 12px 14px; gap: 8px 14px; }
  .sel-palco[data-p2="fora"] .p2-marca { font-size: 36px; -webkit-text-stroke-width: 1.5px; }
  .sel-palco[data-p2="fora"] .p2-texto { font-size: 12.5px; flex: 1 1 150px; text-align: left; }
  .sel-acoes { gap: 8px; }
  .sel-acoes .botao { flex: 1 1 auto; font-size: 12px; padding: 11px 10px; }
  .botoes-modo { gap: 5px; }
  .bm-rotulo { flex-basis: 100%; text-align: center; margin: 0 0 4px; }
  .botoes-modo button { padding: 10px 10px; font-size: 12px; letter-spacing: .04em; }
  .ficha-caras { max-width: none; gap: 8px; }
  .dicas { display: none; }
  .passos-lista { gap: 6px; }
  .passos-lista li { gap: 6px; }
  .passo { font-size: 11px; padding: 10px 4px; letter-spacing: .05em; }
  .ficha-info { padding: 22px 18px 20px; }
  .ficha-nome { font-size: 32px; }
  .ficha-golpes { padding: 16px 12px 14px; }
  .golpe { padding: 12px 8px 12px 12px; }
  .golpe::before { display: none; }
  .g-nome { font-size: 16.5px; }
  .tecla-seta { width: 21px; height: 21px; }
  .tecla-botao { height: 21px; min-width: 30px; }

  .cen-info { grid-template-columns: 1fr; padding: 18px; }
  .alternador { text-align: left; }
  .alt-botoes { justify-content: stretch; }
  .alt-botoes button { flex: 1; justify-content: center; padding: 13px 8px; }
  .cen-titulo { font-size: 21px; }
  .cen-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cen-nome { font-size: 13px; }

  .lutas { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .momento-grande { grid-column: 1 / -1; grid-row: auto; }
  .m-legenda p { font-size: 13px; }
  .momento:not(.momento-grande) .m-legenda p { display: none; }
  .faixa { padding: 5px 10px 5px 8px; gap: 8px; }
  .faixa-nome { font-size: 12px; }
  .faixa .custo { display: none; }
  .momento-grande .faixa .custo { display: inline-flex; }
  .momento-grande .faixa-nome { font-size: 17px; }
  .mini-combo b { font-size: 24px; }
  .mini-combo span { font-size: 11px; }
  .mini-nocaute { font-size: 14px; }
  .lupa { width: 100vw; max-height: 100vh; margin: auto 0; }
  .lupa-rodape { flex-direction: column; align-items: stretch; }
  .lupa-botoes { justify-content: space-between; }
  .lupa-texto h3 { font-size: 18px; }

  .menu-modos { grid-template-columns: 1fr; min-height: 0; }
  .mm-coluna { padding: 22px 16px 8px; }
  .mm-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .mm-item { font-size: 17px; padding: 9px 10px; }
  .mm-dica { display: none; }
  .mm-paineis { padding: 16px 18px 24px; }
  .mm-nome { font-size: 30px; }
  .vagas { gap: 4px; }
  .vaga { font-size: 8.5px; letter-spacing: 0; }
  .dois-pc { grid-template-columns: 1fr; gap: 14px; padding: 22px 18px; }
  .hud-real { padding: 14px; gap: 18px; }
  .hr-marca { width: 24px; height: 24px; font-size: 13px; box-shadow: 0 0 0 2px var(--titulo), 0 3px 10px rgba(0, 0, 0, .7); }
  .hr-faixa { width: 46%; }
  .hr-notas p { font-size: 14.5px; }
  .mm-foto { margin-top: 14px; }
  .sistemas { grid-template-columns: 1fr; }
  .sis { padding: 22px 20px; }
  .hud-botoes { grid-template-columns: 1fr 1fr; }
  .hud-topo { width: 70%; }
  .hud-vida { height: 20px; }
  .hud-vida b { font-size: 12px; }
  .hud-energia { top: 26px; gap: 3px; }
  .hud-energia i { height: 10px; }
  .hud-nome { font-size: 12px !important; }
  .hud-combo b { font-size: 32px; }
  .hud-combo span { font-size: 12px; }
  .anuncio-nome { font-size: 15px; }
  .hud-msg { font-size: 13px !important; }
  .hud-treino { font-size: 10px !important; padding: 3px 7px; }
  .hud-faisca { width: 46px; height: 46px; }

  .v-painel { padding: 22px 18px 14px; }
  .v-cab h3 { font-size: 23px; }
  .v-resumo { font-size: 15.5px; }
  .v6 { padding: 24px 16px 16px; }
  .v6-dados { grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; padding-left: 12px; }
  .v6-dados dd { font-size: 14px; }
  .v6-dados .v6-n { font-size: 32px; }
  .vitrine { gap: 10px; }
  .vt-ivanir .vt-img { flex-basis: 38%; min-height: 230px; }
  .vt-ivanir .vt-img img { max-height: 260px; }
  .vt-ivanir h4 { font-size: 22px; }
  .vt-cc, .vt-largo, .vt-cheio { flex-direction: column; }
  .vt-cheio .vt-img { flex: none; }
  .vt-cheio.vt-lista .vt-itens { grid-template-columns: 1fr; }
  .vt-cc .vt-img, .vt-largo .vt-img { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
  .vt-txt { padding: 12px 12px 14px; }
  .vt h4 { font-size: 16.5px; }
  .vt-txt p:not(.vt-tag) { font-size: 13.5px; margin: 6px 0 12px; }
  .vt-txt .botao { padding: 9px 10px; font-size: 11.5px; letter-spacing: .05em; }
  .linha-tempo::before { left: 23px; }
  .lt { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .lt-marca { width: 48px; height: 48px; }
  .lt-marca span { font-size: 19px; }
  .lt-hoje .lt-marca span { font-size: 24px; }
  .lt-corpo { padding: 16px 16px 14px; }
  .lt-corpo h4 { font-size: 20px; }
  .lt-meta { gap: 4px 10px; }
  .lt-meta span + span::before { display: none; }
  .lt-resumo { font-size: 14.5px; }
  .v6-lista > summary { font-size: 13.5px; }
  .v-grupos { columns: 1; }
  .atualiza { padding: 24px 18px; }
  .at-cab h3 { font-size: 22px; }
  .fluxo { grid-template-columns: 1fr; }
  .fluxo li::after { display: none; }

  .bx-cartao { padding: 26px 20px 22px; }
  .bx-versao strong { font-size: 84px; }
  .bx-dados { grid-template-columns: 1fr 1fr; }
  .bx-req { padding: 24px 18px; }
  .requisitos { grid-template-columns: 1fr; }
  .rounds { grid-template-columns: 1fr; }
  .ctl-painel { padding: 18px 14px; }
  .teclados { grid-template-columns: 1fr; }
  .tq { width: 50px; height: 50px; }
  .tq-blocos { gap: 16px; }
  .cd-corpo { padding: 18px 16px; gap: 10px; border-radius: 40px 40px 60px 60px; }
  .cd-face { transform: scale(.85); transform-origin: right center; }
  .cd-ombro { min-width: 0; padding: 6px 10px; }
  .tabela { font-size: 13px; }
  .tabela th, .tabela td { padding: 8px 8px; }
  .faq-item summary { font-size: 15.5px; padding: 16px 50px 16px 18px; }
  .faq-resp { padding: 0 18px 18px; }
  .faq-resp p { font-size: 15px; }
  .rodape { padding-top: 80px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .rodape-escorrido { height: 44px; }
  .rodape-nav { gap: 2px 14px; }
  .rodape-nav a { padding: 12px 6px; }
  .cortes { padding-top: 90px; }
  .corte { margin-bottom: 52px; }
  .corte-num { font-size: 60px; }
  .corte-titulo { font-size: clamp(26px, 7.4vw, 34px); margin-bottom: 14px; }
  .corte-legenda .faixa-nome { font-size: 14px; }
  .corte-final { font-size: clamp(40px, 12vw, 60px); }
  .corte-final span { -webkit-text-stroke-width: 1.5px; }
  .letreiro-escorrido { height: 34px; }
  .final { padding: 80px 0 70px; margin-top: 60px; }
  .final-retratos { grid-template-columns: repeat(6, 1fr); inset: -4% -12%; }
  .final-sub { font-size: 16px; }
  .final-cta .botao-baixar { width: 100%; }
  .grade { padding-inline: 12px; }
}

@media (max-width: 400px) {
  .contador strong { font-size: 36px; }
  .c-nota { display: none; }
  .bb-texto { font-size: 19px; }
  .botao-baixar { padding: 14px 18px; }
  .placa-nome { font-size: 21px; }
  .mm-item { font-size: 15px; }
}

@media (min-width: 1800px) {
  :root { --largura: 1480px; }
  .abertura-logo { max-width: 600px; }
}

/* =====================================================================
   MOVIMENTO REDUZIDO: nada toca sozinho, sem animação de entrada
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .letreiro-faixa { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .letreiro-faixa li[aria-hidden="true"] { display: none; }
  .bb-brilho, .bb-cursor { animation: none; }
}

/* =====================================================================
   CONSERTOS DA REVISÃO (25/09/2026)
   ===================================================================== */
/* ✕ ○ △ □, as setas e o α na fonte de símbolos do sistema: não puxam mais três pedaços da Open Sans */
.glifo { font-family: "Segoe UI Symbol", "Segoe UI", system-ui, -apple-system, "Noto Sans Symbols 2", sans-serif !important; font-style: normal; }

/* os números do topo são os da versão 6 */
.numeros-bloco { position: relative; z-index: 2; }
.numeros-tag {
  position: absolute; right: 0; bottom: 100%; margin: 0 0 6px;
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  font: 800 11px/1 var(--fonte); letter-spacing: .16em; color: var(--energia-clara);
  background: rgba(13, 8, 10, .8); border: 1px solid rgba(242, 69, 173, .55);
}
.numeros-tag .chip-ponto { width: 7px; height: 7px; }

/* o vídeo do topo sem a HUD (vida, relógio e nomes ficam acima do quadro): corta o alto do vídeo */
.abertura-video { overflow: hidden; background-position: 50% 100%; }
.abertura-video video { position: absolute; left: 0; bottom: 0; width: 100%; height: 118%; object-fit: cover; object-position: 50% 100%; }
@media (min-width: 761px) {
  .abertura-veu {
    background:
      radial-gradient(ellipse 55% 75% at 0% 100%, rgba(178, 20, 26, .5), transparent 72%),
      radial-gradient(ellipse 40% 50% at 30% 40%, rgba(120, 10, 16, .35), transparent 70%),
      radial-gradient(ellipse 42% 36% at 100% 100%, rgba(13, 8, 10, .96) 0, rgba(13, 8, 10, .9) 42%, transparent 86%),
      linear-gradient(90deg, rgba(13, 8, 10, .93) 0%, rgba(13, 8, 10, .78) 32%, rgba(13, 8, 10, .3) 58%, rgba(13, 8, 10, .06) 74%, rgba(13, 8, 10, .32) 100%),
      linear-gradient(0deg, var(--fundo) 0%, rgba(13, 8, 10, .8) 18%, transparent 42%),
      linear-gradient(180deg, rgba(13, 8, 10, .9) 0, rgba(13, 8, 10, .5) 110px, transparent 230px);
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .abertura-veu {
    background:
      radial-gradient(ellipse 60% 75% at 0% 100%, rgba(178, 20, 26, .5), transparent 72%),
      radial-gradient(ellipse 42% 36% at 100% 100%, rgba(13, 8, 10, .96) 0, rgba(13, 8, 10, .9) 42%, transparent 86%),
      linear-gradient(90deg, rgba(13, 8, 10, .94) 0%, rgba(13, 8, 10, .84) 45%, rgba(13, 8, 10, .5) 72%, rgba(13, 8, 10, .3) 100%),
      linear-gradient(0deg, var(--fundo) 0%, rgba(13, 8, 10, .8) 18%, transparent 42%),
      linear-gradient(180deg, rgba(13, 8, 10, .9) 0, rgba(13, 8, 10, .5) 110px, transparent 230px);
  }
}

/* o P2 olha para o P1, como no jogo: a imagem vira em torno do centro, então o ponto de apoio passa a ser w - cx */
.coluna-p2 .quadro { transform: translateX(calc((var(--w) - var(--cx)) / var(--w) * -100%)) scaleX(-1); }
/* bordas do palco esfumadas: pose larga (o martelo e a furadeira do Lucas) some no escuro em vez de ser cortada seca */
.palco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--fundo) 0, rgba(13, 8, 10, .88) 7%, transparent 17%, transparent 83%, rgba(13, 8, 10, .88) 93%, var(--fundo) 100%);
}

/* selo NOVA: letra escura no magenta (5,9:1) e some quando a célula está escolhida ou sob o cursor */
.cel-novo { color: var(--fundo); transition: opacity .15s; }
.cel.sob-cursor .cel-novo, .cel[data-p1] .cel-novo, .cel[data-p2] .cel-novo { opacity: 0; }

/* a nota dos custos logo nos cortes, onde os losangos aparecem pela primeira vez */
.cortes-nota {
  display: flex; align-items: center; gap: 8px; width: min(100% - 32px, var(--largura)); margin: -40px auto 60px;
  font-size: 13px; color: var(--rotulo);
}
.cortes-nota .custo i { width: 7px; height: 7px; }

/* "DE OUTRA LUTA" na faixa colada na foto da HUD */
.hr-faixa-rot {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 6px; padding: 4px 8px;
  font: 800 10px/1 var(--fonte); letter-spacing: .14em; color: var(--titulo); background: rgba(13, 8, 10, .85);
  border: 1px solid rgba(247, 242, 232, .35);
}

/* a etiqueta da demonstração da barra */
.hud-treino { letter-spacing: .14em; }

/* o botão de mandar do celular tem chanfro (clip-path) e cortava o anel de foco de fora */
.barra-mandar:focus-visible { outline-color: #fff; outline-offset: -5px; }

/* a linha de apoio dos botões não deixa uma palavra sozinha */
.bb-info { text-wrap: balance; }

/* a lupa: sem a altura máxima da foto, a moldura fica do tamanho dela */
.lupa-img img { max-height: calc(100vh - 190px); }

/* cenários: a lista de lugares vem antes no código (para o Tab chegar nas abas antes do painel),
   mas continua à direita no computador e embaixo do visor no celular */
.cen-lateral { grid-column: 2; grid-row: 1; }
.cen-paineis { grid-column: 1; grid-row: 1; min-width: 0; }
@media (max-width: 980px) {
  .cen-lateral { grid-column: 1; grid-row: 2; }
  .cen-paineis { grid-column: 1; grid-row: 1; }
}

/* sem JavaScript: os modos já aparecem abertos (e com o nome no título), e os cenários ocupam a largura toda */
html:not(.js) .mm-lista, html:not(.js) .mm-dica { display: none !important; }
html:not(.js) .cen-palco { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .cen-paineis { grid-column: 1; }

/* celular: a barra fixa de mandar o link não cobre o que recebe o foco */
html.toque { scroll-padding-bottom: 90px; }

/* celular: o letreiro não anda sozinho; desliza com o dedo */
html.toque .letreiro-link { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
html.toque .letreiro-link::-webkit-scrollbar { display: none; }
html.toque .letreiro-faixa { padding-left: 16px; }
/* no celular a etiqueta DEMONSTRAÇÃO encostaria na barra de vida: some (o "Experimente aqui" já diz) */
@media (max-width: 600px) { .hud-treino { display: none; } }