/* JOGO EM 1280×720 TRAVADO, 16:9 SEMPRE — a página inteira é uma moldura preta e o jogo é um
   retângulo de tamanho FIXO no meio dela. Redimensionar a janela não estica o jogo; só em TELA CHEIA
   ele cresce, e ainda assim mantendo 16:9. Janela menor que 1280×720 encolhe o jogo (em vez de
   cortá-lo), sempre na proporção. Quem calcula os números é o fitCanvasTo169() do index.html.

   O `!important` do #unity-canvas é o pulo do gato: em tela cheia a própria Unity escreve
   width/height INLINE no canvas (100%/100%), e uma regra de folha de estilo com !important ganha de
   estilo inline sem !important. Sem isso o 16:9 valeria na janela e se perderia no fullscreen. */

html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: #000 }

:root { --game-w: 1280px; --game-h: 720px }

/* TOPO/CENTRO: colado no alto, centralizado na horizontal. Numa janela mais alta que 16:9 a sobra
   preta fica TODA embaixo, em vez de metade em cima e metade embaixo — o jogo não "flutua" no meio
   da tela e a página não obriga o jogador a rolar nem a procurar onde ele está. */
#unity-container {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  display: flex; align-items: flex-start; justify-content: center;
}

#unity-canvas {
  width: var(--game-w) !important;
  height: var(--game-h) !important;
  background: #231F20;
  display: block;
}

/* Carregamento centralizado na moldura. */
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }

/* Rodapé FLUTUANTE sobre a barra preta — se ele ocupasse espaço no fluxo, roubaria altura do jogo e
   o 16:9 teria que ser calculado descontando ele. Com o jogo colado no topo, a sobra preta de baixo
   é justamente onde ele cabe sem atrapalhar nada: nome do jogo à esquerda, tela cheia à direita.
   O logo da Unity sai — o rodapé é do SEU jogo. */
#unity-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; pointer-events: none;
}
#unity-footer > * { pointer-events: auto }
#unity-logo-title-footer { display: none }
#unity-build-title {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  color: rgba(255, 255, 255, .38);
}
#unity-fullscreen-button {
  cursor: pointer; width: 32px; height: 32px;
  background: url('fullscreen-button.png') no-repeat center / contain;
  opacity: .38; transition: opacity .2s;
}
#unity-fullscreen-button:hover { opacity: 1 }

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none; z-index: 3 }