/* Música e Ritmo (a Banda Bicharada e a Maestra Tuca): só o que as brincadeiras de música precisam além do estilo.css.
   Tudo começa com mu-. As notas viram cores e formas e as batidas viram luzes. */

/* ---------- peças comuns ---------- */
.mu-svg { display: block; width: 100%; height: auto; }
.mu-apresenta { width: 118px; }
.abertura-arte .mu-svg { width: 130px; margin: 0 auto; }
.mu-brincadeira-emoji { background: #fce7f3; }
.mu-rodada { margin: 0; text-align: center; color: var(--branco); font-size: 18px; font-weight: 800; }
.vez.mu-vez .mu-vez-nome { font-size: 22px; }
.contagem-item.mu-agora { background: var(--cor); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); transform: scale(1.08); }
.mu-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mu-botoes[hidden], .mu-explica[hidden], .mu-pronto[hidden] { display: none; }
.mu-msg { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 36px; }
.mu-sem-som { margin: 0; padding: 8px 14px; border-radius: 16px; background: #fef3c7; color: #92400e; font-size: 16px; font-weight: 800; text-align: center; }
.mu-pergunta { margin: 0; text-align: center; color: var(--branco); font-size: clamp(22px, 5.6vw, 30px); line-height: 1.2; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.mu-pergunta em { font-style: normal; padding: 0 8px; border-radius: 10px; }
.mu-destaque-agudo { background: #38bdf8; color: #0c4a6e; }
.mu-destaque-grave { background: #475569; color: #fff; }
.mu-destaque-forte { background: #ef4444; color: #fff; }
.mu-destaque-fraco { background: #e0e7ff; color: #4338ca; }
.mu-destaque-longo { background: #f9a8d4; color: #831843; }
.mu-destaque-curto { background: #fde68a; color: #92400e; }
.mu-explica {
  width: 100%; max-width: 620px; align-self: center; padding: 12px 16px; border-radius: 20px;
  background: var(--branco); box-shadow: var(--sombra); border-left: 10px solid #f97316; text-align: center;
  display: flex; flex-direction: column; gap: 10px; animation: entra .3s ease-out;
}
.mu-explica p { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; }
.mu-explica-certo { border-left-color: #22c55e; }
.mu-explica-curta { margin: 0; max-width: 620px; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .92); font-size: 17px; font-weight: 700; text-align: center; }

/* A mãozinha que mostra o gesto. */
.mu-gestos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.mu-gesto {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--tinta); font-size: 17px; line-height: 1.15; box-shadow: 0 3px 0 rgba(42, 26, 94, .2);
}
.mu-mao { display: inline-block; font-size: 28px; line-height: 1; }
.mu-gesto-tocar .mu-mao { animation: mu-mao-toca 1s ease-in-out infinite; }
.mu-gesto-contar .mu-mao { animation: mu-mao-conta .9s ease-in-out infinite; }
.mu-gesto-segurar .mu-mao { animation: mu-mao-segura 1.6s ease-in-out infinite; }
.mu-gesto-arrastar .mu-mao { animation: mu-mao-arrasta 1.6s ease-in-out infinite; }
.mu-gesto-deslizar .mu-mao { animation: mu-mao-desliza 1.4s ease-in-out infinite; }
.mu-gesto-ouvir .mu-mao { animation: mu-mao-olha 1.6s ease-in-out infinite; }
@keyframes mu-mao-toca { 0%, 100% { transform: translateY(-4px); } 45% { transform: translateY(3px) scale(.9); } }
@keyframes mu-mao-conta { 0%, 50%, 100% { transform: translateY(-4px); } 25%, 75% { transform: translateY(3px) scale(.88); } }
@keyframes mu-mao-segura { 0% { transform: translateY(-4px); } 25%, 85% { transform: translateY(3px) scale(.88); filter: drop-shadow(0 0 4px #f59e0b); } 100% { transform: translateY(-4px); } }
@keyframes mu-mao-arrasta { 0% { transform: translate(-8px, 4px) scale(.9); } 60% { transform: translate(10px, -4px) scale(.9); } 100% { transform: translate(-8px, 4px); } }
@keyframes mu-mao-desliza { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-8px); } }
@keyframes mu-mao-olha { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* As luzes do palco: acendem com cada som (cor do instrumento; graves à esquerda, agudos à direita). */
.mu-luzes {
  display: flex; justify-content: space-between; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: rgba(30, 27, 75, .55); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
.mu-luzes i {
  flex: 1; max-width: 46px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.mu-luzes i.mu-acesa { background: var(--cor); box-shadow: 0 0 calc(18px * var(--forca)) var(--cor), 0 0 4px #fff; transform: scaleY(calc(.9 + .6 * var(--forca))); transition: none; }
.mu-luzes.mu-batida { animation: mu-batida .25s ease-out; }
@keyframes mu-batida { from { box-shadow: 0 0 0 4px rgba(253, 224, 71, .55), inset 0 2px 6px rgba(0, 0, 0, .35); } }

/* ---------- o menu ---------- */
.mu-banda-menu { display: flex; justify-content: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.mu-banda-bicho { width: min(13vw, 74px); animation: mu-danca 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
@keyframes mu-danca { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-6px) rotate(4deg); } }

/* ---------- o mapa de fases ---------- */
.mu-mapa-info { margin: 0; text-align: center; color: var(--branco); font-size: 18px; font-weight: 800; }
.mu-caminho {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 18px 10px;
  padding: 18px 8px; border-radius: 28px; background: rgba(255, 255, 255, .16);
}
.mu-caminho-linha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mu-caminho-linha polyline { fill: none; stroke: #fde047; stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.mu-fase {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  border-radius: 20px; color: var(--branco); text-align: center; min-width: 0;
}
.mu-fase b { font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.mu-fase small { font-size: 13px; font-weight: 700; line-height: 1.15; opacity: .95; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); overflow-wrap: anywhere; }
.mu-fase-bola {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 32px;
  background: var(--branco); border: 5px solid #c4b5fd; box-shadow: 0 5px 0 rgba(42, 26, 94, .3);
}
.mu-fase-show .mu-fase-bola { width: 78px; height: 78px; font-size: 38px; border-color: #f59e0b; background: radial-gradient(circle, #fff7ed, #fde68a); }
.mu-fase-feita .mu-fase-bola { border-color: #22c55e; }
.mu-fase-agora .mu-fase-bola { animation: mu-pulsa 1.2s ease-in-out infinite; border-color: #fde047; box-shadow: 0 0 0 6px rgba(253, 224, 71, .45), 0 5px 0 rgba(42, 26, 94, .3); }
.mu-fase:disabled { opacity: .55; }
.mu-fase:disabled .mu-fase-bola { background: #e5e7eb; border-color: #9ca3af; }
.mu-fase:not(:disabled):active .mu-fase-bola { transform: scale(.94); }
.mu-fase:focus-visible { outline: 4px solid #fde047; outline-offset: 2px; }
.mu-fase-estrelas { color: #fde047; font-size: 18px; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.mu-mapa-botoes { display: flex; flex-direction: column; align-items: center; gap: 10px; }
@keyframes mu-pulsa { 50% { transform: scale(1.08); } }

/* O que aprendeu (no placar). */
.mu-aprendeu {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; text-align: left;
  background: var(--branco); color: var(--tinta); box-shadow: var(--sombra);
}
.mu-aprendeu-arte { width: 74px; flex: none; }
.mu-aprendeu strong { font-size: 19px; }
.mu-aprendeu p { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; }

/* ---------- Tambor Contador ---------- */
.mu-pedido { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 26px; background: var(--branco); box-shadow: var(--sombra); }
.mu-pedido-texto { margin: 0; font-size: clamp(22px, 6vw, 32px); text-align: center; line-height: 1.15; }
.mu-numeros { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.mu-parte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 20px; background: #fff; background: color-mix(in srgb, var(--cor) 14%, #fff); border: 3px solid var(--cor); }
.mu-parte-topo { display: flex; align-items: center; gap: 6px; }
.mu-num { font-size: 44px; font-weight: 900; line-height: 1; color: var(--cor, var(--tinta)); text-shadow: 0 2px 0 rgba(0, 0, 0, .1); }
.mu-num-total { color: #16a34a; min-width: 30px; text-align: center; }
.mu-parte-emoji { font-size: 30px; }
.mu-liga { font-size: 34px; font-weight: 900; color: var(--roxo-escuro); }
.mu-parte-topo .mu-liga { font-size: 30px; margin-right: 4px; }
/* Com duas ou três partes (um depois do outro, somar), tudo um pouco menor para caber numa linha. */
.mu-numeros-varios { gap: 8px; }
.mu-numeros-varios .mu-parte { padding: 6px 8px; }
.mu-numeros-varios .mu-num { font-size: 36px; }
.mu-numeros-varios .mu-parte-emoji { font-size: 24px; }
.mu-numeros-varios .mu-ponto { width: 24px; height: 24px; font-size: 12px; border-width: 2.5px; }
.mu-numeros-varios .mu-pontos { gap: 5px; }
.mu-pontos { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; justify-content: center; }
.mu-pontos-extra:empty { display: none; }
.mu-ponto {
  width: 30px; height: 30px; border-radius: 50%; border: 3px dashed var(--cor, #a78bfa); display: grid; place-items: center;
  font-style: normal; font-size: 14px; font-weight: 900; color: #fff; background: transparent; transition: background .15s, transform .15s;
}
.mu-ponto.mu-aceso, .mu-ponto.mu-demo { background: var(--cor); border-style: solid; transform: scale(1.12); animation: mu-acende .25s ease-out; }
.mu-ponto.mu-demo { box-shadow: 0 0 0 4px rgba(253, 224, 71, .7); }
.mu-ponto.mu-falta { animation: brilha .7s ease-in-out infinite; border-color: #f97316; }
.mu-ponto.mu-festa { animation: mu-festa .5s ease-in-out 2; }
.mu-ponto-extra { background: #f97316 !important; border: 3px solid #c2410c; font-size: 12px; animation: pula .3s cubic-bezier(.2, 1.6, .4, 1); }
.mu-ponto.mu-recontado { box-shadow: 0 0 0 4px #fde047; }
.mu-ponto.mu-passou { background: #f97316 !important; border-color: #c2410c; }
.mu-ponto.mu-vazio { opacity: .3; }
@keyframes mu-acende { from { transform: scale(1.6); } }
@keyframes mu-festa { 50% { transform: translateY(-8px) scale(1.15); } }

.mu-palco-tambor { display: flex; justify-content: center; align-items: flex-end; gap: 14px; flex-wrap: wrap; touch-action: none; }
.mu-inst {
  position: relative; width: clamp(130px, 40vw, 210px); padding: 8px; border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12)); touch-action: none;
}
.mu-inst svg { pointer-events: none; transition: transform .08s; }
.mu-inst:active svg, .mu-inst.mu-aceso svg { transform: scale(.94); }
.mu-inst.mu-aceso { animation: mu-luz-inst .35s ease-out; }
.mu-inst:focus-visible { outline: 5px solid #fde047; outline-offset: 2px; }
@keyframes mu-luz-inst { from { box-shadow: 0 0 0 10px rgba(253, 224, 71, .85), 0 0 40px #fde047; } }
.mu-inst-conta {
  position: absolute; right: 6px; top: 6px; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; background: var(--roxo-escuro); color: #fff; font-size: 22px; font-weight: 900;
}
.mu-inst-conta:empty { display: none; }
.mu-inst.mu-treme { animation: treme .1s 4; }
.mu-inst.mu-rindo svg { animation: mu-ri .18s ease-in-out infinite alternate; }
.mu-inst.mu-feliz svg { animation: mu-festa .5s ease-in-out 2; }
@keyframes mu-ri { from { transform: rotate(-6deg) scale(1.02); } to { transform: rotate(6deg) scale(1.06); } }
.mu-pele { transition: opacity .1s; }
.mu-aceso .mu-pele { opacity: 1; fill: #fde047; }
.mu-aceso .mu-badalo { animation: mu-badala .3s ease-in-out; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes mu-badala { 30% { transform: translateX(-8px); } 70% { transform: translateX(8px); } }
.mu-bico-baixo, .mu-bico-cima { transition: transform .08s; transform-box: fill-box; }
.mu-bico-baixo { transform-origin: 0% 0%; }
.mu-grasna .mu-bico-baixo { transform: rotate(16deg) translateY(4px); }
.mu-grasna .mu-bico-cima { transform: translateY(-3px); }
.mu-linha-conta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.mu-contador {
  min-width: 74px; height: 74px; padding: 0 10px; border-radius: 22px; display: grid; place-items: center;
  background: var(--branco); color: var(--roxo-escuro); font-size: 46px; font-weight: 900; box-shadow: var(--sombra);
}
.mu-contador.mu-pula { animation: pula .25s cubic-bezier(.2, 1.6, .4, 1); }
.mu-pop {
  position: fixed; z-index: 80; transform: translate(-50%, -50%); pointer-events: none;
  font-size: 46px; font-weight: 900; color: var(--cor); -webkit-text-stroke: 2px #fff; paint-order: stroke;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25); animation: mu-pop .9s ease-out forwards;
}
@keyframes mu-pop { from { transform: translate(-50%, -20%) scale(.6); opacity: 1; } 30% { transform: translate(-50%, -80%) scale(1.15); } to { transform: translate(-50%, -170%) scale(1); opacity: 0; } }
.mu-compara { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mu-compara-linha { display: flex; align-items: center; gap: 8px; }
.mu-compara-linha > b { width: 46px; text-align: right; font-size: 16px; }
.mu-compara-linha > strong { font-size: 24px; min-width: 26px; }
.mu-compara-pontos { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.mu-compara-pontos .mu-ponto { width: 26px; height: 26px; font-size: 12px; transform: none; animation: none; }
.mu-pronto { font-size: 20px; }

/* ---------- Siga o Ritmo ---------- */
.mu-preparar { gap: 12px; }
.mu-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mu-legenda-item { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; padding: 8px; border-radius: 18px; background: #f5f3ff; }
.mu-legenda-item b { font-size: 18px; }
.mu-legenda-item small { font-size: 13px; font-weight: 700; opacity: .8; line-height: 1.15; }
.mu-fig { width: 46px; height: 46px; }
.mu-pistas-dica { margin: 0; font-size: 16px !important; font-weight: 800; }
.mu-pistas-dica span { display: inline-block; margin: 2px; padding: 2px 10px; border-radius: 999px; background: var(--cor); color: #fff; }
.mu-hud { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mu-hud { flex-wrap: nowrap; gap: 6px; }
.mu-hud > span { padding: 5px 10px; border-radius: 999px; background: var(--branco); font-size: clamp(13px, 3.8vw, 18px); font-weight: 800; white-space: nowrap; box-shadow: 0 3px 0 rgba(42, 26, 94, .2); }
.mu-hud-quente { background: #fde047 !important; animation: mu-pulsa .5s ease-in-out infinite; }
.mu-ritmo-caixa { width: 100%; border-radius: 26px; overflow: hidden; box-shadow: var(--sombra); background: #1e1b4b; }
.mu-ritmo-tela { display: block; width: 100%; touch-action: none; cursor: pointer; }
.mu-resultado-num { font-size: 48px !important; font-weight: 900; color: var(--roxo-escuro); }
.mu-dica-ritmo { font-size: 17px !important; opacity: .85; }

/* ---------- Piano das Cores ---------- */
.mu-teclado {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: clamp(3px, 1vw, 8px); padding: 10px 8px 14px;
  border-radius: 24px; background: #2a1a5e; box-shadow: var(--sombra); touch-action: none;
}
.mu-tecla {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  height: clamp(140px, 36vw, 200px); padding: 6px 2px 10px; min-width: 0; border-radius: 10px 10px 16px 16px;
  background: #fff;
  background: linear-gradient(180deg, #fff 0%, #fff 55%, color-mix(in srgb, var(--cor) 35%, #fff) 100%);
  border-bottom: 10px solid var(--cor); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); touch-action: none; transition: transform .06s;
}
.mu-tecla-forma { width: 78%; max-width: 54px; }
.mu-tecla-forma svg { display: block; width: 100%; }
.mu-tecla b { font-size: clamp(14px, 3.6vw, 20px); color: var(--tinta); }
.mu-tecla small { font-size: 11px; font-weight: 800; opacity: .7; }
.mu-tecla.mu-apertada, .mu-tecla:active { transform: translateY(4px); background: #f1f5f9; background: color-mix(in srgb, var(--cor) 45%, #fff); }
.mu-tecla.mu-brilha { background: var(--cor); box-shadow: 0 0 24px var(--cor), 0 0 0 4px #fff; transform: translateY(2px); }
.mu-tecla.mu-brilha b, .mu-tecla.mu-certa b { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mu-tecla.mu-certa { background: var(--cor); animation: mu-pulsa .4s ease-in-out 3; box-shadow: 0 0 0 5px #22c55e; }
.mu-tecla.mu-guia { box-shadow: 0 0 0 5px #fde047, 0 0 28px #fde047; animation: mu-guia 1s ease-in-out infinite; }
.mu-tecla.mu-guia::after { content: "👇"; position: absolute; top: -30px; font-size: 24px; animation: mu-mao-toca 1s ease-in-out infinite; }
.mu-tecla:focus-visible { outline: 4px solid #fde047; outline-offset: 2px; }
@keyframes mu-guia { 50% { transform: translateY(-4px); } }
.mu-teclado-travado .mu-tecla { cursor: default; }
.mu-teclado-travado .mu-tecla:active:not(.mu-brilha) { transform: none; background: linear-gradient(180deg, #fff 0%, #fff 55%, color-mix(in srgb, var(--cor) 35%, #fff) 100%); }
.mu-teclado .mu-tecla.mu-guia { margin-top: 0; }
.mu-teclado:has(.mu-guia) { padding-top: 34px; }

.mu-eco-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--branco); font-size: 20px; }
.mu-vidas { font-size: 22px; letter-spacing: 2px; }
.mu-partitura-caixa { display: flex; justify-content: center; }
.mu-partitura {
  display: flex; gap: 6px; padding: 10px 12px; border-radius: 22px; overflow-x: auto; max-width: 100%;
  background: repeating-linear-gradient(180deg, #fff 0 13px, #ddd6fe 13px 15px); box-shadow: var(--sombra);
}
.mu-nota { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; transition: transform .15s; }
.mu-nota-forma { width: 44px; height: 52px; display: grid; place-items: center; }
.mu-nota-forma svg { width: 100%; height: 100%; }
.mu-nota-pergunta { display: none; width: 40px; height: 40px; margin: 6px 0; border-radius: 50%; place-items: center; background: #ede9fe; color: var(--roxo-escuro); font-size: 24px; font-weight: 900; border: 3px dashed #a78bfa; }
.mu-nota-escondida .mu-nota-forma { display: none; }
.mu-nota-escondida .mu-nota-pergunta { display: grid; }
.mu-nota small { font-size: 15px; font-weight: 800; white-space: nowrap; }
.mu-nota-atual { transform: translateY(-4px) scale(1.12); }
.mu-nota-atual .mu-nota-forma, .mu-nota-atual .mu-nota-pergunta { filter: drop-shadow(0 0 6px #f59e0b); }
.mu-nota-atual small { color: #c2410c; }
.mu-nota-certa { opacity: .55; }
.mu-nota-certa::after { content: "✓"; color: #16a34a; font-weight: 900; font-size: 16px; line-height: 1; }
.mu-nota-errada .mu-nota-forma { animation: treme .1s 4; }
.mu-nota-treme { animation: treme .1s 4; }
.mu-nota.mu-festa { opacity: 1; animation: mu-festa .5s ease-in-out 2; }
.mu-titulo-musica { margin: 0; text-align: center; color: var(--branco); font-size: 24px; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.mu-partitura-musica .mu-nota { width: 54px; }
.mu-letra { position: relative; max-height: 11.5em; overflow-y: auto; padding: 12px 16px; border-radius: 22px; background: rgba(255, 255, 255, .92); text-align: center; scroll-behavior: smooth; }
.mu-letra p { margin: 2px 0; font-size: 19px; font-weight: 700; line-height: 1.5; }
.mu-palavra { display: inline-block; white-space: nowrap; margin: 0 2px; }
.mu-silaba { display: inline-block; padding: 0 1px; border-bottom: 4px solid var(--cor); border-radius: 3px; }
.mu-letra .mu-silaba.mu-cantando { background: var(--cor); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); transform: scale(1.15); }
.mu-final { margin: 0; padding: 14px 20px; border-radius: 22px; background: var(--branco); font-size: 24px; font-weight: 900; box-shadow: var(--sombra); }
.mu-instrumentos { justify-content: center; }
.mu-ceu { position: relative; height: 90px; border-radius: 22px; background: linear-gradient(180deg, rgba(30, 27, 75, .5), rgba(30, 27, 75, .15)); overflow: hidden; }
.mu-sobe { position: absolute; bottom: 0; width: 44px; margin-left: -22px; animation: mu-sobe 1.6s ease-out forwards; pointer-events: none; }
.mu-sobe svg { width: 100%; display: block; }
@keyframes mu-sobe { from { transform: translateY(20px) scale(.6); opacity: 1; } to { transform: translateY(-80px) scale(1.2) rotate(20deg); opacity: 0; } }
.mu-livre-conta { margin: 0; text-align: center; color: var(--branco); font-size: 18px; font-weight: 800; }

/* ---------- Orquestra dos Bichos ---------- */
.mu-meio { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mu-cartoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 720px; }
.mu-cartoes-3, .mu-cartoes-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mu-cartao {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; min-width: 0;
  border-radius: 24px; background: var(--branco); box-shadow: var(--sombra); border: 4px solid transparent; transition: transform .15s;
}
.mu-cartao b { font-size: 19px; }
.mu-cartao:disabled { opacity: 1; }
.mu-cartao:not(:disabled):active { transform: scale(.97); }
.mu-cartao:focus-visible { outline: 4px solid #fde047; outline-offset: 2px; }
.mu-cartao-num { position: absolute; left: 10px; top: 8px; font-size: 20px; font-weight: 900; color: var(--roxo-escuro); }
.mu-cartao-num:empty { display: none; }
.mu-cartao-arte { width: min(110px, 30vw); transform: scale(var(--escala, 1)); transition: transform .3s; }
.mu-cartao-arte svg { width: 100%; height: auto; display: block; }
.mu-cartao-onda { min-height: 60px; max-width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mu-onda { display: block; height: 60px; max-width: 100%; }
.mu-onda polyline { stroke-dasharray: 100; stroke-dashoffset: 0; }
.mu-tocando { border-color: #fde047; box-shadow: 0 0 0 6px rgba(253, 224, 71, .5), var(--sombra); transform: scale(1.04); }
.mu-tocando .mu-onda polyline { animation: mu-desenha var(--dur, .6s) linear; }
@keyframes mu-desenha { from { stroke-dashoffset: 100; } }
.mu-certo { border-color: #22c55e !important; background: #dcfce7; }
.mu-errado { border-color: #ef4444 !important; background: #fee2e2; animation: treme .12s 3; }
.mu-assinatura { opacity: .85; }
.mu-cortina {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(260px, 80vw); padding: 12px; border-radius: 26px;
  background: repeating-linear-gradient(90deg, #b91c1c 0 18px, #dc2626 18px 36px); box-shadow: var(--sombra); border: 4px solid transparent;
}
.mu-cortina-pano { width: 96px; height: 96px; display: grid; place-items: center; font-size: 60px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.mu-cortina-pano svg { width: 90%; }
.mu-cortina .mu-cartao-onda { background: rgba(255, 255, 255, .92); border-radius: 16px; width: 100%; }
.mu-vagas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 640px; }
.mu-vagas-4 { grid-template-columns: repeat(4, 1fr); }
.mu-vaga {
  min-height: 150px; padding: 6px; border-radius: 22px; border: 4px dashed rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .18);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
}
.mu-vaga-num { font-size: 18px; font-weight: 900; color: var(--branco); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.mu-vaga:has(.mu-cartao) .mu-vaga-num { font-size: 14px; }
.mu-vaga.mu-certo { border-style: solid; background: rgba(220, 252, 231, .6); }
.mu-vaga.mu-errado { border-style: solid; background: rgba(254, 226, 226, .6); }
.mu-camarim { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 80px; padding: 8px; border-radius: 22px; background: rgba(0, 0, 0, .12); }
.mu-camarim-titulo { margin: 0; text-align: center; color: var(--branco); font-size: 18px; font-weight: 800; }
.mu-cartao-mini { width: 96px; padding: 6px 4px; gap: 0; touch-action: none; }
.mu-cartao-mini .mu-cartao-arte { width: 70px; }
.mu-cartao-mini b { font-size: 15px; }
.mu-vaga .mu-cartao-mini { width: 100%; max-width: 110px; }
.mu-escrito { font-size: 12px; font-weight: 900; color: #c2410c; letter-spacing: .5px; }
.mu-arrastando { opacity: .35; }
.mu-fantasma { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
.mu-pula { animation: mu-pula .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mu-pula { 40% { transform: translateY(-14px) scale(1.08); } }
.mu-pede { list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; border-radius: 20px; background: var(--branco); box-shadow: var(--sombra); }
.mu-pede li { font-size: 17px; font-weight: 800; opacity: .75; }
.mu-pede li.mu-ok { opacity: 1; color: #15803d; }
.mu-palco {
  position: relative; padding: 34px 10px 18px; border-radius: 26px 26px 14px 14px;
  background: linear-gradient(180deg, #1e1b4b 0%, #4c1d95 70%), #1e1b4b; box-shadow: var(--sombra); overflow: hidden;
}
.mu-palco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, #92400e 0 30px, #b45309 30px 60px); }
.mu-palco-luzes { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: radial-gradient(circle at 10% 0, #fde047 0 8px, transparent 9px), radial-gradient(circle at 37% 0, #f472b6 0 8px, transparent 9px), radial-gradient(circle at 63% 0, #22d3ee 0 8px, transparent 9px), radial-gradient(circle at 90% 0, #a3e635 0 8px, transparent 9px); }
.mu-vagas-palco { grid-template-columns: repeat(4, 1fr); max-width: none; position: relative; z-index: 1; }
.mu-vaga-palco { min-height: 132px; border-color: rgba(253, 224, 71, .7); }

/* O apito (deslizar para cima e para baixo). */
.mu-apito { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.mu-apito-trilho {
  position: relative; width: 96px; height: min(52vh, 340px); border-radius: 48px; flex: none; touch-action: none; cursor: grab;
  background: linear-gradient(180deg, #38bdf8 0%, #e0e7ff 50%, #475569 100%); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), var(--sombra);
}
.mu-apito-zona { position: absolute; left: 6px; right: 6px; height: 20%; border-radius: 40px; border: 3px dashed rgba(255, 255, 255, .8); pointer-events: none; }
.mu-apito-zona-alta { top: 0; }
.mu-apito-zona-baixa { bottom: 0; }
.mu-apito-bola { position: absolute; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: #fde047; border: 4px solid var(--tinta); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); pointer-events: none; transition: bottom .05s; }
.mu-na-zona .mu-apito-bola { background: #4ade80; animation: mu-pulsa .4s ease-in-out infinite; }
.mu-apito-topo, .mu-apito-baixo { position: absolute; left: 100%; width: 60px; margin-left: 8px; pointer-events: none; }
.mu-apito-topo { top: 0; }
.mu-apito-baixo { bottom: 0; }
.mu-apito-onda { min-height: 64px; min-width: 120px; padding: 4px 8px; border-radius: 18px; background: rgba(255, 255, 255, .9); display: flex; align-items: center; justify-content: center; overflow: hidden; max-width: 50%; }
.mu-apito:has(.mu-apito-topo) .mu-apito-onda { margin-left: 70px; }

/* Segurar: som longo e curto. */
.mu-segurar-caixa { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.mu-segurar { width: min(180px, 46vw); padding: 10px; border-radius: 50%; background: radial-gradient(circle, #fff, #e0e7ff); box-shadow: var(--sombra); touch-action: none; }
.mu-segurar svg { pointer-events: none; }
.mu-segurar.mu-segurando { box-shadow: 0 0 0 10px rgba(253, 224, 71, .6), var(--sombra); animation: mu-treme-leve .12s infinite; }
.mu-segurar:focus-visible { outline: 5px solid #fde047; outline-offset: 3px; }
@keyframes mu-treme-leve { 50% { transform: scale(1.03); } }
.mu-medidor { position: relative; width: min(420px, 90%); height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .35); overflow: visible; }
.mu-medidor i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #fde047, #f472b6); }
.mu-medidor-marca { position: absolute; top: -24px; transform: translateX(-50%); font-size: 13px; font-weight: 900; color: var(--branco); }
.mu-medidor-marca::after { content: ""; position: absolute; left: 50%; top: 20px; width: 3px; height: 30px; background: #fff; }

/* ---------- Batucada da Turma ---------- */
.mu-grade-caixa { position: relative; overflow-x: auto; border-radius: 22px; background: var(--branco); box-shadow: var(--sombra); padding: 8px; }
.mu-grade { display: grid; grid-template-columns: minmax(62px, 92px) repeat(var(--passos), minmax(14px, 1fr)); gap: 4px 3px; align-items: center; }
.mu-grade-rotulo { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: 12px; border-left: 6px solid var(--cor, transparent); min-width: 0; }
.mu-grade-rotulo small { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-grade-icone { width: 30px; flex: none; }
.mu-grade-icone svg { width: 100%; display: block; }
.mu-grade-tempo { text-align: center; font-size: 11px; font-weight: 800; opacity: .45; }
.mu-grade-forte { opacity: 1; color: var(--roxo-escuro); }
.mu-celula { height: 30px; border-radius: 8px; background: #f1f5f9; border: 2px solid #e2e8f0; transition: background .1s; }
.mu-celula-forte { border-left-width: 4px; border-left-color: #a5b4fc; }
.mu-celula-on { background: var(--cor); border-color: rgba(0, 0, 0, .2); }
.mu-celula.mu-cursor { box-shadow: 0 0 0 3px #fde047; transform: scaleY(1.1); }
.mu-celula.mu-batida { animation: mu-bate-celula .3s ease-out; }
.mu-celula.mu-linha-vez { outline: 2px solid #fde047; }
.mu-celula.mu-acertou { background: #22c55e; border-color: #15803d; box-shadow: 0 0 10px #22c55e; }
.mu-celula.mu-perdeu { box-shadow: inset 0 0 0 3px #ef4444; }
.mu-celula.mu-sobrou { background: #fed7aa; border-color: #f97316; }
@keyframes mu-bate-celula { from { filter: brightness(1.8); transform: scale(1.25); } }
.mu-contagem-grande { position: absolute; inset: 0; display: none; place-items: center; font-size: 76px; font-weight: 900; color: var(--roxo-escuro); background: rgba(255, 255, 255, .8); border-radius: 22px; pointer-events: none; }
.mu-contagem-grande.mu-ve { display: grid; animation: pula .3s cubic-bezier(.2, 1.6, .4, 1); }
.mu-pads { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; touch-action: none; }
.mu-pad {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 26px; min-width: 0;
  background: var(--cor); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); touch-action: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.mu-pad b { font-size: 18px; }
.mu-pad small { font-size: 14px; font-weight: 800; }
.mu-pad-icone { width: 60px; background: rgba(255, 255, 255, .9); border-radius: 50%; padding: 6px; }
.mu-pad-icone svg { width: 100%; display: block; }
.mu-pad-vez { box-shadow: 0 0 0 5px #fde047, 0 6px 0 rgba(0, 0, 0, .25); transform: scale(1.04); }
.mu-pad-fora { opacity: .4; filter: saturate(.5); }
.mu-pad-bate { animation: mu-pad-bate .2s ease-out; }
.mu-pad-erro { box-shadow: 0 0 0 5px #f97316, 0 6px 0 rgba(0, 0, 0, .25); }
@keyframes mu-pad-bate { 50% { transform: translateY(5px) scale(.96); filter: brightness(1.3); } }
.mu-pad-palmas { align-self: center; width: min(260px, 80vw); padding: 16px; }
.mu-pad-palmas .mu-pad-icone { width: 90px; }
.mu-eco { display: flex; align-items: center; gap: 12px; }
.mu-eco .mu-grade-caixa { flex: 1; }
.mu-eco-maos { width: 96px; flex: none; }
.mu-eco-maos.mu-bate { animation: mu-pula .25s ease-out; }
.mu-eco-linha { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.mu-eco-linha .mu-celula { height: 46px; }

/* ---------- celular em pé e TV ---------- */
@media (max-width: 420px) {
  .mu-fase-bola { width: 58px; height: 58px; font-size: 28px; }
  .mu-fase-show .mu-fase-bola { width: 66px; height: 66px; }
  .mu-ponto { width: 26px; height: 26px; }
  .mu-num { font-size: 38px; }
  .mu-inst { width: clamp(118px, 42vw, 180px); }
  .mu-vaga { min-height: 120px; }
  .mu-vaga-palco { min-height: 110px; }
  .mu-cartao-mini { width: 84px; }
  .mu-cartao-mini .mu-cartao-arte { width: 58px; }
  .mu-nota { width: 42px; }
  .mu-nota-forma { width: 38px; height: 46px; }
  .mu-eco-maos { width: 64px; }
  .mu-legenda-item { width: 104px; }
}
@media (min-width: 900px) {
  .mu-tecla { height: clamp(140px, 22vh, 200px); }
  .mu-inst { width: clamp(150px, 24vh, 220px); }
}
/* TV deitada (larga e baixa): o mapa e as peças grandes ficam mais compactos para caber sem rolar. */
@media (min-width: 700px) and (max-height: 800px) {
  .mu-mapa-topo .mu-apresenta { width: 84px; }
  .mu-caminho { gap: 6px 10px; padding: 10px 8px; }
  .mu-mapa-botoes { flex-direction: row; justify-content: center; }
  .mu-pedido { padding: 10px; gap: 6px; }
  .mu-contador { height: 60px; min-width: 60px; font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-banda-bicho, .mu-fase-agora .mu-fase-bola, .mu-mao { animation: none !important; }
}