/* Isolado sob #app de proposito: este arquivo pode ser embutido direto numa
   pagina hospedeira (sem iframe), entao nao pode usar seletores globais nem
   nomes de classe genericos que possam colidir com o CSS da pagina.

   ATENCAO: o reset abaixo usa seletor de ID e vence qualquer regra declarada so
   por classe. Toda regra que dependa de margin ou padding precisa de #app no
   seletor, inclusive dentro de @media, e centralizar num ponto exige
   transform: translate(), nunca margin negativa. js/style.test.js guarda isso. */
#app, #app *, #app *::before, #app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* As tres fontes do original, extraidas dos glifos embutidos no proprio SWF
   por tools/preparar_fontes.py e subsetadas ao que o jogo escreve: 13 KB
   somadas. Sem elas nada de texto bate -- o desenho todo e VAG Rounded, que
   nenhuma fonte de sistema aproxima.

   font-weight: normal em toda regra que usa a Titulo: ela JA e a Xbold, e
   pedir bold faz o navegador engordar o desenho por conta propria. */
@font-face {
  font-family: 'Combinacoes Titulo';
  src: url('../assets/fontes/titulo.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Combinacoes Passo';
  src: url('../assets/fontes/passo.woff2') format('woff2');
  font-display: block;
}

@font-face {
  font-family: 'Combinacoes Compartilhe';
  src: url('../assets/fontes/compartilhe.woff2') format('woff2');
  font-display: block;
}

#app {
  position: relative;
  width: 100%;
  max-width: 940px;
  aspect-ratio: 940 / 560;
  margin: 0 auto;
  /* O palco INTEIRO e container de consulta, e nao so algumas caixas de dentro.
     Isto nao e enfeite: um cqw so vale 1% do palco se houver um container de
     tamanho acima, e sem ele o navegador cai calado em 1% da JANELA. Foi o que
     aconteceu com os valores do HUD -- numa janela de 1900px a fonte de 40px
     virava 81px e "190" cobria a palavra "Tempo:". O mesmo tinha acontecido com
     as setas das instrucoes. Com a regra aqui, nenhum cqw do projeto consegue
     mais escapar para a janela. */
  container-type: size;
  container-name: j7c-palco;
  font-family: 'Combinacoes Titulo', 'Segoe UI', Arial, sans-serif;
  font-weight: normal;
}

/* Os seis personagens do menu. A caixa e o palco inteiro para que as medidas
   geradas em css/animacoes.css sejam percentuais do palco; container-type: size
   e o que faz cqw/cqh valerem 1% do palco em vez de 1% da janela.

   transform-origin: 0 0 nao e escolha de estilo: o movimento gerado ja vem
   resolvido para o canto da imagem, entao qualquer outra origem desloca tudo.
   A animacao e linear de proposito -- cada chave e um QUADRO real do SWF, e
   suavizar entre elas alteraria o movimento autorado. */
#app .j7c-menu-turma {
  position: absolute;
  inset: 0;
  container-type: size;
  container-name: j7c-palco;
  pointer-events: none;
}

#app .j7c-menu-personagem {
  position: absolute;
  margin: 0;
  padding: 0;
  transform-origin: 0 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Quem prefere menos movimento fica com a cena parada no primeiro quadro. */
@media (prefers-reduced-motion: reduce) {
  #app .j7c-menu-personagem { animation: none; }
}

/* As telas ficam empilhadas na mesma area; so a ativa e exibida. */
.j7c-tela {
  position: absolute;
  inset: 0;
  display: none;
}

.j7c-tela.j7c-ativa {
  display: block;
}

.j7c-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Mesma razao da bandeja: caixa que ocupa o palco inteiro nao pode receber
     ponteiro. Aqui ela esta no fundo e hoje nao atrapalha, mas basta alguem
     mexer em z-index para virar o mesmo bug. */
  pointer-events: none;
}

/* O rotulo do botao ja esta desenhado na arte de fundo. O <button> e apenas a
   area clicavel sobre ele; o texto continua no HTML para leitores de tela e e
   recuado para fora da area visivel. Medidas tiradas das capturas do original
   (assets/cenario/menu.png e instrucao-*.png, 1880x1120). */
#app .j7c-btn {
  position: absolute;
  z-index: 1;
  left: 52.4%;
  top: 85.7%;
  width: 22.4%;
  height: 10.6%;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -200vw;
  cursor: pointer;
  transform: translateX(-50%);
}

/* Tela de escolha do personagem. Os seis botoes sao os bitmaps de 180x163 do
   SWF, que ja trazem a moldura arredondada e o nome desenhados dentro -- nao ha
   rotulo de texto a compor. A grade tem 3 colunas por 2 linhas: LEO, LULI e
   JUBA em cima; IRMA RODA-RODA, IRMAO RODA-RODA e VALENTE embaixo. As medidas
   saem de assets/cenario/selecao.png (1880x1120): colunas em 505, 839 e 1172 px
   e linhas em 352 e 650 px, cada botao com 326x295 px. */
.j7c-grade {
  position: absolute;
  z-index: 1;
  left: 26.88%;
  top: 31.39%;
  width: 52.78%;
  height: 52.99%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 0.71%;
  row-gap: 0.44%;
}

/* Precisa de #app no seletor: o reset usa ID e zeraria o padding declarado
   apenas na classe. */
#app .j7c-opcao {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 120ms ease-out;
}

/* O original cresce o botao sob o ponteiro; o mesmo realce serve ao foco de
   teclado, que no original nao existia. */
#app .j7c-opcao:hover,
#app .j7c-opcao:focus-visible {
  transform: scale(1.06);
}

/* Telas de instrucao.
   O original nao tem tres telas: tem um clipe so com as tres paginas lado a
   lado, que as setas deslizam 634,75px por vez com Strong.easeOut em 0,6s.
   Aqui o fundo e o painel VAZIO e tudo o que muda de pagina vive numa faixa
   que anda -- texto, roletas, tabuleiro de demonstracao e cursor.
   Posicao, tamanho e movimento estao em css/instrucoes.css, gerado por
   tools/preparar_instrucoes.py a partir das tags do SWF. */
/* As setas ficam FORA da faixa (elas nao andam com ela) e mesmo assim medem em
   cqw. Sem esta regra o cqw delas cairia na janela, e a seta saia gigante e
   fora do palco. */
#app #tela-instrucoes {
  container-type: size;
  container-name: j7c-palco;
}

#app .j7c-instrucao-palco {
  position: absolute;
  inset: 0;
  z-index: 1;
  container-type: size;
  container-name: j7c-palco;
  /* A faixa e mais larga que o palco: sem isto as paginas 2 e 3 apareceriam
     fora dele. */
  overflow: hidden;
  /* E nao basta cortar no palco. No original a moldura laranja NAO faz parte do
     fundo: e um clipe desenhado por cima de tudo (profundidades 265 a 275), e e
     ela que esconde a sobra da pagina vizinha -- nas tres capturas do original
     nao aparece nada nas bordas. Aqui a moldura ja esta dentro do JPEG de
     fundo, entao quem faz esse servico e o recorte, medido na abertura roxa do
     painel e gerado em css/instrucoes.css. */
  clip-path: inset(0 var(--j7c-recorte-direita, 0) 0 var(--j7c-recorte-esquerda, 0));
  /* Caixa de palco inteiro: nada aqui se clica. */
  pointer-events: none;
}

#app .j7c-instrucao-faixa {
  position: absolute;
  width: 0;
  height: 0;
  transform: translateX(calc(var(--j7c-passo) * var(--j7c-pagina, 0) * -1));
}

#app .j7c-instrucao-faixa > * {
  position: absolute;
  margin: 0;
}

/* O texto de cada passo e <svg>: so ele resolve a linha de base exatamente
   onde o DefineText a coloca, sem depender da metrica que o navegador escolhe
   para a fonte. O giro de -3 graus e o do clipe no original. */
#app .j7c-passo {
  overflow: visible;
  transform-origin: 0 0;
  transform: rotate(-3deg);
  font-family: 'Combinacoes Passo', 'Segoe UI', Arial, sans-serif;
  font-weight: normal;
}

/* As roletas da pagina 1: os doze icones empilhados, um visivel por quadro. */
#app .j7c-roleta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Decorativo: o palco das instrucoes ja e pointer-events none, mas a regra
     fica declarada aqui tambem porque e uma caixa com inset: 0 -- e foi uma
     caixa dessas que engoliu o clique dos doze potes do tabuleiro. */
  pointer-events: none;
  /* Cada chave e um quadro do SWF; interpolar entre eles viraria dissolucao,
     e o original troca de icone seco. */
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

#app .j7c-demo-cursor {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
  #app .j7c-roleta img,
  #app .j7c-demo-cursor { animation: none; }
  #app .j7c-roleta img:first-child { opacity: 1; }
  #app .j7c-instrucao-faixa { transition: none; }
}

/* As setas sao vivas, e nao mais parte do desenho: no original cada uma tem
   _alpha 80 e, sob o mouse, anda 5px para fora e acende ate 100. A da
   esquerda e a mesma forma girada 180 graus. */
#app .j7c-seta {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: none;
  background: url('../assets/instrucoes/seta.png') center / 100% 100% no-repeat;
  opacity: 0.8;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -200vw;
  cursor: pointer;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#app .j7c-seta:hover,
#app .j7c-seta:focus-visible { opacity: 1; }

#app .j7c-seta-direita:hover,
#app .j7c-seta-direita:focus-visible { translate: var(--j7c-seta-anda) 0; }

#app .j7c-seta-esquerda:hover,
#app .j7c-seta-esquerda:focus-visible { translate: calc(var(--j7c-seta-anda) * -1) 0; }

/* Fase de memorizacao: a roleta.
   O original nao mostra a sequencia pronta -- ele sorteia na tela. Os slots
   giram passando pelas 12 poses e travam um por um, da esquerda para a direita,
   e a cada travada o nome surge crescendo.
   As posicoes saem do bytecode (funcao posicaoBolas), convertidas de unidades
   de palco para porcentagem pelo fator medido no caso de tres slots, que bate
   com a captura do original dentro de 0,011 ponto percentual. */
/* Vira container de consulta para que o tamanho do nome acompanhe o palco.
   Medir em vw amarraria o texto a janela, e o palco tem largura propria: numa
   janela larga o nome sairia gigante, numa estreita sumiria. */
.j7c-sequencia {
  position: absolute;
  inset: 0;
  z-index: 1;
  container-type: size;
  container-name: j7c-palco;
  /* Nada aqui se clica, e a caixa ocupa o palco inteiro. */
  pointer-events: none;
}

/* O icone e 180x224: o circulo ocupa so os 180 de baixo e os 44 de cima sao a
   sobra do que transborda (maracas, bola, a caixa que o Valente equilibra).
   Entao a caixa do slot e mais alta que o circulo, e o topo dela fica ACIMA do
   topo do circulo na mesma proporcao. Medido na captura: o circulo comeca em
   45.45% e tem 334px de diametro, logo o icone inteiro comeca em 38.11%.
   Usar a altura do circulo aqui empurraria o nome para cima do desenho. */
#app .j7c-slot {
  position: absolute;
  top: 38.11%;
  width: 17.77%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}

.j7c-slot img {
  display: block;
  width: 100%;
}

/* O nome nasce encolhido e cresce com folga elastica quando o slot trava. A
   curva vem do Elastic.easeOut do Flash, amostrada em quadros intermediarios:
   o CSS nao tem equivalente direto. */
#app .j7c-slot-nome {
  position: absolute;
  top: 100%;
  left: 50%;
  /* Nao pode passar da largura do slot: o vao entre slots vizinhos e de apenas
     1,3 ponto percentual, entao uma caixa mais larga faz "IRMAO RODA-RODA"
     invadir o nome do lado. Com 100% o texto quebra em duas linhas como no
     original, "IRMAO" em cima e "RODA-RODA" embaixo. */
  width: 100%;
  margin: 0;
  padding: 0;
  /* Cor e corpo do DefineText 147-152: 17px no palco de 940 e #ff6600. Com a
     fonte do original nao ha mais nada a calibrar -- a medida e a do SWF. */
  color: #ff6600;
  font-weight: normal;
  font-size: 1.81cqw;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  /* O nome chega com uma quebra explicita depois da primeira palavra, como no
     original; pre-line respeita essa quebra e continua juntando o resto. */
  white-space: pre-line;
  transform: translateX(-50%) scale(0.1);
  opacity: 0;
}

/* Precisa de #app: a regra base acima usa `#app .j7c-slot-nome`, que tem
   seletor de ID e vence duas classes. Sem isto o nome fica com opacity 0 e nao
   aparece nunca, ainda que a classe esteja aplicada e a animacao rodando. */
#app .j7c-slot-nome.j7c-slot-travado {
  opacity: 1;
  animation: j7c-nome-surge 0.5s linear forwards;
}

/* Todo quadro repete o translateX(-50%): sem ele o nome salta para o lado
   durante a animacao, que e a mesma armadilha do marcador do jogo anterior. */
@keyframes j7c-nome-surge {
  0%   { transform: translateX(-50%) scale(0.10); }
  12%  { transform: translateX(-50%) scale(0.86); }
  24%  { transform: translateX(-50%) scale(1.17); }
  36%  { transform: translateX(-50%) scale(1.09); }
  50%  { transform: translateX(-50%) scale(0.97); }
  64%  { transform: translateX(-50%) scale(0.99); }
  78%  { transform: translateX(-50%) scale(1.01); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Tabuleiro.
   Os 12 icones NAO sao elementos vivos: eles nunca mudam durante a partida,
   entao continuam sendo o desenho do fundo e por cima ficam apenas areas
   clicaveis transparentes -- mesmo padrao do botao Jogar e das setas. Isso
   evita ter de reconstruir o ceu e as nuvens que passam atras deles.
   Medidas por casamento de template contra assets/cenario/tabuleiro.png:
   colunas de 8,51% em 8,51% a partir de 16,81%, linhas em 25,18% e 41,61%,
   icone com 6,89% da largura do palco. */
.j7c-tabuleiro,
.j7c-bandeja {
  position: absolute;
  inset: 0;
  z-index: 1;
  container-type: size;
  container-name: j7c-palco;
  /* As duas caixas ocupam o palco inteiro e a bandeja vem depois do tabuleiro,
     entao sem isto ela fica por cima e engole o clique dos 12 potes. Quem
     precisa receber ponteiro devolve pointer-events na propria regra. */
  pointer-events: none;
}

#app .j7c-pote {
  pointer-events: auto;
  position: absolute;
  width: 6.89%;
  height: 14.4%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

#app .j7c-pote[disabled] {
  cursor: default;
}

/* O icone sob o mouse cresce e entorta. No original (menuPotes) o clipe vai de
   _xscale 76,6586 para 110 -- 143,5% -- com Elastic.easeOut em 0,3s, gira -5 ou
   +5 graus sorteados, e sobe para o topo da pilha.
   Os doze icones sao elementos vivos, e nao mais parte do desenho de fundo:
   tools/preparar_potes.py apagou os desenhados. Sem isso nao havia o que
   crescer -- e ainda ficava no fundo o juba-1 gravado grande, porque a captura
   pegou o mouse em cima dele. */
#app .j7c-pote img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Elastic.easeOut amostrado em 8 pontos. Navegador que nao conhece linear()
     ignora esta linha e fica com o bezier acima, que passa do ponto uma vez so. */
  transition-timing-function: linear(0, 0.63, 1.13, 1.09, 0.98, 0.99, 1.01, 1);
  pointer-events: none;
}

#app .j7c-pote:hover,
#app .j7c-pote:focus-visible {
  z-index: 2;
}

#app .j7c-pote:hover img,
#app .j7c-pote:focus-visible img {
  transform: scale(1.435) rotate(var(--j7c-giro, 0deg));
}

/* Enquanto o item cai o tabuleiro fica travado, e nada cresce. */
#app .j7c-pote[disabled] img {
  transform: scale(1) rotate(0deg);
}

/* Nome do personagem para leitor de tela, fora da vista sem sair da pagina. */
.j7c-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Valores do HUD. Os rotulos ja estao na arte; estas caixas cobrem exatamente
   onde os valores desenhados foram apagados por tools/preparar_tabuleiro.py. */
#app .j7c-hud-valor {
  position: absolute;
  top: 7.14%;
  margin: 0;
  padding: 0;
  z-index: 2;
  /* DefineEditText 199 e 201: 40px no palco de 940 e #ff7d00. */
  color: #ff7d00;
  font-weight: normal;
  font-size: 4.26cqw;
  line-height: 1;
  white-space: nowrap;
}

.j7c-hud-pontos { left: 34.36%; }
.j7c-hud-tempo { left: 52.82%; }

/* Bandeja: os itens escolhidos caem aqui, um por slot, e o nome surge embaixo.
   Posicoes do bytecode (bandeja em -425,70 dentro de miolo, que esta em 482,60;
   slots de 134,4 em 134,4), conferidas na captura: o slot 1 calcula 12,94% e
   mede 12,93%. */
#app .j7c-slot-bandeja {
  position: absolute;
  top: 55.5%;
  width: 14.36%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  opacity: 0;
}

.j7c-slot-bandeja img {
  display: block;
  width: 100%;
}

/* A marca de conferencia, estrela verde ou X vinho, por cima do icone que caiu
   na bandeja. As duas sao as formas 80 e 81 do SWF, que no original sao os
   quadros 2 e 3 do proprio clipe do icone -- por isso a caixa delas e medida
   em relacao a arte do icone, e nao escolhida de olho: a forma tem 98,5px
   contra os 99,0 de largura e 123,2 de altura do icone, encostada embaixo. */
#app .j7c-slot-marca {
  position: absolute;
  left: 0.3%;
  top: 19.8%;
  width: 99.5%;
  height: auto;
  pointer-events: none;
  transform-origin: 50% 50%;
  /* Entra crescendo, como tudo que entra neste jogo (Elastic.easeOut). */
  animation: j7c-marca-surge 0.45s both;
}

#app .j7c-slot-marca[hidden] {
  display: none;
}

@keyframes j7c-marca-surge {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #app .j7c-slot-marca { animation: none; }
}

#app .j7c-slot-bandeja.j7c-caiu {
  opacity: 1;
  animation: j7c-item-cai 0.5s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

/* Strong.easeIn do Flash: a queda comeca devagar e acelera ate o fim. */
@keyframes j7c-item-cai {
  from { transform: translateX(-50%) translateY(-120%); }
  to   { transform: translateX(-50%) translateY(0); }
}

/* Declarado explicitamente: `position: absolute` acima nao esconde nada, e
   sem esta regra uma seta com [hidden] continuaria visivel e clicavel caso
   algum estilo futuro reponha o display. */
#app .j7c-seta[hidden] {
  display: none;
}

#app .j7c-opcao:focus-visible {
  outline: 0.2em solid #fff;
  outline-offset: 0.1em;
  border-radius: 8%;
}

@media (prefers-reduced-motion: reduce) {
  #app .j7c-opcao {
    transition: none;
  }
}

.j7c-opcao img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* O mascote: o boneco grande da direita do tabuleiro, que e o personagem
   escolhido. A caixa de cada um vem do JS, porque muda de personagem para
   personagem. O recorte a direita imita o painel do original, que passa por
   cima do boneco -- o braco erguido do Leo, por exemplo, some por tras dele. */
.j7c-area-do-mascote {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 6.28% 0 0);
  pointer-events: none;
}

#app .j7c-mascote {
  position: absolute;
  margin: 0;
  padding: 0;
}

/* Caixa de resultado. No original nao e uma tela: e um retangulo branco a 92%
   que aparece por cima do tabuleiro, com o cenario e o mascote atras. Todas as
   medidas vieram da captura assets/cenario/resultado.png, em porcentagem do
   palco; as de dentro sao porcentagem da propria caixa. */
#app .j7c-caixa {
  position: absolute;
  /* No original a caixa fica encostada a esquerda (11,65%), porque o boneco
     grande ocupa a direita e tem de continuar a vista. Aqui ela e centrada a
     pedido do Gabriel: com o veu por tras, o boneco ja nao disputa a leitura e
     a caixa torta no meio da tela chamava mais atencao que o conteudo. */
  left: 20.45%;
  top: 19.55%;
  width: 59.1%;
  height: 64.11%;
  margin: 0;
  padding: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 3.73cqw;
  /* A propria caixa e o container das medidas de dentro: assim um cqw vale um
     centesimo da largura dela, e os tamanhos de texto acompanham a caixa. */
  container-type: size;
  container-name: j7c-caixa;
  text-align: center;
  /* Elastic.easeOut de 0 a 100 em 0,5s, como no fim() do original. */
  animation: j7c-caixa-surge 0.5s both;
}

#app .j7c-caixa[hidden] {
  display: none;
}

/* Elastic.easeOut amostrado em 8 quadros: a caixa passa do tamanho final e
   volta, que e o efeito de mola do Flash. */
@keyframes j7c-caixa-surge {
  0%   { transform: scale(0); }
  14%  { transform: scale(0.63); }
  29%  { transform: scale(1.13); }
  43%  { transform: scale(1.09); }
  57%  { transform: scale(0.98); }
  71%  { transform: scale(0.99); }
  86%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}

#app .j7c-caixa p {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Cores e textos vem do SWF, nao da captura: os pixels da captura sao a borda
   antisserrilhada e davam tons proximos, mas errados. O titulo de vitoria e
   VERDE, e nao rosa como o de derrota. */
/* Os corpos abaixo sao os do SWF convertidos para a caixa, que e seu proprio
   container: 59,1% de 940 da 555,5px, entao 1cqw = 5,555px. 44px viram
   7,92cqw, 20px viram 3,6cqw, 12px viram 2,16cqw e 16px viram 2,88cqw. */
#app .j7c-caixa-titulo {
  top: 3.3%;
  font-size: 7.92cqw;
  font-weight: normal;
  color: #ff3366;
}

/* Os dois titulos tem o MESMO corpo no original (880 twips). O que mudava era
   so a cor: rosa na derrota, verde na vitoria. */
#app .j7c-caixa-titulo.j7c-caixa-venceu {
  font-size: 7.92cqw;
  color: #79ca00;
}

#app .j7c-caixa-mensagem {
  top: 22.5%;
  font-size: 3.6cqw;
  font-weight: normal;
  line-height: 1.32;
  color: #333;
}

#app .j7c-caixa-linha {
  font-weight: normal;
  font-size: 2.16cqw;
  /* Na arte as duas linhas nao ficam centradas na caixa: ficam um pouco a
     esquerda, com uma bolinha na frente. */
  padding-right: 10.8%;
}

#app .j7c-caixa-linha::before {
  content: '';
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-right: 0.8em;
  border-radius: 50%;
  background: #f90;
  vertical-align: 0.25em;
}

/* O numero e o dobro do rotulo: 24px contra 12px. */
#app .j7c-caixa-linha span {
  font-size: 2em;
  vertical-align: -0.12em;
  margin-left: 0.15em;
}

#app .j7c-caixa-pontos {
  top: 40.5%;
  color: #fc0;
}

#app .j7c-caixa-recorde {
  top: 54.8%;
  color: #f90;
}

/* "Compartilhe!" e a unica coisa no filme inteiro escrita na Denmark -- os 12
   glifos daquela fonte sao exatamente as letras desta palavra. */
#app .j7c-caixa-convite {
  top: 70.8%;
  font-family: 'Combinacoes Compartilhe', 'Segoe UI', Arial, sans-serif;
  font-size: 2.88cqw;
  color: #333;
}

/* No lugar dos quatro icones de rede social do original, que apontavam para
   servicos e encurtadores que nao existem mais. Fica na mesma altura em que
   eles ficavam. */
#app .j7c-caixa-compartilhar {
  position: absolute;
  left: 36.5%;
  top: 77.9%;
  width: 27%;
  height: 9.5%;
  margin: 0;
  padding: 0;
  border: 0.3cqw solid #cfcfd8;
  border-radius: 4.8cqw;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-weight: normal;
  font-size: 2.3cqw;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#app .j7c-caixa-compartilhar:hover,
#app .j7c-caixa-compartilhar:focus-visible {
  background: #ffcc00;
  color: #fff;
}

/* Escurece e desfoca o tabuleiro atras do resultado. Nao e do original: la a
   caixa entra sozinha sobre o jogo parado, e a leitura fica disputada com os
   doze icones por baixo. Vem DEPOIS da caixa no HTML e com z-index menor, para
   nao precisar de regra nova cada vez que a caixa mudar. */
#app .j7c-veu {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  /* Caixa de palco inteiro: nao pode receber ponteiro. */
  pointer-events: none;
  background: rgba(24, 20, 56, 0.4);
  backdrop-filter: blur(3px);
  animation: j7c-veu-surge 0.5s both;
}

#app .j7c-caixa:not([hidden]) + .j7c-veu {
  display: block;
}

@keyframes j7c-veu-surge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#app .j7c-caixa-btn {
  position: absolute;
  left: 31.5%;
  top: 91.6%;
  width: 37.6%;
  height: 17%;
  margin: 0;
  padding: 0;
  border: 0.59cqw solid #ffd02c;
  border-radius: 5.76cqw;
  white-space: nowrap;
  background: linear-gradient(#ffd42e, #dba800);
  color: #fff;
  font-family: inherit;
  font-size: 3.6cqw;
  font-weight: normal;
  cursor: pointer;
}