/* Duelos Troll MLBB - instalar como app (js/app-instalar.js). Prefijo "ins". Solo tokens de base.css.
     .insof    tarjeta "Puedes instalar...", arriba de la página; se cierra y no vuelve
     .inspie   bloque del pie: botón de instalar (o la explicación en iPhone) y una línea
     .insup    aviso flotante "Hay una versión nueva" con el botón "Actualizar" */

/* ---------- tarjeta de arriba ---------- */
.insof{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 16px;padding:10px 6px 10px 14px;border-radius:14px;
  background:var(--card);color:var(--fg);box-shadow:var(--shadow);
}
.insof p{flex:1 1 220px;min-width:0;margin:0;font-size:15px;line-height:20px}
.insb{display:flex;align-items:center;gap:4px;margin-left:auto}
.insx{
  flex:none;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--fg2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.insx:active{background:var(--fill)}

/* ---------- pie de página ---------- */
.inspie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 4px 0}
.inspie .btn{flex:none}
.inspie .foot{flex:1 1 220px;margin:0}

/* ---------- aviso de versión nueva ----------
   Arriba y centrado, por encima de la ficha (z-index 21) y por debajo del aviso flotante (40): abajo
   están la barra de secciones, la hoja de la ficha y los avisos. Desde tablet baja de la cabecera fija. */
.insup{
  position:fixed;left:16px;right:16px;top:calc(var(--top-h) + 8px + env(safe-area-inset-top,0px));z-index:30;
  width:-moz-fit-content;width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;
  display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border-radius:14px;
  background:var(--card);color:var(--fg);border:.5px solid var(--sep);box-shadow:var(--shadow);
  font-size:15px;line-height:20px;font-weight:600;
}
.insup[hidden]{display:none}
.insup .btn{flex:none;padding:6px 16px}