/* HittLive · layout da tela do treino (ajuste do André de 02/11, ref. docs/ref-tela-treino.png):
   câmera na tela toda + esqueleto (esqueleto.js), contador grande "1 /10" embaixo à esquerda, balão de comando
   sobre o corpo e o cartão "Exemplo do movimento" no canto superior direito (cartao-boneca.js).
   Cores da identidade: rosé #FCDDD5/#F0C2B4, papel #FFF8F0, vinho #6B1D2E, goiaba #DE5F6C só em detalhe. */

:root {
  --tt-rose: #FCDDD5;
  --tt-rose-2: #F0C2B4;
  --tt-papel: #FFF8F0;
  --tt-vinho: #6B1D2E;
  --tt-goiaba: #DE5F6C;
  --tt-tinta: #2B1A22;
  --tt-sombra: 0 6px 22px rgba(43, 26, 34, 0.28);
}

/* a câmera aparece inteira: as faixas sobre ela ficam leves (só o necessário para ler) */
.tela--sobre[data-for="treino"] .faixa--topo { background: linear-gradient(to bottom, rgba(43, 26, 34, 0.55), rgba(43, 26, 34, 0)); }
.tela--sobre[data-for="treino"] .faixa--base { background: linear-gradient(to top, rgba(43, 26, 34, 0.62) 30%, rgba(43, 26, 34, 0)); padding-top: 40px; }

/* ---------- contador grande "1 /10" ---------- */
.tela--sobre[data-for="treino"] .placar { align-items: flex-end; }
.tela--sobre[data-for="treino"] .placar__n {
  align-items: baseline; padding: 10px 18px 6px 16px; border-radius: 26px;
  background: rgba(43, 26, 34, 0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--tt-papel); font: 700 6.25rem/0.86 var(--em-titulo);
  text-shadow: 0 2px 14px rgba(43, 26, 34, 0.55);
}
.tela--sobre[data-for="treino"] .placar__meta { font: 700 2.125rem/1 var(--em-titulo); color: var(--tt-rose-2); margin-left: 0.22em; }
.tela--sobre[data-for="treino"] .placar__n.pula #reps { animation-name: pula-tt; }
@keyframes pula-tt { 0% { transform: scale(1); } 30% { transform: scale(1.25); color: var(--tt-rose); } 100% { transform: scale(1); } }
.tela--sobre[data-for="treino"] .trilha li[data-r="bom"] { background: var(--tt-rose-2); }

/* a dica de correção (Boa, Desça mais, Joelho para fora) sobe para baixo da barra, à esquerda do cartão */
.tela--sobre[data-for="treino"] .dica {
  top: calc(78px + env(safe-area-inset-top, 0px)); bottom: auto; left: 16px; right: auto; margin: 0;
  max-width: calc(100% - 158px); padding: 9px 16px; font: 700 1.0625rem/1.2 var(--em-texto);
  background: rgba(43, 26, 34, 0.62); color: var(--tt-papel); text-align: left;
}
.tela--sobre[data-for="treino"] .dica[data-tom="bom"] { background: var(--tt-papel); color: var(--tt-vinho); }
.tela--sobre[data-for="treino"] .dica[data-tom="ajuste"] { background: var(--tt-rose); color: var(--tt-vinho); }

/* ---------- balão de comando sobre o corpo ---------- */
.balao {
  position: absolute; left: 0; top: 0; z-index: 2; margin: 0; white-space: nowrap; will-change: transform;
  padding: 10px 18px 11px; border-radius: 20px; border: 2px solid var(--tt-vinho);
  background: var(--tt-papel); color: var(--tt-vinho); font: 700 1.5rem/1 var(--em-titulo);
  box-shadow: var(--tt-sombra);
}
.balao[data-comando="agora_suba"] { background: var(--tt-vinho); color: var(--tt-papel); border-color: var(--tt-papel); }
/* rabicho apontando para a cabeça */
.balao::before { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: inherit; border: inherit; border-width: 0 0 2px 2px; }
.balao[data-lado="dir"]::before { left: -8px; transform: rotate(45deg); }
.balao[data-lado="esq"]::before { right: -8px; transform: rotate(-135deg); }
.balao.troca { animation: balao-troca 0.28s var(--em-ease); }
@keyframes balao-troca { from { scale: 0.86; opacity: 0.5; } to { scale: 1; opacity: 1; } }

/* ---------- cartão "Exemplo do movimento" ---------- */
.cartao-host { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 3; pointer-events: none; display: none; }
#app[data-tela="preparar"] .cartao-host,
#app[data-tela="contagem"] .cartao-host,
#app[data-tela="treino"] .cartao-host { display: block; }
#app[data-tela="contagem"] .cartao-host { opacity: 0.55; }
.cartao-boneca { width: 112px; padding: 6px 6px 7px; border-radius: 18px; background: var(--tt-papel); border: 1.5px solid var(--tt-rose-2); box-shadow: var(--tt-sombra); }
.cartao-boneca__palco { position: relative; aspect-ratio: 3 / 4; border-radius: 13px; overflow: hidden; background: var(--tt-rose); }
.cartao-boneca__reserva, .cartao-boneca__3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.cartao-boneca__reserva { object-fit: contain; display: block; }
.cartao-boneca__legenda { margin-top: 6px; text-align: center; font: 700 0.6875rem/1.15 var(--em-texto); letter-spacing: 0.01em; color: var(--tt-vinho); }

/* sem câmera: o cartão fica no topo da tela do toque, maior (é o único exemplo que ela tem) */
.tela--semcamera { position: relative; }
.sc-cartao-host:empty { display: none; }
.sc-cartao-host { position: absolute; top: 18px; right: 20px; }
.sc-cartao-host .cartao-boneca { width: 104px; }
.tela--semcamera .titulo-serifa, .tela--semcamera #sc-instrucao { margin-right: 116px; text-align: left; }
.tela--sobre[data-for="treino"] .placar__n, .sc-reps { font-variant-numeric: tabular-nums; }
.sc-meta { margin-left: 0.18em; }

@media (min-width: 700px) {
  .cartao-host { right: calc(50% - 260px + 14px); }
}
@media (max-height: 640px) {
  .tela--sobre[data-for="treino"] .placar__n { font-size: 4.75rem; }
  .cartao-boneca { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .balao.troca { animation: none; }
}