/* ============================================================
   🔔 CONVITE PARA LIGAR OS AVISOS
   Aparece só onde o aviso é mesmo útil (sem vidas · roda por reclamar).
   Explica primeiro o que o jogador ganha — o pedido cru do browser
   só se faz UMA vez na vida: se ele recusar, fica bloqueado para sempre.
   ============================================================ */

.notif-invite{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  width:100%; max-width:420px; margin:12px auto 0;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,214,90,.45);
  border-radius:16px; padding:13px 14px; text-align:center;
  animation:niIn .32s cubic-bezier(.2,1.25,.4,1);
}
@keyframes niIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* variante FIXA (pedido no menu, para jogadores já agarrados) — banner ao fundo, à frente de tudo */
.notif-invite.ni-fixed{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); z-index:900; width:calc(100% - 28px); max-width:420px; margin:0;
  background:linear-gradient(150deg,#1f2b46,#243a5e); border-color:rgba(255,214,90,.6);
  box-shadow:0 10px 30px rgba(0,0,0,.35); color:#fff;
}
.notif-invite.ni-out{ animation:niOut .3s ease forwards }
@keyframes niOut{ to{opacity:0; transform:translateX(-50%) translateY(10px)} }
.notif-invite:not(.ni-fixed).ni-out{ animation:niOutInline .3s ease forwards }
@keyframes niOutInline{ to{opacity:0; transform:translateY(8px)} }

.notif-invite .ni-ic{ font-size:1.7rem; line-height:1 }
.notif-invite .ni-tx{ display:flex; flex-direction:column; gap:3px }
.notif-invite .ni-tx b{ font-size:.95rem; line-height:1.3 }
.notif-invite .ni-tx small{ font-size:.76rem; line-height:1.35; opacity:.85 }

.notif-invite .ni-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; margin-top:2px }
.notif-invite .ni-btns .btn{ flex:1 1 130px; min-width:0 }
/* o «agora não» tem de ser fácil de encontrar: pressionar quem não quer custa caro */
.notif-invite .ni-no{ background:rgba(255,255,255,.16); color:inherit }

@media (prefers-reduced-motion:reduce){ .notif-invite{ animation:none } }