/* Arcade da Matemática (o Bit, o robozinho-fliperama): só o que os jogos do tema precisam além do estilo.css. Tudo começa com ma-. */

/* O fundo de fliperama: céu roxo com a grade neon no chão. */
.tela.tela-matematica, .tela[class*=" tela-matematica-"] {
  background:
    linear-gradient(transparent 0 calc(100% - 140px), rgba(244, 114, 182, .16) calc(100% - 140px)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(244, 114, 182, .2) 58px 60px) bottom / 100% 140px no-repeat,
    radial-gradient(circle at 18% 8%, #6d28d9 0, transparent 42%),
    radial-gradient(circle at 88% 60%, #be185d 0, transparent 46%),
    #1e1b4b;
  background-attachment: fixed;
}
/* Na TV e no computador, o palco dos jogos aproveita mais a largura. */
.tela[class*=" tela-matematica-"] .corpo { max-width: 1120px; padding-bottom: 10px; }
.tela[class*=" tela-matematica-"] .abertura, .tela[class*=" tela-matematica-"] .ma-mapa, .tela[class*=" tela-matematica-"] .fim {
  width: 100%; max-width: 880px; align-self: center;
}

/* ---------- desenhos ---------- */
.ma-svg { display: block; width: 100%; height: auto; }
.ma-bit-luz { animation: ma-pisca 1.2s steps(2) infinite; }
.ma-bit-olhos { animation: ma-piscar-olho 4s infinite; transform-origin: 60px 62px; }
.abertura .ma-svg { width: 140px; margin: 0 auto; }

/* ---------- menu ---------- */
.ma-apresenta-arte { position: relative; width: 132px; height: 128px; flex: none; }
.ma-apresenta-bit { position: absolute; left: 0; top: 0; width: 86px; animation: ma-flutua 2.6s ease-in-out infinite; }
.ma-apresenta-bagunco { position: absolute; right: -6px; bottom: 0; width: 62px; animation: ma-treme-leve 1.8s ease-in-out infinite; }
.ma-brincadeira-emoji { background: linear-gradient(135deg, #ede9fe, #fce7f3); }
.ma-estrelas-menu {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; font-weight: 700;
}
.ma-estrelas-menu strong { width: 100%; font-size: 17px; }

/* ---------- mapa de fases ---------- */
.ma-mapa { display: flex; flex-direction: column; gap: 12px; }
.ma-historia {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 22px;
  background: #fff; box-shadow: var(--sombra);
}
.ma-historia-arte { width: 92px; flex: none; animation: ma-flutua 2.8s ease-in-out infinite; }
.ma-historia-texto { min-width: 0; }
.ma-historia-texto small { display: block; font-size: 14px; font-weight: 900; color: #7c3aed; text-transform: uppercase; letter-spacing: .5px; }
.ma-historia-texto p { margin: 2px 0 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.ma-mapa-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ma-selo {
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 17px; font-weight: 800; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.ma-mapa-nota { margin: 0; text-align: center; color: #e9d5ff; font-size: 16px; font-weight: 700; }
.ma-trilha {
  position: relative; width: 100%; min-height: 280px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle at 50% 120%, rgba(244, 114, 182, .35), transparent 60%), rgba(15, 10, 46, .55);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12);
}
.ma-trilha-corrida { background: linear-gradient(180deg, #4338ca, #c026d3 70%, #fb923c); }
.ma-trilha-fatia { background: radial-gradient(circle at 30% 20%, #fbcfe8 0, transparent 40%), linear-gradient(160deg, #831843, #4c0519); }
.ma-trilha-estilingue { background: linear-gradient(180deg, #38bdf8, #a5f3fc 60%, #86efac 60.5%, #22c55e); }
.ma-trilha-bolhas { background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(180deg, #0891b2, #1e3a8a); }
.ma-trilha-torre { background: linear-gradient(180deg, #fde68a, #fdba74 70%, #a16207 70.5%, #78350f); }
.ma-caminho { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ma-caminho path { fill: none; stroke-linecap: round; }
.ma-caminho-fundo { stroke: rgba(15, 10, 46, .35); stroke-width: 22; }
.ma-caminho-linha { stroke: #fff; stroke-width: 5; stroke-dasharray: 2 14; opacity: .9; }
.ma-no {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 112px; padding: 0; background: none;
}
.ma-no-bola {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #5b21b6; font-size: 30px; font-weight: 900;
  border: 5px solid #fde047; box-shadow: 0 6px 0 rgba(15, 10, 46, .45), 0 0 0 4px rgba(255, 255, 255, .25);
  transition: transform .12s;
}
.ma-no:not(:disabled):active .ma-no-bola { transform: scale(.92); }
.ma-no-feita .ma-no-bola { background: #fde047; border-color: #fff; }
.ma-no-atual .ma-no-bola { animation: ma-pulsa 1.1s ease-in-out infinite; border-color: #22d3ee; box-shadow: 0 6px 0 rgba(15, 10, 46, .45), 0 0 0 7px rgba(34, 211, 238, .45); }
.ma-no-chefe .ma-no-bola { width: 82px; height: 82px; background: #1e1b4b; border-color: #a3e635; }
.ma-no-chefe-arte { width: 64px; display: block; }
.ma-no-trancada .ma-no-bola { background: #cbd5e1; border-color: #94a3b8; font-size: 26px; filter: grayscale(.4); }
.ma-no-chefe.ma-no-trancada .ma-no-bola { background: #334155; filter: grayscale(.75) brightness(.85); }
.ma-no-trancada { opacity: .85; }
.ma-no:disabled { opacity: 1; }
.ma-no-estrelas { display: flex; gap: 1px; font-size: 17px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.ma-no-estrelas i { font-style: normal; color: rgba(255, 255, 255, .4); }
.ma-no-estrelas i.ma-cheia { color: #fde047; }
.ma-no-nome {
  max-width: 112px; padding: 1px 8px; border-radius: 999px; background: rgba(15, 10, 46, .66); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center;
}
.ma-no:focus-visible { outline: none; }
.ma-no:focus-visible .ma-no-bola { outline: 5px solid #fff; outline-offset: 4px; }

/* ---------- a janela da vez ---------- */
.ma-janela-vez { border: 6px solid var(--cor, #7c3aed); }
.ma-janela-vez .janela-arte { width: 150px; }
.ma-janela-vez .janela-nota { color: var(--tinta); }
.ma-janela-vez p:not(.janela-nota) { font-size: 18px !important; }
.ma-gestos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.ma-gesto {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: #ede9fe; color: #4c1d95; font-size: 16px; font-weight: 800;
}
.ma-mao { display: inline-block; font-size: 28px; line-height: 1; }
.ma-gesto-tocar .ma-mao { animation: ma-mao-toca 1s ease-in-out infinite; }
.ma-gesto-deslizar .ma-mao, .ma-gesto-cortar .ma-mao { animation: ma-mao-desliza 1.1s ease-in-out infinite; }
.ma-gesto-arrastar .ma-mao, .ma-gesto-mirar .ma-mao { animation: ma-mao-arrasta 1.6s ease-in-out infinite; }
.ma-gesto-puxar .ma-mao { animation: ma-mao-puxa 1.6s ease-in-out infinite; }
.ma-gesto-girar .ma-mao { animation: ma-mao-gira 1.6s linear infinite; }
.ma-gesto-segurar .ma-mao { animation: ma-mao-segura 1.6s ease-in-out infinite; }
.ma-gesto-controle .ma-mao { animation: ma-mao-toca 1.4s ease-in-out infinite; }

/* ---------- o jogo de ação ---------- */
.ma-jogo {
  display: flex; flex-direction: column; gap: 8px; margin: -4px -6px 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ma-hud {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 6px 6px 10px;
  border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: var(--sombra);
  border-left: 10px solid var(--cor); font-size: 18px; font-weight: 800; color: var(--tinta);
}
.ma-hud .chip { flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 12px; line-height: 1.2; }
.ma-item { white-space: nowrap; }
.ma-turbo { padding: 0 10px; border-radius: 999px; background: linear-gradient(90deg, #f97316, #facc15); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); animation: ma-pulsa .5s ease-in-out infinite; }
.ma-turbo[hidden] { display: none; }
.ma-pausar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: #ede9fe; color: #4c1d95;
  font-size: 20px; display: grid; place-items: center;
}
.ma-pausar:active:not(:disabled) { transform: scale(.92); }

/* O painel da conta: altura fixa, para o palco não pular quando o texto muda. */
.ma-painel {
  position: relative; height: 108px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; background: #fff; box-shadow: var(--sombra); border: 4px solid transparent;
  color: var(--tinta); text-align: center; overflow: hidden; transition: background .2s, border-color .2s;
}
.ma-painel.ma-surge > * { animation: pula .3s cubic-bezier(.2, 1.6, .4, 1); }
.ma-painel.ma-certo { background: #dcfce7; border-color: #22c55e; }
.ma-painel.ma-errado { background: #ffedd5; border-color: #f97316; }
.ma-painel.ma-dourada { border-color: #fbbf24; background: #fffbeb; }
.ma-painel-dica { font-size: 18px; font-weight: 800; line-height: 1.25; }
.ma-painel-fim { font-size: clamp(24px, 6vw, 34px); font-weight: 900; }
.ma-conta { font-size: clamp(28px, 8.5vw, 46px); font-weight: 900; line-height: 1.05; white-space: nowrap; }
.ma-conta small { font-size: .5em; }
.ma-conta sup { font-size: .55em; }
.ma-conta-menor { font-size: clamp(22px, 6.5vw, 36px); }
.ma-falta {
  display: inline-block; min-width: 1.2em; padding: 0 .12em; border-radius: 12px;
  border: 3px dashed #c4b5fd; color: #7c3aed; background: #f5f3ff;
}
.ma-chips { display: flex; gap: 8px; width: 100%; justify-content: space-between; }
.ma-chips b {
  flex: 1; min-width: 0; padding: 2px 6px; border-radius: 12px; background: #fff; border: 4px solid var(--c);
  font-size: clamp(18px, 5.4vw, 28px); font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 0 var(--c);
}
.ma-retorno { font-size: clamp(15px, 4.2vw, 21px); font-weight: 800; line-height: 1.3; }
.ma-retorno sup { font-size: .7em; }
.ma-retorno em { font-style: normal; color: #db2777; }
.ma-icone { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; color: #fff; font-weight: 900; vertical-align: middle; }
.ma-certo .ma-icone { background: #22c55e; }
.ma-errado .ma-icone { background: #f97316; }
.ma-regra { font-size: clamp(20px, 5.6vw, 34px); font-weight: 900; line-height: 1.1; }
.ma-regra .ma-conta-menor { font-size: 1em; white-space: nowrap; }
.ma-regra em { font-style: normal; color: #db2777; }
.ma-sub { font-size: clamp(14px, 3.8vw, 18px); font-weight: 800; opacity: .8; }
.ma-selo-dourado {
  position: absolute; top: 3px; right: 8px; padding: 0 8px; border-radius: 999px; background: #fbbf24; color: #78350f;
  font-size: 13px; font-weight: 900; line-height: 1.6;
}
.ma-opcoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ma-opcoes .botao { padding: 8px 18px; font-size: 20px; }
.ma-opcoes .botao.ma-escolhida { background: #7c3aed; color: #fff; box-shadow: 0 5px 0 #4c1d95; }

/* O palco: o canvas ocupa tudo; a altura vem do motor (o resto da tela). Só aqui o toque não rola a página. */
.ma-palco {
  position: relative; width: 100%; min-height: 260px; flex: none; border-radius: 22px; overflow: hidden;
  background: #0f0a2e; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), var(--sombra); touch-action: none;
}
.ma-tela { display: block; width: 100%; height: 100%; touch-action: none; }
.ma-pausa {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(15, 10, 46, .74); color: #fff; animation: aparece .2s ease-out;
}
.ma-pausa[hidden], .ma-dica-gesto[hidden] { display: none; }
.ma-pausa strong { font-size: 34px; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.ma-dica-gesto {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); pointer-events: none;
  width: max-content; max-width: 88%; animation: ma-sobe-dica .4s cubic-bezier(.2, 1.6, .4, 1);
}
.ma-dica-gesto .ma-gesto { font-size: 18px; line-height: 1.2; border-radius: 22px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); background: rgba(255, 255, 255, .95); }
.ma-dica-gesto .ma-mao { font-size: 34px; }

/* ---------- Torre do Tempo e do Dinheiro (sem canvas: tudo é botão) ---------- */
.ma-loja { position: relative; display: flex; flex-direction: column; gap: 8px; margin: -4px -6px 0; color: var(--tinta); }
.ma-loja-corpo { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.ma-cena {
  position: relative; height: 150px; border-radius: 22px; overflow: hidden; background: #bae6fd;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), var(--sombra);
}
.ma-torre-svg { display: block; width: 100%; height: 100%; }
.ma-peca-nova { animation: ma-peca-cai .55s cubic-bezier(.3, 1.5, .5, 1); }
.ma-torre-bagunco { transition: transform .6s ease-in; }
.ma-torre-bagunco.ma-caiu { opacity: 0; }
.ma-cena-chefe {
  position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; align-items: center; gap: 8px;
  padding: 3px 10px; border-radius: 999px; background: rgba(15, 23, 42, .7); color: #fff; font-size: 14px;
}
.ma-tarefa {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: var(--sombra);
}
.ma-tarefa.ma-entra { animation: ma-sobe-tarefa .35s ease-out; }
.ma-tarefa.ma-treme { animation: treme .12s 3; }
.ma-pedido { display: flex; align-items: center; gap: 10px; }
.ma-pedido p { flex: 1; margin: 0; font-size: clamp(17px, 4.6vw, 22px); font-weight: 700; line-height: 1.3; }
.ma-pedido-emoji { flex: none; width: 52px; height: 52px; display: grid; place-items: center; font-size: 38px; border-radius: 16px; background: #fef3c7; }
.ma-pedido-emoji .ma-svg { width: 44px; }
.ma-etiqueta {
  flex: none; position: relative; padding: 6px 12px 6px 18px; border-radius: 8px 14px 14px 8px; background: #fde047; color: #713f12;
  font-size: clamp(18px, 5vw, 24px); font-weight: 900; white-space: nowrap; box-shadow: 0 3px 0 #ca8a04; transform: rotate(-3deg);
}
.ma-etiqueta::before { content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; }
.ma-cliente { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.ma-dinheiro-mini { width: 96px; display: block; }
.ma-dinheiro-mini svg { display: block; width: 100%; }
.ma-balcao {
  display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 8px 10px; border-radius: 18px;
  border: 3px dashed #c4b5fd; background: #f5f3ff; transition: background .15s, border-color .15s;
}
.ma-balcao.ma-sobre { background: #ede9fe; border-color: #7c3aed; border-style: solid; }
.ma-balcao.ma-recebe { animation: ma-recebe .25s ease-out; }
.ma-balcao-topo { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 800; }
.ma-balcao-topo b { font-size: 24px; color: #5b21b6; }
.ma-balcao-itens { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ma-balcao-vazio { font-size: 15px; font-weight: 700; opacity: .65; }
.ma-balcao.ma-com .ma-balcao-vazio { display: none; }
.ma-dado { width: 64px; padding: 0; background: none; }
.ma-dado svg, .ma-dinheiro svg, .ma-fantasma svg { display: block; width: 100%; height: auto; }
.ma-dado.ma-eh-moeda { width: 42px; }
.ma-rotulo { margin: 0; font-size: 16px; font-weight: 800; opacity: .75; }
.ma-carteira {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; align-items: center;
}
.ma-dinheiro {
  display: grid; place-items: center; min-height: 58px; padding: 4px; border-radius: 14px; background: #f8fafc;
  box-shadow: inset 0 0 0 2px #e2e8f0; touch-action: none; -webkit-user-select: none; user-select: none;
}
.ma-dinheiro.ma-eh-moeda svg { width: 62px; }
.ma-dinheiro:active { transform: scale(.94); }
.ma-dinheiro:focus-visible, .ma-dado:focus-visible { outline: 4px solid #22d3ee; outline-offset: 2px; }
.ma-fantasma { position: fixed; z-index: 80; width: 96px; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.ma-fantasma.ma-eh-moeda { width: 60px; }
.ma-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ma-relogio-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ma-relogio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ma-relogio svg { display: block; width: min(230px, 62vw); height: auto; }
.ma-relogio-mexe svg { touch-action: none; cursor: grab; }
.ma-relogio-mexe.ma-girando svg { cursor: grabbing; filter: drop-shadow(0 0 8px rgba(219, 39, 119, .5)); }
.ma-relogio-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ma-escolha-area { display: flex; justify-content: center; align-items: center; gap: 12px; }
.ma-escolha-area .ma-relogio svg { width: min(190px, 52vw); }
.ma-dois-relogios { display: flex; gap: 10px; }
.ma-dois-relogios > div { display: flex; flex-direction: column; align-items: center; font-weight: 800; }
.ma-dois-relogios .ma-relogio svg { width: min(140px, 38vw); }
.ma-digital {
  padding: 10px 18px; border-radius: 14px; background: #0f172a; color: #4ade80; font-size: 40px; font-weight: 900;
  font-family: "Courier New", monospace; letter-spacing: 2px; box-shadow: inset 0 0 0 3px #334155;
}
.ma-aviso-loja { min-height: 0; padding: 0; border-radius: 16px; font-size: clamp(16px, 4.2vw, 20px); font-weight: 800; line-height: 1.35; }
.ma-aviso-loja.ma-certo, .ma-aviso-loja.ma-errado { padding: 10px 12px; }
.ma-aviso-loja.ma-certo { background: #dcfce7; box-shadow: inset 0 0 0 3px #22c55e; }
.ma-aviso-loja.ma-errado { background: #ffedd5; box-shadow: inset 0 0 0 3px #f97316; }
.ma-fim-loja { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 22px; }
.ma-tempo { display: inline-flex; align-items: center; gap: 4px; }
.ma-tempo-barra { display: inline-block; width: 90px; height: 14px; border-radius: 999px; background: #e5e7eb; overflow: hidden; box-shadow: inset 0 0 0 2px #cbd5e1; }
.ma-tempo-barra i { display: block; height: 100%; width: 100%; background: #22c55e; transition: width .2s linear; }
.ma-tempo-barra i.ma-pouco { background: #ef4444; }
.ma-vida i { background: #a3e635; }
.ma-pausa-loja { position: fixed; z-index: 40; }

/* ---------- fim da fase ---------- */
.ma-fim-fase { margin: 0; font-size: 19px; font-weight: 800; color: #e9d5ff; }
.ma-fim-bloco {
  padding: 12px 16px; border-radius: 20px; background: #fff; color: var(--tinta); text-align: left; box-shadow: var(--sombra);
}
.ma-fim-bloco strong { font-size: 18px; }
.ma-fim-bloco ul { margin: 6px 0 0; padding-left: 22px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.ma-fim-bloco li + li { margin-top: 4px; }
.ma-lembrar { border-left: 10px solid #f97316; }
.ma-habilidades { border-left: 10px solid #22c55e; }

/* ---------- foco visível para o controle remoto da TV ---------- */
.tela[class*="tela-matematica"] .botao:focus-visible, .tela[class*="tela-matematica"] .brincadeira:focus-visible,
.ma-janela-vez .botao:focus-visible, .tela[class*="tela-matematica"] .nivel:focus-visible, .ma-opcoes .botao:focus-visible {
  outline: 5px solid #22d3ee; outline-offset: 3px;
}

@media (max-width: 420px) {
  .ma-hud { font-size: 16px; }
  .ma-painel { height: 104px; padding: 4px 8px; }
  .ma-historia-arte { width: 70px; }
  .ma-historia-texto p { font-size: 16px; }
  .ma-no { width: 100px; }
  .ma-no-nome { font-size: 12px; max-width: 100px; }
}
@media (min-width: 700px) {
  .ma-jogo, .ma-loja { margin: 0; }
  .ma-painel { height: 112px; }
}
/* Tela larga (tablet deitado, computador, TV): a torre à esquerda e o desafio à direita. */
@media (min-width: 760px) {
  .ma-loja-corpo { grid-template-columns: minmax(220px, 32%) 1fr; }
  .ma-cena { height: calc(100vh - 190px); min-height: 330px; max-height: 620px; position: sticky; top: 8px; }
  .ma-carteira { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
/* TV deitada e baixa (1280x720): o painel encolhe um pouco para sobrar palco. */
@media (min-width: 900px) and (max-height: 760px) {
  .ma-painel { height: 100px; }
  .ma-conta { font-size: 40px; }
}

@keyframes ma-flutua { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes ma-treme-leve { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg) translateY(-4px); } }
@keyframes ma-pisca { 50% { opacity: .35; } }
@keyframes ma-piscar-olho { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ma-pulsa { 50% { transform: scale(1.08); } }
@keyframes ma-sobe-dica { from { transform: translate(-50%, 20px); opacity: 0; } }
@keyframes ma-mao-toca { 0%, 100% { transform: translateY(-4px); } 45% { transform: translateY(3px) scale(.9); } }
@keyframes ma-mao-desliza { 0%, 100% { transform: translateX(-12px) rotate(-10deg); } 50% { transform: translateX(12px) rotate(10deg); } }
@keyframes ma-mao-arrasta { 0% { transform: translate(-8px, 4px) scale(.9); } 60% { transform: translate(10px, -6px) scale(.9); } 100% { transform: translate(-8px, 4px); } }
@keyframes ma-mao-puxa { 0% { transform: translate(6px, -4px); } 60% { transform: translate(-12px, 8px) scale(.9); } 70% { transform: translate(-12px, 8px); } 100% { transform: translate(6px, -4px); } }
@keyframes ma-mao-gira { to { transform: rotate(360deg); } }
@keyframes ma-peca-cai { from { transform: translateY(-70px); opacity: 0; } 60% { opacity: 1; } }
@keyframes ma-recebe { 50% { transform: scale(1.03); } }
@keyframes ma-sobe-tarefa { from { transform: translateY(14px); opacity: 0; } }
@keyframes ma-mao-segura { 0% { transform: translateY(-4px); } 25%, 85% { transform: translateY(3px) scale(.88); filter: drop-shadow(0 0 4px #f59e0b); } 100% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .ma-apresenta-bit, .ma-apresenta-bagunco, .ma-historia-arte, .ma-no-atual .ma-no-bola, .ma-mao, .ma-bit-luz, .ma-bit-olhos { animation: none; }
}