/* ═══════════════════════════════════════════════════════════════════════
   O FUNDO DO APP - uma camada so, atras de TODAS as telas
   ═══════════════════════════════════════════════════════════════════════

   Nasceu em 15/09/2026 como fundo do menu, dentro do css/telas/menu.css.
   Em 16/09 o Boss pediu que ele fosse o fundo do aplicativo inteiro, entao
   saiu de la e virou este arquivo, com o id honesto `#app-fundo`.

   POR QUE UMA CAMADA, E NAO `background` NO `body`

   O legado escreve `document.body.className = tema` em tres lugares
   (configuracao carregada, configuracao salva, tema do canal). Qualquer
   coisa que dependesse de uma classe no body seria apagada na hora em que
   a pessoa salvasse a configuracao. Uma <div> fixa nao depende de classe
   nenhuma: nasce no arranque e fica.

   E ela e OPACA de proposito. O `body.theme-copa` continua pintando o verde
   chapado dele por baixo, intocado, e o app volta a ser o de hoje se este
   arquivo sumir.

   NAO e a imagem inteira esticada na tela. E uma FAIXA de largura cheia no
   topo, que vai apagando pro escuro embaixo.

   O motivo e concreto: o wallpaper tem as faixas BOSS FC nas DUAS PONTAS
   da imagem. Com `cover`, o navegador corta as laterais pra preencher a
   altura, e joga fora exatamente a parte que tem a marca. Com largura
   cheia (`100% auto`), as duas faixas aparecem sempre.

   Camada fixa, e nao background-attachment: fixed, que no iPhone treme.
   ═══════════════════════════════════════════════════════════════════════ */

#app-fundo { position: fixed; inset: 0; z-index: 0; background: var(--fundo); }

#app-fundo::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 2.07;                 /* a proporcao da faixa gerada */
  background: var(--faixa-1x) no-repeat center top;
  background-size: 100% auto;
  /* apaga pro escuro em vez de cortar reto */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%);
}
#app-fundo::after {
  /* Escurece o suficiente pro texto branco ler por cima. A primeira versão
     deixava o topo em 0.18 e ficava bonito, só que o LOGAR e os quatro
     redondos sumiam em cima das faixas iluminadas. Foto de estádio tem
     muito ponto claro: o véu precisa ser parelho, não só no pé. */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(1,10,2,0.62) 0%, rgba(1,10,2,0.48) 16%,
    rgba(1,10,2,0.55) 34%, rgba(1,10,2,0.80) 52%,
    rgba(1,10,2,0.95) 70%, var(--fundo) 100%);
}
@media (min-resolution: 2dppx) {
  #app-fundo::before { background-image: var(--faixa-2x); }
}
@media (min-width: 760px) {
  #app-fundo::before { background-image: var(--faixa-3x); }
}