/* ==========================================================================
   AMANA TAIPU • Trilha sonora de fundo — botão flutuante

   POSIÇÃO. O widget da Amana já mora no canto inferior DIREITO
   (`.chat` = right:16px, bolha de 64px). Este botão mora no canto inferior
   ESQUERDO, ancorado na borda oposta: dois elementos presos em bordas
   contrárias só se encontram se a tela for menor que a soma deles, e
   16+44+64+16 = 140px — nenhum telefone chega perto disso.
   `teste/trilha.test.js` faz essa conta LENDO os dois CSS, para que mudar
   qualquer um dos dois valores fique vermelho em vez de aparecer em 375px.

   ALTURA. O painel do chat abre com `bottom: 84px`; o topo deste botão fica
   em 16+44 = 60px. A folga também é conferida no teste.

   z-index 998: um a menos que o chat (999) e abaixo dos modais (1000) e do
   percurso em tela cheia (1200) — a trilha nunca fica por cima de conteúdo.
   ========================================================================== */

.trilha {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(51, 54, 9, 0.25);
  border-radius: 50%;
  background: var(--cream, #f8eee4);
  color: var(--olive, #333609);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(51, 54, 9, 0.18);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.trilha:hover { transform: scale(1.06); }
.trilha:focus-visible {
  outline: 2px solid var(--olive, #333609);
  outline-offset: 3px;
}

/* TOCANDO x PAUSADO em DOIS sinais, não um: o ícone troca (alto-falante com
   ondas / alto-falante cortado) e o botão inverte (cheio de verde). Só a
   animação de um equalizador seria ambígua para quem não a vê se mexer. */
.trilha.is-tocando {
  background: var(--olive, #333609);
  color: var(--sand, #e9daca);
  border-color: var(--olive, #333609);
}

.trilha__ico { width: 20px; height: 20px; }
.trilha__ico--som { display: none; }
.trilha.is-tocando .trilha__ico--som { display: block; }
.trilha.is-tocando .trilha__ico--mudo { display: none; }

@media (prefers-reduced-motion: reduce) {
  .trilha { transition: none; }
  .trilha:hover { transform: none; }
}

/* O palco do player. NÃO é `display:none` nem `visibility:hidden`: navegador
   recusa tocar mídia de player realmente oculto. Fica com 2px e opacidade
   quase zero, fora do caminho do clique — o mesmo arranjo que já roda em
   produção no site da Majestade. */
.trilha__palco {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
  z-index: 0;
}
.trilha__palco iframe { width: 100%; height: 100%; border: 0; }