/* Cabo de guerra da torcida (pixel art). Usa os tokens de style.css. */
.cabo { --px: 3px; --borda: #050506; }
.cabo-cab { text-align: center; max-width: 640px; margin: 0 auto 18px; }
.cabo-cab h2 { font: 300 clamp(30px, 4vw, 46px)/1.05 var(--serif); letter-spacing: -0.02em; margin-bottom: 8px; }
.cabo-cab p { color: var(--suave); }

/* placar */
.cabo-placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; max-width: 980px; margin: 0 auto 12px; }
.cabo-time { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cabo-time.flavio { text-align: right; align-items: flex-end; }
.cabo-time-nome { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }
.cabo-time strong { font: 300 clamp(26px, 3.4vw, 40px)/1 var(--serif); font-variant-numeric: tabular-nums; }
.cabo-time small { font-variant-numeric: tabular-nums; }
.cabo-vs { font: 700 13px var(--sans); color: var(--fraco); text-transform: uppercase; padding-bottom: 6px; }

/* palco pixel */
.cabo-palco {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border: var(--px) solid var(--borda);
  box-shadow: 0 0 0 var(--px) var(--linha-forte), 0 calc(var(--px) * 3) 0 var(--px) var(--pixel-sombra);
  background: #0b0d1c;
}
.cabo-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 548; /* proporção das artes (public/cabo/img/fundo.webp) */
}
.cabo-baloes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cabo-balao {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: 46%;
  padding: 4px 8px;
  background: #fffdf4;
  color: #141416;
  border: 2px solid var(--borda);
  box-shadow: 3px 3px 0 var(--c, #000);
  font: 700 clamp(10px, 1.4vw, 13px)/1.2 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: cabo-pop 0.25s steps(3) both, cabo-some 0.4s steps(2) 2.4s forwards;
}
.cabo-balao::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 8px;
  height: 6px;
  background: var(--borda);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@keyframes cabo-pop { from { transform: translate(-50%, -60%) scale(0.6); opacity: 0; } }
@keyframes cabo-some { to { opacity: 0; } }
.cabo-som {
  position: absolute;
  bottom: 6px; /* embaixo: em cima ficam as placas de nome do HUD */
  right: 6px;
  font: 700 11px var(--sans);
  letter-spacing: 0.04em;
  color: #ededed; /* sobre o canvas (sempre escuro), nos dois temas */
  background: rgba(12, 12, 13, 0.75);
  border: 2px solid #3a3a40;
  padding: 4px 8px;
  cursor: pointer;
}
.cabo-som[aria-pressed='true'] { border-color: var(--ouro); color: var(--ouro); }
.cabo-som:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* doação */
.cabo-doar { max-width: 980px; margin: 22px auto 0; }
.cabo-doar fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cabo-doar legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.cabo-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cabo-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  text-align: center;
  background: var(--card-2);
  border: 2px solid var(--linha-forte);
  box-shadow: 0 var(--px) 0 var(--pixel-sombra);
  cursor: pointer;
  transition: transform 0.12s steps(2), border-color 0.15s;
}
.cabo-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cabo-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--suave) 60%, var(--linha-forte)); }
.cabo-chip:has(input:checked), .cabo-chip.marcado { border-color: var(--ouro); background: color-mix(in srgb, var(--ouro) 16%, var(--card-2)); }
.cabo-chip:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.cabo-chip-simbolo { align-self: center; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.cabo-chip:has(input:checked) .cabo-chip-simbolo { filter: drop-shadow(0 0 4px rgb(255 205 60 / 0.85)); }
.cabo-chip-valor { font: 700 17px var(--sans); font-variant-numeric: tabular-nums; }
.cabo-chip-nome { font-size: 11px; color: var(--suave); line-height: 1.2; }
.cabo-outro { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--suave); }
.cabo-outro input {
  width: 96px;
  font: 600 15px var(--sans);
  padding: 8px 10px;
  color: var(--texto);
  background: var(--bg);
  border: 2px solid var(--linha-forte);
}
.cabo-outro input:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--ouro); }
.cabo-nivel { margin-top: 12px; color: var(--suave); min-height: 1.45em; }
.cabo-nivel strong { color: var(--ouro-texto); }
.cabo-erro { color: var(--erro); font-size: 13px; min-height: 0; }
.cabo-erro:empty { display: none; }
.cabo-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cabo-puxar {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font: 700 16px var(--sans);
  color: var(--sobre-cor);
  background: var(--c);
  border: 2px solid var(--borda);
  padding: 14px 16px;
  min-height: 52px;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.28), 0 var(--px) 0 var(--pixel-sombra);
  transition: transform 0.1s steps(2), filter 0.15s;
}
.cabo-puxar:hover { filter: brightness(1.1); transform: translateY(-2px); }
.cabo-puxar:active { transform: translateY(var(--px)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28); }

/* Efeito no hover/clique: camada animada entre o fundo e o texto (isolation + z-index -1).
   Lula: estrelinhas verdes e amarelas subindo e piscando. Flávio: listras verde-amarelas correndo. */
.cabo-puxar { position: relative; overflow: hidden; isolation: isolate; }
.cabo-puxar::before {
  content: '';
  position: absolute;
  inset: -48px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cabo-puxar.lula::before {
  /* ladrilho de 28px com duas estrelinhas brancas (uma grande, uma pequena) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23ffffff' d='M9 1.5l2.2 4.9 5.3.5-4 3.5 1.2 5.2L9 12.9l-4.7 2.7 1.2-5.2-4-3.5 5.3-.5z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.8' d='M21 14l1.6 3.6 3.9.3-3 2.6.9 3.8-3.4-2-3.4 2 .9-3.8-3-2.6 3.9-.3z'/%3E%3C/svg%3E");
  background-size: 28px 28px;
}
.cabo-puxar.lula:not(:disabled):is(:hover, :focus-visible)::before { opacity: 0.55; animation: cabo-estrelas 2.4s linear infinite, cabo-brilho 0.8s steps(2) infinite; }
.cabo-puxar.lula:not(:disabled):active::before { opacity: 0.9; animation-duration: 0.6s, 0.3s; }
.cabo-puxar:not(:disabled):is(:hover, :focus-visible, :active) { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.45); }
@keyframes cabo-estrelas { to { transform: translate(28px, -28px); } }
@keyframes cabo-brilho { 50% { opacity: 0.85; } }

/* Flávio: confetes listrados verde-amarelos, cada um um pedacinho separado, pulando do pé do
   botão (criados pelo cabo.js enquanto o mouse/foco está no botão). */
.cabo-confete {
  position: absolute;
  bottom: -14px;
  z-index: -1;
  width: 7px;
  height: 14px;
  border-radius: 1px;
  background: repeating-linear-gradient(0deg, #009c3b 0 3.5px, #ffdf00 3.5px 7px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  animation: cabo-pulo var(--dur, 0.9s) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes cabo-pulo {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  55% { transform: translate(var(--dx, 0), var(--alto, -44px)) rotate(var(--giro, 180deg)); opacity: 1; }
  100% { transform: translate(calc(var(--dx, 0) * 1.6), 6px) rotate(calc(var(--giro, 180deg) * 2)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cabo-puxar::before { animation: none !important; }
  .cabo-confete { display: none; }
}
.cabo-puxar:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.cabo-puxar:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.cabo-puxar-valor { font-weight: 500; opacity: 0.9; font-variant-numeric: tabular-nums; }

/* quadros */
.cabo-quadros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; max-width: 980px; margin: 22px auto 0; }
.cabo-quadro { min-width: 0; padding: 14px 16px; background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px solid var(--linha); }
.cabo-quadro h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); margin-bottom: 8px; }
.cabo-maiores { margin: 0; padding-left: 22px; font-size: 14px; }
.cabo-maiores li { padding: 3px 0; font-variant-numeric: tabular-nums; }
.cabo-maiores li::marker { color: var(--ouro-texto); font-weight: 700; }
.cabo-maiores strong, .cabo-ticker strong { color: var(--c); }
.cabo-maiores time, .cabo-ticker time { color: var(--fraco); font-size: 12px; margin-left: 6px; }
.cabo-ticker { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.cabo-ticker li { flex: none; padding: 4px 8px; font-size: 13px; background: var(--card-2); border-left: 3px solid var(--c, #444); font-variant-numeric: tabular-nums; }
.cabo-ticker li:first-child { animation: cabo-pop-chip 0.3s steps(3); }
@keyframes cabo-pop-chip { from { opacity: 0; transform: translateX(-8px); } }
.cabo-quadros li.vazio { color: var(--suave); background: none; border: 0; list-style: none; }
.cabo-maiores li.vazio { margin-left: -22px; }
.cabo-aviso { margin: 20px auto 0; max-width: 720px; text-align: center; font-size: 12px; color: var(--fraco); }
.cabo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* PIX */
.cabo-pix-box { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.cabo-pix-box h3 { font: 300 26px/1.1 var(--serif); }
.cabo-pix-valor { font-size: 20px; font-weight: 700; color: var(--ouro-texto); }
.cabo-pix-box label { font-size: 13px; color: var(--suave); }
.cabo-pix-bloco { display: flex; flex-direction: column; gap: 8px; }
.cabo-pix-bloco[hidden] { display: none; }
.cabo-pix-qr { align-self: center; width: 200px; height: 200px; max-width: 100%; padding: 10px; margin-bottom: 4px; background: #fff; border-radius: 10px; image-rendering: pixelated; }
.cabo-pix-bloco label { font: 700 15px var(--sans); color: var(--texto); }
.cabo-pix-cod { display: block; width: 100%; min-height: 6.5em; resize: none; overflow: auto; padding: 10px; border: 2px solid var(--linha); background: var(--bg); color: var(--texto); font: 13px/1.5 ui-monospace, monospace; word-break: break-all; }
.cabo-pix-box button { font: 600 14px var(--sans); padding: 10px 14px; min-height: var(--toque); cursor: pointer; border: 2px solid var(--linha-forte); background: var(--card-2); color: var(--texto); box-shadow: 0 2px 0 var(--pixel-sombra); }
.cabo-pix-box button:hover { background: var(--card-3); }
.cabo-pix-box .cabo-pix-copiar { min-height: 52px; font-size: 16px; font-weight: 700; border-color: var(--pixel-sombra); background: var(--ouro); color: var(--tinta-ouro); }
.cabo-pix-box .cabo-pix-copiar:hover { background: var(--ouro-2); }
.cabo-pix-box button:focus-visible, .cabo-pix-cod:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cabo-pix-box .cabo-mock { border-style: dashed; color: var(--ouro-texto); }
.cabo-pix-copia-status { min-height: 1.3em; font-size: 13px; text-align: center; color: var(--suave); }
.cabo-pix-dica { font-size: 13px; line-height: 1.45; color: var(--suave); }
.cabo-pix-status { min-height: 1.4em; color: var(--suave); }

/* Pagamento confirmado (bloco de public/pix.js, usado também por superchat e anúncios): ícone verde + frase.
   O verde é fixo (branco sobre ele passa de 4,3:1 nos dois temas). */
.pix-corpo { display: flex; flex-direction: column; gap: 8px; }
.pix-corpo[hidden], .pix-pago[hidden] { display: none; }
.pix-pago { --pix-ok: #1f8a43; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 8px 10px; text-align: center; }
.pix-pago:focus { outline: none; }
.pix-pago-ico { display: block; width: 88px; height: 88px; max-width: 100%; overflow: visible; }
.pix-pago-circ { fill: var(--pix-ok); }
.pix-pago-check { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pix-pago-txt { max-width: 28ch; font: 700 19px/1.3 var(--sans); color: var(--texto); }
/* animação curta (pop do círculo + traço do check); sem ela o ícone aparece pronto — movimento reduzido e modo leve */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-leve='1']) .pix-pago:not([hidden]) .pix-pago-circ { transform-box: fill-box; transform-origin: center; animation: pix-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  :root:not([data-leve='1']) .pix-pago:not([hidden]) .pix-pago-check { stroke-dasharray: 48; stroke-dashoffset: 48; animation: pix-traco 0.32s 0.22s ease-out forwards; }
  :root:not([data-leve='1']) .pix-pago:not([hidden]) .pix-pago-txt { animation: pix-sobe 0.35s 0.3s ease-out both; }
}
@keyframes pix-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes pix-traco { to { stroke-dashoffset: 0; } }
@keyframes pix-sobe { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 760px) {
  .cabo { --px: 2px; }
  .cabo-cab { margin-bottom: 14px; }
  .cabo-cab p { font-size: 14px; }
  .cabo-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cabo-chip { padding: 8px 4px; min-height: var(--toque); }
  .cabo-chip-valor { font-size: 15px; }
  .cabo-chip-simbolo { width: 26px; height: 26px; }
  .cabo-quadros { grid-template-columns: minmax(0, 1fr); }
  .cabo-puxar { font-size: 15px; padding: 12px 10px; flex-wrap: wrap; row-gap: 0; }
  .cabo-som { bottom: 4px; right: 4px; padding: 3px 6px; font-size: 10px; }
  .cabo-doar { margin-top: 16px; }
}
@media (max-width: 480px) {
  .cabo-botoes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cabo-placar { gap: 6px; }
  .cabo-time-nome { font-size: 10px; letter-spacing: 0.04em; }
}
@media (pointer: coarse) {
  .cabo-som { min-height: 36px; min-width: 44px; } /* em cima do canvas: um pouco menor para não tapar a cena */
  .cabo-outro input { min-height: var(--toque); }
}
@media (prefers-reduced-motion: reduce) {
  .cabo-balao { animation: cabo-some 0.4s steps(2) 2.4s forwards !important; }
}

/* ---------- metas coletivas (public/metas.js): trilha acima do seletor de valor ---------- */
.metas { max-width: 980px; margin: 22px auto 0; padding: 14px 16px 12px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--card-2) 70%, transparent); }
.metas[hidden] { display: none; }
.metas-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.metas-cab h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.metas-resumo { font-size: 14px; color: var(--suave); }
.metas-resumo strong { color: var(--ouro-texto); font-size: 17px; font-variant-numeric: tabular-nums; }
.metas-trilha { position: relative; margin: 26px 16px 30px 0; }
.metas-barra { height: 12px; background: var(--card-3); border: 2px solid var(--borda); box-shadow: 0 2px 0 var(--pixel-sombra); overflow: hidden; }
.metas-preench {
  display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: repeating-linear-gradient(-45deg, var(--ouro) 0 8px, var(--ouro-2) 8px 16px);
  transition: transform 1.1s var(--ease);
}
.metas-marcos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.metas-marco { position: absolute; top: 50%; transform: translate(-50%, -50%); pointer-events: auto; }
.metas-pino {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: var(--card); color: var(--suave); border: 2px solid var(--linha-forte); border-radius: 50%;
  box-shadow: 0 2px 0 var(--pixel-sombra); transition: transform 0.2s var(--ease), background 0.2s, color 0.2s;
}
.metas-pino:hover { transform: scale(1.08); }
.metas-pino:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.metas-simbolo { display: block; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; filter: grayscale(1) brightness(0.8); opacity: 0.55; transition: filter 0.3s, opacity 0.3s; }
.metas-marco.atingida .metas-simbolo { filter: drop-shadow(0 0 4px rgb(255 205 60 / 0.9)); opacity: 1; animation: metas-brilho 2.2s ease-in-out infinite; }
@keyframes metas-brilho { 50% { filter: drop-shadow(0 0 8px rgb(255 205 60 / 1)) brightness(1.15); } }
.metas-icone { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.metas-marco.atingida .metas-pino { background: var(--ouro); color: var(--tinta-ouro); border-color: var(--borda); }
.metas-pino:has(.metas-simbolo) { width: 42px; height: 42px; }
.metas-marco.festa .metas-pino { animation: metas-pulo 0.6s var(--ease) 3; }
@keyframes metas-pulo { 40% { transform: translateY(-8px) scale(1.15); } }
.metas-valor {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--fraco); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.metas-marco.atingida .metas-valor { color: var(--ouro-texto); }
.metas-dica {
  position: absolute; z-index: 4; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: min(240px, 70vw);
  display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; font-size: 13px; line-height: 1.35;
  background: var(--tooltip); color: var(--texto); border: 1px solid var(--tooltip-borda); box-shadow: 0 10px 26px var(--sombra);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 0.18s, transform 0.18s var(--ease), visibility 0.18s;
}
.metas-dica span { color: var(--suave); }
.metas-dica small { color: var(--ouro-texto); font-weight: 600; }
.metas-marco.fim .metas-dica { left: auto; right: -12px; transform: translateY(4px); }
.metas-marco:hover .metas-dica, .metas-marco:focus-within .metas-dica { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.metas-marco.fim:hover .metas-dica, .metas-marco.fim:focus-within .metas-dica { transform: none; }

/* toast de meta atingida (fixo no topo, fora de qualquer seção) */
.metas-toast {
  position: fixed; z-index: 50; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 12px 18px 12px 14px;
  background: var(--ouro); color: var(--tinta-ouro); border: 3px solid #1a1400; box-shadow: 0 5px 0 #1a1400, 0 18px 40px var(--sombra);
  opacity: 0; visibility: hidden; transform: translate(-50%, -16px); pointer-events: none;
  transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0.3s;
}
.metas-toast.visivel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.metas-toast > span:not(.metas-estouro) { display: flex; flex-direction: column; min-width: 0; }
.metas-toast strong { font: 400 10px/1.4 'Press Start 2P', ui-monospace, monospace; text-transform: uppercase; }
.metas-toast span span { font: 700 16px var(--sans); overflow-wrap: anywhere; }
.metas-toast .metas-icone { width: 28px; height: 28px; flex: none; stroke-width: 2; }
.metas-toast .metas-simbolo { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 0 #1a1400); opacity: 1; animation: none; }
.metas-estouro { position: absolute; left: 30px; top: 50%; pointer-events: none; }
.metas-estouro i {
  position: absolute; width: 7px; height: 7px; background: #1a1400;
  animation: metas-estoura 0.9s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
.metas-estouro i:nth-child(3n) { background: #fff; }
.metas-estouro i:nth-child(3n + 1) { background: var(--lula); }
.metas-estouro i:nth-child(4n) { background: var(--flavio); }
@keyframes metas-estoura { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }

@media (max-width: 760px) {
  .metas { margin-top: 16px; padding: 12px; }
  .metas-pino { width: 30px; height: 30px; }
  .metas-pino:has(.metas-simbolo) { width: 36px; height: 36px; }
  .metas-simbolo { width: 24px; height: 24px; }
  .metas-icone { width: 16px; height: 16px; }
  .metas-valor { font-size: 10px; }
}
@media (pointer: coarse) {
  /* alvo de toque de 44px sem aumentar o desenho do pino */
  .metas-pino { position: relative; }
  .metas-pino::after { content: ''; position: absolute; inset: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .metas-preench, .metas-toast { transition: none; }
  .metas-estouro { display: none; }
  .metas-marco.atingida .metas-simbolo { animation: none; }
}

/* símbolos dos níveis animam no hover/foco/toque, cada um do seu jeito (só transform/opacity/filter) */
.cabo-chip-simbolo { transform-origin: 50% 70%; }
.cabo-chip:is(:hover, :active, :has(input:focus-visible)) .sim-mao { animation: sim-puxa 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) infinite; }
.cabo-chip:is(:hover, :active, :has(input:focus-visible)) .sim-bandeira { animation: sim-bandeira 0.8s ease-in-out infinite; }
.cabo-chip:is(:hover, :active, :has(input:focus-visible)) .sim-rugido { animation: sim-ruge 0.32s steps(4) infinite; }
.cabo-chip:is(:hover, :active, :has(input:focus-visible)) .sim-raios { animation: sim-raio 0.6s steps(6) infinite; }
.cabo-chip:is(:hover, :active, :has(input:focus-visible)) .sim-estrela { animation: sim-estrela 1.4s ease-in-out infinite; }
@keyframes sim-puxa { 0%, 100% { transform: none; } 30% { transform: translateX(-6px) rotate(-10deg); } 55% { transform: translateX(2px); } }
@keyframes sim-bandeira { 0%, 100% { transform: none; } 25% { transform: translateY(-5px) rotate(-7deg); } 50% { transform: none; } 75% { transform: translateY(-5px) rotate(7deg); } }
@keyframes sim-ruge {
  0% { transform: translate(1px, 0) scale(1.06); } 25% { transform: translate(-1px, 1px) scale(1.08); }
  50% { transform: translate(1px, -1px) scale(1.06); } 75% { transform: translate(-1px, 0) scale(1.08); } 100% { transform: translate(1px, 0) scale(1.06); }
}
@keyframes sim-raio {
  0% { transform: translateX(0); opacity: 1; filter: none; } 17% { transform: translateX(-3px); filter: brightness(1.6); }
  33% { transform: translateX(3px); opacity: 0.55; } 50% { transform: translateX(-2px); opacity: 1; filter: brightness(1.8); }
  67% { transform: translateX(2px); } 83% { transform: translateX(0); opacity: 0.7; } 100% { opacity: 1; filter: none; }
}
@keyframes sim-estrela {
  0%, 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 2px rgb(255 205 60 / 0.6)); }
  50% { transform: rotate(18deg) scale(1.14); filter: drop-shadow(0 0 7px rgb(255 215 80 / 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .cabo-chip .cabo-chip-simbolo { animation: none !important; }
}