/* Setlink design system — copiado do artifact "Setlink". Não edite aqui: edite no design system e copie de novo. */
/* Setlink — componentes da pista. Todos os valores de cor, tipo, espaço e raio vêm de tokens.json. */

.sl-boneco, .sl-pista-bloco, .sl-seletor, .sl-provador { box-sizing: border-box; }
.sl-boneco *, .sl-pista-bloco *, .sl-seletor *, .sl-provador * { box-sizing: border-box; }

/* ------------------------------------------------------------------ selo e rótulo */
.sl-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pilula);
  background: var(--lime);
  color: var(--ink);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sl-selo-mini { padding: 3px 6px; font-size: 9px; letter-spacing: 0.06em; }
.sl-rotulo {
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Boneco */
.sl-boneco {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.sl-boneco::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--sl-h) * 0.012);
  width: calc(var(--sl-h) * 0.42);
  height: calc(var(--sl-h) * 0.07);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--sombra-contato);
  filter: blur(2px);
  z-index: 0;
  animation: sl-sombra var(--sl-batida, 0.484s) ease-in-out infinite;
  animation-delay: var(--sl-atraso, 0s);
}
/* o corpo vira para o lado em que o boneco olha; o sprite faz a troca de quadros e a trilha */
.sl-boneco-corpo { position: relative; z-index: 1; }
.sl-boneco-corpo.is-esquerda { transform: scaleX(-1); }
.sl-boneco-sprite {
  width: calc(var(--sl-h) * 0.8485);
  height: var(--sl-h);
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
  filter: drop-shadow(var(--sombra-boneco));
  will-change: transform;
  /* a animação (quadros + trilha) vem do componente, no tempo do BPM */
}
.sl-boneco.is-pausado .sl-boneco-sprite, .sl-boneco.is-pausado::after { animation-play-state: paused !important; }

/* Trilhas: movimento contínuo do corpo, por cima da troca de quadros. --sl-pulo = altura. */
/* quique (1 batida): agachado e achatado na batida, no alto no contratempo */
@keyframes sl-t-quique {
  0%, 100% { transform: translateY(0) scale(1.02, 0.97); }
  18% { transform: translateY(0) scale(1, 1); }
  60% { transform: translateY(calc(var(--sl-pulo, 3%) * -1)) scale(0.99, 1.02); }
}
/* pulo (1 batida): impulso forte, voo, aterrissagem */
@keyframes sl-t-pulo {
  0%, 100% { transform: translateY(0) scale(1.05, 0.93); }
  14% { transform: translateY(0) scale(0.98, 1.03); }
  50% { transform: translateY(calc(var(--sl-pulo, 10%) * -1)) scale(0.97, 1.04); }
  86% { transform: translateY(0) scale(1.03, 0.96); }
}
/* lado (2 batidas): passo para um lado e para o outro, com um quique em cada passo */
@keyframes sl-t-lado {
  0%, 100% { transform: translate(-7%, 0) rotate(-2deg); }
  25% { transform: translate(0, calc(var(--sl-pulo, 2.5%) * -1)) rotate(0deg); }
  50% { transform: translate(7%, 0) rotate(2deg); }
  75% { transform: translate(0, calc(var(--sl-pulo, 2.5%) * -1)) rotate(0deg); }
}
/* cabeça (1 batida): o corpo todo inclina para a frente na batida, como quem curte o som */
@keyframes sl-t-cabeca {
  0%, 100% { transform: rotate(6deg) scale(1.02, 0.97); }
  55% { transform: translateY(calc(var(--sl-pulo, 1.5%) * -1)) rotate(-1deg) scale(1, 1.01); }
}
/* giro (4 batidas): três batidas de quique e uma volta inteira na quarta */
@keyframes sl-t-giro {
  0%, 25%, 50% { transform: translateY(0) scaleX(1); }
  12.5%, 37.5%, 62.5% { transform: translateY(calc(var(--sl-pulo, 4%) * -1)) scaleX(1); }
  75% { transform: translateY(0) scaleX(1); }
  81% { transform: translateY(calc(var(--sl-pulo, 4%) * -1.6)) scaleX(0.08); }
  87.5% { transform: translateY(calc(var(--sl-pulo, 4%) * -2)) scaleX(-1); }
  94% { transform: translateY(calc(var(--sl-pulo, 4%) * -1.6)) scaleX(-0.08); }
  100% { transform: translateY(0) scaleX(1); }
}
/* balança (2 batidas): para quem só tem pose; o corpo pende de um lado e do outro e quica */
@keyframes sl-t-balanca {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1.02, 0.97); }
  25% { transform: translateY(calc(var(--sl-pulo, 4%) * -1)) rotate(0deg) scale(0.99, 1.02); }
  50% { transform: translateY(0) rotate(4deg) scale(1.02, 0.97); }
  75% { transform: translateY(calc(var(--sl-pulo, 4%) * -1)) rotate(0deg) scale(0.99, 1.02); }
}
/* >>> PATCH LOCAL (Pista): passos novos e corpo articulado. Veja "Patch local no design system" no README. */
/* Trilhas novas (corpo inteiro). */
/* twist (2 batidas): agacha e sobe a cada batida, o giro fica com o tronco e as pernas */
@keyframes sl-t-twist {
  0%, 50%, 100% { transform: none; }
  25%, 75% { transform: scale(1.03, 0.95); }
  12.5%, 62.5% { transform: translateY(calc(var(--sl-pulo, 1.5%) * -1)); }
}
/* desliza (2 batidas): escorrega para um lado e para o outro, com pulinhos */
@keyframes sl-t-desliza {
  0%, 50%, 100% { transform: none; }
  12.5% { transform: translate(3%, calc(var(--sl-pulo, 2.5%) * -1)); }
  25% { transform: translateX(5%); }
  37.5% { transform: translate(3%, calc(var(--sl-pulo, 2.5%) * -1)); }
  62.5% { transform: translate(-3%, calc(var(--sl-pulo, 2.5%) * -1)); }
  75% { transform: translateX(-5%); }
  87.5% { transform: translate(-3%, calc(var(--sl-pulo, 2.5%) * -1)); }
}
/* roda (2 batidas): o quadril desenha um círculo */
@keyframes sl-t-roda {
  0%, 100% { transform: none; }
  25% { transform: translate(2.5%, calc(var(--sl-pulo, 2%) * -0.5)) rotate(2deg); }
  50% { transform: translateY(calc(var(--sl-pulo, 2%) * -1)); }
  75% { transform: translate(-2.5%, calc(var(--sl-pulo, 2%) * -0.5)) rotate(-2deg); }
}
/* robô (4 batidas, em passos secos) */
@keyframes sl-t-robo {
  0%, 50%, 100% { transform: none; }
  25%, 75% { transform: translateY(calc(var(--sl-pulo, 2%) * -1)) scale(1, 1.01); }
  37.5%, 87.5% { transform: scale(1.01, 0.97); }
}

/* Corpo articulado: os bonecos que só têm pose viram três camadas da mesma imagem
   (pernas, tronco e cabeça), recortadas por máscara, cada uma com o seu ponto de giro
   (quadril em 68%, cintura em 72%, pescoço em 48% da altura). As faixas se sobrepõem para a
   emenda não abrir; a cabeça desce até 51% para levar junto queixo, brincos e cabelo. */
.sl-boneco-sprite.is-articulado { position: relative; }
.sl-boneco-parte {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  will-change: transform;
}
.sl-boneco-parte.is-pernas {
  -webkit-mask-image: linear-gradient(to bottom, transparent 64%, #000 67%);
  mask-image: linear-gradient(to bottom, transparent 64%, #000 67%);
  transform-origin: 50% 68%;
}
.sl-boneco-parte.is-tronco {
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 48%, #000 73%, transparent 77%);
  mask-image: linear-gradient(to bottom, transparent 45%, #000 48%, #000 73%, transparent 77%);
  transform-origin: 50% 72%;
}
.sl-boneco-parte.is-cabeca {
  -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 51%);
  mask-image: linear-gradient(to bottom, #000 48%, transparent 51%);
  transform-origin: 50% 48%;
}

/* Coreografias (sl-c-<passo>-<parte>), em % da duração do passo (CORPOS no setlink.js). */
/* dança (2): desce na batida inclinando para um lado, depois para o outro */
@keyframes sl-c-danca-tronco {
  0%, 50%, 100% { transform: none; }
  12% { transform: translateY(1.5%) rotate(-4deg); }
  30% { transform: translateY(-1%) rotate(-1deg); }
  62% { transform: translateY(1.5%) rotate(4deg); }
  80% { transform: translateY(-1%) rotate(1deg); }
}
@keyframes sl-c-danca-cabeca {
  0%, 50%, 100% { transform: none; }
  14% { transform: translateY(3%) rotate(5deg); }
  35% { transform: translateY(-1%); }
  64% { transform: translateY(3%) rotate(-5deg); }
  85% { transform: translateY(-1%); }
}
@keyframes sl-c-danca-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(-6deg); } 75% { transform: skewX(6deg); } }

/* balanço (4): o peso vai de um lado para o outro, a cabeça compensa */
@keyframes sl-c-balanco-tronco { 0%, 50%, 100% { transform: none; } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
@keyframes sl-c-balanco-cabeca { 0%, 50%, 100% { transform: none; } 30% { transform: rotate(-7deg); } 80% { transform: rotate(7deg); } }
@keyframes sl-c-balanco-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(5deg); } 75% { transform: skewX(-5deg); } }

/* aceno (2): balanço leve, cabeça inclinada de simpatia */
@keyframes sl-c-aceno-tronco {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(-1%) rotate(-3deg); }
  75% { transform: translateY(-1%) rotate(3deg); }
}
@keyframes sl-c-aceno-cabeca { 0%, 50%, 100% { transform: none; } 30% { transform: rotate(8deg); } 80% { transform: rotate(-8deg); } }

/* ombrinho (2): os ombros sobem e descem no contratempo */
@keyframes sl-c-ombrinho-tronco {
  0%, 25%, 50%, 75%, 100% { transform: none; }
  12.5%, 62.5% { transform: translateY(-3%) rotate(4deg); }
  37.5%, 87.5% { transform: translateY(-3%) rotate(-4deg); }
}
@keyframes sl-c-ombrinho-cabeca {
  0%, 25%, 50%, 75%, 100% { transform: none; }
  12.5%, 62.5% { transform: translateY(-2.5%) rotate(-3deg); }
  37.5%, 87.5% { transform: translateY(-2.5%) rotate(3deg); }
}
@keyframes sl-c-ombrinho-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(3deg); } 75% { transform: skewX(-3deg); } }

/* pulo (1): encolhe as pernas no alto, a cabeça chega atrasada */
@keyframes sl-c-pulo-pernas { 0%, 28%, 72%, 100% { transform: none; } 50% { transform: scaleY(0.86); } }
@keyframes sl-c-pulo-cabeca {
  0%, 100% { transform: translateY(2%); }
  50% { transform: translateY(-2%); }
  86% { transform: translateY(3%); }
}
@keyframes sl-c-pulo-tronco { 0%, 100% { transform: translateY(1%); } 50% { transform: translateY(-1%); } }

/* euforia (1): estica o corpo e joga a cabeça para trás na batida */
@keyframes sl-c-euforia-tronco { 0%, 60%, 100% { transform: none; } 22% { transform: translateY(-2.5%) scale(1.03, 1.04); } }
@keyframes sl-c-euforia-cabeca { 0%, 60%, 100% { transform: none; } 22% { transform: translateY(-4%) rotate(-7deg); } }
@keyframes sl-c-euforia-pernas { 0%, 60%, 100% { transform: none; } 22% { transform: scaleY(1.03); } }

/* passinho (2): as pernas dão o passo, o tronco acompanha (a trilha leva o corpo de lado) */
@keyframes sl-c-passinho-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(-10deg); } 75% { transform: skewX(10deg); } }
@keyframes sl-c-passinho-tronco { 0%, 50%, 100% { transform: none; } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
@keyframes sl-c-passinho-cabeca { 0%, 50%, 100% { transform: translateY(1.5%); } 25%, 75% { transform: translateY(-1.5%); } }

/* curtindo (1): a cabeça marca a batida */
@keyframes sl-c-curtindo-cabeca {
  0%, 100% { transform: translateY(4%) scale(1.02, 0.94); }
  50% { transform: translateY(-1%); }
}
@keyframes sl-c-curtindo-tronco { 0%, 100% { transform: translateY(1%); } 50% { transform: none; } }

/* festa (2): ombros soltos e cabeça para os lados */
@keyframes sl-c-festa-tronco {
  0%, 50%, 100% { transform: none; }
  12.5% { transform: translateY(-2.5%) rotate(4deg); }
  25% { transform: translateY(1%); }
  37.5% { transform: translateY(-2.5%) rotate(-4deg); }
  62.5% { transform: translateY(1%) rotate(5deg); }
  87.5% { transform: translateY(1%) rotate(-5deg); }
}
@keyframes sl-c-festa-cabeca { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(2%) rotate(-6deg); } 75% { transform: translateY(2%) rotate(6deg); } }
@keyframes sl-c-festa-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(6deg); } 75% { transform: skewX(-6deg); } }

/* twist (2): tronco gira para um lado, pernas para o outro */
@keyframes sl-c-twist-tronco {
  0%, 50%, 100% { transform: none; }
  25% { transform: rotate(6deg) scaleX(0.9); }
  75% { transform: rotate(-6deg) scaleX(0.9); }
}
@keyframes sl-c-twist-cabeca { 0%, 50%, 100% { transform: none; } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes sl-c-twist-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(-12deg); } 75% { transform: skewX(12deg); } }

/* shuffle (2): pernas trocando rápido, no meio-tempo */
@keyframes sl-c-shuffle-pernas {
  0%, 50%, 100% { transform: none; }
  12.5%, 37.5%, 75% { transform: skewX(16deg); }
  25%, 62.5%, 87.5% { transform: skewX(-16deg); }
}
@keyframes sl-c-shuffle-tronco { 0%, 50%, 100% { transform: none; } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes sl-c-shuffle-cabeca { 0%, 25%, 50%, 75%, 100% { transform: none; } 12.5%, 37.5%, 62.5%, 87.5% { transform: translateY(2%); } }

/* rebolado (2): quadril em círculo, o tronco e a cabeça vão junto */
@keyframes sl-c-rebolado-tronco {
  0%, 100% { transform: none; }
  25% { transform: translate(4%, -1%) rotate(4deg); }
  50% { transform: translateY(-2%); }
  75% { transform: translate(-4%, -1%) rotate(-4deg); }
}
@keyframes sl-c-rebolado-cabeca {
  0%, 100% { transform: none; }
  25% { transform: translate(3.5%, -1%) rotate(-3deg); }
  50% { transform: translateY(-2.5%); }
  75% { transform: translate(-3.5%, -1%) rotate(3deg); }
}
@keyframes sl-c-rebolado-pernas {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateX(-2%) skewX(5deg); }
  75% { transform: translateX(2%) skewX(-5deg); }
}

/* robô (4): poses secas, uma por meia batida (o passo usa steps no componente) */
@keyframes sl-c-robo-tronco {
  0%, 25%, 50%, 75%, 100% { transform: none; }
  12.5% { transform: rotate(-8deg); }
  37.5% { transform: rotate(8deg); }
  62.5%, 87.5% { transform: translateY(-3%); }
}
@keyframes sl-c-robo-cabeca {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateX(4.5%); }
  37.5% { transform: translateX(4.5%) rotate(7deg); }
  75% { transform: translateX(-4.5%); }
  87.5% { transform: translateX(-4.5%) rotate(-7deg); }
}
@keyframes sl-c-robo-pernas { 0%, 25%, 62.5%, 100% { transform: none; } 37.5% { transform: skewX(8deg); } 87.5% { transform: skewX(-8deg); } }

/* cabeçada (2): headbang, a cabeça desce forte na batida */
@keyframes sl-c-cabecada-cabeca {
  0%, 50%, 100% { transform: none; }
  12% { transform: translateY(6%) rotate(4deg) scale(1.02, 0.94); }
  34% { transform: translateY(-2.5%); }
  62% { transform: translateY(6%) rotate(-4deg) scale(1.02, 0.94); }
  84% { transform: translateY(-2.5%); }
}
@keyframes sl-c-cabecada-tronco {
  0%, 50%, 100% { transform: none; }
  12% { transform: translateY(2%) rotate(1.5deg); }
  62% { transform: translateY(2%) rotate(-1.5deg); }
}

/* malemolência (4): inclina devagar para trás e para a frente */
@keyframes sl-c-malemolencia-tronco { 0%, 50%, 100% { transform: none; } 25% { transform: rotate(-7deg); } 75% { transform: rotate(6deg); } }
@keyframes sl-c-malemolencia-cabeca { 0%, 50%, 100% { transform: none; } 30% { transform: rotate(6deg); } 80% { transform: rotate(-5deg); } }
@keyframes sl-c-malemolencia-pernas { 0%, 50%, 100% { transform: none; } 25% { transform: skewX(4deg); } 75% { transform: skewX(-4deg); } }
/* <<< PATCH LOCAL */

@keyframes sl-sombra {
  0%, 100% { transform: translateX(-50%) scale(1); }
  60% { transform: translateX(-50%) scale(0.86); }
}

.sl-boneco-rotulo {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--sl-h) * 0.04);
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--vidro);
  color: var(--ivory);
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sl-boneco-rotulo.is-voce { background: var(--pista-neon); color: var(--on-pista-neon); }

/* ------------------------------------------------------------------ Pista */
.sl-pista-bloco { display: flex; flex-direction: column; gap: var(--espaco-2); width: 100%; }
.sl-pista {
  container-type: inline-size;
  position: relative;
  width: 100%;
  /* 16:9 no computador; no celular, quem usa pode pedir 4:3 com --sl-pista-proporcao */
  aspect-ratio: var(--sl-pista-proporcao, 16 / 9);
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--radius-palco);
  background: var(--pista-chao);
  border: 1px solid var(--ink-line);
  isolation: isolate;
}
/* modo foto: a foto da pista é o cenário, sempre no enquadramento original */
.sl-pista.is-foto {
  aspect-ratio: 1672 / 941;
  min-height: 0;
  background-color: var(--ink-2);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.sl-pista-frente {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sl-pista-fundo {
  position: absolute;
  inset: 0 0 48% 0;
  background: linear-gradient(to bottom, var(--pista-ceu), var(--pista-horizonte));
  overflow: hidden;
}
.sl-pista-chao {
  position: absolute;
  inset: 52% 0 0 0;
  background: linear-gradient(to bottom, var(--pista-chao-fundo), var(--pista-chao) 70%);
}
.sl-pista-neon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sl-pista-neon polygon {
  fill: none;
  stroke: var(--pista-neon);
  stroke-width: 3px;
  stroke-linejoin: round;
  filter: drop-shadow(var(--brilho-neon));
}

/* Subterrânea: luminárias no teto e barras de neon na parede */
.sl-luzes-teto { position: absolute; top: 5%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.sl-luzes-teto i { display: block; width: 40%; height: 0.55cqw; border-radius: var(--radius-pilula); background: var(--pista-neon-2); box-shadow: var(--brilho-neon); }
.sl-luzes-teto i:nth-child(2) { width: 30%; }
.sl-luzes-teto i:nth-child(3) { width: 22%; }
.sl-barras { position: absolute; left: 30%; right: 30%; top: 26%; bottom: 0; display: flex; justify-content: space-between; align-items: stretch; }
.sl-barras i { width: 0.7cqw; height: 70%; border-radius: var(--radius-pilula); background: var(--pista-neon); box-shadow: var(--brilho-neon); }
.sl-barras span { flex: 1; }

/* Jardim e Terraço: sol baixo */
.sl-sol {
  position: absolute;
  right: 20%;
  bottom: 18%;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: var(--pista-sol);
}
.sl-pista[data-theme='terraco'] .sl-sol { right: 14%; bottom: 34%; }
.sl-folhagem { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; }
.sl-folhagem i { position: absolute; border-radius: 50%; background: var(--pista-parede); }
.sl-varal { position: absolute; left: 0; top: 4%; width: 100%; height: 34%; }
.sl-varal path { stroke: var(--ink-3); stroke-width: 0.25; }
.sl-varal circle { fill: var(--pista-neon-2); }
.sl-cidade { position: absolute; left: 0; right: 0; bottom: 8%; width: 100%; height: 46%; }
.sl-cidade rect { fill: var(--pista-parede); }
.sl-guarda-corpo { position: absolute; left: 0; right: 0; bottom: 6%; height: 0.5cqw; background: var(--ink-3); }

/* objetos do cenário, ancorados pela base */
.sl-prop {
  position: absolute;
  transform: translate(-50%, -100%);
  background-repeat: no-repeat;
  pointer-events: none;
}
.sl-pista-dj { position: absolute; left: 50%; top: 41%; transform: translate(-50%, -100%); }
.sl-pista-pessoa { position: absolute; transform: translate(-50%, -100%); }

.sl-pista-topo {
  position: absolute;
  z-index: 300;
  top: var(--espaco-3);
  left: var(--espaco-3);
  right: var(--espaco-3);
  display: flex;
  gap: var(--espaco-2);
  align-items: flex-start;
}
.sl-np {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 70%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--vidro);
  border: 1.5px solid var(--ivory);
  color: var(--ivory);
}
.sl-np-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sl-np-btn {
  appearance: none;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1.5px solid var(--ivory);
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}
.sl-np-btn .sl-icone { width: 18px; height: 18px; }
.sl-np-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sl-np-btn[aria-pressed='true'] { background: var(--ivory); color: var(--ink); }
.sl-pista-mais {
  position: absolute;
  z-index: 300;
  right: var(--espaco-3);
  bottom: var(--espaco-3);
  padding: 6px 10px;
  border-radius: var(--radius-pilula);
  background: var(--vidro);
  color: var(--ivory);
  font: 700 12px/1 var(--font-mono);
}
.sl-np-quem { font: 700 14px/1.2 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-np-faixa { font: 500 12px/1.3 var(--font-text); color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-contagem {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--vidro);
  border: 1.5px solid var(--ink-line);
  color: var(--ivory);
  font: 700 13px/1 var(--font-mono);
}
.sl-icone { width: 16px; height: 16px; flex: none; }
/* botão de tela cheia: mesma altura do contador, em vidro */
.sl-maximizar { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--vidro); border-color: var(--ink-line); }
.sl-maximizar:hover { border-color: var(--ivory); }

/* tela cheia: a pista ocupa a tela sem cortar a foto, com as reações embaixo */
.sl-pista-bloco.is-cheia {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: var(--espaco-4);
  justify-content: center;
  align-items: center;
  gap: var(--espaco-3);
  background: var(--ink);
}
.sl-pista-bloco.is-maximizada { position: fixed; inset: 0; z-index: 2147483000; }
.sl-pista-bloco.is-cheia .sl-pista {
  flex: none;
  width: min(100%, calc((100vh - 108px) * 16 / 9));
  width: min(100%, calc((100dvh - 108px) * 16 / 9));
}
.sl-pista-bloco.is-cheia .sl-pista.is-foto {
  width: min(100%, calc((100vh - 108px) * 1672 / 941));
  width: min(100%, calc((100dvh - 108px) * 1672 / 941));
}
.sl-pista-bloco.is-cheia .sl-reacoes { width: min(100%, 560px); flex: none; }

.sl-voando { position: absolute; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.sl-reacao-voando {
  position: absolute;
  bottom: 6%;
  width: 9cqw;
  height: 9cqw;
  margin-left: -4.5cqw;
  background-repeat: no-repeat;
  animation: sl-sobe 2.6s ease-out forwards;
}
@keyframes sl-sobe {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { transform: translateY(-8cqw) scale(1.1); opacity: 1; }
  100% { transform: translateY(-40cqw) scale(1); opacity: 0; }
}

.sl-reacoes { display: flex; justify-content: space-between; gap: var(--espaco-2); width: 100%; max-width: 420px; margin: 0 auto; padding: 0 var(--espaco-1); }
.sl-reacao {
  appearance: none;
  width: 52px;
  height: 52px;
  padding: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-line);
  background: var(--ink-2);
  cursor: pointer;
  transition: transform 0.08s ease;
}
.sl-reacao:active { transform: scale(0.88); }
.sl-reacao:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sl-reacao-img { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }

/* ------------------------------------------------------------------ claro e escuro
   Superfícies da interface fora da pista (seletor, provador, escolha de boneco). Claro por
   padrão; <html data-modo="escuro"> troca. A pista, as pílulas em vidro e o lime não mudam. */
:root {
  --sl-fundo: var(--ivory);
  --sl-superficie: var(--ivory-2);
  --sl-superficie-2: var(--ivory-3);
  --sl-linha: var(--ivory-line);
  --sl-texto: var(--ink);
  --sl-suave: var(--muted);
  --sl-forte: var(--ink);
  --sl-sobre-forte: var(--ivory);
}
[data-modo='escuro'] {
  --sl-fundo: #161618;
  --sl-superficie: #1e1e21;
  --sl-superficie-2: #28282c;
  --sl-linha: #35353b;
  --sl-texto: var(--ivory);
  --sl-suave: var(--steel);
  --sl-forte: var(--ivory);
  --sl-sobre-forte: var(--ink);
}

/* ------------------------------------------------------------------ SeletorDePista */
.sl-seletor-caixa { container-type: inline-size; }
.sl-seletor { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--espaco-3); }
/* no celular, duas pistas por linha: foto, nome e traje (o clima sai para caber as 19) */
@container (max-width: 560px) {
  .sl-seletor-caixa .sl-seletor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-2); }
  .sl-seletor-caixa .sl-seletor-corpo { padding: 8px 10px 10px; gap: 2px; }
  .sl-seletor-caixa .sl-seletor-nome { font-size: 15px; }
  .sl-seletor-caixa .sl-seletor-clima { display: none; }
  .sl-seletor-caixa .sl-traje { flex-wrap: wrap; margin-top: 4px; font-size: 9px; }
  .sl-seletor-caixa .sl-traje i { width: 13px; height: 13px; }
  .sl-seletor-caixa .sl-traje span { margin-left: 0; flex-basis: 100%; margin-top: 3px; }
  .sl-seletor-caixa .sl-seletor-foto .sl-selo { left: 6px; top: 6px; }
}
.sl-seletor-opcao {
  appearance: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1.5px solid var(--sl-linha);
  border-radius: var(--radius);
  background: var(--sl-superficie);
  color: var(--sl-texto);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.06s ease;
}
.sl-seletor-opcao:hover { border-color: var(--sl-suave); }
.sl-seletor-opcao:active { transform: scale(0.985); }
.sl-seletor-opcao:focus-visible { outline: 2px solid var(--sl-forte); outline-offset: 2px; }
.sl-seletor-opcao[aria-checked='true'] { border-color: var(--sl-forte); box-shadow: 0 0 0 3px var(--lime); }
.sl-seletor-opcao:disabled { opacity: 0.45; cursor: not-allowed; }
.sl-seletor-foto {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-2);
}
.sl-seletor-foto .sl-selo { position: absolute; left: 10px; top: 10px; }
.sl-seletor-corpo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.sl-seletor-nome { font: 700 19px/1.1 var(--font-display); letter-spacing: -0.02em; }
.sl-seletor-clima { font: 400 13px/1.45 var(--font-text); color: var(--sl-suave); }
.sl-traje { display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 600 10px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-texto); }
.sl-traje i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--sl-suave); flex: none; }
.sl-traje span { margin-left: 4px; }

/* ------------------------------------------------------------------ SeletorDeBoneco */
.sl-bonecos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--espaco-2); }
.sl-bonecos-opcao {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px 4px 8px;
  border: 2px solid var(--sl-linha);
  border-radius: var(--radius-item);
  background: var(--ink);
  color: var(--steel);
  cursor: pointer;
  font: inherit;
  overflow: hidden;
}
.sl-bonecos-opcao:hover { border-color: var(--sl-suave); }
.sl-bonecos-opcao:focus-visible { outline: 2px solid var(--sl-forte); outline-offset: 2px; }
.sl-bonecos-opcao[aria-checked='true'] { border-color: var(--sl-forte); box-shadow: 0 0 0 2px var(--lime); color: var(--lime); }
.sl-bonecos-nome { font: 600 11px/1.2 var(--font-text); text-align: center; }

/* ------------------------------------------------------------------ Provador */
.sl-provador { container-type: inline-size; display: flex; flex-direction: column; gap: var(--espaco-5); color: var(--sl-texto); font: 400 15px/1.45 var(--font-text); }

.sl-bonde { display: flex; flex-direction: column; gap: var(--espaco-2); }
.sl-bonde-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-2); }
.sl-bonde-conta { font: 600 13px/1.2 var(--font-mono); color: var(--sl-suave); }
.sl-bonde-lista { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--espaco-3); overflow-x: auto; }
.sl-bonde-membro { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.sl-retrato {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--sl-superficie-2);
  background-repeat: no-repeat;
  border: 2px solid var(--sl-linha);
}
.sl-bonde-membro.is-pronto .sl-retrato { border-color: var(--sl-forte); box-shadow: 0 0 0 2px var(--lime); }
.sl-bonde-nome { font: 600 13px/1.2 var(--font-text); }
.sl-bonde-estado { font: 700 9px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-suave); }
.sl-bonde-membro.is-pronto .sl-bonde-estado { background: var(--lime); color: var(--ink); padding: 3px 5px; border-radius: 4px; }

.sl-provador-corpo { display: grid; grid-template-columns: 1fr; gap: var(--espaco-5); }
@container (min-width: 640px) {
  .sl-provador-corpo { grid-template-columns: minmax(240px, 0.8fr) 1.2fr; align-items: start; }
}

.sl-espelho {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-palco);
  background: linear-gradient(to bottom, var(--pista-chao-fundo), var(--pista-chao));
  border: 2px solid var(--pista-neon);
  box-shadow: var(--brilho-neon);
  overflow: hidden;
}
.sl-espelho-rotulo {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: var(--radius-pilula);
  background: var(--vidro);
  color: var(--ivory);
  font: 600 10px/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-espelho-pecas { position: absolute; inset: 0; }
.sl-peca { display: block; background-repeat: no-repeat; }
.sl-espelho-pecas .sl-peca { position: absolute; left: 50%; transform: translateX(-50%); filter: drop-shadow(var(--sombra-boneco)); }
.sl-espelho-pecas .is-cabelo { top: 6%; width: 42%; aspect-ratio: 1; }
.sl-espelho-pecas .is-cima { top: 25%; width: 54%; aspect-ratio: 1; }
.sl-espelho-pecas .is-baixo { top: 48%; width: 48%; aspect-ratio: 1; }
.sl-espelho-pecas .is-tenis { top: 70%; width: 44%; aspect-ratio: 1; }
.sl-espelho-pecas .is-acessorio { top: 34%; left: 82%; width: 30%; aspect-ratio: 1; }
.sl-espelho-pecas .is-util { left: 15%; width: 24%; aspect-ratio: 1; }
.sl-espelho-pecas .is-util-0 { top: 28%; }
.sl-espelho-pecas .is-util-1 { top: 48%; }
.sl-espelho-pecas .is-util-2 { top: 68%; }

.sl-traje-medidor { margin-top: var(--espaco-3); display: flex; flex-direction: column; gap: 6px; }
.sl-traje-texto { font: 400 14px/1.35 var(--font-text); }
.sl-traje-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sl-traje-barra i { height: 8px; border-radius: var(--radius-pilula); background: var(--sl-superficie-2); border: 1.5px solid var(--sl-suave); }
.sl-traje-barra i.is-on { background: var(--sl-forte); border-color: var(--sl-forte); }
.sl-traje-dica { margin: 0; font: 400 13px/1.45 var(--font-text); color: var(--sl-suave); }

.sl-provador-arara { display: flex; flex-direction: column; gap: var(--espaco-3); min-width: 0; }
.sl-segmentado {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--espaco-1);
  padding: var(--espaco-1);
  border-radius: var(--radius-sm);
  background: var(--sl-superficie-2);
}
.sl-segmentado button {
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 9px 4px;
  font: 600 13px/1.2 var(--font-text);
  color: var(--sl-texto);
  cursor: pointer;
}
.sl-segmentado button[aria-selected='true'] { background: var(--lime); color: var(--ink); }
.sl-segmentado button:focus-visible { outline: 2px solid var(--sl-forte); outline-offset: 1px; }

.sl-provador-arara-grupo { display: flex; flex-direction: column; gap: var(--espaco-2); }
.sl-provador-nota { margin: 0; font: 400 13px/1.45 var(--font-text); color: var(--sl-suave); }
.sl-provador-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espaco-2); }
@container (max-width: 380px) { .sl-provador-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-provador-item {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 8px;
  border: 2px solid var(--sl-linha);
  border-radius: var(--radius-item);
  background: var(--sl-superficie);
  color: var(--sl-texto);
  cursor: pointer;
  font: inherit;
}
.sl-provador-item:hover { border-color: var(--sl-suave); }
.sl-provador-item:focus-visible { outline: 2px solid var(--sl-forte); outline-offset: 2px; }
.sl-provador-item[aria-checked='true'] { border-color: var(--sl-forte); box-shadow: 0 0 0 2px var(--lime); }
.sl-provador-item .sl-peca { width: 100%; aspect-ratio: 1; }
.sl-provador-nenhum { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font: 600 12px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-suave); }
.sl-provador-nome { font: 600 11px/1.2 var(--font-text); text-align: center; color: var(--sl-texto); overflow-wrap: anywhere; }
.sl-provador-item .sl-selo-mini { position: absolute; top: 5px; right: 5px; }

.sl-entrar {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: var(--espaco-1);
  padding: 10px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--lime);
  color: var(--ink);
  font: 700 18px/1 var(--font-display);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.sl-entrar:active { transform: scale(0.98); }
.sl-entrar:focus-visible { outline: 2px solid var(--sl-forte); outline-offset: 2px; }
.sl-entrar.is-dentro { background: var(--sl-forte); color: var(--sl-sobre-forte); }
.sl-entrar-pulseira { width: 40px; height: 40px; flex: none; background-repeat: no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .sl-boneco-sprite, .sl-boneco-parte, .sl-boneco::after { animation: none !important; }
  .sl-reacao-voando { animation-duration: 0.8s; }
}