/* Publicou mudança aqui? As TVs recarregam sozinhas em até 5 min (vigiarVersao em painel.js).
   Tema do posto (lib/postos.js) aplicado em :root pelo painel.js.
   --u é a unidade de tamanho: 1vh na TV; no celular em pé vira proporcional à largura.
   Tela mais estreita que 16:9 (computador 16:10, monitor 4:3) usa a largura como se fosse 16:9:
   com 1vh a bateria vazava do cartão e "Desde 10:05" cortava. */
:root {
  --u: min(1vh, 0.5625vw);
  --fundo: #0b1116;
  --superficie: #121b24;
  --texto: #eef2f5;
  --suave: #8494a3;
  --marca: #4ade80;
  /* Bateria: as mesmas cores em todo posto. */
  --chegada: #5b9cf6;
  --ganho: #2fbf71;
  --livre: #2fbf71;
  --atencao: #e9b13f;
  --falha: #ec6a6a;
  --linha: color-mix(in srgb, var(--texto) 9%, transparent);
  --trilho: color-mix(in srgb, var(--texto) 5%, transparent);
  --faixa: color-mix(in srgb, #fff 14%, transparent);
  --bateria-h: calc(44 * var(--u));
  /* Menor texto da TV (2,2vh, ~12 px na TV de 541 e 24 px em 1080p): lê-se a 3 m. Não encolha
     abaixo dele; se não couber, tire o texto. */
  --piso: calc(2.2 * var(--u));
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  /* Kerning e ligaduras da fonte ("kW", "Wh"); a suavização em si vem do sistema da TV. */
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }

body {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(2.4 * var(--u));
  padding: calc(3.6 * var(--u)) 3.5vw calc(3.2 * var(--u));
  background: var(--fundo);
  color: var(--texto);
  overflow: hidden;
  cursor: none;
}

/* ---------- cabeçalho ---------- */
.topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5vw;
  padding-bottom: calc(2 * var(--u));
  border-bottom: 1px solid var(--linha);
}
.topo > * { min-width: 0; }
.marca img { display: block; height: calc(7.5 * var(--u)); width: auto; }
/* Logo com preto (ex.: Gaúcho): placa branca para aparecer no fundo escuro. */
.marca img.placa { height: calc(11 * var(--u)); padding: calc(0.6 * var(--u)); border-radius: calc(1.6 * var(--u)); background: #fff; }
.marca:empty { display: none; }
.titulo h1 { font-size: calc(4.6 * var(--u)); font-weight: 700; letter-spacing: -0.015em; overflow-wrap: break-word; }
/* Sincronia: ícone ao lado do relógio. Verde com dados recentes, vermelho quando parou. */
.linha-hora { display: flex; align-items: center; justify-content: flex-end; gap: calc(1.6 * var(--u)); }
.sincronia { display: inline-flex; width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); color: var(--livre); }
.sincronia[hidden] { display: none; }
.sincronia svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sincronia.atrasado { color: var(--falha); font-weight: 600; }
.ponto { flex: none; width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); border-radius: 50%; background: currentColor; }
.hora { text-align: right; }
.hora time { display: block; font-size: calc(6 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.hora p { margin-top: calc(0.7 * var(--u)); font-size: var(--piso); font-weight: 500; letter-spacing: 0.01em; color: var(--suave); }

/* ---------- carregadores ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr));
  gap: 1.3vw;
  min-height: 0;
}

.cartao {
  --cor: var(--suave);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(1.6 * var(--u));
  padding: calc(2.4 * var(--u)) 1.7vw calc(2.2 * var(--u));
  border-radius: calc(2 * var(--u));
  /* Um tom acima da superfície e borda de 2 px: o cartão se separa do fundo e do vizinho. */
  background: color-mix(in srgb, var(--texto) 6%, var(--superficie));
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  min-height: 0;
}
.cartao.carregando { --cor: var(--ganho); }
.cartao.livre { --cor: var(--livre); }
.cartao.conectado, .cartao.pausado, .cartao.finalizando { --cor: var(--atencao); }
.cartao.fora { --cor: var(--falha); }

/* Grade de 2 linhas: nome | status em cima; ficha | barra da % embaixo (alinhadas pela linha de base). */
.cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1vw; align-items: start; }
.cab > * { min-width: 0; }
.cab .status { justify-self: end; }
.cab h2 { font-size: calc(3.4 * var(--u)); font-weight: 700; letter-spacing: -0.015em; }
.ficha { margin-top: calc(0.4 * var(--u)); font-size: var(--piso); font-weight: 500; letter-spacing: 0.01em; color: var(--suave); align-self: baseline; }
.status {
  display: inline-flex;
  align-items: center;
  height: calc(4.3 * var(--u)); /* uma linha do h2: alinha com o nome do carregador */
  gap: calc(0.9 * var(--u));
  font-size: var(--piso);
  font-weight: 600;
  white-space: nowrap;
  color: var(--cor);
}
/* Carregando: raio que a energia atravessa de baixo para cima, sem piscar. */
.energia { position: relative; flex: none; width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); }
.raio { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ganho); }
.raio.base { opacity: 0.25; }
.raio.cheio { animation: encher 2.4s ease-in-out infinite; }
.titulo h1.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- corpo: bateria vertical + números ---------- */
/* Bateria e régua juntas, centralizadas no cartão. */
.corpo { display: grid; grid-auto-flow: column; justify-content: center; align-items: center; column-gap: calc(1.6 * var(--u)); min-height: 0; }

.bateria {
  position: relative;
  width: calc(var(--bateria-h) * 0.625);
  height: var(--bateria-h);
  margin-top: calc(2 * var(--u));
  border: calc(0.4 * var(--u)) solid color-mix(in srgb, var(--texto) 22%, transparent);
  border-radius: calc(3 * var(--u));
  padding: calc(0.9 * var(--u));
}
.polo {
  position: absolute;
  top: calc(-2 * var(--u));
  left: 50%;
  width: 34%;
  height: calc(1.6 * var(--u));
  transform: translateX(-50%);
  border-radius: calc(0.8 * var(--u)) calc(0.8 * var(--u)) 0 0;
  background: color-mix(in srgb, var(--texto) 22%, transparent);
}
.interior {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  border-radius: calc(2.2 * var(--u));
  background: var(--trilho);
  overflow: hidden;
}
.seg { flex: none; transition: height 1.2s ease; }
.seg.chegada { background: var(--chegada); }
.seg.ganho { position: relative; background: var(--ganho); overflow: hidden; }
/* Energia subindo: faixas diagonais da mesma largura andando para cima, só enquanto carrega. */
/* Anda com transform (camada da GPU), não com background-position: na TV da Santana
   (Android, processador fraco) as faixas animadas pelo fundo ficavam paradas. A camada
   tem uma faixa a mais embaixo e sobe exatamente uma faixa por volta. */
.carregando .seg.ganho::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(-6 * var(--u));
  background-image: linear-gradient(45deg, var(--faixa) 25%, transparent 25%, transparent 50%, var(--faixa) 50%, var(--faixa) 75%, transparent 75%, transparent);
  background-size: calc(6 * var(--u)) calc(6 * var(--u));
  will-change: transform;
  animation: subir 1.4s linear infinite;
}
/* Carga sem %: a bateria inteira em verde fraco, com a mesma energia subindo. */
.seg.ganho.indefinido { height: 100%; background: color-mix(in srgb, var(--ganho) 14%, transparent); --faixa: color-mix(in srgb, var(--ganho) 14%, transparent); }
.raio-grande { width: 100%; height: calc(6 * var(--u)); margin-bottom: calc(1.2 * var(--u)); fill: var(--ganho); }

.valor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(0.3 * var(--u));
  padding: 0 calc(1.5 * var(--u));
  text-align: center;
  text-shadow: 0 calc(0.2 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.35);
}
/* Número e "%" numa pílula escura: o olho centraliza pela caixa, não pelos dígitos,
   e o número fica legível sobre as faixas e a divisa azul/verde. */
.pct {
  display: inline-flex;
  align-items: baseline;
  padding: 0.14em 0.26em 0.12em;
  border-radius: 0.3em;
  background: color-mix(in srgb, #000 38%, transparent);
  font-size: calc(10 * var(--u));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: none;
}
.pct .unid { margin-left: 0.05em; }
/* 100 tem 3 dígitos: menor para a pílula caber na bateria. */
.pct.tres { font-size: calc(10 * 0.8 * var(--u)); }
/* "%" a 34% do número, na bateria e na régua. */
.unid { font-size: 0.34em; font-weight: 600; letter-spacing: 0; opacity: 0.85; }
.frase { font-size: calc(2.6 * var(--u)); font-weight: 600; line-height: 1.25; color: var(--cor); text-shadow: none; }

/* Régua: mesma geometria vertical do interior da bateria (borda + respiro). */
.regua {
  position: relative;
  width: calc(17 * var(--u));
  height: calc(var(--bateria-h) - 2 * (0.4 + 0.9) * var(--u));
  margin-top: calc(2 * var(--u));
}
.barra { position: absolute; left: 0; width: calc(0.6 * var(--u)); border-radius: calc(0.3 * var(--u)); transition: height 1.2s ease, bottom 1.2s ease; }
.barra.chegada { background: var(--chegada); }
.barra.ganho { background: var(--ganho); }
/* 2 px de folga entre as barras quando se tocam. */
.barra + .barra { border-top: 0; clip-path: inset(0 0 2px 0); }
.nota { position: absolute; left: calc(1.8 * var(--u)); right: 0; transform: translateY(50%); display: grid; gap: calc(0.3 * var(--u)); }
.nota .rotulo { font-size: var(--piso); font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; color: var(--suave); }
.nota b { font-size: calc(3.2 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.nota.ganho b { color: var(--ganho); }

/* ---------- anúncios (postos com lista em anuncios.js; ?anuncios=demo em qualquer posto) ---------- */
/* Cabeçalho: faixa 728×90 (leaderboard IAB). Espaço garantido mesmo com tudo ocupado. */
/* A faixa fica ao lado do título, menor que ele, para não disputar com o nome do posto
   (pedido do Pedro, 07/10). Sem título na tela (nome na logo), fica centrada. */
.titulo { display: flex; align-items: center; gap: 2.5vw; }
.titulo h1 { flex: none; }
.patrocinio { margin-left: auto; display: flex; align-items: center; gap: calc(1.2 * var(--u)); min-width: 0; }
.titulo h1.oculto + .patrocinio { margin-right: auto; }
.patrocinio[hidden] { display: none; }
/* Encolhe em tela mais estreita que 16:9, sem invadir o título nem o relógio. */
.patrocinio img { display: block; width: calc(6.6 * var(--u) * 728 / 90); max-width: 100%; min-width: 0; height: auto; aspect-ratio: 728 / 90; border-radius: calc(0.6 * var(--u)); }

/* Carregador livre: o cartão abaixo do título vira o slot do anúncio. O formato vem do
   anúncio (--formato, anuncios.js) e segue o número de cartões na tela (PLAYBOOK.md). */
.cartao.com-anuncio { grid-template-rows: auto 1fr; }
.slot-anuncio { display: grid; grid-template-rows: minmax(0, 1fr); justify-items: center; min-height: 0; }
.slot-anuncio .midia { height: 100%; max-width: 100%; aspect-ratio: var(--formato, 9 / 16); object-fit: cover; border-radius: calc(1.2 * var(--u)); background: #000; }
/* O vídeo cabe inteiro no espaço (largura e altura), sem cortar: com cover o 4:3 perdia as
   bordas em tela estreita e o QR fica a 3% da borda. Sem rótulo embaixo (pedido do Pedro, 09/10): o vídeo usa a altura toda. */
@supports (width: 1cqh) {
  .slot-anuncio { container-type: size; grid-template-rows: auto; align-content: center; }
  .slot-anuncio .midia { height: auto; width: min(100cqw, 100cqh * var(--razao, 0.5625)); }
}
.patrocinio.entra { animation: aparecer 0.6s ease; }
/* Troca de anúncio em ~1 s: 0,5 s apagando (.sai) e 0,5 s acendendo. */
.slot-anuncio.entra > * { animation: aparecer 0.5s ease-out; }
/* Saída: o anúncio apaga nos 0,5 s antes da troca (agendarSaidas e SAIDA_MS, painel.js). */
@media (prefers-reduced-motion: no-preference) {
  .slot-anuncio.sai > * { opacity: 0; transition: opacity 0.5s ease-in; }
}

/* Carregador ocupado: bateria e anúncio no mesmo lugar (10 s de bateria e o anúncio pelo tempo do vídeo). Na troca, a bateria
   encolhe e anda até a barra da % no canto do cabeçalho (--bx, --by, --bs calculados em
   medirVoo, painel.js) e vira a barra; na volta faz o caminho inverso. Nome e tempos saem
   e o anúncio ocupa o resto do cartão. O pé mora no palco para o anúncio cobrir a área dele. */
.cartao.alterna .cab { grid-template-columns: minmax(0, 1fr) 50%; }
.cab .mini { grid-column: 2; align-self: baseline; transition: opacity 0.6s ease; }
.cartao.alterna:not(.em-anuncio) .cab .mini { opacity: 0; }
.cartao.alterna.em-anuncio .cab .mini { transition: opacity 1s ease-in-out 0.8s; }
.cartao.alterna { grid-template-rows: auto 1fr; }
.palco { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* Bateria acima do vídeo para o vôo não passar por baixo dele. */
.palco > .corpo { grid-area: 1 / 1; position: relative; z-index: 2; }
.palco > .corpo .bateria { transition: transform 1.8s ease-in-out, opacity 1.4s ease-in-out; }
/* Na volta, a régua (chegou com / carregado) só entra quando a bateria termina de crescer (1,8 s). */
.palco > .corpo .regua { transition: opacity 0.6s ease 1.8s; }
.palco > .slot-anuncio { grid-area: 1 / 1 / 3 / 2; position: relative; z-index: 1; transition: opacity 1.1s ease 0.5s; }
.palco > .pe { grid-area: 2 / 1; transition: opacity 0.8s ease 0.8s; }
.cartao.alterna:not(.em-anuncio) .palco > .slot-anuncio { opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0s linear 0.8s; }
.cartao.alterna.em-anuncio .palco > .corpo { visibility: hidden; pointer-events: none; transition: visibility 0s linear 1.8s; }
.cartao.alterna.em-anuncio .palco > .corpo .bateria { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(var(--bs, 0.4)); opacity: 0; transition: transform 1.8s ease-in-out, opacity 1.4s ease-in-out 0.4s; }
.cartao.alterna.em-anuncio .palco > .corpo .regua { opacity: 0; transition: opacity 0.6s ease; }
.cartao.alterna.em-anuncio .palco > .pe { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
/* Barra da % na linha da ficha: número um pouco maior, mesma linha de base. */
.mini { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font-size: calc(2.2 * var(--u)); line-height: 1.2; }
.mini b { font-weight: 700; white-space: nowrap; }
.mini .unid { font-size: 0.6em; }
.mini .trilho { flex: 1; height: calc(1.8 * var(--u)); border-radius: var(--u); background: color-mix(in srgb, var(--texto) 14%, transparent); overflow: hidden; }
/* Mesma energia da bateria grande: faixas diagonais andando enquanto carrega. */
.mini .cheio { height: 100%; border-radius: inherit; background: var(--ganho); }
.carregando .mini .cheio { position: relative; overflow: hidden; }
.carregando .mini .cheio::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-3 * var(--u));
  right: 0;
  background-image: linear-gradient(45deg, var(--faixa) 25%, transparent 25%, transparent 50%, var(--faixa) 50%, var(--faixa) 75%, transparent 75%, transparent);
  background-size: calc(3 * var(--u)) calc(3 * var(--u));
  will-change: transform;
  animation: andar 1.4s linear infinite;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- rodapé do cartão ---------- */
/* Altura fixa e tempos no pé: bateria e linha de tempos na mesma altura em todos os
   cartões, com ou sem carro, com ou sem nome. */
.pe {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-height: calc(18 * var(--u));
  padding-top: calc(2.4 * var(--u));
  border-top: 1px solid var(--linha);
}
.pe:empty { border-top-color: transparent; }
.motorista { display: flex; align-items: center; gap: calc(1.4 * var(--u)); min-width: 0; }
.quem { display: grid; gap: calc(0.5 * var(--u)); min-width: 0; }
/* Nome curto ("Luiz F.") nunca corta. */
.quem strong { font-size: calc(3.4 * var(--u)); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; white-space: nowrap; }
.carro { font-size: var(--piso); font-weight: 500; letter-spacing: 0.01em; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recorrencia {
  margin-left: auto;
  flex-shrink: 0;
  padding: calc(0.35 * var(--u)) calc(1 * var(--u));
  border: 1px solid var(--linha);
  border-radius: calc(0.8 * var(--u));
  font-size: var(--piso);
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  color: var(--suave);
}
.recorrencia.nova { color: var(--marca); border-color: color-mix(in srgb, var(--marca) 45%, transparent); }
.tempos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5vw; margin-top: auto; }
.tempos .rotulo { display: block; font-size: var(--piso); font-weight: 500; letter-spacing: 0.01em; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tempos b { display: block; margin-top: calc(0.4 * var(--u)); font-size: calc(3 * var(--u)); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
/* Mesma altura do número, para o cartão não pular quando o valor chega. */
.tempos b.calculando { font-size: var(--piso); line-height: calc(3 * var(--u) * 1.2); font-weight: 500; color: var(--suave); }

.tela-cheia {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: calc(3.4 * var(--u));
  font-weight: 500;
  color: var(--suave);
}

/* ---------- 4 carregadores: o cartão tem ~33u de largura ---------- */
/* Bateria, nome e tempos menores para caber sem vazar do cartão. Texto nunca abaixo de --piso:
   o que não cabe sai (régua e potência). */
@media (min-aspect-ratio: 4/5) {
  /* Respiro lateral e entre cartões menores: com 4 o vídeo é limitado pela largura. */
  .grade[data-colunas="4"] { --bateria-h: calc(36 * var(--u)); gap: 1vw; }
  .grade[data-colunas="4"] .cartao { padding-left: 1.1vw; padding-right: 1.1vw; }
  .grade[data-colunas="4"] .pct { font-size: calc(8.2 * var(--u)); }
  .grade[data-colunas="4"] .pct.tres { font-size: calc(8.2 * 0.8 * var(--u)); }
  /* Régua sai: no piso, "Carregado nesta sessão" quebrava em 3 linhas e invadia "Chegou com".
     A chegada (azul) e o carregado (verde) continuam na bateria. */
  .grade[data-colunas="4"] .regua { display: none; }
  .grade[data-colunas="4"] .cab h2 { font-size: calc(2.8 * var(--u)); }
  .grade[data-colunas="4"] .status { height: calc(3.5 * var(--u)); }
  /* Nome na linha inteira ("02 (40 kW) 1" quebrava ao lado do status); status embaixo,
     ao lado da barra da %; ficha na 3ª linha. */
  .grade[data-colunas="4"] .cab h2 { grid-column: 1 / -1; }
  .grade[data-colunas="4"] .cab .status { grid-column: 1; grid-row: 2; justify-self: start; }
  .grade[data-colunas="4"] .cab .ficha { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .grade[data-colunas="4"] .cab .mini { grid-column: 2; grid-row: 2; align-self: center; }
  .grade[data-colunas="4"] .quem strong { font-size: calc(2.8 * var(--u)); }
  /* Potência sai: em 3 colunas "Desde 00:32" ficava cortado no piso. */
  .grade[data-colunas="4"] .tempos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1vw; }
  .grade[data-colunas="4"] .tempos > :nth-child(2) { display: none; }
  .grade[data-colunas="4"] .tempos b { font-size: calc(2.4 * var(--u)); }
  .grade[data-colunas="4"] .tempos b.calculando { line-height: calc(2.4 * var(--u) * 1.2); }
}

/* ---------- celular em pé: cartões empilhados, página rola ---------- */
@media (max-aspect-ratio: 4/5) {
  :root { --u: min(2.1vw, 9px); }
  html, body { height: auto; }
  body { display: block; min-height: 100dvh; padding: 20px 16px 24px; overflow: auto; cursor: auto; }
  .topo { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .marca img { height: 44px; }
  .titulo { flex-direction: column; align-items: stretch; gap: 10px; }
  .patrocinio { margin: 0; }
  .patrocinio img { height: auto; width: 100%; min-width: 0; }
  .slot-anuncio { container-type: normal; }
  .slot-anuncio .midia { height: auto; width: min(100%, 320px); }
  .titulo h1 { font-size: 24px; }
  .hora { display: flex; align-items: baseline; gap: 12px; text-align: left; }
  .hora time { font-size: 28px; }
  .hora p { margin-top: 0; font-size: 14px; }
  .grade { grid-template-columns: 1fr; gap: 16px; }
  .cartao { padding: 20px; gap: 18px; }
  .corpo { justify-content: start; }
  :root { --bateria-h: calc(40 * var(--u)); }
  .bateria { width: calc(22 * var(--u)); }
  .pct { font-size: calc(8.4 * var(--u)); }
  .pct.tres { font-size: calc(8.4 * 0.8 * var(--u)); }
  .tempos { gap: 16px; align-items: flex-end; }
  .tempos .rotulo { white-space: normal; }
  .tempos b { font-size: calc(2.7 * var(--u)); }
}

/* ---------- login: medidas com piso em px (o teclado do celular encolhe o vh) ---------- */
body.tela-entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 100dvh;
  padding: 24px 16px;
  overflow: auto;
  cursor: auto;
}
.entrar {
  display: grid;
  gap: clamp(12px, 2vh, 20px);
  width: min(100%, 560px);
  padding: clamp(24px, 5vh, 48px);
  border-radius: 20px;
  background: var(--superficie);
  /* rgba e não color-mix: a página de login não carrega compat.js. */
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.entrar h1 { font-size: clamp(24px, 4.4vh, 40px); font-weight: 800; }
.entrar p { font-size: clamp(15px, 2.2vh, 20px); line-height: 1.4; color: var(--suave); }
.entrar label { font-size: clamp(14px, 2vh, 18px); font-weight: 700; }
.entrar input:not([type="hidden"]) {
  width: 100%;
  font: inherit;
  font-size: clamp(20px, 4vh, 36px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: var(--fundo);
  color: var(--texto);
}
.entrar input:focus { outline: none; border-color: var(--marca); }
.entrar button {
  font: inherit;
  font-size: clamp(17px, 2.6vh, 24px);
  font-weight: 800;
  min-height: 52px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--marca);
  color: var(--fundo);
  cursor: pointer;
}
.entrar .erro { color: var(--falha); font-weight: 700; }

@keyframes andar { from { transform: translateX(0); } to { transform: translateX(calc(3 * var(--u))); } }
@keyframes subir { from { transform: translateY(0); } to { transform: translateY(calc(-6 * var(--u))); } }
/* Entra por baixo e sai por cima: começo e fim do ciclo são iguais (vazio). */
@keyframes encher {
  0% { clip-path: inset(100% 0 0 0); }
  45%, 60% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .raio.cheio, .carregando .seg.ganho::after, .carregando .mini .cheio::after, .slot-anuncio.entra > *, .patrocinio.entra { animation: none; }
  .palco > *, .palco .bateria, .palco .regua, .cab .mini { transition: none !important; }
}