/* ============================================================
   ÁREA SEGURA (notch / Dynamic Island / home indicator)
   ------------------------------------------------------------
   O jogo é em PAISAGEM: no iPhone o notch fica numa das LATERAIS.
   Sem tratamento, o conteúdo (cards, barra de topo) passa por baixo
   do Dynamic Island. Aqui recuamos o conteúdo pela área segura.

   env(safe-area-inset-*) vale 0 num navegador comum, então a versão
   WEB NÃO muda — este recuo só aparece onde existe área segura
   (app nativo iOS ou PWA num telefone com notch).
   ============================================================ */

/* Conteúdo em fluxo de cada tela recua das laterais/baixo seguros.
   Os fundos (backdrops com position:absolute) ignoram o padding e
   seguem sangrando de borda a borda — a arte continua cheia. */
.screen {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* A barra de topo é absoluta (ignora o padding do .screen), então
   recua sozinha. max() preserva o respiro original de 28px na web. */
.topbar,
.v2-topbar {
    padding-left: max(28px, env(safe-area-inset-left, 0px));
    padding-right: max(28px, env(safe-area-inset-right, 0px));
}