#pwa-install-card{display:none}
#pwa-install-card:not([hidden]){
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:5000;
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;
  width:min(560px,92vw);padding:16px 17px;box-sizing:border-box;
  border:1px solid rgba(255,192,73,.58);border-radius:18px;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,173,35,.16),transparent 34%),
    linear-gradient(180deg,rgba(9,17,29,.985),rgba(3,8,15,.985));
  box-shadow:0 26px 70px rgba(0,0,0,.72),0 0 34px rgba(255,155,30,.12),inset 0 1px rgba(255,238,190,.08);
  color:#eef4ff;opacity:0;transform:translate(-50%,24px) scale(.95);
  transition:opacity .22s ease,transform .22s ease;
  overflow:hidden;backdrop-filter:blur(12px)
}
#pwa-install-card.show{opacity:1;transform:translate(-50%,0) scale(1)}
#pwa-install-card .pwa-install-energy{
  position:absolute;inset:-40%;pointer-events:none;opacity:.55;
  background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,181,44,.13) 29%,transparent 38% 60%,rgba(65,147,255,.09) 70%,transparent 82%);
  animation:pwaEnergy 8s linear infinite
}
#pwa-install-card .pwa-install-icon{position:relative;z-index:1;width:72px;height:72px;border-radius:17px;overflow:hidden;box-shadow:0 0 22px rgba(255,167,38,.25),0 8px 24px rgba(0,0,0,.35)}
#pwa-install-card .pwa-install-icon img{width:100%;height:100%;display:block}
#pwa-install-card .pwa-install-copy{position:relative;z-index:1;min-width:0}
#pwa-install-card .pwa-install-kicker{display:block;margin-bottom:3px;color:#e9a43b;letter-spacing:.13em;font:800 8px/1.2 "Segoe UI",Arial,sans-serif}
#pwa-install-card .pwa-install-copy>b{display:block;color:#ffe3a6;font:900 16px/1.15 "Segoe UI",Arial,sans-serif;text-shadow:0 0 12px rgba(255,184,55,.14)}
#pwa-install-card p{margin:6px 0 8px;color:#c0ccda;font:11px/1.42 "Segoe UI",Arial,sans-serif}
#pwa-install-card small{display:block;margin:5px 0 10px;color:#e0e9f5;font:10px/1.35 "Segoe UI",Arial,sans-serif}
#pwa-install-card .pwa-install-actions{display:flex;gap:8px;flex-wrap:wrap}
#pwa-install-card button{min-height:38px;padding:0 16px;border-radius:9px;border:1px solid rgba(255,207,103,.48);background:linear-gradient(180deg,#d99122,#8b4a0d);box-shadow:0 5px 18px rgba(130,65,8,.25),inset 0 1px rgba(255,255,255,.13);color:#fff6d4;font:900 10px "Segoe UI",Arial,sans-serif;cursor:pointer;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
#pwa-install-card [data-pwa-install]:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 7px 22px rgba(172,88,11,.32),0 0 18px rgba(255,184,55,.16)}
#pwa-install-card [data-pwa-later]{border-color:rgba(135,160,190,.20);background:rgba(14,23,35,.80);color:#aebccc;box-shadow:none}

/* Segunda etapa: maior e mais chamativa após a primeira recusa. */
#pwa-install-card.strong{width:min(620px,94vw);border-color:rgba(255,194,64,.78);box-shadow:0 30px 85px rgba(0,0,0,.76),0 0 48px rgba(255,158,30,.18),inset 0 1px rgba(255,239,194,.10)}
#pwa-install-card.strong .pwa-install-icon{box-shadow:0 0 30px rgba(255,170,35,.36),0 10px 28px rgba(0,0,0,.42)}
#pwa-install-card.strong [data-pwa-install]{animation:pwaButtonPulse 2.2s ease-in-out infinite}

/* Terceira etapa: pedido mais forte, ainda com "Agora não" disponível. */
#pwa-install-card.urgent{bottom:50%;transform:translate(-50%,50%) scale(.93);width:min(660px,94vw);padding:20px;border-width:2px}
#pwa-install-card.urgent.show{transform:translate(-50%,50%) scale(1)}
#pwa-install-card.urgent .pwa-install-copy>b{font-size:19px}
#pwa-install-card.urgent p{font-size:12px}
#pwa-install-card.urgent:before{
  content:"";position:fixed;inset:-100vh -100vw;z-index:-2;background:rgba(0,0,0,.46);backdrop-filter:blur(2px);pointer-events:none
}
#pwa-install-card.urgent:after{
  content:"";position:absolute;inset:-2px;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,213,113,.42),0 0 42px rgba(255,146,18,.24);
  animation:pwaCardPulse 2.6s ease-in-out infinite
}

/* Botão permanente para quem fecha o cartão ou quando o navegador libera o prompt depois. */
#pwa-install-pill:not([hidden]){
  position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));
  z-index:4200;display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 12px 6px 7px;
  border:1px solid rgba(255,190,73,.48);border-radius:999px;
  background:linear-gradient(180deg,rgba(15,25,40,.96),rgba(6,12,22,.97));
  box-shadow:0 12px 34px rgba(0,0,0,.48),0 0 18px rgba(255,166,35,.12);
  color:#ffe2a1;font:900 10px "Segoe UI",Arial,sans-serif;cursor:pointer
}
#pwa-install-pill img{width:30px;height:30px;border-radius:8px}
#pwa-install-pill.hot{animation:pwaPillPulse 2.8s ease-in-out infinite}

@keyframes pwaEnergy{to{transform:rotate(360deg)}}
@keyframes pwaButtonPulse{0%,100%{box-shadow:0 5px 18px rgba(130,65,8,.25),0 0 0 rgba(255,177,42,0)}50%{box-shadow:0 7px 24px rgba(161,78,8,.38),0 0 20px rgba(255,177,42,.22)}}
@keyframes pwaCardPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes pwaPillPulse{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.48),0 0 14px rgba(255,166,35,.10)}50%{box-shadow:0 12px 34px rgba(0,0,0,.48),0 0 26px rgba(255,166,35,.28)}}

@media(max-width:700px){
  #pwa-install-card:not([hidden]){grid-template-columns:58px minmax(0,1fr);gap:11px;width:min(500px,92vw);padding:12px 13px;border-radius:14px}
  #pwa-install-card .pwa-install-icon{width:58px;height:58px;border-radius:13px}
  #pwa-install-card .pwa-install-copy>b{font-size:13px}
  #pwa-install-card p{font-size:9.5px;margin:4px 0 6px}
  #pwa-install-card small{font-size:9px;margin:4px 0 7px}
  #pwa-install-card button{min-height:33px;padding:0 11px;font-size:9px}
  #pwa-install-card.urgent .pwa-install-copy>b{font-size:15px}
  #pwa-install-card.urgent p{font-size:10px}
}
@media(max-height:380px) and (orientation:landscape){
  #pwa-install-card:not([hidden]){bottom:7px;width:min(520px,82vw);grid-template-columns:46px minmax(0,1fr);padding:8px 9px;gap:8px}
  #pwa-install-card .pwa-install-icon{width:46px;height:46px}
  #pwa-install-card .pwa-install-kicker{font-size:7px}
  #pwa-install-card .pwa-install-copy>b{font-size:11px}
  #pwa-install-card p{font-size:8px;margin:2px 0 4px}
  #pwa-install-card small{font-size:7.8px;margin:2px 0 4px}
  #pwa-install-card button{min-height:27px;font-size:8px;padding:0 8px}
  #pwa-install-card.urgent{bottom:50%;width:min(560px,85vw)}
}
@media(prefers-reduced-motion:reduce){
  #pwa-install-card .pwa-install-energy,#pwa-install-card.strong [data-pwa-install],#pwa-install-card.urgent:after,#pwa-install-pill.hot{animation:none}
}

/* No login e na escolha de personagem o cartão ficava em cima dos botões "Entrar" / "Entrar no mundo"
   no celular (o 1º toque caía no cartão): enquanto essas telas estiverem abertas, ele e o botão de
   instalar vão para o topo. */
body:has(#scr-login:not([hidden])) #pwa-install-card:not([hidden]):not(.urgent),
body:has(#scr-slots:not([hidden])) #pwa-install-card:not([hidden]):not(.urgent){
  top:max(10px,env(safe-area-inset-top));bottom:auto;
}
body:has(#scr-login:not([hidden])) #pwa-install-pill:not([hidden]),
body:has(#scr-slots:not([hidden])) #pwa-install-pill:not([hidden]){
  top:max(10px,env(safe-area-inset-top));bottom:auto;
}