/* ==========================================================================
   ESTADUAL SP 2026 — MODO CARREIRA
   Usa os tokens e componentes do style.css (parede, pincel, lambe, botões).
   ========================================================================== */

/* ---------- abas do site no topo (Chaveamento | Batalha) ---------- */
.abas-site { display: flex; gap: 4px; align-items: center; }
.aba-site {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 6px;
  font-family: var(--f-titulo); font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase;
  color: #a39b92; text-decoration: none;
  border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%;
  transition: color .2s, background .2s;
}
.aba-site svg { width: 18px; height: 18px; }
.aba-site.ativa { color: var(--papel); background: var(--vermelho); }
@media (hover: hover) and (pointer: fine) { .aba-site:not(.ativa):hover { color: var(--papel); background: rgba(244, 239, 229, .1); } }

/* ---------- estrutura ---------- */
.batalha { max-width: 1220px; margin: 0 auto; padding: 20px clamp(12px, 3vw, 32px) 40px; min-height: calc(100svh - var(--topo-h) - 120px); }
.tela-b__cab { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: 22px; }
.tela-b__cab .titulo-pincel { margin: 0; font-size: clamp(2.2rem, 6vw, 4rem); }
.tela-b__eyebrow { margin: 0; font-family: var(--f-rua); font-size: 1.2rem; color: var(--vermelho); }
.tela-b__sub { margin: 0; font-size: 1.15rem; color: var(--texto-2); max-width: 620px; }
.tela-b__acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 6px; }
kbd { font-family: var(--f-titulo); font-size: .82rem; border: 1.5px solid currentColor; border-bottom-width: 3px; border-radius: 5px 6px 4px 6px; padding: 0 .4em; opacity: .85; }
.dica { margin: 0; font-size: .95rem; color: var(--texto-3); line-height: 1.35; }
.dica b { color: var(--tinta); }

/* ---------- escolha do MC ---------- */
.escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.card-mc {
  position: relative; display: grid; gap: 2px;
  padding: 6px 6px 10px;
  background: var(--papel); color: var(--tinta);
  border: 0; text-align: center;
  clip-path: var(--rasgo);
  transform: rotate(var(--r));
  animation: colar-card .45s both cubic-bezier(.2, 1.35, .4, 1);
  animation-delay: calc(var(--i) * 30ms);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.card-mc__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-mc__num { position: absolute; top: 10px; right: 10px; font-family: var(--f-titulo); font-size: .75rem; color: var(--papel); background: var(--vermelho); padding: 1px 6px; transform: rotate(6deg); }
.card-mc__nome { font-family: var(--f-titulo); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; padding-top: 4px; }
.card-mc__nivel { font-family: var(--f-rua); font-size: .85rem; color: var(--texto-3); }
.card-mc:active { transform: scale(.96); }
.card-mc.piscando { outline: 4px solid var(--vermelho); outline-offset: -4px; transform: rotate(0) scale(1.07); z-index: 2; }
@media (hover: hover) and (pointer: fine) { .card-mc:hover { transform: rotate(0) translateY(-5px) scale(1.04); z-index: 2; } }
@keyframes colar-card { from { opacity: 0; transform: translateY(18px) rotate(calc(var(--r) + 6deg)) scale(.9); } }

/* ---------- chave (colunas) ---------- */
.chave-vis, .pos__chave { overflow-x: auto; padding-bottom: 8px; }
.cv { text-align: left; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(130px, .8fr); gap: 14px; min-width: 820px; }
.cv-col { display: flex; flex-direction: column; }
.cv-cab { text-align: center; font-family: var(--f-titulo); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); padding-bottom: 8px; }
.cv-col--atual .cv-cab { color: var(--vermelho); }
.cv-jogos { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.cv-jogo { display: grid; gap: 3px; padding: 6px; background: rgba(244, 239, 229, .75); border-radius: 10px 14px 8px 12px; box-shadow: 2px 3px 0 rgba(20, 18, 18, .18); }
.cv-jogo--meu { background: var(--papel); box-shadow: 0 0 0 3px var(--ouro), 3px 4px 0 var(--tinta); }
.cv-entrar { animation: cv-entrar .45s both cubic-bezier(.2, 1.35, .4, 1); }
@keyframes cv-entrar { from { opacity: 0; transform: translateX(-20px) rotate(-3deg); } }
.cv-chip { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; min-width: 0; }
.cv-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tinta); }
.cv-chip b { font-family: var(--f-titulo); font-weight: 400; font-size: .9rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-chip em { font-style: normal; font-family: var(--f-titulo); font-size: .9rem; color: var(--texto-3); }
.cv-chip--voce b { color: var(--vermelho); }
.cv-chip--venceu em { color: var(--vermelho); }
.cv-chip--caiu { opacity: .45; }
.cv-chip--caiu b { text-decoration: line-through 2px var(--vermelho); }
.cv-chip--vazio i { grid-column: 1 / -1; font-style: normal; font-family: var(--f-rua); color: var(--texto-3); font-size: .85rem; padding: 4px; }
.cv-camp { display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--texto-3); }
.cv-camp img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ouro); box-shadow: 3px 3px 0 var(--tinta); }
.cv-camp b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; color: var(--tinta); }
.cv-trofeu { width: 54px; height: 54px; color: var(--ouro); filter: drop-shadow(2px 2px 0 var(--tinta)); }
.cv-camp--voce b { color: var(--vermelho); }

/* ---------- pré-batalha ---------- */
.pre { display: grid; justify-items: center; gap: 18px; text-align: center; }
.pre__fase { margin: 0; font-family: var(--f-titulo); font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--papel); background: var(--tinta); padding: .3em 1em .2em; clip-path: var(--tira); }
.pre__duelo { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 50px); }
.pre__mc { margin: 0; display: grid; justify-items: center; gap: 6px; }
.pre__foto { display: block; padding: 8px; background: var(--papel); clip-path: var(--rasgo); transform: rotate(-3deg); filter: drop-shadow(5px 6px 0 var(--vermelho)); }
.pre__mc:last-child .pre__foto { transform: rotate(3deg); filter: drop-shadow(5px 6px 0 var(--tinta)); }
.pre__foto img { display: block; width: clamp(120px, 24vw, 200px); aspect-ratio: 1; object-fit: cover; }
.pre__mc figcaption { font-family: var(--f-titulo); font-size: 1.6rem; text-transform: uppercase; display: grid; line-height: 1.05; }
.pre__mc small { font-family: var(--f-rua); font-size: .95rem; text-transform: none; color: var(--texto-3); }
.pre__vs { font-family: var(--f-rua); font-size: clamp(2.6rem, 6vw, 4rem); color: var(--vermelho); -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; transform: rotate(-10deg); }
.pre__info { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; text-align: left; }
.pre__beats, .pre__como { background: rgba(244, 239, 229, .85); padding: 16px 18px; clip-path: var(--rasgo); }
.pre__info h2 { margin: 0 0 10px; font-family: var(--f-titulo); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; }
.pre__beats ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pre__beats li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
.pre__r { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); color: var(--papel); font-family: var(--f-titulo); }
.pre__beats b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; }
.pre__beats em { font-style: normal; font-size: .85rem; color: var(--vermelho); font-weight: 700; }
.pre__beats small { display: block; font-size: .92rem; color: var(--texto-2); }
.pre__nota { margin: 10px 0 0; font-size: .9rem; color: var(--texto-3); }
.pre__como ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 1rem; line-height: 1.3; }

/* ---------- placar (tipo jogo de futebol) ---------- */
.placar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 16px;
  padding: 12px 16px 14px;
  background: var(--tinta); color: var(--papel);
  clip-path: var(--rasgo);
  margin-bottom: 16px;
}
.pl-mc { display: flex; align-items: center; gap: 12px; padding: 4px 8px; border-radius: 12px; transition: background .3s; min-width: 0; }
.pl-mc--adv { flex-direction: row-reverse; text-align: right; }
.pl-mc.no-mic { background: rgba(193, 50, 52, .4); }
.pl-mc img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid var(--papel); box-shadow: 3px 3px 0 var(--vermelho); flex-shrink: 0; }
.pl-mc.no-mic img { animation: mic-pulso .9s ease-in-out infinite; }
.pl-mc__info { display: grid; min-width: 0; }
.pl-mc__info small { font-family: var(--f-rua); font-size: .8rem; color: var(--ouro); }
.pl-mc__info b { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.6rem); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-rounds { display: flex; gap: 6px; margin-top: 4px; }
.pl-mc--adv .pl-rounds { justify-content: flex-end; }
.pl-rounds i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(244, 239, 229, .45); }
.pl-rounds i.on { background: var(--ouro); border-color: var(--ouro); box-shadow: 0 0 10px rgba(242, 185, 46, .7); }
.pl-meio { display: grid; justify-items: center; text-align: center; }
.pl-round { font-family: var(--f-titulo); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.pl-pontos { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-titulo); line-height: 1; }
.pl-pontos b { font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); min-width: 1.6ch; }
.pl-pontos i { font-style: normal; color: #8a837c; font-size: 1.6rem; }
.pl-beat { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #b9b1a6; }
.pl-dominio { grid-column: 1 / -1; position: relative; height: 16px; background: #514a45; border-radius: 9px; overflow: hidden; }
.pl-dominio i { position: absolute; inset: 0 auto 0 0; width: var(--d, 50%); background: linear-gradient(90deg, var(--vermelho), var(--vermelho-luz)); transition: width .7s cubic-bezier(.3, 1.3, .5, 1); }
.pl-dominio span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--papel); }
.pl-tempo { grid-column: 1 / -1; height: 4px; background: #2f2a27; border-radius: 2px; overflow: hidden; }
.pl-tempo i { display: block; height: 100%; width: var(--p, 0%); background: var(--ouro); }
@keyframes mic-pulso { 50% { transform: scale(1.08); } }

/* ---------- arena: palco + lance a lance ---------- */
.arena__corpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.palco {
  display: grid; place-items: center; text-align: center;
  padding: 20px 16px 22px;
  background: rgba(244, 239, 229, .85);
  clip-path: var(--rasgo);
  min-height: 430px;
}
.palco > div { display: grid; justify-items: center; gap: 12px; width: 100%; }
.palco .titulo-pincel { margin: 0; font-size: clamp(1.8rem, 4.4vw, 2.8rem); }
.palco p { margin: 0; font-size: 1.1rem; color: var(--texto-2); }
.pal-beat { font-size: 1rem !important; }
.pal-beat em { color: var(--texto-3); }
.pal-res { font-family: var(--f-rua); font-size: 1.35rem !important; color: var(--texto-2); }
.pal-res.bom { color: var(--vermelho) !important; }
.pal-acoes { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; align-items: center; }
.pal-acoes .dica { width: 100%; }

.pal-intro b { font-family: var(--f-titulo); font-size: 7rem; line-height: 1; color: var(--vermelho); -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; }
.pal-intro b.pulo { animation: pulo-num .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pulo-num { from { transform: scale(1.6); opacity: .3; } }

/* ímpar ou par */
.ip-escolha { display: flex; gap: 14px; }
.ip-btn { font-family: var(--f-titulo); font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase; padding: .45em 1.2em .4em; border: 3px solid var(--tinta); background: var(--papel); color: var(--tinta); border-radius: 46% 54% 50% 50% / 60% 50% 50% 40%; transition: background .2s, color .2s, transform .2s; }
.ip-btn.sel { background: var(--tinta); color: var(--papel); transform: rotate(-3deg) scale(1.05); }
.ip-dedos { display: grid; justify-items: center; gap: 8px; }
.dedos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dedo { width: 52px; height: 52px; border-radius: 50%; font-family: var(--f-titulo); font-size: 1.5rem; border: 3px solid var(--tinta); background: var(--papel); color: var(--tinta); transition: background .15s, transform .15s; }
.dedo:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .ip-btn:hover, .dedo:hover { background: var(--vermelho); color: var(--papel); border-color: var(--vermelho); } }
.maos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: 100%; max-width: 420px; }
.mao { display: grid; justify-items: center; gap: 2px; animation: mao-bate .5s ease-out; }
.mao span { font-family: var(--f-rua); font-size: .95rem; color: var(--texto-2); }
.mao__ic { width: 60px; height: 60px; color: var(--tinta); }
.mao--adv .mao__ic { transform: scaleX(-1); }
.mao b { font-family: var(--f-titulo); font-size: 2.6rem; line-height: 1; color: var(--vermelho); }
.mao__soma { display: grid; justify-items: center; font-family: var(--f-titulo); }
.mao__soma b { font-size: 3rem; font-weight: 400; line-height: 1; }
.mao__soma em { font-style: normal; font-size: 1.2rem; text-transform: uppercase; color: var(--papel); background: var(--tinta); padding: 0 .5em; clip-path: var(--tira); }
@keyframes mao-bate { 0% { transform: translateY(-14px) rotate(-10deg); } 40% { transform: translateY(6px); } 100% { transform: none; } }

/* mic: pad que pulsa no beat */
.pal-mic__quem { font-size: 1rem !important; letter-spacing: .04em; }
.pal-mic--voce .pal-mic__quem b { color: var(--vermelho); font-family: var(--f-titulo); font-weight: 400; font-size: 1.4rem; letter-spacing: .06em; }
.pal-mic--adv .pal-mic__quem b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; }
.pad-area { position: relative; display: grid; justify-items: center; gap: 8px; padding-top: 10px; }
.pad {
  --f: 0;
  position: relative;
  width: clamp(170px, 30vw, 220px); aspect-ratio: 1;
  border-radius: 50%; border: 0; padding: 0;
  background: var(--tinta);
  display: grid; place-items: center;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 5px var(--papel), 0 0 0 9px var(--vermelho), 6px 8px 0 9px var(--tinta);
  transition: transform .06s;
}
.pad img { width: 82%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; pointer-events: none; }
.pad__txt { position: absolute; bottom: 10%; font-family: var(--f-titulo); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--papel); background: var(--vermelho); padding: 2px 10px; border-radius: 10px; pointer-events: none; }
/* anel do beat: encolhe até a borda e "bate" na batida */
.pad__anel {
  position: absolute; inset: calc(-34% * (1 - var(--f)) - 4px);
  border-radius: 50%;
  border: 4px solid var(--ouro);
  opacity: calc(.15 + var(--f) * .85);
  pointer-events: none;
}
.pad--adv { box-shadow: 0 0 0 5px var(--papel), 0 0 0 9px var(--tinta), 6px 8px 0 9px rgba(20, 18, 18, .4); cursor: default; }
.pad--adv .pad__anel { border-color: rgba(20, 18, 18, .55); }
.pad:active { transform: scale(.96); }
.pad.hit { animation: pad-hit .22s ease-out; }
.pad.miss { animation: pad-miss .3s ease-out; }
@keyframes pad-hit { 0% { box-shadow: 0 0 0 5px var(--ouro), 0 0 0 14px var(--vermelho), 6px 8px 0 14px var(--tinta); } }
@keyframes pad-miss { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.combo { font-family: var(--f-titulo); font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.combo b { font-weight: 400; font-size: 1.8rem; color: var(--vermelho); }
.feedback { position: absolute; top: 34%; left: 50%; z-index: 3; font-family: var(--f-titulo); font-size: 1.6rem; letter-spacing: .06em; padding: 0 .4em; transform: translate(-50%, 0) rotate(-6deg); opacity: 0; pointer-events: none; white-space: nowrap; }
.feedback.mostrar { animation: feedback .6s ease-out; }
.feedback--perfeito { color: var(--papel); background: var(--vermelho); }
.feedback--boa { color: var(--tinta); background: var(--ouro); }
.feedback--fora { color: var(--papel); background: var(--texto-3); }
.feedback--punch { color: var(--papel); background: var(--tinta); font-size: 2rem; }
@keyframes feedback { 0% { opacity: 0; transform: translate(-50%, 10px) rotate(-6deg) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -6px) rotate(-6deg) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -26px) rotate(-6deg); } }

.jogadas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jogada {
  display: grid; gap: 1px; min-width: 150px;
  padding: 10px 14px 8px;
  background: var(--papel); color: var(--tinta);
  border: 2.5px solid var(--tinta); border-radius: 14px 18px 12px 20px;
  box-shadow: 3px 4px 0 var(--tinta);
  transition: transform .12s, box-shadow .12s, background .2s;
}
.jogada b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; }
.jogada small { font-size: .78rem; color: var(--texto-3); }
.jogada--punch { background: var(--vermelho); color: var(--papel); border-color: var(--tinta); }
.jogada--punch small { color: rgba(244, 239, 229, .8); }
.jogada--encarar { background: var(--ouro); }
.jogada:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.jogada:active:not(:disabled) { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
@media (hover: hover) and (pointer: fine) { .jogada:not(:disabled):hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--tinta); } }

/* júri / plateia decide */
.juri { display: grid; gap: 12px; width: 100%; max-width: 440px; }
.juri__lado { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; }
.juri__lado img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tinta); }
.juri__barra { height: 22px; background: rgba(20, 18, 18, .12); border-radius: 12px; overflow: hidden; }
.juri__barra i { display: block; height: 100%; width: 4%; background: var(--vermelho); border-radius: 12px; transition: width 1.7s cubic-bezier(.3, 1.2, .4, 1); animation: tremer .12s infinite alternate; }
.juri__lado:last-child .juri__barra i { background: var(--tinta); }
@keyframes tremer { to { filter: brightness(1.2); } }

/* lance a lance */
.lances-box { background: var(--tinta); color: var(--papel); clip-path: var(--rasgo); padding: 14px 14px 10px; }
.lances-box__titulo { margin: 0 0 8px; font-family: var(--f-titulo); font-weight: 400; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.lances { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 470px; overflow-y: auto; scrollbar-width: thin; }
.lance { display: grid; grid-template-columns: 38px 28px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(244, 239, 229, .06); animation: lance-in .35s ease-out; }
.lance__t { font-family: var(--f-titulo); font-size: .85rem; color: #8a837c; }
.lance img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--papel); }
.lance__dj { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, var(--tinta) 22%, #3a3532 23%, #3a3532 60%, var(--ouro) 61%, var(--ouro) 66%, #3a3532 67%); }
.lance p { margin: 0; font-size: .98rem; line-height: 1.25; color: #ddd5c8; }
.lance p b { color: var(--papel); }
.lance__pts { font-family: var(--f-titulo); font-weight: 400; font-size: 1.2rem; color: var(--ouro); }
.lance--voce { border-left: 4px solid var(--vermelho); }
.lance--adv { border-left: 4px solid #8a837c; }
.lance--explode { background: rgba(193, 50, 52, .35); }
.lance--explode p b { color: var(--ouro); }
.lance--top { background: rgba(242, 185, 46, .1); }
.lance--ruim p { color: #a39b92; }
.lance--info p { color: #b9b1a6; font-style: italic; }
@keyframes lance-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- depois da batalha ---------- */
.pos { display: grid; justify-items: center; gap: 14px; text-align: center; }
.pos__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-titulo); font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--papel); background: var(--tinta); padding: .3em 1em .2em; clip-path: var(--tira); }
.pos__eyebrow svg { width: 22px; height: 22px; color: var(--ouro); }
.pos__titulo { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: .95; text-transform: uppercase; color: var(--papel); -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--tinta); }
.pos__titulo.bom { text-shadow: -3px -3px 0 var(--neon-ciano), 5px 5px 0 var(--vermelho); }
.pos__duelo { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 40px); margin-top: 22px; }
.pos__duelo figure { position: relative; margin: 0; display: grid; justify-items: center; gap: 6px; }
.pos__foto { display: block; padding: 8px; background: var(--papel); clip-path: var(--rasgo); }
.pos__foto img { display: block; width: clamp(110px, 22vw, 180px); aspect-ratio: 1; object-fit: cover; }
.pos__duelo .venceu { transform: rotate(-3deg); }
.pos__duelo .venceu .pos__foto { filter: drop-shadow(6px 7px 0 var(--vermelho)); }
.pos__duelo .perdeu { opacity: .55; transform: rotate(3deg) scale(.9); }
.pos__duelo .perdeu img { filter: grayscale(1); }
.pos__duelo figcaption { font-family: var(--f-titulo); font-size: 1.3rem; text-transform: uppercase; display: grid; }
.pos__duelo figcaption small { font-family: var(--f-rua); font-size: .9rem; text-transform: none; color: var(--texto-3); }
.pos__coroa { position: absolute; top: -34px; left: 50%; width: 90px; height: 40px; transform: translateX(-50%) rotate(-8deg); color: var(--ouro); filter: drop-shadow(2px 2px 0 var(--tinta)); }
.pos__placar { font-family: var(--f-titulo); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; }
.pos__rounds { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pos__rounds li { display: grid; grid-template-columns: 200px 80px 1fr; gap: 10px; align-items: baseline; text-align: left; font-size: 1.05rem; }
.pos__rounds span { color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.pos__rounds b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.2rem; }
.pos__rounds em { font-style: normal; font-family: var(--f-rua); color: var(--vermelho); }
.pos__stats { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 10px; width: min(620px, 100%); }
.pos__stats div { display: grid; padding: 10px 6px; background: var(--tinta); color: var(--papel); border-radius: 12px 16px 10px 14px; }
.pos__stats b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--ouro); }
.pos__stats small { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #b9b1a6; }
.pos__outros { width: min(620px, 100%); background: rgba(244, 239, 229, .85); padding: 14px 16px; clip-path: var(--rasgo); }
.pos__outros h2 { margin: 0 0 8px; font-family: var(--f-titulo); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
.pos__outros ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pos__outros li { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 8px; font-family: var(--f-titulo); font-size: 1rem; text-transform: uppercase; }
.pos__outros li span:first-child { text-align: right; }
.pos__outros li span:last-child { text-align: left; }
.pos__outros li span { color: var(--texto-3); }
.pos__outros li span.v { color: var(--tinta); }
.pos__outros li b { font-weight: 400; color: var(--vermelho); }
.pos__campeao { margin: 0; font-family: var(--f-rua); font-size: 1.3rem; }
.pos__campeao b { color: var(--vermelho); font-weight: 400; }
.pos__chave { width: 100%; }
.pos__acoes { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; align-items: center; margin-top: 6px; }

/* ---------- pausa ---------- */
.pausa { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(20, 18, 18, .7); }
.pausa > div { display: grid; justify-items: center; gap: 16px; background: var(--papel); padding: 28px 30px; clip-path: var(--rasgo); }
.pausa .titulo-pincel { margin: 0; font-size: 2.4rem; }

/* ---------- rodapé ---------- */
.rodape-mini { padding: 22px 16px 28px; text-align: center; background: var(--tinta); color: var(--papel); display: grid; gap: 8px; }
.rodape-mini .creditos { color: #a39b92; }
.rodape-mini .creditos a { color: var(--papel); }
.rodape-mini__nota { margin: 0; font-size: .85rem; color: #8a837c; }

/* ---------- responsivo ---------- */
@media (max-width: 1099px) {
  .pg-batalha .topo { flex-wrap: wrap; }
  .pg-batalha .abas-site { order: 3; width: 100%; justify-content: center; }
}
@media (min-width: 681px) and (max-width: 1099px) { .pg-batalha { --topo-h: 110px; } }
@media (max-width: 900px) {
  .arena__corpo { grid-template-columns: 1fr; }
  .lances { max-height: 260px; }
  .pre__info { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .pg-batalha { --topo-h: 104px; }
  .batalha { padding-top: 12px; }
  .escolha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .card-mc__nome { font-size: .9rem; }
  .card-mc__nivel { font-size: .72rem; }
  .placar { padding: 10px 10px 12px; gap: 6px 8px; }
  .pl-mc { gap: 6px; padding: 2px 4px; flex-direction: column; text-align: center; }
  .pl-mc--adv { flex-direction: column; text-align: center; }
  .pl-mc img { width: 46px; height: 46px; }
  .pl-mc__info small { display: none; }
  .pl-mc__info b { font-size: 1rem; }
  .pl-rounds, .pl-mc--adv .pl-rounds { justify-content: center; }
  .pl-pontos b { font-size: 2.1rem; }
  .pl-beat { font-size: .68rem; }
  .palco { min-height: 0; padding: 16px 10px 18px; }
  .pad { width: min(52vw, 200px); }
  .jogada { min-width: 0; flex: 1 1 140px; }
  .dica--teclas { display: none; }
  .lance { grid-template-columns: 32px 24px 1fr auto; gap: 6px; }
  .lance img, .lance__dj { width: 24px; height: 24px; }
  .lance p { font-size: .9rem; }
  .pos__rounds li { grid-template-columns: 1fr 64px 1fr; font-size: .95rem; }
  .pos__stats { grid-template-columns: repeat(2, 1fr); }
  .pre__mc figcaption { font-size: 1.2rem; }
  .dedo { width: 46px; height: 46px; font-size: 1.3rem; }
  .ip-btn { font-size: 1.3rem; }
}

/* ===== ritmo de clique: selo e trilha de notas ===== */
.selo-ritmo { display: inline-block; vertical-align: middle; font-family: var(--f-titulo); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px; color: var(--papel); background: var(--tinta); transform: rotate(-2deg); line-height: 1.5; }
.selo-ritmo--dobrado, .selo-ritmo--galope { background: var(--vermelho); }
.selo-ritmo--meio, .selo-ritmo--contratempo { background: var(--ouro); color: var(--tinta); }

#palco { position: relative; }
.pista { --pb: 72px; position: relative; width: min(460px, 100%); height: 46px; margin: 6px auto 0; background: var(--tinta); border-radius: 8px; overflow: hidden; box-shadow: 3px 4px 0 rgba(20, 18, 18, .3); }
.pista__alvo { position: absolute; left: 18%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--vermelho); box-shadow: 0 0 10px var(--vermelho); z-index: 2; }
.pista__alvo::before { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid var(--vermelho); border-radius: 50%; }
.pista__notas { position: absolute; left: 18%; top: 0; bottom: 0; width: 0; will-change: transform; }
.tr-nota { position: absolute; top: 50%; left: calc(var(--x) * var(--pb)); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 -3px 0 rgba(20, 18, 18, .25); }
.tr-nota--meia { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--ouro); }
.tr-nota.ok { background: #3fb35f; transform: scale(1.5); opacity: 0; transition: transform .25s, opacity .25s; }
.tr-nota.erro { background: #6d6560; opacity: .45; }

/* o MC "dança" no beat */
.pad--danca img { will-change: transform; animation: danca var(--batida, 650ms) ease-out infinite; }
@keyframes danca { 0% { transform: scale(1.05) rotate(-1.5deg); } 35% { transform: scale(1) rotate(0); } 100% { transform: scale(1) rotate(1deg); } }
.pad__txt { z-index: 2; }

/* aviso claro de quem está no mic */
.vez-banner { position: absolute; left: 50%; top: 38%; z-index: 6; display: grid; justify-items: center; padding: 10px 26px 12px; background: var(--tinta); color: var(--papel); clip-path: polygon(2% 8%, 98% 0, 100% 90%, 0 100%); transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; animation: vez-entra 1.5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.vez-banner b { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.vez-banner small { font-family: var(--f-rua); font-size: 1.05rem; color: var(--ouro); }
.vez-banner--voce { background: var(--vermelho); }
.vez-banner--voce small { color: var(--papel); }
@keyframes vez-entra { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(2.4); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(.94); } 22% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) rotate(-4deg) scale(1); } }
#palco::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 5px var(--vermelho), inset 0 0 38px rgba(193, 50, 52, .45); transition: opacity .3s; will-change: opacity; }
body.vez-voce #palco::after { animation: palco-vez 1.2s ease-in-out infinite alternate; }
@keyframes palco-vez { from { opacity: .45; } to { opacity: 1; } }
body.vez-voce .pal-mic__quem b { animation: piscar-vez .5s steps(2) infinite; }
@keyframes piscar-vez { 50% { color: var(--tinta); } }
.aviso-vez { font-family: var(--f-titulo); font-size: 1.2rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--papel) !important; background: var(--vermelho); padding: 4px 14px; transform: rotate(-2deg); animation: tremer .12s infinite alternate; }
.aviso-vez b { font-weight: 400; }
#palco.tremor { animation: tremor .45s; }
@keyframes tremor { 10%, 50%, 90% { transform: translate(-4px, 2px) rotate(-.4deg); } 30%, 70% { transform: translate(4px, -2px) rotate(.4deg); } }

/* apresentação do MC escolhido / sorteado */
.apresenta { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 18px; background: rgba(20, 18, 18, .88); cursor: pointer; animation: apr-fundo 2.1s ease forwards; }
.apresenta__card { position: relative; width: min(260px, 64vw); background: var(--papel); padding: 12px 12px 16px; box-shadow: 10px 12px 0 var(--vermelho); transform: rotate(-4deg); animation: apr-card .9s cubic-bezier(.2, 1.5, .4, 1); }
.apresenta__card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.apresenta__card b { display: block; margin-top: 10px; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1; text-transform: uppercase; text-align: center; }
.apresenta__card small { display: block; text-align: center; color: var(--texto-3); font-size: .9rem; letter-spacing: .1em; }
.apresenta__selo { position: absolute; right: -22px; top: 18px; padding: 4px 12px; font-family: var(--f-titulo); font-size: 1.1rem; letter-spacing: .08em; color: var(--papel); background: var(--vermelho); transform: rotate(12deg) scale(0); animation: apr-selo .4s .7s cubic-bezier(.2, 1.8, .4, 1) forwards; }
.apresenta__txt { font-family: var(--f-rua); font-size: clamp(1.5rem, 5vw, 2.2rem); color: var(--ouro); opacity: 0; animation: apr-txt .5s .55s ease forwards; text-align: center; padding: 0 16px; }
@keyframes apr-fundo { 0% { opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes apr-card { 0% { transform: translateY(80vh) rotate(30deg) scale(.6); } 100% { transform: rotate(-4deg); } }
@keyframes apr-selo { to { transform: rotate(12deg) scale(1); } }
@keyframes apr-txt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) { .pista { --pb: 58px; } }
@media (prefers-reduced-motion: reduce) { .pad--danca img, body.vez-voce #palco, body.vez-voce .pal-mic__quem b, .aviso-vez, #palco.tremor { animation: none; transform: none; } .apresenta, .apresenta__card, .apresenta__txt, .apresenta__selo { animation-duration: .01s; } }

/* votos: 2 jurados + plateia */
.pal-sub { font-size: .95rem !important; color: var(--texto-2); margin: -4px 0 4px; }
.votos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 520px; }
.voto { display: grid; gap: 8px; justify-items: center; text-align: center; }
.voto__quem b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; }
.voto__quem small { font-size: .78rem; color: var(--texto-3); }
.voto__carta { width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; align-content: center; gap: 6px; background: var(--tinta); color: var(--papel); border: 3px solid var(--tinta); border-radius: 8px; box-shadow: 4px 5px 0 rgba(20, 18, 18, .3); }
.voto__verso { font-family: var(--f-titulo); font-size: 2.6rem; opacity: .5; animation: tremer .14s infinite alternate; }
.voto.aberto .voto__carta { animation: virar .45s ease-out; background: var(--papel); color: var(--tinta); }
.voto--voce .voto__carta { border-color: var(--vermelho); box-shadow: 4px 5px 0 var(--vermelho); }
.voto__carta img { width: 64%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--tinta); }
.voto__carta b { font-family: var(--f-titulo); font-weight: 400; font-size: .95rem; text-transform: uppercase; padding: 0 4px; line-height: 1.1; }
.voto--voce .voto__carta b { color: var(--vermelho); }
.pos__rounds small { font-size: .7em; font-weight: 400; opacity: .7; }
@keyframes virar { 0% { transform: rotateY(90deg) scale(.9); } 100% { transform: rotateY(0) scale(1); } }
@media (max-width: 680px) { .voto__quem small { display: none; } .voto__carta b { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .voto__verso, .voto.aberto .voto__carta { animation: none; } }
.pad { -webkit-touch-callout: none; touch-action: manipulation; }
/* mudança de ritmo dentro do beat */
.tr-muda { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * var(--pb)); margin-left: -18px; border-left: 2px dashed var(--ouro); padding: 2px 0 0 3px; font-family: var(--f-titulo); font-size: .58rem; letter-spacing: .08em; line-height: 1; color: var(--ouro); text-transform: uppercase; white-space: nowrap; }
.pad__txt.muda { background: var(--ouro); color: var(--tinta); animation: tremer .12s infinite alternate; }
.pad__txt small { display: block; font-size: .68rem; letter-spacing: .08em; text-align: center; }

/* ===== plateia em silhueta no fundo ===== */
.plateia-sombra { position: fixed; left: 0; right: 0; bottom: 0; height: min(34vh, 300px); z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s; }
.plateia-sombra svg { width: 100%; height: 100%; display: block; }
body[data-fase="tela-arena"] .plateia-sombra { opacity: 1; }
body[data-fase="tela-pre"] .plateia-sombra, body[data-fase="tela-pos"] .plateia-sombra { opacity: .6; }
.fila--fundo { fill: rgba(20, 18, 18, .16); stroke: rgba(20, 18, 18, .16); }
.fila--frente { fill: rgba(20, 18, 18, .3); stroke: rgba(20, 18, 18, .3); }
.pl-camada { position: absolute; inset: 0; will-change: transform; animation: plateia-pula var(--batida, 650ms) ease-in-out infinite alternate; animation-delay: calc(var(--d) * var(--batida, 650ms)); }
.pl-camada svg { width: 100%; height: 100%; display: block; }
.pl-camada--fundo { fill: rgba(20, 18, 18, .16); stroke: rgba(20, 18, 18, .16); --a: 4px; }
.pl-camada--frente { fill: rgba(20, 18, 18, .3); stroke: rgba(20, 18, 18, .3); --a: 7px; }
.braco { fill: none; stroke-linecap: round; }
.braco--agito { opacity: 0; transition: opacity .15s; }
.cel { fill: rgba(242, 185, 46, .55); stroke: none; filter: drop-shadow(0 0 6px rgba(242, 185, 46, .8)); }
.plateia-sombra.agito .braco--agito { opacity: 1; }
.plateia-sombra.agito .pl-camada { animation-name: plateia-explode; animation-duration: calc(var(--batida, 650ms) / 2); }
body.vez-voce .pl-camada--frente { fill: rgba(80, 14, 16, .34); stroke: rgba(80, 14, 16, .34); }
@keyframes plateia-pula { from { transform: translateY(0); } to { transform: translateY(calc(var(--a) * -1)); } }
@keyframes plateia-explode { from { transform: translateY(0); } to { transform: translateY(calc(var(--a) * -3)); } }

/* ===== efeitos do jogo ===== */
.pts-voa { position: fixed; z-index: 96; pointer-events: none; transform: translate(-50%, 0); font-family: var(--f-titulo); font-size: 1.5rem; color: var(--papel); -webkit-text-stroke: 1.5px var(--tinta); paint-order: stroke fill; animation: pts-voa 1.1s ease-out forwards; }
.pts-voa--voce { color: var(--ouro); }
.pts-voa--grande { font-size: 2.4rem; color: var(--vermelho); }
@keyframes pts-voa { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.pista__alvo.acerto { animation: alvo-ok .25s ease-out; }
.pista__alvo.acerto--top { animation: alvo-top .3s ease-out; }
@keyframes alvo-ok { 50% { box-shadow: 0 0 18px 4px #3fb35f; background: #3fb35f; } }
@keyframes alvo-top { 50% { box-shadow: 0 0 26px 8px var(--ouro); background: var(--ouro); } }
.pl-pontos b.bump { animation: bump .35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes bump { 40% { transform: scale(1.3); color: var(--ouro); } }
.combo.pop b { display: inline-block; animation: bump .4s cubic-bezier(.2, 1.8, .4, 1); }
/* dica principal: clicar no MC */
.dica--clique { font-size: .98rem !important; max-width: 380px; }
.dica--clique b { color: var(--vermelho); }
.pad { width: clamp(200px, 32vw, 260px); cursor: pointer; }
.pad:not(.pad--adv)::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 3px dashed rgba(193, 50, 52, .5); animation: girar-borda 6s linear infinite; pointer-events: none; }
@keyframes girar-borda { to { transform: rotate(360deg); } }
/* tela pré-batalha: os dois entram e o VS bate */
.pre__mc:first-child { animation: entra-esq .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.pre__mc:last-child { animation: entra-dir .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.pre__vs { animation: vs-bate .5s .45s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-60vw) rotate(-20deg); } }
@keyframes entra-dir { from { opacity: 0; transform: translateX(60vw) rotate(20deg); } }
@keyframes vs-bate { from { opacity: 0; transform: rotate(-10deg) scale(3); } }
/* resultado: título carimbado */
.pos__titulo { animation: carimbo .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes carimbo { from { opacity: 0; transform: scale(2.4) rotate(-8deg); } }
@media (max-width: 680px) { .pad { width: min(60vw, 230px); } .plateia-sombra { height: 22vh; } }
@media (prefers-reduced-motion: reduce) { .pessoa, .pad:not(.pad--adv)::after, .pre__mc, .pre__vs, .pos__titulo { animation: none !important; } }
.pg-batalha, .pre { overflow-x: clip; }

/* ===== desempenho ===== */
@keyframes tremer { to { opacity: .8; } }   /* antes era filter (caro): opacidade roda na placa de vídeo */
.pad__anel { inset: -4px; will-change: transform, opacity; }
.pl-tempo i { width: 100%; transform-origin: left center; will-change: transform; }
.pl-dominio i { width: 100%; transform-origin: left center; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.parede-tags { contain: strict; transform: translateZ(0); }
.feedback, .pts-voa, .vez-banner { will-change: transform, opacity; }
.pista { contain: layout paint; }
/* modo leve: ligado sozinho quando o aparelho não aguenta (quadros lentos) */
body.leve .pl-camada, body.leve .pad--danca img, body.leve .pad:not(.pad--adv)::after, body.leve #palco::after,
body.leve .aviso-vez, body.leve .voto__verso, body.leve .pad__txt.muda, body.leve .juri__barra i { animation: none !important; }
body.leve body.vez-voce #palco::after, body.leve.vez-voce #palco::after { opacity: 1; }
body.leve .cel { filter: none; }
body.leve .parede-tags span { text-shadow: none; }
.palco { width: 100%; min-width: 0; justify-self: stretch; }

/* ===== chave ao vivo: as outras batalhas rolam uma por uma ===== */
.chave-status { min-height: 1.6em; margin: 6px 0 0; font-size: 1.05rem; color: var(--texto-2); text-align: center; }
.chave-status b { color: var(--tinta); }
.ao-vivo-txt { font-style: normal; color: var(--vermelho); font-family: var(--f-rua); animation: tremer .5s infinite alternate; }
.cv-jogo--rolando { box-shadow: 0 0 0 3px var(--vermelho), 2px 3px 0 rgba(20, 18, 18, .18); animation: cv-brilho-v .5s ease-in-out infinite alternate; }
.cv-jogo--rolando .cv-chip img { animation: cv-chacoalha .18s infinite alternate; }
.cv-jogo--revelado { animation: cv-revela .45s cubic-bezier(.2, 1.7, .4, 1); }
.cv-jogo--revelado em { animation: bump .5s cubic-bezier(.2, 1.8, .4, 1); display: inline-block; }
.cv-jogo--sua-vez { animation: cv-brilho-o .7s ease-in-out infinite alternate; }
@keyframes cv-rolando { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes cv-chacoalha { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes cv-revela { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cv-jogo--rolando, .cv-jogo--rolando .cv-chip img, .cv-jogo--revelado, .cv-jogo--sua-vez, .ao-vivo-txt { animation: none; } }

/* ===== canvas: trilha de notas e plateia ===== */
.pista canvas { display: block; width: 100%; height: 100%; }
canvas.plateia-sombra { width: 100%; display: block; }
.tela-b { overflow-x: clip; }

/* destaques da chave: só sombra (sem crescer pra fora), com folga no contêiner pra não cortar */
.chave-vis, .pos__chave { padding: 8px 10px 14px; }
@keyframes cv-brilho-v { from { box-shadow: 0 0 0 3px var(--vermelho); } to { box-shadow: 0 0 0 3px var(--vermelho), 0 0 10px 2px rgba(193, 50, 52, .55); } }
@keyframes cv-brilho-o { from { box-shadow: 0 0 0 3px var(--ouro), 3px 4px 0 var(--tinta); } to { box-shadow: 0 0 0 3px var(--ouro), 0 0 12px 3px rgba(242, 185, 46, .7); } }