/* Kit de peças · tocador-de-quadros.css
   A caixa tem o tamanho da imagem parada (width/height no <img> evitam o pulo de layout); o canvas cobre a caixa.
   Variáveis próprias (o site troca): --tocador-sombra, --tocador-rotulo-fundo, --tocador-rotulo-texto,
   --tocador-rotulo-ponto. */

.tocador {
  --tocador-sombra: var(--cor-sombra);
  --tocador-rotulo-fundo: var(--cor-superficie);
  --tocador-rotulo-texto: var(--cor-texto);
  --tocador-rotulo-ponto: var(--cor-destaque);
  position: relative;
  width: 100%;
  margin: 0;
}

.tocador__parado {
  display: block;
  width: 100%;
  height: auto;
}

.tocador__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Depois do primeiro quadro desenhado, a imagem parada some (continua ocupando o lugar) */
.tocador.tocando .tocador__parado { visibility: hidden; }

.tocador[data-modo="arrastar"] {
  cursor: grab;
  touch-action: pan-y; /* no celular, o dedo na vertical ainda rola a página */
  -webkit-user-select: none;
  user-select: none;
}

.tocador[data-modo="arrastar"]:active { cursor: grabbing; }

.tocador[data-modo="arrastar"]:focus-visible { outline-offset: 6px; border-radius: var(--raio); }

/* ---------- Rótulos ---------- */

.tocador__rotulos {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.tocador:not(.tocando) .tocador__rotulos { display: none; }

.tocador__rotulo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.3em 0.75em 0.3em 1.35em;
  border-radius: 999px;
  background: var(--tocador-rotulo-fundo);
  color: var(--tocador-rotulo-texto);
  font: 600 var(--fs-pequena) / 1.2 var(--letra-texto);
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 2px 10px var(--cor-linha);
  will-change: transform, opacity;
}

.tocador__rotulo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--tocador-rotulo-ponto);
  transform: translateY(-50%);
}

.tocador__rotulo--esq { padding: 0.3em 1.35em 0.3em 0.75em; }

.tocador__rotulo--esq::before { left: auto; right: 0.5em; }

@media (max-width: 47.99rem) {
  .tocador__rotulo { font-size: 0.8125rem; }
  .tocador[data-rotulos-celular="esconder"] .tocador__rotulos { display: none; }
}