feat(rosto): atividades (momentos dele) e seis gestos novos

Atividades: a tela se divide, o rosto vai para a esquerda e encolhe, e
à direita um bonequinho do Carinha (silhueta na cor dos olhos) faz algo:
ler (vira a página), cantar (microfone e notas), jogar bola
(embaixadinha), videogame (TV com joguinho), pintar (cavalete que ganha
pinceladas) e malhar (halteres e suor). Os olhos grandes acompanham:
leem as linhas, seguem a bola, olham a TV. Camada própria atrás dos
olhos, vale para todos os rostos; em pé (retrato) a cena vai para baixo.

- Comando {tipo: "atividade", valor: nome|parar}; toque na tela, dormir
  e E-Stop encerram; o celular informa a atividade na telemetria.
- Modo vida escolhe pelo humor (feliz canta e joga bola, tranquilo lê
  e pinta, entediado joga videogame), nunca de madrugada, e não
  interrompe uma atividade em andamento.
- Gestos novos: rir, comemorar, tímido, confuso, bocejar e tonto; o
  humor e o modo vida também os usam.
- Painel: favoritos vão até 20 e o bravo volta junto com os novos;
  botões de atividade no Ao vivo, no Ctrl+K e tópico no guia.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/telas/AoVivo.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import {
-    Brain, Camera, Download, Eye, Footprints, Hand, History, Palette, PenLine, RefreshCw, Repeat, ScanFace, Settings2, Smile, Sparkles, Video,
+    Brain, Camera, Download, Eye, Footprints, Gamepad2, Hand, History, Palette, PenLine, RefreshCw, Repeat, ScanFace, Settings2, Smile, Sparkles, Video,
   } from '@lucide/svelte';
   import { onDestroy, onMount } from 'svelte';
   import { postar } from '../lib/api';
   import { salvarApp } from '../lib/ajustes.svelte';
   import { tentar } from '../lib/avisos.svelte';
-  import { FORMATOS_INFO, hex, nomeRosto, recarregarCelular, ROSTOS_INFO } from '../lib/comandos.svelte';
+  import { atividade, ATIVIDADES_INFO, FORMATOS_INFO, hex, nomeRosto, recarregarCelular, ROSTOS_INFO } from '../lib/comandos.svelte';
   import Celular from '../lib/componentes/Celular.svelte';
   import Gestos from '../lib/componentes/Gestos.svelte';
   import Grupo from '../lib/componentes/Grupo.svelte';
@@ -26,6 +26,8 @@
 
   // Palco: câmera grande e rosto no quadrinho do canto; tocar no quadrinho troca os dois.
   let rostoGrande = $state(false);
+  // Atividade que o celular está fazendo agora (vem na telemetria).
+  const atividadeAgora = $derived((estado.app?.online && (estado.app.estado?.atividade as string | null)) || null);
 
   onMount(() => {
     video = new VideoAoVivo(elVideo);
@@ -165,6 +167,23 @@ const pirAtivo = $derived(
       <Linha icone={Smile} cor="#ffcc00" rotulo="Favoritos">
         <Gestos />
       </Linha>
+      <Linha
+        icone={Gamepad2}
+        cor="#30b0c7"
+        rotulo="Atividades"
+        detalhe={atividadeAgora ? `Agora: ${ATIVIDADES_INFO[atividadeAgora]?.emoji ?? ''} ${ATIVIDADES_INFO[atividadeAgora]?.nome ?? atividadeAgora}` : 'Um bonequinho dele faz algo embaixo dos olhos'}
+      >
+        <div class="atividades">
+          {#each Object.entries(ATIVIDADES_INFO) as [id, a] (id)}
+            <button class="btn pequeno" class:ativo={atividadeAgora === id} onclick={() => atividade(id)}>
+              <span aria-hidden="true">{a.emoji}</span> {a.nome}
+            </button>
+          {/each}
+          {#if atividadeAgora}
+            <button class="btn pequeno" onclick={() => atividade('parar')}>⏹ Parar</button>
+          {/if}
+        </div>
+      </Linha>
       <Linha icone={Sparkles} cor="#ff2d55" rotulo="Todos os gestos e reações" href="#/reacoes" />
     </Grupo>
 
@@ -219,6 +238,15 @@ const pirAtivo = $derived(
     gap: var(--e-4);
     align-items: start;
   }
+  .atividades {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--e-2);
+  }
+  .atividades .btn.ativo {
+    border-color: var(--destaque);
+    background: var(--destaque-suave);
+  }
   /* ---------- palco: sempre visível */
   .palco {
     position: sticky;