/* css/automatico.css — Modo automático (js/automatico/): o rádio da festa, em tela cheia por cima
   do app. Preto + ouro do Kobalski. Celular em pé: tudo empilhado. Deitado / TV: letra grande à
   esquerda, QR + pedidos à direita. Tudo com prefixo .auto (não briga com o style.css).
   Navegador de TV costuma ser velho: os tamanhos com clamp() têm um valor simples antes. */

/* o .tela.ativa do app anima com transform, e transform num ancestral quebra o position:fixed */
.auto-casca { animation: none !important; transform: none !important; }

.auto {
  --a-preto: #070608;
  --a-bg-1: #110f13;
  --a-bg-2: #1a171d;
  --a-linha: #2c2730;
  --a-texto: #f6f1e7;
  --a-suave: #c4bba9;
  --a-fraco: #8f8779;
  --a-ouro: #d9b24a;
  --a-ouro-forte: #cba13a;
  --a-ouro-claro: #f2d27a;
  --a-ouro-escuro: #a9842a;
  --a-tinta-ouro: #1d1503;
  --a-clima: 217, 178, 74; /* a cor do clima do fundo (rgb); muda por estilo da música, abaixo */
  --a-raio: 20px;
  --a-raio-p: 14px;
  --a-sombra: 0 14px 44px rgba(0, 0, 0, 0.5);
  --a-gap: 16px;

  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40; /* acima da casca do app; abaixo do Kobalski (45) e do toast (50) */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(env(safe-area-inset-top, 0px) + 16px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    calc(env(safe-area-inset-left, 0px) + 16px);
  background:
    radial-gradient(1500px 900px at 42% 12%, rgba(var(--a-clima), 0.26), transparent 60%),
    radial-gradient(1100px 820px at 102% 112%, rgba(var(--a-clima), 0.13), transparent 60%),
    var(--a-preto);
  box-shadow: inset 0 0 340px 90px rgba(0, 0, 0, 0.5); /* vinheta: escurece as beiradas, clima de palco */
  transition: background 0.8s ease; /* a cor do clima troca macio entre as músicas */
  color: var(--a-texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-size: clamp(16px, 0.55vw + 10px, 24px);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  color-scheme: dark;
}
/* o clima do fundo pela cor do estilo (data-auto-estilo vem do index.js ao tocar) */
.auto[data-auto-estilo="sertanejo"], .auto[data-auto-estilo="forro"], .auto[data-auto-estilo="pagode"], .auto[data-auto-estilo="samba"] { --a-clima: 226, 148, 60; }
.auto[data-auto-estilo="pop"] { --a-clima: 158, 100, 216; }
.auto[data-auto-estilo="funk"] { --a-clima: 226, 78, 156; } /* rosa: o fundo quando toca funk (ritmo desde 20/10); o cartão não muda de cor */
.auto[data-auto-estilo="rock"] { --a-clima: 214, 74, 58; }
.auto[data-auto-estilo="gospel"] { --a-clima: 96, 152, 232; }
.auto[data-auto-estilo="mpb"] { --a-clima: 72, 182, 150; }
.auto[data-auto-estilo="rap"] { --a-clima: 38, 198, 226; } /* ciano: nenhuma das outras usa */

.auto *, .auto *::before, .auto *::after { box-sizing: border-box; }
.auto [hidden] { display: none !important; }
.auto h1, .auto h2, .auto h3, .auto p { margin: 0; }
.auto button { font: inherit; } /* a cor vem de cada botão (.auto-btn*, .auto-cartao*) */
.auto b { font-weight: 750; }

/* controle remoto da TV / teclado: anel de ouro bem visível */
.auto button:focus { outline: 3px solid var(--a-ouro-claro); outline-offset: 3px; }
.auto button:focus:not(:focus-visible) { outline: none; }
.auto-h1:focus { outline: none; }

/* ---------- textos comuns ---------- */
.auto-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72em;
  font-weight: 800;
  color: var(--a-ouro);
}
.auto-h1 {
  font-size: 1.9em;
  font-size: clamp(1.7em, 2.4vw + 1em, 2.8em);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: 0.15em;
}
.auto-sub { color: var(--a-suave); margin-top: 0.45em; max-width: 46em; }

/* ---------- botões ---------- */
.auto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3em;
  padding: 0.7em 1.2em;
  border-radius: var(--a-raio-p);
  border: 1px solid transparent;
  font-weight: 750;
  line-height: 1.15;
  color: var(--a-texto);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.auto-btn svg { width: 1.25em; height: 1.25em; flex: none; }
.auto-btn:active { transform: translateY(1px) scale(0.99); }
.auto-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.auto-btn-ouro {
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  color: var(--a-tinta-ouro);
  box-shadow: 0 6px 22px rgba(217, 178, 74, 0.22);
}
.auto-btn-ouro:hover:not(:disabled) { filter: brightness(1.06); }
.auto-btn-fantasma { background: rgba(255, 255, 255, 0.04); border-color: var(--a-linha); color: var(--a-texto); }
.auto-btn-fantasma:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: #3d3742; }
/* o "Sair" do rádio em vermelho, igual ao do palco (--sair vem do style.css) */
.auto-btn[data-auto-acao="sair"] { background: var(--sair, #d92d43); border-color: transparent; color: #fff; }
.auto-btn[data-auto-acao="sair"]:hover:not(:disabled) { background: var(--sair-forte, #ea3c52); }
.auto-btn-pequeno { min-height: 2.5em; padding: 0.45em 0.9em; font-size: 0.88em; border-radius: 11px; }

/* ---------- 1) escolher o ritmo ---------- */
.auto-ritmos {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.auto-ritmos > * + * { margin-top: 1.3em; }
.auto-cabeca > * + * { margin-top: 0.9em; }
.auto-cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.auto-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 7.6em;
  padding: 1em 1.05em;
  border-radius: var(--a-raio);
  border: 1px solid var(--a-linha);
  background: linear-gradient(160deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra);
  color: var(--a-texto);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.auto-cartao:hover { border-color: var(--a-ouro-escuro); }
.auto-cartao:active { transform: scale(0.98); }
.auto-cartao::after {
  /* brilho de ouro no canto, bem de leve */
  content: "";
  position: absolute;
  right: -30%;
  top: -40%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle, rgba(217, 178, 74, 0.13), transparent 65%);
  pointer-events: none;
}
.auto-cartao-icone { font-size: 2em; line-height: 1; }
.auto-cartao-texto { display: flex; flex-direction: column; margin-top: 0.7em; }
.auto-cartao-nome { font-weight: 800; font-size: 1.12em; line-height: 1.15; }
.auto-sem-quebra { white-space: nowrap; } /* "Hip-hop" inteiro na linha (marcacao.js) */
.auto-cartao-n { color: var(--a-fraco); font-size: 0.85em; margin-top: 0.2em; }
.auto-cartao-tudo {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 5.6em;
  background: linear-gradient(135deg, var(--a-ouro-claro), var(--a-ouro-forte) 55%, var(--a-ouro-escuro));
  border-color: transparent;
  color: var(--a-tinta-ouro);
  box-shadow: 0 10px 34px rgba(217, 178, 74, 0.24);
}
.auto-cartao-tudo::after { display: none; }
.auto-cartao-tudo .auto-cartao-texto { margin: 0 0 0 0.8em; }
.auto-cartao-tudo .auto-cartao-nome { font-size: 1.3em; }
.auto-cartao-tudo .auto-cartao-n { color: rgba(29, 21, 3, 0.72); }
.auto-cartao-tudo:hover { filter: brightness(1.05); }

@media (min-width: 640px) {
  .auto-cartoes { grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); grid-gap: 16px; gap: 16px; }
  .auto-cartao { min-height: 9em; }
  .auto-cartao-tudo { min-height: 5.6em; }
}

/* ---------- 2) tocando ---------- */
.auto-tocando {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: var(--a-gap);
  gap: var(--a-gap);
  max-width: 1800px;
  margin: 0 auto;
}
.auto-palco { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* "Fulano entrou na festa": pílula dourada que salta no alto do palco e some sozinha (confirmação social) */
.auto-entrou {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  max-width: 90%;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  color: var(--a-tinta-ouro);
  font-weight: 800;
  font-size: 1.15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.auto-entrou .auto-entrou-nome { font-weight: 850; }
.auto-entrou-entra { animation: auto-entrou-pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes auto-entrou-pop {
  0% { transform: translate(-50%, -14px) scale(0.82); opacity: 0; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .auto-entrou-entra { animation: none; } }
.auto-palco > * + * { margin-top: 1em; }

.auto-faixa-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.auto-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  background: rgba(217, 178, 74, 0.12);
  border: 1px solid rgba(217, 178, 74, 0.35);
  color: var(--a-ouro-claro);
  font-weight: 750;
  font-size: 0.85em;
}
.auto-marca { color: var(--a-fraco); font-size: 0.74em; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700; }

/* equalizer do chip: mexe só tocando */
.auto-eq { display: inline-flex; align-items: flex-end; height: 0.9em; margin-right: 0.55em; }
.auto-eq i { display: block; width: 3px; height: 30%; margin-right: 2px; border-radius: 1px; background: currentColor; }
.auto[data-auto-estado="tocando"] .auto-eq i { animation: auto-eq 0.9s ease-in-out infinite alternate; }
.auto-eq i:nth-child(2) { animation-delay: -0.35s !important; }
.auto-eq i:nth-child(3) { animation-delay: -0.6s !important; }
.auto-eq i:nth-child(4) { animation-delay: -0.15s !important; }
@keyframes auto-eq { from { height: 22%; } to { height: 100%; } }

/* chamada da vez no ar (a Dany chamando quem vai cantar): o que mexe no rádio e nos pedidos apaga até
   ela terminar. Sair e Trocar ritmo seguem valendo (cancelam a chamada; o pedido fica na fila) */
.auto[data-auto-estado="chamando"] .auto-botoes .auto-btn:not([data-auto-acao="trocar"]):not([data-auto-acao="sair"]),
.auto[data-auto-estado="chamando"] .auto-pedidos .auto-btn {
  opacity: 0.4;
  pointer-events: none;
}

.auto-titulo {
  font-size: 1.6em;
  font-size: clamp(1.45em, 2.2vw + 0.8em, 3em);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.auto-artista { color: var(--a-ouro); font-weight: 650; margin-top: 0.3em; font-size: 1.02em; }

/* a letra: verso grande (com a sílaba acesa) + o seguinte menor */
.auto-letra {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 9.5em;
  padding: 0.6em 0;
}
/* onda atrás da letra: barrinhas na cor do clima que sobem e descem (tira o preto chapado do meio) */
.auto-ondas {
  position: absolute;
  inset: 0 -1%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4%;
  opacity: 0.17;
  pointer-events: none;
}
.auto-ondas i {
  flex: 1 1 0;
  max-width: 11px;
  height: var(--h, 50%);
  border-radius: 3px;
  background: linear-gradient(to top, rgba(var(--a-clima), 0.95), rgba(var(--a-clima), 0.12));
  transform: scaleY(0.4);
  transform-origin: center;
  animation: auto-onda 1.15s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.06s);
}
@keyframes auto-onda { 0%, 100% { transform: scaleY(0.38); } 50% { transform: scaleY(1); } }
.auto:not([data-auto-estado="tocando"]) .auto-ondas i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .auto-ondas i { animation: none; } }
.auto-verso, .auto-verso-prox { position: relative; z-index: 1; }
.auto-verso {
  font-size: 1.75em;
  font-size: clamp(1.55em, 5.4vw, 2.5em);
  font-weight: 800;
  line-height: 1.2;
  min-height: 2.4em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.auto-verso .ja { color: var(--a-ouro-claro); }
.auto-verso .agora { color: #fff; text-shadow: 0 0 18px rgba(242, 210, 122, 0.7), 0 0 2px rgba(255, 255, 255, 0.6); }
.auto-verso .falta { color: rgba(246, 241, 231, 0.6); }
.auto-verso.auto-verso-espera .falta { color: rgba(246, 241, 231, 0.82); } /* já na tela, logo vai começar */
.auto-verso.auto-carregando { color: var(--a-fraco); font-size: 1.2em; font-weight: 700; animation: auto-pulsa 1.4s ease-in-out infinite; }
.auto-instrumental { color: var(--a-ouro); letter-spacing: 0.3em; opacity: 0.75; animation: auto-pulsa 1.6s ease-in-out infinite; }
.auto-verso-prox {
  margin-top: 0.7em;
  font-size: 1.1em;
  font-size: clamp(1.05em, 3.2vw, 1.5em);
  font-weight: 650;
  line-height: 1.25;
  color: var(--a-fraco);
  min-height: 1.25em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
@keyframes auto-pulsa { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }

.auto-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 1em;
  border-radius: var(--a-raio-p);
  border: 1px solid rgba(217, 178, 74, 0.35);
  background: rgba(217, 178, 74, 0.08);
}
.auto-aviso p { margin: 0.2em 1em 0.2em 0; color: var(--a-suave); }

.auto-progresso { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.auto-progresso i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--a-ouro-forte), var(--a-ouro-claro));
  transform-origin: left center;
  transform: scaleX(0);
}
.auto-tempos {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5em;
  color: var(--a-fraco);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.auto-depois { min-width: 0; margin-left: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

.auto-botoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.auto-botoes .auto-btn { padding-left: 0.6em; padding-right: 0.6em; }
.auto-btn-cantar { grid-column: 1 / -1; min-height: 3.4em; font-size: 1.08em; }
/* celular estreito: "Trocar ritmo" cabe numa linha só sem o ícone */
@media (max-width: 400px) {
  .auto-botoes .auto-btn:not(.auto-btn-cantar) { font-size: 0.92em; white-space: nowrap; }
  .auto-botoes .auto-btn:not(.auto-btn-cantar) svg { display: none; }
}

/* canto da festa: QR + código + pedidos (celular em pé: QR pequeno ao lado do código) */
.auto-festa {
  padding: 1em;
  border-radius: var(--a-raio);
  border: 1px solid var(--a-linha);
  background: linear-gradient(180deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra);
  min-width: 0;
}
.auto-festa-topo { display: flex; align-items: center; }
.auto-qr {
  flex: none;
  width: 128px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.auto-qr svg { display: block; width: 100%; height: auto; }
.auto-festa-info { min-width: 0; margin-left: 1em; }
.auto-codigo-rotulo { color: var(--a-fraco); font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.14em; margin-top: 0.15em; }
.auto-codigo {
  font-size: 2.1em;
  font-weight: 850;
  letter-spacing: 0.28em;
  line-height: 1.05;
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auto-dica { color: var(--a-suave); font-size: 0.86em; margin-top: 0.55em; }

/* (o 2º QR "Leva o Kobalski" saiu em 21/10/2026: o app inteiro só chega pelo convite da família) */
.auto-festa-pedidos { margin-top: 1em; }

/* "Como funciona?": botão discreto no rodapé do painel + cartão de 3 passos por cima */
.auto-ajuda-abre {
  margin-top: 0.9em;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 0.9em;
  border-radius: 12px;
  border: 1px solid var(--a-linha);
  background: rgba(255, 255, 255, 0.04);
  color: var(--a-texto);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auto-ajuda-abre:hover { background: rgba(255, 255, 255, 0.08); border-color: #3d3742; }
.auto-ajuda-abre svg { width: 20px; height: 20px; }
.auto-ajuda {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  background: rgba(7, 6, 8, 0.82);
}
.auto-ajuda-cartao {
  width: min(640px, 100%);
  padding: 1.6em 1.8em;
  border-radius: var(--a-raio);
  border: 1px solid var(--a-linha);
  background: linear-gradient(160deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra);
  text-align: center;
}
.auto-ajuda-passos { list-style: none; margin: 1.2em 0; padding: 0; text-align: left; }
.auto-ajuda-passos li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 1.25em;
  line-height: 1.35;
  color: var(--a-texto);
}
.auto-ajuda-passos li + li { margin-top: 0.8em; }
.auto-ajuda-passos b { color: var(--a-ouro-claro); }
.auto-ajuda-n {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  color: var(--a-tinta-ouro);
  font-weight: 850;
}
.auto-ajuda .auto-btn { min-height: 3em; padding: 0 1.6em; font-size: 1.1em; }
.auto-pedidos-titulo {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--a-ouro);
  font-weight: 800;
}
.auto-pedidos { list-style: none; margin: 0.6em 0 0; padding: 0; }
.auto-pedido {
  display: flex;
  align-items: center;
  padding: 0.55em 0.6em 0.55em 0.8em;
  border-radius: 12px;
  border: 1px solid var(--a-linha);
  background: rgba(255, 255, 255, 0.035);
}
.auto-pedido + .auto-pedido { margin-top: 8px; }
.auto-pedido-texto { flex: 1 1 auto; min-width: 0; margin-right: 0.7em; font-size: 0.9em; line-height: 1.3; color: var(--a-suave); overflow-wrap: anywhere; }
.auto-pedido-texto b { color: var(--a-texto); }
.auto-pedido-quem { color: var(--a-ouro); font-weight: 650; }
.auto-pedido .auto-btn { flex: none; }
.auto-pedido-tirar { margin-left: 6px; color: var(--a-fraco); }
.auto-pedido-tirar:hover { color: #ff6b8a; border-color: #ff6b8a; }
.auto-pedido-tirar svg { width: 16px; height: 16px; }
.auto-pedidos-vazio, .auto-pedidos-mais { color: var(--a-fraco); font-size: 0.85em; margin-top: 0.6em; }

/* ---------- 3) nada pra tocar ---------- */
.auto-vazio { display: flex; align-items: center; justify-content: center; min-height: 100%; }
.auto-cartao-aviso {
  max-width: 600px;
  padding: 1.6em;
  border-radius: var(--a-raio);
  border: 1px solid var(--a-linha);
  background: linear-gradient(180deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra);
}
.auto-botoes-vazio { display: flex; flex-wrap: wrap; margin: 0.6em -5px 0; }
.auto-botoes-vazio .auto-btn { margin: 5px; }

/* ---------- deitado / tela grande (TV): letra à esquerda, festa à direita ---------- */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .auto {
    --a-gap: 2.4vw;
    padding:
      calc(env(safe-area-inset-top, 0px) + 20px)
      calc(env(safe-area-inset-right, 0px) + 3vw)
      calc(env(safe-area-inset-bottom, 0px) + 20px)
      calc(env(safe-area-inset-left, 0px) + 3vw);
  }
  .auto-tocando {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 28vw);
    align-items: start;
    min-height: 100%;
  }
  .auto[data-auto-festa="off"] .auto-tocando { grid-template-columns: minmax(0, 1fr); }
  .auto-palco { min-height: calc(100vh - 40px); }
  .auto-titulo { font-size: 2.2em; font-size: clamp(1.35em, min(2.5vw, 6vh), 3.4em); }
  .auto-letra { min-height: 0; padding: 1em 0; }
  .auto-verso { font-size: 3em; font-size: clamp(1.7em, min(4.5vw, 10vh), 5.6em); line-height: 1.16; }
  .auto-verso-prox { font-size: 1.6em; font-size: clamp(1.1em, min(2.1vw, 4.8vh), 2.8em); }
  .auto-botoes { display: flex; flex-wrap: wrap; margin: -5px; }
  .auto-palco > .auto-botoes { margin-top: calc(1em - 5px); }
  .auto-botoes .auto-btn { margin: 5px; flex: 0 1 auto; padding-left: 1.1em; padding-right: 1.1em; }
  .auto-botoes .auto-btn-cantar { flex: 1 1 13em; }

  .auto-festa {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 1.2em;
  }
  .auto-festa-topo { flex-direction: column; text-align: center; }
  .auto-qr { width: 100%; max-width: 300px; max-width: min(300px, 40vh); margin: 0 auto; padding: 10px; }
  .auto-festa-info { margin: 0.8em 0 0; }
  .auto-codigo { font-size: 2.2em; text-indent: 0.28em; }
}

/* deitado com pouca altura (celular de lado): aperta tudo numa tela só */
@media (orientation: landscape) and (max-height: 500px) {
  .auto { font-size: 15px; }
  .auto-palco > * + * { margin-top: 0.6em; }
  .auto-palco { min-height: calc(100vh - 40px); }
  .auto-btn { min-height: 2.6em; padding-top: 0.5em; padding-bottom: 0.5em; }
  .auto-btn-cantar { min-height: 2.8em; }
  /* Pular / Trocar / Sair só com o ícone (o nome fica no aria-label) */
  .auto-botoes .auto-btn:not(.auto-btn-cantar) span { display: none; }
  .auto-botoes .auto-btn:not(.auto-btn-cantar) { padding-left: 0.85em; padding-right: 0.85em; }
  .auto-cartao { min-height: 6em; }
  .auto-sub { display: none; }
  .auto-tocando { grid-template-columns: minmax(0, 1fr) minmax(270px, 38vw); }
  .auto-festa { padding: 0.8em; scrollbar-width: thin; }
  .auto-pedido .auto-btn span { display: none; } /* "Cantar" só com o microfone (aria-label no botão) */
  .auto-festa-topo { flex-direction: row; text-align: left; }
  .auto-qr { width: 34vh; max-width: 140px; margin: 0; padding: 6px; }
  .auto-festa-info { margin: 0 0 0 0.8em; }
  .auto-codigo { font-size: 1.5em; text-indent: 0; }
  .auto-festa-pedidos { margin-top: 0.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .auto *, .auto *::before, .auto *::after { animation: none !important; transition: none !important; }
}

/* ---------- o "Puxou": "Kobalski!" + canta qualquer pedaço = a original entra junto ---------- */
.auto-chip-ouvido { margin-left: 0.5em; margin-right: auto; color: var(--a-texto); background: rgba(255, 255, 255, 0.05); border-color: var(--a-linha); }
.auto-chip-ouvido svg { width: 1.1em; height: 1.1em; margin-right: 0.45em; color: var(--a-ouro-claro); animation: auto-ouvido 1.6s ease-in-out infinite; }
@keyframes auto-ouvido { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* a vigia ouviu alguém falar agora: a etiqueta acende em dourado (prova de que está escutando) */
.auto-chip-ouvido.auto-chip-ouvindo { border-color: var(--a-ouro-claro); background: rgba(217, 178, 74, 0.18); box-shadow: 0 0 0 3px rgba(217, 178, 74, 0.18); }
.auto-chip-ouvido.auto-chip-ouvindo svg { animation-duration: 0.45s; opacity: 1; }
/* o BOTÃO DO KOBALSKI (21/10/2026, no lugar do "Kobalski" solto): o rosto dele + "Toca e canta outra / O Kobalski
   acha e a banda entra." Logo depois do "Cantar essa", mas escuro com borda de ouro (o Cantar é ouro cheio): não
   confunde. O rosto é o ícone e aparece em qualquer largura (360 px incluso). Desenho: maquete ensinar-cartoes/radio */
.auto-puxar {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate; /* a mãozinha (z-index) fica DENTRO do botão: nunca por cima do cartão do Kobalski ouvindo */
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  border: 1.5px solid rgba(242, 210, 122, 0.7);
  background: linear-gradient(180deg, rgba(242, 210, 122, 0.14), rgba(217, 178, 74, 0.06));
  color: var(--a-texto);
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.auto-puxar:hover { background: linear-gradient(180deg, rgba(242, 210, 122, 0.22), rgba(217, 178, 74, 0.1)); border-color: var(--a-ouro-claro); }
.auto-puxar:active { transform: scale(0.985); }
/* a bolinha dourada com o rosto (a mesma do apresentador nas outras telas) */
.auto-puxar-bola {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffe9a8 0%, #ffc83d 40%, #b0457a 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 200, 61, 0.35);
}
.auto-puxar-bola::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff3d9a, #3de0ff, #ffc83d, #ff3d9a);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2.5px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2.5px));
}
.auto-puxar-rosto {
  position: absolute;
  top: 6%; right: 6%; bottom: 6%; left: 6%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #4a3a1c 0%, #241d24 46%, #0c0a10 100%);
}
.auto-puxar-rosto .vz-mascote { position: absolute; left: 6%; top: 4%; display: block; width: 88%; height: 96%; }
.auto-puxar-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.auto-puxar-txt b { font-size: 1.2em; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; color: var(--a-ouro-claro); }
.auto-puxar-txt small { margin-top: 2px; font-size: 1em; line-height: 1.25; color: #e7dcc6; }
/* barrinhas de som: a banda (mexem só com a música tocando) */
.auto-puxar-barras { flex: none; display: inline-flex; align-items: center; height: 26px; color: var(--a-ouro-claro); }
.auto-puxar-barras i { display: block; width: 4px; height: 100%; margin-left: 3px; border-radius: 2px; background: currentColor; transform: scaleY(0.55); }
.auto-puxar-barras i:nth-child(1) { height: 45%; }
.auto-puxar-barras i:nth-child(2) { height: 80%; }
.auto-puxar-barras i:nth-child(4) { height: 65%; }
.auto-puxar-barras i:nth-child(5) { height: 38%; }
.auto[data-auto-estado="tocando"] .auto-puxar-barras i { animation: auto-puxar-barra 0.9s ease-in-out infinite; }
.auto[data-auto-estado="tocando"] .auto-puxar-barras i:nth-child(2) { animation-delay: -0.3s; }
.auto[data-auto-estado="tocando"] .auto-puxar-barras i:nth-child(3) { animation-delay: -0.6s; }
.auto[data-auto-estado="tocando"] .auto-puxar-barras i:nth-child(4) { animation-delay: -0.15s; }
.auto[data-auto-estado="tocando"] .auto-puxar-barras i:nth-child(5) { animation-delay: -0.45s; }
@keyframes auto-puxar-barra { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
/* a mini demonstração (index.js põe .auto-puxar-demo uma vez por rádio ligado): a mãozinha toca no rosto, um anel
   estoura e ela sai. Sem movimento (prefers-reduced-motion) a mão nem aparece */
.auto-puxar-dedo {
  position: absolute;
  z-index: 3;
  left: 34px;
  top: 34px;
  width: 40px;
  height: 48px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.auto-puxar-toque {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border-radius: 50%;
  border: 3px solid #fff;
  opacity: 0;
  pointer-events: none;
}
.auto-puxar-demo .auto-puxar-dedo { animation: auto-puxar-dedo 10s ease-in-out 1 both; }
.auto-puxar-demo .auto-puxar-toque { animation: auto-puxar-toque 10s ease-out 1 both; }
@keyframes auto-puxar-dedo {
  0% { opacity: 0; transform: translate(26px, 30px); }
  4% { opacity: 1; transform: translate(6px, 8px); }
  7.5% { opacity: 1; transform: translate(-4px, -6px) scale(0.9); }
  11% { opacity: 1; transform: translate(6px, 8px) scale(1); }
  40% { opacity: 1; transform: translate(6px, 8px); }
  46%, 100% { opacity: 0; transform: translate(26px, 30px); }
}
@keyframes auto-puxar-toque {
  0%, 7% { opacity: 0; transform: scale(0.7); }
  8% { opacity: 0.95; transform: scale(0.8); }
  15%, 100% { opacity: 0; transform: scale(1.5); }
}
/* a chamada da vez no ar: o botão apaga junto com os outros (ver a regra de "chamando" lá em cima) */
.auto[data-auto-estado="chamando"] .auto-puxar { opacity: 0.4; pointer-events: none; }

/* a DICA da 1ª vez (uma vez por aparelho): balão branco do Kobalski em cima do botão, no meio dos botões (não
   flutua por cima da letra nem do Pausar/Pular/Trocar ritmo/Sair; empurra eles um pouco pra baixo e some no
   "Entendi" ou no toque no botão). Desenho: maquete ensinar-fazendo/radio */
.auto-ensina { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; }
.auto-ensina-balao {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-column-gap: 12px;
  column-gap: 12px;
  grid-row-gap: 8px;
  row-gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 20px;
  background: #fff;
  color: #1a0b2e;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  animation: auto-ensina-entra 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
/* a pontinha do balão aponta pro rosto do botão */
.auto-ensina-balao::after {
  content: "";
  position: absolute;
  left: 38px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: #fff;
  border-radius: 3px;
  transform: rotate(45deg);
}
.auto-ensina-rosto {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #d4a53a;
  background: radial-gradient(circle at 50% 38%, #3d1f63 0%, #1a0b2e 62%, #110620 100%);
}
.auto-ensina-rosto .vz-mascote { position: absolute; left: 8%; top: 2%; display: block; width: 84%; height: 96%; }
.auto-ensina-texto { font-size: 1.2em; font-weight: 850; line-height: 1.22; }
.auto-ensina-texto b { color: #c2187a; font-weight: 900; }
.auto-ensina-pe { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.auto-ensina-pe small { margin-right: 10px; font-size: 1em; font-weight: 700; color: #5b4a6e; }
.auto .auto-ensina-ok { /* (.auto: vence o ".auto button { font: inherit }" lá de cima) */
  flex: none;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3d9a 0%, #c43dff 100%);
  box-shadow: 0 8px 20px rgba(255, 61, 154, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 1.1em;
  font-weight: 900;
  cursor: pointer;
}
.auto .auto-ensina-ok:focus { outline-color: #c43dff; }
.auto-ensina-seta { align-self: flex-start; display: block; width: 34px; height: 30px; margin: 6px 0 -4px 21px; color: #ffc83d; animation: auto-ensina-seta 0.8s ease-in-out infinite alternate; }
.auto-ensina-seta svg { display: block; width: 34px; height: 30px; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(255, 200, 61, 0.6)); }
@keyframes auto-ensina-entra { from { transform: translateY(8px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes auto-ensina-seta { from { transform: translateY(0); } to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .auto-puxar-dedo, .auto-puxar-toque { display: none; }
}
/* deitado / TV: os botões viram uma fileira; o do Kobalski cresce junto com o Cantar e a dica ganha a linha */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .auto-botoes .auto-puxar { margin: 5px; flex: 1 1 19em; width: auto; }
  .auto-botoes .auto-ensina { margin: 5px; flex: 1 1 100%; }
  .auto-ensina-balao { max-width: 34em; }
}
/* deitado com pouca altura (celular de lado): o botão encolhe (fica o rosto e o "Toca e canta outra") */
@media (orientation: landscape) and (max-height: 500px) {
  .auto-puxar { min-height: 2.6em; padding: 4px 12px 4px 6px; }
  .auto-puxar-bola { width: 42px; height: 42px; }
  .auto-puxar-txt small, .auto-puxar-dedo, .auto-puxar-toque { display: none; }
  /* a dica não cabe sem empurrar os botões pra fora da tela: fica pra quando o celular estiver em pé */
  .auto-ensina { display: none; }
}

/* o cartão grande por cima do rádio (lido da TV a 3 m) */
.auto-puxou {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 6, 8, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin: 0 !important;
}
.auto-puxou-cartao {
  width: 100%;
  max-width: 980px;
  text-align: center;
  padding: 1.6em 1.4em;
  border-radius: var(--a-raio);
  background: linear-gradient(180deg, var(--a-bg-2), var(--a-bg-1));
  border: 1px solid rgba(217, 178, 74, 0.4);
  box-shadow: var(--a-sombra), 0 0 80px rgba(217, 178, 74, 0.12);
}
.auto-puxou-cartao > * + * { margin-top: 0.7em; }
.auto-puxou-titulo { font-size: 2.2em; font-size: clamp(1.7em, 4.2vw, 4em); font-weight: 850; line-height: 1.1; color: var(--a-ouro-claro); }
.auto-puxou-sub { color: var(--a-suave); font-size: 1.05em; font-size: clamp(1em, 1.6vw, 1.6em); }
.auto-puxou-ouvi { min-height: 1.5em; color: var(--a-texto); font-size: 1.1em; font-size: clamp(1em, 1.8vw, 1.8em); font-style: italic; opacity: 0.9; }
.auto-puxou-ouvi:empty { opacity: 0; }
/* ondinhas: a altura segue a voz (--nivel 0..1, posto pelo js) */
.auto-puxou-onda { display: flex; align-items: center; justify-content: center; height: 3.2em; }
.auto-puxou-onda i {
  display: block;
  width: 0.55em;
  margin: 0 0.22em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-escuro));
  height: calc(0.6em + var(--nivel, 0) * 2.6em);
  transition: height 90ms linear;
  animation: auto-onda 0.9s ease-in-out infinite alternate;
}
.auto-puxou-onda i:nth-child(2n) { animation-delay: -0.3s; height: calc(0.6em + var(--nivel, 0) * 1.8em); }
.auto-puxou-onda i:nth-child(3n) { animation-delay: -0.55s; height: calc(0.6em + var(--nivel, 0) * 2.2em); }
@keyframes auto-onda { from { opacity: 0.6; } to { opacity: 1; } }
.auto-puxou[data-fase="achou"] .auto-puxou-titulo { color: #fff; }
.auto-puxou[data-fase="achou"] .auto-puxou-cartao { border-color: var(--a-ouro); box-shadow: var(--a-sombra), 0 0 120px rgba(217, 178, 74, 0.35); }
.auto-puxou[data-fase="achou"] .auto-puxou-onda i { animation: auto-eq 0.45s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .auto-puxou-onda i, .auto-chip-ouvido svg { animation: none; }
}

/* ---------- o FORNO na TV e o RANKING DA NOITE (js/automatico/forno-tv.js, ranking.js) ----------
   O forno PEQUENO (o cartão em miniatura na lateral, embaixo do QR: mais abaixo, .forno-mini) liga sempre; o GRANDE e o
   ranking só com a edição ligada (data-auto-edicao na raiz; sem ela os elementos ficam [hidden]). Só tela, sem som. */

.auto-forno-lado { margin-top: 0.6em; min-width: 0; }
/* com pedido no forno a lista não diz "Ninguém pediu ainda" (o defeito da foto do dono, 22/10: pedido pela voz no
   forno e a lista vazia) */
.auto[data-auto-forno="on"] .auto-pedidos-vazio { display: none; }
.auto-fg-kicker {
  display: flex;
  align-items: center;
  gap: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7em;
  font-weight: 800;
  color: var(--a-ouro);
}
.auto-fg-kicker svg { width: 1.35em; height: 1.35em; flex: none; color: #ff9f40; animation: auto-chama 1.1s ease-in-out infinite alternate; }
@keyframes auto-chama { from { transform: scale(0.92) rotate(-3deg); opacity: 0.8; } to { transform: scale(1.08) rotate(3deg); opacity: 1; } }
.auto-fg-quem b { color: var(--a-ouro-claro); }
.auto-forno-barra { height: 8px; margin-top: 0.5em; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.auto-forno-barra i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--a-ouro-forte), var(--a-ouro-claro));
  box-shadow: 0 0 12px rgba(242, 210, 122, 0.5);
  transform-origin: left center;
  transform: scaleX(var(--f, 0));
  transition: transform 1.9s linear;
}
@keyframes auto-forno-pop { 0% { transform: scale(0.9); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
/* com o forno no canto, o QR encolhe um tiquinho (tudo cabe na TV sem rolar) */
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .auto[data-auto-forno="on"] .auto-qr { max-width: 250px; max-width: min(250px, 30vh); }
}
/* tela baixa (o PC 1600x900 do dono): a miniatura do forno vem INTEIRA, com a faixa dos quadrinhos (22/10); o QR
   encolhe mais um pouco pra lateral caber até o "Como funciona?" */
/* (22/10, o Cancelar no pé do cartão: a linha dele tem 44 px, 24 a mais que só o tempo que falta) o QR devolve esses
   24 px: 176 em vez de 200 (medido no 1600x900: o "Como funciona?" volta a caber inteiro) */
@media (min-width: 900px) and (max-height: 960px) {
  .auto[data-auto-forno="on"] .auto-qr { max-width: min(176px, 20vh); }
}

/* o forno GRANDE (só na edição): só com o palco PARADO (pausa, "A música parou."); aí ele ocupa o lugar da letra e o
   pequeno da lateral sai (o mesmo cartão duas vezes na tela). No Kobalski normal o forno também liga (o pequeno), mas
   não tem o grande: a letra e o pequeno ficam onde estão */
.auto-forno-grande { display: none; }
.auto[data-auto-edicao][data-auto-forno="on"][data-auto-estado="pausado"] .auto-forno-grande,
.auto[data-auto-edicao][data-auto-forno="on"][data-auto-estado="parado"] .auto-forno-grande { display: block; }
.auto[data-auto-edicao][data-auto-forno="on"][data-auto-estado="pausado"] .auto-letra,
.auto[data-auto-edicao][data-auto-forno="on"][data-auto-estado="parado"] .auto-letra,
.auto[data-auto-edicao][data-auto-forno="on"][data-auto-estado="pausado"] .auto-forno-lado,
.auto[data-auto-edicao][data-auto-forno="on"][data-auto-estado="parado"] .auto-forno-lado { display: none; }
.auto-fg {
  padding: 1.1em 1.3em 1.2em;
  border-radius: var(--a-raio);
  border: 1px solid rgba(217, 178, 74, 0.5);
  background:
    radial-gradient(700px 260px at 0% 0%, rgba(255, 159, 64, 0.14), transparent 70%),
    linear-gradient(180deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra), 0 0 80px rgba(217, 178, 74, 0.12);
}
.auto-fg-kicker { font-size: 0.85em; }
.auto-fg-titulo { margin-top: 0.2em; font-size: 2em; font-size: clamp(1.6em, 3vw, 3.2em); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.auto-fg-artista { margin-top: 0.2em; font-weight: 700; opacity: 0.85; }
.auto-fg-quem { margin-top: 0.25em; font-size: 1.1em; color: var(--a-suave); }
.auto-fg-passos { list-style: none; margin: 1em 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 0.5em; gap: 0.5em; }
@media (min-width: 900px) {
  .auto-fg-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0.6em 1.6em; }
}
.auto-fg-passo { display: flex; align-items: center; gap: 0.7em; font-size: 1.12em; color: var(--a-fraco); }
.auto-fg-marca {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--a-linha);
  font-size: 0.85em;
  font-weight: 850;
}
.auto-fg-marca svg { width: 1.15em; height: 1.15em; }
.auto-fg-texto small { display: block; font-size: 0.72em; font-weight: 650; color: var(--a-ouro-claro); }
.auto-fg-feito { color: var(--a-suave); }
.auto-fg-feito .auto-fg-marca { border-color: var(--a-ouro); background: rgba(217, 178, 74, 0.18); color: var(--a-ouro-claro); }
.auto-fg-agora { color: #fff; font-weight: 800; }
.auto-fg-agora .auto-fg-marca {
  border-color: transparent;
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  color: var(--a-tinta-ouro);
  box-shadow: 0 0 0 6px rgba(242, 210, 122, 0.16);
  animation: auto-fg-pulsa 1.4s ease-in-out infinite;
}
@keyframes auto-fg-pulsa { 0%, 100% { box-shadow: 0 0 0 4px rgba(242, 210, 122, 0.12); } 50% { box-shadow: 0 0 0 9px rgba(242, 210, 122, 0.26); } }
.auto-fg-barra { height: 12px; margin-top: 1.1em; }
.auto-fg-previsao { min-height: 1.3em; margin-top: 0.5em; font-size: 1.1em; font-weight: 750; color: var(--a-ouro-claro); font-variant-numeric: tabular-nums; }
/* (22/10/2026, pedido do dono: "dá pra cancelar ali naquela plaquinha mesmo do processo?") o pé do cartão: o tempo que
   falta à esquerda e o CANCELAR à direita, na mesma linha (o cartão não cresce). Discreto (só o contorno, na cor do
   cartão) e tocável (44 px). 1º toque arma: vermelho, "Cancelar? Toca de novo" (4 s); o 2º cancela
   (js/pedido-cancelar.js). A edição Embaixador troca os tokens (css/embaixador.css) e o vermelho da faixa */
/* a linha NÃO quebra: armado, o botão cresce pra esquerda (a ponta direita fica onde estava: o 2º toque cai no mesmo
   lugar) e o tempo que falta encolhe com reticências por 4 s */
.auto-fg-pe { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0.8em; margin-top: 0.5em; }
.auto-fg-pe .auto-fg-previsao { flex: 1 1 auto; min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-fg-cancelar {
  flex: none;
  margin-left: auto;
  min-height: 44px;
  padding: 0 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(217, 178, 74, 0.45);
  background: rgba(0, 0, 0, 0.18);
  color: var(--a-suave);
  font: inherit;
  font-size: 0.92em;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.auto-fg-cancelar:hover { color: var(--a-texto); border-color: var(--a-ouro); }
.auto-fg-cancelar:focus-visible { outline: 3px solid var(--a-ouro-claro); outline-offset: 2px; }
.auto-fg-cancelar[data-estado="armado"] { color: #fff; background: #b8322a; border-color: #ff8f7f; }
.auto-fg-cancelar[data-estado="enviando"] { opacity: 0.7; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .auto-fg-cancelar { transition: none; } }
.auto-fg-tambem { margin-top: 0.7em; font-size: 0.9em; color: var(--a-fraco); }
.auto-fg-chegou {
  text-align: center;
  border-color: var(--a-ouro-claro);
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  color: var(--a-tinta-ouro);
  box-shadow: var(--a-sombra), 0 0 120px rgba(242, 210, 122, 0.35);
  animation: auto-forno-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.auto-fg-grito { font-size: 2.2em; font-size: clamp(1.8em, 4.2vw, 4.4em); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.auto-fg-chegou .auto-fg-titulo { font-size: clamp(1.3em, 2.4vw, 2.4em); }
.auto-fg-sub { margin-top: 0.5em; font-size: 1.15em; font-weight: 700; }

/* a pílula dourada ("entrou na festa", "Chegou a de Fulano!", a nota) na edição: na TV/PC ela vai pro canto de cima,
   no lugar do "Modo automático", em vez do meio (lá ela caía em cima do nome da música quando ele é comprido) */
@media (min-width: 900px) {
  .auto[data-auto-edicao] .auto-entrou { left: auto; right: 0; top: 0; transform: none; max-width: 70%; }
  .auto[data-auto-edicao] .auto-entrou-entra { animation-name: auto-entrou-pop-canto; }
  .auto[data-auto-edicao] .auto-palco:has(> .auto-entrou:not([hidden])) .auto-marca { visibility: hidden; }
}
/* o forno grande numa tela mais baixa (PC 1600x900, notebook): mais justo, pros botões não saírem da tela */
@media (min-width: 900px) and (max-height: 960px) {
  .auto-fg { padding: 0.8em 1.1em 0.9em; }
  .auto-fg-titulo { font-size: clamp(1.4em, 2.4vw, 2.4em); }
  .auto-fg-passos { margin-top: 0.6em; gap: 0.35em 1.6em; }
  .auto-fg-passo { font-size: 1em; }
  .auto-fg-barra { margin-top: 0.8em; }
}
@keyframes auto-entrou-pop-canto {
  0% { transform: translateY(-12px) scale(0.86); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---------- (22/10/2026, pedido do dono) o forno PEQUENO na lateral, embaixo do QR ----------
   "Eu queria que aparecesse a mesma tela que aparece quando está pausado": é o MESMO cartão do forno grande (o
   js/automatico/forno-tv.js htmlFornoMini desenha com o htmlFornoGrande), só que em miniatura: a letra e os espaços
   encolhem, as 6 etapas em duas colunas e a cena numa faixa baixinha. Liga no Kobalski normal também.
   FUNCIONANDO IGUAL (dono 22/10: "eu acho bonita aquela tela inteira... queria uma miniatura funcionando igual"): a
   cena com os quadrinhos, a chama e a etapa de agora se mexem como no grande; com movimento reduzido, param como lá. Legível da TV a 3 m: a letra do .auto cresce com a tela (~20 px numa
   de 1920; aqui 0,8 disso). Sem rolar de lado: tudo encolhe (min-width: 0) e o nome comprido (o pedaço cantado) para
   em 2 linhas. Cores pelos tokens do .auto (a edição Embaixador troca os dela no css/embaixador.css).
   (os seletores levam o .forno-mini na frente: ganham dos do grande aqui e dos do css/forno-tv.css, que chega depois) */
.forno-mini { font-size: 0.8em; }
.forno-mini .auto-fg { min-width: 0; padding: 0.75em 0.85em 0.8em; border-radius: var(--a-raio-p); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.forno-mini .auto-fg-cabeca { gap: 0.4em 0.8em; }
.forno-mini .auto-fg-kicker { font-size: 0.78em; }
.forno-mini .auto-fg-titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.15em;
  font-size: 1.3em;
  line-height: 1.12;
}
.forno-mini .auto-fg-quem { margin-top: 0.15em; font-size: 0.95em; }
.forno-mini .auto-fg-relogio { gap: 0.2em; margin-top: 0; }
.forno-mini .auto-fg-relogio-rot { font-size: 0.68em; letter-spacing: 0.1em; }
.forno-mini .auto-fg .auto-fg-relogio b { font-size: 1.3em; border-width: 1.5px; }
.forno-mini .auto-fg-passos {
  margin-top: 0.6em;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 0.3em 0.8em;
}
.forno-mini .auto-fg-passo { gap: 0.45em; font-size: 0.88em; line-height: 1.2; }
.forno-mini .auto-fg-marca { width: 1.6em; height: 1.6em; border-width: 1.5px; font-size: 0.8em; }
.forno-mini .auto-fg-texto { min-width: 0; }
.forno-mini .auto-fg-texto small { font-size: 0.9em; }
/* a cena: a mesma faixa, menor (tudo nela é em "em": a letra dela encolhe e o desenho junto), andando como no grande */
.forno-mini .auto-fg-cena { height: 6.4em; margin-top: 1.1em; padding: 0.5em 1.2em; gap: 1.2em; border-radius: 10px; font-size: 0.5em; }
.forno-mini .fgc-rot-musica { display: none; }
.forno-mini .fgc-rotulos { width: 4em; font-size: 1.35em; }
.forno-mini .fgc-tela { font-size: 0.95em; }
.forno-mini .auto-fg-barra { height: 8px; margin-top: 0.6em; }
.forno-mini .auto-fg-previsao { min-height: 1.2em; margin-top: 0.35em; font-size: 0.92em; }
/* o Cancelar na miniatura: a mesma linha do tempo que falta, a letra um pouco menor (os 44 px pra tocar ficam) */
.forno-mini .auto-fg-pe { margin-top: 0.35em; gap: 0.6em; }
.forno-mini .auto-fg-pe .auto-fg-previsao { margin-top: 0; }
.forno-mini .auto-fg-cancelar { padding: 0 0.95em; font-size: 0.86em; }
.forno-mini .auto-fg-sub { margin-top: 0.35em; font-size: 0.95em; }
/* a pronta: o cartão dourado do grande ("Chegou a de Fulano!"), com o "Pronta!" em cima */
.forno-mini .auto-fg-chegou { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 22px rgba(242, 210, 122, 0.22); }
.forno-mini .auto-fg-pronta { justify-content: center; color: var(--a-tinta-ouro); }
.forno-mini .auto-fg-pronta svg { color: var(--a-tinta-ouro); }
.forno-mini .auto-fg-grito { margin-top: 0.15em; font-size: 1.55em; line-height: 1.1; }
.forno-mini .auto-fg-chegou .auto-fg-titulo { margin-top: 0.2em; font-size: 1.12em; }
.forno-mini .auto-fg-artista { margin-top: 0.1em; font-size: 0.9em; }
.forno-mini .auto-fg-fim { margin-top: 0.45em; padding: 0.2em 0.7em; border-width: 1.5px; font-size: 0.9em; }
.forno-mini .auto-fg-fim b { font-size: 1.3em; }
/* os outros pedidos no forno: só a conta */
.forno-mini .auto-fg-mais { margin-top: 0.45em; font-size: 0.92em; font-weight: 700; color: var(--a-suave); }
/* celular deitado (tela bem baixa): a faixa da cena sai e fica só a barra. No PC 1600x900 ela FICA (dono 22/10: igual à da pausa) */
@media (orientation: landscape) and (max-height: 500px) {
  .forno-mini .auto-fg-cena { display: none; }
}
/* celular em pé (a lateral vai pra baixo da letra, estreita): as etapas numa coluna só */
@media (max-width: 560px) {
  .forno-mini { font-size: 0.86em; }
  .forno-mini .auto-fg-passos { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

/* RANKING DA NOITE: o botão do canto da festa e o cartão grande por cima do rádio */
.auto-ranking-abre { border-color: rgba(217, 178, 74, 0.45); color: var(--a-ouro-claro); }
.auto-ranking-abre svg { color: var(--a-ouro-claro); }
.auto-ranking {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 20;
  display: flex;
  padding: 1.5em;
  overflow-y: auto;
  background: rgba(7, 6, 8, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin: 0 !important;
}
.auto-ranking-cartao {
  width: 100%;
  max-width: 780px;
  margin: auto;
  padding: 1.5em 1.6em;
  border-radius: var(--a-raio);
  border: 1px solid rgba(217, 178, 74, 0.45);
  background: linear-gradient(160deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra), 0 0 100px rgba(217, 178, 74, 0.15);
  text-align: center;
}
.auto-ranking-titulo { margin-top: 0.3em; font-size: 1.5em; font-weight: 850; line-height: 1.15; }
.auto-ranking-vazio { margin-top: 0.6em; color: var(--a-suave); }
.auto-ranking-estrela {
  margin-top: 1em;
  padding: 1em 1em 1.2em;
  border-radius: var(--a-raio);
  background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte));
  color: var(--a-tinta-ouro);
  box-shadow: 0 0 80px rgba(242, 210, 122, 0.35);
}
.auto-ranking-coroa svg { width: 2.6em; height: 2.6em; color: #fff7d6; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.auto-ranking-rotulo { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8em; font-weight: 900; }
.auto-ranking-nome { margin-top: 0.1em; font-size: 2.2em; font-size: clamp(1.8em, 4vw, 3.6em); font-weight: 900; line-height: 1.05; overflow-wrap: anywhere; }
.auto-ranking-nota { margin-top: 0.15em; }
.auto-ranking-nota b { font-size: 2.4em; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.auto-ranking-nota small { margin-left: 0.35em; font-weight: 800; }
.auto-ranking-musica { margin-top: 0.2em; font-weight: 650; opacity: 0.85; overflow-wrap: anywhere; }
.auto-ranking-lista { list-style: none; margin: 1em 0 0; padding: 0; text-align: left; }
.auto-ranking-linha {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 0.9em;
  border-radius: 12px;
  border: 1px solid var(--a-linha);
  background: rgba(255, 255, 255, 0.035);
}
.auto-ranking-linha + .auto-ranking-linha { margin-top: 8px; }
.auto-ranking-pos { flex: none; width: 2.2em; font-size: 1.2em; font-weight: 900; color: var(--a-ouro); }
.auto-ranking-quem { flex: 1 1 auto; min-width: 0; }
.auto-ranking-quem b, .auto-ranking-quem small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-ranking-quem b { font-size: 1.15em; }
.auto-ranking-quem small { color: var(--a-fraco); font-size: 0.85em; }
.auto-ranking-pts { flex: none; font-size: 1.5em; font-weight: 900; color: var(--a-ouro-claro); font-variant-numeric: tabular-nums; }
.auto-ranking-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 1.2em; }
.auto-ranking-botoes .auto-btn { min-width: 9em; }
.auto-ranking-botoes .auto-ranking-zerar { min-width: 0; color: var(--a-fraco); }
@media (orientation: landscape) and (max-height: 500px) {
  .auto-ranking { padding: 0.6em; }
  .auto-ranking-cartao { padding: 0.9em 1em; }
  .auto-ranking-estrela { margin-top: 0.5em; padding: 0.6em; }
  .auto-ranking-coroa { display: none; }
  .auto-fg-passo { font-size: 0.95em; }
}

/* =====================================================================================================================
   (22/10/2026, revisão da edição Embaixador, defeito 3) A FESTA NA TV DE VERDADE. A TV do dono abre o Chrome em
   1920x911 (as abas e a barra comem o resto): com 6 na fila e 2 no forno só apareciam 2 nomes, o "Ranking da noite" e
   o "Como funciona?" sumiam embaixo e, na pausa, o Continuar/Pular/Sair ficavam cortados. Agora:
     - a fila em LINHAS BAIXAS (o número, quem, a música, numa linha), até 8 (js/automatico/painel-festa.js);
     - o canto da festa é uma coluna da altura da tela com o RODAPÉ FIXO (Ranking + Como funciona, lado a lado): quem
       encolhe (e rola, se precisar) é só a lista do meio;
     - tela baixa (até 1000 px de altura): o QR fica ao lado do código (ganha ~110 px) e o cartão grande da pausa fica
       mais justo, pros botões do rádio caberem.
   Os testes de tela fotografam 1920x911 (tests/forno-tv-tela.mjs, embaixador-tela.mjs, ensaio-video.mjs)
   ===================================================================================================================== */
.auto-pedido-n {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  margin-right: 0.55em;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(217, 178, 74, 0.16);
  color: var(--a-ouro-claro);
  font-size: 0.82em;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.auto-pedido:first-child .auto-pedido-n { background: linear-gradient(180deg, var(--a-ouro-claro), var(--a-ouro-forte)); color: var(--a-tinta-ouro); }
.auto-pedido-texto .auto-pedido-quem { font-weight: 800; }
.auto-festa-pe { display: flex; flex-wrap: wrap; gap: 0 0.6em; }
.auto-festa-pe .auto-ajuda-abre { flex: 1 1 10em; width: auto; }
.auto[data-auto-forno="on"] .auto-pedidos-titulo { margin-top: 0.7em; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .auto-festa {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    overflow: hidden;
  }
  .auto-festa-topo, .auto-festa-pe, .auto-festa > .emb-tv-rodape { flex: none; }
  .auto-festa-pedidos {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 178, 74, 0.4) transparent;
  }
  .auto-festa-pe { padding-top: 0.2em; }
  .auto-festa-pe .auto-ajuda-abre { margin-top: 0.6em; }
  /* a fila: linhas baixas, tudo numa linha (o "Cantar" vira só o microfone; o nome dele fica no aria-label) */
  .auto-pedidos { margin-top: 0.45em; }
  .auto-pedido { padding: 0.28em 0.35em 0.28em 0.5em; border-radius: 10px; }
  .auto-pedido + .auto-pedido { margin-top: 5px; }
  .auto-pedido-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95em; line-height: 1.35; margin-right: 0.5em; }
  .auto-pedido .auto-btn { min-height: 2.1em; padding: 0 0.7em; }
  .auto-pedido .auto-btn span { display: none; }
  .auto-pedido .auto-btn svg { margin: 0; }
  .auto-pedidos-vazio, .auto-pedidos-mais { margin-top: 0.4em; }
}
/* tela baixa (a TV do dono, 1920x911; o PC 1600x900): o QR ao lado do código, menor, e tudo um pouco mais justo */
@media (min-width: 900px) and (max-height: 1000px) {
  .auto-festa { padding: 0.9em 1em; }
  .auto-festa-topo { flex-direction: row; text-align: left; align-items: center; }
  .auto-qr { width: min(220px, 25vh); max-width: none; margin: 0; padding: 8px; }
  .auto[data-auto-forno="on"] .auto-qr { width: min(200px, 22vh); max-width: none; }
  .auto-festa-info { margin: 0 0 0 1em; }
  .auto-codigo { font-size: 2em; text-indent: 0; letter-spacing: 0.22em; }
  .auto-dica { margin-top: 0.35em; }
  .auto-festa-pedidos { margin-top: 0.7em; }
  .auto-festa > .emb-tv-rodape { margin-top: 0.45em; font-size: 0.7em; }
  .auto-pedido { padding-top: 0.1em; padding-bottom: 0.1em; }
  .auto-pedido + .auto-pedido { margin-top: 3px; }
  .auto-pedido-texto { font-size: 0.92em; }
  .auto-pedido .auto-btn { min-height: 1.6em; }
  .auto-pedido-n { width: 1.45em; height: 1.45em; }
  .forno-mini .auto-fg-mais { margin-top: 0.25em; }
  /* (a assinatura da edição sai com a fila cheia: o lugar é dos nomes) */
  [data-fila-cheia="1"] > .emb-tv-rodape { display: none; }
  /* fila cheia (4 ou mais, js/automatico/painel-festa.js): o forno pequeno fica sem a faixa da cena (as 6 etapas, o
     relógio, a barra e o Cancelar continuam) e os nomes cabem; o QR encolhe mais um tiquinho */
  [data-fila-cheia="1"] .forno-mini .auto-fg-cena { display: none; }
  [data-fila-cheia="1"] .forno-mini .auto-fg-passos { margin-top: 0.4em; gap: 0.15em 0.8em; }
  [data-fila-cheia="1"] .forno-mini .auto-fg-barra { margin-top: 0.45em; }
  /* (o nome numa linha só: "Garanhão da Madrugada — Teodoro e…"; a linha de quem pediu e o que disse fica embaixo) */
  [data-fila-cheia="1"] .forno-mini .auto-fg-titulo { -webkit-line-clamp: 1; }
  .auto[data-auto-forno="on"] [data-fila-cheia="1"] .auto-qr { width: min(180px, 20vh); }
  /* o cartão GRANDE da pausa: mais baixo, sem perder nada (as 6 etapas, a cena, o relógio, o Cancelar) */
  .auto-palco > * + * { margin-top: 0.75em; }
  /* (o .auto-forno-grande na frente: vence o css/forno-tv.css, que chega depois, e não mexe na miniatura) */
  .auto-forno-grande .auto-fg { padding: 0.65em 1em 0.7em; }
  .auto-forno-grande .auto-fg-titulo { font-size: clamp(1.3em, 2.1vw, 2.1em); }
  .auto-forno-grande .auto-fg-quem { font-size: 1em; margin-top: 0.1em; }
  .auto-forno-grande .auto-fg-passos { margin-top: 0.45em; gap: 0.2em 1.6em; }
  .auto-forno-grande .auto-fg-passo { font-size: 0.95em; }
  .auto-forno-grande .auto-fg-marca { width: 1.7em; height: 1.7em; }
  .auto-forno-grande .auto-fg-cena { height: 4.4em; margin-top: 0.55em; }
  .auto-forno-grande .auto-fg-barra { margin-top: 0.6em; height: 10px; }
  .auto-forno-grande .auto-fg-pe { margin-top: 0.3em; }
  .auto-forno-grande .auto-fg-tambem { margin-top: 0.35em; }
}

/* (22/10/2026, defeito 15 / "Entendi!") o nome que o robô entendeu: "Garanhão da Madrugada — Teodoro e Sampaio" e, pequeno
   embaixo, o que a pessoa disse ("tu cantou: “eu sou seu homem…”"), numa linha só */
.auto-fg-titulo-artista { font-size: 0.62em; font-weight: 750; color: var(--a-ouro-claro); }
.auto-fg-dito {
  display: block;
  margin-top: 0.1em;
  font-size: 0.85em;
  font-style: italic;
  color: var(--a-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* na miniatura: "pedida por Tati · tu cantou: “eu sou…”" numa linha só (o que não cabe, reticências) */
.forno-mini .auto-fg-quem { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forno-mini .auto-fg-dito { display: inline; margin: 0; font-size: 0.9em; }
.forno-mini .auto-fg-dito::before { content: "· "; font-style: normal; }
/* (22/10/2026, defeito 10) ninguém passou de 30 ainda: sem coroa, a linha que explica */
.auto-ranking-sem-coroa { margin-top: 0.8em; color: var(--a-suave); font-weight: 700; }
/* (22/10, defeito 10) os 8 do ranking cabem na TV baixa (1920x911): cada um numa linha só (o nome e, ao lado, a
   música), o campeão mais baixo */
@media (min-width: 900px) and (max-height: 1000px) {
  .auto-ranking { padding: 0.8em; }
  .auto-ranking-cartao { padding: 0.9em 1.3em; }
  .auto-ranking-titulo { font-size: 1.25em; }
  .auto-ranking-estrela { margin-top: 0.5em; padding: 0.55em 1em 0.65em; }
  .auto-ranking-coroa svg { width: 2em; height: 2em; }
  .auto-ranking-nome { font-size: clamp(1.5em, 3vw, 2.5em); }
  .auto-ranking-nota b { font-size: 1.9em; }
  .auto-ranking-lista { margin-top: 0.6em; }
  .auto-ranking-linha { padding: 0.3em 0.8em; }
  .auto-ranking-linha + .auto-ranking-linha { margin-top: 5px; }
  .auto-ranking-quem { display: flex; align-items: baseline; gap: 0.7em; }
  .auto-ranking-quem b { flex: none; max-width: 60%; }
  .auto-ranking-quem small { flex: 1 1 auto; min-width: 0; }
  .auto-ranking-botoes { margin-top: 0.8em; }
}
/* (22/10/2026, revisão final da edição Embaixador) a festa da filmagem tem 8 pessoas: com 8 na fila e 2 no forno, na TV
   de 1920x911, as linhas de 42 px só deixavam ver 6 nomes (o 7º e o 8º ficavam escondidos, rolando na lista). Fila cheia
   = linhas mais baixas: o microfone e o "×" menores (a TV é de mouse/controle, não de dedo); o nome fica do mesmo tamanho */
@media (min-width: 900px) and (max-height: 1000px) {
  [data-fila-cheia="1"] .auto-pedido { padding-top: 0.05em; padding-bottom: 0.05em; }
  [data-fila-cheia="1"] .auto-pedido + .auto-pedido { margin-top: 2px; }
  [data-fila-cheia="1"] .auto-pedido .auto-btn { min-height: 0; padding-top: 0.1em; padding-bottom: 0.1em; }
  [data-fila-cheia="1"] .auto-pedido .auto-btn svg { width: 0.9em; height: 0.9em; }
  [data-fila-cheia="1"] .auto-pedido-tirar svg { width: 14px; height: 14px; }
  [data-fila-cheia="1"] .auto-pedido-texto { line-height: 1.25; }
  [data-fila-cheia="1"] .auto-pedido-n { width: 1.3em; height: 1.3em; }
}

/* =====================================================================================================================
   (22/10/2026, ideias da revisão aprovadas pelo dono) A FILA MANDA NO RÁDIO, o "CANTAR AGORA" e a COROAÇÃO
   (js/automatico/index.js, fila-manda.js, forno-tv.js, ranking.js). Na edição o couro e o ouro vêm do css/embaixador.css
   ===================================================================================================================== */
/* a CONTAGEM pra vez de quem espera ("Daqui a 15 s: Dona Cida!"): toma o lugar da letra, com a música do rádio baixinha
   por baixo. Só tela (a voz é a da chamada da vez, no zero). A barra esvazia até a chamada */
.auto[data-auto-fila-chama="on"] .auto-letra { display: none; }
.auto-contagem {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 9.5em;
  padding: 0.6em 0;
}
.auto-contagem-frase {
  margin-top: 0.25em;
  font-size: 1.9em;
  font-size: clamp(1.7em, 5.4vw, 2.7em);
  font-weight: 850;
  line-height: 1.12;
  color: #fff;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.auto-contagem-frase .auto-vez-nome { color: var(--a-ouro-claro); text-shadow: 0 0 22px rgba(242, 210, 122, 0.55); }
.auto-contagem-sub { margin-top: 0.5em; font-size: 1.15em; font-size: clamp(1.05em, 3.2vw, 1.5em); font-weight: 750; line-height: 1.25; color: var(--a-ouro); }
.auto-contagem-barra { width: 100%; max-width: 760px; height: 10px; margin-top: 1.1em; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.auto-contagem-barra i {
  display: block;
  height: 100%;
  width: calc(var(--f, 1) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--a-ouro-forte), var(--a-ouro-claro));
  transition: width 0.3s linear;
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) {
  .auto-contagem-frase { font-size: 3em; font-size: clamp(1.7em, min(4.5vw, 10vh), 5.6em); }
  .auto-contagem-sub { font-size: 1.6em; font-size: clamp(1.1em, min(2.1vw, 4.8vh), 2.8em); }
}

/* o "CANTAR AGORA" no cartão da pronta pedida pela voz (o grande da pausa e a miniatura da lateral): fura a fila só com
   o toque. Escuro em cima do cartão dourado (ouro em cima de ouro sumia na foto). Sem animação (o pequeno é CALMO) */
.auto-fg-chegou .auto-fg-cantar {
  position: relative;
  z-index: 3;
  margin-top: 0.7em;
  min-height: 2.8em;
  padding: 0 1.4em;
  border-color: transparent;
  background: var(--a-tinta-ouro);
  color: var(--a-ouro-claro);
  font-size: 1.05em;
  font-weight: 850;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.forno-mini .auto-fg-chegou .auto-fg-cantar { margin-top: 0.5em; min-height: 2.4em; padding: 0 1em; font-size: 0.95em; }

/* a COROAÇÃO: alguém assumiu o 1º do ranking da noite. Por cima de tudo, uns 5 s (a vez do próximo espera), com o
   confete caindo uma vez; tocar em qualquer lugar segue a festa. Movimento reduzido: sem confete e sem o "pulo" */
.auto-coroa {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 30;
  display: flex;
  padding: 1.5em;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(217, 178, 74, 0.22), transparent 65%), rgba(7, 6, 8, 0.9);
  cursor: pointer;
  margin: 0 !important;
}
.auto-coroa-cartao {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: auto;
  padding: 1.4em 1.6em 1.6em;
  border-radius: var(--a-raio);
  border: 1px solid rgba(217, 178, 74, 0.55);
  background: linear-gradient(160deg, var(--a-bg-2), var(--a-bg-1));
  box-shadow: var(--a-sombra), 0 0 140px rgba(217, 178, 74, 0.3);
  text-align: center;
  overflow: hidden;
  animation: auto-coroa-entra 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes auto-coroa-entra { from { transform: scale(0.86); opacity: 0; } to { transform: none; opacity: 1; } }
.auto-coroa-selo { position: relative; z-index: 1; display: block; margin: 0 auto 0.3em; }
.auto-coroa-estrela svg { width: 5em; height: 5em; color: var(--a-ouro-claro); filter: drop-shadow(0 4px 18px rgba(242, 210, 122, 0.55)); }
.auto-coroa-roseta { width: 8em; }
.auto-coroa-roseta svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)); }
.auto-coroa-tomou { position: relative; z-index: 1; margin-top: 0.2em; font-size: 1.35em; font-size: clamp(1.15em, 2.4vw, 2.4em); font-weight: 850; color: #fff; overflow-wrap: anywhere; }
.auto-coroa-titulo { position: relative; z-index: 1; margin-top: 0.25em; font-size: 1.3em; font-size: clamp(1.1em, 2.2vw, 2.2em); font-weight: 850; letter-spacing: 0.04em; color: var(--a-ouro-claro); }
.auto-coroa-nome { position: relative; z-index: 1; margin-top: 0.05em; font-size: 2.6em; font-size: clamp(2.2em, 6vw, 6em); font-weight: 900; line-height: 1.05; color: #fff; overflow-wrap: anywhere; text-shadow: 0 0 30px rgba(242, 210, 122, 0.45); }
.auto-coroa-nota { position: relative; z-index: 1; margin-top: 0.15em; color: var(--a-suave); }
.auto-coroa-nota b { font-size: 2.4em; font-weight: 900; line-height: 1; color: var(--a-ouro-claro); font-variant-numeric: tabular-nums; }
.auto-coroa-nota small { margin-left: 0.35em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; }
.auto-coroa-musica { position: relative; z-index: 1; margin-top: 0.2em; font-weight: 650; color: var(--a-suave); overflow-wrap: anywhere; }
/* o confete: cai uma vez, de cima do cartão até o pé da tela */
.auto-coroa-confete { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; }
.auto-coroa-confete i {
  position: absolute;
  top: -1em;
  left: var(--x);
  width: 0.6em;
  height: 1em;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: auto-coroa-cai var(--t) cubic-bezier(0.2, 0.55, 0.45, 1) var(--d) 1 both;
}
.auto-coroa-confete .auto-coroa-tira { width: 0.34em; height: 1.3em; }
@keyframes auto-coroa-cai {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 34em) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .auto-coroa-confete { display: none; }
  .auto-coroa-cartao { animation: none; }
}
/* TV baixa (a do dono, 1920x911): tudo cabe sem rolar */
@media (min-width: 900px) and (max-height: 1000px) {
  .auto-coroa { padding: 0.8em; }
  .auto-coroa-cartao { padding: 1em 1.4em 1.2em; }
  .auto-coroa-roseta { width: 6.4em; }
  .auto-coroa-estrela svg { width: 4em; height: 4em; }
}
/* celular deitado (tela bem baixa): o selo menor */
@media (orientation: landscape) and (max-height: 500px) {
  .auto-coroa { padding: 0.5em; }
  .auto-coroa-roseta { width: 4em; }
  .auto-coroa-estrela svg { width: 2.6em; height: 2.6em; }
  .auto-coroa-nome { font-size: 2em; }
}