html, body { margin: 0; width: 100%; height: 100%; background: #000; overflow: hidden; cursor: none; font-family: Arial, sans-serif; }
/* Fundo = video 1280x720 do tamanho da janela, FORA do palco escalado (video dentro de transform pesa no WebKit da
   Tinker); imagem de 1920x1080 derruba o WebKit 2.18 dela. Nada de flex/filter. */
#fundo { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; background: #000; }
#tela { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
/* posicoes calculadas em tv.js (encaixe): nada de alinhamento inline, o WebKit da Tinker o faz diferente do PC */
.valor, #festa_valor { position: absolute; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.valor .g, #festa_valor .g { position: absolute; top: 0; display: block; background-repeat: no-repeat; }

/* estados - os avisos ficam fora dos paineis (o de baixo na faixa do chao, abaixo das caixas) */
#aviso_proc, #aviso_sem, #aviso_vazio { position: absolute; left: 0; width: 1920px; text-align: center; font-weight: 900;
  color: #fff; text-shadow: 0 4px 12px #000, 0 0 30px #000; display: none; }
#aviso_proc, #aviso_sem { top: 1006px; font-size: 44px; line-height: 64px; background: rgba(0,0,0,.6); }
#aviso_vazio { top: 594px; font-size: 52px; line-height: 68px; }
body.procurando .valor, body.sem-atualizacao .valor { opacity: .45; }
body.procurando #aviso_proc { display: block; }
body.sem-atualizacao #aviso_sem { display: block; }
body.sem-valores .valor { display: none; }
body.sem-valores #aviso_vazio { display: block; }

/* Comemoracao de premio (09/10/2026): video da Kenosoft em tela cheia (fora de transform, como o fundo), valor e
   maquina num palco de 1920x1080 escalado por cima. Durante a festa o fundo para (um decodificador so). */
#festa { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; display: none; }
#festa_video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: #000; }
#festa_palco { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
/* grupo do valor (placa + digitos): o efeito de entrada e o pulso escalam o grupo pelo centro */
#festa_num { position: absolute; opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
  -webkit-transition: opacity .5s; transition: opacity .5s; }
/* placa atras do valor: no video do Jackpot as notas douradas passam por tras dos digitos e somem com eles */
#festa_placa { position: absolute; left: 0; top: 0; overflow: hidden;
  background: rgba(36, 6, 64, .72); border: 4px solid #f2c14e; border-radius: 40px; box-shadow: 0 6px 18px rgba(0,0,0,.65); }
/* brilho que atravessa a placa (efeito completo) */
#festa_brilho { position: absolute; left: 0; top: -20%; width: 22%; height: 140%; display: none;
  background: -webkit-linear-gradient(left, rgba(255,240,200,0), rgba(255,240,200,.42), rgba(255,240,200,0));
  background: linear-gradient(90deg, rgba(255,240,200,0), rgba(255,240,200,.42), rgba(255,240,200,0));
  -webkit-transform: translateX(-150%) skewX(-20deg); transform: translateX(-150%) skewX(-20deg); }
/* quadro do VLT que ganhou (numero do Gecko), no canto inferior direito; so com o numero conhecido */
#festa_vlt { position: absolute; right: 48px; bottom: 48px; min-width: 240px; padding: 10px 40px 14px; text-align: center;
  opacity: 0; -webkit-transition: opacity .5s; transition: opacity .5s;
  background: rgba(36, 6, 64, .86); border: 4px solid #f2c14e; border-radius: 28px; box-shadow: 0 6px 18px rgba(0,0,0,.65);
  font-family: "DejaVu Sans", Arial, sans-serif; font-weight: bold; }
#festa_vlt .rotulo { display: block; font-size: 34px; line-height: 40px; letter-spacing: 6px; color: #f2c14e; }
#festa_vlt .numero { display: block; font-size: 76px; line-height: 86px; letter-spacing: 2px; color: #fff;
  text-shadow: 0 3px 6px #000; }
body.festa #festa { display: block; }
body.festa #tela, body.festa #fundo { visibility: hidden; }
body.festa-mostra #festa_num { opacity: 1; }
body.festa-mostra.com-vlt #festa_vlt { opacity: 1; }

/* Efeitos (10/10/2026): zoom = nasce de um ponto e cresce com um pulo no fim; completo = zoom + pulso + brilho + VLT */
body.festa-mostra.efeito-zoom #festa_num, body.festa-mostra.efeito-zoom_contagem #festa_num,
body.festa-mostra.efeito-completo #festa_num {
  -webkit-animation: festaEntra .9s ease-out both; animation: festaEntra .9s ease-out both; }
body.festa-mostra.festa-pulsa.efeito-completo #festa_num {
  -webkit-animation: festaPulso 1.6s ease-in-out infinite; animation: festaPulso 1.6s ease-in-out infinite; }
body.festa-mostra.efeito-completo #festa_brilho { display: block;
  -webkit-animation: festaBrilho 3.2s ease-in-out .9s infinite; animation: festaBrilho 3.2s ease-in-out .9s infinite; }
body.festa-mostra.com-vlt.efeito-completo #festa_vlt {
  -webkit-animation: vltEntra .6s ease-out .5s both; animation: vltEntra .6s ease-out .5s both; }
@-webkit-keyframes festaEntra {
  0% { opacity: 0; -webkit-transform: scale(.03); } 15% { opacity: 1; } 60% { -webkit-transform: scale(1.12); }
  80% { -webkit-transform: scale(.97); } 100% { opacity: 1; -webkit-transform: scale(1); } }
@keyframes festaEntra {
  0% { opacity: 0; transform: scale(.03); } 15% { opacity: 1; } 60% { transform: scale(1.12); }
  80% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
@-webkit-keyframes festaPulso { 0%, 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.045); } }
@keyframes festaPulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@-webkit-keyframes festaBrilho {
  0% { -webkit-transform: translateX(-150%) skewX(-20deg); } 45%, 100% { -webkit-transform: translateX(560%) skewX(-20deg); } }
@keyframes festaBrilho { 0% { transform: translateX(-150%) skewX(-20deg); } 45%, 100% { transform: translateX(560%) skewX(-20deg); } }
@-webkit-keyframes vltEntra { 0% { opacity: 0; -webkit-transform: translateX(130%); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes vltEntra { 0% { opacity: 0; transform: translateX(130%); } 100% { opacity: 1; transform: translateX(0); } }

/* Efeitos dos videos de referencia do Alessandro (10/10/2026), sem placa. Opacidade 1 dentro das animacoes: no WebKit
   da Tinker a transicao de opacidade do grupo parava no meio quando a animacao comecava junto (numero transparente).
   pulso = valor grande crescendo e encolhendo sem parar; queda = valor grande caindo do alto, quica e assenta */
body.efeito-pulso #festa_placa, body.efeito-queda #festa_placa { display: none; }
body.festa-mostra.efeito-pulso #festa_num {
  -webkit-animation: festaPulsoGrande 2.4s ease-in-out infinite; animation: festaPulsoGrande 2.4s ease-in-out infinite; }
@-webkit-keyframes festaPulsoGrande { 0%, 100% { opacity: 1; -webkit-transform: scale(.82); } 50% { opacity: 1; -webkit-transform: scale(1.12); } }
@keyframes festaPulsoGrande { 0%, 100% { opacity: 1; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.12); } }
/* queda pesada (barras de ouro): um elemento so, quadros-chave simples e curva linear (copias do valor e curva por etapa
   nao funcionavam no WebKit da Tinker). Cai acelerando como peso (quadros na parabola), bate em 0,71 s, amassa forte,
   sobe quase nada e assenta; na batida a tela inteira treme e sobe poeira dourada do chao. Origem embaixo: o
   amassado fica no chao. Tremor so com deslocamento inteiro: escala no video 1280x720 derrubava a Tinker a ~4 q/s. */
body.efeito-queda #festa_num, body.efeito-pulso #festa_num { -webkit-transition: none; transition: none; }
body.festa-mostra.efeito-queda #festa_num { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
  -webkit-animation: festaQueda 1.7s linear both; animation: festaQueda 1.7s linear both; }
@-webkit-keyframes festaQueda {
  0% { opacity: 1; -webkit-transform: translateY(-900px) scale(1, 1); }
  8.4% { opacity: 1; -webkit-transform: translateY(-864px) scale(0.994, 1.012); }
  16.8% { opacity: 1; -webkit-transform: translateY(-756px) scale(0.988, 1.024); }
  25.2% { opacity: 1; -webkit-transform: translateY(-576px) scale(0.982, 1.036); }
  33.6% { opacity: 1; -webkit-transform: translateY(-324px) scale(0.976, 1.048); }
  37.8% { opacity: 1; -webkit-transform: translateY(-171px) scale(0.973, 1.054); }
  42% { opacity: 1; -webkit-transform: translateY(0px) scale(0.97, 1.06); }
  46% { opacity: 1; -webkit-transform: translateY(0px) scale(1.12, 0.8); }
  51% { opacity: 1; -webkit-transform: translateY(0px) scale(0.97, 1.05); }
  57% { opacity: 1; -webkit-transform: translateY(-12px) scale(1.01, 0.99); }
  63% { opacity: 1; -webkit-transform: translateY(0px) scale(1.03, 0.96); }
  70% { opacity: 1; -webkit-transform: translateY(0px) scale(1, 1); }
  100% { opacity: 1; -webkit-transform: translateY(0px) scale(1, 1); } }
@keyframes festaQueda {
  0% { opacity: 1; transform: translateY(-900px) scale(1, 1); }
  8.4% { opacity: 1; transform: translateY(-864px) scale(0.994, 1.012); }
  16.8% { opacity: 1; transform: translateY(-756px) scale(0.988, 1.024); }
  25.2% { opacity: 1; transform: translateY(-576px) scale(0.982, 1.036); }
  33.6% { opacity: 1; transform: translateY(-324px) scale(0.976, 1.048); }
  37.8% { opacity: 1; transform: translateY(-171px) scale(0.973, 1.054); }
  42% { opacity: 1; transform: translateY(0px) scale(0.97, 1.06); }
  46% { opacity: 1; transform: translateY(0px) scale(1.12, 0.8); }
  51% { opacity: 1; transform: translateY(0px) scale(0.97, 1.05); }
  57% { opacity: 1; transform: translateY(-12px) scale(1.01, 0.99); }
  63% { opacity: 1; transform: translateY(0px) scale(1.03, 0.96); }
  70% { opacity: 1; transform: translateY(0px) scale(1, 1); }
  100% { opacity: 1; transform: translateY(0px) scale(1, 1); } }
body.festa-mostra.efeito-queda #festa {
  -webkit-animation: festaTremor .6s linear .71s both; animation: festaTremor .6s linear .71s both; }
@-webkit-keyframes festaTremor {
  0% { -webkit-transform: translate(0px, 0px); }
  8% { -webkit-transform: translate(-12px, 9px); }
  18% { -webkit-transform: translate(11px, -8px); }
  28% { -webkit-transform: translate(-9px, 6px); }
  38% { -webkit-transform: translate(7px, -5px); }
  50% { -webkit-transform: translate(-5px, 4px); }
  62% { -webkit-transform: translate(3px, -2px); }
  76% { -webkit-transform: translate(-2px, 1px); }
  100% { -webkit-transform: translate(0px, 0px); } }
@keyframes festaTremor {
  0% { transform: translate(0px, 0px); }
  8% { transform: translate(-12px, 9px); }
  18% { transform: translate(11px, -8px); }
  28% { transform: translate(-9px, 6px); }
  38% { transform: translate(7px, -5px); }
  50% { transform: translate(-5px, 4px); }
  62% { transform: translate(3px, -2px); }
  76% { transform: translate(-2px, 1px); }
  100% { transform: translate(0px, 0px); } }
#festa_impacto { position: absolute; display: none; opacity: 0; background: url(img/impacto.png) no-repeat;
  -webkit-background-size: 100% 100%; background-size: 100% 100%; }
body.festa-mostra.efeito-queda #festa_impacto { display: block;
  -webkit-animation: festaImpacto .9s linear .71s both; animation: festaImpacto .9s linear .71s both; }
@-webkit-keyframes festaImpacto { 0% { opacity: 0; -webkit-transform: scale(.3, .25); } 10% { opacity: 1; -webkit-transform: scale(.7, .55); }
  100% { opacity: 0; -webkit-transform: scale(1.3, .95); } }
@keyframes festaImpacto { 0% { opacity: 0; transform: scale(.3, .25); } 10% { opacity: 1; transform: scale(.7, .55); }
  100% { opacity: 0; transform: scale(1.3, .95); } }

/* um pixel de cada folha grande, sempre pintado (decodificada antes da festa; ver aquece() no tv.js) */
#aquece { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: .02; z-index: 9; pointer-events: none; }
#aquece span { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background-repeat: no-repeat; background-position: -60px -120px; }

/* Batida da queda como no video de referencia: moedas pulam e ficam espalhadas no chao, na frente do valor (trajetorias
   e quadros-chave gerados pelo tv.js, geraMoedas/cssMoedas); nuvem de poeira dourada com brilhos fica no ar ~2,8 s
   subindo devagar e se desfazendo. */
#festa_moedas { position: absolute; width: 0; height: 0; display: none; }
body.festa-mostra.efeito-queda #festa_moedas { display: block; }
.moeda { position: absolute; opacity: 0; }
.moeda .face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(img/moeda.png) no-repeat;
  -webkit-background-size: 100% 100%; background-size: 100% 100%; }
#festa_poeira { position: absolute; display: none; opacity: 0; background: url(img/poeira.png) no-repeat;
  -webkit-background-size: 100% 100%; background-size: 100% 100%; }
body.festa-mostra.efeito-queda #festa_poeira { display: block;
  -webkit-animation: festaPoeira 2.8s linear .71s both; animation: festaPoeira 2.8s linear .71s both; }
@-webkit-keyframes festaPoeira {
  0% { opacity: 0; -webkit-transform: translateY(0) scale(.35, .4); }
  6% { opacity: .85; -webkit-transform: translateY(-6px) scale(.8, .75); }
  30% { opacity: .72; -webkit-transform: translateY(-24px) scale(1.12, 1); }
  65% { opacity: .38; -webkit-transform: translateY(-48px) scale(1.3, 1.1); }
  100% { opacity: 0; -webkit-transform: translateY(-72px) scale(1.42, 1.18); } }
@keyframes festaPoeira {
  0% { opacity: 0; transform: translateY(0) scale(.35, .4); }
  6% { opacity: .85; transform: translateY(-6px) scale(.8, .75); }
  30% { opacity: .72; transform: translateY(-24px) scale(1.12, 1); }
  65% { opacity: .38; transform: translateY(-48px) scale(1.3, 1.1); }
  100% { opacity: 0; transform: translateY(-72px) scale(1.42, 1.18); } }

/* Queda com o efeito assado no video (11/10/2026): moedas, poeira, clarao e som vem no video da festa; os da pagina
   ficam desligados (pesavam na Tinker). */
body.queda-video #festa_moedas, body.queda-video #festa_poeira, body.queda-video #festa_impacto { display: none !important; }
/* Queda leve (11/10/2026): o valor vem num canvas ja na escala da tela, fora do palco, so mudando de posicao; o tremor
   esta no video. Na Tinker, CSS animando o valor escalado ou a tela inteira derrubava a batida para 16-26 q/s. */
#festa_quadro { position: absolute; display: none; }
body.festa-mostra.queda-canvas #festa_quadro { display: block; }
body.queda-canvas #festa_num { display: none; }
body.queda-video #festa { -webkit-animation: none !important; animation: none !important; }
/* Camada da frente da queda (11/10/2026): canvas por cima do valor com as moedas que saltam na frente dos numeros e
   ficam deitadas diante deles, e a poeira por cima dos digitos. Aparece no primeiro quadro depois da batida. */
#festa_frente { position: absolute; display: none; }
body.festa-mostra.queda-frente #festa_frente { display: block; }