/* =========================================================
   pwa.css — os dois avisos do app instalável (ver js/pwa.js):
     · "Instalar o app"  (botão nativo ou instrução do iPhone/iPad)
     · "Nova versão disponível — atualizar"
   Ficam no TOPO, logo abaixo da barra: os cantos de baixo já
   têm os balões de jogos e do assistente, e os toasts usam o
   centro de baixo. Usa as variáveis de cor do style.css, então
   acompanha o tema escuro sozinho.
   ========================================================= */

.pwa-aviso{
  position:fixed;z-index:110;
  /* fora do app (tela de login, sem barra no topo): embaixo, no centro */
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  left:50%;transform:translateX(-50%);
  width:min(420px, calc(100vw - 2rem));
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .75rem .7rem .9rem;
  background:var(--surface, #fff);color:var(--ink, #1F2A2E);
  border:1px solid var(--line, #E3DCCD);border-radius:16px;
  box-shadow:var(--shadow-lg, 0 20px 40px -20px rgba(31,78,95,.35));
  font-family:var(--font, system-ui, sans-serif);
  animation:pwaEntra .3s var(--ease, ease-out);
}
.pwa-aviso[hidden]{display:none}

/* dentro do app (depois do login): no topo, logo abaixo da barra,
   longe dos balões de jogos e do assistente nos cantos de baixo */
body:has(#screenApp:not([hidden])) .pwa-aviso{
  bottom:auto;
  top:calc(var(--topbar-h, 74px) + env(safe-area-inset-top, 0px) + .6rem);
}

.pwa-aviso img{width:40px;height:40px;border-radius:10px;flex:none}
.pwa-aviso .pwa-texto{flex:1;min-width:0;line-height:1.35}
.pwa-aviso strong{display:block;font-size:.95rem;color:var(--heading, #1F4E5F)}
.pwa-aviso span{display:block;font-size:.84rem;color:var(--ink-2, #5C6B70)}

.pwa-aviso .pwa-sim{
  flex:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.88rem;
  padding:.55rem 1rem;border-radius:999px;
  background:var(--petrol, #1F4E5F);color:var(--on-petrol, #fff);
}
.pwa-aviso .pwa-fechar{
  flex:none;border:0;background:none;cursor:pointer;
  width:32px;height:32px;border-radius:50%;
  font-size:1.2rem;line-height:1;color:var(--ink-3, #8D9A9E);
}
.pwa-aviso .pwa-fechar:hover{background:var(--cream-d, #EDE7DB)}
.pwa-aviso button:focus-visible{outline:3px solid var(--gold, #C8A24A);outline-offset:2px}

/* ícone de "Compartilhar" do iOS dentro da instrução */
.pwa-ios-share{
  display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;margin:0 .1em;
  color:var(--petrol, #1F4E5F);
}
[data-theme="dark"] .pwa-ios-share{color:var(--ink, #F0F5F5)}

/* aviso de versão nova: faixa dourada à esquerda para chamar atenção */
.pwa-aviso.pwa-atualizar{border-left:4px solid var(--gold, #C8A24A)}

@keyframes pwaEntra{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){ .pwa-aviso{animation:none} }