/* ==========================================================================
   ESTADUAL DE SP — BATALHA DE MCs
   Parede de concreto claro, lambe-lambe rasgado, pincel, spray e marcador.
   Cores puxadas da logo do CPBMC: vermelho #C13234 + preto.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* parede */
  --fundo: #d6d1c7;
  --fundo-2: #c9c3b7;
  --fundo-3: #bdb6a9;
  --linha: rgba(20, 18, 18, .2);

  /* tinta e papel */
  --tinta: #141212;
  --tinta-2: #2b2725;
  --papel: #f4efe5;
  --papel-2: #e4dccd;
  --fita: rgba(236, 226, 199, .9);

  /* textos sobre a parede clara */
  --texto: #141212;
  --texto-2: #3e3934;
  --texto-3: #6b645b;

  /* CPBMC */
  --vermelho: #c13234;
  --vermelho-esc: #8f1f22;
  --vermelho-luz: #e0574f;
  --ouro: #f2b92e;
  --ouro-esc: #a87708;

  /* acentos neon (inspirados nas paredes pichadas — usados com moderação) */
  --neon-ciano: #22b8cc;
  --neon-rosa: #ff4f8b;
  --neon-roxo: #8a4fff;
  --neon-verde: #3fbf5f;

  --f-titulo: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-rua: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-texto: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

  --topo-h: 66px;

  /* chave espelhada (desktop) */
  --no-w: clamp(128px, 12.2vw, 250px);
  --centro-w: clamp(150px, 14vw, 290px);
  --gap: clamp(12px, 1.6vw, 34px);

  --ruido: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* manchas de concreto */
  --manchas: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='4' seed='3'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .16  0 0 0 1.4 -.55'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  /* pinceladas usadas como máscara (qualquer cor) */
  --pincel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'><path d='M7 17C52 5 118 15 180 8s88 2 113 7c4 15-2 31 3 47-55 12-125 4-186 10S31 70 4 66c4-17-2-32 3-49z'/><path opacity='.6' d='M16 7l104-4-1 4-98 5zM160 74l126-5-2 4-114 5zM2 36l5-6v20z'/></svg>");
  --pincel-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><path d='M3 22C40 9 90 18 150 12s110 4 146 0c3 11-3 22 1 34-49 9-110 3-160 8S36 50 2 48c3-9-2-17 1-26z'/></svg>");
  --risco: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M2 7 C 20 2, 30 11, 48 6 S 80 2, 96 7 S 112 9, 118 4' fill='none' stroke='%23c13234' stroke-width='3.2' stroke-linecap='round'/></svg>");
  /* papel rasgado */
  --rasgo: polygon(0% 2%, 6% 0%, 13% 1.5%, 21% 0%, 30% 1%, 38% 0%, 47% 1.8%, 55% .4%, 64% 1.6%, 72% 0%, 81% 1.2%, 89% 0%, 96% 1.4%, 100% 0%, 99% 9%, 100% 18%, 98.6% 27%, 100% 37%, 99% 48%, 100% 58%, 98.8% 68%, 100% 79%, 99% 89%, 100% 100%, 92% 98.5%, 84% 100%, 75% 98.8%, 66% 100%, 57% 98.4%, 48% 100%, 39% 98.6%, 30% 100%, 21% 98.7%, 12% 100%, 4% 98.5%, 0% 100%, 1.2% 90%, 0% 80%, 1.4% 70%, 0% 60%, 1% 50%, 0% 40%, 1.5% 30%, 0% 20%, 1% 10%);
  --rasgo-foto: polygon(2% 4%, 20% 1%, 41% 3%, 63% 0%, 84% 2.5%, 98% 1%, 100% 22%, 97.5% 45%, 100% 70%, 98% 97%, 76% 100%, 52% 97.5%, 30% 100%, 6% 98%, 0% 76%, 2.5% 50%, 0% 26%);
  --tira: polygon(2% 12%, 30% 4%, 62% 9%, 98% 0%, 100% 46%, 97% 100%, 60% 92%, 25% 100%, 1% 92%, 0% 50%);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-texto);
  font-size: 18px;
  color: var(--texto);
  background-color: var(--fundo);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 239px, rgba(20, 18, 18, .12) 239px 241px),
    repeating-linear-gradient(90deg, transparent 0 479px, rgba(20, 18, 18, .09) 479px 481px),
    radial-gradient(ellipse 70% 60% at 50% 30%, #dfdbd2, var(--fundo) 70%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before { /* textura de concreto */
  content: "";
  position: fixed; inset: 0;
  background-image: var(--ruido);
  opacity: .28;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 200;
}
body.travado { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px dashed var(--vermelho); outline-offset: 4px; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* parede pichada atrás de tudo: textura de rabiscos + tags em marcador */
.parede-tags {
  position: fixed; inset: -60px; z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.parede-tags::before {
  content: ""; position: absolute; inset: 0;
  background: url("imagens/parede-tags.svg") 0 0 / 900px 900px repeat;
  opacity: .16;
}
.parede-tags span {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--f-rua);
  font-size: var(--t);
  line-height: 1;
  color: var(--c);
  opacity: var(--o);
  transform: rotate(var(--r)) skewX(var(--k)) scaleY(1.25);
  white-space: nowrap;
}
.parede-tags span.oco { color: transparent; -webkit-text-stroke: 2px var(--c); }
.parede-tags span.sombra { text-shadow: 3px 3px 0 var(--tinta); }

/* estrelas rabiscadas */
.estrela {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  color: var(--c, var(--tinta));
  transform: rotate(var(--r, 0deg));
  pointer-events: none;
  z-index: 0;
  animation: piscar-estrela 3.2s ease-in-out infinite;
  animation-delay: calc(var(--s) * 30ms);
}

/* selo (adesivo) da logo CPBMC — o papel claro mantém o preto da logo visível */
.selo {
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  width: var(--selo, 48px); aspect-ratio: 1;
  padding: calc(var(--selo, 48px) * .16);
  background: var(--papel);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tinta), 3px 4px 0 var(--vermelho);
  transform: rotate(-8deg);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.selo img { width: 100%; height: 100%; object-fit: contain; }
a.selo:hover { transform: rotate(4deg) scale(1.08); }

/* ---------- 3. Botões ---------- */
/* pincelada de tinta (a forma vem de uma máscara, a cor de --cor) */
.btn-tinta {
  --cor: var(--vermelho);
  position: relative; isolation: isolate;
  font-family: var(--f-titulo);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--papel);
  background: none; border: 0;
  padding: .72em 1.7em .66em;
  transform: rotate(-1.5deg);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
  text-shadow: 1px 2px 0 rgba(0, 0, 0, .25);
}
.btn-tinta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--cor);
  -webkit-mask: var(--pincel) center / 100% 100% no-repeat;
          mask: var(--pincel) center / 100% 100% no-repeat;
  transition: transform .2s;
}
.btn-tinta::after { /* sombra de tinta preta */
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: var(--tinta);
  -webkit-mask: var(--pincel) center / 100% 100% no-repeat;
          mask: var(--pincel) center / 100% 100% no-repeat;
  transform: translate(5px, 6px);
}
.btn-tinta:active:not(:disabled) { transform: rotate(-1deg) scale(.96); }
.btn-tinta:disabled { opacity: .4; }
.btn-tinta--papel { --cor: var(--papel); color: var(--tinta); text-shadow: none; }
.btn-tinta--ouro { --cor: var(--ouro); color: var(--tinta); text-shadow: none; }
.btn-tinta--preto { --cor: var(--tinta); }
.btn-tinta--preto::after { background: var(--vermelho); }
.btn-tinta--xl { font-size: clamp(1.35rem, 3.4vw, 2rem); padding: .75em 1.9em .68em; }
.btn-tinta--peq { font-size: 1rem; padding: .6em 1.3em .55em; }
a.btn-tinta { display: inline-block; text-decoration: none; }

/* link de giz */
.btn-giz {
  position: relative;
  background: none; border: 0;
  font-family: var(--f-rua); font-size: 1.05rem;
  color: var(--texto-2);
  padding: .4em .3em;
}
.btn-giz::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--risco) center / 100% 100% no-repeat;
  opacity: .85;
}

/* hover só em quem tem mouse — no celular o "hover" grudava no último toque */
@media (hover: hover) and (pointer: fine) {
  .btn-tinta:hover:not(:disabled) { transform: rotate(0deg) scale(1.04); }
  .btn-tinta:hover:not(:disabled)::before { transform: scaleX(1.03); }
  .btn-giz:hover { color: var(--vermelho); }
}

/* ---------- 4. Topo (faixa preta) ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--topo-h);
  padding: 8px clamp(14px, 3vw, 30px);
  background: rgba(20, 18, 18, .96);
  color: var(--papel);
}
.topo::after { /* borda de tinta rasgada */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px; height: 7px;
  background: var(--vermelho);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 96% 100%, 91% 40%, 84% 90%, 77% 30%, 70% 80%, 61% 45%, 52% 100%, 44% 35%, 36% 85%, 27% 40%, 19% 95%, 11% 30%, 5% 80%, 0 40%);
}
.marca-grupo { display: flex; align-items: center; gap: 12px; }
.selo--topo { --selo: 44px; box-shadow: 2px 3px 0 var(--vermelho); }
.marca { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none; color: var(--papel); transform: rotate(-3deg); }
.marca__tag { font-family: var(--f-rua); font-size: 1.45rem; }
.marca__ano {
  font-family: var(--f-rua); font-size: 1.15rem; color: var(--ouro);
  margin-left: 6px; transform: rotate(-6deg) translateY(-4px); display: inline-block;
}
.marca__sp {
  font-family: var(--f-titulo); font-size: 1.5rem; color: var(--papel);
  background: var(--vermelho); padding: 0 .25em; line-height: 1.2;
  transform: rotate(6deg) translateY(-2px); display: inline-block;
  clip-path: var(--tira);
}

/* trilha 16 → 8 → 4 → 2 → troféu */
.trilha { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.trilha__passo {
  position: relative;
  display: grid; justify-items: center; gap: 1px;
  background: none; border: 0;
  padding: 4px 10px;
  color: #6f6964;
  transition: color .3s, transform .3s;
}
.trilha__passo b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.trilha__passo small { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.trilha__trofeu { width: 22px; height: 22px; }
.trilha__circ {
  position: absolute; inset: -2px -6px; width: calc(100% + 12px); height: calc(100% + 4px);
  color: var(--vermelho-luz); pointer-events: none; overflow: visible;
  stroke-dasharray: 320; stroke-dashoffset: 320;
}
.trilha__risco { width: 16px; height: 6px; background: var(--risco) center / 100% 100% no-repeat; opacity: .5; }
.trilha__passo.feito { color: var(--papel-2); }
.trilha__passo.feito b { text-decoration: line-through 2px var(--vermelho-luz); }
.trilha__passo.atual { color: var(--papel); transform: rotate(-4deg) scale(1.1); }
.trilha__passo.atual .trilha__circ { animation: desenhar .7s forwards ease-out; }
.trilha__passo.atual.ouro { color: var(--ouro); }
.trilha__passo.atual.ouro .trilha__circ { color: var(--ouro); }

.acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acao {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0;
  padding: 7px 10px;
  font-family: var(--f-texto); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--papel-2);
  border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%;
  transition: background .2s, color .2s, transform .2s, opacity .2s;
}
.acao svg { width: 20px; height: 20px; flex-shrink: 0; }
.acao:disabled { opacity: .3; }
.acao--fogo:not(:disabled) { background: var(--vermelho); color: var(--papel); }
a.acao { text-decoration: none; }
.acao--batalha { color: var(--ouro); border: 2px solid rgba(242, 185, 46, .5); }
.link-batalha { font-family: var(--f-rua); font-size: 1.05rem; color: var(--texto); text-decoration: none; padding: .3em .6em; border-bottom: 3px solid var(--vermelho); animation: entrar-cima .6s 1.35s both; }
.link-batalha b { font-weight: 400; color: var(--vermelho); }
@media (hover: hover) and (pointer: fine) { .link-batalha:hover { color: var(--vermelho); } }
.acao--som[aria-pressed="false"] { color: #8a837c; }
/* botão do beat: equalizador que dança quando está tocando */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 20px; height: 18px; }
.eq i { flex: 1; height: 30%; background: currentColor; border-radius: 1px; transition: height .3s; }
.acao--musica { color: #8a837c; }
.acao--musica.tocando { color: var(--ouro); }
.acao--musica.tocando .eq i { animation: eq .9s ease-in-out infinite; }
.acao--musica.tocando .eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.acao--musica.tocando .eq i:nth-child(3) { animation-delay: -.55s; animation-duration: 1.1s; }
.acao--musica.tocando .eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (hover: hover) and (pointer: fine) {
  .acao:hover:not(:disabled) { background: rgba(244, 239, 229, .12); color: var(--papel); transform: rotate(-3deg); }
  .trilha__passo:hover:not(:disabled) { color: var(--papel); }
}

/* ---------- 5. Tela inicial ---------- */
.tela { position: relative; }
.tela-inicio {
  min-height: calc(100svh - var(--topo-h));
  display: grid; place-items: center;
  overflow: hidden;
  padding: 40px 16px 120px;
  isolation: isolate;
}
.parede-lambes {
  position: absolute; inset: -40px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px;
  z-index: -2; opacity: .42;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 52% 55% at 50% 48%, transparent 34%, #000 85%);
          mask-image: radial-gradient(ellipse 52% 55% at 50% 48%, transparent 34%, #000 85%);
}
.parede-lambes img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  clip-path: var(--rasgo-foto);
}
.tela-inicio::before { /* spray vermelho borrifado na parede */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 55% 50% at 50% 48%, rgba(223, 219, 210, .94), rgba(214, 209, 199, .5) 70%, transparent);
}
.grafite { position: absolute; z-index: -1; pointer-events: none; }
.grafite--mic { width: clamp(64px, 10vw, 130px); left: 6%; bottom: 18%; transform: rotate(-14deg); color: var(--vermelho); opacity: .85; }
.grafite--radio { width: clamp(110px, 15vw, 210px); height: clamp(75px, 10vw, 143px); right: 5%; bottom: 20%; transform: rotate(9deg); color: var(--tinta); opacity: .8; }
.grafite--radio-rodape { position: absolute; width: 150px; height: 102px; right: 6%; bottom: 14%; transform: rotate(-8deg); color: var(--vermelho); opacity: .55; }
.tela-inicio .estrela { z-index: -1; }

.hero { text-align: center; display: grid; justify-items: center; gap: 20px; max-width: 980px; position: relative; }
.hero__apresenta {
  margin: 0;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-rua); font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--texto);
  transform: rotate(-2deg);
  animation: entrar-cima .6s .05s both cubic-bezier(.2, 1.3, .4, 1);
}
.selo--hero { --selo: clamp(56px, 7vw, 74px); }
.hero__rabisco {
  position: absolute; top: 64px; right: -4%;
  margin: 0;
  font-family: var(--f-rua); font-size: clamp(.95rem, 1.8vw, 1.2rem); line-height: 1.15;
  color: var(--vermelho-esc); text-align: left;
  transform: rotate(8deg);
  animation: aparecer .6s 1.6s both;
}
.hero__titulo { position: relative; margin: 44px 0 0; line-height: .82; display: grid; justify-items: center; isolation: isolate; }
.hero__titulo::before { /* respingo de tinta atrás do título */
  content: ""; position: absolute; left: 50%; top: 56%; z-index: -1;
  width: 92%; aspect-ratio: 1000 / 560;
  background: url("imagens/respingo.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(-4deg);
  animation: respingar .5s .1s both cubic-bezier(.2, 1.4, .4, 1);
}
.hero__estadual {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(4rem, 17vw, 13.5rem);
  color: var(--papel);
  -webkit-text-stroke: 3px var(--tinta);
  paint-order: stroke fill;
  text-shadow: -5px -4px 0 var(--neon-ciano), 6px 6px 0 var(--tinta), 11px 11px 0 var(--ouro);
  animation: spray-in .9s .2s both ease-out;
}
.hero__desp {
  font-family: var(--f-rua);
  font-size: clamp(2.3rem, 8vw, 5.6rem);
  color: var(--papel);
  -webkit-text-stroke: 2px var(--tinta);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--tinta), 7px 7px 0 var(--neon-rosa);
  transform: rotate(-7deg);
  margin: -.15em 0 0 42%;
  animation: tag-in .6s .75s both cubic-bezier(.2, 1.5, .4, 1);
}
.hero__ano { /* 2026 em adesivo, colado no canto do título */
  position: absolute; right: 2%; top: -9%;
  font-family: var(--f-titulo); font-size: clamp(1.6rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: .04em;
  color: var(--tinta); background: var(--ouro);
  padding: .14em .4em .08em;
  clip-path: var(--tira);
  transform: rotate(7deg);
  filter: drop-shadow(4px 4px 0 var(--tinta));
  animation: tag-in .6s 1s both cubic-bezier(.2, 1.5, .4, 1);
}
.hero__coroa {
  position: absolute; width: clamp(64px, 10vw, 120px); height: clamp(28px, 4.4vw, 52px);
  top: -14%; left: 4%; color: var(--ouro);
  filter: drop-shadow(2px 2px 0 var(--tinta));
  transform: rotate(-16deg);
  stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: desenhar 1.1s 1s forwards ease-out;
}
.gota {
  position: absolute; top: 74%; left: var(--x);
  width: 7px; height: 0;
  background: var(--c, var(--vermelho));
  border-radius: 0 0 8px 8px;
  animation: escorrer 2.4s var(--d) forwards ease-in;
  z-index: -1;
}
.gota::after { content: ""; position: absolute; bottom: -5px; left: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--vermelho)); }
.hero__fita {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.4rem, 4.2vw, 2.6rem); letter-spacing: .12em;
  color: var(--papel); background: var(--tinta);
  padding: .25em 1.2em .2em;
  transform: rotate(-2deg);
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 98.5% 40%, 100% 62%, 98% 100%, 1% 96%, 0 74%, 1.5% 50%, 0 24%);
  animation: entrar-cima .6s 1s both cubic-bezier(.2, 1.3, .4, 1);
  text-shadow: 2px 2px 0 var(--vermelho);
}
.hero .btn-tinta { margin-top: 6px; animation: entrar-cima .6s 1.2s both cubic-bezier(.2, 1.3, .4, 1); }
.hero__nota { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-rua); color: var(--texto-2); font-size: 1rem; }
.hero__nota svg { width: 34px; height: 18px; color: var(--vermelho); transform: rotate(-10deg); }

.faixa {
  position: absolute; left: -5%; right: -5%; bottom: 34px;
  background: var(--tinta);
  transform: rotate(-2deg);
  overflow: hidden;
  clip-path: polygon(0 8%, 20% 0, 45% 10%, 70% 2%, 100% 9%, 100% 92%, 75% 100%, 50% 90%, 24% 100%, 0 91%);
}
.faixa__trilho { display: flex; width: max-content; animation: rolar 40s linear infinite; }
.faixa__trilho span { font-family: var(--f-titulo); font-size: 1.15rem; letter-spacing: .1em; color: var(--papel); padding: .45em 1em .4em; white-space: nowrap; }
.faixa__trilho span::after { content: "✕"; margin-left: 2em; color: var(--vermelho-luz); }

/* ---------- 6. Palco (batalha em destaque) ---------- */
.tela-chave { padding: 18px 0 60px; }
.palco {
  position: relative;
  padding: 10px clamp(14px, 3vw, 32px) 26px;
  max-width: 1180px; margin: 0 auto;
}
.palco__info {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px;
}
.palco__batalha { font-family: var(--f-rua); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--texto); transform: rotate(-2deg); text-shadow: 2px 2px 0 var(--papel); }
.palco__fase {
  font-family: var(--f-titulo); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--papel); background: var(--tinta); padding: .2em .7em .12em;
  clip-path: var(--tira); transform: rotate(1.5deg);
}
.palco__fase--final { background: var(--vermelho); }
.palco__nav {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: none; border: 2px solid var(--linha);
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  color: var(--texto);
  transition: border-color .2s, transform .2s;
}
.palco__nav svg { width: 22px; height: 12px; }
.palco__nav--ant svg { transform: scaleX(-1); }
.palco__nav:disabled { opacity: .25; }

.faceoff {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(190px, 240px) 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 30px);
}

/* lutador = o lado de um MC (o botão inteiro é clicável) */
.lutador {
  --incl: -3deg;
  position: relative;
  display: grid; justify-items: center; gap: 10px;
  background: none; border: 0;
  padding: 14px 6px 6px;
  text-align: center;
  color: var(--texto);
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), opacity .3s;
}
.lutador--b { --incl: 3deg; }
.lutador::before { /* névoa de spray atrás da foto */
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 115%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.6);
  background: radial-gradient(circle, rgba(193, 50, 52, .42), rgba(193, 50, 52, .1) 45%, transparent 68%);
  opacity: 0; transition: opacity .3s, transform .4s;
  pointer-events: none; z-index: -1;
}
.lutador__moldura {
  position: relative; display: block;
  transform: rotate(var(--incl));
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
  filter: drop-shadow(0 12px 14px rgba(20, 18, 18, .35));
}
.lutador__foto {
  display: block;
  width: clamp(150px, 19vw, 236px); aspect-ratio: 1;
  padding: 10px;
  background: var(--papel);
  clip-path: var(--rasgo);
}
.lutador__foto img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: var(--rasgo-foto); background: var(--fundo-3); transition: filter .4s; }
.lutador__num {
  position: absolute; top: -10px; right: -12px;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--f-titulo); font-size: 1.05rem;
  color: var(--papel); background: var(--vermelho);
  box-shadow: 2px 3px 0 var(--tinta);
  transform: rotate(12deg);
  z-index: 2;
}
.lutador--b .lutador__num { right: auto; left: -12px; transform: rotate(-12deg); }
.lutador__nome {
  position: relative; isolation: isolate;
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1;
  text-transform: uppercase;
  color: var(--papel);
  padding: .12em .45em .08em;
  max-width: 100%; overflow-wrap: anywhere;
}
.lutador__nome::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tinta);
  -webkit-mask: var(--pincel-2) center / 100% 100% no-repeat;
          mask: var(--pincel-2) center / 100% 100% no-repeat;
  transition: background .3s;
}
.lutador__cidade { font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); margin-top: -4px; }

/* botão "X venceu" — igual nos dois lados */
.lutador__venceu {
  position: relative; isolation: isolate;
  margin-top: 4px;
  font-family: var(--f-titulo); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta);
  padding: .5em 1.2em .45em;
  transition: color .2s, transform .2s;
}
.lutador__venceu::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 2.5px solid var(--tinta);
  border-radius: 46% 54% 50% 50% / 60% 50% 50% 40%;
  transition: background .2s, border-color .2s;
}
.lutador:not(:disabled):focus-visible { transform: translateY(-4px); }
.lutador:not(:disabled):focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lutador:not(:disabled):focus-visible .lutador__venceu { color: var(--papel); }
.lutador:not(:disabled):focus-visible .lutador__venceu::before { background: var(--vermelho); border-color: var(--vermelho); }
.lutador:not(:disabled):active { transform: scale(.97); }
.lutador:not(:disabled):active .lutador__venceu { color: var(--papel); }
.lutador:not(:disabled):active .lutador__venceu::before { background: var(--vermelho); border-color: var(--vermelho); }
.lutador:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .lutador:not(:disabled):hover { transform: translateY(-4px); }
  .lutador:not(:disabled):hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .lutador:not(:disabled):hover .lutador__moldura { transform: rotate(calc(var(--incl) * -1)) scale(1.03); }
  .lutador:not(:disabled):hover .lutador__nome::before { background: var(--vermelho); }
  .lutador:not(:disabled):hover .lutador__venceu { color: var(--papel); transform: rotate(-3deg) scale(1.06); }
  .lutador:not(:disabled):hover .lutador__venceu::before { background: var(--vermelho); border-color: var(--vermelho); }
  .palco__nav:hover:not(:disabled) { border-color: var(--vermelho); color: var(--vermelho); transform: rotate(-6deg); }
}

.lutador--vencedor .lutador__nome::before { background: var(--vermelho); }
.lutador--vencedor .lutador__moldura { filter: drop-shadow(-5px -4px 0 var(--neon-ciano)) drop-shadow(6px 6px 0 var(--ouro)) drop-shadow(0 12px 14px rgba(20, 18, 18, .35)); }
.lutador--vencedor .lutador__coroa {
  position: absolute; top: -30px; left: 50%; width: 92px; height: 40px;
  transform: translateX(-50%) rotate(-8deg);
  color: var(--ouro); z-index: 3;
  stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: desenhar .8s .2s forwards ease-out;
  filter: drop-shadow(2px 2px 0 var(--tinta));
}
.lutador--perdedor { opacity: .55; }
.lutador--perdedor .lutador__foto img { filter: grayscale(1) contrast(1.1) brightness(.85); }
.lutador--perdedor .lutador__nome::before { background: var(--texto-3); }
.lutador--perdedor .lutador__nome { text-decoration: line-through 4px var(--vermelho); }
.lutador__fita { /* fita "eliminado" atravessando a foto */
  position: absolute; left: -8%; right: -8%; top: 44%;
  font-family: var(--f-titulo); font-size: 1rem; letter-spacing: .3em;
  color: var(--tinta); background: var(--fita);
  padding: .3em 0 .2em;
  transform: rotate(-14deg);
  clip-path: polygon(1% 0, 99% 8%, 100% 50%, 99% 100%, 0 92%, 1% 50%);
  z-index: 3;
}
.faceoff.flash .lutador--vencedor .lutador__moldura { animation: vitoria .8s cubic-bezier(.2, 1.6, .4, 1); }
.faceoff.flash .lutador__fita { animation: colar-fita .5s .2s both cubic-bezier(.3, 1.4, .5, 1); }

/* centro: VS + instrução / resultado */
.centro { display: grid; justify-items: center; gap: 14px; text-align: center; }
.centro__vs {
  font-family: var(--f-rua); font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1;
  color: var(--vermelho);
  -webkit-text-stroke: 2px var(--tinta);
  paint-order: stroke fill;
  text-shadow: -3px -2px 0 var(--neon-ciano), 4px 4px 0 var(--tinta), 7px 7px 0 var(--ouro);
  transform: rotate(-10deg);
  animation: respirar 2.4s infinite;
}
.centro__instrucao { margin: 0; font-family: var(--f-rua); font-size: 1.1rem; color: var(--texto-2); line-height: 1.2; }
.centro__instrucao b { color: var(--vermelho); font-weight: 400; }

.centro__resultado { display: grid; justify-items: center; gap: 10px; }
.centro__avanca { margin: 0; font-family: var(--f-rua); font-size: 1.35rem; line-height: 1.15; color: var(--vermelho-esc); transform: rotate(-3deg); }

.palco__rodape { margin: 18px 0 0; text-align: center; font-size: .95rem; color: var(--texto-3); }
.atalhos kbd {
  font-family: var(--f-titulo); font-size: .8rem;
  border: 1.5px solid var(--texto-3); border-bottom-width: 3px;
  border-radius: 5px 6px 4px 6px;
  padding: 0 .4em; color: var(--texto);
}

/* palco antes do sorteio */
.palco-sorteio { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 10px 0 6px; }
.palco-sorteio__titulo { margin: 0; font-size: clamp(2.3rem, 6.6vw, 4.4rem); }
.palco-sorteio__sub { margin: 0; font-size: 1.15rem; color: var(--texto-2); max-width: 460px; }
/* parede dos 16 MCs antes do sorteio */
.amontoado {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 14px 12px;
  width: min(1040px, 100%);
  padding: 8px 4px 4px;
}
.lambe {
  position: relative; margin: 0;
  display: grid; justify-items: center;
  transform: rotate(var(--r)) translateY(var(--y));
  animation: colar-lambe .5s both cubic-bezier(.2, 1.35, .4, 1);
  animation-delay: calc(var(--i) * 40ms);
  filter: drop-shadow(0 6px 8px rgba(20, 18, 18, .28));
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.lambe::before { /* fita adesiva */
  content: ""; position: absolute; top: -8px; left: 50%; z-index: 2;
  width: 44px; height: 15px; margin-left: -22px;
  background: var(--fita);
  clip-path: polygon(4% 0, 96% 6%, 100% 30%, 97% 52%, 100% 78%, 95% 100%, 3% 95%, 0 70%, 3% 46%, 0 20%);
  transform: rotate(calc(var(--r) * -2));
}
.lambe__foto { display: block; width: 100%; padding: 5px 5px 0; background: var(--papel); clip-path: var(--rasgo); }
.lambe__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.lambe__nome {
  width: 100%;
  padding: 4px 4px 5px;
  background: var(--papel);
  font-family: var(--f-titulo); font-size: .92rem; letter-spacing: .03em; text-transform: uppercase;
  text-align: center; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, 100% 0, 99% 70%, 100% 100%, 70% 96%, 40% 100%, 12% 95%, 0 100%);
}
.lambe__num {
  position: absolute; top: 2px; right: -6px; z-index: 2;
  font-family: var(--f-titulo); font-size: .72rem;
  color: var(--papel); background: var(--vermelho);
  padding: 2px 5px 1px;
  transform: rotate(8deg);
  box-shadow: 1px 2px 0 var(--tinta);
}
@media (hover: hover) and (pointer: fine) {
  .lambe:hover { transform: rotate(0deg) translateY(-6px) scale(1.08); z-index: 3; }
}
.amontoado { --p: 0; position: relative; }
.amontoado::after { /* nuvem de spray que cresce no meio da parede */
  content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; z-index: 4; pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(.2 + var(--p) * .9)); border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 50, 52, .55), rgba(242, 185, 46, .25) 45%, transparent 70%);
  opacity: calc(var(--p) * .9); filter: blur(6px);
}
.amontoado.agitando .lambe {
  filter: none; will-change: transform, translate, rotate, scale;
  translate: calc(var(--dx, 0px) * var(--p) * .55) calc(var(--dy, 0px) * var(--p) * .55);
  scale: calc(1 - var(--p) * .22);
  animation: lambe-treme calc(.2s - var(--p) * .14s) infinite alternate;
  transition: none;
}
.amontoado.agitando .lambe:nth-child(odd) { animation-direction: alternate-reverse; }
.amontoado.voltando .lambe { transition: translate .5s cubic-bezier(.3, 1.7, .5, 1), scale .5s cubic-bezier(.3, 1.7, .5, 1), transform .25s; }
.amontoado.explodiu::after { opacity: 0; transition: opacity .4s; }
.amontoado.explodiu .lambe {
  animation: none; opacity: 0;
  translate: calc(var(--dx, 0px) * -1.8) calc(var(--dy, 0px) * -1.8 - 60px);
  rotate: calc(var(--r) * 9);
  scale: .5;
  transition: translate .55s cubic-bezier(.2, .8, .3, 1), rotate .55s ease-out, scale .55s, opacity .5s .1s;
}
@keyframes lambe-treme { from { rotate: calc(-2deg - var(--p) * 10deg); } to { rotate: calc(2deg + var(--p) * 10deg); } }
.segurar.segurando { animation: btn-treme .06s infinite alternate; }
.segurar.segurando .segurar__txt { display: inline-block; min-width: 13ch; }
.segurar.estourou { animation: btn-estoura .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes btn-treme { from { translate: calc(var(--p, 0) * -3px) 0; rotate: calc(var(--p, 0) * -1.5deg); } to { translate: calc(var(--p, 0) * 3px) 0; rotate: calc(var(--p, 0) * 1.5deg); } }
@keyframes btn-estoura { 40% { scale: 1.18; } }
@media (prefers-reduced-motion: reduce) { .amontoado.agitando .lambe, .segurar.segurando { animation: none; } }
@keyframes colar-lambe { 0% { opacity: 0; transform: translateY(20px) rotate(calc(var(--r) + 8deg)) scale(.85); } 100% { opacity: 1; transform: rotate(var(--r)) translateY(var(--y)); } }
@keyframes chacoalhar-lambe { from { transform: rotate(calc(var(--r) - 5deg)) translateY(calc(var(--y) - 3px)); } to { transform: rotate(calc(var(--r) + 5deg)) translateY(calc(var(--y) + 3px)); } }

/* segurar para sortear */
.segurar { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.segurar__barra {
  position: absolute; left: 12%; right: 12%; bottom: 6px; height: 5px;
  background: var(--papel); transform-origin: left;
  transform: scaleX(var(--p, 0));
  border-radius: 3px;
}
.segurar__dica { margin: -6px 0 0; font-family: var(--f-rua); color: var(--texto-3); font-size: .95rem; }

/* ---------- 7. Mural (chaveamento) ---------- */
.mural { padding: 18px 0 0; }
.mural__cab { text-align: center; padding: 0 16px 10px; }
.mural__titulo {
  display: inline-block; margin: 0;
  font-family: var(--f-rua); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--texto); transform: rotate(-2deg);
  position: relative;
}
.mural__estrela { position: absolute; right: -40px; top: -16px; width: 30px; height: 30px; color: var(--neon-rosa); transform: rotate(16deg); }
.mural__titulo::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -6px; height: 12px; background: var(--risco) center / 100% 100% no-repeat; }
.mural__nota { margin: 12px 0 0; font-size: 1.05rem; color: var(--texto-3); }

/* --- chave espelhada --- */
.espelho-wrap { position: relative; width: max-content; margin: 8px auto 0; padding: 10px 16px 20px; }
.espelho-wrap::before { /* lava a parede atrás da chave pra leitura ficar limpa */
  content: ""; position: absolute; inset: -10px -30px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(223, 219, 210, .85), rgba(223, 219, 210, .55) 70%, transparent);
}
.conexoes { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.espelho {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, var(--no-w)) var(--centro-w) repeat(3, var(--no-w));
  column-gap: var(--gap);
}
.coluna { display: flex; flex-direction: column; }
.coluna__cab {
  text-align: center; padding-bottom: 10px;
  font-family: var(--f-titulo); font-size: clamp(.92rem, 1.05vw, 1.3rem); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3);
}
.coluna--atual .coluna__cab { color: var(--vermelho); }
.coluna--feita .coluna__cab { color: var(--texto); }
.coluna__jogos { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.slot { padding: clamp(10px, .9vw, 18px) 0; display: flex; align-items: center; justify-content: center; }
.coluna--centro .coluna__jogos { justify-content: center; }
.slot--final { position: relative; padding-top: clamp(160px, 12vw, 230px); }

/* nó do chaveamento: duas tiras de papel, sem caixa */
.no {
  --rot: 0deg;
  position: relative;
  display: grid; gap: 3px;
  width: 100%;
  background: none; border: 0;
  padding: clamp(16px, 1.3vw, 22px) 0 2px;
  text-align: left;
  transform: rotate(var(--rot));
  transition: transform .2s;
}
.no__num {
  position: absolute; top: 0; left: 4px;
  font-family: var(--f-rua); font-size: clamp(.82rem, .85vw, 1.05rem); color: var(--texto-3);
}
.no__vivo { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-titulo); font-size: clamp(.62rem, .65vw, .8rem); letter-spacing: .12em; color: var(--vermelho); }
.no--foco::before { /* círculo de spray marcando a batalha do palco */
  content: ""; position: absolute; inset: 4px -14px -8px -14px;
  border: 3px solid var(--vermelho);
  border-radius: 52% 48% 46% 54% / 60% 52% 48% 40%;
  transform: rotate(-3deg);
  pointer-events: none;
  animation: aparecer .3s;
}
.no.entrar { animation: colar .5s both cubic-bezier(.2, 1.35, .4, 1); animation-delay: calc(var(--i, 0) * 40ms); }
.no.flash { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) and (pointer: fine) {
  .no:not(.no--vazio):hover { transform: rotate(var(--rot)) translateY(-2px) scale(1.03); }
}

.chip {
  position: relative;
  display: flex; align-items: center;
  min-width: 0;
  filter: drop-shadow(1px 2px 0 rgba(20, 18, 18, .25));
  transition: opacity .3s, transform .2s;
}
.chip__foto {
  position: relative; z-index: 2;
  flex-shrink: 0;
  width: clamp(34px, 2.9vw, 54px); height: clamp(34px, 2.9vw, 54px); border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--tinta);
  background: var(--fundo-3);
}
.chip__tira {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin-left: -10px;
  padding: clamp(5px, .45vw, 9px) 8px clamp(4px, .4vw, 8px) 15px;
  background: var(--papel);
  color: var(--tinta);
  clip-path: var(--tira);
}
.chip__nome { font-family: var(--f-titulo); font-size: clamp(.92rem, 1.05vw, 1.35rem); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip:nth-of-type(2) .chip__tira { transform: rotate(-.8deg); }
.chip--vencedor .chip__tira { background: var(--vermelho); color: var(--papel); }
.chip--vencedor .chip__foto { border-color: var(--vermelho); }
.chip--perdedor { opacity: .5; }
.chip--perdedor .chip__foto { filter: grayscale(1); }
.chip--perdedor .chip__nome { text-decoration: line-through 2px var(--vermelho); }
.chip--vazio { filter: none; }
.chip--vazio .chip__foto { display: grid; place-items: center; border-style: dashed; border-color: var(--texto-3); background: transparent; font-family: var(--f-rua); font-size: .9rem; color: var(--texto-3); }
.chip--vazio .chip__tira { background: rgba(20, 18, 18, .08); color: var(--texto-3); }
.chip--vazio .chip__nome { font-family: var(--f-rua); font-size: .78rem; text-transform: none; }
.chip.chegou .chip__tira { animation: chegada .9s ease-out; }
.no__vs { font-family: var(--f-rua); font-size: clamp(.7rem, .75vw, .95rem); color: var(--vermelho); margin: -3px 0 -3px clamp(40px, 3.4vw, 62px); line-height: 1; }

/* caminho de um MC (hover) */
.espelho.mostrando-caminho .chip { opacity: .22; }
.espelho.mostrando-caminho .chip.caminho { opacity: 1; transform: scale(1.06); }
.espelho.mostrando-caminho .chip.caminho .chip__tira { background: var(--ouro); color: var(--tinta); }

/* troféu no centro */
.trofeu {
  position: absolute; left: 50%; top: 0;
  width: calc(var(--centro-w) - 10px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 2px;
  background: none; border: 0; padding: 0;
  color: var(--texto-3);
  text-align: center;
}
.trofeu__icone { width: clamp(70px, 6vw, 112px); height: clamp(70px, 6vw, 112px); }
.trofeu__foto { position: absolute; top: 9%; left: 50%; width: clamp(38px, 3.3vw, 60px); height: clamp(38px, 3.3vw, 60px); border-radius: 50%; object-fit: cover; transform: translateX(-50%); border: 2px solid var(--tinta); }
.trofeu__titulo { font-family: var(--f-titulo); font-size: clamp(.9rem, 1vw, 1.25rem); letter-spacing: .14em; text-transform: uppercase; }
.trofeu__nome { font-family: var(--f-titulo); font-size: clamp(1.5rem, 1.9vw, 2.4rem); line-height: 1; text-transform: uppercase; color: var(--tinta); }
.trofeu--definido { color: var(--ouro); cursor: pointer; }
.trofeu--definido .trofeu__icone { filter: drop-shadow(2px 2px 0 var(--tinta)); animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.trofeu--definido .trofeu__titulo { color: var(--vermelho); }
.no--final .chip__foto { width: clamp(42px, 3.6vw, 68px); height: clamp(42px, 3.6vw, 68px); }
.no--final .chip__nome { font-size: clamp(1.05rem, 1.35vw, 1.7rem); }
.no--final .no__num { color: var(--vermelho); }

/* conexões (SVG) */
.cx { fill: none; stroke: rgba(20, 18, 18, .28); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .3s; }
.cx--ativo { stroke: var(--vermelho); stroke-width: 3.4; stroke-dasharray: none; filter: url(#f-marcador); }
.cx--ouro { stroke: var(--tinta); }
.cx--novo { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: desenhar .7s .1s forwards ease-out; }
.conexoes.mostrando-caminho .cx { opacity: .15; }
.conexoes.mostrando-caminho .cx.caminho { opacity: 1; stroke: var(--ouro-esc); }

/* --- lista por fase (tablet/celular) --- */
.lista { display: none; padding: 0 14px; }
.lista__abas {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin: 6px 0 16px;
}
.aba {
  position: relative;
  background: none; border: 0;
  padding: 8px 12px 6px;
  font-family: var(--f-titulo); font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3);
}
.aba small { display: block; font-family: var(--f-texto); font-size: .72rem; letter-spacing: .08em; color: var(--texto-3); }
.aba[aria-selected="true"] { color: var(--texto); }
.aba[aria-selected="true"]::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -4px; height: 10px; background: var(--risco) center / 100% 100% no-repeat; }
.aba--atual::before { content: ""; position: absolute; top: 6px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); animation: ao-vivo 1.4s infinite; }
.lista__jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 22px; max-width: 900px; margin: 0 auto; }
.lista .no { padding: 20px 4px 6px; }
.lista .no--foco::before { inset: 6px -6px -4px -6px; }
.lista .chip__foto { width: 44px; height: 44px; }
.lista .chip__nome { font-size: 1.1rem; }
.lista .chip__tira { padding: 7px 10px 6px 16px; }
.lista .no__vs { margin-left: 52px; font-size: .8rem; }
.no__destino { font-family: var(--f-rua); font-size: .78rem; color: var(--texto-3); margin: 2px 0 0 52px; }

/* ---------- 8. Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; animation: aparecer .3s ease-out; }

.ponto-live { width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); display: inline-block; animation: ao-vivo 1.4s infinite; }

/* sorteio (parede clara) */
.sorteio {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(193, 50, 52, .25), transparent 70%),
    linear-gradient(rgba(214, 209, 199, .9), rgba(214, 209, 199, .9)),
    url("imagens/parede-tags.svg") 0 0 / 900px 900px,
    var(--fundo);
}
.sorteio__conteudo { min-height: 100%; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 32px 14px 40px; text-align: center; }
.sorteio__live { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-rua); font-size: 1.05rem; color: var(--vermelho); }
.sorteio__titulo { margin: 0; font-size: clamp(2.2rem, 6.6vw, 4.2rem); }
/* título em tiras de pincel: "Sorteio da" no preto, "1ª fase" no vermelho */
.titulo-pincel {
  font-family: var(--f-titulo); font-weight: 400; line-height: 1;
  letter-spacing: .01em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .05em .15em;
}
.pincel-preto, .pincel-vermelho {
  position: relative; isolation: isolate; display: inline-block;
  padding: .12em .42em .06em;
  color: var(--papel);
}
.pincel-preto { transform: rotate(-2deg); }
.pincel-vermelho { transform: rotate(2.5deg) translateY(.04em); }
.pincel-preto::before, .pincel-vermelho::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-mask: var(--pincel) center / 100% 100% no-repeat;
          mask: var(--pincel) center / 100% 100% no-repeat;
}
.pincel-preto::before { background: var(--tinta); }
.pincel-vermelho::before { background: var(--vermelho); }
.pincel-vermelho::after { /* sombra preta da tinta vermelha */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--tinta);
  -webkit-mask: var(--pincel) center / 100% 100% no-repeat;
          mask: var(--pincel) center / 100% 100% no-repeat;
  transform: translate(5px, 6px);
}
.sorteio__status { margin: 0 0 12px; color: var(--vermelho-esc); font-family: var(--f-rua); font-size: 1.2rem; min-height: 1.5em; }
.sorteio__grade { width: min(1040px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
.duelo {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px;
  padding: 28px 10px 14px;
  background: var(--papel); color: var(--tinta);
  clip-path: var(--rasgo);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
  animation: colar .5s both cubic-bezier(.2, 1.35, .4, 1);
  animation-delay: calc(var(--i) * 60ms);
}
.duelo__num { position: absolute; top: 6px; left: 0; right: 0; font-family: var(--f-rua); font-size: .85rem; color: var(--texto-3); }
.duelo__mc { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.duelo__mc img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tinta); filter: grayscale(1) blur(.6px); transition: filter .3s; }
.duelo__mc span { font-family: var(--f-titulo); font-size: .95rem; text-transform: uppercase; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-3); }
.duelo__vs { font-family: var(--f-rua); color: var(--vermelho); font-size: 1.1rem; }
.duelo.travado { animation: travar .45s cubic-bezier(.2, 1.6, .4, 1); }
.duelo.travado .duelo__mc img { filter: none; border-color: var(--vermelho); }
.duelo.travado .duelo__mc span { color: var(--tinta); }
.duelo.travado .duelo__num { color: var(--vermelho); }
.sorteio__acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 18px; min-height: 64px; }

/* banner de fase */
.banner-fase { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; }
.banner-fase.mostrar { visibility: visible; animation: banner 1.9s ease forwards; }
.banner-fase__fundo {
  position: absolute; left: -10%; right: -10%; top: 50%; height: 200px;
  transform: translateY(-50%) rotate(-4deg);
  background: var(--vermelho);
  clip-path: polygon(0 10%, 15% 2%, 33% 9%, 52% 0, 70% 8%, 86% 1%, 100% 7%, 100% 92%, 82% 100%, 64% 91%, 47% 99%, 28% 92%, 12% 100%, 0 93%);
}
.banner-fase__txt { position: relative; text-align: center; transform: rotate(-4deg); display: grid; gap: 4px; }
.banner-fase__eyebrow { font-family: var(--f-rua); color: var(--tinta); font-size: 1.3rem; }
.banner-fase__titulo { font-family: var(--f-titulo); font-size: clamp(3.4rem, 12vw, 7.5rem); line-height: .9; color: var(--papel); text-shadow: 5px 5px 0 var(--tinta); }
.banner-fase__info { font-family: var(--f-titulo); letter-spacing: .2em; color: var(--tinta); }

/* campeão — palco escuro, momento de destaque */
.campeao { background: radial-gradient(circle at 50% 36%, rgba(193, 50, 52, .7), rgba(110, 18, 20, .5) 35%, transparent 70%), #141212; z-index: 70; color: var(--papel); }
.campeao__confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.campeao__raios {
  position: fixed; left: 50%; top: 36%; width: 160vmax; height: 160vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(242, 185, 46, .08) 0 5deg, transparent 5deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%);
          mask-image: radial-gradient(circle, #000 0, transparent 45%);
  animation: girar 50s linear infinite;
  pointer-events: none;
}
.campeao__conteudo { position: relative; z-index: 1; min-height: 100%; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 24px 16px 46px; text-align: center; }
.campeao__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-rua); font-size: clamp(1.2rem, 3.6vw, 1.8rem); color: var(--ouro); transform: rotate(-2deg); animation: entrar-cima .6s .2s both; }
.campeao__eyebrow svg { width: 34px; height: 34px; }
.campeao__foto { position: relative; margin: 30px 0 0; animation: foto-campeao .9s .35s both cubic-bezier(.2, 1.4, .4, 1); }
.campeao__moldura {
  display: block; padding: 14px;
  background: var(--papel);
  clip-path: var(--rasgo);
  transform: rotate(-3deg);
  filter: drop-shadow(10px 12px 0 var(--vermelho));
}
.campeao__moldura img { width: clamp(150px, min(42vw, 30vh), 270px); aspect-ratio: 1; object-fit: cover; clip-path: var(--rasgo-foto); }
.campeao__coroa { position: absolute; left: 50%; top: -52px; width: 124px; height: 54px; transform: translateX(-50%) rotate(-6deg); color: var(--ouro); filter: drop-shadow(3px 3px 0 var(--tinta)); stroke-dasharray: 520; stroke-dashoffset: 520; animation: desenhar 1s 1.1s forwards ease-out; z-index: 2; }
.campeao__num { position: absolute; right: -14px; bottom: -6px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; font-family: var(--f-titulo); font-size: 1.3rem; color: var(--papel); background: var(--vermelho); box-shadow: 3px 4px 0 var(--tinta); transform: rotate(-12deg); }
.campeao__nome {
  position: relative; isolation: isolate;
  margin: 6px 0 0; padding: .1em .5em .05em;
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(3.2rem, 13vw, 7.4rem); line-height: .95;
  text-transform: uppercase; color: var(--papel);
  text-shadow: 4px 4px 0 var(--tinta);
  animation: spray-in .8s .8s both ease-out;
}
.campeao__nome::before { content: ""; position: absolute; inset: 8% -2%; z-index: -1; background: var(--vermelho); -webkit-mask: var(--pincel) center / 100% 100% no-repeat; mask: var(--pincel) center / 100% 100% no-repeat; }
.campeao__texto { margin: 4px 0 0; font-family: var(--f-rua); font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--ouro); animation: entrar-cima .6s 1.2s both; }
.campeao__caminho { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 640px; animation: entrar-cima .6s 1.35s both; }
.campeao__caminho li { font-size: 1.05rem; color: var(--papel-2); }
.campeao__caminho li b { font-family: var(--f-titulo); font-weight: 400; color: var(--papel); letter-spacing: .03em; }
.campeao__caminho li small { color: #a39b92; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; margin-right: 4px; }
.campeao__acoes { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 16px; animation: entrar-cima .6s 1.5s both; }

/* confirmação */
.confirmar {
  border: 0;
  background: var(--papel); color: var(--tinta);
  padding: 26px 26px 20px;
  max-width: min(420px, calc(100% - 32px));
  clip-path: var(--rasgo);
}
.confirmar::backdrop { background: rgba(20, 18, 18, .6); }
.confirmar h3 { margin: 0 0 8px; font-family: var(--f-titulo); font-weight: 400; font-size: 1.7rem; }
.confirmar p { margin: 0 0 18px; font-size: 1.1rem; line-height: 1.35; }
.confirmar__acoes { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; }

/* toast com ação */
.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100% - 28px);
  padding: .7em 1.2em .62em;
  font-family: var(--f-titulo); font-size: 1rem; letter-spacing: .04em;
  color: var(--papel); background: var(--tinta);
  clip-path: var(--tira);
  transform: translate(-50%, 30px) rotate(-1.5deg);
  opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .25s, visibility .35s;
  pointer-events: none;
}
.toast.mostrar { transform: translate(-50%, 0) rotate(-1.5deg); opacity: 1; visibility: visible; pointer-events: auto; }
.toast button { background: var(--vermelho); color: var(--papel); border: 0; font-family: var(--f-titulo); letter-spacing: .06em; padding: .3em .7em; border-radius: 3px 6px 4px 7px; white-space: nowrap; }

/* partículas de spray */
.efeitos { position: fixed; inset: 0; pointer-events: none; z-index: 95; }
.gota-spray {
  position: absolute; width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--c);
  animation: spray var(--t, .7s) cubic-bezier(.1, .8, .3, 1) forwards;
}

/* ---------- 8b. Apoio + créditos ---------- */
.creditos {
  margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px;
  font-size: 1rem; letter-spacing: .04em; color: var(--texto-3);
}
.creditos > span[aria-hidden] { color: var(--vermelho); font-size: .8rem; }
.creditos__par { white-space: nowrap; }
.creditos a {
  position: relative;
  font-family: var(--f-rua); font-size: 1.15rem; letter-spacing: 0;
  color: var(--texto); text-decoration: none;
  transition: color .2s;
}
.creditos a::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -4px; height: 7px;
  background: var(--risco) center / 100% 100% no-repeat;
  transform-origin: left; transform: scaleX(.35); opacity: .8;
  transition: transform .25s ease, opacity .25s;
}
.creditos a:focus-visible::after { transform: scaleX(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .creditos a:hover { color: var(--vermelho); }
  .creditos a:hover::after { transform: scaleX(1); opacity: 1; }
}
.creditos--hero { margin-top: 2px; font-size: .92rem; }
.creditos--hero a { font-size: 1.05rem; }

/* rodapé: faixa preta, como o topo */
.rodape-corre {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: 26px;
  margin-top: 30px;
  padding: 64px 16px calc(42px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--papel);
  background:
    radial-gradient(ellipse 50% 70% at 50% 30%, rgba(193, 50, 52, .3), transparent 70%),
    var(--tinta);
}
.rodape-corre::before { /* borda rasgada */
  content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px;
  background: var(--tinta);
  clip-path: polygon(0 60%, 6% 20%, 13% 70%, 21% 10%, 30% 60%, 38% 25%, 47% 80%, 55% 15%, 64% 65%, 72% 20%, 81% 75%, 89% 30%, 96% 70%, 100% 35%, 100% 100%, 0 100%);
}
.corre { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; max-width: 620px; }
.rodape-corre .creditos { position: relative; z-index: 1; }
.selo--rodape { --selo: 92px; margin-bottom: 6px; box-shadow: 4px 5px 0 var(--vermelho); }
.corre__frase {
  position: relative;
  margin: 0 0 24px;
  font-family: var(--f-rua); font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1;
  color: var(--papel);
  transform: rotate(-3deg);
}
.corre__frase span { color: var(--vermelho-luz); }
.corre__frase::after { /* traço de marcador vermelho embaixo */
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.32em; height: .26em;
  background: var(--risco) center / 100% 100% no-repeat;
}
.corre__texto { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.35; color: var(--papel-2); }
.rodape-corre .creditos, .campeao .creditos { color: #a39b92; }
.rodape-corre .creditos a, .campeao .creditos a { color: var(--papel); }
.rodape-corre .creditos { padding-top: 18px; border-top: 2px dashed rgba(244, 239, 229, .16); width: min(560px, 100%); }
@media (hover: hover) and (pointer: fine) {
  .rodape-corre .creditos a:hover, .campeao .creditos a:hover { color: var(--ouro); }
}

.campeao__corre { display: grid; justify-items: center; gap: 14px; margin-top: 30px; padding-top: 26px; border-top: 2px dashed rgba(244, 239, 229, .2); width: min(520px, 100%); animation: entrar-cima .6s 1.7s both; }
.selo--campeao { --selo: 64px; }
.campeao__corre .corre__frase { font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* ---------- 8b2. Botão "Apoie o CPBMC" animado ---------- */
.btn-apoio {
  display: inline-flex !important; align-items: center; gap: .45em;
  animation: apoio-balanco 3.2s ease-in-out infinite;
}
.btn-apoio__coracao {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
  color: var(--ouro);
  animation: apoio-batida 1.1s ease-in-out infinite;
}
.btn-tinta--ouro .btn-apoio__coracao { color: var(--vermelho); }
.btn-apoio__circ { /* círculo de marcador que se desenha em volta, em loop */
  position: absolute; inset: -18px -26px; width: calc(100% + 52px); height: calc(100% + 36px);
  color: var(--ouro); overflow: visible; pointer-events: none;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: apoio-circulo 3.2s ease-in-out infinite;
}
.btn-tinta--ouro .btn-apoio__circ { color: var(--papel); }
.btn-apoio::before { background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat; animation: apoio-brilho 3.2s ease-in-out infinite; }
@keyframes apoio-balanco {
  0%, 62%, 100% { transform: rotate(-1.5deg) scale(1); }
  70% { transform: rotate(-4deg) scale(1.08); }
  78% { transform: rotate(2.5deg) scale(1.05); }
  86% { transform: rotate(-1.5deg) scale(1.02); }
}
@keyframes apoio-batida { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(.95); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }
@keyframes apoio-circulo {
  0% { stroke-dashoffset: 320; opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes apoio-brilho { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
@media (hover: hover) and (pointer: fine) {
  .btn-apoio:hover { animation-play-state: paused; transform: rotate(0) scale(1.08); }
}

/* ---------- 8c. Compartilhar o campeão ---------- */
/* fica logo abaixo do nome do campeão: miniatura da arte + botão grande */
.compartilhar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px;
  margin: 10px 0 4px;
  padding: 18px 22px;
  background: rgba(244, 239, 229, .08);
  border: 2px dashed rgba(242, 185, 46, .55);
  border-radius: 28px 22px 30px 20px;
  animation: entrar-cima .6s 1.25s both cubic-bezier(.2, 1.3, .4, 1);
}
.compartilhar__preview { margin: 0; }
.compartilhar__preview img {
  display: block;
  width: 132px; height: auto; aspect-ratio: 1080 / 1350;
  background: var(--fundo);
  transform: rotate(-4deg);
  box-shadow: 0 0 0 3px var(--tinta), 6px 7px 0 var(--vermelho);
  transition: opacity .25s;
}
.compartilhar__preview img.carregando { opacity: .35; }
.compartilhar__preview img:not([src]) { visibility: hidden; }
.compartilhar__acoes { display: grid; justify-items: center; gap: 6px; }
.btn-compartilhar { display: inline-flex; align-items: center; gap: .45em; animation: chamar 2.2s 2.2s ease-in-out infinite; }
.btn-compartilhar svg, .btn-icone { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn-tinta:has(.btn-icone) { display: inline-flex; align-items: center; gap: .45em; }
.compartilhar__status { margin: 0; font-family: var(--f-rua); font-size: .92rem; color: #b9b1a6; }
.compartilhar .btn-giz { color: var(--papel-2); font-size: .98rem; }
@keyframes chamar { 0%, 70%, 100% { transform: rotate(-1.5deg) scale(1); } 80% { transform: rotate(-4deg) scale(1.07); } 90% { transform: rotate(2deg) scale(1.04); } }
@media (max-width: 680px) {
  .compartilhar { flex-wrap: nowrap; padding: 12px 10px; gap: 12px; width: 100%; }
  .compartilhar__preview img { width: 84px; }
  .btn-compartilhar { font-size: 1.25rem; padding: .7em 1.2em .64em; }
  .campeao__nome { font-size: clamp(2.6rem, 12vw, 4rem); }
  .campeao__texto { font-size: 1.05rem; }
}

/* ---------- 9. Animações ---------- */
@keyframes entrar-cima { from { opacity: 0; transform: translateY(24px); } }
@keyframes spray-in { 0% { opacity: 0; filter: blur(14px); transform: scale(1.08); } 60% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes tag-in { from { opacity: 0; transform: rotate(-20deg) scale(2.2); } }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes escorrer { 0% { height: 0; } 70% { height: var(--h); } 100% { height: calc(var(--h) + 6px); } }
@keyframes rolar { to { transform: translateX(-50%); } }
@keyframes ao-vivo { 0% { box-shadow: 0 0 0 0 rgba(193, 50, 52, .7); } 70% { box-shadow: 0 0 0 9px rgba(193, 50, 52, 0); } 100% { box-shadow: 0 0 0 0 rgba(193, 50, 52, 0); } }
@keyframes colar { 0% { opacity: 0; transform: translateY(20px) rotate(calc(var(--rot, 0deg) + 7deg)) scale(.9); } 100% { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes travar { 0% { transform: rotate(var(--rot)) translateY(var(--dy, 0)) scale(1.12); } 100% { transform: rotate(var(--rot)) translateY(var(--dy, 0)) scale(1); } }
@keyframes vitoria { 0% { transform: rotate(var(--incl)) scale(1); } 40% { transform: rotate(calc(var(--incl) * -2)) scale(1.12); } 100% { transform: rotate(var(--incl)) scale(1); } }
@keyframes colar-fita { 0% { opacity: 0; transform: rotate(-30deg) scaleX(.2); } 100% { opacity: 1; transform: rotate(-14deg) scaleX(1); } }
@keyframes chegada { 0%, 40% { background: var(--ouro); } 100% { background: var(--papel); } }
@keyframes pop { 0% { transform: rotate(var(--rot, 0deg)) scale(1); } 40% { transform: rotate(var(--rot, 0deg)) scale(1.12); } 100% { transform: rotate(var(--rot, 0deg)) scale(1); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes banner { 0% { opacity: 0; transform: scale(1.25); } 14% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.96) translateX(40px); } }
@keyframes girar { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes foto-campeao { 0% { opacity: 0; transform: rotate(-20deg) scale(.4); } 100% { opacity: 1; transform: none; } }
@keyframes spray { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@keyframes respirar { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-10deg) scale(1.08); } }
@keyframes respingar { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.3); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
@keyframes piscar-estrela { 0%, 100% { transform: rotate(var(--r, 0deg)) scale(1); } 50% { transform: rotate(calc(var(--r, 0deg) + 12deg)) scale(1.12); } }
@keyframes chacoalhar { from { transform: rotate(calc(var(--r) - 6deg)) translateY(-2px); } to { transform: rotate(calc(var(--r) + 6deg)) translateY(2px); } }

/* ---------- 10. Responsivo ---------- */
/* abaixo de 1100px a chave espelhada vira lista por fase */
@media (max-width: 1099px) {
  .espelho-wrap { display: none; }
  .lista { display: block; }
  .mural__nota { display: none; }
  .topo { flex-wrap: wrap; justify-content: space-between; }
  .trilha { order: 3; width: 100%; justify-content: center; }
  .sorteio__grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 681px) and (max-width: 1099px) {
  :root { --topo-h: 124px; }
}

/* celular */
@media (max-width: 680px) {
  body { font-size: 17px; }
  :root { --topo-h: 108px; }
  .topo { gap: 4px 8px; padding: 8px 10px 10px; }
  .marca-grupo { gap: 8px; }
  .selo--topo { --selo: 38px; }
  .marca__tag { font-size: 1.2rem; }
  .marca__sp { font-size: 1.25rem; }
  .marca__ano { font-size: 1rem; margin-left: 4px; }
  .hero__ano { top: -16%; right: 0; }
  .acoes { gap: 2px; }
  .acao { padding: 8px; }
  .acao span { display: none; }
  .acao svg { width: 22px; height: 22px; }
  .trilha__passo { padding: 2px 6px; }
  .trilha__passo b { font-size: 1.15rem; }
  .trilha__passo small { font-size: .6rem; }
  .trilha__risco { width: 10px; }

  .tela-chave { padding-top: 10px; }
  .palco { padding: 6px 10px 18px; }
  .palco__info { gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
  .palco__batalha { font-size: 1.15rem; white-space: nowrap; }
  .palco__fase { font-size: .74rem; white-space: nowrap; }
  .palco__nav { width: 34px; height: 34px; flex-shrink: 0; }

  /* face-off lado a lado: os dois MCs com o mesmo peso, VS entre as fotos */
  .faceoff {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c c";
    gap: 6px 10px;
    align-items: start;
  }
  .lutador--a { grid-area: a; }
  .lutador--b { grid-area: b; }
  .centro { grid-area: c; padding-top: 6px; }
  .lutador { gap: 6px; padding: 12px 0 4px; min-width: 0; }
  .lutador__foto { width: min(40vw, 158px); padding: 6px; }
  .lutador__num { width: 34px; height: 34px; font-size: .8rem; top: -8px; right: -6px; }
  .lutador--b .lutador__num { left: -6px; }
  .lutador__nome { font-size: clamp(1.25rem, 6.4vw, 1.7rem); padding: .14em .4em .1em; }
  .lutador__cidade { margin-top: 0; font-size: .74rem; }
  .lutador__venceu { width: 100%; font-size: .95rem; padding: .62em .4em .56em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lutador__venceu::before { background: var(--tinta); }
  .lutador__venceu { color: var(--papel); }
  .lutador__fita { font-size: .72rem; letter-spacing: .14em; text-align: center; }
  .lutador--vencedor .lutador__coroa { top: -22px; width: 66px; height: 30px; }
  .lutador::before { display: none; }

  /* VS fica entre as duas fotos */
  .centro__vs {
    position: absolute; left: 50%; top: calc(12px + min(20vw, 79px));
    translate: -50% -50%;
    font-size: 2.4rem;
    z-index: 4;
    pointer-events: none;
  }
  .centro__instrucao { font-size: 1rem; }
  .centro__resultado { gap: 6px; }
  .palco__rodape { display: none; }

  .amontoado { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
  .lambe__foto { padding: 4px 4px 0; }
  .lambe__nome { font-size: .8rem; }

  .lista { padding: 0 10px; }
  .lista__jogos { grid-template-columns: 1fr; }
  .lista__abas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 4px -10px 14px; padding: 0 10px 6px; scrollbar-width: none; }
  .aba { padding: 6px 8px 4px; font-size: .92rem; white-space: nowrap; flex-shrink: 0; }

  .duelo { padding: 26px 6px 12px; }
  .duelo__mc img { width: 48px; height: 48px; }
  .duelo__mc span { font-size: .82rem; }
  .sorteio__grade { gap: 14px 10px; }

  .rodape-corre { padding-top: 48px; gap: 20px; }
  .selo--rodape { --selo: 76px; }
  .corre__texto { font-size: 1.05rem; }
  .hero__rabisco { position: static; transform: rotate(-3deg); text-align: center; }
  .hero__titulo { margin-top: 18px; }
  .hero__desp { margin-left: 30%; }
  .grafite--mic { left: 2%; bottom: 24%; }
  .grafite--radio { right: 2%; bottom: 23%; width: 90px; height: 62px; }
  .parede-lambes { opacity: .26; -webkit-mask-image: radial-gradient(ellipse 70% 46% at 50% 50%, transparent 45%, #000 90%); mask-image: radial-gradient(ellipse 70% 46% at 50% 50%, transparent 45%, #000 90%); }
  .grafite--radio-rodape { display: none; }
  .hero__estadual { -webkit-text-stroke: 2px var(--tinta); text-shadow: -3px -3px 0 var(--neon-ciano), 4px 4px 0 var(--tinta), 7px 7px 0 var(--ouro); }
  .hero__titulo::before { width: 108%; top: 52%; }
  .hero__titulo { margin-top: 30px; }
  .mural__estrela { right: -32px; width: 24px; height: 24px; }
}

/* celular estreito: topo em uma linha só com o 2026 */
@media (max-width: 430px) {
  .topo { flex-wrap: wrap; }
  .marca-grupo { gap: 6px; min-width: 0; }
  .selo--topo { --selo: 34px; }
  .marca__tag { font-size: 1.02rem; }
  .marca__sp { font-size: 1.1rem; }
  .marca__ano { font-size: .9rem; margin-left: 2px; }
  .acoes { flex-wrap: nowrap; gap: 0; }
  .acao { padding: 6px; }
  .acao svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .faixa__trilho { animation: none; }
}
.palco-sorteio { overflow-x: clip; }

/* ===== desempenho: animações contínuas só com transform/opacity (rodam na placa de vídeo) ===== */
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.eq i { height: 100% !important; transform: scaleY(.3); transform-origin: bottom; transition: transform .3s; }
@keyframes ao-vivo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.btn-apoio, .btn-apoio__coracao, .btn-compartilhar, .faixa__trilho, .centro__vs, [class*="estrela"] { will-change: transform; }
.parede-tags { contain: strict; transform: translateZ(0); }