/* =====================================================================
   INSTALAR O JOGO COMO APP (25/10) — src/ui/instalar-app.js
   A bolinha mora dentro do #colChatPanel, logo acima do botão CHAT, com a
   mesma largura do círculo dele (44 px) para ficar centrada em cima. Um
   arco dourado gira devagar em volta (o "girando discretamente" do autor);
   quem pediu menos movimento no aparelho vê o arco parado.
   ===================================================================== */
.col-app-instalar{position:relative;flex:0 0 auto;align-self:flex-end;width:44px;height:44px;display:grid;place-items:center}
.col-chat:not(.is-collapsed) .col-app-instalar,.col-chat:not(.is-collapsed) .col-app-balao{display:none}
.col-app-instalar-bola{position:relative;width:40px;height:40px;padding:0;border:0;border-radius:50%;cursor:var(--cur-mao,pointer);
  background:radial-gradient(circle at 50% 42%,#2a1f12 0%,#0c0b10 72%);box-shadow:0 3px 12px rgba(0,0,0,.55);
  display:grid;place-items:center;overflow:visible}
.col-app-instalar-bola::before{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(243,213,138,0) 0deg,rgba(243,213,138,0) 200deg,#f3d58a 320deg,rgba(243,213,138,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  animation:col-app-girar 4.5s linear infinite;will-change:transform}
.col-app-instalar-bola::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(168,146,110,.45);pointer-events:none}
.col-app-instalar-bola img{width:30px;height:30px;object-fit:contain;margin-top:-5px;pointer-events:none}
.col-app-instalar-bola b{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);padding:0 4px;border-radius:3px;
  background:#f3d58a;color:#1a140b;font:900 8px/11px var(--font-body,sans-serif);letter-spacing:.6px;pointer-events:none}
.col-app-instalar-bola:hover::after,.col-app-instalar-bola:focus-visible::after{border-color:#f3d58a}
.col-app-instalar-x{position:absolute;top:-3px;left:-3px;width:17px;height:17px;padding:0;border-radius:50%;cursor:var(--cur-mao,pointer);
  border:1px solid rgba(168,146,110,.55);background:rgba(12,11,16,.95);color:#bda984;font:700 12px/1 sans-serif;
  display:grid;place-items:center;opacity:.8}
/* Área de toque maior que o desenho, sem crescer o X. */
.col-app-instalar-x::before{content:"";position:absolute;inset:-6px}
.col-app-instalar-x:hover,.col-app-instalar-x:focus-visible{opacity:1;color:#fff0c4;border-color:#f3d58a}
@keyframes col-app-girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.col-app-instalar-bola::before{animation:none}}

/* Balão do iPhone/iPad: os 2 passos do Safari. */
.col-app-balao{align-self:flex-end;width:min(260px,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;border-radius:7px;
  border:1px solid #8a6b36;background:rgba(12,11,16,.97);box-shadow:0 12px 34px rgba(0,0,0,.6);color:#e0d6c6}
.col-app-balao-titulo{display:block;margin-bottom:6px;color:#f3d58a;font-size:calc(11px*var(--text-scale,1));line-height:1.3}
.col-app-balao ol{margin:0;padding:0 0 0 16px}
.col-app-balao li{margin:4px 0;font-size:calc(10.5px*var(--text-scale,1));line-height:1.35}
.col-app-balao-icone{display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:-3px;color:#6fb6ff}
.col-app-balao-icone svg{width:100%;height:100%}
.col-app-balao-ok{display:block;margin:8px 0 0 auto;padding:5px 12px;border-radius:5px;cursor:var(--cur-mao,pointer);
  border:1px solid #8a6b36;background:rgba(60,45,25,.75);color:#f3d58a;font-weight:900;letter-spacing:.8px;
  font-size:calc(9.5px*var(--text-scale,1))}

/* Celular deitado: o chat fechado fica no TOPO (varredura.css, item 19). A bolinha vai para o
   lado direito do círculo do chat em vez de empurrá-lo para baixo. */
@media (min-width:700px) and (max-height:520px){
  html.col-no-jogo .col-chat.is-collapsed{flex-direction:row;align-items:center}
  html.col-no-jogo .col-chat.is-collapsed .col-app-instalar{order:2}
  html.col-no-jogo .col-chat.is-collapsed .col-app-balao{position:absolute;top:52px;left:0;order:3}
}

/* Caminho fixo (26/10): a faixa "INSTALAR O JOGO COMO APP" no menu CONTA, com a moldura da faixa da
   Wiki logo acima. Ela é um <button>: o [hidden] precisa vencer o display:flex da moldura. */
#contaMenu .conta-b-app{width:100%;box-sizing:border-box;cursor:var(--cur-mao,pointer);font-family:inherit;text-align:left;border-color:rgba(224,173,76,.45)}
#contaMenu .conta-b-app[hidden]{display:none}
#contaMenu .conta-b-app span{min-width:0}
#contaMenu .col-app-balao{width:100%;margin:-4px 0 10px}
/* Menu CONTA aberto no PC (26/10): a faixa do herói (z 31, hud-arena.css) pintava o orbe de MP e o Gold
   por cima do fim do menu, que mora no topo (z 30): o SAIR ficava meio escondido, e com a faixa nova,
   inteiro. Enquanto o menu está aberto, a faixa desce para baixo do topo. */
html:not(#_) body.conta-menu-aberto #gameShell #battleVitalsStrip.battle-vitals-strip.battle-vitals-strip{z-index:29}